/* ========================================================================== Base reset + global element styles ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--colour-bg); color: var(--colour-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* `.pg-nav-desktop`'s fixed `right:` position used to depend on `html` reserving a `scrollbar-gutter: stable` gutter on every page, purely so that its CSS `100vw`-based offset resolved identically whether or not the page had a real document scrollbar (see nav.js). That gutter reservation is what caused the homepage's "scrollbar, then a gap" look: the homepage's never scrolls (all real scrolling happens one level deeper, inside #scroll-root), so `html`'s reserved gutter sat empty while #scroll-root's own real scrollbar drew right next to it — two reserved widths, only one with a visible thumb. nav.js now computes `.pg-nav-desktop`'s `right` from `window.innerWidth` directly (which is always the true layout-viewport width, unlike `100vw` which some engines resolve differently depending on scrollbar reservation), so this gutter reservation is no longer needed to keep the nav consistent between pages — it's kept out of `html` entirely so #scroll-root's own real scrollbar (unhidden below) is the only reserved width the homepage ever draws, matching every other page's single- scrollbar footprint. */ html { overflow-y: auto; } body { font-family: var(--font-body); font-weight: 300; font-size: var(--size-body); line-height: 1.3; } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* No pure black/white text anywhere — charcoal navy is as dark as the palette goes */ a, button { color: var(--colour-ink); letter-spacing: var(--tracking-interactive); font-family: var(--font-ui); text-decoration: none; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } button { padding: 0; font: inherit; } input, textarea, select { font-family: var(--font-body); font-size: var(--size-body); color: var(--colour-ink); } :focus-visible { outline: 2px solid var(--colour-accent); outline-offset: 2px; } /* Page-level scroll container used on the homepage. On every OTHER page, itself is the thing that overflows and draws the one real document scrollbar. The homepage is different: / never overflow there (all real scrolling is nested one level deeper, in this #scroll-root div), so #scroll-root's OWN overflow draws its OWN real, functional scrollbar instead — that's the homepage's equivalent of the "one real scrollbar" every other page has (see nav.js for how `.pg-nav-desktop` stays pinned consistently across both cases without needing `html` to reserve a matching gutter). Left visible/functional (previously hidden via scrollbar-width/-ms-overflow-style/ ::-webkit-scrollbar — removed) so users can see there's more content below the first section, same as on every other page. Scroll-snap has been removed site-wide — this is now a plain free-scrolling container. */ .pg-scroll-root { height: 100dvh; overflow-y: auto; overflow-x: hidden; background: var(--colour-bg); } .pg-section { height: 100dvh; overflow: hidden; position: relative; } /* Mobile content column (350px inside a 390px phone band) */ .pg-content-col { width: 100%; max-width: var(--mobile-content-width); margin: 0 auto; padding: 0 20px; box-sizing: content-box; } @media (min-width: 760px) { .pg-content-col { max-width: var(--content-max-width); padding: 0 40px; } } /* Global content column: mobile 350px width, container-query sizing for the type-scale classes below. Used inside every .pg-sec / flowing section on every page, not just the homepage. */ .pg-col { width: 100%; max-width: var(--mobile-content-width); container-type: inline-size; display: flex; flex-direction: column; flex: 1; min-height: 0; } /* GLOBAL TYPE SCALE primitives (CLAUDE.md) — page title / section headline / body copy, shared by every page's sections. */ .pg-title { font-family: var(--font-display); font-weight: 600; font-size: var(--size-page-title); letter-spacing: 0.04em; color: var(--colour-ink); text-transform: uppercase; } .pg-headline { margin: calc(var(--size-page-title) * 1.15) 0 0 0; font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.048em currentColor; font-size: min(2.4rem, 8.8cqw, 4dvh); line-height: 1.1; letter-spacing: calc(0.029em + 0.2pt); text-transform: uppercase; color: var(--colour-ink); text-wrap: balance; } .pg-body { margin: 10px 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.3; color: #5C646B; } /* Rich-text body fields (Paradigm/Ontologist admin editors, see admin/pages/edit.php) render multiple

tags inside a single wrapper (.pg-body etc. are now

s, not

s, so nested

is valid). Give consecutive paragraphs breathing room; single-paragraph content (the overwhelming majority, and everything saved before this feature existed) has no

pair so this rule never fires for it. */ .pg-body p, .pdg-card-body p, .pdg-cta-body p, .onto-bio p { margin: 0; } .pg-body p + p, .pdg-card-body p + p, .pdg-cta-body p + p, .onto-bio p + p { margin-top: 1em; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }