/* =====================================================================
   real-weddings.css - Real Weddings list + story pages (added Oct 30, 2026,
   Website & SEO). Loaded only by real-weddings/index.php and story.php.
   Straight edges (no arches), Clay & Sage variables from style.css.
   Every <img> has width/height, so aspect-ratio comes from the HTML and
   nothing shifts while photos load.
   ===================================================================== */
.rw-list { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rw-list { grid-template-columns: repeat(3, 1fr); } }
.rw-card__link { display: block; color: inherit; text-decoration: none; }
.rw-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.rw-card__season { margin: 1rem 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.rw-card__title { font-size: var(--step-1); margin: 0 0 0.6rem; }

.rw-story img { display: block; width: 100%; height: auto; }
.rw-open { margin: 0; }
.rw-open img { max-height: 88vh; object-fit: cover; }
.rw-open .rw-caption { padding: 0 var(--gutter); }
.rw-head { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.rw-head h1 { margin-bottom: 1rem; }
.rw-flow { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.rw-fig { margin: 0; }
.rw-fig img { border-radius: var(--radius); }
.rw-fig--tall { max-width: 760px; margin-inline: auto; width: 100%; }
.rw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 2vw, 1.5rem); }
.rw-caption { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--muted); margin-top: 0.6rem; }
.rw-fig--last { margin-top: clamp(1rem, 3vw, 2.5rem); }
.rw-related { margin-top: 1.25rem; }