/*
  banchitta — foglio di stile. Un solo file, nessuna libreria.

  Il sito è scuro: le panche stanno su un fondo di notte, come oggetti in vetrina,
  e le foto vanno a tutta larghezza. Le foto delle panche hanno lo stesso fondo
  della pagina (--notte, #141210): se si rifà un render, va esportato su quel colore
  o con lo sfondo trasparente.

  Palette. Contrasti misurati su --notte-2, il fondo più chiaro dei due:
    --avorio  14,9:1  testo
    --pietra   6,9:1  testo secondario
    --ottone   6,8:1  link, sottolineature, focus, etichette
*/

/* Font ospitati qui, ridotti ai caratteri usati (latino, accenti, × ° Ø « »). */
@font-face {
  font-family: 'Karla';
  src: url('fonts/karla.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-titoli.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-corsivo.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Font di riserva regolati sulle misure dei font veri: finché questi non
   arrivano il testo occupa già lo stesso spazio, e allo scambio non salta. */
@font-face {
  font-family: 'Karla riserva';
  src: local('Arial'), local('ArialMT');
  size-adjust: 100.47%;
  ascent-override: 91.27%;
  descent-override: 25.08%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader riserva';
  src: local('Georgia');
  size-adjust: 94.01%;
  ascent-override: 78.18%;
  descent-override: 28.19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader riserva';
  font-style: italic;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 88.58%;
  ascent-override: 82.97%;
  descent-override: 29.92%;
  line-gap-override: 0%;
}

:root {
  --notte: #141210;
  --notte-2: #1C1A17;
  --avorio: #ECE6DA;
  --pietra: #A9A295;
  --ottone: #C29A6B;
  --filo: #34302B;

  --serif: 'Newsreader', 'Newsreader riserva', Georgia, 'Noto Serif', 'Times New Roman', serif;
  --sans: 'Karla', 'Karla riserva', Arial, 'Helvetica Neue', system-ui, sans-serif;

  --margine: clamp(1.25rem, 4vw, 3rem);    /* bordo laterale: 20 px sul telefono */
  --largo: 80rem;                            /* foto e vetrine */
  --colonna: 60rem;                          /* pagine interne */
  --testo: 36rem;                            /* righe di circa 65 caratteri */

  color-scheme: only dark;
}

/* ---------- Base ---------- */

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

html {
  background: var(--notte);
  color: var(--avorio);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--notte);
  color: var(--avorio);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-kerning: normal;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}
p, figure, dl, dd { margin: 0; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--avorio);
  text-decoration: underline;
  text-decoration-color: var(--ottone);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
a:hover { text-decoration-thickness: 2px; }

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

::selection {
  background: var(--ottone);
  color: var(--notte);
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  z-index: 10;
  top: -4rem;
  left: var(--margine);
  padding: 0.5rem 0.75rem;
  background: var(--avorio);
  color: var(--notte);
}
.salta:focus { top: 0.75rem; }

/* Etichetta piccola in maiuscolo: menu, «Scopri», nomi delle voci. */
.etichetta, .menu a, .lingua, .scopri, .gruppo-titolo, .dato dt {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Testata: menu a sinistra, nome al centro, lingua a destra ---------- */

.testata {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1.5rem;
  padding: 1.4rem var(--margine);
  border-bottom: 1px solid var(--filo);
}

.testata-nome {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--serif);
  font-size: 1.625rem;
  line-height: 1;
  color: var(--avorio);
  text-decoration: none;
}

.menu { grid-column: 1; grid-row: 1; justify-self: start; }
.menu ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a, .lingua {
  display: inline-block;
  padding: 0.4rem 0.25rem;
  margin: -0.4rem -0.25rem;            /* area da toccare più grande, stesso ingombro */
  color: var(--avorio);
  text-decoration: none;
}
.lingua {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  color: var(--pietra);
}
.menu a:hover, .lingua:hover, .menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ottone);
  text-underline-offset: 0.5em;
}

/* Sul telefono: nome e lingua sopra, menu sotto. */
@media (max-width: 47.99rem) {
  .testata {
    grid-template-columns: 1fr auto;
    row-gap: 1rem;
  }
  .testata-nome { grid-column: 1; justify-self: start; }
  .lingua { grid-column: 2; }
  .menu { grid-column: 1 / -1; grid-row: 2; }
  .menu ul { gap: 1.5rem; }
}

/* In home la testata sta sopra la foto. */
.testata--sopra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom-color: rgba(236, 230, 218, 0.18);
  background: linear-gradient(rgba(20, 18, 16, 0.7), rgba(20, 18, 16, 0));
}

