/* --------------------------------------------------------------------------- Neue Grafik: the converted surfaces. Loaded by every surface that has converted, each of which sets `is-neue` on . Every rule here is scoped to that class, so surfaces still running the retired Bound Volume system in base.css are untouched. See DESIGN.md, Rollout status; when the last surface converts, these rules move to base.css and the scoping comes off. One file rather than one per surface, so a visitor going from a search to a record pays for it once. The footer block restyles base.css's markup rather than forking the shared template, so the conversion reverses cleanly. The masthead is left alone. Sections below, in order: tokens and primitives, chrome, the record (item pages), the search. --------------------------------------------------------------------------- */ .is-neue { --ground: #e4e5e7; --field: #ffffff; --ink: #101113; --ink-muted: #55585e; --rule: #101113; --rule-soft: #c4c6ca; /* The platform's own link blue and a navy press, so the record introduces no hue the rest of the site does not already use. */ --link: #0071b5; --link-press: #123b66; --knock: #ffffff; /* The masthead's navy, carried onto the one primary action so the record stays tied to the site's identity. See DESIGN.md, The Action Navy Rule. */ --action: #0b2341; --action-press: #101113; --band-muted: #9aa0ad; --band-chip: #26282d; --band-rule: #3a3d44; --gutter: 1.5rem; --pad: clamp(1rem, 0.4rem + 2.4vw, 3rem); } /* base.css sets body.bg-light with !important. */ body.is-neue, body.is-neue.bg-light { background: var(--ground) !important; color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 16px; line-height: 1.55; } .is-neue h1, .is-neue h2, .is-neue h3 { font-family: Archivo, system-ui, sans-serif; color: var(--ink); } /* Headings inside the black band. Without this the rule above wins over the band's inherited knockout and prints ink on ink. */ .is-neue .record-custody h2 { color: var(--knock); } .is-neue .record-shell { margin: 0 auto; max-width: 1560px; padding: 0 var(--pad); } .is-neue .mono { font-family: "Azeret Mono", ui-monospace, monospace; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; } .is-neue .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .is-neue a:focus-visible, .is-neue button:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; } /* Squared corners are the rule this system leans on hardest, and it is the one a user-agent default breaks on its own: Chrome rounds a bare