/* Wolf-Rayet family roles -> this site's face tokens. * * Hand-authored. Companion to family.css, which declares the faces; this file * decides what wears them. Like the colour bridges it is gated on * data-wr-theme, but NOT on data-mode -- a face is not a mode. * * Wolf-Rayet's model is two roles: display for headings, body for text. This * site had one sans doing both plus a mono, so the display role is new here. * * Pages opt in with data-wr-type on : * "display" take both roles -- index.html, resume/, portfolio/ * "body" take the body role only, keep the page's own display face * -- design-engineer/ * * The opt-in is not decoration. A bare `[data-wr-theme] h1` selector reaches * (0,1,2) and would silently outrank design-engineer's own * `h1{font-family:var(--cond-face)}` at (0,0,1), overriding the display face * this bridge is explicitly trying to leave alone. */ /* ---------- body role: every opted-in page ---------- */ html:root[data-wr-theme="interior-dark"][data-wr-type]{ /* index.html, resume/ and design-engineer/ read --body-face; portfolio/ reads Bootstrap's names. */ --body-face: var(--wr-family-body); --bs-body-font-family: var(--wr-family-body); --bs-btn-font-family: var(--wr-family-body); /* --mono-face is deliberately NOT mapped. interior-dark carries no mono role, and the eyebrows, section labels, mode buttons and footer links are a core idiom here -- seven rules in index.html alone read it. IBM Plex Mono keeps all of them. Same discipline as --accent-fill in the colour bridge: what the palette does not carry, it does not get to guess at. */ } /* ---------- display role: pages that have no display face of their own ---- */ html:root[data-wr-theme="interior-dark"][data-wr-type="display"]{ --display-face: var(--wr-family-display); } /* Selectors are per-page because the class names differ; a rule whose selector is absent on a given page costs nothing. Weights stay as each page set them. */ html:root[data-wr-theme="interior-dark"][data-wr-type="display"] :is( h1, h2, h3, h4, h5, h6, /* index.html h1; resume h1/h3; portfolio headings */ .worktitle, .name, .foot .fname, /* index.html + resume */ .display-1, .display-2, .display-3, .display-4 /* portfolio Bootstrap utilities */ ){ font-family: var(--display-face); } /* design-engineer/ takes data-wr-type="body" and is therefore untouched above. * Its --cond-face (IBM Plex Sans Condensed) stays across all seventeen of its * heading rules, including an h1 at clamp(3.6rem,13.5vw,10rem) with * line-height .86 and -.02em tracking. Signika Negative is narrower than Plex * Sans but nowhere near as narrow as Plex Sans Condensed, so substituting it * into type tuned that tightly risks overflow. Wolf-Rayet has no condensed * role; the honest answer is to leave that one alone. */