/* ---------- Home ---------- */

/* La prima schermata: la foto riempie tutto, il nome e la frase stanno in basso. */
.eroe {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 9rem var(--margine) clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
  background: var(--notte);
}
.eroe-foto {
  position: absolute;
  inset: 0;
}
.eroe-foto .foto, .eroe-foto .foto-img {
  width: 100%;
  height: 100%;
}
.eroe-foto .foto-img { object-fit: cover; }
/* Velo scuro in basso: tiene leggibile il testo qualunque sia la foto. */
.eroe-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20, 18, 16, 0) 35%, rgba(20, 18, 16, 0.88));
}
.eroe-testo {
  position: relative;
  width: 100%;
  max-width: var(--largo);
  margin-inline: auto;
  text-align: center;
}

.marchio {
  line-height: 0;
  color: var(--avorio);
}
.marchio-svg {
  display: block;
  width: min(100%, 52rem);
  height: auto;
  margin-inline: auto;
}

.claim {
  margin-top: clamp(1.25rem, 2.6vw, 2.25rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.15;
}
.riga-home {
  margin-top: 0.75rem;
  color: var(--pietra);
}

/* Due righe sul marchio, al centro. */
.intro {
  padding: clamp(5rem, 12vw, 9rem) var(--margine);
  text-align: center;
}
.intro p {
  max-width: var(--testo);
  margin-inline: auto;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.4;
}

/* Le panche, una per schermata: foto larga sul fondo di notte, nome, una riga, «Scopri». */
.vetrina-pezzo {
  padding: clamp(3rem, 8vw, 6rem) var(--margine);
  text-align: center;
}
.vetrina-pezzo + .vetrina-pezzo { border-top: 1px solid var(--filo); }
.vetrina-pezzo .foto {
  max-width: 64rem;
  margin-inline: auto;
}
.vetrina-nome {
  margin-top: clamp(1rem, 3vw, 2rem);
  font-size: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.vetrina-perche {
  max-width: var(--testo);
  margin: 1rem auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--pietra);
}
.scopri {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--ottone);
  color: var(--avorio);
  text-decoration: none;
}
.scopri:hover { background: var(--ottone); color: var(--notte); }

/* Pattada e il telefono: due fasce di fondo più chiaro. */
.fascia {
  padding: clamp(5rem, 12vw, 9rem) var(--margine);
  background: var(--notte-2);
  text-align: center;
}
.fascia + .fascia { border-top: 1px solid var(--filo); }
.fascia-titolo {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  line-height: 1.05;
}
.fascia-testo {
  max-width: var(--testo);
  margin: 1.25rem auto 0;
  color: var(--pietra);
}
.fascia .scopri { margin-top: 2rem; }

.tel-grande {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}

/* Il numero di telefono: avorio, con la riga d'ottone sotto. */
.tel {
  color: var(--avorio);
  text-decoration: underline;
  text-decoration-color: var(--ottone);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.tel:hover { text-decoration-thickness: 3px; }

/* WhatsApp: un rimando in testo, mai un'icona. Stesso numero, scritto invece che chiamato. */
.contatti-whatsapp {
  margin-top: 1rem;
  color: var(--pietra);
}
.contatti-whatsapp a { color: inherit; }

/* ---------- Pagine interne ---------- */

.colonna {
  max-width: calc(var(--colonna) + 2 * var(--margine));
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--margine) clamp(5rem, 10vw, 8rem);
}

.titolo {
  font-size: clamp(2.75rem, 1.8rem + 4.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-align: center;
}
.riga {
  max-width: var(--testo);
  margin: 1.25rem auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--pietra);
  text-align: center;
}

/* Immagini: un rettangolo di notte tiene il posto finché la foto non arriva. */
.foto {
  display: block;
  background: var(--notte);
}
.foto-img { width: 100%; }
.foto--piccola {
  width: 66%;
  max-width: 28rem;
}

/* Quando un'immagine non è una fotografia (per esempio un render), si dice qui sotto. */
.foto-nota {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pietra);
}

@media (max-width: 47.99rem) {
  .colonna .foto--piena { margin-inline: calc(-1 * var(--margine)); }  /* a filo schermo sul telefono */
}

/* L'unico movimento del sito: una foto appena scaricata compare piano. */
@media (prefers-reduced-motion: no-preference) {
  .js .foto-img {
    opacity: 0;
    transition: opacity 0.6s ease-out;
  }
  .js .foto-img.caricata { opacity: 1; }
}

