carries. Distinct from .section, which is for stacked sections inside a page (index) and keeps its own tighter rhythm. Height comes from .page-wrap's min-height, so it isn't repeated here. ============================================================ */ .page { position: relative; z-index: 1; padding: 72px var(--margin) 160px; } /* Centered heading block a standalone page opens with. */ .page-center { width: 100%; max-width: var(--max-w); margin: 0 auto; text-align: center; } .page-title { font-family: var(--font-display); font-size: 46px; font-weight: 300; line-height: 1.2; margin-bottom: 56px; } @media (max-width: 768px) { .page-title { font-size: 34px; margin-bottom: 40px; } } /* Prose on a page, outside a panel — the same size and measure as panel copy without the card frame. --inset lines it up with card content on a page that has cards, and holds a sensible measure on one that doesn't. */ .page-text { font-size: var(--text-lg); line-height: 1.6; margin-inline: var(--inset); color: var(--text-muted); } /* Consecutive paragraphs need their own rhythm out here; the global reset zeroes margins and there is no panel to supply it. */ .page-text + .page-text { margin-top: 1.1em; } /* Prose links in page copy. Matches the legal pages' treatment; without this a link falls back to the browser default, unreadable on black. */ .page-text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; } .page-text a:hover { color: var(--lime); } /* Bulleted list on an un-panelled page. Same prose size as .page-text — keep the two in step if the prose colour ever changes. */ .page-list { margin-inline: var(--inset); margin-top: var(--space-sm); padding-left: var(--space-lg); list-style: disc; } .page-list li { font-size: var(--text-lg); line-height: 1.6; color: var(--text-muted); } .page-list li + li { margin-top: 8px; } /* A list laid out in columns: .grid-2's 44px gap is right between columns but too airy between rows of short items. Capped and centred so short values sit as a block rather than spanning the full measure. */ .page-list.grid-2 { gap: var(--space-sm) var(--space-lg); max-width: 560px; margin-inline: auto; } .page-list.grid-2 li + li { margin-top: 0; } /* EXPERIMENT — caps to lift the four role names. Tracking added because uppercase set solid reads cramped; drop both lines to revert. */ .page-list.grid-2 li { text-transform: uppercase; letter-spacing: 0.1em; } /* Section headings for an un-panelled page. .page-h2 names the section, .page-h3 is the descriptive line under it. Both share --inset with .page-text so headings and copy share a left edge. */ .page-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; line-height: 1.25; margin-inline: var(--inset); margin-bottom: 6px; } .page-h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.3; color: var(--lime); margin-inline: var(--inset); } /* Space between the stacked sections of a content page. */ .page-section + .page-section { margin-top: var(--space-xl); } .page-h2 + .page-text, .page-h3 + .page-text { margin-top: var(--space-sm); } /* A heading that follows body copy needs its own air above. Pages built from .page-section get this from the section gap instead. */ .page-text + .page-h2, .page-list + .page-h2 { margin-top: var(--space-xl); } @media (max-width: 768px) { .page-h2 { font-size: var(--text-2xl); } } /* ============================================================ 4 COMMON CHROME Nav, footer and buttons — injected on every page. ============================================================ */ /* ============================================================ 4.1 Nav ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; background: transparent; backdrop-filter: none } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 90px; padding-inline: var(--margin); } .nav-logo { display: block; } .nav-logo img { height: 40px; display: block; } /* ---- Nav dropdown menu: dim caps on desktop, hamburger on phone ---- */ .nav-menu { position: relative; top: 2px; } .nav-menu > summary { display: block; list-style: none; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu-list { display: flex; gap: 32px; list-style: none; } .nav-menu-item { position: relative; } .nav-menu-top { font: 700 13px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: color 0.15s; } /* Nav item that navigates directly instead of opening a dropdown. The base .nav-menu-top rule is written for