/* =============================================================
   LUNAVORO ATELIER · sito dimostrativo
   Stile Minimal / Clean: tutto parte dalle variabili qui sotto.
   ============================================================= */

/* Font liberi (SIL Open Font License), salvati nel sito: nessuna richiesta a Google */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-corsivo.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope.woff2") format("woff2");
}

:root {
  /* colori del marchio */
  --avorio: #f3ebdd;
  --pietra: #e9dfcd;
  --petrolio: #182222;
  --bronzo: #b38b5e;
  --bordeaux: #6a2838;
  /* colori derivati, per i testi */
  --testo: var(--petrolio);
  --testo-tenue: #4b5552;
  --bronzo-testo: #6f5129;
  --linea: rgb(24 34 34 / 0.2);
  --su-scuro: #f3ebdd;
  --su-scuro-tenue: #c3bcae;

  /* caratteri */
  --f-titoli: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --f-testo: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --t-apertura: clamp(2.9rem, 6vw, 5.75rem);
  --t-pagina: clamp(2.9rem, 5.8vw, 5rem);
  --t-sezione: clamp(2.1rem, 3.5vw, 3.25rem);
  --t-medio: clamp(1.5rem, 2.2vw, 1.875rem);
  --t-testo: 1rem;
  --t-piccolo: 0.875rem;

  /* spazi */
  --margine: clamp(1.25rem, 5vw, 5rem);
  --s-sezione: clamp(4.5rem, 10vw, 9rem);
  --s-medio: clamp(1.75rem, 4vw, 3.5rem);
  --larghezza: 90rem;
  --colonna: 34rem;
  --h-testata: 4.75rem;

  /* movimento */
  --m-breve: 200ms;
  --m-medio: 450ms;
  --m-rivela: 800ms;
  --m-apertura: 900ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-testata) + 3.5rem);
}

body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font: 400 var(--t-testo)/1.7 var(--f-testo);
  font-variant-numeric: lining-nums;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--f-titoli); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: var(--t-pagina); }
h2 { font-size: var(--t-sezione); }
h3 { font-size: var(--t-sezione); }
p { margin: 0 0 1em; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.notte :focus-visible, .piede :focus-visible, .avviso-demo :focus-visible { outline-color: var(--su-scuro); }

.salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--petrolio);
  color: var(--su-scuro);
}
.salta:focus { top: 1rem; }

/* ---------------------------------------------------------- avviso e testata */

.avviso-demo {
  margin: 0;
  padding: 0.5rem var(--margine);
  background: var(--petrolio);
  color: var(--su-scuro);
  font-size: 0.8125rem;
  text-align: center;
}

/* resta in cima: sparisce scendendo e torna appena si risale */
.testata {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.25rem max(var(--margine), calc((100% - var(--larghezza)) / 2 + var(--margine)));
  border-bottom: 1px solid transparent;
  background: var(--avorio);
  view-transition-name: testata;
  transition: transform var(--m-medio) var(--curva), border-color var(--m-breve) var(--curva);
}
.testata--staccata { border-bottom-color: var(--linea); }
.testata--nascosta { transform: translateY(-100%); }
.testata:focus-within { transform: none; }

.marchio {
  margin: 0;
  font-family: var(--f-titoli);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-decoration: none;
  text-transform: uppercase;
}

.menu { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); }
.menu a { position: relative; padding: 0.35rem 0; font-size: var(--t-piccolo); text-decoration: none; }
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--curva);
}
.menu a:hover::after, .menu a:focus-visible::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }

.menu-btn { display: none; }

/* ---------------------------------------------------------- bottoni */

.bottone {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--petrolio);
  background: var(--petrolio);
  color: var(--su-scuro);
  font: inherit;
  font-size: var(--t-piccolo);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--m-breve) var(--curva), color var(--m-breve) var(--curva);
}
.bottone:hover, .bottone:focus-visible { background: transparent; color: var(--petrolio); }
.bottone:active { transform: translateY(1px); }

/* al passaggio la riga si ridisegna da sinistra */
.collegamento {
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
  font-size: var(--t-piccolo);
  text-decoration: none;
}
.collegamento::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bronzo);
}
.collegamento:hover::after, .collegamento:focus-visible::after { background: var(--petrolio); animation: ridisegna var(--m-medio) var(--curva); }

@keyframes ridisegna {
  from { transform: scaleX(0); transform-origin: left; }
}

/* ---------------------------------------------------------- apertura */

.apertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-medio);
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 0 0 var(--margine);
}
.apertura h1 { max-width: 13em; margin-bottom: 1.5rem; font-size: var(--t-apertura); }
.apertura__testo p { max-width: 31rem; margin-bottom: 2rem; color: var(--testo-tenue); }
.apertura__foto {
  width: 100%;
  height: min(46rem, calc(100svh - 8rem));
  min-height: 26rem;
  object-fit: cover;
  object-position: 50% 30%;
  animation: scopri var(--m-apertura) var(--curva) both;
}

/* l'apertura di ogni pagina: gli elementi salgono uno dopo l'altro */
.apertura__testo > *, .titolo-pagina > *, .scheda__testo > *, .articolo header > *, .testo-pagina > h1 {
  animation: sali 700ms var(--curva) both;
}
.apertura__testo > :nth-child(2), .titolo-pagina > :nth-child(2), .scheda__testo > :nth-child(2), .articolo header > :nth-child(2) { animation-delay: 90ms; }
.apertura__testo > :nth-child(3), .titolo-pagina > :nth-child(3), .scheda__testo > :nth-child(3), .articolo header > :nth-child(3) { animation-delay: 180ms; }
.scheda__testo > :nth-child(4) { animation-delay: 260ms; }
.scheda__testo > :nth-child(5) { animation-delay: 330ms; }
.scheda__testo > :nth-child(n + 6) { animation-delay: 400ms; }

@keyframes sali {
  from { opacity: 0; transform: translateY(1.25rem); }
}

@keyframes scopri {
  /* parte già quasi tutta visibile: se l'animazione si ferma, la foto si vede lo stesso */
  from { clip-path: inset(0 0 16% 0); }
  to { clip-path: inset(0); }
}

/* ---------------------------------------------------------- notte */

.notte {
  margin-top: var(--s-sezione);
  background: var(--petrolio);
  color: var(--su-scuro);
}
.notte img {
  width: 100%;
  max-height: 54rem;
  object-fit: cover;
  object-position: 50% 62%;
  /* la foto sfuma nel fondo, così non si vede dove comincia */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%);
  mask-image: linear-gradient(to bottom, transparent, #000 24%);
}
.notte__testo {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--margine) 0;
}
.notte__testo p { max-width: 30rem; margin: 1rem 0 0; color: var(--su-scuro-tenue); }

/* ---------------------------------------------------------- le ore */

.ore {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--s-medio) var(--margine) 0;
}

.ore__linea { display: none; }

.js .ore__linea {
  position: relative;
  display: block;
  height: 4.5rem;
  margin-bottom: var(--s-medio);
  border-bottom: 1px solid var(--bronzo);
}

.ore__luna {
  position: absolute;
  bottom: -7px;
  left: var(--pos, 13%);
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border: 1px solid var(--bronzo);
  border-radius: 50%;
  background: var(--avorio);
  transition: left 250ms var(--curva);
}

.ore__ora {
  position: absolute;
  bottom: 0.75rem;
  transform: translateX(-50%);
  min-width: 3.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: var(--testo-tenue);
  font: inherit;
  font-family: var(--f-titoli);
  font-size: var(--t-medio);
  cursor: pointer;
  transition: color var(--m-breve) var(--curva);
}
.ore__ora:hover, .ore__ora[aria-selected="true"] { color: var(--testo); }

.ore__pannello {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-medio);
  margin-bottom: var(--s-medio);
}
.ore__pannello[hidden] { display: none; }
.js .ore__pannello { animation: cambia 500ms var(--curva) both; }
.js .ore__pannello .ore__testo { animation: sali 550ms var(--curva) 80ms both; }

@keyframes cambia {
  from { opacity: 0; }
}
.ore__foto { display: block; }
.ore__frase { margin: 0.75rem 0 1.25rem; font-family: var(--f-titoli); font-size: var(--t-medio); line-height: 1.35; }
.ore__note { margin-bottom: 1.75rem; color: var(--testo-tenue); font-size: var(--t-piccolo); }

/* ---------------------------------------------------------- sezioni */

.sezione {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: var(--s-sezione) var(--margine) 0;
}
.sezione--stretta { max-width: 60rem; padding-top: 0; }

.sezione__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: var(--s-medio);
}

.titolo-pagina {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6rem) var(--margine) 0;
}
.titolo-pagina p { max-width: var(--colonna); margin: 1.25rem 0 0; color: var(--testo-tenue); }
.titolo-pagina + .sezione--stretta { padding-top: var(--s-medio); }

/* tre collezioni */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.collezione { display: block; text-decoration: none; }
.collezione__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* le foto si avvicinano appena al passaggio */
.cornice { display: block; overflow: hidden; }
.cornice img { transition: transform 700ms var(--curva); }
a:hover > .cornice img, a:focus-visible > .cornice img { transform: scale(1.035); }
.collezione__nome { display: block; margin-top: 1.1rem; font-family: var(--f-titoli); font-size: var(--t-medio); }
.collezione__nome { border-bottom: 1px solid transparent; width: fit-content; transition: border-color var(--m-breve) var(--curva); }
.collezione:hover .collezione__nome { border-bottom-color: currentColor; }
.collezione__breve { display: block; margin-top: 0.35rem; color: var(--testo-tenue); font-size: var(--t-piccolo); }

/* foto e testo */
.due {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}
.due--inverso { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.due__foto { width: 100%; max-height: 42rem; object-fit: cover; }
.due__testo { max-width: var(--colonna); }
.due__testo h2 { margin-bottom: 1.25rem; }
.due__testo p { color: var(--testo-tenue); }
.due__testo .collegamento { margin-top: 0.5rem; }

/* journal */
.appunti { border-top: 1px solid var(--linea); }
.appunti a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.25rem 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  transition: border-color var(--m-breve) var(--curva);
}
.appunti a:hover { border-bottom-color: var(--petrolio); }
.appunti__titolo { font-family: var(--f-titoli); font-size: var(--t-medio); line-height: 1.25; }
.appunti__sommario { color: var(--testo-tenue); font-size: var(--t-piccolo); }

/* ---------------------------------------------------------- collezioni */

.salti {
  position: sticky;
  top: var(--h-testata);
  z-index: 10;
  display: flex;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-top: var(--s-medio);
  padding: 0.75rem max(var(--margine), calc((100% - var(--larghezza)) / 2 + var(--margine)));
  overflow-x: auto;
  border-bottom: 1px solid var(--linea);
  background: var(--avorio);
  scrollbar-width: none;
  transition: top var(--m-medio) var(--curva);
}
.testata-su .salti { top: 0; }
.salti a { flex: none; padding: 0.15rem 0; color: var(--testo-tenue); font-size: var(--t-piccolo); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--m-breve) var(--curva), border-color var(--m-breve) var(--curva); }
.salti a:hover, .salti a[aria-current="true"] { color: var(--testo); border-bottom-color: var(--bronzo); }

.collezione-blocco__testa { max-width: var(--colonna); margin-bottom: var(--s-medio); }
.collezione-blocco__testa p { margin: 1rem 0 0; color: var(--testo-tenue); }

.elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.elenco--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
.voce { display: block; text-decoration: none; }
.voce__foto { width: 100%; }
.voce__testo { display: block; margin-top: 1rem; }
.voce__nome { display: block; width: fit-content; font-family: var(--f-titoli); font-size: var(--t-medio); line-height: 1.25; border-bottom: 1px solid transparent; transition: border-color var(--m-breve) var(--curva); }
.voce:hover .voce__nome { border-bottom-color: currentColor; }
.voce__sotto { display: block; margin-top: 0.2rem; color: var(--testo-tenue); font-size: var(--t-piccolo); }

/* ---------------------------------------------------------- scheda */

.scheda {
  --accento: var(--bronzo-testo);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 var(--margine) 0 0;
}
.scheda[data-tono="bordeaux"] { --accento: var(--bordeaux); }
.scheda__foto img { width: 100%; }
.scheda__testo { max-width: var(--colonna); padding-top: clamp(1.5rem, 5vw, 4.5rem); }
.scheda__testo p { color: var(--testo-tenue); }
.scheda__coll { font-size: var(--t-piccolo); color: var(--accento); text-underline-offset: 0.2em; }
.scheda h1 { margin-top: 0.75rem; }
.scheda__ora { margin: 0.75rem 0 0; color: var(--accento) !important; font-family: var(--f-titoli); font-size: var(--t-medio); }
.scheda .scheda__frase { margin: 1.25rem 0 1.5rem; color: var(--testo); font-family: var(--f-titoli); font-size: var(--t-medio); line-height: 1.35; }
.scheda .scheda__dove { color: var(--testo); font-family: var(--f-titoli); font-style: italic; }

.note { margin: 2rem 0; border-top: 1px solid var(--linea); }
.note div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--linea); }
.note dt { color: var(--testo-tenue); font-size: var(--t-piccolo); }
.note dd { margin: 0; }

