/* ── PAGINE INTERNE — layout comune ────────────────────────── */
.page-inner {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--nav-h) + 5vh) 4vw 6vh;
}

/* ── CARD BIANCA ────────────────────────────────────────────── */
.card {
  background: var(--white);
  width: clamp(300px, 64vw, 780px);
  padding: 3.2rem 3.6rem 3rem;
  box-shadow: 0 4px 32px rgba(26,23,18,0.1), 0 1px 6px rgba(26,23,18,0.06);
}

.card__label {
  font-family: var(--font-m);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.card__title {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.8rem;
  text-align: center;
}

.card__title::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: rgba(26,23,18,0.18);
  margin: 1rem auto 0;
}

.card__text {
  font-family: var(--font-d);
  font-size: 1.05rem;
  line-height: 1.78;
  color: rgba(26,23,18,0.7);
  text-align: left;
  margin-bottom: 2rem;
}

.card__text p { margin-bottom: 1.1em; }

/* ── PAGINA PROGETTO — layout immersivo ─────────────────────── */
.progetto-wrap {
  background: #fff;
  min-height: 100vh;
}

/* Hero: margine superiore = altezza nav, immagine intera a ratio nativa */
.progetto__hero {
  width: 100%;
  margin-top: var(--nav-h);
}
.progetto__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Blocco testo: centrato, larghezza limitata */
.progetto__testo {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}

.progetto__intro {
  font-family: var(--font-s);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 2rem;
}


.progetto__corpo p {
  font-family: var(--font-s);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.2em;
}

.progetto__corpo strong {
  font-weight: 700;
}

