/* =========================================================================
   Lisa Bignone — psicologa, psicoterapeuta in formazione
   Foglio di stile unico. Nessun framework, nessuna dipendenza esterna.

   Due dispositivi grafici reggono tutta la pagina, entrambi presi dal
   marchio (una mano che regge un loto dentro un rettangolo disegnato):
     · .cornice   il rettangolo che circonda le immagini
     · .occhiello lo stelo verticale che precede ogni titolo di sezione
   ========================================================================= */

/* ---------------------------------------------------------------- font -- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('../fonts/archivonarrow-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- token -- */

:root {
  /* superfici e inchiostri */
  --sabbia:        #F7F1E7;
  --argilla:       #EDE0CE;
  --inchiostro:    #2E2620;
  --inchiostro-70: #5C5148;
  --mattone:       #A32B21;
  --mattone-scuro: #7E1F18;
  --mattone-velo:  rgba(163, 43, 33, .45);
  --salvia:        #7E8B76;
  --salvia-scuro:  #5C6856;
  --salvia-velo:   rgba(126, 139, 118, .5);
  --cenere:        #D9C3B6;

  /* tipografia */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --testo:   'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --utility: 'Archivo Narrow', 'Segoe UI', system-ui, sans-serif;

  /* raggi: tutto morbido, niente spigoli vivi */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;

  /* ritmo verticale */
  --spazio-sezione: clamp(5rem, 11vh, 9.5rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* movimento */
  --ritmo: 620ms;
  --curva: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- di base -- */

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

html {
  scroll-behavior: smooth;
  /* la testata resta fissa: le ancore non devono finirci sotto */
  scroll-padding-top: 7.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sabbia);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mattone); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--mattone-scuro); }

:focus-visible {
  outline: 2px solid var(--mattone);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--mattone);
  color: var(--sabbia);
  padding: .7rem 1.4rem;
  border-radius: 0 0 var(--r-s) var(--r-s);
  font-family: var(--utility);
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  transition: transform 200ms var(--curva);
}
.skip:focus { transform: translate(-50%, 0); color: var(--sabbia); }

/* -------------------------------------------------------- tipografia --- */

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 144;
  font-weight: 300;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 400;
}

h4 {
  font-family: var(--utility);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--mattone);
  margin: 0 0 1rem;
}

.attacco {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--inchiostro);
}

.chiusa {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--mattone);
}

.domande em { font-style: normal; color: var(--mattone); }

.nota { font-size: .9rem; color: var(--inchiostro-70); }

/* occhiello — lo stelo del loto: una linea verticale che precede il titolo.
   Fa anche da titolo di sezione (non c'e' un h2 separato sotto), quindi ha
   un corpo importante: e' la scritta che si legge per prima. */
.occhiello {
  font-family: var(--utility);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--mattone);
  margin: 0 0 1.75rem;
}
.occhiello::before {
  content: '';
  display: block;
  width: 1px;
  height: 3.25rem;
  margin-bottom: 1.15rem;
  background: currentColor;
  transform-origin: top center;
}
.occhiello--salvia { color: var(--salvia-scuro); }

.colonna-testo--centrata .occhiello::before,
.intestazione-offerta .occhiello::before,
.ponte__intestazione .occhiello::before { margin-inline: auto; }

/* -------------------------------------------------- cornice del marchio -- */

.cornice { position: relative; display: block; }

.cornice::before {
  content: '';
  position: absolute;
  inset: -18px;
  border: 1px solid var(--mattone-velo);
  border-radius: calc(var(--r-l) + 18px);
  /* impercettibile fuori squadra: il rettangolo del marchio e' disegnato a mano */
  transform: rotate(-.35deg);
  pointer-events: none;
}

.cornice img {
  border-radius: var(--r-l);
  width: 100%;
  object-fit: cover;
}

.cornice--sottile::before { inset: -14px; border-radius: calc(var(--r-l) + 14px); }
.cornice--salvia::before  { border-color: var(--salvia-velo); transform: rotate(.4deg); }

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

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* la sfocatura sta su uno pseudo-elemento e non sulla testata stessa:
   backdrop-filter renderebbe la testata il blocco contenitore dei figli in
   position:fixed, e il pannello del menu mobile resterebbe imprigionato in
   una striscia alta quanto la testata */
.testata::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 241, 231, .82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--curva);
}
.testata.e-scrollata::before { border-bottom-color: var(--cenere); }

