/* Shared site shell: header, footer, and active navigation. Page-level CSS remains
   isolated during the parity-first migration and can be consolidated incrementally. */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(8,15,31,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-nav {
  max-width: 1220px; margin: 0 auto; padding: 14px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-brand { text-decoration: none; font-weight: 900; letter-spacing: -.03em; color: #f2f6ff; }
.site-brand span { color: #8bd3ff; }
.site-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.site-links a { text-decoration: none; color: #aeb8d6; font-size: 14px; padding: 8px 10px; border-radius: 999px; }
.site-links a:hover, .site-links a.active { color: white; background: rgba(255,255,255,.09); }
.site-footer { display:block; max-width:1120px; margin:44px auto 0; padding:40px 24px 34px; border-top:1px solid rgba(159,176,214,.16); color:var(--muted,#9FB0D6); text-align:left; }
.footer-inner { display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:48px; align-items:start; }
.footer-inner--utility { grid-template-columns:1fr; }
.footer-main { min-width:0; }
.footer-label { display:block; text-transform:uppercase; letter-spacing:.18em; font-size:13px; font-weight:500; color:#5E6E96; margin-bottom:16px; }
.footer-related a { display:block; color:#EEF2FF; text-decoration:none; padding:5px 0; font-size:16px; font-weight:400; line-height:1.35; }
.footer-related a:hover { color:#5EEAD4; }
.footer-utility { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:18px; }
.footer-utility a { color:#9FB0D6; text-decoration:none; font-size:16px; font-weight:600; }
.footer-utility a:hover { color:#5EEAD4; }
.footer-meta { display:flex; gap:28px; flex-wrap:wrap; font-size:13px; color:#5E6E96; }
.footer-meta a { color:#5E6E96; text-decoration:none; }
.footer-meta a:hover { color:#9FB0D6; }
@media (max-width:980px) {
  .site-nav { align-items:flex-start; flex-direction:column; }
  .site-links { justify-content:flex-start; }
}
@media (max-width:720px) {
  .site-footer { padding:36px 24px 32px; }
  .footer-inner { grid-template-columns:1fr; gap:26px; }
  .footer-utility { gap:18px; }
  .footer-meta { gap:18px; }
}

/* Shared hero visual (scene sketch) — mirrors the absorption page treatment so
   scene images render consistently across articles. Variable fallbacks keep it
   correct on pages that define their palette in their own page CSS. */
.hero-visual-panel {
  border: 1px solid var(--line, rgba(255,255,255,.15));
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(20px);
  border-radius: var(--radius, 28px);
  box-shadow: var(--shadow, 0 24px 80px rgba(0,0,0,.28));
  padding: 14px;
  margin: 28px 0 26px;
}
.hero-visual-panel.hero-top { margin-top: 28px; }
.hero-visual-frame {
  border-radius: 20px; overflow: hidden; background: #080d18;
  min-height: 280px; display: grid; place-items: center;
}
.hero-visual-frame img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(56vh, 700px); object-fit: contain; margin: 0 auto; }
.hero-visual-fallback {
  display: none; padding: 48px 28px; max-width: 760px;
  text-align: center; color: var(--muted, #aeb8d6);
}
.hero-visual-frame.missing-asset .hero-visual-fallback { display: block; }
.hero-visual-panel figcaption { color: var(--muted, #aeb8d6); font-size: 15px; padding: 13px 8px 4px; }