/* ============================================================ ReadSpectrum — refinements layer Loads AFTER style.css. Inherits all design tokens from style.css. (:root variables: --ink, --deep, --gold, --gold-bright, --gold-dim, --gold-pale, --border-gold, --text-muted, --card, --card-hover, --text-primary, --text-secondary, --border, --border-light) ============================================================ */ /* ===== ARTICLE PAGE HEADER =================================== */ .rs-article-header { background: var(--deep); border-bottom: 1px solid var(--border-gold); position: sticky; top: 0; z-index: 200; } .rs-article-header .header-top { justify-content: center; padding: 18px 0 16px; border-bottom: none; } .rs-article-header .masthead { flex: 0 1 auto; } .rs-article-header .masthead a { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; transition: opacity 0.25s ease; } .rs-article-header .masthead a:hover { opacity: 0.85; } .rs-article-header .rs-masthead-divider { margin-left: auto; margin-right: auto; } /* ===== OPEN GRAPH IMAGE FALLBACK ============================= */ /* Ensures hero images work as OG images */ .article-hero { min-height: 520px; } /* ===== SKIP TO CONTENT (Accessibility) ======================= */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--gold); color: var(--ink); padding: 8px 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ===== STRUCTURED DATA / SEO helpers ========================= */ /* Canonical link tag is in — no CSS needed */ /* ===== SITEMAP LINK in footer ================================ */ .footer-sitemap-link { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .footer-sitemap-link:hover { color: var(--gold); } /* ===== FAVICON SVG fallback ================================== */ /* SVG favicon is declared in — no CSS needed */ /* ===== ARTICLE READING PROGRESS ============================== */ /* Already handled in style.css — no override needed */ /* ===== PRINT STYLES ========================================== */ @media print { .topbar, .share-sticky, .share-section, .scroll-progress, .ticker-bar, .back-home-btn, footer { display: none !important; } .article-hero-bg { opacity: 0.15 !important; } body { background: #fff !important; color: #000 !important; } .article-wrapper { max-width: 100% !important; } p, li { font-size: 11pt !important; line-height: 1.6 !important; } h1, h2, h3 { color: #000 !important; -webkit-text-fill-color: #000 !important; } } /* ===== RESPONSIVE TWEAKS ===================================== */ @media (max-width: 768px) { .rs-article-header .header-top { padding: 14px 0 12px; } .rs-article-header .rs-masthead-title { font-size: 24px !important; letter-spacing: 1.5px !important; } .rs-article-header .rs-masthead-sub { font-size: 9px !important; letter-spacing: 3px !important; } .rs-article-header .rs-masthead-divider { width: 140px !important; } } /* ===== DARK MODE MEDIA QUERY ================================= */ /* Site is already dark — this prevents OS light-mode override */ @media (prefers-color-scheme: light) { :root { color-scheme: dark; } }