.testata__interno {
  max-width: 1240px;
  margin-inline: auto;
  padding: 1.35rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--inchiostro);
}
.marchio__segno { width: auto; height: 3.4rem; }
.marchio__nome {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
}

.menu ul {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  margin: 0;
  padding: 0;
}
.menu a {
  font-family: var(--utility);
  font-size: .82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--inchiostro-70);
  text-decoration: none;
  padding: .5rem 0;
  display: inline-block;
  position: relative;
}
.menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: var(--mattone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--curva);
}
.menu a:hover { color: var(--mattone); }
.menu a:hover::after,
.menu a[aria-current='true']::after { transform: scaleX(1); }
.menu a[aria-current='true'] { color: var(--mattone); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .6rem .2rem;
  cursor: pointer;
  color: var(--inchiostro);
  font-family: var(--utility);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.menu-toggle__barre {
  position: relative;
  width: 22px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: border-color 200ms var(--curva);
}

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

.apertura {
  position: relative;
  isolation: isolate; /* la filigrana resta sotto il contenuto senza bisogno di z-index sui figli */
  overflow: hidden; /* non deve sconfinare nella sezione successiva */
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) var(--spazio-sezione);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* il marchio, enorme e sbiadito, in filigrana dietro l'apertura: la stessa
   identita' del logo, mai al centro dell'attenzione */
.apertura::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2rem;
  right: -1.5vw;
  width: min(11rem, 20vw);
  aspect-ratio: 155 / 360;
  background: url('../img/logo.png') no-repeat top center / contain;
  opacity: .06;
  transform: rotate(3deg);
  pointer-events: none;
}

.apertura__nome {
  font-size: clamp(2.7rem, 7.4vw, 5.5rem);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.025em;
  margin: 0 0 1.1rem;
}

/* "Psicologa e Psicoterapeuta in formazione" — in rosso, subito sotto il nome */
.apertura__qualifica {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  font-weight: 500;
  color: var(--mattone);
  margin: 0 0 1.15rem;
}

/* "Psicologia Transpersonale, Yoga e Meditazione…" — ancora piu' quieta */
.apertura__ruolo {
  font-size: 1.05rem;
  color: var(--inchiostro-70);
  opacity: .78;
  max-width: 36ch;
  margin-bottom: 2.6rem;
}

.apertura__ritratto .cornice img { aspect-ratio: 4 / 5; }

/* citazione */

.citazione { margin: 0; }

.citazione blockquote { margin: 0; }

.citazione--apertura {
  border-left: 1px solid var(--mattone-velo);
  padding-left: 1.6rem;
  max-width: 40ch;
}
.citazione--apertura blockquote {
  display: grid; /* le due citazioni si sovrappongono nella stessa cella */
}
.citazione__testo {
  grid-area: 1 / 1;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 60;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  font-weight: 300;
  line-height: 1.4;
  font-style: italic;
  margin: 0;
  transition: opacity 900ms var(--curva);
}
.citazione__testo.e-nascosta { opacity: 0; pointer-events: none; }

.citazione__fonte {
  font-family: var(--utility);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--inchiostro-70);
  margin-top: 1rem;
  display: grid;
}
.citazione__fonte span { grid-area: 1 / 1; transition: opacity 900ms var(--curva); }
.citazione__fonte span.e-nascosta { opacity: 0; }

.scendi {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 3rem;
  font-family: var(--utility);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--inchiostro-70);
  text-decoration: none;
}
.scendi svg { width: 14px; height: 24px; }
.scendi:hover { color: var(--mattone); }
.scendi:hover svg { animation: scendi-giu 1.1s var(--curva) infinite; }

