/* ============================================================
   HOME — page-specific chrome only. Ported verbatim from `home.jsx`'s own
   inline <style> block plus the two rules `vibe-footer.jsx`'s
   `VibeArticles` injects inline (both couple-website-markup repo). Every
   value is a token from colors_and_type.css; no new colors/type/radii.
   ============================================================ */

/* Home content band — one flex column so the gap BETWEEN the three white
   sections (FindYourPerson / Features / Pricing) is a single marketing
   section gap (the --rhythm-128 ladder) instead of two stacked
   --rhythm-80 section paddings. */
.home-shell { display: flex; flex-direction: column; gap: var(--rhythm-128); }
@media (max-width: 900px) { .home-shell { gap: 96px; } }
@media (max-width: 768px) { .home-shell { gap: 80px; } }
@media (max-width: 640px) { .home-shell { gap: 64px; } }

/* "Preview of most recent Vibe articles" heading link. */
.vibe-head-link { text-decoration: none; }
.vibe-head-link .h2-section { transition: color 160ms ease; }
.vibe-head-link:hover .h2-section { color: var(--couple-purple); }

/* Polaroid fly-off carousel (public/assets/js/home.js, port of
   polaroid-stack.jsx). This base transition is a fallback only — the
   script sets `transition` inline per phase (fly vs. settle-and-fade-in),
   which always wins over this rule; it just keeps the resting frame from
   looking broken for the instant before the script attaches. */
.hero-polaroid-frame {
  transition: opacity 300ms ease;
}