.page-stories { min-width: 0; background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%); color: #17223a; }
.page-stories .home-hero-nav a[aria-current="page"] { color: #4d50ef; }
.stories-archive { width: min(calc(100% - 76px), 1320px); margin: 0 auto; padding: 58px 0 96px; }
.stories-archive h1 { margin: 0 0 30px; font-size: 28px; letter-spacing: -.06em; }
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.story-card { display: grid; gap: 14px; min-width: 0; padding: 12px; border: 1px solid #e2e7f2; border-radius: 16px; background: #fff; color: inherit; box-shadow: 0 12px 30px rgba(31, 45, 79, .06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.story-card:hover, .story-card:focus-visible { border-color: #9ea9ff; box-shadow: 0 17px 36px rgba(64, 73, 199, .16); outline: none; transform: translateY(-2px); }
.story-card figure { aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border-radius: 10px; background: #edf0f8; }
.story-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-card h2 { margin: 0 4px 4px; font-size: 17px; line-height: 1.45; letter-spacing: -.04em; }
@media (max-width: 760px) { .stories-archive { width: calc(100% - 32px); padding: 34px 0 56px; }.stories-archive h1 { margin-bottom: 22px; font-size: 24px; }.stories-grid { grid-template-columns: 1fr; gap: 14px; }.story-card { padding: 10px; }.story-card h2 { font-size: 16px; } }

.story-card .story-view-count { margin: -6px 4px 4px; color: #746b5e; font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }