/* ============================================================
   A Casa di Fulvia — foglio di stile globale
   Palette "Vino & Gesso" · tipografia Fraunces / Jost / Ephesis
   Implementazione fedele del design Claude Design (index.dc.html)
   ============================================================ */

:root {
  --gesso: #FAF7F4;       /* sfondo pagina */
  --conchiglia: #F1EAE4;  /* superfici, sezioni alternate */
  --vino: #5B2333;        /* colore firma: CTA, fasce scure, link */
  --vino-scuro: #471A28;  /* hover dei bottoni */
  --inchiostro: #241418;  /* testo principale */
  --rose: #CF9FA6;        /* accenti SOLO su fondo vino */
  --creta: #85706F;       /* testo secondario */
  --bianco: #F6EDEA;      /* testo su fondo vino */

  /* Testo lungo degli articoli: corpo e larghezza della colonna di lettura.
     La colonna è legata alla dimensione del testo (37 volte, cioè una
     settantina di caratteri per riga), così la misura di lettura resta la stessa
     a ogni larghezza di schermo e prosa e box ricetta restano incolonnati. */
  --testo-articolo: clamp(18px, 2.2vw, 22px);
  --colonna-articolo: calc(var(--testo-articolo) * 37);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gesso);
  color: var(--inchiostro);
  font-family: "Jost", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* L'attributo hidden deve vincere anche su display:flex/grid delle classi */
[hidden] { display: none !important; }

a { color: var(--vino); }
a:hover { color: var(--vino-scuro); }

:focus-visible {
  outline: 2px solid var(--vino);
  outline-offset: 2px;
  border-radius: 2px;
}
.su-vino :focus-visible { outline-color: var(--bianco); }

/* ---- utilità comuni ---- */

/* Layout full-width: niente gabbia fissa, solo gutter laterali generosi.
   I blocchi di testo lungo restano limitati per leggibilità (max ~65 caratteri). */
.container {
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 72px);
}

.eyebrow {
  /* Di solito è un <p>, ma nel box ricetta è un <h2> (il riquadro è una
     sezione dell'articolo): senza questa riga arriverebbe in grassetto. */
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vino);
  margin: 0 0 18px;
}
.su-vino .eyebrow { color: var(--rose); }

.titolo-sezione {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.btn {
  background: var(--vino);
  color: var(--bianco);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.03em;
  padding: 15px 28px;
  border-radius: 9px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s;
}
.btn:hover { background: var(--vino-scuro); color: var(--bianco); }

.link-freccia {
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1.5px solid var(--vino);
  padding-bottom: 3px;
  transition: color 0.2s;
}
.link-freccia:hover { color: var(--vino); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vino);
  color: var(--bianco);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(36, 20, 24, 0.08);
}

.header-bar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  font-family: "Ephesis", cursive;
  font-size: 34px;
  line-height: 1;
  color: var(--vino);
  text-decoration: none;
  white-space: nowrap;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
}

.nav-desktop .nav-link {
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-desktop .nav-link:hover { color: var(--vino); }
.nav-desktop .nav-link[aria-current="page"] {
  color: var(--vino);
  border-bottom: 1.5px solid var(--vino);
  padding-bottom: 2px;
}

.btn-header { font-size: 15px; letter-spacing: 0.04em; padding: 11px 22px; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(36, 20, 24, 0.15);
  border-radius: 9px;
  cursor: pointer;
  color: var(--inchiostro);
  font-size: 20px;
  line-height: 1;
}

.nav-mobile {
  border-top: 1px solid rgba(36, 20, 24, 0.08);
  background: var(--gesso);
}
.nav-mobile .container {
  padding-top: 8px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.nav-mobile a {
  padding: 14px 4px;
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 17px;
  border-bottom: 1px solid rgba(36, 20, 24, 0.06);
}
.nav-mobile a:last-child { border-bottom: none; }

@media (max-width: 820px) {
  .nav-desktop .nav-link { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 821px) {
  .nav-mobile { display: none !important; }
}

/* ---- hero ---- */

.hero {
  padding-block: clamp(40px, 7vw, 84px);
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

.hero .eyebrow { margin-bottom: 22px; }

.hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(33px, 5.2vw, 58px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--creta);
  margin: 26px 0 0;
  max-width: 56ch;
}

.hero-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 34px;
}

.hero-foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--conchiglia);
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 20%; }

/* Su schermi molto larghi la foto non cresce all'infinito */
@media (min-width: 1400px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; }
  .hero-foto { max-width: 640px; justify-self: end; }
}

/* Testi alternativi dei bottoni: versione corta solo su mobile */
.testo-mobile { display: none; }

/* Mobile: niente foto in hero, CTA su una riga sola */
@media (max-width: 640px) {
  .hero-foto { display: none; }

  .testo-desktop { display: none; }
  .testo-mobile { display: inline; }

  .hero-azioni {
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 28px;
  }
  .hero-azioni .btn {
    font-size: 14px;
    padding: 12px 16px;
    white-space: nowrap;
  }
  .hero-azioni .link-freccia {
    font-size: 14px;
    white-space: nowrap;
  }
}

/* ---- fascia 4 Ristoranti ---- */

.fascia-tv { background: var(--vino); color: var(--bianco); }

.fascia-tv .container {
  padding-block: clamp(40px, 6vw, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}

.fascia-tv .eyebrow { margin-bottom: 20px; }

.fascia-tv-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vino-scuro);
}
.fascia-tv-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

@media (min-width: 1400px) {
  .fascia-tv-foto { max-width: 760px; }
  .fascia-tv-testo { max-width: 34ch; }
}

.fascia-tv-testo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.35;
  margin: 0;
  text-wrap: pretty;
}
.fascia-tv-testo em { font-style: italic; color: var(--rose); }

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

.sezione { padding-block: clamp(48px, 7vw, 96px); }

.sezione-testata { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }

.sfondo-conchiglia { background: var(--conchiglia); }

/* ---- servizi ---- */

.griglia-servizi {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.servizio { display: flex; flex-direction: column; }

.servizio-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--conchiglia);
}
.servizio-foto img { width: 100%; height: 100%; object-fit: cover; }

.servizio h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  margin: 20px 0 10px;
}

.servizio p { font-size: 15px; line-height: 1.62; color: var(--creta); margin: 0; }

/* Mobile: i servizi diventano una galleria 2×2, solo foto e titolo */
@media (max-width: 640px) {
  .griglia-servizi { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .servizio h3 { font-size: 17px; margin: 10px 0 0; }
  .servizio p { display: none; }
}

.nota-inclusi {
  margin: clamp(32px, 5vw, 52px) auto 0;
  text-align: center;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--creta);
}

/* ---- come funziona ---- */

.griglia-passi {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.passo { border-top: 1.5px solid var(--vino); padding-top: 20px; }

.passo-numero {
  font-family: "Fraunces", Georgia, serif;
  font-size: 34px;
  color: var(--vino);
  line-height: 1;
  margin-bottom: 16px;
}

.passo h3 { font-size: 18px; font-weight: 500; margin: 0 0 10px; letter-spacing: 0.01em; }
.passo p { font-size: 15px; line-height: 1.62; color: var(--creta); margin: 0; }

/* ---- chi è Tiziana ---- */

.chi-sono {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}

.chi-sono .eyebrow { margin-bottom: 20px; }

.chi-sono-foto {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--conchiglia);
}
.chi-sono-foto img { width: 100%; height: 100%; object-fit: cover; }

.chi-sono-testo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.4;
  margin: 0;
  text-wrap: pretty;
}

.firma {
  font-family: "Ephesis", cursive;
  font-size: 38px;
  color: var(--vino);
  line-height: 1;
  margin: 28px 0 24px;
}

/* ---- dal blog ---- */

.blog-testata {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.griglia-blog {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}
.blog-card:hover { transform: translateY(-3px); color: inherit; }

.blog-card-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--conchiglia);
}
.blog-card-foto img { width: 100%; height: 100%; object-fit: cover; }

.blog-card-corpo { padding: 18px 2px 0; }

.blog-card-rubrica {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vino);
  margin-bottom: 10px;
}

.blog-card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  margin: 0;
  color: var(--inchiostro);
  text-wrap: pretty;
}

.blog-card-data { font-size: 13px; color: var(--creta); margin-top: 12px; }

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

#contatti { scroll-margin-top: 80px; }

.form-contenitore { max-width: 820px; margin: 0 auto; }

.form-testata { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }

.form-testata p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--creta);
  margin: 18px auto 0;
  max-width: 52ch;
}

.form-griglia {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.form-griglia label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--inchiostro);
}

.facoltativo { color: var(--creta); }

.form-griglia input,
.form-griglia select,
.form-griglia textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* >= 16px: evita lo zoom automatico di iOS */
  padding: 14px;
  border: 1px solid rgba(36, 20, 24, 0.18);
  border-radius: 9px;
  background: var(--gesso);
  min-height: 44px;
  color: var(--inchiostro);
}

.form-griglia textarea { resize: vertical; }

.campo-largo { grid-column: 1 / -1; }

.btn-invia { padding: 16px 34px; }