.vicine {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--larghezza);
  margin: var(--s-sezione) auto 0;
  padding: 0 var(--margine);
}
.vicine a { font-family: var(--f-titoli); font-size: var(--t-medio); line-height: 1.2; text-decoration: none; transition: transform 300ms var(--curva); }
.vicine a[rel="next"] { text-align: right; }
.vicine span { display: block; margin-bottom: 0.2rem; color: var(--testo-tenue); font-family: var(--f-testo); font-size: var(--t-piccolo); }
.vicine a[rel="prev"]:hover { transform: translateX(-0.35rem); }
.vicine a[rel="next"]:hover { transform: translateX(0.35rem); }

/* compare quando il pulsante della scheda esce dallo schermo */
.barra-scheda {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--margine);
  border-top: 1px solid var(--linea);
  background: var(--avorio);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--m-medio) var(--curva), visibility var(--m-medio);
}
.barra-scheda.visibile { transform: none; visibility: visible; }
.barra-scheda p { margin: 0; line-height: 1.25; }
.barra-scheda strong { display: block; font-family: var(--f-titoli); font-size: 1.25rem; font-weight: 500; }
.barra-scheda span { color: var(--testo-tenue); font-size: 0.8125rem; }
.barra-scheda .bottone { flex: none; padding: 0.6rem 1.1rem; }

.atmosfera { max-width: 72rem; margin: var(--s-sezione) auto 0; padding: 0 var(--margine); }
.atmosfera__foto { width: 100%; max-height: 40rem; object-fit: cover; }
.atmosfera figcaption { margin-top: 0.85rem; color: var(--testo-tenue); font-family: var(--f-titoli); font-style: italic; }

/* ---------------------------------------------------------- atelier */

.tappe li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  max-width: 50rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linea);
}
.tappe li:last-child { border-bottom: 1px solid var(--linea); }
.tappe__anno { font-family: var(--f-titoli); font-size: var(--t-medio); line-height: 1.3; }

/* ---------------------------------------------------------- articolo e testi */

.articolo { max-width: 50rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--margine) 0; }
.articolo h1 { margin-top: 0.75rem; }
.articolo__sommario { margin: 1rem 0 0; color: var(--testo-tenue); }
.articolo__foto { width: 100%; max-height: 34rem; margin: var(--s-medio) 0; object-fit: cover; }
.articolo__testo { max-width: 38rem; font-size: 1.125rem; }
.articolo .scheda__coll { color: var(--bronzo-testo); font-size: var(--t-piccolo); }

.testo-pagina { max-width: 42rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--margine) 0; }
.testo-pagina h1 { margin-bottom: 1.5rem; }
.testo-pagina h2 { margin: 2.5rem 0 0.75rem; font-size: var(--t-medio); }
.testo-pagina ul { margin-top: 0.75rem; }
.testo-pagina li { padding: 0.25rem 0; }

/* ---------------------------------------------------------- contatti */

.contatti {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  padding-top: var(--s-medio);
}
.contatti h2 { margin-bottom: 1.25rem; font-size: var(--t-medio); }
.contatti__lista li { padding: 0.25rem 0; overflow-wrap: anywhere; }
.nota { margin-top: 1rem; color: var(--testo-tenue); font-size: var(--t-piccolo); }

.copia {
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--linea);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.modulo { display: grid; gap: 1.1rem; max-width: 30rem; }
.modulo label { display: grid; gap: 0.35rem; font-size: var(--t-piccolo); }
.modulo input, .modulo select {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--testo-tenue);
  border-radius: 0;
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 1rem;
}
.modulo .bottone { justify-self: start; }
.modulo__stato { min-height: 1.5em; margin: 0; font-size: var(--t-piccolo); }

/* ---------------------------------------------------------- piede e 404 */

.piede {
  margin-top: var(--s-sezione);
  padding: var(--s-medio) var(--margine) 2rem;
  background: var(--petrolio);
  color: var(--su-scuro);
}
.piede__riga {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  max-width: var(--larghezza);
  margin: 0 auto;
}
.piede__riga p { color: var(--su-scuro-tenue); font-size: var(--t-piccolo); }
.marchio--piede { margin-bottom: 0.75rem; color: var(--su-scuro) !important; font-size: 1.3125rem !important; }
.piede nav a { display: block; width: fit-content; padding: 0.2rem 0; font-size: var(--t-piccolo); text-decoration: none; }
.piede nav a { transition: transform var(--m-breve) var(--curva); }
.piede nav a:hover { transform: translateX(0.25rem); text-decoration: underline; text-underline-offset: 0.2em; }
.piede__su { margin-left: 0.75rem; white-space: nowrap; }
.piede__nota {
  max-width: var(--larghezza);
  margin: var(--s-medio) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(243 235 221 / 0.2);
  color: var(--su-scuro-tenue);
  font-size: 0.8125rem;
}

.pagina-errore {
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 1rem;
  min-height: 100svh;
  padding: var(--margine);
}
.pagina-errore p { margin: 0; }
.pagina-errore .bottone { margin-top: 1rem; }

/* ---------------------------------------------------------- telefono */

@media (max-width: 899px) {
  .apertura { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 2rem; }
  .apertura__testo { padding: 1.5rem var(--margine) 0; }
  .apertura__foto { height: auto; aspect-ratio: 1; min-height: 0; }

  .scheda { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .scheda__testo { max-width: none; padding: 2rem var(--margine) 0; }

  .due, .due--inverso, .contatti { grid-template-columns: minmax(0, 1fr); }
  .due--inverso .due__foto { order: -1; }
  .due__foto { max-height: 28rem; }
}

@media (max-width: 759px) {
  .js .menu-btn {
    display: inline-block;
    min-height: 2.75rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--t-piccolo);
    cursor: pointer;
  }
  .js .menu { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding-top: 0.5rem; }
  .js .menu.aperto { display: flex; }
  .js .menu.aperto a { animation: sali 400ms var(--curva) both; }
  .js .menu.aperto a:nth-child(2) { animation-delay: 50ms; }
  .js .menu.aperto a:nth-child(3) { animation-delay: 100ms; }
  .js .menu.aperto a:nth-child(4) { animation-delay: 150ms; }
  .menu a { width: fit-content; padding: 0.55rem 0; font-size: 1.0625rem; }

  .ore__pannello { grid-template-columns: minmax(0, 1fr); }

  .trio { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .collezione__foto { aspect-ratio: 4 / 3; }

  /* nell'elenco ogni fragranza diventa una riga: niente elementi isolati */
  .elenco, .elenco--due { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--linea); }
  .voce { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linea); }
  .voce__testo { margin-top: 0; }

  .appunti a { grid-template-columns: minmax(0, 1fr); }
  .tappe li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .piede__riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede__riga > div { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- comparsa allo scorrimento */
/* Le classi le mette main.js solo a quello che è fuori schermo: senza JavaScript si vede tutto. */

.js .rivela {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity var(--m-rivela) var(--curva) var(--ritardo, 0ms), transform var(--m-rivela) var(--curva) var(--ritardo, 0ms);
}
.js .rivela--foto {
  transform: none;
  clip-path: inset(0 0 18% 0);
  transition: opacity var(--m-rivela) var(--curva) var(--ritardo, 0ms), clip-path 1100ms var(--curva) var(--ritardo, 0ms);
}
.js .rivela.visibile { opacity: 1; transform: none; clip-path: inset(0); }

/* ---------------------------------------------------------- foto che scorrono più lente della pagina */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .notte img, .atmosfera__foto, .collezione__foto, .due__foto, .articolo__foto {
      animation: deriva linear both;
      animation-timeline: view();
    }
    .notte img { --da: 74%; --a: 50%; }

    .lettura {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 30;
      width: 100%;
      height: 2px;
      background: var(--bronzo);
      transform-origin: left;
      animation: leggi linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes deriva {
  from { object-position: 50% var(--da, 62%); }
  to { object-position: 50% var(--a, 38%); }
}

@keyframes leggi {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------------------------------------------------------- passaggio tra le pagine */
/* Il browser sfuma una pagina nell'altra; chi non lo supporta vede solo l'apertura della pagina. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: pagina-esce 240ms ease-in both; }
  ::view-transition-new(root) { animation: pagina-entra 460ms var(--curva) 90ms both; }
  ::view-transition-group(flacone) { animation-duration: 560ms; animation-timing-function: var(--curva); }
}

/* il flacone cliccato vola al suo posto nella scheda: il nome all'origine lo mette main.js */
.scheda__foto img { view-transition-name: flacone; }

@keyframes pagina-esce {
  to { opacity: 0; }
}

@keyframes pagina-entra {
  from { opacity: 0; transform: translateY(1rem); }
}

@media print {
  .js .rivela { opacity: 1; transform: none; clip-path: none; }
  .barra-scheda, .testata { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rivela { opacity: 1; transform: none; clip-path: none; }
}