/* ============================================================================ editorial.css — the full Éist experience at "/" (the scrolling document). Loaded LAST, after colors/pipeline/application, so it overrides the fixed wall-shell body rules and adds the overview's own components. Every colour comes from colors.css (var(--…)); nothing is hardcoded here. ============================================================================ */ /* Undo the fixed wall-app shell (avian.css sets body overflow:hidden / fixed stage) so this page scrolls like a document. */ html { height: auto; } body.ed { height: auto; min-height: 100vh; overflow: visible; background: var(--paper); color: var(--ink); font-family: var(--serif); } .ed-main, .ed-top, .ed-foot { width: min(100%, 1120px); margin: 0 auto; padding-inline: 40px; } /* ---- Masthead — sticky + condensing ---- A full-width sticky wrapper carries the paper ground + rule so the full-bleed collage scrolls cleanly under it; the inner .ed-top holds the 1120 content row and shrinks (padding + wordmark + mark) once the page scrolls. */ .ed-topbar { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--ink); } .ed-topbar.is-scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); } .ed-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; padding-bottom: 18px; transition: padding 220ms ease; } .ed-topbar.is-scrolled .ed-top { padding-top: 11px; padding-bottom: 11px; } /* React renders the brand + nav items as