/* Layout: una stanza a luce soffusa. Colonna centrale stretta, fasce piene
   che alternano "macramè" e "parete", il loto come unico segno grafico. */
:root {
  --macrame: #F3ECE1;   /* sfondo */
  --parete:  #E6D4BB;   /* fasce alternate */
  --luce:    #B98852;   /* filetti, dettagli dorati */
  --loto:    #8A4B30;   /* terracotta a lume di candela: pulsanti, link */
  --foglia:  #6E7A55;   /* secondo accento, dalle piante */
  --divisa:  #1F1B19;   /* testo */
  --tenue:   #6B5B4E;   /* testo secondario */
  --carta:   #FBF8F3;   /* superfici in rilievo (modulo) */
  --su-loto: #F7F0E6;   /* testo sopra il loto */
  --notte:   #241C16;   /* fascia a lume di candela, scura in entrambi i temi */
  --su-notte:#EFE3D1;

  --f-firma: "Waterfall", "Snell Roundhand", cursive; /* il corsivo a filo della scritta sul muro */
  --f-titoli: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-testo: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --misura: 68rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --macrame: #1C1714; --parete: #26201B; --luce: #D3A46C; --loto: #E0A27E;
    --foglia: #9DAE88; --divisa: #F0E7DA; --tenue: #BBA894; --carta: #2B241F; --su-loto: #1C1714; --notte: #120E0B; --su-notte: #EFE3D1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --macrame: #1C1714; --parete: #26201B; --luce: #D3A46C; --loto: #E0A27E;
  --foglia: #9DAE88; --divisa: #F0E7DA; --tenue: #BBA894; --carta: #2B241F; --su-loto: #1C1714; --notte: #120E0B; --su-notte: #EFE3D1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--macrame);
  color: var(--divisa);
  font: 400 1.0625rem/1.7 var(--f-testo);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--notte);
}

a { color: var(--loto); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--luce); outline-offset: 3px;
}

.fascia { padding-left: var(--gutter); padding-right: var(--gutter-r); }
.fascia > .dentro { max-width: var(--misura); margin-inline: auto; }
.fascia--parete { background: var(--parete); }

h1, h2, h3 { font-family: var(--f-titoli); font-weight: 500; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
h3 { font-size: 1.6rem; }
p { margin: 0; }
.etichetta {
  font: 500 0.78rem/1 var(--f-testo); letter-spacing: 0.18em; text-transform: uppercase; color: var(--foglia);
}
.firma { font-family: var(--f-firma); font-weight: 400; color: var(--luce); line-height: 1; }

/* Testata */
.testata { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--macrame); border-bottom: 1px solid color-mix(in srgb, var(--luce) 30%, transparent); }
.testata .dentro { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(1.1rem, 2.4vw, 1.75rem); flex-wrap: wrap; }
.marchio { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--divisa); }
.marchio svg { width: 46px; height: 40px; color: var(--loto); }
.marchio-testo { display: grid; gap: 0.4rem; }
.marchio-nome { font: 500 1.6rem/1 var(--f-titoli); letter-spacing: 0.36em; }
.marchio-sotto { font: 500 0.66rem/1 var(--f-testo); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tenue); }
.menu { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.menu a { color: var(--divisa); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; }
.menu a:hover { color: var(--loto); }
@media (max-width: 560px) { .menu { gap: 1.2rem; } .marchio svg { width: 38px; height: 33px; } .marchio-nome { font-size: 1.35rem; } .menu a.facoltativo { display: none; } }

/* Apertura */
.apertura .dentro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.apertura .firma { font-size: clamp(5.06rem, 11.5vw, 9.2rem); display: block; margin-bottom: 0.2rem; }
.apertura h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-style: italic; font-weight: 400; max-width: 30ch; }
.apertura .chi { margin-top: 1.4rem; color: var(--tenue); }
.azioni { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2rem; }
.bottone {
  display: inline-block; padding: 0.85rem 1.6rem; border-radius: 999px; font: 500 0.98rem/1 var(--f-testo);
  text-decoration: none; border: 1px solid var(--loto); cursor: pointer; transition: background .2s, color .2s;
}
.bottone--pieno { background: var(--loto); color: var(--su-loto); }
.bottone--pieno:hover { background: var(--divisa); border-color: var(--divisa); color: var(--macrame); }
.bottone--vuoto { background: transparent; color: var(--loto); }
.bottone--vuoto:hover { background: var(--loto); color: var(--su-loto); }

.foto-arco { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.foto-arco img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1067; object-fit: cover; border-radius: 999px 999px 6px 6px; }
@media (max-width: 760px) {
  .apertura .dentro { grid-template-columns: 1fr; }
  .foto-arco { max-width: 360px; }
}

/* Chi sono */
.sezione .dentro { padding-block: clamp(3.5rem, 8vw, 6rem); }
.chi-sono .dentro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.chi-sono .testo { display: grid; gap: 1.1rem; max-width: 62ch; min-width: 0; }
.chi-sono .titolo { display: grid; gap: 0.8rem; }
.da-completare { font-size: 0.9rem; color: var(--tenue); border-left: 2px solid var(--luce); padding-left: 0.9rem; }
@media (max-width: 760px) { .chi-sono .dentro { grid-template-columns: 1fr; } }

/* Rituali */
.intestazione { display: grid; gap: 0.8rem; margin-bottom: 2.6rem; max-width: 46rem; }
.intestazione p:not(.etichetta) { color: var(--tenue); }
.rituali { list-style: none; margin: 0; padding: 0; display: grid; }
.rituale { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 2rem; padding-block: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--luce) 45%, transparent); }
.rituale:last-child { border-bottom: 1px solid color-mix(in srgb, var(--luce) 45%, transparent); }
.rituale p { color: var(--tenue); max-width: 58ch; grid-column: 1; }
.rituale .meta { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rituale .durata { font: 500 1.5rem/1 var(--f-titoli); display: block; }
.rituale .prezzo { font-size: 0.85rem; color: var(--tenue); }
.nota { margin-top: 1.4rem; font-size: 0.9rem; color: var(--tenue); }

/* Percorso */
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; counter-reset: passo; }
.passi li { display: grid; gap: 0.5rem; align-content: start; counter-increment: passo; }
.passi li::before { content: counter(passo); font: 400 3.4rem/1 var(--f-firma); color: var(--luce); }
.passi h3 { font-size: 1.35rem; }
.passi p { color: var(--tenue); font-size: 0.98rem; }
@media (max-width: 860px) { .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .passi { grid-template-columns: 1fr; } }

/* Contatti */
.contatti .dentro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
.recapiti { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.recapiti dl { margin: 0; display: grid; gap: 1rem; }
.recapiti dt { font: 500 0.78rem/1 var(--f-testo); letter-spacing: 0.18em; text-transform: uppercase; color: var(--foglia); margin-bottom: 0.3rem; }
.recapiti dd { margin: 0; }
.orari { font-variant-numeric: tabular-nums; }
.orari div { display: flex; justify-content: space-between; gap: 1rem; max-width: 22rem; }

.modulo { background: var(--carta); padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: 6px; display: grid; gap: 1.1rem; min-width: 0; }
.modulo h3 { margin-bottom: 0.2rem; }
.riga { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .riga { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 0.35rem; min-width: 0; }
.campo label { font-size: 0.85rem; color: var(--tenue); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--divisa); background: var(--macrame);
  border: 1px solid color-mix(in srgb, var(--luce) 50%, transparent); border-radius: 4px; padding: 0.7rem 0.8rem; width: 100%;
}
.campo textarea { min-height: 6rem; resize: vertical; }
.consenso { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--tenue); }
.consenso input { margin-top: 0.3rem; accent-color: var(--loto); }
.esito { font-size: 0.95rem; color: var(--foglia); }
@media (max-width: 760px) { .contatti .dentro { grid-template-columns: 1fr; } }

/* Piede */
.piede .dentro { padding-block: 2.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: 0.88rem; color: var(--tenue); border-top: 1px solid color-mix(in srgb, var(--luce) 35%, transparent); }
.piede .firma { font-size: 2.8rem; }
.piede .riservata { color: inherit; text-decoration: none; opacity: .75; }
.piede .riservata:hover, .piede .riservata:focus-visible { text-decoration: underline; opacity: 1; }
.avvertenza { max-width: 60ch; }

/* Il posto: fascia a lume di candela */
.il-posto { background: var(--notte); color: var(--su-notte); }
.il-posto .dentro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.foto-sala { margin: 0; min-width: 0; }
.foto-sala img { display: block; width: 100%; height: auto; border-radius: 6px; }
.frasi { display: grid; gap: 2rem; min-width: 0; }
.frasi .etichetta { color: var(--luce); }
.frasi blockquote { margin: 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.3 var(--f-titoli); text-wrap: balance; max-width: 26ch; }
.frasi em { font: 400 1.7em/0 var(--f-firma); color: var(--luce); font-style: normal; padding-inline: 0.05em; }
.loto-piccolo { width: 44px; height: 38px; color: var(--luce); }
@media (max-width: 760px) { .il-posto .dentro { grid-template-columns: 1fr; } .foto-sala { max-width: 420px; } }

/* Rituali con foto */
.rituali-testa { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: end; margin-bottom: 2.6rem; }
.rituali-testa .intestazione { margin-bottom: 0; }
.foto-rituale { margin: 0; min-width: 0; }
.foto-rituale img { display: block; width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 760px) { .rituali-testa { grid-template-columns: 1fr; } .foto-rituale { max-width: 420px; } }

.solo-appuntamento { color: var(--tenue); max-width: 40ch; }
.esito { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }

/* Il tempo di una tisana */
.tisana .dentro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.foto-tisana { margin: 0; min-width: 0; }
.foto-tisana img { display: block; width: 100%; height: auto; border-radius: 999px 999px 6px 6px; }
.tisana-testo { display: grid; gap: 1.2rem; min-width: 0; max-width: 36rem; }
.tisana-testo h2 .firma { font-size: 1.9em; vertical-align: -0.12em; }
.tisana-testo > p:not(.etichetta) { color: var(--tenue); }
.tisana-include { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.tisana-include li { padding-left: 1.1rem; position: relative; }
.tisana-include li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--luce); }
.tisana-dati { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: 1rem; border-block: 1px solid color-mix(in srgb, var(--luce) 45%, transparent); }
.tisana-dati dt { font: 500 0.72rem/1 var(--f-testo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--foglia); margin-bottom: 0.35rem; }
.tisana-dati dd { margin: 0; font-size: 0.95rem; }
@media (max-width: 760px) { .tisana .dentro { grid-template-columns: 1fr; } .foto-tisana { max-width: 380px; } }
@media (max-width: 520px) { .tisana-include, .tisana-dati { grid-template-columns: 1fr; } }

/* Galleria */
.intestazione h2 .firma { font-size: 1.7em; vertical-align: -0.1em; }
.galleria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.galleria figure { margin: 0; min-width: 0; }
.galleria img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
@media (max-width: 760px) { .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.apertura .etichetta { margin: 0 0 1rem; }
.apertura .firma { line-height: 1.05; }
.firma-muro span { display: block; }
/* "Sicuro" parte sotto la t di "posto" (2.52em dall'inizio della riga) ed è più grande del 30% */
.firma-muro span + span { font-size: 1.3em; padding-left: calc(2.52em / 1.3); margin-top: -0.3em; }
.firma-muro { transform: rotate(-6deg); transform-origin: 0 60%; margin-block: 0.25em -0.2em; white-space: nowrap; position: relative; z-index: 1; }
@media (max-width: 480px) { .apertura .firma { font-size: 4.3rem; } }

/* Apertura: ritratto ad arco con un dettaglio a lume di candela sovrapposto */
.composizione { position: relative; justify-self: end; width: 100%; max-width: 500px; padding: 0 0 12% 14%; }
.composizione .foto-arco { max-width: none; }
.foto-candele { position: absolute; left: 0; bottom: 0; width: 44%; margin: 0; aspect-ratio: 1; border-radius: 50%; padding: 6px; background: var(--macrame); box-shadow: 0 0 0 1px color-mix(in srgb, var(--luce) 60%, transparent); }
.foto-candele img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 760px) { .composizione { max-width: 380px; } }

