; the epigraph IS the first
, so cancel it there — the intended drop cap lives on .eb-open */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-epigraph::first-letter { float: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0; color: inherit; } /* base theme decorates h2 with a ✦ ::before — cancel it (our roman numeral lives in the .eb-h2-num span) */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-h2::before { content: none; } /* left rail (TOC / share / read-next) legibility on the dark surface — the platform styles it for light chrome, so recolor for this theme */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-mobile-toc { color: var(--eb-soft); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc { color: var(--eb-faint); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc-link { color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc-link:hover, .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc-link[aria-current="true"] { color: var(--eb-accent); } /* Chapter numerals (.eb-h2-num) surface in the rail as a TOC kicker; render it inline before the title — "I The Darkest Water" — matching the in-body heading, instead of the base stacked-block kicker that reads as a collision. */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc-kicker { display: inline; margin: 0 8px 0 0; color: var(--eb-accent); font-family: var(--eb-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc-title { display: inline; } /* Neutralize the base theme's drop cap everywhere in this body, then the intended one on .eb-open wins on specificity — otherwise the base rule drop-caps the first
of every container (epigraph, myth panel, …). */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body p::first-letter { float: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0; color: inherit; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body p.eb-open::first-letter { float: left; font-family: var(--eb-display-f); font-weight: 500; font-size: 3.7em; line-height: 0.7; padding: 8px 14px 0 0; color: var(--eb-accent); } /* inline citation markers + numbered references list (Episode 3 onward) */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-cite { font-family: var(--eb-mono); font-size: 12px; line-height: 0; vertical-align: super; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-cite a { color: var(--eb-accent); padding: 0 1px; text-decoration: none; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-cite a:hover { text-decoration: underline; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-cite + .eb-cite { margin-left: 2px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs { margin-top: clamp(38px, 5vw, 58px); border-top: 1px solid var(--eb-hair); padding-top: clamp(24px, 3vw, 32px); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs-label { font-family: var(--eb-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eb-accent); margin-bottom: 20px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs-list { display: flex; flex-direction: column; gap: 14px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref { display: flex; gap: 14px; scroll-margin-top: 92px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref-num { flex: none; font-family: var(--eb-mono); font-size: 12px; color: var(--eb-accent); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref-text { font-size: 14px; line-height: 1.6; color: #8b93a2; margin: 0; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref-text a { color: #a9b4c4; border-bottom: 1px solid rgba(126, 155, 192, 0.4); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref-text a:hover { color: var(--eb-accent); text-decoration: none; } /* target-flash when a citation jumps to its reference */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref:target .eb-ref-num { color: var(--eb-gold); } /* section ticks + movement dividers + myth-aside (Episode 1 onward) */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-tick { height: 2px; width: 32px; background: var(--eb-accent); margin: clamp(34px, 4.6vw, 52px) 0 18px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-tick--gold { background: var(--eb-gold); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-epigraph + .eb-tick { margin-top: clamp(30px, 4vw, 44px); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-tick + .eb-h2 { margin-top: 0; } /* After a labeled movement divider the divider IS the section marker, so the tick that follows is a redundant second separator that stranded ~139px of dead space before the heading. Drop it and give the heading a calm gap. */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider + .eb-tick { display: none; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider + .eb-tick + .eb-h2 { margin-top: clamp(20px, 2.4vw, 30px); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider { display: flex; align-items: center; gap: 22px; justify-content: center; text-align: center; padding: clamp(34px, 5vw, 58px) 0 clamp(2px, 1vw, 8px); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-line { height: 1px; flex: 1; max-width: 200px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-line--l { background: linear-gradient(90deg, transparent, rgba(126, 155, 192, 0.35)); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-line--r { background: linear-gradient(90deg, rgba(126, 155, 192, 0.35), transparent); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-label { flex: none; font-family: var(--eb-mono); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--eb-accent); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider--gold .eb-divider-line--l { background: linear-gradient(90deg, transparent, rgba(198, 161, 90, 0.4)); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider--gold .eb-divider-line--r { background: linear-gradient(90deg, rgba(198, 161, 90, 0.4), transparent); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider--gold .eb-divider-label { color: var(--eb-gold); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-pull + .eb-divider { padding-top: clamp(20px, 2.6vw, 32px); } @media (max-width: 480px) { .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider { gap: 12px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-label { letter-spacing: 0.16em; font-size: 12px; } } /* a bordered callout nested INSIDE the myth panel */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-myth-aside { margin: 1.2em 0; padding-left: 20px; border-left: 1px solid rgba(198, 161, 90, 0.4); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-myth-aside p { color: #d8c9a6; margin: 0 0 0.4em; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-myth-aside p:last-child { margin-bottom: 0; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-myth-big { font-size: 1.1em; } /* sub-note under the next-episode card */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next-note { font-family: var(--eb-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-dim); margin: 14px 0 0; text-align: center; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next-note a { color: var(--eb-mute); border-bottom: 1px solid rgba(126, 155, 192, 0.3); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next-note a:hover { color: var(--eb-accent); text-decoration: none; } /* Episode 5 additions: Soviet-red next card (Season 02 transition), a sources note, inline quote emphasis, and an emphasized aside line */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next--soviet a { box-shadow: inset 3px 0 0 var(--eb-soviet); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next--soviet a:hover { box-shadow: inset 3px 0 0 var(--eb-soviet), 0 16px 34px rgba(0, 0, 0, 0.45); border-color: rgba(194, 81, 63, 0.6); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next--soviet .eb-next-label, .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-next--soviet .eb-next-cta { color: var(--eb-soviet); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs-note { font-style: italic; font-size: 13.5px; line-height: 1.6; color: var(--eb-faint); margin: 0 0 20px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-q { color: #c8cede; font-style: italic; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-aside p.eb-aside-em { color: var(--eb-bright); font-weight: 500; } /* ─────────────────────────────────────────────────────────────────── THEME COMPLETION (2026-07-07): the dark treatment above covers the hero, body and TOC rail — but the platform chrome that renders below and around the article body kept its light-theme ink and card fills. On the dark surface that read as either invisible text (series badge, rail headings, related-card titles, comments submit button) or jarring white cards (prev/next, "you may need this next", author, subscribe). Finish the theme so the whole page is one dark editorial surface. Scoped to magazine-eagle-bear, so no other theme is touched; this fixes every episode in the series at once. */ /* series badge pill — text was near-black on dark */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-line { color: var(--eb-soft); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-line b { color: var(--eb-ink-2); } /* left-rail + read-next section headings */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] :is(.ps-rail-h, .ps-readnext-h) { color: var(--eb-mute); } /* Read-next card + byline share icons now render on episodes too — map their light-palette inks onto the dark plate. */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext { border-top-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-cover { border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-kicker { color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-title { color: var(--eb-text); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-lead:hover .ps-readnext-title { color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-meta, .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-list-meta { color: var(--eb-faint); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-list { border-top-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-list-title { color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-readnext-list a:hover .ps-readnext-list-title { color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-share-row button { color: var(--eb-mute); border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-share-row button:hover { color: var(--eb-text); border-color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-comments-share { border-bottom-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-comments-share-label { color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-rail-toc-count { color: var(--eb-faint); } /* "Part of …" collection line above the prev/next cards */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-back { color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] :is(.ps-collection-back b, .ps-collection-back a) { color: var(--eb-ink-2); } /* prev / next episode step cards — were white cards */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-step { background: var(--eb-panel); border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-step:hover { background: var(--eb-panel-2); border-color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-step-dir { color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-step-title { color: var(--eb-ink-2); } /* "You may need this next" panel — was a cream card */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-seenext { background: var(--eb-panel); border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-seenext-h { color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-seenext-soon { color: var(--eb-text); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-seenext a { color: var(--eb-accent); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-collection-soon-pill { background: rgba(224, 229, 238, 0.08); border-color: var(--eb-hair); color: var(--eb-mute); } /* related-articles grid — titles/meta were invisible dark-on-dark */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-related-h { color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-related-rule { background: var(--eb-hair); border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-related-title { color: var(--eb-ink-2); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-related-meta { color: var(--eb-faint); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-related-card:hover .ps-article-related-title { color: var(--eb-accent); } /* author card — was a white card */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card { background: var(--eb-panel); border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card-stamp { color: var(--eb-mute); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card-name { color: var(--eb-ink); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card-bio { color: var(--eb-soft); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card-btn { background: transparent; border: 1px solid rgba(224, 229, 238, 0.24); color: var(--eb-ink-2); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card-btn:hover { background: transparent; border-color: var(--eb-accent); color: var(--eb-accent); } /* subscribe "The Letter" card — was a white card */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-subscribe { background: var(--eb-panel); border-color: var(--eb-hair); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-subscribe-title { color: var(--eb-ink); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-subscribe-body { color: var(--eb-soft); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-subscribe-btn { background: var(--eb-accent); border-color: transparent; color: #0b0d12; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-subscribe-btn:hover { background: #93aecc; } /* comments — the submit button used bg:var(--foreground)+text:#fff, which is white-on-white here (root --foreground is #fafafa); recolor to accent and give the textarea a hairline that reads on the dark surface */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] form button[type="submit"], .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] form button:not([type]) { background: var(--eb-accent) !important; color: #0b0d12 !important; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] form textarea { border-color: var(--eb-hair) !important; } /* pull-quotes: the base editorial blockquote (see ~.ps-article-body blockquote above) paints a white card + a quote-bubble ::before + a 72px paragraph indent. The .eb-pull rule only added a border/pad, so pull-quotes authored as
rendered as a white card with near-white text. Neutralize the card for any body blockquote and keep the accent bar on .eb-pull (div-based .eb-pull is unaffected). */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body blockquote { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body blockquote::before { content: none; display: none; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body blockquote p { padding-left: 0; color: var(--eb-ink-2); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body blockquote.eb-pull { border-left: 2px solid var(--eb-accent); padding-left: clamp(18px, 2vw, 26px); } /* The calm ::first-letter reset above uses !important, so it also kills the one intended drop cap on the Eagle & Bear cold-open. Re-assert it for p.eb-open only (each episode has exactly one) so no stacking can return. */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body p.eb-open::first-letter { float: left !important; font-family: var(--eb-display-f) !important; font-weight: 500 !important; font-size: 3.7em !important; line-height: 0.7 !important; padding: 8px 14px 0 0 !important; color: var(--eb-accent) !important; } /* ═══════════════════════════════════════════════════════════════════ EAGLE & BEAR — reading-experience layer (2026-07-07) ADDS to (does NOT duplicate) the verified "THEME COMPLETION" block above, which already darkens the subscribe/author/prev-next/seenext/ related chrome. This layer contributes only what that block doesn't: the sticky series navigator + episode menu, a consolidated "Continue the series" module, an "article ends here" mark, hero regrouping, a proper author avatar, a cinematic cover, book-like body rhythm, stronger chapter/quote/myth treatment, compact reference cards, the metered-wall dark skin, and the comment "Author" badge. All scoped to magazine-eagle-bear / .eb-* so no other article is touched, and it applies to every episode at once. .eb-* colours read the theme's --eb-* custom properties (in scope) with hard-coded fallbacks. ═══════════════════════════════════════════════════════════════════ */ /* ── Sticky series navigator ─────────────────────────────────────── */ .public-shell .eb-seriesnav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(11, 13, 18, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--eb-hair, rgba(224, 229, 238, 0.1)); transform: translateY(-102%); transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--eb-serif, "Spectral", Georgia, serif); } .public-shell .eb-seriesnav--shown { transform: translateY(0); } .public-shell .eb-seriesnav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; } .public-shell .eb-seriesnav-step { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 260px; color: var(--eb-mute, #7c8493); text-decoration: none; transition: color 0.15s ease; } .public-shell .eb-seriesnav-step--prev { justify-self: start; } .public-shell .eb-seriesnav-step--next { justify-self: end; } .public-shell .eb-seriesnav-step--empty { pointer-events: none; } .public-shell .eb-seriesnav-step:hover { color: var(--eb-accent, #7e9cc0); } .public-shell .eb-seriesnav-chev { width: 18px; height: 18px; flex: none; } .public-shell .eb-seriesnav-step-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.14; gap: 1px; } .public-shell .eb-seriesnav-step--next .eb-seriesnav-step-t { align-items: flex-end; text-align: right; } .public-shell .eb-seriesnav-step-t em { font-family: var(--eb-mono, ui-monospace, monospace); font-style: normal; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--eb-faint, #6c7382); } .public-shell .eb-seriesnav-step-t b { font-weight: 500; font-size: 13.5px; color: var(--eb-soft, #9199a7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .public-shell .eb-seriesnav-step:hover .eb-seriesnav-step-t b { color: var(--eb-bright, #e6e9f0); } .public-shell .eb-seriesnav-center { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: inherit; cursor: pointer; max-width: 46vw; transition: background 0.15s ease; } .public-shell .eb-seriesnav-center:hover { background: rgba(224, 229, 238, 0.05); } .public-shell .eb-seriesnav-eyebrow { font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eb-accent, #7e9cc0); white-space: nowrap; } .public-shell .eb-seriesnav-here { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font-family: var(--eb-display-f, "Bodoni Moda", Georgia, serif); font-size: 15px; font-weight: 500; color: var(--eb-ink-2, #eef2f8); } .public-shell .eb-seriesnav-here-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .public-shell .eb-seriesnav-caret { width: 14px; height: 14px; flex: none; color: var(--eb-mute, #7c8493); } .public-shell .eb-seriesnav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(224, 229, 238, 0.08); } .public-shell .eb-seriesnav-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--eb-accent, #7e9cc0), var(--eb-gold, #c6a15a)); transition: width 0.1s ease-out; } /* ── Episode menu ────────────────────────────────────────────────── */ .public-shell .eb-seriesmenu-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4, 5, 8, 0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: eb-fade 0.2s ease; } .public-shell .eb-seriesmenu { position: fixed; z-index: 71; top: 14px; left: 50%; transform: translateX(-50%); width: min(560px, 94vw); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; overflow: hidden; background: #101319; border: 1px solid rgba(224, 229, 238, 0.12); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); font-family: var(--eb-serif, "Spectral", Georgia, serif); animation: eb-menu-in 0.24s cubic-bezier(0.2, 0, 0, 1); } .public-shell .eb-seriesmenu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(224, 229, 238, 0.09); } .public-shell .eb-seriesmenu-kicker { font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eb-accent, #7e9cc0); } .public-shell .eb-seriesmenu-title { margin: 6px 0 0; font-family: var(--eb-display-f, "Bodoni Moda", Georgia, serif); font-size: 19px; font-weight: 500; color: var(--eb-ink-2, #eef2f8); } .public-shell .eb-seriesmenu-close { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(224, 229, 238, 0.1); background: none; color: var(--eb-mute, #7c8493); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .public-shell .eb-seriesmenu-close:hover { color: var(--eb-ink-2, #eef2f8); border-color: var(--eb-accent, #7e9cc0); } .public-shell .eb-seriesmenu-body { overflow-y: auto; padding: 6px 10px 10px; } .public-shell .eb-seriesmenu-season { padding: 12px 12px 4px; } .public-shell .eb-seriesmenu-season-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(224, 229, 238, 0.08); } .public-shell .eb-seriesmenu-season-no { font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-gold, #c6a15a); } .public-shell .eb-seriesmenu-season-name { font-family: var(--eb-display-f, "Bodoni Moda", Georgia, serif); font-size: 15px; color: var(--eb-bright, #e6e9f0); } .public-shell .eb-seriesmenu-season-era { margin-left: auto; font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-dim, #565d6b); } .public-shell .eb-seriesmenu-eps { list-style: none; margin: 0 0 6px; padding: 0; } .public-shell .eb-seriesmenu-ep a, .public-shell .eb-seriesmenu-ep--current, .public-shell .eb-seriesmenu-ep--soon { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; text-decoration: none; } .public-shell .eb-seriesmenu-ep a { color: var(--eb-soft, #9199a7); transition: background 0.14s, color 0.14s; } .public-shell .eb-seriesmenu-ep a:hover { background: rgba(126, 155, 192, 0.09); color: var(--eb-ink-2, #eef2f8); } .public-shell .eb-seriesmenu-ep-no { flex: none; width: 22px; text-align: right; font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; color: var(--eb-accent, #7e9cc0); } .public-shell .eb-seriesmenu-ep-t { flex: 1; font-size: 14.5px; line-height: 1.3; } .public-shell .eb-seriesmenu-ep-check { width: 15px; height: 15px; flex: none; color: var(--eb-gold, #c6a15a); opacity: 0.7; } .public-shell .eb-seriesmenu-ep--current { background: rgba(198, 161, 90, 0.1); border: 1px solid rgba(198, 161, 90, 0.28); color: var(--eb-ink, #f0f3f8); } .public-shell .eb-seriesmenu-ep--current .eb-seriesmenu-ep-no { color: var(--eb-gold, #c6a15a); } .public-shell .eb-seriesmenu-ep--current .eb-seriesmenu-ep-t { font-weight: 600; } .public-shell .eb-seriesmenu-ep--soon { color: var(--eb-dim, #565d6b); } .public-shell .eb-seriesmenu-ep--soon .eb-seriesmenu-ep-no { color: var(--eb-faint, #6c7382); } .public-shell .eb-seriesmenu-ep-tag { flex: none; font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } .public-shell .eb-seriesmenu-ep--current .eb-seriesmenu-ep-tag { background: var(--eb-gold, #c6a15a); color: #0b0d12; font-weight: 700; } .public-shell .eb-seriesmenu-ep--soon .eb-seriesmenu-ep-tag { border: 1px solid rgba(224, 229, 238, 0.1); color: var(--eb-faint, #6c7382); } .public-shell .eb-seriesmenu-hub { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-top: 1px solid rgba(224, 229, 238, 0.1); font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-accent, #7e9cc0); text-decoration: none; transition: background 0.15s; } .public-shell .eb-seriesmenu-hub:hover { background: rgba(126, 155, 192, 0.09); } @keyframes eb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes eb-menu-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── Hero regrouping (layout only; colours handled above) ────────── */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-hero { gap: 64px; padding-bottom: clamp(40px, 5vw, 64px); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-title { margin-top: 22px; line-height: 1.05; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-deck { margin-top: 24px; font-size: 22px; line-height: 1.5; max-width: 40ch; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-meta-strip { margin-top: 26px; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-byline { margin-top: 38px; padding-top: 24px; } /* ── Author avatar — a real disc, not an orphan green "S" (net-new) ─ */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-avatar, .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-author-card-avatar { background: linear-gradient(150deg, #1c2130, #12151d) !important; border: 1px solid rgba(126, 155, 192, 0.45) !important; color: var(--eb-accent) !important; font-style: normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.4); } /* ── Premium framed cover — soft glow behind the artwork ─────────── */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-hero-art { position: relative; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-hero-art::before { content: ""; position: absolute; inset: -8%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(126, 155, 192, 0.16), transparent 78%); filter: blur(30px); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-hero-art > * { position: relative; z-index: 1; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-cover-img { border-radius: 6px; border: 1px solid rgba(224, 229, 238, 0.14); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } /* ── Book-like body — narrower measure, calmer leading, air ──────── */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body { max-width: 700px; line-height: 1.82; letter-spacing: 0.003em; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body p { margin: 0 0 1.5em; } /* ── Chapter rhythm — stronger dividers, ticks, H2s ──────────────── */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-tick { width: 40px; height: 2px; margin: clamp(40px, 5vw, 60px) 0 20px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: clamp(28px, 3.6vw, 42px) 0 clamp(18px, 2.4vw, 26px); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-h2-num { font-size: 0.5em; letter-spacing: 0.14em; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider { gap: 26px; padding: clamp(44px, 6vw, 74px) 0 clamp(10px, 1.5vw, 16px); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-line { max-width: 220px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-divider-label { font-size: 13px; letter-spacing: 0.4em; font-weight: 500; } /* ── Pull-quotes — an emotional anchor. Matched specificity with the THEME-COMPLETION blockquote.eb-pull rule above (via :is(..., blockquote.eb-pull)) and placed later, so this treatment wins cleanly for BOTH div-based and blockquote-based pulls instead of half-applying. */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body :is(.eb-pull, blockquote.eb-pull) { margin: clamp(36px, 5vw, 56px) 0; padding: clamp(22px, 3vw, 30px) clamp(24px, 3vw, 32px); border-left: 3px solid var(--eb-accent); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, rgba(126, 155, 192, 0.07), transparent 82%); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body :is(.eb-pull, blockquote.eb-pull) p { font-size: clamp(23px, 2.9vw, 33px); line-height: 1.32; color: var(--eb-ink); padding-left: 0; } /* ── Myth mode — a clearly different reading surface ─────────────── */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-myth { margin: clamp(30px, 4vw, 46px) 0; padding: clamp(26px, 3.4vw, 40px); border-radius: 4px; background: linear-gradient(180deg, rgba(198, 161, 90, 0.05), rgba(18, 21, 29, 0.92)), var(--eb-panel-2); border: 1px solid rgba(198, 161, 90, 0.2); box-shadow: inset 3px 0 0 var(--eb-gold), 0 20px 50px rgba(0, 0, 0, 0.36); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-myth-label { font-size: 12px; letter-spacing: 0.22em; } /* ── References — compact cards instead of a tall plain list ─────── */ .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref { gap: 10px; padding: 10px 12px; align-items: baseline; border: 1px solid var(--eb-hair-soft); border-radius: 8px; background: rgba(20, 23, 31, 0.5); } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref-num { font-size: 12px; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-ref-text { font-size: 12.5px; line-height: 1.5; } .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs-label { margin-bottom: 16px; } @media (max-width: 640px) { .public-shell .article-themed[data-theme="magazine-eagle-bear"] .ps-article-body .eb-refs-list { grid-template-columns: 1fr; } } /* ── "The article ends here" mark ────────────────────────────────── */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .eb-endmark { display: flex; align-items: center; justify-content: center; gap: 22px; margin: clamp(46px, 6vw, 74px) auto clamp(30px, 4vw, 46px); max-width: 700px; color: var(--eb-accent); font-size: 17px; letter-spacing: 0.5em; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .eb-endmark::before, .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .eb-endmark::after { content: ""; height: 1px; width: 56px; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .eb-endmark::before { background: linear-gradient(90deg, transparent, rgba(126, 155, 192, 0.4)); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .eb-endmark::after { background: linear-gradient(90deg, rgba(126, 155, 192, 0.4), transparent); } /* ── Consolidated "Continue the series" module ──────────────────── */ .public-shell .eb-continue { max-width: 720px; margin: clamp(30px, 4vw, 44px) auto 0; font-family: var(--eb-serif, "Spectral", Georgia, serif); } .public-shell .eb-continue-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; } .public-shell .eb-continue-kicker { font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eb-accent, #7e9cc0); } .public-shell .eb-continue-title { margin: 0; font-family: var(--eb-display-f, "Bodoni Moda", Georgia, serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; color: var(--eb-ink-2, #eef2f8); } .public-shell .eb-continue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .public-shell .eb-continue-grid--one { grid-template-columns: 1fr; } .public-shell .eb-continue-card { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.4vw, 24px); background: var(--eb-panel, #14171f); border: 1px solid var(--eb-hair, rgba(224, 229, 238, 0.1)); border-radius: 12px; box-shadow: inset 3px 0 0 rgba(126, 155, 192, 0.5); text-decoration: none; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .public-shell .eb-continue-card--next { box-shadow: inset 3px 0 0 var(--eb-accent, #7e9cc0); } .public-shell .eb-continue-card:hover { transform: translateY(-3px); border-color: var(--eb-accent, #7e9cc0); box-shadow: inset 3px 0 0 var(--eb-accent, #7e9cc0), 0 16px 34px rgba(0, 0, 0, 0.45); } .public-shell .eb-continue-card-dir { display: inline-flex; align-items: center; gap: 6px; font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-mute, #7c8493); } .public-shell .eb-continue-card--next .eb-continue-card-dir { color: var(--eb-accent, #7e9cc0); } .public-shell .eb-continue-card-ep { font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-faint, #6c7382); } .public-shell .eb-continue-card-title { font-family: var(--eb-display-f, "Bodoni Moda", Georgia, serif); font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; line-height: 1.14; color: var(--eb-ink-2, #eef2f8); } .public-shell .eb-continue-card-blurb { font-size: 14px; line-height: 1.55; color: var(--eb-soft, #9199a7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .public-shell .eb-continue-all { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--eb-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-accent, #7e9cc0); text-decoration: none; transition: color 0.15s; } .public-shell .eb-continue-all:hover { color: var(--eb-bright, #e6e9f0); } @media (max-width: 640px) { .public-shell .eb-continue-grid { grid-template-columns: 1fr; } } /* ── Metered wall, darkened for the series (net-new) ─────────────── */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-card { background: var(--eb-panel); border-color: var(--eb-hair); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-ico { background: var(--eb-accent); color: #0b0d12; } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-card h2 { color: var(--eb-ink-2); font-family: var(--eb-display-f); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-card p { color: var(--eb-soft); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-btn { background: var(--eb-accent); color: #0b0d12; box-shadow: 0 8px 22px rgba(126, 155, 192, 0.25); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-btn:hover { background: var(--eb-bright); } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .metered-wall-fine { color: var(--eb-mute); } /* ── Comment "Author" badge — hard-coded bg-blue-50 chip whose dark: variant never fires here, so it reads light-blue on the dark card (the THEME-COMPLETION pass handled the submit button + textarea, not this chip). Re-pin to the series accent. */ .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-comments [class*="bg-blue-50"] { background: rgba(126, 155, 192, 0.16) !important; color: var(--eb-accent) !important; } /* ── Mobile — compact nav anchors for the scroll tunnel ─────────── */ @media (max-width: 720px) { .public-shell .eb-seriesnav-inner { height: 52px; padding: 0 14px; gap: 8px; } .public-shell .eb-seriesnav-step-t { display: none; } .public-shell .eb-seriesnav-step { max-width: none; } .public-shell .eb-seriesnav-center { max-width: 64vw; } .public-shell .eb-seriesnav-here { font-size: 14px; } .public-shell .eb-seriesnav-eyebrow { font-size: 12px; } } .public-shell .ps-article-page[data-article-theme="magazine-eagle-bear"] .ps-article-hero[data-has-cover="true"] .ps-article-cover-frame { border-color: rgba(224, 229, 238, 0.14); border-radius: 6px; background: var(--eb-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }