/* Web Stories index (/stories/). Tokens come from site.css; see DESIGN.md. */
.st-hero{padding:calc(var(--nav-h) + 72px) 0 56px}
.st-hero h1{font-size:clamp(2.2rem,6vw,4.2rem);max-width:18ch}
.st-hero h1 em{color:var(--dawn)}
.st-hero .lede{color:rgba(255,252,246,.86);margin-top:16px}
.st-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.st-filters a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--line-dark);color:var(--paper);text-decoration:none;font-size:.95rem;transition:background .25s,border-color .25s,box-shadow .25s}
.st-filters a span{font-family:var(--font-mono);font-size:.72rem;opacity:.7}
.st-filters a:hover{border-color:var(--paper)}
.st-filters a.on{background:var(--tea);border-color:var(--tea);box-shadow:0 8px 18px -10px rgba(29,107,71,.7)}
.st-list{padding-top:56px}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@media (min-width:700px){.st-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}}
@media (min-width:1100px){.st-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.st-media{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--mist-2);box-shadow:var(--shadow-sm);transition:box-shadow .3s,transform .3s var(--ease)}
.st-media::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--lungta);opacity:0;transition:opacity .3s}
.st-media img{width:100%;height:100%;object-fit:cover}
.st-card:hover .st-media{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.st-card:hover .st-media::after{opacity:1}
.st-tag{color:var(--saffron);text-transform:uppercase;font-size:.68rem;letter-spacing:.14em;margin-top:4px}
.st-title{font-family:var(--font-display);font-size:1.18rem;line-height:1.15}
.st-desc{color:var(--slate);font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:480px){.st-desc{display:none}.st-title{font-size:1.02rem}}
.st-pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:48px}
.st-pager a{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--paper)}
.st-pager a:hover{border-color:var(--tea);color:var(--tea)}
@media (prefers-reduced-motion:reduce){.st-media,.st-media::after,.st-filters a{transition:none}.st-card:hover .st-media{transform:none}}