/* Dermoltre by Viviana Frattini — foglio di stile */

:root{
  --bianco:      oklch(0.9948 0.0035 85);
  --latte:       oklch(0.9578 0.0054 95.1);
  --inchiostro:  oklch(0.2378 0.0111 73.4);
  --inchiostro-2:oklch(0.2814 0.0139 67.2);
  --oro:         oklch(0.5071 0.0814 81.0);
  --oro-chiaro:  oklch(0.7961 0.0966 85.1);
  --grigio:      oklch(0.4633 0.0162 78.2);
  --sabbia:      oklch(0.9170 0.0145 84.6);
  --sabbia-2:    oklch(0.8073 0.0213 81.8);

  --display: "Archivo", system-ui, sans-serif;
  --testo: "Public Sans", system-ui, -apple-system, sans-serif;

  --bordo-largo: 1.25rem;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  /* niente overflow-x sul body: nessun elemento supera la viewport, e un
     contenitore di clipping romperebbe la testata sticky. Le parole lunghe
     si spezzano invece di allargare la pagina. */
  overflow-wrap:break-word;
  background:var(--bianco);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  line-height:0.98;
  letter-spacing:-0.015em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0; }

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--inchiostro); color:var(--bianco);
  padding:.85rem 1.15rem; z-index:20;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--oro);
  outline-offset:3px;
}

/* su fondo scuro l'oro pieno sta a 2.8:1, sotto il 3:1 che WCAG 2.2 chiede
   agli indicatori di focus: li serve la variante chiara (8.7:1) */
.menu a:focus-visible,
.footer-credit a:focus-visible{ outline-color:var(--oro-chiaro); }

/* la testata e sticky: senza questo il titolo di sezione atterra sotto */
#principale,
.listino,
.dentro,
.viviana{ scroll-margin-top:5.5rem; }

/* ---------- testata ---------- */

.testata{
  position:sticky; top:0; z-index:10;
  background:var(--bianco);
  border-bottom:1px solid var(--sabbia);
}

.riga-testata{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--bordo-largo);
}

.marchio{
  text-decoration:none;
  display:block;
  min-height:44px;
  display:flex; flex-direction:column; justify-content:center;
}

.marchio-nome{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:1.45rem;
  line-height:1;
  letter-spacing:-0.01em;
}

.marchio-firma{
  font-size:.72rem;
  color:var(--grigio);
  letter-spacing:.01em;
}

.apri-menu{
  width:46px; height:46px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--sabbia-2); border-radius:2px;
  cursor:pointer;
}
.apri-menu .tratti{ display:grid; gap:5px; width:20px; }
.apri-menu .tratti span{ display:block; height:2px; background:var(--inchiostro); }

.menu{
  position:fixed; inset:0;
  background:var(--inchiostro);
  display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  padding:0 var(--bordo-largo);
  transform:translateX(100%);
  visibility:hidden;
  /* visibility non si interpola: la si commuta a inizio apertura e a fine
     chiusura, cosi il drawer chiuso resta fuori dal tab order e il primo
     link e gia focusabile quando si apre */
  transition:transform .28s ease, visibility 0s linear .28s;
  z-index:15;
}
.menu.aperto{
  transform:translateX(0);
  visibility:visible;
  transition:transform .28s ease, visibility 0s linear 0s;
}

.menu a{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:2rem;
  color:var(--bianco);
  text-decoration:none;
  padding:.7rem 0;
  min-height:44px;
  border-bottom:1px solid oklch(0.99 0.0035 85 / .18);
}

body.menu-aperto{ overflow:hidden; }

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

.apertura{
  padding:2.75rem var(--bordo-largo) 1rem;
}

.apertura h1{
  font-size:clamp(1.85rem,8.6vw,3.4rem);
  line-height:1.04;
  font-variation-settings:"wdth" 120,"wght" 850;
}
/* le interruzioni scritte a mano valgono solo dove c'e larghezza per reggerle */
.apertura h1 br{ display:none; }

.apertura-sotto{
  margin-top:1.35rem;
  font-size:1.06rem;
  color:var(--grigio);
  max-width:34em;
}

.bottone{
  display:inline-block;
  margin-top:1.6rem;
  padding:.95rem 1.6rem;
  min-height:44px;
  background:var(--inchiostro);
  color:var(--bianco);
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  border-radius:2px;
}
.bottone:hover{ background:var(--inchiostro-2); }

.apertura-foto{ margin:2.5rem 0 0; }
.apertura-foto img{ margin-inline:auto; max-width:min(100%,430px); }

.apertura-foto figcaption{
  margin-top:.75rem;
  font-size:.85rem;
  color:var(--grigio);
  text-align:center;
  max-width:30em;
  margin-inline:auto;
}

/* ---------- fatti ---------- */

.fatti{
  background:var(--latte);
  padding:2.25rem var(--bordo-largo);
}
.fatti dl{ margin:0; display:grid; gap:1.6rem; }
.fatti div{ display:grid; gap:.3rem; }
.fatti dt{
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 700;
  font-size:1.02rem;
}
.fatti dd{ margin:0; color:var(--grigio); }

/* ---------- listino ---------- */

.listino{ padding:3.25rem var(--bordo-largo); }

.listino h2,
.dentro h2,
.viviana h2{ font-size:clamp(1.9rem,7.5vw,2.6rem); }

.listino-intro{
  margin-top:.9rem;
  color:var(--grigio);
  max-width:32em;
}

.prodotti{
  list-style:none;
  margin:2.25rem 0 0;
  padding:0;
  border-top:1px solid var(--sabbia);
}

.prodotti li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.25rem;
  padding:1.35rem 0;
  border-bottom:1px solid var(--sabbia);
}

.prodotto-nome h3{
  font-size:1.16rem;
  font-variation-settings:"wdth" 108,"wght" 700;
  line-height:1.15;
}
.prodotto-nome p{
  margin-top:.35rem;
  font-size:.94rem;
  color:var(--grigio);
  max-width:30em;
}

.prezzo{
  font-family:var(--display);
  font-variation-settings:"wdth" 122,"wght" 800;
  font-size:clamp(1.7rem,6.4vw,2.4rem);
  line-height:.95;
  color:var(--oro);
  white-space:nowrap;
}
.prezzo span{ font-size:.45em; vertical-align:.55em; margin-left:.1em; }

/* ---------- cosa c'è dentro ---------- */

.dentro{
  background:var(--inchiostro);
  color:var(--sabbia);
  padding:3.25rem var(--bordo-largo);
}
.dentro h2{ color:var(--bianco); }

.dentro-intro{
  margin-top:.9rem;
  max-width:32em;
  color:var(--sabbia-2);
}

.ingredienti{
  margin:2.25rem 0 0;
  display:grid; gap:1.5rem;
}
.ingredienti div{
  display:grid; gap:.3rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid oklch(0.99 0.0035 85 / .16);
}
.ingredienti div:last-child{ border-bottom:0; padding-bottom:0; }
.ingredienti dt{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:1.2rem;
  color:var(--oro-chiaro);
}
.ingredienti dd{ margin:0; color:var(--sabbia-2); }

.dentro-chiusa{
  margin-top:2rem;
  max-width:34em;
  color:var(--sabbia-2);
}

.dentro-foto{ margin:2.5rem 0 0; }
.dentro-foto img{ border-radius:2px; }

/* ---------- chi la formula ---------- */

.viviana{ padding:3.25rem var(--bordo-largo); }

.ritratto{ margin:0 0 2rem; }
.ritratto img{
  width:min(100%,240px);
  border-radius:2px;
}

.viviana-testo p + p{ margin-top:1rem; }

.citazione{
  margin-top:1.1rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 106,"wght" 500;
  font-size:1.32rem;
  line-height:1.34;
  text-wrap:balance;
}

.viviana-testo > p:not(.citazione){ color:var(--grigio); max-width:34em; }

.dedica{
  margin-top:2.25rem;
  background:var(--latte);
  padding:1.5rem;
  border-radius:2px;
}
.dedica-testo{ max-width:32em; }

.insegna{ margin:2.5rem 0 0; }
.insegna img{ width:min(100%,420px); border-radius:2px; }

/* ---------- chiusura ---------- */

.chiusura{
  background:var(--inchiostro);
  color:var(--sabbia);
  padding:2.75rem var(--bordo-largo);
}
.chiusura-marchio{
  font-family:var(--display);
  font-variation-settings:"wdth" 114,"wght" 800;
  font-size:1.5rem;
  color:var(--bianco);
  line-height:1;
}
.chiusura-marchio span{
  display:block;
  font-family:var(--testo);
  font-size:.78rem;
  font-weight:400;
  color:var(--sabbia-2);
  margin-top:.35rem;
}
.chiusura-nota{
  margin-top:1.5rem;
  font-size:.9rem;
  color:var(--sabbia-2);
  max-width:36em;
}
.footer-credit{
  margin-top:1.75rem;
  font-size:.8rem;
  color:var(--sabbia-2);
}
.footer-credit a{ color:var(--oro-chiaro); }

/* ---------- 768px e oltre ---------- */

@media (min-width:768px){
  :root{ --bordo-largo:3rem; }

  .apri-menu{ display:none; }

  .menu{
    position:static;
    transform:none;
    visibility:visible;
    flex-direction:row;
    align-items:center;
    gap:2rem;
    padding:0;
    background:none;
  }
  .menu a{
    font-family:var(--testo);
    font-size:.98rem;
    font-weight:500;
    color:var(--inchiostro);
    border-bottom:0;
    padding:.55rem 0;
    display:flex; align-items:center;
  }
  .menu a:hover{ color:var(--oro); }

  .apertura{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:3rem;
    align-items:center;
    padding-block:4.5rem 3rem;
  }
  .apertura h1{ font-size:clamp(3rem,5.4vw,4.6rem); line-height:0.98; }
  .apertura h1 br{ display:inline; }
  .apertura-foto{ margin:0; }
  .apertura-foto img{ max-width:100%; }
  .apertura-foto figcaption{ text-align:left; margin-inline:0; }

  .fatti dl{ grid-template-columns:repeat(3,1fr); gap:2.5rem; }

  .prodotti li{ padding:1.75rem 0; }
  .prodotto-nome h3{ font-size:1.4rem; }

  .dentro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
    align-items:center;
  }
  .ingredienti{ grid-template-columns:1fr 1fr; gap:1.5rem 2.5rem; }
  .ingredienti div:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
  .dentro-foto{ margin:0; }

  .viviana{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:3.5rem;
    align-items:start;
  }
  .ritratto{ margin:0; }
  .ritratto img{ width:100%; }
  .citazione{ font-size:1.6rem; }

  .chiusura{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    align-items:end;
  }
  .chiusura-nota{ margin-top:0; }
  .footer-credit{ grid-column:1 / -1; }
}

@media (min-width:1200px){
  :root{ --bordo-largo:5rem; }
  .apertura{ gap:5rem; }
  .listino,.dentro,.viviana{ padding-block:5rem; }
}

@media (min-width:1440px){
  /* i blocchi senza fondo colorato si centrano */
  .riga-testata,.apertura,.fatti dl,.listino,.viviana{
    max-width:1360px;
    margin-inline:auto;
  }
  /* quelli con fondo pieno restano a tutta larghezza: rientra il contenuto */
  .dentro,.chiusura{
    padding-inline:max(5rem,(100vw - 1360px) / 2);
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}