@keyframes scendi-giu {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

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

.sezione { padding-block: var(--spazio-sezione); }
.sezione--argilla { background: var(--argilla); }

.sezione__interno {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.colonna-testo { max-width: 62ch; }
.colonna-testo--centrata {
  margin-inline: auto;
  text-align: center;
  max-width: 60ch;
}
.colonna-testo--centrata .chiusa { color: var(--mattone); }

.griglia-testo-figura,
.griglia-figura-testo {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.griglia-figura-testo { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.griglia-testo-figura--stretta { align-items: center; }

.figura { margin: 0; }
.figura--alta,
.griglia-figura-testo .figura { position: sticky; top: 7.5rem; }
.figura--alta .cornice img,
.griglia-figura-testo .figura .cornice img { aspect-ratio: 3 / 4; }
/* il ritratto di chi sono resta un passo indietro rispetto a quello dell'apertura */
.figura--alta { width: 68%; justify-self: center; }

/* lo scatto dell'alba e' verticale e la luna sta in alto: un taglio panoramico
   la perderebbe, quindi la foto resta nel suo formato e si stringe in colonna */
.figura--larga {
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  max-width: 27rem;
}
.figura--larga .cornice img { aspect-ratio: 3 / 4; }

/* ponte psicologia e yoga */

.ponte__intestazione {
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ponte__corpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.ponte__corpo .colonna-testo { max-width: none; }

/* riquadro "nel colloquio" */

.riquadro {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-inline: auto;
  max-width: 72ch;
  background: var(--sabbia);
  border-radius: var(--r-l);
  padding: clamp(2rem, 4.5vw, 3.4rem);
  border: 1px solid var(--cenere);
}
.riquadro h3 {
  color: var(--mattone);
  margin-bottom: 1.4rem;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

/* ------------------------------------------------------- cosa offro ---- */

.intestazione-offerta {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* incornicia la filigrana: si vede solo il fiore, il resto resta tagliato dietro il titolo */
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
/* qui sotto c'e' ancora un h2 vero e proprio ("Da dove partire"): l'occhiello
   resta un'etichetta e non raddoppia il titolo */
.intestazione-offerta .occhiello { font-size: .78rem; letter-spacing: .2em; }

/* filigrana centrata dietro "Da dove partire" */
.intestazione-offerta::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(8rem, 20vw);
  aspect-ratio: 155 / 360;
  background: url('../img/logo.png') no-repeat top center / contain;
  opacity: .07;
  transform: translateX(-50%);
  pointer-events: none;
}

.offerta + .offerta { margin-top: clamp(4.5rem, 9vw, 7.5rem); }

.offerta__intestazione {
  border-top: 1px solid var(--cenere);
  padding-top: 1.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.offerta--principale .offerta__intestazione h3 { color: var(--mattone); }
.offerta--secondaria .offerta__intestazione { border-top-color: var(--salvia-velo); }
.offerta--secondaria .offerta__intestazione h3 { color: var(--salvia-scuro); }
/* qui l'occhiello introduce l'h3 che segue, non lo sostituisce: resta un'etichetta */
.offerta--secondaria .occhiello { font-size: .78rem; letter-spacing: .2em; margin-bottom: .6rem; }
.offerta--secondaria .occhiello::before { display: none; }

.offerta__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.offerta__corpo .colonna-testo { max-width: none; }

.offerta__lato { display: grid; gap: 1.5rem; }

.scheda {
  background: var(--argilla);
  border-radius: var(--r-m);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.scheda p:last-child, .scheda ul:last-child { margin-bottom: 0; }

.elenco-morbido {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .95rem;
  font-size: .98rem;
  line-height: 1.6;
}
.elenco-morbido li { padding-left: 1.4rem; position: relative; }
.elenco-morbido li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border: 1px solid var(--mattone);
  border-radius: 50%;
}

.dettagli { margin: 0; display: grid; gap: 1.1rem; }
.dettagli > div { display: grid; gap: .15rem; }
.dettagli dt {
  font-family: var(--utility);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--mattone);
}
.dettagli dd { margin: 0; font-size: .98rem; line-height: 1.6; }

.invito {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 60;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 300;
  line-height: 1.45;
  max-width: 54ch;
}
.invito--centrato { margin-inline: auto; text-align: center; }
.offerta--secondaria .invito a { color: var(--salvia-scuro); }
.offerta--secondaria .invito a:hover { color: var(--inchiostro); }

/* yoga e meditazione: due colonne affiancate, la foto accanto al titolo.
   Il blocco resta piu' basso e piu' compatto di quello del colloquio: la
   gerarchia fra le due offerte si legge prima ancora di leggere i testi. */

.offerta__intestazione--con-figura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

.offerta__pratiche {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.pratica h4 {
  color: var(--salvia-scuro);
  font-size: .88rem;
  letter-spacing: .2em;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--salvia-velo);
}
.pratica .attacco { font-size: 1.1rem; }
.pratica .modalita {
  font-family: var(--utility);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--salvia-scuro);
  margin-top: 1.4rem;
}

/* lo scatto e' verticale: resta verticale, solo piu' piccolo */
.pratica__figura { margin: 0; justify-self: end; width: min(100%, 15rem); }
.pratica__figura .cornice img { aspect-ratio: 3 / 4; }

.citazione--salvia {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
}
.citazione--salvia blockquote p {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 72;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--salvia-scuro);
  margin: 0;
}
.citazione--salvia .citazione__fonte { display: block; }

/* ------------------------------------------------------------ eventi --- */

.eventi {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.evento {
  background: var(--sabbia);
  border: 1px solid var(--cenere);
  border-radius: var(--r-m);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.evento__data {
  font-family: var(--utility);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--mattone);
  margin-bottom: .8rem;
}
.evento__titolo {
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: .4rem;
}
.evento__luogo {
  font-family: var(--utility);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--inchiostro-70);
  margin-bottom: 1rem;
}
.evento__testo { font-size: .96rem; margin: 0; }

/* i segnaposto devono saltare all'occhio finche' non sono sostituiti */
.segnaposto {
  color: var(--mattone);
  background: rgba(163, 43, 33, .07);
  box-shadow: inset 0 -1px 0 var(--mattone-velo);
  border-radius: 3px;
}
/* la scheda evento resta una scheda anche quando e' tutta da riempire */
.evento.segnaposto { border-radius: var(--r-m); }

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

.contatti {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* la filigrana esce leggermente dal bordo del riquadro */
}

/* filigrana in basso a sinistra: fa da contrappeso a quella dell'apertura,
   in alto a destra, chiudendo la pagina con lo stesso segno con cui si apre */
.contatti::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -1.5rem;
  left: -1vw;
  width: min(10rem, 18vw);
  aspect-ratio: 155 / 360;
  background: url('../img/logo.png') no-repeat bottom center / contain;
  opacity: .06;
  transform: rotate(-4deg);
  pointer-events: none;
}

.contatti__testo {
  max-width: 46ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.contatti__azioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.contatto {
  display: grid;
  gap: .4rem;
  padding: clamp(1.6rem, 3.2vw, 2.2rem);
  border-radius: var(--r-l);
  text-decoration: none;
  transition: transform 300ms var(--curva), box-shadow 300ms var(--curva);
}
.contatto:hover { transform: translateY(-3px); }

.contatto--principale {
  background: var(--mattone);
  color: var(--sabbia);
}
.contatto--principale:hover { color: var(--sabbia); box-shadow: 0 14px 30px -18px var(--mattone); }
.contatto--principale .contatto__etichetta { color: rgba(247, 241, 231, .72); }
.contatto--principale .segnaposto {
  color: var(--sabbia);
  background: rgba(247, 241, 231, .14);
  box-shadow: inset 0 -1px 0 rgba(247, 241, 231, .4);
}

.contatto--whatsapp {
  background: var(--argilla);
  color: var(--inchiostro);
  border: 1px solid var(--cenere);
}
.contatto--whatsapp:hover { color: var(--inchiostro); box-shadow: 0 14px 30px -20px rgba(46, 38, 32, .5); }

.contatto__etichetta {
  font-family: var(--utility);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--inchiostro-70);
}
.contatto__valore {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 60;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  word-break: break-word;
}

.contatti__dettagli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--cenere);
  padding-top: clamp(1.8rem, 4vw, 2.5rem);
}
.dettaglio h3 {
  font-family: var(--utility);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--mattone);
  margin-bottom: .7rem;
  font-variation-settings: normal;
  letter-spacing: .18em;
}

