/* sito.css · solo le composizioni di pagina del sito di Romana Dell'Erba.
   I componenti stanno in rde/rde.css (design system): qui niente colori, caratteri o misure scritti a mano,
   solo token --rde-* e la disposizione dei blocchi. Se un pezzo serve in più pagine, va nel design system. */

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main{outline:0}
.sito-salta{position:fixed;top:-60px;left:12px;z-index:99;padding:10px 14px;background:var(--rde-antracite);color:var(--rde-bianco);text-decoration:none}
.sito-salta:focus{top:12px}

/* Intestazione di sezione: eyebrow e titolo, a sinistra o centrati */
.sito-testa{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.sito-testa--centro{align-items:center;text-align:center}

/* Due colonne: testo e riquadri (manifesto), testo e foto (mi presento) */
.sito-due{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
.sito-due--centro{align-items:center}
@media (min-width:860px){
  .sito-due{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .sito-due--pari{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.sito-foto{display:block;width:100%;height:auto;border-radius:var(--rde-r-xl)}

/* Il patto: due colonne di impegni, strette e centrate */
.sito-patto{display:grid;gap:40px;width:min(680px,100%);margin-inline:auto}
@media (min-width:640px){.sito-patto{grid-template-columns:1fr 1fr}}

/* Il modulo "Siediti al tavolo": riquadro bianco dentro la fascia grigia */
.sito-tavolo{width:min(720px,100%);margin-inline:auto}

/* Fascia "La mia promessa": tutto centrato, con il titolo inclinato */
.sito-promessa{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.sito-promessa .rde-display{font-size:clamp(2.5rem,8.5vw,6.5rem);word-break:break-word}
/* Il titolo inclinato sale a destra e scende a sinistra: gli si lascia lo spazio sopra e sotto */
.sito-promessa .rde-slant{margin-block:clamp(28px,6vw,84px)}