.form-ringraziamento {
  background: var(--vino);
  color: var(--bianco);
  border-radius: 12px;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.form-ringraziamento .titolo {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  margin-bottom: 12px;
}
.form-ringraziamento p { color: var(--rose); font-size: 16px; line-height: 1.6; margin: 0; }

.nota-contatti {
  text-align: center;
  margin: clamp(28px, 4vw, 40px) auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--creta);
  max-width: 56ch;
}
.nota-contatti a { color: var(--vino); text-decoration: none; border-bottom: 1px solid var(--vino); }

.nota-privacy {
  font-size: 13px;
  line-height: 1.6;
  color: var(--creta);
  margin: 4px 0 0;
}
.nota-privacy a { color: inherit; text-decoration: underline; }

/* Messaggio d'errore dei form, creato da js/main.js solo quando serve.
   Vuoto non deve occupare spazio, altrimenti il form "salta" al primo invio. */
.form-errore {
  grid-column: 1 / -1; /* form della home: griglia, deve occupare tutta la riga */
  flex-basis: 100%;    /* newsletter: flex, deve andare a capo da solo */
  font-size: 14px;
  line-height: 1.5;
  color: var(--vino);
  margin: 10px 0 0;
  text-align: center;
}
.form-errore:empty { display: none; }

/* ---- conferma di invio ----
   Compare al posto del form, senza cambiare pagina. I tre riquadri hanno
   sfondi diversi (vino in home, chiaro nei contatti, nessuno in newsletter)
   ma stesso segno di spunta e stessa entrata. */

.form-ringraziamento::before,
.grazie-chiaro::before,
.newsletter-grazie::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  font-size: 27px;
  line-height: 1;
  animation: spunta-entra 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  animation-delay: 0.12s;
}

.form-ringraziamento::before {
  background: rgba(255, 255, 255, 0.14);
  color: var(--bianco);
}

.grazie-chiaro::before,
.newsletter-grazie::before {
  background: var(--vino);
  color: var(--bianco);
}

.form-ringraziamento,
.grazie-chiaro,
.newsletter-grazie {
  animation: grazie-entra 0.45s ease-out both;
}

/* Pagina grazie.html (solo per chi non ha JavaScript) */
.pagina-grazie { max-width: 640px; }
.grazie-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}

@keyframes grazie-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes spunta-entra {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .form-ringraziamento,
  .grazie-chiaro,
  .newsletter-grazie,
  .form-ringraziamento::before,
  .grazie-chiaro::before,
  .newsletter-grazie::before { animation: none; }
}

/* ---- footer ---- */

.site-footer { background: var(--vino); color: var(--bianco); }

.footer-griglia {
  padding-block: clamp(48px, 7vw, 80px) 40px;
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.footer-logo { font-family: "Ephesis", cursive; font-size: 40px; line-height: 1; color: var(--bianco); }

.footer-tagline { margin: 18px 0 0; color: var(--rose); font-size: 15px; line-height: 1.6; max-width: 26ch; }

.footer-titolo {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}

.footer-link {
  display: block;
  color: var(--bianco);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--rose); }

.footer-fondo { border-top: 1px solid rgba(246, 237, 234, 0.16); }

.footer-fondo .container {
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--rose);
}

.footer-fondo a { color: var(--rose); text-decoration: none; }
.footer-fondo a:hover { color: var(--bianco); }

/* ---- WhatsApp flottante ---- */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366; /* verde ufficiale WhatsApp, come nel design */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}
.whatsapp-float:hover { color: #FFFFFF; transform: scale(1.06); }
.whatsapp-float svg { width: 28px; height: 28px; fill: currentColor; }

/* ============================================================
   Componenti delle pagine interne
   ============================================================ */

/* ---- testata di pagina (chi sono, blog, contatti) ---- */

.pagina-testata { padding-block: clamp(40px, 7vw, 84px) clamp(24px, 3vw, 40px); }

.pagina-testata h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 58px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.pagina-lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--creta);
  margin: 24px 0 0;
  max-width: 52ch;
}

/* ---- chi sono: storia ---- */

.storia {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.7;
  max-width: 75ch;
}
.storia p { margin: 0 0 26px; }
.storia p:last-child { margin-bottom: 0; }
.storia strong { font-weight: 500; }

.firma-grande {
  font-family: "Ephesis", cursive;
  font-size: 44px;
  color: var(--vino);
  line-height: 1;
  margin-top: 36px;
}

/* ---- chi sono: timeline su fondo vino ---- */

.timeline-titolo { margin-bottom: clamp(28px, 4vw, 44px); }

.griglia-tappe {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tappa { border-top: 1.5px solid var(--rose); padding-top: 22px; }

.tappa-anno {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  margin-bottom: 16px;
}

.tappa p { font-size: 16px; line-height: 1.6; color: var(--rose); margin: 0; }

/* ---- chi sono: valori ---- */

.griglia-valori {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.valore {
  background: var(--conchiglia);
  border-radius: 11px;
  padding: clamp(24px, 3vw, 32px);
}

.valore-numero {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  color: var(--vino);
  line-height: 1;
  margin-bottom: 14px;
}

.valore h3 { font-size: 18px; font-weight: 500; margin: 0; line-height: 1.3; }

/* ---- chi sono: galleria ---- */

.griglia-galleria {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.griglia-galleria figure { margin: 0; }

.galleria-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gesso);
}
.galleria-foto img { width: 100%; height: 100%; object-fit: cover; }

.griglia-galleria figcaption {
  font-size: 14px;
  color: var(--creta);
  margin-top: 12px;
  line-height: 1.4;
}

/* ---- chi sono: recensioni ---- */

.griglia-recensioni {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.recensione {
  margin: 0;
  border-left: 2px solid var(--vino);
  padding-left: clamp(20px, 3vw, 32px);
}

.recensione p {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.recensione footer {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vino);
}

/* ---- CTA finale su fondo vino ---- */

.cta-finale { text-align: center; max-width: 760px; margin-inline: auto; }

.cta-finale h2 { margin-bottom: 28px; }

.btn-chiaro {
  background: var(--bianco);
  color: var(--vino);
  transition: opacity 0.2s;
}
.btn-chiaro:hover { background: var(--bianco); color: var(--vino); opacity: 0.9; }

/* ---- blog: filtri rubrica ---- */

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}

.filtro {
  background: transparent;
  color: var(--inchiostro);
  border: 1px solid rgba(36, 20, 24, 0.2);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: 10px 18px;
  border-radius: 999px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.filtro:hover { border-color: var(--vino); }
.filtro.attivo {
  background: var(--vino);
  color: var(--bianco);
  border-color: var(--vino);
}

/* ---- blog: newsletter ---- */

.newsletter { text-align: center; max-width: 720px; margin-inline: auto; }

.newsletter-script {
  font-family: "Ephesis", cursive;
  font-size: 44px;
  color: var(--vino);
  line-height: 1;
  margin-bottom: 16px;
}

.newsletter h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  margin: 0 0 18px;
}

.newsletter > p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--creta);
  margin: 0 auto 28px;
  max-width: 46ch;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  min-width: 200px;
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(36, 20, 24, 0.18);
  border-radius: 9px;
  background: var(--gesso);
  min-height: 44px;
  color: var(--inchiostro);
}

/* Il segno di spunta e l'entrata sono definiti insieme agli altri due
   riquadri di conferma, più su. Qui restano solo colore e impaginazione. */
.newsletter-grazie {
  display: block;
  max-width: 44ch;
  margin: 22px auto 0;
  text-align: center;
  color: var(--vino);
  font-size: 16px;
  line-height: 1.6;
}

/* ---- articolo ----
   La pagina usa tutta la larghezza come il resto del sito, ma non tutto puo'
   allargarsi allo stesso modo: una riga di testo lunga 1900px non si legge,
   il limite di leggibilita' sta intorno ai settanta caratteri.
   Quindi la pagina lavora su due misure:
     - "piena"  -> copertina, foto e riquadro ricetta, fino ai gutter;
     - "testo"  -> paragrafi e titoli, larghi --colonna-articolo e centrati.
   Il bianco resta solo ai lati dei paragrafi, dove serve, ed e' simmetrico. */

.articolo-testata {
  max-width: var(--colonna-articolo);
  margin-inline: auto;
  padding-block: clamp(40px, 7vw, 84px) clamp(24px, 3vw, 40px);
}

.link-indietro { font-size: 14px; color: var(--vino); text-decoration: none; }
.link-indietro:hover { text-decoration: underline; }

.articolo-rubrica {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vino);
  margin: 26px 0 18px;
}

.articolo-testata h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(31px, 5vw, 52px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.articolo-meta { font-size: 14px; color: var(--creta); margin-top: 20px; }

.articolo-copertina .cornice {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Su schermi larghi una 16/9 a tutta pagina diventerebbe un muro alto quanto
     lo schermo: oltre questa altezza la foto si allarga soltanto, tagliando
     un po’ sopra e sotto. */
  max-height: 620px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--conchiglia);
}
.articolo-copertina img { width: 100%; height: 100%; object-fit: cover; }