/* Apertura con la sala a lume di candela come sfondo: resta scura in entrambi i temi */
.apertura { position: relative; overflow: hidden; background: var(--notte); color: var(--su-notte); isolation: isolate; }
.apertura .dentro { grid-template-columns: minmax(0, 1fr); min-height: min(86vh, 760px); }
.apertura-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; z-index: -2; }
.apertura::before { content: ""; position: absolute; inset: 0; z-index: -1;
  /* velo leggero: la foto resta visibile al 70% circa */
  background: linear-gradient(90deg, color-mix(in srgb, var(--notte) 42%, transparent) 0%, color-mix(in srgb, var(--notte) 30%, transparent) 50%, color-mix(in srgb, var(--notte) 12%, transparent) 100%); }
.apertura-testo { text-shadow: 0 1px 14px rgba(20, 14, 10, 0.75), 0 0 2px rgba(20, 14, 10, 0.45); }
.apertura .etichetta { color: color-mix(in srgb, var(--su-notte) 80%, var(--luce)); }
.apertura .firma { color: #D9AE79; }
.apertura h1 { max-width: 30ch; }
.apertura .chi { color: color-mix(in srgb, var(--su-notte) 82%, transparent); max-width: 44ch; }
.apertura .bottone--pieno { background: #C9935E; border-color: #C9935E; color: #1F1712; }
.apertura .bottone--pieno:hover { background: var(--su-notte); border-color: var(--su-notte); color: #1F1712; }
.apertura .bottone--vuoto { color: var(--su-notte); border-color: color-mix(in srgb, var(--su-notte) 70%, transparent); }
.apertura .bottone--vuoto:hover { background: var(--su-notte); color: #1F1712; }
@media (max-width: 760px) {
  .apertura .dentro { min-height: 0; }
  .apertura::before { background: color-mix(in srgb, var(--notte) 45%, transparent); }
}
.chi-sono .foto-arco { max-width: 340px; justify-self: start; margin-top: 1rem; }
.foto-sala img { aspect-ratio: 1; object-fit: cover; }
.firma-muro { margin-left: clamp(0.5rem, 13.5vw, 13rem); }
@media (max-width: 480px) { .firma-muro { margin-left: 1.2rem; } }

/* Marchio sulla foto d'apertura (niente barra di navigazione) */
.apertura .dentro { align-content: start; }
.marchio--foto { margin: 0 0 clamp(0.5rem, 3vw, 2rem); color: var(--su-notte); display: flex; align-items: center; gap: 0.9rem; text-shadow: 0 1px 12px rgba(20, 14, 10, 0.6); }
.marchio--foto svg { width: 52px; height: 45px; color: #D9AE79; filter: drop-shadow(0 1px 8px rgba(20, 14, 10, 0.5)); }
.marchio--foto .marchio-nome { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: 0.4em; }
.apertura .dentro { padding-block: clamp(1.6rem, 3.5vw, 2.6rem) clamp(3rem, 7vw, 5.5rem); }
.marchio--foto .marchio-testo { gap: 0.55rem; }
.marchio--foto .marchio-sotto { color: color-mix(in srgb, var(--su-notte) 85%, var(--luce)); font-size: clamp(0.62rem, 0.9vw, 0.74rem); letter-spacing: 0.34em; }