/* Stories: /stories and /stories/{slug}. A story is a run of frames: big type, big numbers, live
   server cards and a timeline, so it reads like a story board rather than a blog post. */
[hidden] { display: none !important; }

/* ----- Story header ----- */
.s-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.s-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); }
.s-head { max-width: 900px; }
.s-kind { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 500 15px var(--pixel); letter-spacing: .05em; text-transform: uppercase;
  color: #0b1120; background: var(--kind, var(--accent)); padding: 5px 12px; clip-path: var(--notch); }
.s-kind svg { background: rgba(255, 255, 255, .85); padding: 1px; }
.s-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 500 15px var(--pixel); letter-spacing: .03em; color: #9fb0cc; }
.s-meta span + span::before { content: "■"; margin-right: 18px; color: var(--kind, var(--accent)); font-size: 9px; vertical-align: 2px; }
.s-cast { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.s-cast-one { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; clip-path: var(--notch);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.s-cast-one:hover { color: #fff; box-shadow: inset 0 0 0 2px var(--kind, var(--accent)); }
.s-cast-one img { width: 48px; height: 48px; image-rendering: pixelated; clip-path: var(--notch-art); background: #17233a; }
.s-cast-one span { display: grid; }
.s-cast-one small { font: 500 13px var(--pixel); color: var(--accent); letter-spacing: .03em; }

/* ----- Frames ----- */
.s-story { display: grid; gap: 22px; max-width: 900px; margin: 0 auto; font-size: 19px; line-height: 1.7; }
.s-story > p, .s-story > h2, .s-story > h3, .s-story > ul, .s-story > ol:not(.s-timeline) { max-width: 70ch; margin: 0 auto; width: 100%; }
.s-story h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin-top: 18px; }
.s-story h2::before { content: ""; display: block; width: 56px; height: 8px; margin-bottom: 14px; background: var(--kind, var(--accent)); }
.s-story a:not(.btn) { color: var(--link); font-weight: 700; }
.s-frame { display: grid; gap: 14px; padding: clamp(20px, 4vw, 40px); background: var(--surface-2); clip-path: var(--notch); box-shadow: inset 0 -6px 0 var(--line); }
.s-frame > * { margin: 0; }
.s-frame h2::before { display: none; }
.s-frame.s-dark { background: #0f1a2e; color: #e6edf8; box-shadow: inset 0 -6px 0 #060b16; }
.s-frame.s-dark a:not(.btn) { color: var(--accent); }
.s-frame.s-accent { background: var(--kind, var(--accent)); color: #0b1120; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2); }
.s-lead { font-size: clamp(21px, 2.4vw, 25px); line-height: 1.55; font-weight: 700; }
.s-big { display: grid; gap: 6px; text-align: center; padding: clamp(26px, 5vw, 52px) 20px; background: #0b1120; color: #fff; clip-path: var(--notch); }
.s-big b { font: 700 clamp(56px, 11vw, 120px)/0.95 var(--display); color: var(--kind, var(--accent)); letter-spacing: -.02em; }
.s-big span { font: 500 clamp(16px, 2vw, 20px) var(--pixel); letter-spacing: .04em; color: #b8c6de; }
.s-pull { margin: 8px auto; max-width: 780px; padding: 6px 0 6px 28px; border-left: 8px solid var(--kind, var(--accent)); font: 700 clamp(22px, 3vw, 30px)/1.35 var(--display); }
.s-pull cite { display: block; margin-top: 10px; font: 500 15px var(--pixel); letter-spacing: .04em; color: var(--faint); font-style: normal; }
.s-split { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.s-split > div { display: grid; gap: 8px; align-content: start; padding: 20px; background: var(--surface); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--line); font-size: 17px; }
.s-split > div > b:first-child { font: 700 20px var(--display); }
.s-split > div > p { margin: 0; color: var(--muted); }

.s-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.s-timeline::before { content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 6px; background: var(--line); }
.s-timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 10px 0; }
.s-timeline li::before { content: ""; width: 20px; height: 20px; margin: 6px 0 0 11px; background: var(--kind, var(--accent)); clip-path: var(--notch); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); z-index: 1; }
.s-timeline time { display: block; font: 500 16px var(--pixel); letter-spacing: .04em; color: var(--faint); }
.s-timeline p { margin: 2px 0 0; font-size: 18px; }
.s-timeline li > div { min-width: 0; }

.s-icon { width: 128px; height: 128px; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); justify-self: center; }

/* ----- Live pieces ----- */
.s-server { display: grid; gap: 14px; padding: 18px; background: #0f1a2e; color: #fff; clip-path: var(--notch); box-shadow: inset 0 -6px 0 var(--accent); }
.s-server-id { display: flex; align-items: center; gap: 14px; color: #fff !important; text-decoration: none; min-width: 0; }
.s-server-id img { width: 64px; height: 64px; image-rendering: pixelated; clip-path: var(--notch-art); background: #17233a; flex-shrink: 0; }
.s-server-id span { display: grid; gap: 2px; min-width: 0; }
.s-server-id b { font: 700 24px var(--display); }
.s-server-id small { font-size: 15px; color: #b8c6de; }
.s-on { color: var(--accent); font-weight: 800; }
.s-off { color: #ff8a80; font-weight: 800; }
.s-server-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.s-server-actions .copy code { background: none; color: inherit; font: 600 15px var(--mono); margin-right: 8px; }
.s-server-actions .btn-outline { color: #fff; background: transparent; box-shadow: inset 0 0 0 2px #50627f; }
.s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.s-stats > div { display: grid; gap: 2px; padding: 16px; background: var(--surface); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--kind, var(--accent)); }
.s-stats b { font: 700 clamp(26px, 4vw, 36px)/1 var(--display); }
.s-stats span { font-size: 14px; font-weight: 700; color: var(--muted); }
.s-stats-note { grid-column: 1 / -1; margin: 0; font: 500 13px var(--pixel); letter-spacing: .03em; color: var(--faint); }
.s-video-play { position: relative; display: grid; place-items: center; gap: 14px; width: 100%; aspect-ratio: 16 / 9; border: 0; cursor: pointer; color: #fff; clip-path: var(--notch);
  background: radial-gradient(circle at 50% 40%, #22314d, #0b1120 70%); }
.s-video-play img { width: 96px; height: 96px; image-rendering: pixelated; clip-path: var(--notch-art); }
.s-video-btn { display: grid; place-items: center; width: 74px; height: 74px; font-size: 30px; color: var(--on-accent); background: var(--accent); clip-path: var(--notch); box-shadow: inset 0 -5px 0 var(--accent-edge); }
.s-video-play:hover .s-video-btn { transform: scale(1.06); }
.s-video-cap { font: 700 18px var(--display); }
.s-video-cap small { display: block; font: 500 13px var(--pixel); color: #8fa0bd; text-align: center; }
.s-video.playing .s-video-play { display: none; }
.s-video-slot iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; clip-path: var(--notch); }

.s-sources { display: grid; gap: 8px; max-width: 70ch; margin: 12px auto 0; width: 100%; font-size: 16px; }
.s-sources h2 { font-size: 22px; }
.s-sources h2::before { width: 36px; height: 6px; }
.s-sources ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; }

.s-pitch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 26px; background: #0f1a2e; color: #fff; clip-path: var(--notch); box-shadow: inset 0 -6px 0 var(--accent); }
.s-pitch h2 { color: #fff; }
.s-pitch p { color: #c6d2e6; margin: 6px 0 0; max-width: 60ch; }
.s-pitch-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.s-pitch .btn-outline { color: #fff; background: transparent; box-shadow: inset 0 0 0 2px #50627f; }
@media (max-width: 760px) { .s-pitch { grid-template-columns: minmax(0, 1fr); } }

/* ----- Cards ----- */
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.s-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px; background: var(--surface); color: var(--text); text-decoration: none; clip-path: var(--notch);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -6px 0 var(--kind); transition: transform .15s steps(3, end); }
.s-card:hover { color: var(--text); transform: translateY(-3px); }
.s-card-art { display: grid; place-items: center; width: 112px; height: 112px; background: #0f1a2e; clip-path: var(--notch); }
.s-card-art img { width: 96px; height: 96px; image-rendering: pixelated; clip-path: var(--notch-art); }
.s-card-body { display: grid; gap: 6px; align-content: start; }
.s-card-kind { font: 500 13px var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.s-card-body b { font: 700 21px/1.2 var(--display); }
.s-card-sum { font-size: 16px; color: var(--muted); }
.s-card-foot { font-size: 14px; font-weight: 700; color: var(--faint); }
.s-card-featured { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); padding: 22px; background: #0f1a2e; color: #fff; box-shadow: inset 0 -8px 0 var(--kind); }
.s-card-featured:hover { color: #fff; }
.s-card-featured .s-card-art { width: 100%; height: auto; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #22314d, #0b1120 72%); }
.s-card-featured .s-card-art img { width: 160px; height: 160px; }
.s-card-featured .s-card-body b { font-size: clamp(26px, 3.4vw, 40px); }
.s-card-featured .s-card-sum { color: #c6d2e6; font-size: 18px; }
.s-card-featured .s-card-kind, .s-card-featured .s-card-foot { color: var(--kind); }
@media (max-width: 620px) { .s-card, .s-card-featured { grid-template-columns: minmax(0, 1fr); } .s-card-art { width: 100%; height: 140px; } }

/* ----- Live board ----- */
.si-head { max-width: 900px; }
.si-board-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.si-chip { cursor: pointer; border: 0; font: 700 16px var(--body); color: var(--text); }
.si-board-grid { columns: 280px; column-gap: 14px; }
.si-tile { break-inside: avoid; display: grid; gap: 10px; margin-bottom: 14px; padding: 16px; background: var(--surface); color: var(--text); text-decoration: none; clip-path: var(--notch);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -5px 0 var(--tile, var(--line)); transition: transform .15s steps(3, end); }
.si-tile:hover { color: var(--text); transform: translateY(-3px); }
.si-tile-top { display: flex; align-items: center; gap: 8px; font: 500 14px var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--tile, var(--faint)); }
.si-tile-top time { margin-left: auto; color: var(--faint); text-transform: none; }
.si-tile-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--surface-2); clip-path: var(--notch); }
.si-tile-server { display: flex; align-items: center; gap: 10px; }
.si-tile-server img { width: 40px; height: 40px; image-rendering: pixelated; clip-path: var(--notch-art); background: var(--raised); }
.si-tile-server b { font: 700 19px var(--display); }
.si-tile-text { font-size: 15px; color: var(--muted); line-height: 1.5; }
.si-season { --tile: #22b86b; } .si-launch { --tile: #ff8a3d; } .si-trend { --tile: #1a9cc8; }
.si-verified { --tile: #c9951a; } .si-new { --tile: #6b46c1; } .si-busy { --tile: #c53030; }

@media (prefers-reduced-motion: reduce) { .s-card, .si-tile { transition: none; } .s-progress { display: none; } }