/* Galleria: immagini a tutta pagina, una sotto l'altra */
.progetto__gallery {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progetto__gallery figure {
  margin: 0;
  overflow: hidden;
}
.progetto__gallery figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer con back button */
.progetto__footer {
  text-align: center;
  padding: 3rem 0 5rem;
}

/* ── CTA / BACK ─────────────────────────────────────────────── */
.card__back {
  display: inline-block;
  font-family: var(--font-m);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid rgba(26,23,18,0.25);
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.card__back:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── ARCHIVIO PROGETTI — immagini full-bleed impilate ───────── */
.pg-stack {
  width: 100%;
  background: var(--bg);
  padding-bottom: 8vh;
}

/* Apertura di categoria: foto piena col titolo sovrapposto.
   L'altezza è fissa e l'immagine deborda, così può scorrere
   più lentamente della pagina (parallasse). */
/* Occupa tutto lo schermo disponibile sotto la barra, su ogni formato.
   dvh tiene conto delle barre del browser mobile, che compaiono e
   scompaiono durante lo scorrimento. */
.pg-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  margin-top: var(--nav-h);
  overflow: hidden;
  background: var(--sep);
}

/* Quanto l'immagine deborda oltre la finestra. E' il margine su cui
   scorre la parallasse, ma si paga in inquadratura: piu' e' alto, piu'
   il riquadro si allontana dalle proporzioni della foto e piu' questa
   viene tagliata ai lati. A 1.2 il riquadro vale ~1.42, cioe' quasi
   esattamente l'1.40 delle foto: nessun taglio laterale.
   Il valore sta qui una volta sola: lo rilegge anche la parallasse. */
.pg-hero { --hero-sbordo: 1.2; }

.pg-hero img {
  position: absolute;
  left: 0;
  top: calc((1 - var(--hero-sbordo)) * 50%);
  width: 100%;
  height: calc(var(--hero-sbordo) * 100%);
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* Apertura disegnata invece che fotografica: il disegno e' una
   composizione, ritagliarla ne perderebbe meta'. Si mostra per intero
   sul colore della sua carta, cosi' le fasce sopra e sotto non si
   distinguono dal foglio. */
/* Un disegno e' una composizione: ritagliarlo ne perde dei pezzi, e su
   finestre larghe e basse il ritaglio arriva a un terzo dell'altezza.
   Si mostra quindi intero. Il prezzo e' la parallasse, che ha bisogno
   di margine nascosto per scorrere e qui non ne resta: o si vede tutto
   il disegno, o si vede meno disegno che si muove. */
.pg-hero--disegno img {
  top: 0;
  height: 100%;
  object-fit: contain;
  transform: none !important;
}

.pg-hero--disegno {
  /* La carta dei disegni e' ormai il fondo del sito: non serve piu'
     un colore a parte per nascondere i bordi */
  background: var(--bg);
}

/* Su carta chiara il titolo bianco sparirebbe: stesso carattere
   dell'apertura Yachts, colore invertito.
   Posizione presa dal layout: blocco centrato al 51,5% in larghezza,
   un poco sopra la meta' in altezza, dove il foglio e' libero. */
.pg-hero--disegno .pg-hero__testo {
  color: var(--text);
  /* Titolo scuro su carta chiara: qui serve l'opposto, un alone chiaro
     che allontani i tratti a matita da sotto le lettere */
  text-shadow:
    0 1px 2px rgba(250,249,245,0.95),
    0 0 22px rgba(250,249,245,0.8);
  left: 51.5%;
  top: 47%;
}

/* Titolo e sottotitolo al centro della foto */
/* Il blocco si stringe sulla larghezza del titolo: serve come
   riferimento per allineare il corsivo a una lettera precisa */
.pg-hero__testo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 90vw;
  text-align: center;
  color: #fff;
  /* Due ombre: una corta che disegna il bordo delle lettere, una larga
     che stacca il blocco dal fondo. Nessuna delle due si vede come
     ombra: insieme fanno solo sembrare il titolo piu' inciso. */
  text-shadow:
    0 1px 3px rgba(0,0,0,0.5),
    0 2px 26px rgba(0,0,0,0.38);
}

.pg-hero__titolo {
  font-family: var(--font-d);
  /* Piu' corposo, piu' compatto e piu' piccolo: su una fotografia
     mossa un titolo largo e sottile si sfalda, mentre un blocco denso
     resta leggibile anche dove il fondo cambia sotto le lettere */
  font-weight: 600;
  font-size: clamp(2.4rem, 6.4vw, 5.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 0.98;
  margin: 0;
}

/* Il corsivo parte dalla H di YACHTS: in una parola di sei lettere,
   la quarta comincia circa a metà. La larghezza a zero evita che il
   testo allarghi il blocco e sposti il centraggio del titolo. */
.pg-hero__sub {
  font-family: 'Homemade Apple', cursive;
  font-size: clamp(1.15rem, 2.5vw, 2.3rem);
  line-height: 1.5;
  margin: 0.1em 0 0 50.7%;
  width: 0;
  white-space: nowrap;
  text-align: left;
  opacity: 0.95;
}

/* Chi preferisce meno movimento non riceve il parallasse */
@media (prefers-reduced-motion: reduce) {
  .pg-hero img { transform: none !important; }
}

.pg-stack__head {
  padding: calc(var(--nav-h) + 6vh) 6vw 5vh;
  text-align: center;
}

.pg-title {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.pg-item {
  display: block;
  cursor: pointer;
}

.pg-item__media {
  width: 100%;
  height: 78vh;
  overflow: hidden;
  background: var(--sep);
}

.pg-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.pg-item:hover .pg-item__media img {
  transform: scale(1.04);
}

.pg-item__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--sep), var(--sep) 14px,
    rgba(26,23,18,0.04) 14px, rgba(26,23,18,0.04) 28px);
}

.pg-item__caption {
  text-align: center;
  padding: 2.6rem 2rem 3.6rem;
  border-bottom: 1px solid var(--sep);
}

.pg-item__name {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.7rem;
  transition: color 0.2s, background 0.25s;
}

.pg-item:hover .pg-item__name {
  color: var(--accent);
}

/* ── Copertina d'archivio (Yachts e Future Yacht Concepts) ────
   Stesso impaginato per le due sezioni: il disegno ampio ma non a
   filo pagina, e sotto la targhetta larga quanto lui. Passandoci
   sopra la targhetta diventa nera, la scritta beige e il disegno
   si ingrandisce dentro la propria cornice.
   Sta dopo le regole generiche perche', a parita' di peso, in CSS
   vince l'ultima: altrimenti tornerebbe l'ambra delle altre schede. */
.pg-item--cover {
  padding-top: 6vh;
}

.pg-item--cover .pg-item__media,
.pg-item--cover .pg-item__caption {
  max-width: min(1100px, 80vw);
  margin: 0 auto;
}

.pg-item--cover .pg-item__media {
  height: auto;
  background: var(--bg);
  overflow: hidden;          /* trattiene l'ingrandimento */
}

.pg-item--cover .pg-item__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.55s ease, filter 0.35s ease;
}

.pg-item--cover .pg-item__caption {
  padding: 0;
  border-bottom: none;
}

.pg-item--cover .pg-item__name {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.62em 1em;
  background: #dcd7d0;
  color: var(--text);
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  letter-spacing: 0.22em;
  transition: background 0.35s ease, color 0.35s ease;
}

.pg-item--cover:hover .pg-item__media img {
  transform: scale(1.05);
  filter: brightness(0.94);
}

.pg-item--cover:hover .pg-item__name {
  background: #12100d;
  color: var(--bg);
}

/* Progetto ancora senza immagini: al suo posto un riquadro della stessa
   forma delle copertine, cosi' la colonna resta scandita. Il nome sta
   gia' nella fascia sotto, qui non serve ripeterlo. */
.pg-item--cover .pg-item__placeholder {
  height: auto;
  aspect-ratio: 2 / 1;
  background: #d6d3ce;
}

/* ── PAGINA PROGETTO A BLOCCHI ──────────────────────────────
   L'impaginato e' una pila di righe. Ogni riga sa disporsi su due
   colonne quando c'e' spazio e in colonna sola quando non ce n'e':
   e' cosi' che il mobile viene da se', senza un secondo impaginato
   da mantenere in parallelo. */
.progetto-wrap--blocchi {
  background: var(--bg);
  padding-bottom: 8vh;
}

.bl {
  margin: 0 auto 7vh;
}

.bl-fig {
  margin: 0;
}

.bl-fig img {
  width: 100%;
  height: auto;
  display: block;
}

/* Immagine da bordo a bordo */
.bl--pieno {
  width: 100%;
  margin-bottom: 7vh;
}

/* Immagine centrata: la larghezza arriva dal blocco in progetti.json */
.bl--figura {
  width: var(--largo, 80%);
  max-width: 1400px;
}

/* Testo a piena colonna, largo quanto si legge bene */
.bl--testo {
  max-width: 720px;
  padding: 0 6vw;
}

.bl__testo p {
  font-family: var(--font-s);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 1.1em;
}

.bl__testo p:last-child { margin-bottom: 0; }

/* Riga a due elementi: testo con immagine, o due immagini.
   I pesi delle colonne arrivano dal blocco. */
.bl--coppia {
  display: grid;
  grid-template-columns: var(--a, 1fr) var(--b, 1fr);
  gap: 4vw;
  align-items: center;
  max-width: 1400px;
  width: 88%;
}

/* Testo a destra: si scambiano le colonne senza toccare l'ordine
   nel codice, che su mobile deve restare testo-prima */
.bl--inverso > .bl__testo { order: 2; }
.bl--inverso > .bl-fig    { order: 1; }

.bl--immagini {
  align-items: start;
}

/* Sfalsamento verticale: e' quello che da' il ritmo all'impaginato,
   evitando che le due immagini si allineino in cima come una tabella */
.bl--sfalsata > .bl-fig:last-child {
  margin-top: var(--sfalsa, 6vh);
}

@media (max-width: 768px) {
  /* Una colonna sola: le righe si srotolano, lo sfalsamento sparisce */
  .bl--coppia {
    grid-template-columns: 1fr;
    gap: 3vh;
    width: 92%;
  }

  .bl--inverso > .bl__testo,
  .bl--inverso > .bl-fig { order: 0; }

  .bl--sfalsata > .bl-fig:last-child { margin-top: 0; }

  .bl--figura { width: 92%; }

  .bl { margin-bottom: 5vh; }
  .bl--pieno { margin-bottom: 5vh; }

  .bl--testo { padding: 0 4vw; }
}

/* Carosello dentro una pagina a blocchi: larghezza della riga,
   il resto lo fanno le regole del carosello dei modelli */
.bl--slideshow {
  width: 88%;
  max-width: 1400px;
}

@media (max-width: 768px) {
  .bl--slideshow { width: 100%; }
}

/* ── PAGINA PROGETTO A MODELLI (Amer e simili) ─────────────── */
.progetto-wrap--modelli {
  background: var(--bg);
  padding-bottom: 6vh;
}

/* Schizzo d'apertura: riempie la prima schermata sotto la barra.
   Il disegno resta intero e centrato — non va ritagliato — quindi lo
   spazio che avanza attorno è fondo panna. */
/* Altezza definita, non minima: serve perché il limite in percentuale
   dell'immagine abbia un riferimento risolvibile. Con altezza automatica
   il browser lo ignora e il disegno sborda oltre il fondo dello schermo. */
.pr-schizzo {
  margin-top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Il disegno e' piu' largo della finestra: i bordi lo tagliano,
     cosi' sembra debordare invece di stare composto dentro una cornice */
  overflow: hidden;
}

/* Il disegno riempie tutta l'altezza e sfonda di lato. min-width tiene
   il debordo anche su finestre basse e larghe, dove la sola altezza
   non basterebbe a coprire la pagina. */
.pr-schizzo img {
  height: 100%;
  width: auto;
  min-width: 106%;
  max-width: none;
  max-height: none;
  flex: none;
  object-fit: cover;
}

/* Blocco marchio e testo su fondo bianco, a tutta larghezza */
.pr-intro-fascia {
  background: #fff;
  width: 100%;
}

/* Marchio a sinistra, testo a destra */
.pr-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center;   /* il marchio si allinea al centro del testo */
  max-width: 1100px;
  margin: 0 auto;
  padding: 6vh 6vw;
}