/* La prosa e' una griglia a tre colonne: i figli finiscono nella corsia
   centrale (misura di lettura), tranne le foto, che scavalcano fino ai bordi.
   Cosi' le immagini respirano quanto la pagina e il testo resta leggibile. */
.prosa {
  display: grid;
  grid-template-columns:
    [piena-inizio] 1fr
    [testo-inizio] minmax(0, var(--colonna-articolo)) [testo-fine]
    1fr [piena-fine];
  padding-top: clamp(36px, 5vw, 64px);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: var(--testo-articolo);
  line-height: 1.75;
}
.prosa > * { grid-column: testo-inizio / testo-fine; }
.prosa > .foto-coppia,
.prosa > .foto-singola { grid-column: piena-inizio / piena-fine; }
/* Una foto sola non va oltre la sua risoluzione vera (il build le genera a
   1400px): allargarla fino ai gutter a 1920 la sgranerebbe. */
.prosa > .foto-singola { max-width: 1400px; margin-inline: auto; }
.prosa p { margin: 0 0 24px; }
.prosa h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  /* In griglia i margini verticali non collassano: sopra un sottotitolo si
     sommerebbero i 24px del paragrafo precedente e i 48px del titolo. Questo
     valore e' il complemento, cosi' lo stacco resta quello di prima. */
  margin: clamp(8px, 2vw, 24px) 0 20px;
}
.prosa em { font-style: italic; }

.foto-coppia {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 8px 0 24px;
}
.foto-coppia img { border-radius: 10px; width: 100%; }

.foto-singola { margin: 8px 0 24px; }
.foto-singola img { border-radius: 10px; width: 100%; height: auto; }

.box-ricetta-contenitore { margin: clamp(36px, 5vw, 56px) 0 0; }

.box-ricetta {
  background: var(--conchiglia);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 44px);
}

.box-ricetta .eyebrow { margin-bottom: 20px; }

.box-ricetta-griglia {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* La fascia colorata resta larga quanto la pagina, ma le colonne dentro no:
     a 1920 senza questo limite una riga del procedimento diventa lunga il
     doppio di un paragrafo dell'articolo. */
  max-width: 1400px;
  margin-inline: auto;
}

.box-ricetta h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 14px;
}

.box-ricetta ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.9; }
.box-ricetta ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.box-ricetta ol li { margin-bottom: 10px; }
.box-ricetta ol li:last-child { margin-bottom: 0; }
.box-ricetta .sottotitolo { font-style: italic; color: var(--creta); font-size: 14px; margin: 14px 0 6px; }

/* ---- contatti: canali diretti ---- */

.griglia-canali {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.canale {
  text-decoration: none;
  color: inherit;
  background: var(--conchiglia);
  border-radius: 12px;
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
a.canale:hover { transform: translateY(-3px); color: inherit; }

.canale-etichetta {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vino);
  margin-bottom: 14px;
}

.canale-valore {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.canale p { font-size: 15px; line-height: 1.6; color: var(--creta); margin: 0; }

.canale-social { display: flex; gap: 20px; }
.canale-social a {
  color: var(--vino);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid var(--vino);
}

/* ---- contatti: collabora con me ---- */

.collabora {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.collabora h2 { margin: 0 0 22px; }

.collabora-intro { font-size: 17px; line-height: 1.65; color: var(--rose); margin: 0; max-width: 40ch; }

.lista-collab { list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) {
  .lista-collab { columns: 2; column-gap: 32px; }
}
.lista-collab li {
  break-inside: avoid;
  padding: 12px 0;
  border-bottom: 1px solid rgba(246, 237, 234, 0.16);
  font-size: 15px;
  line-height: 1.4;
}

/* ---- contatti: modulo semplice ---- */

.form-semplice-contenitore { max-width: 680px; margin-inline: auto; }
.form-semplice-contenitore h2 { text-align: center; margin-bottom: 28px; }

.form-semplice { display: grid; gap: 18px; }
.form-semplice label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.form-semplice input,
.form-semplice textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 14px;
  border: 1px solid rgba(36, 20, 24, 0.18);
  border-radius: 9px;
  background: var(--gesso);
  min-height: 44px;
  color: var(--inchiostro);
}
.form-semplice textarea { resize: vertical; }
.form-semplice button { justify-self: start; }

.grazie-chiaro {
  background: var(--conchiglia);
  border-radius: 12px;
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
}
/* È un <h1>: vanno spenti il grassetto e il margine di serie del browser,
   altrimenti sotto il segno di spunta si apre un buco. */
.grazie-chiaro .titolo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--vino);
  margin: 0 0 10px;
}
.grazie-chiaro p { color: var(--creta); font-size: 16px; line-height: 1.6; margin: 0; }

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

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