/* --------------------------------------------------------------- Adeia — the Approach page Layout for approach.html only. Every selector is scoped under .page-approach, which sits on the page's , so nothing here can reach another page's markup. Colour, type, spacing and easing come from tokens.css; .display, .h2, .h3, .lead, .body, .label, .mono, .quiet, .plus-link and .visually-hidden come from base.css and are not restated. The masthead and the footer are the exceptions. Their rules live in styles/hero.css and styles/closing.css, which this page does not load, so the parts of them this page needs are restated here under the page scope rather than pulled in wholesale. Contrast, measured against the ground each element sits on: hero --orchid on --ink 6.40:1 display heading --mist on --ink 11.90:1 lead copy --on-ink-quiet on --ink 5.77:1 10px eyebrow money --on-bone on --bone 11.79:1 headings and copy --on-bone-quiet 6.04:1 secondary copy refusal --on-paper on --paper 15.35:1 headings and copy --on-paper-quiet 6.69:1 secondary copy loudness --mist on --ink 11.90:1 headings --on-ink-quiet 5.77:1 note copy footer --orchid on --forest 5.61:1 links on hover --on-forest 11.96:1 the disclosure note Every one clears WCAG AA at the size it is used. This page has no colour-coded states, so nothing here depends on hue to be understood. The two accent rules — on the callout and on the footer disclosure — mark emphasis that the surrounding type already carries. --------------------------------------------------------------- */ /* ===================================================================== Masthead — restated, scoped. See the note at the top of this file. ===================================================================== */ .page-approach .masthead { --rule: var(--rule-on-ink); position: fixed; top: 0; right: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 1.375rem var(--pad-x); color: var(--mist); } /* An ink scrim under the bar. Invisible over the hero; over the pale grounds further down it is what keeps the wordmark above 4.5:1. */ .page-approach .masthead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba(34, 34, 34, 0.92), rgba(34, 34, 34, 0.62) 55%, rgba(34, 34, 34, 0) ); pointer-events: none; } .page-approach .masthead__mark { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-decoration: none; color: var(--mist); } /* A