.pr-intro__marchio {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-intro__logo {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* Progetto senza marchio: il testo prende tutta la fascia */
.pr-intro--solo-testo {
  grid-template-columns: 1fr;
}

.pr-intro__testo p {
  font-family: var(--font-s);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.1em;
}

.pr-intro__testo p:last-child { margin-bottom: 0; }

/* ── Slider di un modello ──────────────────────────────────── */
.pr-modello { margin-bottom: 3.5vh; }

.pr-vetrina {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--sep);
}

.pr-nastro {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.pr-slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.pr-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Modello in attesa delle foto: riquadro grigio pieno, stessa forma
   degli scatti, con il solo nome a segnare il posto */
.pr-slide--vuota {
  background: #d6d3ce;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dicitura discreta al centro del riquadro: dice perche' il posto e' vuoto
   senza competere con il nome del modello, che resta in alto a destra */
.pr-slide--vuota span {
  font-family: var(--font-m);
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,23,18,0.38);
}

/* Sul grigio chiaro il nome bianco sparirebbe: qui vira allo scuro
   e perde l'ombra, che serve solo a staccarlo dalle fotografie */
.pr-modello--attesa .pr-modello__nome {
  color: rgba(26,23,18,0.55);
  text-shadow: none;
}

/* Il nome resta fermo sull'immagine mentre gli scatti scorrono */
.pr-modello__nome {
  position: absolute;
  right: 4vw;
  top: 1.6rem;
  margin: 0;
  font-family: var(--font-d);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  pointer-events: none;
}

.pr-freccia {
/* Sempre visibili: comparendo solo al passaggio del mouse, chi non
   esplora con il cursore non scopriva che le foto sono più di una.
   Fondo pieno e ombra perché restino leggibili anche su cielo e mare,
   che sono le porzioni più chiare di queste immagini. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;          /* centra otticamente il segno */
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 3px 14px rgba(0,0,0,0.22);
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.25s, background 0.25s, transform 0.25s;
}

.pr-freccia:hover {
  opacity: 1;
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.pr-freccia[disabled] { opacity: 0 !important; pointer-events: none; }
.pr-freccia--prec { left: 1.6rem; }
.pr-freccia--succ { right: 1.6rem; }

.pr-punti {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0 0;
}

.pr-punto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(26,23,18,0.22);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.pr-punto.attivo {
  background: var(--text);
  transform: scale(1.35);
}

/* ── ABOUT ──────────────────────────────────────────────────── */
/* La pagina ha la stessa apertura delle categorie: foto a tutta
   pagina col nome sopra, poi il testo in colonna leggibile. */
.about-wrap {
  background: var(--bg);
  padding-bottom: 8vh;
}

.about-testo {
  max-width: 760px;
  margin: 0 auto;
  padding: 7vh 6vw 0;
}

.about-testo p {
  font-family: var(--font-s);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 1.5em;
}

.about-testo p:last-child { margin-bottom: 0; }

.about-wrap__footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 5vh 6vw 0;
}

@media (max-width: 768px) {
  .about-testo,
  .about-wrap__footer { padding-left: 7vw; padding-right: 7vw; }
  .about-testo { padding-top: 5vh; }
}

/* ── CONTATTI ───────────────────────────────────────────────── */
/* Modulo di contatto: campi senza cornice, solo una riga sotto, per
   restare nel tono del resto del sito invece di sembrare un modulo
   amministrativo. */
.ct-form {
  margin-top: 3rem;
  max-width: 520px;
}

.ct-form__riga {
  margin-bottom: 1.6rem;
}

.ct-form label {
  display: block;
  font-family: var(--font-m);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,23,18,0.55);
  margin-bottom: 0.5rem;
}

.ct-form input,
.ct-form textarea {
  width: 100%;
  font-family: var(--font-s);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26,23,18,0.25);
  padding: 0.5rem 0;
  border-radius: 0;          /* iOS arrotonda i campi di suo */
  -webkit-appearance: none;
  transition: border-color 0.25s;
}

.ct-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.ct-form input:focus,
.ct-form textarea:focus {
  outline: none;
  border-bottom-color: var(--text);
}

.ct-form__invia {
  margin-top: 0.6rem;
  font-family: var(--font-m);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border: none;
  padding: 0.9em 2.4em;
  cursor: pointer;
  transition: opacity 0.25s;
}

.ct-form__invia:hover { opacity: 0.85; }
.ct-form__invia:disabled { opacity: 0.45; cursor: default; }

.ct-form__esito {
  margin: 1rem 0 0;
  font-family: var(--font-s);
  font-size: 0.92rem;
  min-height: 1.4em;         /* lo spazio e' gia' li': l'esito non fa saltare la pagina */
}

.ct-form__esito--ok     { color: #2f6b3f; }
.ct-form__esito--errore { color: #8a2f2f; }

@media (max-width: 768px) {
  .ct-form { margin-top: 2.2rem; }
  /* Sotto i 16px iOS ingrandisce da solo la pagina quando si scrive */
  .ct-form input,
  .ct-form textarea { font-size: 16px; }
}

/* Frase d'apertura dei contatti */
.card__tagline {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--text);
  margin: 0.4rem 0 0.8rem;
}

.card__invito {
  font-family: var(--font-s);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.contatti-list {
  list-style: none;
  margin: 2.2rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contatti-list li {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-family: var(--font-d);
  font-size: 1rem;
  color: var(--text);
}

.contatti-list__label {
  font-family: var(--font-m);
  font-size: 0.72rem;   /* a 0.56rem risultava sotto i 10px, illeggibile */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 72px;
}

.contatti-list a {
  color: var(--accent);
  border-bottom: 1px solid rgba(138,96,32,0.3);
  transition: border-color 0.2s;
}
.contatti-list a:hover { border-color: var(--accent); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-inner { padding: 80px 5vw 4vh; }
  .card { width: 100%; padding: 2rem 1.6rem; }
  .card__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .card__text { font-size: 0.97rem; }
  /* Archivio: immagini un po' più basse su mobile */
  .pg-item__media { height: 58vh; }
  .pg-item__caption { padding: 1.8rem 1.4rem 2.6rem; }

  /* Gli schizzi devono riempire la larghezza: il limite pensato per il
     desktop (54vw) qui li ridurrebbe a metà schermo */
  .pg-item--cover .pg-item__media,
  .pg-item--cover .pg-item__caption { max-width: 92vw; }
  .pg-item--cover { padding-top: 4vh; }

  /* Il corsivo resta agganciato alla H anche col titolo più stretto */
  .pg-hero__sub { margin-left: 49.6%; }

  /* Apertura di categoria: su schermo stretto si preferisce la foto
     intera al movimento. Niente altezza piena né ritaglio: l'immagine
     detta la propria altezza, e il parallasse resta fermo. */
  .pg-hero {
    height: auto;
    background: none;
  }
  .pg-hero img {
    position: static;
    top: auto;
    height: auto;
    width: 100%;
    object-fit: contain;
    transform: none !important;
  }

  /* Progetto a modelli: marchio sopra il testo */
  .pr-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2vh 6vw 5vh;
  }
  .pr-intro__marchio { justify-content: flex-start; }
  .pr-intro__logo { max-width: 230px; }

  /* Un disegno 2:1 su schermo stretto risulta basso: a schermata piena
     lascerebbe un grande vuoto sotto, quindi qui è alto quanto serve */
  .pr-schizzo {
    height: auto;
    padding: 3vh 0 1vh;
  }

  /* Su schermo stretto il disegno non puo' riempire l'altezza senza
     sparire ai lati: resta orizzontale e sborda di poco, quel tanto
     che basta a farlo sentire piu' grande della pagina */
  .pr-schizzo img {
    width: 112%;
    min-width: 0;
    height: auto;
    /* Il debordo lo ripartisce il centraggio flex del contenitore:
       un margine negativo lo spingerebbe tutto da un lato */
    flex: none;
  }

  /* Frecce e punti con area di tocco adeguata */
  .pr-freccia { width: 46px; height: 46px; font-size: 1.7rem; }
  .pr-freccia--prec { left: 0.8rem; }
  .pr-freccia--succ { right: 0.8rem; }
  .pr-punti { gap: 0; padding-top: 0.5rem; }
  .pr-punto {
    width: 34px;              /* superficie toccabile */
    height: 34px;
    background: none;
    position: relative;
    transform: none;
  }
  .pr-punto::after {          /* il pallino visibile */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(26,23,18,0.22);
    transition: background 0.25s, transform 0.25s;
  }
  .pr-punto.attivo { transform: none; }
  .pr-punto.attivo::after { background: var(--text); transform: scale(1.35); }

  .pr-modello__nome { top: 1rem; right: 5vw; }
  .pr-modello { margin-bottom: 2.4vh; }

  /* Progetto immersivo */
  .progetto__testo { padding: 2.4rem 1.4rem 2rem; }
  .card__back { font-size: 0.8rem; }
}