/* Shared redesigned episode components. Page-specific styles contain content-specific visuals only. */
/* Full-color editorial artwork; captions remain accessible HTML. */
.story-page .episode-art { margin: 0 0 28px; overflow: hidden; border-radius: 12px; background: var(--forest); color: #fffaf0; }
.story-page .episode-art > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.story-page .episode-art figcaption { padding: 22px clamp(16px, 3vw, 36px); }
.story-page .art-key { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.story-page .art-key strong { display: block; color: var(--gold); font-size: 18px; }
.story-page .episode-art figcaption p { margin: 18px 0 0; font-size: 12px; color: #dce4d9; }
.story-page {
  --paper: #f6f4ed; --ink: #203b35; --subtle: #53655d;
  --forest: #142f29; --gold: #ecd193; --rule: #d8ddd2;
  background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1.7;
}
.story-page .wrap { max-width: 1240px; padding: 24px 36px; }
.story-page a { color: #285b4b; text-underline-offset: .2em; }
.story-page a:focus-visible, .story-page button:focus-visible, .story-page summary:focus-visible { outline: 3px solid #a66b25; outline-offset: 5px; }
.story-page .sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 12px; background: white; z-index: 10; }
.story-page .brand-name { font-size: 20px; font-weight: 750; letter-spacing: -.5px; }
.story-page .site-header { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.story-page .primary-nav { gap: 6px; }
.story-page .btn { color: var(--ink); background: transparent; border-color: var(--rule); border-radius: 6px; box-shadow: none; font-size: 14px; padding: 9px 12px; }
.story-page .primary-nav .btn { border-color: transparent; }
.story-page .primary-nav .btn:last-child { border-color: var(--rule); }
.story-page .btn:hover { background: #e7ecdf; }
.story-page .breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0; font-size: 13px; color: var(--subtle); }
.story-page .breadcrumb a { text-decoration: none; }
.story-page .story-hero { display: grid; grid-template-columns: 1fr 1fr; background: var(--forest); color: #fffaf0; border-radius: 12px; overflow: hidden; }
.story-page .hero-copy { padding: 42px 38px 40px; position: relative; z-index: 1; }
.story-page .eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 17px; }
.story-page .hero-copy .eyebrow { color: var(--gold); }
.story-page h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 3.6vw, 51px); line-height: 1.12; font-weight: 400; letter-spacing: -.035em; margin: 0 0 22px; }
.story-page h1 span { display: block; font-family: inherit; font-size: .57em; line-height: 1.35; letter-spacing: -.015em; color: #e1e7d8; margin-bottom: 18px; }
.story-page h1 em { color: var(--gold); font-style: normal; }
.story-page .hero-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.65; color: #dce4d9; max-width: 42ch; }
.story-page .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 25px; }
.story-page .hero-actions .btn { background: var(--gold); border-color: var(--gold); color: #20372e; font-size: 15px; padding: 12px 18px; font-weight: 750; }
.story-page .hero-actions > a:not(.btn) { color: #fffaf0; font-size: 15px; }
.story-page .hero-art { margin: 0; position: relative; min-width: 0; }
.story-page .hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center; }
.story-page .hero-art figcaption { position: absolute; bottom: 12px; right: 12px; left: 12px; text-align: right; font-size: 11px; color: #fff; text-shadow: 0 1px 4px #000; }
.story-page .hero-art::after { content: ''; position: absolute; inset: 70% 0 0; background: linear-gradient(transparent, #0b201a80); pointer-events: none; }
.story-page .hero-art figcaption { z-index: 1; }
.story-page .page-nav { display: flex; gap: 28px; border-bottom: 1px solid var(--rule); padding: 18px 0; font-size: 14px; flex-wrap: wrap; }
.story-page .page-nav a { text-decoration: none; font-weight: 650; }
.story-page section[id], .story-page details[id] { scroll-margin-top: 24px; }
.story-page .story-section { padding: 54px 0; border-bottom: 1px solid var(--rule); }
.story-page .section-head { display: flex; gap: 24px; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.story-page .section-head .eyebrow { color: #537064; margin-bottom: 8px; }
.story-page h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(29px, 3vw, 38px); line-height: 1.2; font-weight: 400; letter-spacing: -.025em; margin: 0; }
.story-page h3 { line-height: 1.35; }
.story-page .section-note { font-size: 14px; color: var(--subtle); margin: 0; }
.story-page .watch-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 24px; align-items: start; }
.story-page .player { border-radius: 8px; background: #112a24; }
.story-page .player--wide { aspect-ratio: 16 / 9; }
.story-page .player--classic { aspect-ratio: 4 / 3; }
.story-page .player--portrait { aspect-ratio: 9 / 16; }
.story-page .local-video-preview { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 26px; text-align: center; background: linear-gradient(135deg, #132f29, #234b3e); color: #f6f4ed; }
.story-page .local-video-preview span { color: var(--gold); font-size: 12px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.story-page .local-video-preview strong { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(22px, 3vw, 32px); font-weight: 400; }
.story-page .local-video-preview p { max-width: 42ch; margin: 0; color: #d7e3d6; font-size: 15px; }
.story-page .video-footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; padding-top: 12px; color: var(--subtle); }
.story-page .video-footer a { font-weight: 650; }
.story-page .chapter-panel { background: #e9ede3; border: 1px solid #d7dfd0; border-radius: 8px; overflow: hidden; }
.story-page .chapter-panel > summary { padding: 15px 19px; cursor: pointer; font-weight: 750; font-size: 17px; }
.story-page .chapter-panel > summary small { font-size: 12px; font-weight: 400; margin-left: 8px; }
.story-page .chapter-list { list-style: none; padding: 0 8px 8px; margin: 0; max-height: 300px; overflow: auto; scrollbar-color: #728b79 transparent; }
.story-page .chapter-list a { display: grid; grid-template-columns: 48px 1fr 12px; gap: 8px; padding: 11px; border-radius: 5px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.4; }
.story-page .chapter-list a:hover, .story-page .chapter-list a[aria-current] { background: #d6e0ce; }
.story-page .chapter-list time { color: #4d6756; font-variant-numeric: tabular-nums; font-size: 13px; }
.story-page .chapter-list a::after { content: '↗'; color: #5c735f; }
.story-page .chapter-credit { font-size: 11px; line-height: 1.5; color: var(--subtle); padding: 0 18px 13px; margin: 0; }
.story-page #chapter-status { font-size: 13px; min-height: 1.7em; margin: 7px 0 0; color: var(--subtle); }
.story-page .takeaways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.story-page .takeaway { border-left: 2px solid #a9bba3; padding-left: 22px; }
.story-page .takeaway .number { display: block; color: #687e63; font-family: Georgia, serif; font-size: 30px; line-height: 1; margin-bottom: 16px; }
.story-page .takeaway h3 { font-size: 19px; margin: 0 0 10px; }
.story-page .takeaway p { font-size: 17px; color: var(--subtle); margin: 0; }
.story-page .timeline { list-style: none; padding: 0; margin: 28px 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); }
.story-page .timeline li { position: relative; padding: 25px 22px 0 0; border-top: 3px solid #96ac88; }
.story-page .timeline li::before { content: ''; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #547052; border: 3px solid var(--paper); }
.story-page .timeline li:nth-child(3) { border-color: #b57844; }
.story-page .timeline li:nth-child(3)::before { background: #ad6931; }
.story-page .timeline .era-date { font-size: 23px; font-family: Georgia, serif; color: var(--ink); }
.story-page .timeline small { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--subtle); }
.story-page .timeline h3 { font-size: 17px; margin: 15px 0 7px; }
.story-page .timeline p { font-size: 15px; line-height: 1.6; color: var(--subtle); margin: 0; }
.story-page .bird-reveal { margin-top: 30px; background: #e7ecdf; border-radius: 8px; padding: 21px 26px; }
.story-page .bird-reveal summary { cursor: pointer; font-weight: 700; }
.story-page .bird-reveal p { margin-bottom: 0; max-width: 75ch; }
.story-page .reading-intro { max-width: 75ch; color: var(--subtle); margin: 0 0 26px; }
.story-page .reading-intro strong { color: var(--ink); }
.story-page .reading-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.story-page .reading-aside { font-size: 15px; color: var(--subtle); }
.story-page .reading-aside strong { display: block; color: var(--ink); margin-bottom: 10px; }
.story-page .reading-aside p { margin: 0 0 16px; }
.story-page .expand-all { cursor: pointer; border: 1px solid #bccab6; border-radius: 5px; padding: 10px 14px; background: transparent; font-size: 14px; color: var(--ink); }
.story-page .questions details { border-top: 1px solid var(--rule); }
.story-page .questions details:last-child { border-bottom: 1px solid var(--rule); }
.story-page .questions summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 33px 1fr 24px; gap: 12px; padding: 24px 4px; align-items: start; }
.story-page .questions summary::-webkit-details-marker { display: none; }
.story-page .questions summary::after { content: '+'; font-size: 28px; font-weight: 400; line-height: 1.1; text-align: center; }
.story-page .questions details[open] > summary::after { content: '−'; }
.story-page .question-number { font-size: 13px; padding-top: 4px; color: #617a58; }
.story-page .questions summary strong { display: block; font-size: 20px; font-weight: 650; line-height: 1.45; }
.story-page .questions summary small { display: block; font-size: 14px; font-weight: 400; color: var(--subtle); margin-top: 5px; }
.story-page .answer { padding: 0 39px 28px 49px; }
.story-page .answer p { margin: 0 0 18px; }
.story-page .answer p:last-child { margin-bottom: 0; }
.story-page .answer .context { background: #e9ede3; padding: 16px 20px; font-size: 16px; border-radius: 5px; }
.story-page .answer .watch-moment { font-size: 14px; display: inline-block; border-bottom: 1px solid #a4b8a0; padding-bottom: 3px; font-weight: 650; }
.story-page .verse { margin: 22px 0; border-left: 3px solid #b9a36f; padding: 7px 0 7px 22px; }
.story-page .verse .arabic { font-family: 'Traditional Arabic', 'Noto Naskh Arabic', serif; font-size: 28px; line-height: 1.9; margin-bottom: 12px; }
.story-page .verse figcaption { font-size: 13px; color: var(--subtle); }
.story-page .source-details { background: #eceee6; border: 0; padding: 20px 24px; border-radius: 7px; margin-top: 20px; }
.story-page .source-details > summary { cursor: pointer; font-size: 18px; font-weight: 650; }
.story-page .source-details p, .story-page .source-details li { font-size: 16px; }
.story-page .source-details li + li { margin-top: 10px; }
.story-page .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.story-page .related-card { display: grid; grid-template-columns: 160px 1fr; gap: 22px; padding: 18px; background: #ebece3; border-radius: 8px; text-decoration: none; }
.story-page .related-card:hover { background: #dfe6d6; text-decoration: none; }
.story-page .related-card img { width: 160px; height: 120px; object-fit: cover; border-radius: 5px; }
.story-page .related-card h3 { font-size: 18px; margin: 6px 0; }
.story-page .related-card p { font-size: 14px; line-height: 1.55; margin: 0; color: var(--subtle); }
.story-page .related-card .eyebrow { font-size: 10px; margin: 0; }
.story-page footer { color: var(--subtle); font-size: 14px; border-color: var(--rule); }
.story-page footer .muted { color: var(--subtle); }
.story-page [hidden] { display: none !important; }
@media (max-width: 1000px) {
  .story-page .site-header { grid-template-columns: 1fr; }
  .story-page .hero-copy { padding: 32px 28px; }
  .story-page .related-card { grid-template-columns: 1fr; }
  .story-page .related-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .story-page .reading-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .story-page .wrap { padding: 18px 20px; }
  .story-page .story-hero { grid-template-columns: 1fr; }
  .story-page .hero-copy { padding: 30px 26px; }
  .story-page .hero-art { height: 260px; }
  .story-page .hero-art img { object-position: center 55%; }
  .story-page h1 { font-size: 43px; }
  .story-page .page-nav { gap: 13px 22px; }
  .story-page .watch-layout, .story-page .reading-layout { grid-template-columns: 1fr; gap: 20px; }
  .story-page .chapter-list { max-height: 280px; }
  .story-page .story-section { padding: 38px 0; }
  .story-page .section-head { display: block; }
  .story-page .section-note { margin-top: 12px; }
  .story-page .takeaways { grid-template-columns: 1fr; gap: 24px; }
  .story-page .takeaway { padding-left: 20px; }
  .story-page .takeaway .number { float: left; margin: 1px 16px 5px 0; font-size: 24px; }
  .story-page .timeline { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .story-page .reading-aside { display: flex; gap: 20px; align-items: start; }
  .story-page .reading-aside > div { flex: 1; }
  .story-page .expand-all { flex-shrink: 0; }
  .story-page .answer { padding-left: 0; padding-right: 0; }
  .story-page .questions summary { grid-template-columns: 24px 1fr 20px; gap: 8px; }
  .story-page .questions summary strong { font-size: 19px; }
  .story-page .related-grid { gap: 18px; }
}
@media (max-width: 460px) {
  .story-page .primary-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .story-page .primary-nav .btn { padding: 6px; text-align: left; font-size: 12px; }
  .story-page .hero-copy { padding: 28px 22px; }
  .story-page h1 { font-size: 37px; }
  .story-page .hero-art { height: 215px; }
  .story-page .hero-actions { gap: 13px; }
  .story-page .related-grid { grid-template-columns: 1fr; }
  .story-page .timeline .era-date { font-size: 20px; }
  .story-page .timeline { grid-template-columns: 1fr; gap: 0; }
  .story-page .timeline li { border-top: 0; border-left: 3px solid #96ac88; padding: 0 0 28px 22px; margin-left: 5px; }
  .story-page .timeline li::before { top: 6px; left: -8px; }
  .story-page .timeline li:last-child { padding-bottom: 0; }
  .story-page .reading-aside { display: block; }
  .story-page .source-details { padding: 18px; }
}
@media (prefers-reduced-motion: no-preference) { .story-page .related-card, .story-page .btn { transition: background .18s ease; } }
@media print {
  .story-page { background: #fff; color: #000; }
  .story-page .site-header, .story-page .page-nav, .story-page #watch, .story-page .hero-actions, .story-page .expand-all, .story-page .watch-moment { display: none; }
  .story-page .story-hero { background: #fff; color: #000; }
  .story-page .hero-copy p, .story-page h1 span, .story-page h1 em { color: #000 !important; }
  .story-page .reading-layout { display: block; }
  .story-page .reading-aside { display: none; }
  .story-page .story-section { break-inside: avoid; }
}