.stories-page { padding-top: 56px; padding-bottom: 72px; }
.stories-page > h1 { color: #64162b; font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 16px; }
.stories-page > p { max-width: 64ch; color: #6b5961; line-height: 1.8; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin-top: 36px; }
.blog-grid .blog-card {
  display: flex; flex-direction: column; min-width: 0; padding: 0 0 24px;
  border: 1px solid #e4d8dd; border-radius: 16px; overflow: hidden;
  background: #fffdfb; box-shadow: 0 6px 20px #4c26330b;
  animation: story-reveal .55s both; animation-delay: calc(var(--story-order,0) * 70ms);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-grid .blog-card:hover, .blog-grid .blog-card:focus-within {
  transform: translateY(-5px); box-shadow: 0 16px 32px #4c263319; border-color: #c59ca9;
}
.blog-grid .blog-card > img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; margin: 0; border-radius: 0; }
.blog-grid .blog-card:not(:has(> img))::before {
  content: ""; display: block; aspect-ratio: 16/10;
  background: linear-gradient(135deg,transparent 46%,#edd19d 46% 49%,transparent 49%), radial-gradient(ellipse at 80% 25%,#ae5367,transparent 60%), #57172b;
}
.blog-grid .blog-card > h2 { padding: 0 24px; margin: 24px 0 12px; font-size: 1.4rem; line-height: 1.35; overflow-wrap: anywhere; }
.blog-grid .blog-card > h2 a { color: #431a28; text-decoration: none; }
.blog-grid .blog-card > p { padding: 0 24px; margin: 0 0 24px; color: #6b5961; line-height: 1.75; overflow-wrap: anywhere; }
.blog-grid .blog-card > a { align-self: flex-start; margin: auto 24px 0; border-radius: 8px; background: #801b32; color: #fff; padding: 11px 17px; font-weight: 600; text-decoration: none; }
.blog-grid a:focus-visible { outline: 3px solid #b28632; outline-offset: 4px; }
.blog-grid > p { grid-column: 1/-1; padding: 32px; border: 1px dashed #ccb8c0; border-radius: 12px; }
@keyframes story-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:1000px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .blog-grid { grid-template-columns:minmax(0,1fr); gap:20px; } .stories-page { padding-top:32px; } }
@media(prefers-reduced-motion:reduce) { .blog-grid .blog-card { animation:none; transition:none; } .blog-grid .blog-card:hover,.blog-grid .blog-card:focus-within { transform:none; } }