/* Layout "Stories" (2026-10-31, owner): the menu down the left as usual; the guest home is stories on top and tall
   full-screen cards one under another (templates/layouts/stories/); every character card is a 9:16 story card. */
.st-bar { padding: 4px 2px 12px; }
.st-bar .story .ring { width: 78px; height: 78px; }
.st-bar .story { width: 82px; }
.st-head { text-align: center; padding: 18px 0 26px; }
.st-head h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.03em; margin: 6px auto 10px; max-width: 820px; }
.st-head .lead { max-width: 640px; margin: 0 auto 18px; color: var(--ink-2); }
.st-reels { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: 40px; }
html:has(body.st-home) { scroll-snap-type: y proximity; }
.st-reel { position: relative; width: min(440px, 100%); aspect-ratio: 9/16; max-height: calc(100vh - 60px); border-radius: 22px; overflow: hidden; background: #0d0b12; scroll-snap-align: center; box-shadow: var(--sh-3); }
.st-media, .st-media img, .st-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.st-reel::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 6, 14, .85)); pointer-events: none; }
.st-info { position: absolute; left: 16px; right: 76px; bottom: 18px; z-index: 2; color: #fff; }
.st-who { display: flex; align-items: center; gap: 10px; }
.st-who .ring { width: 42px; height: 42px; flex: none; }
.st-who b { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.st-who div span { display: block; font-size: 12.5px; opacity: .85; }
.st-who .badge-ai { background: rgba(255, 255, 255, .92); margin-left: 4px; }
.st-info p { margin: 10px 0 0; font-size: 14px; line-height: 1.4; opacity: .95; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-acts { position: absolute; right: 10px; bottom: 22px; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.st-acts a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.st-acts a svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.st-acts a:hover { color: var(--brand); }
/* Discover and every other card grid: tall story cards with a ring around the corner badge */
body.layout-stories .pcard { aspect-ratio: 9/16; border-radius: 18px; }
body.layout-stories .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
body.layout-stories .pcard .top::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); margin-right: 2px; }
body.layout-stories .pcard .meta { bottom: 16px; }
body.layout-stories .pcard .name { font-size: 18px; }
@media (max-width: 900px) {
  /* phones: each card fills the screen between the top bar and the tab bar */
  .st-reels { gap: 10px; margin-left: -14px; margin-right: -14px; }
  .st-reel { width: 100%; aspect-ratio: auto; height: calc(100dvh - var(--top-h) - var(--tab-h) - 16px); max-height: none; border-radius: 0; }
  .st-bar .story .ring { width: 66px; height: 66px; } .st-bar .story { width: 70px; }
  body.layout-stories .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}