/* ═══════════════════════════════════════════════════════════════════════════
assets/site.css — the WiFi Odds design system. ONE file, every page.
THE FORECAST. The reference is a weather forecast delivered by a colleague who
flies every week: warm paper, two voices in type, and colour that only ever
means something. It replaced The Plate, whose reference was an approach plate
— a document written for a trained, calm, paid reader, which ours is not. The
spec is public/wifiodds-fable/ARCHETYPES.md in the websites repo; where this
file and that file disagree, that file wins.
THE COLOUR RULE. Colour has two owners and no third.
-----------------------------------------------------
THE BANDS own every number. Green 60-100, amber 40-59, clay 1-39, grey for
zero and for every projection. Scores, odds, badges and score chips wear a
band, through --band, which the .sc-* classes set.
THE SKY owns the chrome. Links, buttons, kickers, the rule at the top of every
page, the homepage banner and the orbit mark. One blue at two altitudes —
stratosphere-deep over the paper, pale night-sky over the dark ground — and
always flat. No gradients, no glows, no starfields. The old site had a
starfield canvas and a gradient wordmark and both were deleted for cause.
Nothing that encodes a number may take the sky. Nothing decorative may take a
band. Provenance lines stay muted ink, because they sit inside the data's
screen space. The first chart line that borrows green is the day the score
stops meaning anything, and the first score that turns blue is the day links
stop meaning anything.
The projected score is the standing exception and it is a NEGATIVE one: it
never takes --band. Grey outline, always. See .proj near the end of this file.
TWO THEMES, ONE TOKEN SET
-------------------------
LIGHT IS THE DEFAULT (:root) and it is the register decision, not a taste one:
cockpits are dark because they fly at night, and the reader booking a Tuesday
flight is not. Dark is the same room with the lamp on — a warm brown-black
ground and cream ink, never a cold inversion of the light theme.
The dark values appear twice because CSS cannot alias a declaration block:
once under the OS preference, so pages are correct with JavaScript off, and
once under the manual .dark class the masthead switch sets. IF YOU CHANGE A
DARK VALUE, CHANGE IT IN BOTH PLACES.
NOTHING IS STORED. No cookie, no localStorage, no fingerprint. The switch
holds its state in a class on until you reload, and that is the ceiling
for cleverness here. The old build wrote localStorage.woTheme; that key is
gone, and so is the boot script that read it.
TYPE — two voices, one webfont, 41 KB
-------------------------------------
THE SERIF SPEAKS TO THE READER: headings, the say-sentence, the wordmark, and
every large figure. Source Serif 4 (Adobe, SIL OFL), self-hosted, subset, two
real weights. Self-hosted rather than a system stack because Charter/Georgia/
Noto Serif is three different faces for one voice depending on who is reading.
THE SANS REPORTS: tables, labels, provenance, footnotes, micro-caps. That one
stays on system-ui and costs zero bytes. It is the right call rather than a
budget one — this voice lives at 12 to 14px, where the reader's own OS face is
already hinted and rasterised for their screen, and where an unhinted webfont
is measurably worse. A table set in the platform's own UI face also reads as
the system reporting, which is the register the spec asks for.
Source Serif's figures are tabular by default (all ten digits measure 529
units), so a numeral does not change width when it changes value. That was the
whole job B612 Mono was doing, and it no longer needs a fourth font file.
--mono is a system stack now and is reserved for what is literally code: the
API paths, the formula blocks.
Regenerate the faces with `python3 build/make-brand.py fonts`.
Licence: assets/SourceSerif4-OFL.txt.
ANIMATION IS A PRIVILEGE, NOT A DEFAULT. Every animated rule is scoped under
html.anim, a class site.js adds only when prefers-reduced-motion is
no-preference. No JS / reduced motion => the page is already finished.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Source Serif 4, self-hosted ──────────────────────────────────────────
Subset with fontTools to Latin plus the punctuation and symbols the pages
actually use (checked by counting the non-ASCII characters in the built HTML,
not by guessing). font-display:swap, so a slow font never blocks the text —
and the fallback stack below is metric-adjacent enough that the swap does not
reflow a heading into a second line. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/serif-400.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;
src:url(/assets/serif-700.woff2) format("woff2")}
:root{
/* ── the two voices, plus code ── */
/* ONE FACE, 28 Jul 2026. The approved interior system (Codex, round 16) sets
Inter on and overrides nothing but .mono, and the V5 homepage does the
same. Interior routes were still rendering headings in Source Serif 4 while
the homepage rendered Inter, so a visitor crossing from / to /united/fleet/
changed typeface mid-session. Both tokens now resolve to the same stack.
The names are kept because ~40 rules reference them; --serif now means
"display" and --sans means "UI", not two different faces. */
--serif:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,"DejaVu Sans Mono",Consolas,monospace;
color-scheme:light;
/* ── surfaces and ink. Warm paper, warm near-black. ── */
--paper:#fbf8f2; --panel:#f4eee2; --card:#ffffff; --field:#ffffff;
--ink:#29241c; --ink-soft:#443d32; --muted:#6e6557; --muted-strong:#59503f;
--line:#e3daca; --line-soft:#ece5d6;
/* --field-border is SCOPED to form-control resting borders. --line itself
measures 1.20-1.43:1 against --field in both themes — fine for a card
edge or a divider, not enough for a control boundary, which needs 3:1
(WCAG 1.4.11). Reusing --sky here would fix the ratio but make a field's
resting and focused borders identical, trading this failure for a
2.4.7 one, so this is a new token rather than a --line retune or a
--sky reuse. Verified 3.60-4.24:1 against paper/panel/card/field. */
--field-border:#91794d;
/* ── the bands. Every number on the site, and nothing else. ── */
--good:#1e7a46; --mixed:#975e00; --long:#a84b2f; --zero:#716a62;
--proj:#6e675c; --proj-bg:#efe9dc;
/* ── the sky. Every piece of chrome, and nothing else. ── */
--sky:#2d5a7d; --sky-deep:#22455f; --sky-fg:#e9f1f7;
--link:var(--sky); --placeholder:#9b917f;
--btn-bg:var(--sky); --btn-fg:#f5f9fc;
--sheen:none;
/* --band is what every accented surface reads. Un-scored chrome inherits the
muted ink, which is the correct answer for chrome. */
--band:var(--muted-strong);
/* ── the six-stop score arc ──────────────────────────────────────────────
build/lib/pages.js bands at 85/60/35/20/5 and emits six .sc-* classes. The
spec has four bands. Six map onto four, so a score cannot invent a fifth
hue: exc and good are both green, long and rare are both clay. The one real
seam is at 35-39, which pages.js calls `mix` (amber) and the spec calls clay
— moving that threshold is a data-layer change and does not belong here. */
--s-exc:var(--good);
--s-good:var(--good);
--s-mix:var(--mixed);
--s-long:var(--long);
--s-rare:var(--long);
--s-no:var(--zero);
/* ── compatibility aliases ───────────────────────────────────────────────
build/lib/render.js, build/lib/viz.js, build/lib/pages.js and the four page
templates reference these names inline (var(--faint) in a span style,
var(--r-md) in a border-radius, and so on). They are kept as aliases onto
the tokens above so that a re-skin of this file cannot silently blank out an
SVG or a caption in a file it does not own. New rules should use the tokens
above. --gold/--green/--blue/--red are only ever read inside .plc and .rlc,
both of which redeclare them; they are aliased here so that nothing goes
undefined if that ever stops being true. */
--bg:var(--paper);
--bg-panel:var(--panel);
--bg-inset:var(--panel);
--ink-2:var(--ink-soft);
--ink-3:var(--muted);
--rule:var(--line-soft);
--rule-2:var(--line);
--low:var(--long);
--none:var(--zero);
--surface:var(--panel);
--edge:var(--line);
--edge-strong:var(--line);
--body:var(--ink-soft);
--dim:var(--ink-soft);
--faint:var(--muted);
--accent:var(--ink);
--brand:var(--sky);
--brand-deep:var(--sky-deep);
--brand-lift:var(--sky);
--sky-bright:var(--sky);
--gold:var(--mixed); --green:var(--good); --blue:var(--sky);
--amber:var(--mixed); --red:var(--long);
/* Interior-system-v1 port (28 Jul 2026): the masthead CTA pill and the
page-head glow want the same cyan/violet pair the dark palette already
carries under --sky. Light mode has no --cyan/--violet of its own, so
these are new tokens rather than a --sky retune — the pill still reads
as an accent rather than a link in both themes. Dark values are set
alongside --sky in :root.dark and its prefers-color-scheme twin. */
--cyan:var(--sky); --violet:#5b4a99;
--field-bg:var(--field);
--shadow:none;
--bg-glow-a:transparent; --bg-glow-b:transparent;
/* ── chart semantics — used by every visualization, no exceptions ────────
A chart line is not a score, so lines are INK, told apart by weight and dash
pattern and labelled at the line's end. The waffle's lit cells are the one
exception and they earn it: a lit cell is a count of equipped aircraft, so
it takes the green it would take as a number. */
--viz-equipped:var(--good);
--viz-empty:var(--panel);
--viz-mainline:var(--ink);
--viz-express:var(--muted);
--sys-starlink:var(--ink); --sys-leo:var(--muted); --sys-viasat:var(--muted-strong);
--sys-legacy:var(--muted); --sys-none:transparent;
/* radii. The Forecast has soft corners; the Plate had none. Kept as tokens
because render.js asks for var(--r-md) in an inline style. */
--r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px;
/* type scale. Body never drops below 16px — that is a spec line, not a taste. */
--fs-body:16px; --fs-small:14px; --fs-micro:12px;
}
:root.dark{
color-scheme:dark;
/* V5 THEME PORT (28 Jul 2026). Approved palette: design-competition/theme-v5.css.
Ground goes near-black, ink goes pure white, the chrome accent becomes the
cyan/violet pair, and the score bands get slightly brighter siblings. See
the --line note just below for the one value this port did NOT take
literally, and why. */
--paper:#050505; --panel:#0d0d0f; --panel2:#121216; --card:#121216; --field:#0d0d0f;
--ink:#ffffff; --ink-soft:#d3d3d8; --muted:#a6a6ad; --muted-strong:#c0c0c7;
/* The approved palette gives --line the hex #29292f. Measured against
--panel/--card that is ~1.3:1 — the exact invisible-border shape Option A
fixed on 27 Jul 2026 (raised from ~1.2:1 to ~3.2:1 for the card/board
frame, WCAG 1.4.11). Taking #29292f literally as --line would undo that
fix, so the approved hex is kept here as --line-soft instead (internal
row hairlines, no 3:1 floor), and --line gets a lighter neutral, #65656d,
which measures ~3.0-3.5:1 against panel/card/paper. --field-border
matches --line for the same reason (control boundary, not a hairline).
This token exists in TWO places (this block and the
@media(prefers-color-scheme:dark) twin below) — build/apitest.js asserts
they match, so a change here without its twin fails the build. */
--line:#65656d; --line-soft:#29292f;
--field-border:#65656d;
--good:#54f09b; --mixed:#ffd45a; --long:#ff698d; --zero:#87878f; --unknown:#85858e;
--proj:#c0c0c7; --proj-bg:#121216;
--sky:#29d8ff; --sky-deep:#0b2e38; --sky-fg:#c9f0fa;
--link:var(--sky); --placeholder:#6d6d75;
--cyan:#29d8ff; --violet:#926cff;
--btn-bg:#29d8ff; --btn-fg:#052029;
--sheen:inset 0 1px 0 rgba(255,255,255,.05);
--viz-empty:var(--panel);
}
@media (prefers-color-scheme:dark){
:root:not(.light){
color-scheme:dark;
--paper:#050505; --panel:#0d0d0f; --panel2:#121216; --card:#121216; --field:#0d0d0f;
--ink:#ffffff; --ink-soft:#d3d3d8; --muted:#a6a6ad; --muted-strong:#c0c0c7;
/* twin of :root.dark's --line/--line-soft/--field-border above; keep them
identical (build/apitest.js checks it). See that block for why --line
is #65656d rather than the approved palette's literal #29292f. */
--line:#65656d; --line-soft:#29292f;
--field-border:#65656d;
--good:#54f09b; --mixed:#ffd45a; --long:#ff698d; --zero:#87878f; --unknown:#85858e;
--proj:#c0c0c7; --proj-bg:#121216;
--sky:#29d8ff; --sky-deep:#0b2e38; --sky-fg:#c9f0fa;
--link:var(--sky); --placeholder:#6d6d75;
--cyan:#29d8ff; --violet:#926cff;
--btn-bg:#29d8ff; --btn-fg:#052029;
--sheen:inset 0 1px 0 rgba(255,255,255,.05);
--viz-empty:var(--panel);
}
}
/* ── the band map ─────────────────────────────────────────────────────────
Put a .sc-* class on any element and its whole subtree accents to that score.
[data-band] is the same switch under the name the older markup used. */
.sc-exc {--band:var(--s-exc)}
.sc-good{--band:var(--s-good)}
.sc-mix {--band:var(--s-mix)}
.sc-long{--band:var(--s-long)}
.sc-rare{--band:var(--s-rare)}
.sc-no {--band:var(--s-no)}
[data-band="good"] {--band:var(--good)}
[data-band="mixed"]{--band:var(--mixed)}
[data-band="low"] {--band:var(--long)}
[data-band="none"] {--band:var(--zero)}
.s-good{color:var(--good)} .s-mixed{color:var(--mixed)}
.s-long{color:var(--long)} .s-zero{color:var(--zero)}
/* ── base ─────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
background:var(--paper);
color:var(--ink);
font:400 var(--fs-body)/1.55 var(--sans);
-webkit-font-smoothing:antialiased;min-height:100vh;
-webkit-tap-highlight-color:transparent;
/* Every page opens on a thin rule of sky at its top edge. On the homepage the
extension banner sits directly under it in the same colour, so the rule
reads as the banner's top edge there. */
border-top:4px solid var(--sky-deep);
}
/* Links are the sky and they are underlined. An underline that thickens on
hover is the whole interaction; there is no colour change, because the colour
already means "this is chrome you can press". */
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
/* Tracking is per-size, not one value. Inter needs far tighter tracking than
Source Serif 4 did at display sizes and roughly the same at body sizes, so a
single -.012em would have left every heading looking loose after the face
change. The steps below match the approved system: -.055em at 36-60px,
-.035em at 22px, -.03em at 19px. */
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:750;
letter-spacing:-.03em;line-height:1.14}
h1{letter-spacing:-.045em}
h2{letter-spacing:-.038em}
/* THE SPEAKING VOICE. Anything that sounds like a colleague talking takes the
serif; anything that reports takes the sans. Read the block aloud if unsure. */
.say,.lede,.sec-lede,.callout p,.moves b,dl.loop dt{font-family:var(--serif)}
.lede,.sec-lede{font-size:1.06rem;color:var(--ink-soft);max-width:44rem}
.lede b,.sec-lede b{color:var(--ink);font-weight:700}
.say{font-size:1.18rem;line-height:1.5;margin:.35rem 0 .6rem;max-width:38rem}
/* THE FIGURES. Serif, tabular by default in this face, so a digit does not
change width when it changes value. If you add a class that holds a large
number, add it here rather than setting font-family locally. */
.n,.sco,.big,.v,.fa-big,.chip .n,.stat .n,.kv .v,.scorenum .n,.proj .pv,
.usrow .sco{
font-family:var(--serif);font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1}
/* THE REPORTING NUMERALS. Sans, tabular. Table cells, ranks, counts, captions. */
.num,.ct,.dn,.rank,.tblcap,.fa-as,td.num,th.num,input{
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Literal code: API paths, formula blocks. The only monospace on the site. */
.mono,.code{font-family:var(--mono)}
/* The column is a column, not a ruled margin. The Plate drew hairlines and
ticks down both edges of .wrap; that was the plate idiom and it left with it. */
/* ONE right edge (round seven, note 2). The wrap narrows to 58rem and prose,
small graphics and both boards all fill it: at 1280 that is one 888px line
box for everything in main. The boards still fit — their scroll floor is
52rem — and single-sentence ledes carry the width; anything longer than two
lines is structured (board footers, release states) rather than set as a
raw paragraph. The max-width:none group below is the other half of the same
note. */
/* 1240px since 28 Jul 2026, was 58rem/928px. The homepage shipped at 1240 and
the interiors did not, so the two halves of the site had visibly different
canvases while sharing every token. Round 17 measured it: 1240 vs 928 shell,
888px main.
Widening the SHELL is not the same as widening the TEXT, and the group below
is what keeps them apart: data (tables, boards, grids, charts) gets the full
1240, prose gets a measure. Without that second half this rule would set
120-character lines, which is worse than the narrow canvas it replaced. */
.wrap{max-width:var(--max,77.5rem);margin:0 auto;position:relative;
padding:0 max(1.25rem,env(safe-area-inset-right)) 0 max(1.25rem,env(safe-area-inset-left))}
main .lede,main .sec-lede,main .footnote,main .skycap,main .src,
main .prov,main ul.vstate,main .board-note,main .pointer,main .extfine,
.rankb .sortcap p,.sysrows,.herocall{max-width:none}
/* THE READING MEASURE, and it is the other half of the 1240px wrap above.
`ch` not `rem`, so the cap follows the type rather than the root size. 74ch
lands around 66-70 characters of running text in Inter, which is the top of
the comfortable band; going wider is what makes a wide canvas feel like a
regression rather than an improvement.
Scoped to the direct text children of a section, so it reaches paragraphs and
ledes and NOT the things that legitimately want 1240: tables, boards, grids,
charts, card rows, the rollout curve. Those are data, and data reads better
wide. Anything that needs to opt out can set `max-width:none` locally, and
the group directly above is the existing list of things that already do. */
main p,main .lede,main .sec-lede,main .say,main dl.loop dd,main .callout p{max-width:74ch}
/* The hero used to end on a 96px chart and a caption, so the standard section
rhythm below it (51px margin + 37px padding) read as normal. It now ends on
the bordered extension card, which already separates it from what follows, so
the same rhythm plus the section's own rule left 100px of dead air between
the card and "THE BIG 4". Scoped to the hero's next sibling: every other
section on every page keeps the site rhythm. */
header.hero+.blk{margin-top:1.4rem;padding-top:1.6rem}
.prose{max-width:44rem}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The skip link. Hidden exactly like .vh until it takes focus, so it costs the
page nothing at rest; it gets its own class rather than reusing .vh because
.vh is also used for labels that must NEVER become visible. Colours are the
button pair, which measures 6.9:1 in both themes. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:.5rem;left:.5rem;width:auto;height:auto;overflow:visible;
clip:auto;z-index:60;padding:.45rem .8rem;border-radius:var(--r-md);
background:var(--btn-bg);color:var(--btn-fg);text-decoration:none}
/* (0,2,1) on purpose. The bare `.needs-js{display:none}` this replaced was
(0,1,0), so a rule on the wrapped element such as `.filters{display:flex}`
outranked it and left a JS-only control showing with script off.
There was an `html.js .needs-js{display:revert}` partner here until 27 Jul
2026. It was redundant: `html:not(.js)` and `html.js` can never both match,
so with script on nothing hides the element and it already keeps whatever
display its own rules give it. It was also harmful. At (0,2,1) it outranked
`.filters{display:flex}` and `.rlc-nav{display:flex}` at (0,1,0), and
`revert` drops a div to the UA default `block`, which collapsed the Rank-by
rows and the reel arrows for every reader running JavaScript, and made their
`gap` inert. Do not add an enable rule back. Put layout on the element and
let the disable rule lapse. `build/apitest.js` asserts this rule is absent. */
html:not(.js) .needs-js{display:none}
html.js .no-js-only{display:none}
/* ── the masthead ─────────────────────────────────────────────────────────
Orbit mark, serif wordmark, nav, the theme switch and the datechip. Every page
carries it, and the date in it comes from united/data.json by way of
H.page({updated}). Nothing here is hard-coded; a stale date is worse than
no date. */
header.site{border-bottom:1px solid var(--line);background:var(--paper)}
/* ── the header stays with you (round seven, note 18) ─────────────────────
position:sticky is pure CSS, so the sticky part works with script off. The
shrink is a JS enhancement: site.js adds html.hdr-c past 170px of scroll and
removes it under 40px — a hysteresis gap ~3x the height the header gives up,
so the change can never re-cross its own trigger and flicker. */
header.site{position:sticky;top:0;z-index:40}
/* ── ONE header-height token (Phase 1c) ──────────────────────────────────
The masthead consumes it as a min-height and every sticky table heading
consumes it as its offset, so the two read the same number and cannot
drift; anchor targets clear both through the scroll-margin-top on [id]
above. Values are the measured tallest masthead per width band on the
built pages (wordmark row + datechip row + border), with the compact
html.hdr-c state — the state a scrolled reader is actually in — getting
its own smaller value so a stuck heading does not float mid-air. */
:root{--sticky-header-height:6.6rem}
@media(max-width:880px){:root{--sticky-header-height:7rem}}
@media(max-width:600px){:root{--sticky-header-height:7.75rem}}
html.hdr-c{--sticky-header-height:4.4rem}
@media(max-width:880px){html.hdr-c{--sticky-header-height:4.7rem}}
.masthead{min-height:calc(var(--sticky-header-height) - 1px)}
.masthead{transition:padding .22s ease}
.wordmark{transition:font-size .22s ease}
.datechip{max-height:2.6rem;overflow:hidden;transition:max-height .22s ease,opacity .18s ease}
html.hdr-c .masthead{padding-top:.5rem;padding-bottom:.5rem}
html.hdr-c .wordmark{font-size:1.08rem}
html.hdr-c .datechip{max-height:0;opacity:0}
@media(prefers-reduced-motion:reduce){.masthead,.wordmark,.datechip{transition:none}}
/* anchors land clear of the sticky header */
html{scroll-padding-top:calc(var(--sticky-header-height) + .5rem)}
[id]{scroll-margin-top:calc(var(--sticky-header-height) + .5rem)}
/* ── the phone menu is a checkbox and a label, so it opens script-free.
Its media rules live in the 600px block of the RESPONSIVE section, AFTER the
base `.masthead nav` rule they override — order is what wins at equal
specificity, and an earlier `display:none` would lose to the later flex. */
.nav-cb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-btn{display:none}
/* padding-top/bottom, never the shorthand. .masthead is also a .wrap, and
`padding:1rem 0` silently zeroed the horizontal padding .wrap provides, so
the wordmark, nav and datechip sat flush to the screen edge while the body
stayed inset. Below 431px a later .wrap rule happened to restore it, which
is exactly why it hid: every narrow width I tested looked correct. */
.masthead{display:flex;align-items:baseline;gap:.6rem 1.25rem;flex-wrap:wrap;
padding-top:1rem;padding-bottom:1rem}
.wordmark{font-family:var(--sans);font-size:1.3rem;font-weight:850;letter-spacing:-.03em;
color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark:hover{text-decoration:none}
/* The orbit mark. Inline SVG drawn in currentColor; this sets the colour, and
the colour is the sky, because the mark is chrome. It is inline in the
document so the custom property resolves — inside an it would silently
fall back to black. */
.wordmark .mk{color:var(--sky);vertical-align:-.12em;margin-right:.35rem}
/* The 26 Jul pivot: underlined default-blue nav read as nobody decided this.
Small-caps wordmarks now, hover fill, no underline. The Extension link is the
one FILLED element because it is the only nav item that is an action rather
than a place — still one pitch sitewide, just dressed as what it is. */
.masthead nav{margin-left:auto;display:flex;gap:.2rem;font-size:.92rem;flex-wrap:wrap;
align-items:center}
/* 12px floor (Phase 1c), and the box stays a single line box: the layout
assert reads bounding-box height against line-height to catch words split
across lines, so a one-line label carries its padding inside an explicit
tall line-height rather than around a short one. */
.masthead nav a{color:var(--muted-strong);text-decoration:none;font-size:.75rem;
font-weight:650;letter-spacing:.11em;text-transform:uppercase;padding:.35rem .65rem;
line-height:2;white-space:nowrap;border-radius:8px}
.masthead nav a:hover{color:var(--ink);background:var(--bg-inset);text-decoration:none}
.masthead nav a[aria-current="page"]{color:var(--ink)}
/* THE CTA PILL — ported from the approved interior system
(design-competition/interior-system-v1.html). One filled pill in the nav,
gradient cyan → violet, matching the homepage's own `.pill.primary`. It is
the only nav item styled as an action; its href always comes from H.EXT,
never a literal store URL, so a store-side redirect only has to be fixed
in one constant. */
/* `.masthead .mast-cta`, not `.masthead nav .pill`: the pill moved OUT of