/* ============================================================ about.css — page-scoped refinements for The Surgeon page ------------------------------------------------------------ Loaded ONLY on about.html and ru/about.html. ADDITIVE & SCOPED: every rule is namespaced to `.page-about` (on ) or to the page's own .about-* blocks, so nothing in the global system changes for any other page. Uses only existing design tokens declared in style.css :root. No global file is modified. ============================================================ */ /* ------------------------------------------------------------ 1 · Vertical rhythm — bring the airy section spacing in one measured step (the page read too slow/empty on scroll). Global defaults: .section = 6rem (--s-7), .section--tight = 4rem (--s-6). It should still breathe, just not idle. ------------------------------------------------------------ */ .page-about .section { padding-block: var(--s-6); } /* 6rem -> 4rem */ .page-about .section--tight { padding-block: var(--s-5); } /* 4rem -> 3rem */ /* The biography sits directly under the page hero — close that seam. */ .page-about .about-intro { padding-top: var(--s-4); } /* -> 2rem below hero */ /* ------------------------------------------------------------ 2 · The Doctor3 lede — portrait + pull-line spacing. Replaces the inline margin the figure used to carry. ------------------------------------------------------------ */ .page-about .about-portrait { margin-block: var(--s-4); } /* 3rem -> 2rem around portrait */ .page-about .about-standfirst { margin-block: var(--s-2) 0; } /* gentle lift above the pull-line */ /* ------------------------------------------------------------ 3 · Biography — two-column editorial layout left: story prose (kept at a readable 64ch, left-aligned) right: a quiet authority ledger that fills the formerly empty right margin and tracks the scroll on desktop. ------------------------------------------------------------ */ .page-about .about-bio { margin-top: var(--s-5); display: grid; gap: var(--s-5); } .page-about .about-bio__prose { max-width: 64ch; } /* Clear, even breathing room between story beats. */ .page-about .about-bio__prose > .flow + .flow { margin-top: var(--s-5); } /* Right-hand authority rail — a restrained ledger, NOT a resume card: hairline rules, small muted type, generous line padding, no fills. */ .page-about .about-bio__rail .kicker { margin-bottom: var(--s-3); } .page-about .about-rail__list { border-top: 1px solid var(--border); } .page-about .about-rail__list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); } /* Desktop: prose and rail side by side; rail follows the read. */ @media (min-width: 980px) { .page-about .about-bio { grid-template-columns: minmax(0, 64ch) 248px; justify-content: space-between; align-items: start; column-gap: var(--s-6); } .page-about .about-bio__rail { position: sticky; top: var(--s-7); /* clears the floating nav */ align-self: start; } } /* Reduced motion: nothing here animates, but keep the rail static and harmless if a transformed ancestor is ever introduced. */ @media (prefers-reduced-motion: reduce) { .page-about .about-bio__rail { position: static; } }