/* SolaSingles — public/style.css The one public stylesheet (Arc 1, static site v1, layout pass 4, batch 4B). DO-LIST: hold the one public stylesheet. Rules that bind this file: - Every color, spacing step, and type size is declared once as a token below and referred to by name everywhere else. No raw values in HTML. - Direction (locked): white-base, two modes, generous whitespace, hairline borders, no gradients, no shadows. ACCENT IS PROVISIONAL. Batch 4B (Tina's ruling, 2026-08-22, pending the final palette decision) moved the accent off black/white and on to a burgundy sampled from the logo artwork. Reverting to black — or moving to any other candidate — is a change to THIS ONE TOKEN PAIR and nothing else: --accent in :root, and --accent in the dark block. Nothing downstream names a burgundy; every consumer names --accent. Typeface: the page is one sans throughout. The masthead wordmark is the single exception — batch 4B replaced the logo PNG with real text, and matching the artwork's letterforms needs a serif (--font-wordmark). That stack is a stand-in for the PNG's face; naming the real font is a change to that one token. IMAGE WEIGHTS (batch 11). Every image Tina supplies arrives as a PNG of 1.8-2.4 MB. Those originals stay in her Downloads folder untouched; what ships in public/ is a re-encode. The rule this batch worked to: any public/ copy over ~500 KB is re-encoded to a 1200px long edge, and the full-bleed banner — which is allowed more because it covers the viewport rather than a 272px column — is sized for that role and aimed under ~700 KB. All six land well inside it. Section images: 1200px long edge, JPEG q82, 121-158 KB each (from 1.8-2.3 MB, a 92-94% reduction). Banner: no downscale needed, kept at its native 1774x887, JPEG q88, 358 KB from 2.4 MB. Two files changed EXTENSION in the process, and that is why nothing in this file or in the HTML still says .png for them: section-meet and profile_banner were PNGs, and no PNG of a photographic image lands within these budgets at these dimensions. Both are JPEG now and both old files are deleted. The only PNG left in public/ is badge-googleplay.png, which is artwork with real transparency and 4.9 KB. Layout model (pass 4): sections are full-bleed — they span the viewport so their hairline separators run edge to edge — while their content is held to --container and centred by the padding-inline rule below. The container is sized to EXACTLY fit the wide grid: --col-label + --col-gap + --measure = --container 17rem + 3.5rem + 49rem = 69.5rem (1112px) so the text column ends flush with the container's right edge and no dead space is left over. Changing any one of those four tokens means re-checking the sum. Unavoidable literals: media queries cannot read custom properties, so the breakpoints are written out. Batch 8 reduced them from two to ONE — 62rem — and batch 14, CHANGE 8 added a second, 41rem, for the phone masthead alone. The two are not independent: 41rem (656px) is the clean rem step below the 658px one-row/two-row transition batch 8 measured, so both literals mark the same masthead behaviour at its two ends. See the CHANGE 8 note below. Batch 14, CHANGE 9 deliberately did NOT add a third — the solas scale through a min()/calc() pair that is capped at the size they already were, so they need no query of their own. The solas breakpoint used to be its own figure: 40rem in batch 5B, moved to 51rem in batch 6 when halving the gaps replaced the elastic space-between with a fixed gap, and 51rem (816px, less the 16px gutters) was the narrowest viewport that still cleared the row ITSELF. That was the bug batch 8 CHANGE 3 fixed. Clearing the row is not the same as clearing the row BESIDE THE WORDMARK, which is what batch 7 asked of it when the two moved onto one line: measured, the spread row needs 730.65px and the wordmark and its column-gap take another 179.78px, so the pair needs 910.43px of content width, not 784px. Between 816px and roughly 942px the spread form was therefore switched on at a width where it could not fit, and the header's flex-wrap dropped it to a second row — so the bar went two rows, then one at 690px, then BACK to two at 816px, then one again at 960px. Growing the viewport made the bar taller, which is the non-monotonic wrap batch 8 was sent to remove. Moving the figure to 62rem fixes it and retires the literal at the same time. 62rem was already the wide-layout breakpoint, so the masthead now changes form at exactly the width the page changes to its two-column layout, and 62rem (992px, less the 32px gutters that same query switches on) leaves 928px of content — 17.57px more than the pair needs. Below it the compact form stands, and the compact form is narrow enough to ride the wordmark's line from about 660px up. The result is monotonic: the bar goes from stacked to one line once and never back. The sweep is in the 62rem solas block below. Every other value in this file is a named token, except the letter-spacing / underline-offset em figures and the icon and badge geometry carried inside their SVG viewBoxes, which this file has never tokenised. */ @import url("theme.css"); :root { /* color */ /* Sampled originally from the "Sola" letterforms of the logo artwork (modal interior pixel, rgb(133,1,27) = #85011b); the artwork is archived beside the working folder, not shipped. Batch 15e (Tina's ruling, 2026-08-25) — THE ACCENT LEAVES THE ARTWORK'S SAMPLE. "We also want to change the accent color burgundy to less purple and more burgundy/red. Deeper red, less pink." #85011b -> #800d06, and it is a hue rotation held at the same lightness: 348.0° -> 3.4°, which is the purple side of red swung to the other side of it. Relative luminance moves 0.050874 -> 0.048902, a 4% change, which is why every figure below holds. REPLACED AT EVERY SITE. Eight occurrences of the old hex in this file, two of them live declarations — this one and the dark-block pin batch 14 added — and six inside notes recording measurements. All eight moved, and the six comment sites had their FIGURES re-measured with them rather than the hex being swapped under stale numbers. No other colour literal in this file changed; the inventory is identical apart from these eight. MEASURED, before -> after: white on the masthead bar 10.41:1 -> 10.62:1 white on the sign-up button fill 10.41:1 -> 10.62:1 white glyph on a section icon fill 10.41:1 -> 10.62:1 logo grey #96979a on the bar 3.56:1 -> 3.63:1 (3:1 floor) --accent as ink on light --paper 10.41:1 -> 10.62:1 Every one rises. The only figure that falls is --accent as ink on the #0f0f0f dark paper, 1.84:1 -> 1.81:1, and it is not a live figure any more: batch 15 moved the last two places --accent was text on dark paper onto --link, so every remaining consumer of this token is a FILL. It is recorded here so the next batch does not rediscover it as news. */ /* --accent comes from theme.css, the one token source. */ /* the callout wash is the page field, not a hue. The burgundy wash is gone. */ --callout-wash: var(--field); /* Batch 14, CHANGE 11 (Tina's ruling, 2026-08-25) — INLINE LINK TEXT GETS ITS OWN TOKEN, because the accent is a fill colour and a link is not a fill. CHANGE 4 pinned the dark accent to this burgundy and reported what it cost: --accent as TEXT on the #0f0f0f dark paper measures 1.84:1, so dark-mode links were all but invisible. This is the first of the three levers that note named — give dark-mode link text its own token and leave --accent to the fills it now serves well. In LIGHT mode nothing moves: --link is the accent, 10.41:1 on --paper, exactly as it has always been. In DARK mode it becomes --ink, the off-white this file already sets for body text there, at 17.12:1. No new colour is introduced in either mode; both values are tokens this file already declares. The underline is what carries the link where the colour no longer does: in dark mode the link is now the same value as the prose around it, so it is the only thing distinguishing one from the other. It was already there by browser default, and `a` below now states it so it cannot be lost to a later rule. --accent is untouched as a FILL everywhere it currently is — the masthead bar, the sign-up button, the section icons, ::selection. */ /* the grey sampled from the logo artwork — "Singles", the rule, and the solas line all carry the same value, rgb(110,111,113). Two tokens because the grey does two different jobs: --logo-grey a FILL (the button's hover state). Mode-independent: it is the artwork's grey, not a text colour. --logo-grey-text the same grey used as TEXT. It clears AA on white (5.03:1) but only reaches 3.81:1 on the dark paper, so the dark block lifts it to a legible value. */ --logo-grey: #6e6f71; --logo-grey-text: var(--logo-grey); /* Batch 15b (Tina's ruling, 2026-08-25) — "change the grey in the main logo to a lighter grey." This is the artwork's grey lifted, and it is NOT a new colour: #96979a is the exact value the dark block below already declares for --logo-grey-text, the lift that clears AA on the dark paper. It is promoted to :root here so the file holds it once and two rules can name it; the dark block now aliases this token instead of repeating the hex. It has to be its own token rather than just pointing .mark-singles at --logo-grey-text, because that token is MODE-DEPENDENT (the artwork grey in light, this lift in dark) and the masthead bar is not — its ground is an --accent FILL, which does not invert, so the mark on it must not either. That is the same rule --logo-grey, --masthead-label and --hero-ink already follow in this file. "Singles" on the #800d06 bar: 2.11:1 -> 3.63:1 (re-measured in batch 15e when the bar moved; it read 2.07 -> 3.56 on the old #85011b). The wordmark is 28px at weight 700, which is large text and wants 3:1, so this is also the first time that mark has cleared its threshold — batch 8's note recorded the failure and left the fix as a colour ruling, and this is Tina taking it. For scale, --masthead-label white is 10.41:1 on the same bar; if she wants the grey lighter still, it is one value on this line. */ --logo-grey-light: #96979a; /* Batch 11, CHANGE 2 — the hero's h1 and lede, on the banner. True black, and the SAME value in both modes: the ground under this text is the photograph, which does not invert, so the text on it must not either. That is the rule --logo-grey and --masthead-label already follow in this file — a colour whose ground is a fill or an image is mode-independent — and this token is deliberately absent from the dark block below. Pure #000000, not a near-black, and the reason is measured rather than preferred: against this banner every step away from black measures worse (2.63:1 at the median, vs 2.48:1 at #0a0a0a and 2.37:1 at #111111). The full table, including the white figure that beats all of them, is in the .home section.hero note. It governs the h1 and the lede only. (Batch 11 recorded here that the .badge-note under them kept --ink-soft. Batch 12 moved it — to --hero-caption, when the panel made its ground white in both modes. This token still does not reach it.) */ --hero-ink: #000000; /* Batch 12, CHANGE 1 — the hero panel. Tina's ruling after batch 11 reported that black on the bare banner reaches only 2.63:1 at the median: the lettering cannot win against the photograph directly, so it stops trying to and gets its own ground instead. Black on this is 21.00:1. SOLID white, no translucency. It is permitted — measured over the region the panel covers, white at 95% opacity still leaves black at 18.83:1 at the WORST pixel behind it, and even 85% leaves 15.01:1, so every value in that range clears AA on 100% of the pixels. It is not taken, because the panel exists precisely to stop the photograph reaching the text, and letting it back through at reduced strength reintroduces the noise this change was ruled to remove. The full table is in the .hero-panel note. Mode-independent, and deliberately absent from the dark block, for the same reason --hero-ink is: this is a surface laid ON the photograph, the photograph does not invert, and a panel that flipped to near-black in dark mode would put --hero-ink black on near-black. */ --hero-panel: #ffffff; /* The "Apps available at launch" caption, which now sits on that panel. It has to leave --ink-soft behind, and this is a correction the panel forced rather than a colour ruling taken on its own: --ink-soft is mode-dependent (#6b6b6b light, #9a9a9a dark) and its ground used to be --paper, which moved with it. Its ground is now white in BOTH modes, and the dark value on white measures 2.81:1 — a clear AA failure for 14px normal text at the moment the panel lands. So the caption keeps the LIGHT-mode grey in both modes: 5.33:1 on the panel, past the 4.5:1 AA Normal wants, and still the muted register batch 6 chose it for. Pinning the light value is the smallest fix available; the alternative was --hero-ink, which would clear AA at 21:1 but make the caption as loud as the headline, which is not what it is for. */ --hero-caption: #6b6b6b; /* the sign-up button's label. Resting, the fill is --accent; on hover the fill becomes --logo-grey, which only carries a near-white label (5.03:1; the dark paper on that grey is 3.81:1 and fails), so the hover label is pinned white in both modes. Batch 14, CHANGE 4 — the RESTING label is now pinned to the same white, and this is forced by the dark accent moving to the burgundy rather than chosen. --btn-label was var(--paper), which is #0f0f0f in dark mode: on the old pink fill that measured 5.66:1, and on the burgundy it measures 1.84:1 — a near-black label on a near-black-red fill, which is not a legible button. Pinning it to the white this file already pins for the hover state introduces NO new colour and is a no-op in light mode (--paper is #ffffff there, so the value does not move); the only mode it changes is dark, where the label goes 1.84:1 -> 10.41:1. It is an alias, exactly as --masthead-label below is. */ --btn-label: var(--btn-label-hover); --btn-label-hover: #ffffff; /* Batch 7, CHANGE 1 — the masthead bar became a solid --accent fill, so every mark on it is now a label sitting on a fill, exactly the job --btn-label-hover already describes: the one white this file pins in BOTH modes. This is an alias, not a new value — it introduces no colour; it only lets the masthead rules name the white by what it does there. The band is gone: the header is white, so the marks take ink. */ --masthead-label: var(--ink); /* Charge six — header 1.5× today's padding + wordmark line box (45.4px → 68.1px). 1.75rem is the cap of --type-wordmark; --leading-wordmark is 1.05; --space-1 is 8px. The 1px hairline stays on the bar and is extra. */ --header-today: calc(2 * var(--space-1) + 1.75rem * var(--leading-wordmark)); --header-height: calc(1.5 * var(--header-today)); --logo-height: calc(var(--header-height) - 2 * var(--space-1)); /* type Stack order is chosen for a TRUE bold (batch 5B, EDIT A). The wordmark is set at 700, so every face here must ship a real bold rather than let the browser synthesise one. Monotype Garamond and Cormorant are both light-by-design — their bolds read weak at display size — so they sit late in the list; the old-style faces with sturdy true bolds lead it. On Windows this resolves to Palatino Linotype (Palatino Linotype Bold ships with the OS); Georgia is the universal backstop. */ /* Batches 11-12 staged three candidate faces for the hero h1 here, behind a removal marker. Tina ruled in batch 13: the headline KEEPS THE FACE IT HAD — the body stack, inherited, which is what the real h1 wore throughout. The picker and all four of its sites are gone; nothing about the headline's type ever moved, and there is no winner's stack to install. --font-wordmark above is untouched and is still the masthead's alone. */ /* the solas line's tracking. Named because the flush-right correction below has to cancel exactly one trailing letter-space. */ --track-solas: 0.2em; /* --gap-solas is RETIRED in batch 15, CHANGE 4 and its declaration is gone. It held the spread form's fixed inter-sola gap — 44px in batch 6, eased to 40px in batch 7, switched on at 62rem by batch 8. The spread form was the flush-right placement, and Tina's ruling moves the solas hard against the wordmark instead, so the compact form now carries every width and nothing in this file consumes that gap any more. The history is kept here rather than in a token with no consumer; restoring the spread means restoring the 62rem block and this declaration together. --track-solas below is NOT retired — the letter-spacing within each sola is untouched by all of this. Batch 15, CHANGE 4 declared --gap-mark-sep here — the double space on either side of the masthead hyphen, 12px, derived as 2 * 0.25em of the wordmark's 24px phone size. Batch 15c RETIRES it with the hyphen: "get rid of the hyphen and move them over." There is no separator left to space around, so the gap stops being a derived pair and becomes an ordinary single gap between two things on a line — the header's column-gap now names --space-1 (8px) off the existing spacing scale and this token is gone. 12px -> 8px, and the solas sit 4px nearer the wordmark. */ /* section-title icons (batch 5B) — sized to sit inside the h2's existing line box so adding one cannot raise the line. Only the front page ships icons; these govern the shared default. */ --icon-size: 1rem; --icon-gap: var(--space-1); /* Batch 6, CHANGE 6 — the front page's icons only (body.home). Filled circles carrying a white glyph, in place of the thin-line marks. 56px sits inside the 56–64px range asked for; the padding insets the 24-unit viewBox to a 32px glyph, ~57% of the diameter, which lets every existing glyph shape carry over as white-on-fill without being redrawn. */ --icon-size-home: 3.5rem; --icon-pad-home: 0.75rem; /* Batch 6, CHANGE 4 — the real store badges, sized so the DRAWN artwork matches at ~40px. Apple's SVG fills its 135x40 viewBox edge to edge, so its box height IS its drawn height. Google's PNG is 646x250 carrying 41px of transparent clear space on all four sides, so only 67.2% of the box is artwork: 3.75rem (60px) draws 40.32px — a shade taller than Apple's 40px, never shorter. Drawn widths land at 135.0px and 135.4px. */ --badge-h-apple: 2.5rem; --badge-h-google: 3.75rem; /* Batch 10, CHANGE 4 — the zoom view's close control, enlarged and moved on to the photograph's own top-right corner. It used to take --space-4 (56px) for its box and --type-large (24px) for its glyph, and neither token has a next step that lands where an enlarged close control wants to be: --space-5 is 96px, which is a section's vertical rhythm rather than a control, and --type-hero is a clamp built for the hero headline. So the control gets its own pair rather than borrowing a step that means something else. 72px box, 36px glyph — 1.29x and 1.5x what they were. */ --zoom-x-size: 4.5rem; --zoom-x-glyph: 2.25rem; /* Batch 15, CHANGE 3 — the hero banner's blur radius. The file had no `filter:` declaration at all before that batch, so the value it replaced was a true 0px. The pseudo-element's negative inset is written as 2 * this token, so the bleed that hides the blur's edge fade tracks the radius automatically and moving the blur is a change to this one line. Batch 15b (Tina's correction, 2026-08-25) — 8px -> 3px. "Too blurred, I didn't want it indistinct. Just *slight*." 8px was read as subtle and was not: it took the tiles to the edge of legibility. At 3px the faces and the tile edges stay clearly readable and the blur reads as a soft focus rather than a wash — the collage is still a collage, just off the sharp plane. Stated in px rather than rem on purpose, and this is the one place in the file where that is right: a blur radius is a paint distance, not a spacing step, so it has no business tracking the root font size. 0.1875rem would be the same number said less clearly. */ --hero-blur: 4px; --hero-slide: 34s; /* type sizes */ /* Batch 14, CHANGE 7 — the hero headline steps down one size so it still breathes inside the smaller panel. Was clamp(2rem, 4.5vw, 3.5rem); every one of the three figures comes down by the same ~0.79, so the clamp keeps its shape and only its scale moves. At 1440px the headline draws 44px rather than 56px. This token has exactly one consumer, .hero h1, so no other heading on the site moves with it. */ /* Batch 6, CHANGE 1 — the masthead was compressed to roughly a third of its height (187.66px measured, 64.8px after), and the wordmark comes down with it. At 28px it is still twice the solas line and clearly the dominant element in the band; the old figure was sized to the cap height of the retired logo PNG, which no longer constrains anything. */ /* spacing steps. --space-0 is new in batch 6: the compressed masthead needs a step below --space-1 to reach its height target. */ /* layout */ --col-label: 17rem; --col-gap: var(--space-4); --measure-hero: 16em; /* Batch 12, CHANGE 1 — the hero panel's outer width, sized TO THE CONTENT rather than to the viewport, which is what the brief asked for. It is derived, not chosen: the widest thing on the panel is the lede at --measure-lede, and the panel adds --space-4 of padding on each side. --measure-lede + 2 * --space-4 = 40rem + 7rem = 47rem (752px) so the lede fills its own measure exactly and the padding is real space rather than a squeeze on the text. Changing either input means redoing this sum, exactly as --container's note says of its own. Below 62rem the panel's horizontal padding drops to --space-3 and this cap stops binding — the panel is narrower than 47rem there anyway and takes the width its gutters leave it. Batch 14, CHANGE 7 — the panel is reduced by roughly a third. The sum is REDONE, not overridden, exactly as the note above requires of it: both inputs move, and the panel's padding is now --space-3 at EVERY width rather than opening to --space-4 above the breakpoint, so there is one figure instead of two. --measure-hero-lede + 2 * --space-3 = 34rem + 4rem = 38rem (608px) "Roughly a third" is read as the panel's FOOTPRINT, and the reduction is shared between the two dimensions rather than taken out of the width alone — a third off the width would have left a 501px panel under a headline, which reads as a column, not a panel. Five levers, all of them one step each: the width here, the padding on .hero-panel, --type-hero stepped down, the hero lede stepped from --type-large to --type-base, and the gap under that lede stepped from --space-4 to --space-3. MEASURED, not derived — every figure below is a getBoundingClientRect off the rendered page, before and after, at ten widths: viewport panel before panel after area 1440px 752.0 x 581.0 608.0 x 508.8 -29.2% 992px 752.0 x 568.5 608.0 x 499.7 -28.9% 768px 736.0 x 557.4 608.0 x 491.2 -27.2% 656px 624.0 x 589.4 608.0 x 491.2 -18.8% 500px 468.0 x 659.0 468.0 x 521.6 -20.8% 360px 328.0 x 877.2 328.0 x 722.5 -17.6% The wide end is the figure the brief was written against and it lands at roughly a third. The narrow end lands at roughly a fifth, and the reason is structural rather than a shortfall: below about 640px the panel has never taken --measure-panel at all — it takes the width the --gutter edges leave it, which this change does not touch — so all of the reduction down there is height and none of it is width. Making the phone panel narrower would mean insetting it from its own gutters, which is a different change from the one asked for and is not taken here. The banner still shows on all four sides at every width, and with more of it visible than before, so nothing about CHANGE 1's contract weakens. The panel is a solid #ffffff and --hero-ink is #000000, so the black-on-white inside it is 21.00:1 — the sRGB maximum, untouched by this change. */ --measure-hero-lede: 34rem; --measure-panel: 38rem;} @media (prefers-color-scheme: dark) { :root { /* the wash carried at a higher alpha, because 3.5% of anything is invisible on near-black. Same hue, same token, one value per mode. */ --callout-wash: var(--field); /* Batch 14, CHANGE 4 (Tina's ruling, 2026-08-25) — THE DARK ACCENT IS PINNED TO THE LIGHT BURGUNDY. It used to be #d9677f, the light burgundy lifted in lightness and eased off saturation so it would not glare on near-black. Lifted that far it is a pink, and the brief is absolute: no pink anywhere on the site, either mode, any screen width. This is the SAME value as :root's --accent, #800d06, restated here rather than deleted so the "one token pair" contract in the header note still holds — moving the dark accent is still a change to this one line. No new colour is introduced and no filter or opacity is involved: there is not one `filter:` or `opacity:` declaration in this file, so the pink was never a lightened burgundy, it was a second token holding a pink. WHAT THIS FIXES, measured (the fill jobs — masthead bar, sign-up button, section icons — where --accent is a ground rather than text): white label on the bar / button / icon 3.39:1 -> 10.41:1 --logo-grey "Singles" on the bar 1.48:1 -> 2.07:1 WHAT IT COST, and how it was settled. --accent is also TEXT in two places — `a` (inline links) and `.zoom-x:hover` — and on the #0f0f0f dark paper the burgundy measures 1.84:1, down from the pink's 5.66:1. There is no burgundy-only fix for that: a colour dark enough not to read as pink cannot also carry text on near-black. This note originally left the three levers open as colour rulings; Tina took the first of them the same day, and it is CHANGE 11 below — inline link text gets its own token, --link, which is the accent in light mode and --ink in dark, and the underline is stated rather than inherited. 1.84:1 -> 17.12:1. STILL OPEN, and deliberately not taken here: --accent is text on the dark paper in two remaining places, both of them transient states rather than resting copy — the `a:focus-visible` outline and the `.zoom-x:hover` glyph. Both still measure 1.84:1 in dark mode. CHANGE 11 was ruled for inline links and is applied to inline links only; extending --link to a focus ring and a hover state is a further colour ruling and is Tina's. CLOSED — batch 15, CHANGE 1 is Tina taking exactly that ruling. Both of those two sites now name --link instead of --accent, so both go 1.84:1 -> 17.12:1 in dark mode and neither moves in light. There is no remaining place where --accent is text on the dark paper. */ /* --accent comes from theme.css, the one token source. */ /* Batch 14, CHANGE 11 — inline link text takes the body ink here, not the accent. See the --link note in :root. --ink is #f2f2f2 above, so this introduces no value of its own; it only says which existing one a link wears on dark paper. 17.12:1, against the 1.84:1 the accent gave. */ /* the artwork grey lifted to clear AA on the dark paper (6.56:1), keeping the original's faint cool cast. --logo-grey itself is NOT overridden: as a fill it stays the sampled value. Batch 15b — the hex moved to :root as --logo-grey-light and this is now an alias to it. Same value, same 6.56:1; it is declared once because the masthead's "Singles" took the same lift and the file should not carry one colour in two places. */ --logo-grey-text: var(--logo-grey-light); } } /* base */ * { box-sizing: border-box; } html { background: var(--field); } body { margin: 0; padding: 0; background: var(--field); color: var(--ink); font-family: var(--font); font-size: var(--type-base); line-height: var(--leading); } /* Batch 14, CHANGE 4 — the selected text follows --btn-label for the same forced reason: this is a label sitting on an --accent FILL, and var(--paper) on the pinned dark burgundy is 1.84:1. No new colour, no-op in light mode. */ ::selection { background: var(--accent); color: var(--btn-label-hover); } /* Batch 15, CHANGE 1 (Tina's ruling, 2026-08-25) — the focus ring takes --link, which closes the first of the two dark-mode items batch 14, CHANGE 4 left open. On the #0f0f0f dark paper the accent burgundy measured 1.84:1 as a ring; --link is --ink there, #f2f2f2, which measures 17.12:1. In LIGHT mode --link IS --accent, so this declaration renders the identical burgundy it always has and nothing on a white page moves. No new colour literal: the value on both sides is a token this file already declares. Inside the masthead bar the header override below still wins and the ring is white. */ a:focus-visible { outline: var(--line) solid var(--link); outline-offset: var(--space-1); } /* the container rule — full-bleed block, contained content. Everything that spans the viewport gets its content centred here. */ header, footer, section, main > h1, main > .lede, main > .backlink { padding-inline: max(var(--gutter), (100% - var(--container)) / 2); } /* masthead — the wordmark as real text, far left, linking home, and the solas line beneath it. Batch 4B replaced the two logo PNGs, which no longer ship with the site; the originals are archived beside the working folder. Batch 5B set the wordmark bold and justified the solas across the container from 40rem up. Batch 6, CHANGE 1 + CHANGE 2 — the band was compressed to roughly a third of its height. Measured at a 1250px viewport, before and after: padding-top 32.00 -> 4.00 (--space-3 -> --space-0) wordmark line box 59.39 -> 29.40 (54px/1.1 -> 28px/1.05) solas margin-top 16.00 -> 4.00 (--space-2 -> --space-0) solas line box 22.39 -> 22.39 (unchanged — typography locked) ornament margin-top 16.00 -> — (removed, CHANGE 2) ornament box 8.88 -> — (removed, CHANGE 2) padding-bottom 32.00 -> 4.00 (--space-3 -> --space-0) border-bottom 1.00 -> 1.00 ------ ----- 187.66 -> 64.80 (34.5% of the original) The ornament's 24.88px is counted once, here, as CHANGE 2's contribution to this target. Its rules are gone from this file and its markup from all four pages. Batch 7, CHANGE 1 + CHANGE 3 — the band becomes a solid --accent fill carrying white marks, and the wordmark and the solas move onto ONE line. CHANGE 1. The fill is --accent, so it follows the mode exactly as every other consumer of that token does; nothing here names a burgundy. All four marks on the bar — both halves of the wordmark, the solas, and the pipes — take --masthead-label. Two of them (.mark-sola and .solas .sep) carried --accent before and would now be invisible on their own ground, so this is not only Tina's ruling, it is forced. Measured on the composited bar: 10.41:1 light, 3.39:1 dark. See the dark-mode note under .solas. The bottom hairline is REMOVED. It was there to part the band from the paper below it; a solid fill already draws that edge harder than a 1px --hairline can, and in dark mode a #2a2a2a line under a light-pink bar reads as a grey smudge rather than a separator. Nothing replaces it. CHANGE 3. The band is a flex row: wordmark left, solas taking the rest of the width. align-items:center centres the two against each other, and the symmetric padding-block centres the pair in the bar. Height, measured at a 1250px viewport: padding-top 4.00 -> 8.00 (--space-0 -> --space-1) tallest child 29.40 -> 29.40 (the wordmark, 28px/1.05; the solas' 22.39px box now sits inside this, not below) solas margin-top 4.00 -> — (removed — same line now) solas line box 22.39 -> — (absorbed above) padding-bottom 4.00 -> 8.00 (--space-0 -> --space-1) border-bottom 1.00 -> — (removed, see CHANGE 1) ----- ----- 64.79 -> 45.40 The padding goes UP a step on purpose: --space-0 was sized for a band whose two stacked rows already filled it, and 4px of air above a single line inside a coloured bar reads as a crop. --space-1 gives the line room without giving back the height CHANGE 3 just saved. flex-wrap:wrap is the narrow-viewport contract: below the width where the pair fits, the solas takes its own row rather than clipping or forcing the document to scroll sideways. See the sweep note in the 62rem solas block. Batch 15, CHANGE 4 (Tina's ruling, 2026-08-25) — THE SOLAS MOVE OVER NEXT TO THE LOGO, with a hyphen between. "We want to move the solas over next to the logo with a hyphen between the logo and the solas, maybe double space on either side of the hyphen." The line itself does not change — the same nine spans, the same string, the same tracking, the same --masthead-label white. What changes is where it sits: it used to take all the width the wordmark left it (flex:1 1 auto) and push its content to the far right edge, mirroring the wordmark across the band. It now shrink-wraps its own text and sits immediately after the wordmark, so the pair reads as one continuous masthead line from the left gutter. That flush-right placement is what the ruling calls the old one, and it is REMOVED rather than overridden: .solas loses its flex-grow here and the whole 62rem spread block is gone from this file. column-gap drops --space-3 (32px) for --gap-mark-sep (12px) — the gap is now the double space around the hyphen rather than the space between two things holding opposite ends of a bar. See that token for where 12px comes from. THE HYPHEN LIVED INSIDE .solas, as its first child, so it always travelled with the line it introduced rather than being stranded at the end of row one. BATCH 15c — THE HYPHEN IS GONE, and the gap closes with it. "Get rid of the hyphen and move them over." The span is out of all four pages, its rule and its token are out of this file, and the display:none that hid it below the breakpoint is out of the query. column-gap goes 12px -> --space-1 (8px): the 12px was half of a derived double space around a separator, and with no separator there is nothing to space around — 8px is one gap between two things on a line, off the spacing scale this file already keeps, and the solas sit 4px nearer the wordmark than they did. WIDTHS, re-bisected to the pixel on all four pages with the hyphen gone. The compact line draws 400.0px at its --type-micro cap and the wordmark measures 126.7px at its 24px phone size, so the pair needs 534.7px plus the two 16px gutters: <= 566px two rows wordmark centred, solas centred beneath >= 567px one row the pair together, flush left in the gutter ONE boundary now, where batch 15 had two — the second one existed only to decide whether the hyphen showed, and there is no hyphen. Every earlier figure for the record: batch 15 read 652 / 653-672 / 673, batch 15b read 570 / 571-592 / 593, and this batch reads 566 / 567. The 35rem query below draws it. 35rem is 560px, the clean rem step under the 566px seam and wholly inside two-row territory — the same derivation batch 14 wrote and the third value this one literal has carried. The two-row form is the SAME flex-wrap contract batch 7 wrote, not a placement any of this adds back: there is no width at which a 400px line and a 127px wordmark both fit inside a 500px phone, and the type is already scaling by the min() rather than wrapping to a further row. Zero overflow and zero horizontal document scroll at every width. */ header { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: nowrap; align-items: center; column-gap: var(--space-1); min-height: calc(var(--header-height) + var(--line)); padding-block: var(--space-1); background: var(--paper); border-bottom: var(--line) solid var(--hairline); } /* the focus ring is --accent site-wide, which on an --accent fill is no ring at all. Inside the bar it takes the same white the marks take. */ header a:focus-visible { outline-color: var(--masthead-label); } .mark { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; font-family: var(--font-wordmark); text-decoration: none; } .mark img { display: block; height: var(--logo-height); width: auto; max-width: 100%; object-fit: contain; object-position: left center; } /* Batch 15g, CHANGE 1 — THE WORDMARK LINKS HOME, AND NOW BEHAVES LIKE A LINK. The anchor itself is not new: `` has been the markup on every page since batch 4B, index.html included, and it is deliberately NOT special-cased there — the home page's wordmark points at home like every other, which is what a masthead wordmark does everywhere on the web and is one less conditional in nine files. What was missing was the LINK TREATMENT. .mark declares text-decoration:none and had no hover or focus state at all, so the one link on the bar that every visitor recognises as clickable gave no sign it was. This rule is a copy of .mast-link:hover/:focus-visible above — same underline, same 0.2em offset, same --line thickness — so the wordmark and the nav answer the pointer identically and nothing new is invented for it. RESTING STATE IS UNTOUCHED, which is the ruling: no underline at rest, no colour change. (As written in batch 15g that read "Sola" still --masthead-label white and "Singles" still --logo-grey-light; batch 21 took "Singles" to --masthead-label too, so both halves are now white. The point of the sentence is unchanged — this rule still adds nothing but hover and focus — but the file should not describe a split it no longer has.) text-decoration-color is stated rather than left to inherit, and that is the one declaration here with no counterpart on .mast-link. It was pinned when the wordmark was the only link on the site whose two halves were DIFFERENT COLOURS; batch 21 made both halves white, so the underline would now inherit the right colour by accident. It stays pinned anyway. An underline set on .mark is painted in .mark's own colour, which .mark never declares — it would come from whatever header happens to inherit, which is not a thing this file should be deciding by luck, and it is still not, whether or not the mark is two-tone this week. Pinning it to --masthead-label draws ONE white rule under both halves. It is the same white both halves now carry, so no new token and no new literal. The focus RING needs nothing here: `header a:focus-visible` above already re-points --link to --masthead-label for every anchor inside the bar, and the wordmark is one. White on the #800d06 bar is 10.62:1, and because batch 14 pinned the dark --accent to the light burgundy that figure is the same in BOTH modes. Batch 20 — THE HOVER UNDERLINE COMES OFF, per Tina's ruling, and :hover is gone from the selector below. The wordmark is the one link on the bar that nobody needs taught is clickable, and the rule above got that wrong. :focus-visible STAYS, and the distinction is not a technicality. Hover is a convenience for a pointer that is already on the target; focus is how a keyboard user knows where they are, and it is the only thing standing between them and an invisible position on the bar. Removing hover costs a mouse user nothing. Removing focus would strand a keyboard user, so it is left exactly as it was — same white underline, same offset, same thickness. .mast-link and .mast-menu-link are NOT touched; they keep hover and focus both, which is the "other nav links keep whatever they do now" of the ruling. */ /* Charge six: the wordmark is an image. Focus is the header outline, not an underline under letterforms. */ /* Batch 7, CHANGE 1 — the artwork's burgundy/grey split is retired ON THE BAR by Tina's ruling: both halves take --masthead-label. The two classes are kept rather than merged, so restoring the split is a change to these two declarations and nothing structural. Batch 8, CHANGE 5 (Tina's ruling, 2026-08-22) — half of that split comes back. "Sola" keeps --masthead-label; "Singles" returns to --logo-grey, the artwork's grey. Batch 7 kept the two classes apart for exactly this, so the change is the one declaration below and nothing structural. The solas line is untouched and stays --masthead-label. --logo-grey, not --logo-grey-text, is the correct token: this is the grey sitting on a coloured FILL, which is the job this file already documents --logo-grey as doing. It is mode-independent by design, so the wordmark's second half renders rgb(110,111,113) in both modes while the bar under it moves with --accent. CONTRAST, stated plainly rather than worked around. Batch 14, CHANGE 4 pinned the dark --accent to the light burgundy, so there is now ONE bar colour rather than two and this note has one figure rather than a pair: #6e6f71 on #800d06 measures 2.11:1, in both modes (2.07:1 on the old #85011b bar; batch 15e moved the ground, not the grey). The wordmark is 28px at weight 700, which is large text and wants 3:1, so it still does not clear — the grey is only a little darker than the bar, so it sits close to its ground. What changed is the dark mode, which was 1.48:1 on the old pink bar and is now 2.07:1 like the light one. For comparison, the --masthead-label white this replaces measures 10.41:1, also now in both modes (it was 3.39:1 in dark). Nothing here is silently adjusted to make those numbers pass. The ruling is Tina's, it was issued with these figures owed back to her, and her eyes decide. Moving the result means moving --logo-grey (which is the artwork's own sampled value), lifting the wordmark's grey the way --logo-grey-text already lifts the body grey, or putting this declaration back to --masthead-label. All three are colour rulings, so none is taken here. BATCH 15b — TINA TOOK THE SECOND OF THOSE THREE. "Change the grey in the main logo to a lighter grey." So "Singles" moves off the artwork's sampled --logo-grey and onto --logo-grey-light, the lift this file already carried for dark-mode body text, promoted to :root so the value is declared once. The figure the paragraph above owed her: 2.11:1 -> 3.63:1 on the #800d06 bar, so the 28px/700 wordmark now clears the 3:1 that large text wants, for the first time since the bar became a fill in batch 7. (Both are batch 15e re-measurements against the new bar; on the #85011b they replaced they read 2.07:1 -> 3.56:1, and the ruling was taken on those.) Mode-independent, and it stays that way — see the token note for why this is --logo-grey-light and not --logo-grey-text. --logo-grey itself is untouched and is still the artwork's value wherever it is a FILL (the button's hover state). "Sola" is untouched and still --masthead-label white; the split the two classes exist to hold is intact, and it is now a white/light-grey pair rather than a white/mid-grey one. BATCH 21 — THE LOGO GOES ENTIRELY WHITE, all parts, everywhere it appears. That is the THIRD of the three moves the batch-8 note above listed and left for Tina ("or putting this declaration back to --masthead-label"), so this is not a new idea in the file, it is the option that was already written down waiting for a ruling. Both halves now take --masthead-label, which resolves to --btn-label-hover, #ffffff. No new token and no new literal: this is the same white "Sola" has carried since batch 7 and the same white the solas line and .mast-link take, so the whole bar is now one ink. The wordmark is the only place the logo appears — one `` in the header of each of the twelve pages, and there is no SVG or image logo anywhere in public/ — so "everywhere it appears" is these two declarations and nothing else. (.sec-icon's --logo-grey fills on index.html are section icons, not the logo, and are deliberately untouched.) CONTRAST: 3.63:1 -> 10.41:1 on the #800d06 bar, in both modes, matching "Sola" exactly. The 28px/700 wordmark wanted 3:1 and already cleared it; this is not a fix, it is a ruling, and it happens to raise the figure. THE TWO CLASSES ARE STILL KEPT APART, for the same reason batch 7 kept them: restoring any split is a change to one declaration and nothing structural. --logo-grey-light is NOT removed — it is still live at --logo-grey-text in the dark-mode block, so the token keeps a job. */ /* Charge six: .mark-s, .mark-sola and .mark-singles went with the text wordmark. The PNG is the mark; nothing else used those three rules. */ /* the solas banner — the artwork's solas line, set as text. DEFAULT (narrow): the compact centred form, allowed to wrap. The spread form is switched on at the 62rem breakpoint below, where there is room for it BESIDE THE WORDMARK; see the header note on the one breakpoint literal and on why batch 8 moved this figure. Batch 8, CHANGE 3 — the compact form now carries every width below 62rem, including the 816px-to-992px band the spread form used to claim and could not fit. On that band the compact line rides the wordmark's line and is centred in the width the wordmark leaves, rather than sitting flush right on a second row. That is the visible trade the fix makes: one row instead of two, centred instead of flush right, between roughly 660px and 992px. Nothing about the typography moved — same size, same tracking, same wrap. Batch 7, CHANGE 3 — the top margin goes: this is a flex item on the wordmark's line now, not a block stacked under it, and align-items on the header does the vertical centring that margin used to fight. flex:1 1 auto is what makes the two placements agree. Sharing the line, it takes the width the wordmark leaves and pushes its content to the far end of it (justify-content in the 62rem block); wrapped to its own row, it takes the whole header width and pushes to the same edge. The solas therefore sit flush right against the container's right edge in both states, mirroring the wordmark on the left — the same edge-to-edge discipline the wide layout already uses for its flipped section labels. Centring them in the leftover width was the alternative and was rejected: it lands the row a little right of the page's optical centre, which reads as a near-miss rather than a placement. Batch 7, CHANGE 1 — the line and its pipes take --masthead-label. The pipes lose their --accent, which on an --accent bar was invisible. DARK-MODE CONTRAST — THIS ONE IS FIXED. It used to read: white on the dark --accent (#d9677f) measures 3.39:1, so this 14px line cleared AA Large but NOT AA Normal in dark mode, and the note closed by saying the fix was to move the dark --accent, which was a colour ruling and so was not taken. Batch 14, CHANGE 4 is Tina taking it — for the pink, not for this — and the contrast came with it. White on #800d06 is 10.62:1, now in both modes, so the line clears AA Normal everywhere and the exception this note recorded is gone. */ .solas { margin: 0; /* Batch 15, CHANGE 4 — flex-grow goes. 1 1 auto made this box take all the width the wordmark left and pushed the text to the far end of it; 0 1 auto shrink-wraps the text so the line begins where the hyphen puts it, right next to the wordmark. flex-shrink stays 1 so a narrow row still hands the box to flex-wrap rather than overflowing it. text-align:center below is now reached only when the line is on its own row and its text wraps inside it. */ flex: 0 1 auto; max-width: none; text-align: center; /* Batch 14, CHANGE 9 — THE SOLAS SCALE WITH THE VIEWPORT INSTEAD OF WRAPPING. Batch 8's width sweep recorded the fallback this replaces: from 360px to 499px the compact line could not be made to fit one row at 14px, so it wrapped to two and the masthead stood three rows tall. The brief rules that out — the five solas fit one line on a phone — and the lever it names is the type, not the wrap. The figure is measured, not guessed. The line's width is exactly linear in its font-size (rendered at 14/13/12/11/10px it draws 466.58 / 433.30 / 399.91 / 366.64 / 333.38px), which is 33.327px of width per 1px of type. Below the one-row breakpoint the line has its own row and the whole content width to use, so what it has to fit is 100vw less the two --gutter (1rem) edges: fit = 14px * (100vw - 32px) / 466.58px = 3.0006vw - 0.9602px and the declared 2.96vw - 0.95px sits just inside it, leaving 4-6px clear at every phone width rather than landing flush on the gutter. min() caps it at --type-small, which is the size this line has always been, so NOTHING ABOVE 505px MOVES: the cap binds from 505px up, the line needs 498.6px there, and every measurement in the batch 8 sweep from 500px up still holds. That is why this needs no breakpoint of its own and does not add a third literal to the file. The trade the brief accepts is at the bottom: 9.71px at 360px and 8.52px at 320px, small type rather than a wrapped row. There is deliberately NO floor — a floor would put the wrap back the moment the viewport went under it. Batch 15b, CHANGE 3 — THE CAP STEPS DOWN, --type-small -> --type-micro. "I think we should shrink the solas." One step down the type scale this file already declares, so no new size literal appears: 14px -> 12px, and against the wordmark's 28px ceiling the line goes from half its size to three sevenths of it. The vw term is UNTOUCHED — it is the phone fit formula and it still governs below the cap, so the narrow end of the range is exactly what batch 14, CHANGE 9 measured it to be (9.71px at 360px, 8.52px at 320px, one line, no wrap). What moves is where the cap starts binding: 12px needs 400.0px of row, so it binds from 432px up rather than 505px, and every width above that draws 12px. */ font-size: min(var(--type-micro), calc(2.96vw - 0.95px)); /* Batch 15c — 1.6 -> 1.2. This is a HEIGHT fix, not an alignment one: the baselines were already level and the ink already sat on the wordmark's base line. 1.6 left 2.19px of half-leading hanging under the line, which was the only thing in the bar reaching below the wordmark's own box and the whole of the 0.80px the bar had grown. See the align-items note on the header rule for the full measurement table. */ line-height: 1.2; letter-spacing: var(--track-solas); color: var(--masthead-label); } .solas .sep { color: var(--masthead-label); } /* each sola stays on one line, so "DEO GLORIA" can never break in half */ .solas .sola { white-space: nowrap; } /* Batch 15's .solas .mark-sep rule stood here — the hyphen between the logo and the solas, inheriting the line's colour and size and carrying the right half of the double space. Batch 15c removes it: "get rid of the hyphen and move them over." The span is gone from all four pages, this rule is gone, --gap-mark-sep is gone, and the display:none the 37rem query used to hold for it is gone with the rest. The whole hyphen apparatus was three declarations and one media-query line, and all four are removed together rather than left inert — a rule with no markup to match is the kind of thing that gets read as live two batches later. Batch 15c, CHANGE 3 — THE MASTHEAD NAVIGATION, right-hand end of the bar. "In the right side do a fake (but authentic) Articles Register Login." FAKE, AND MARKED AS SUCH. Every href is "#": there is no articles page, no sign-in and no registration, and nothing behind any of the three exists. Each anchor carries its own PREVIEW-ONLY FAKE marker in the HTML — three markers for three separately-fake links, which is the only reason this batch's count moves 2 -> 5. The nav ships on the front page ALONE; the three inner pages keep the bare masthead, which is what holds the count at 5. WORDING, and it is DC's call under Tina's delegation, reversible on her word. She wrote "Articles Register Login"; this ships Articles, Sign in, Register. Two changes, both about voice rather than function. "Sign in" because the site's copy is plain English throughout and "Login" is the noun used as a verb. And Register LAST, so it reads as the pair every product masthead sets — the way back in, then the way to start — rather than sitting second where it would compete with the hero's own sign-up button for the one thing the page is actually asking a visitor to do. TYPE — no new tokens. It takes exactly what the solas take: --type-micro, --masthead-label white, the same 0.2em tracking, uppercased. That is what "matching the bar's existing type treatment" means here, and it is why the nav reads as part of the bar rather than as something laid on it. margin-inline-start:auto is the whole of the positioning: the wordmark and the solas keep their gap at the left gutter, and the nav takes the rest of the line and sits against the right one. It is a flex item on the same baseline as the other two, so all three sit on one line rather than the nav floating in the middle of the bar's height. (Three FLEX ITEMS — wordmark, solas, nav — which is a different three from the three links, and unaffected by the count of links changing below.) TWO LATER RULINGS AMEND THE PARAGRAPHS ABOVE without changing a declaration in this block. Batch 15e gave Articles a real page, so that anchor stopped being fake and lost its marker. Batch 15f takes Register out altogether — Tina, on the delegated wording and reversing it: "What about just Articles and Sign In?" The nav is now TWO items, Articles then Sign in, in that order and with that treatment, so the whole case for Register's position above is moot because there is no Register. Nothing in this file was ever Register's alone — .mast-nav and .mast-link are written for the items generally, whatever their number — so nothing here comes out with it, and no rule is left standing with no markup to match. */ .mast-nav { display: flex; flex-wrap: nowrap; align-items: center; margin-inline-start: auto; column-gap: var(--space-2); row-gap: var(--space-0); flex-shrink: 0; } .mast-register { padding: var(--space-1) var(--space-2); letter-spacing: var(--track-caps); flex-shrink: 0; } .mast-fold { position: relative; } .mast-fold-summary { list-style: none; cursor: pointer; } .mast-fold-summary::-webkit-details-marker { display: none; } .mast-fold-bars { display: block; width: var(--space-2); height: var(--line); background: var(--ink); box-shadow: 0 var(--space-0) 0 var(--ink), 0 var(--space-1) 0 var(--ink); } .hero-solas { margin: 0 0 var(--space-2); letter-spacing: var(--track-caps); } @media (min-width: 41rem) { .mast-fold-summary { display: none; } .mast-fold-panel { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); } } @media (max-width: 40.98rem) { .mast-fold:not([open]) .mast-fold-panel { display: none; } .mast-fold[open] .mast-fold-panel { display: flex; flex-direction: column; gap: var(--space-1); position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-1)); z-index: 2; min-width: var(--measure-photo); padding: var(--space-1); background: var(--paper); border: var(--line) solid var(--hairline); } } /* The links themselves. text-decoration:none is what makes these read as navigation rather than as prose links — the `a` rule states an underline for inline links, and this is the fourth place in the file that opts out of it, alongside .mark, .notify and .zoom-x. The underline comes back on hover and focus, so the affordance is not lost, it is just not the resting state. The focus ring is NOT restated here on purpose. `a:focus-visible` gives it --link, and `header a:focus-visible` above already re-points that to --masthead-label for everything inside the bar — which is required, not decorative: --link is --accent in light mode, and an --accent ring on an --accent bar is 1.00:1, no ring at all. White on #800d06 is 10.62:1 in BOTH modes, so these tab stops are ringed identically light and dark. (Two of them since batch 15f, three when this was written; the ratio is a property of the colours, not of how many links carry them.) */ .mast-link { color: var(--masthead-label); font-size: var(--type-micro); /* 1.2, and it is the SAME fix and the same reason as the solas' line-height above: a 12px mark inheriting the body's 1.65 hangs 5.80px below the baseline against the wordmark's 4.39px, and on a baseline-aligned flex row that grows the bar. Measured, adding the nav at 1.65 took the bar from 46.19px to 46.80px; at 1.2 it is 45.39px, which is what it was before batch 15b touched the alignment at all. Every mark on this bar now carries leading that fits inside the wordmark's own line box. */ line-height: 1.2; letter-spacing: var(--track-solas); text-transform: uppercase; text-decoration: none; white-space: nowrap; } .mast-link:hover, .mast-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: var(--line); } /* ========================================================================== Batch 15g, CHANGE 3 — ARTICLES IS A DROPDOWN. CSS ONLY. "I envisioned Articles being a dropdown menu, not a page." — Tina NO JAVASCRIPT. The site has none by design and gains none here. The charge said to stop and report rather than add a script if keyboard opening could not be done without one. It can, and this is how: the menu is hidden with VISIBILITY, not with display or opacity, and it is revealed by :focus-within on the wrapper as well as by :hover. Why visibility is the load-bearing choice. A visibility:hidden subtree is not focusable and takes no tab stops, so on a keyboard the closed menu does not exist. Tabbing onto the Articles trigger puts focus inside .mast-item, :focus-within matches, the subtree flips to visible, and its links become tab stops the very next Tab — the browser recomputes tab order live. Tab off the last item and focus leaves the wrapper, :focus-within stops matching and the menu closes itself. Opacity alone would leave seven invisible tab stops on the bar at all times; display:none cannot be transitioned INTO visibility by a parent state without the same problem in reverse. This is the whole trick and it needs no script. NO role="menu", DELIBERATELY. ARIA's menu pattern is a promise that arrow keys move between items, Home/End jump, and Escape closes. None of that is possible without JavaScript. Claiming the role and not honouring it is worse for a screen-reader user than not claiming it, because it advertises keys that do nothing. What this is, honestly described, is a group of links that appears — so it stays a plain set of anchors inside the labelled