/* Retreats shares the site's photograph, card, type and spacing tokens.
   Every rule is scoped to this section so other offerings retain their layout. */
#retreats .retreat-intro{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
#retreats .retreat-intro h2{max-width:10em}
#retreats .retreat-intro .lead{margin:var(--s5) 0 0}
#retreats .retreat-intro .fig::before{padding-top:75%}
#retreats .retreat-offerings{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
#retreats .retreat-card{
  padding:clamp(24px,3vw,44px); border-radius:var(--r-lg);
  background:linear-gradient(168deg,#FFFFFF 0%,var(--light-warm) 100%);
  box-shadow:var(--gloss),var(--hair),var(--lift-1);
}
#retreats .retreat-card h3{margin-bottom:var(--s4)}
#retreats .retreat-card .prose{max-width:none; font-size:var(--fs-small); line-height:1.7}
#retreats .retreat-contact{
  max-width:none; padding:clamp(24px,3vw,44px); border-radius:var(--r-lg);
  background:var(--light-deep);
}
#retreats .retreat-contact h3{max-width:30em; color:var(--fg)}
#retreats .retreat-contact a{text-underline-offset:4px}
@media (max-width:900px){
  #retreats .retreat-intro{grid-template-columns:minmax(0,1fr); gap:var(--s5)}
  #retreats .retreat-intro h2{max-width:14em}
  #retreats .retreat-intro .lead{max-width:38rem}
  #retreats .retreat-intro .fig::before{padding-top:66.4%}
  #retreats .retreat-offerings{grid-template-columns:minmax(0,1fr); gap:var(--s4)}
}
@media (max-width:600px){
  #retreats .retreat-intro .fig::before{padding-top:75%}
}