/* Story page styles (extracted from server/app.py render_story_page inline <style>) */
:root { --container: min(1280px, calc(100% - 48px)); --story-max: 1120px; --story-reading: 780px; }

/* Center every top-level story block in a consistent content column that
   resizes with the viewport instead of hugging the left edge. */
main#main { padding: 0 clamp(16px, 3vw, 40px); box-sizing: border-box; }
main#main > .story-cover,
main#main > .story-glass,
main#main > .key-points-card,
main#main > .story-body,
main#main > .ad-unit-wrap,
main#main > .share-bar,
main#main > .related-articles,
main#main > .story-footer {
  max-width: var(--story-max);
  margin-left: auto;
  margin-right: auto;
}

.story-cover { border-radius: 28px; overflow: hidden; margin-top: 32px; height: 500px; max-height: 500px; background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%); display: flex; align-items: center; justify-content: center; padding: 20px; }
.story-cover img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; }
.story-glass { backdrop-filter: blur(40px) saturate(180%); background: rgba(10, 14, 26, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 28px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); padding: 32px; margin-top: 28px; }
.story-kicker-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.story-kicker { color: #adff2f; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.story-kicker:hover { opacity: .75; }
.story-featured-label { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 100, 0, .3); background: rgba(255, 100, 0, .14); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff6a00; }
.story-h1 { font-family: "Bebas Neue", sans-serif; font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: .92; letter-spacing: .03em; margin: 0 0 16px; background: linear-gradient(140deg, #fff 10%, rgba(255, 190, 80, 0.92) 58%, rgba(255, 100, 0, 0.88) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.story-deck { color: #f8f9fc; font-size: 1.05rem; line-height: 1.75; margin: 0 0 16px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.story-meta span { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #b8c4d4; padding: 7px 13px; font-size: .88rem; }
.story-summary { color: #b8c4d4; line-height: 1.8; margin: 0 0 16px; }
.source-note { color: #b8c4d4; line-height: 1.8; margin: 0 0 16px; }
.source-note a { color: #adff2f; }
.story-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.key-points-card { backdrop-filter: blur(40px) saturate(180%); background: rgba(10, 14, 26, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 28px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); padding: 24px; margin-bottom: 24px; }
.key-points-card h3 { font-family: "Bebas Neue", sans-serif; font-size: 1.5rem; letter-spacing: .06em; margin: 0 0 16px; color: #f8f9fc; }
.key-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.key-points li { display: flex; gap: 10px; line-height: 1.7; color: #b8c4d4; }
.key-points li::before { content: "//"; color: #adff2f; font-weight: 700; flex-shrink: 0; }
.article-section-card { backdrop-filter: blur(40px) saturate(180%); background: rgba(10, 14, 26, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); padding: 22px; margin-bottom: 16px; }
.article-section-card h2 { font-size: 1.25rem; margin: 0 0 10px; color: #f8f9fc; }
.article-section-card p { color: #b8c4d4; line-height: 1.8; margin: 0; }
.story-gallery { display: grid; gap: 16px; }
.gallery-card { backdrop-filter: blur(40px) saturate(180%); background: rgba(10, 14, 26, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.gallery-card figcaption { color: #b8c4d4; font-size: .9rem; line-height: 1.6; padding: 12px 16px 16px; }
.story-footer { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.story-footer-brand { font-family: "Bebas Neue", sans-serif; font-size: 1.5rem; letter-spacing: .08em; color: #f8f9fc; text-decoration: none; }
.story-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.story-footer-links a { color: #b8c4d4; text-decoration: none; font-size: .93rem; transition: color .2s; }
.story-footer-links a:hover { color: #f8f9fc; }
@media (max-width: 900px) { .story-body-grid { grid-template-columns: 1fr; } }
.related-articles { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); }
.related-heading { font-family: "Bebas Neue", sans-serif; font-size: 1.8rem; letter-spacing: .06em; color: #f8f9fc; margin: 0 0 24px; }
.related-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-card { backdrop-filter: blur(40px) saturate(180%); background: rgba(10, 14, 26, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); overflow: hidden; text-decoration: none; transition: transform .25s, border-color .25s; }
.related-card:hover { transform: translateY(-4px); border-color: rgba(173, 255, 47, 0.3); }
.related-card-img { aspect-ratio: 16 / 9; overflow: hidden; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.related-card:hover .related-card-img img { transform: scale(1.05); }
.related-card-copy { display: grid; gap: 8px; padding: 16px; }
.related-card-copy h3 { font-size: 1rem; line-height: 1.35; color: #f8f9fc; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.related-card-copy p { color: #b8c4d4; font-size: .85rem; line-height: 1.6; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 780px) { .related-grid { grid-template-columns: 1fr; } }
.share-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); }
.share-label { color: #6b7894; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 14, 26, 0.5); color: #f8f9fc; font-family: "Space Grotesk", sans-serif; font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.share-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
.share-btn.copied { background: rgba(173, 255, 47, .12); border-color: rgba(173, 255, 47, .35); color: #adff2f; }
.ad-unit-wrap { margin: 32px 0; min-height: 90px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; }
.ad-unit-wrap ins { width: 100%; }