/* -------------------------------------------------------------- piede -- */

.piede {
  background: var(--inchiostro);
  color: rgba(247, 241, 231, .78);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  font-size: .92rem;
}
.piede__interno {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.piede__segno {
  width: auto;
  height: 5.5rem;
  opacity: .85;
}
.piede__dati p { margin: 0 0 .35em; }
.piede__nome {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 40;
  font-size: 1.25rem;
  color: var(--sabbia);
  margin-bottom: .5em !important;
}
.piede .segnaposto {
  color: #F0B7B1;
  background: rgba(247, 241, 231, .08);
  box-shadow: inset 0 -1px 0 rgba(240, 183, 177, .45);
}
.piede__nota {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(247, 241, 231, .16);
  padding-top: 1.4rem;
  margin: .8rem 0 0;
  font-size: .84rem;
  color: rgba(247, 241, 231, .58);
  max-width: 62ch;
}

/* ----------------------------------------------------------- movimento -- */

.rivela {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ritmo) var(--curva), transform var(--ritmo) var(--curva);
}
.rivela.e-visibile { opacity: 1; transform: none; }

/* lo stelo cresce verso il basso quando la sezione entra in scena */
.rivela .occhiello::before { transform: scaleY(0); transition: transform 760ms var(--curva) 120ms; }
.rivela.e-visibile .occhiello::before { transform: scaleY(1); }