/* ---------- Storia ---------- */

.passo {
  max-width: var(--testo);
  margin: clamp(4rem, 9vw, 7rem) auto 0;
}
.passo .foto { margin-bottom: 2rem; }

.passo-titolo {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.1;
  text-align: center;
}
.passo-titolo::after {
  content: '';
  display: block;
  width: 3rem;
  margin: 1.5rem auto 0;
  border-top: 1px solid var(--ottone);
}

.passo-testo {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

/* ---------- Prodotti ---------- */

.gruppo { margin-top: clamp(3rem, 7vw, 5rem); }

.gruppo-titolo {
  color: var(--pietra);
  text-align: center;
}

.pezzo {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--filo);
  scroll-margin-top: 2rem;
}
.pezzo:first-of-type { border-top: 0; padding-top: 0; }

.pezzo-nome {
  margin-top: 1.5rem;
  font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  line-height: 1;
}
.gruppo--piccole .pezzo-nome { font-size: 1.75rem; }

.pezzo-perche {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--pietra);
}

.pezzo-testo {
  max-width: var(--testo);
  margin-top: 1.25rem;
  line-height: 1.75;
}

.pezzo-dati {
  margin-top: 2rem;
  border-top: 1px solid var(--filo);
}
.dato {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--filo);
}
.dato dt {
  padding-top: 0.25em;
  color: var(--ottone);
}
.dato dd { font-variant-numeric: lining-nums; }

.pezzo-chiama {
  margin-top: 1.5rem;
  color: var(--pietra);
}
.tel-pezzo {
  color: var(--avorio);
  white-space: nowrap;
}

/* Sul computer: foto sopra, poi racconto a sinistra e dati a destra. */
@media (min-width: 60rem) {
  .pezzo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-content: start;
  }
  .pezzo > * { grid-column: 1; }
  .pezzo > .foto, .pezzo > .foto-nota { grid-column: 1 / -1; }
  .pezzo > .pezzo-dati { grid-column: 2; grid-row: 2 / span 6; align-self: start; margin-top: 1.5rem; }
  .pezzo > .pezzo-chiama { grid-column: 2; }
}

/* ---------- Contatti ---------- */

.contatti { text-align: center; }
.titolo--contatti { font-size: clamp(3.5rem, 2rem + 7vw, 7rem); }
.contatti-nome {
  margin-top: 3rem;
  color: var(--pietra);
}
.contatti .tel-grande { margin-top: 0.5rem; }
.contatti-email { margin-top: 1.5rem; }
.contatti-luogo {
  margin-top: 0.75rem;
  color: var(--pietra);
}

/* ---------- Testi lunghi (privacy) ---------- */

.testo-lungo h2 {
  max-width: var(--testo);
  margin: 2.75rem auto 0;
  font-size: 1.5rem;
}
.testo-lungo p {
  max-width: var(--testo);
  margin: 0.75rem auto 0;
}
.testo-lungo .riga { margin-top: 1.25rem; }
.testo-lungo .nota-data {
  margin-top: 3rem;
  font-size: 0.9375rem;
  color: var(--pietra);
}

/* ---------- Pagina non trovata ---------- */

.errore { text-align: center; }
.errore p {
  max-width: var(--testo);
  margin: 1rem auto 0;
}
.errore .riga { margin-top: 0.5rem; }
.errore-marchio {
  width: 14rem;
  margin: 0 auto 3rem;
}
.errore-marchio a {
  display: block;
  color: var(--avorio);
}
.errore .marchio-svg { width: 100%; }

/* ---------- Piede ---------- */

.piede {
  display: grid;
  gap: 1.25rem;
  padding: 3.5rem var(--margine) 3rem;
  border-top: 1px solid var(--filo);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pietra);
  text-align: center;
}
.piede a { color: inherit; }
.piede .tel { color: var(--avorio); }
.piede-recapiti {
  font-size: 1rem;
  color: var(--avorio);
}

/* ---------- Segnaposto e avvisi (solo finché il sito non è finito) ---------- */

.da-completare, .avviso-locale {
  padding: 0 0.2em;
  background: var(--ottone);
  color: var(--notte);
}
.avviso-locale {
  display: block;
  margin-bottom: 2rem;
  padding: 0.75rem 1rem;
}

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
}

/* Con un solo gruppo il titolo del gruppo ripete quello della pagina: resta solo per i lettori di schermo. */
.gruppo:only-of-type .gruppo-titolo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}