/* --------------------------------------------------------------- Adeia — the "where this stands" page Layout for contact.html only. Every selector is scoped under .page-contact, 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 state --on-bone on --bone 11.79:1 headings and list items --on-bone-quiet 6.04:1 the closing note involved --on-paper on --paper 15.35:1 headings and copy --on-paper-quiet 6.69:1 secondary copy Every one clears WCAG AA at the size it is used. This page is deliberately short. Its two columns — what is built and what is not — are told apart by their headings and by the rule down the left of the second, never by colour alone. --------------------------------------------------------------- */ /* ===================================================================== Masthead — restated, scoped. See the note at the top of this file. ===================================================================== */ .page-contact .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-contact .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-contact .masthead__mark { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-decoration: none; color: var(--mist); } /* A