/* sequenza di entrata dell'apertura */
.apertura__testo > *,
.apertura__ritratto {
  opacity: 0;
  transform: translateY(18px);
  animation: entra 900ms var(--curva) forwards;
}
.apertura__testo > *:nth-child(1) { animation-delay: 120ms; }
.apertura__testo > *:nth-child(2) { animation-delay: 220ms; }
.apertura__testo > *:nth-child(3) { animation-delay: 320ms; }
.apertura__testo > *:nth-child(4) { animation-delay: 440ms; }
.apertura__testo > *:nth-child(5) { animation-delay: 560ms; }
.apertura__ritratto { animation-delay: 260ms; transform: translateY(26px); }

@keyframes entra {
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive -- */

/* l'apertura regge due colonne piu' a lungo delle altre sezioni: impilarla
   troppo presto lascerebbe mezza schermata vuota accanto al ritratto */
@media (max-width: 860px) {
  .apertura {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 7vw, 4rem);
  }
  .apertura__ritratto { max-width: 24rem; margin-inline: auto; }
  .apertura__nome { font-size: clamp(2.6rem, 11vw, 4.4rem); }
}

@media (max-width: 1000px) {
  .griglia-testo-figura,
  .griglia-figura-testo,
  .ponte__corpo,
  .offerta__corpo,
  .offerta__pratiche,
  .offerta__intestazione--con-figura {
    grid-template-columns: 1fr;
  }
  .griglia-figura-testo .figura { grid-row: 2; }

  .figura--alta,
  .griglia-figura-testo .figura { position: static; max-width: 26rem; }
  .figura--alta { justify-self: start; }

  .pratica + .pratica { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

  .pratica__figura { justify-self: start; width: min(100%, 17rem); margin-top: 1.75rem; }

  .colonna-testo { max-width: 68ch; }
}

@media (max-width: 780px) {
  :root { --spazio-sezione: clamp(3.75rem, 9vh, 5.5rem); }

  html { scroll-padding-top: 6.25rem; }

  .menu-toggle { display: inline-flex; }

  .menu {
    position: fixed;
    inset: 0;
    background: var(--sabbia);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms var(--curva), visibility 320ms;
    z-index: 60;
  }
  .menu ul {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    text-align: center;
  }
  .menu a { font-size: 1.05rem; letter-spacing: .18em; padding: .6rem 1rem; }

  body.menu-aperto { overflow: hidden; }
  body.menu-aperto .menu { opacity: 1; visibility: visible; }
  body.menu-aperto .menu-toggle { position: relative; z-index: 70; color: var(--mattone); }
  body.menu-aperto .marchio { position: relative; z-index: 70; }

  .marchio__segno { height: 2.6rem; }
  .marchio__nome { font-size: 1.3rem; }

  .apertura { padding-top: 2rem; }
  .apertura__ritratto { max-width: none; }
  .figura--alta, .griglia-figura-testo .figura { max-width: none; }
  .pratica__figura { width: 100%; }

  .citazione--apertura { padding-left: 1.2rem; }

  .figura--larga { max-width: none; }

  .piede__interno { grid-template-columns: 1fr; }
  .piede__segno { height: 4.5rem; }

  .cornice::before { inset: -9px; border-radius: calc(var(--r-l) + 9px); }
  .cornice--sottile::before { inset: -8px; border-radius: calc(var(--r-l) + 8px); }
}

@media (max-width: 460px) {
  body { font-size: 1rem; }
  .attacco { font-size: 1.1rem; }
  .marchio__nome { font-size: 1.12rem; }
  .marchio__segno { height: 2.3rem; }
}

/* sotto i 340px il nome non entra piu' accanto al pulsante: resta il marchio */
@media (max-width: 340px) {
  .marchio__nome { display: none; }
}

/* --------------------------------------------------- movimento ridotto -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .rivela { opacity: 1; transform: none; }
  .rivela .occhiello::before { transform: scaleY(1); }
  .apertura__testo > *, .apertura__ritratto { opacity: 1; transform: none; }
  .citazione__testo.e-nascosta, .citazione__fonte span.e-nascosta { display: none; }
}

/* ------------------------------------------------------------- stampa -- */

@media print {
  .testata, .scendi, .menu-toggle { display: none; }
  body { background: #fff; color: #000; }
  .sezione--argilla { background: #fff; }
  .cornice::before { display: none; }
}