/* ==========================================================================
corporate-portal — design tokens
==========================================================================
Extracted from style.css (1757 lines) and the 8 HTML pages on 2026-09-22.
Every page loads this file before style.css:
It is the site's only source of typefaces — the @font-face block below
replaced the Google Fonts imports. style.css and print.css consume these
properties through var(), and check-tokens fails a reference to one that
is not defined.
Every token carries the number of occurrences it was extracted from, so a
real brand color is distinguishable from a one-off. Counts marked
"css+html" span both the stylesheet and the inline SVG in the pages.
========================================================================== */
/* ==========================================================================
Typefaces — self-hosted
==========================================================================
Built by scripts/build-fonts.py from the nixpkgs google-fonts tree. Both
families are OFL/Apache, so serving them ourselves is purely a delivery
change.
The site previously fetched these from Google's CDN through two
render-blocking @import statements, which transmits every visitor's IP
before the page renders. Self-hosting removes that and is faster: four
same-origin files, 49 KB total, against two blocking round-trips to a
third party.
Only the weights the stylesheet uses are built — Poppins 400/500/600 and
Inter 600. The old imports also fetched Open Sans (referenced by nothing),
Inter 400/500/700/800 and Poppins 700/800.
Each family has a -fallback face whose metrics are computed from the real
font tables, so `font-display: swap` swaps without moving the layout.
Regenerate both the files and this block with:
nix run .#fonts
========================================================================== */
@font-face {
font-family: "Poppins";
src: url("fonts/poppins-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
src: url("fonts/poppins-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("fonts/inter.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("fonts/inter-italic.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: italic;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Literata";
src: url("fonts/literata.woff2") format("woff2-variations");
font-weight: 200 900;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Literata";
src: url("fonts/literata-italic.woff2") format("woff2-variations");
font-weight: 200 900;
font-style: italic;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
src: url("fonts/jetbrains-mono.woff2") format("woff2-variations");
font-weight: 100 800;
font-style: normal;
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins-fallback";
src: local("LiberationSans"), local("Arial"), local("Helvetica");
size-adjust: 104.29%;
ascent-override: 100.68%;
descent-override: 33.56%;
line-gap-override: 9.59%;
}
@font-face {
font-family: "Inter-fallback";
src: local("LiberationSans"), local("Arial"), local("Helvetica");
size-adjust: 103.33%;
ascent-override: 93.76%;
descent-override: 23.34%;
line-gap-override: 0%;
}
@font-face {
font-family: "Literata-fallback";
src: local("LiberationSerif"), local("Georgia"), local("Times New Roman");
size-adjust: 95.96%;
ascent-override: 122.65%;
descent-override: 32.1%;
line-gap-override: 0%;
}
@font-face {
font-family: "JetBrains Mono-fallback";
src: local("LiberationMono"), local("DejaVu Sans Mono"), local("Courier New");
size-adjust: 104.1%;
ascent-override: 97.98%;
descent-override: 28.82%;
line-gap-override: 0%;
}
:root {
/* ------------------------------------------------------------------------
COLOR — brand
The accent identity. Cyan is the single most-used color in the project
after white, and appears in four different spellings today:
#12dddd (css) · #12DDDD (html) · rgba(18, 221, 221, 0.5) · via icon SVGs.
---------------------------------------------------------------------- */
--color-cyan: #12dddd; /* 92 uses (css+html) — primary brand */
--color-cyan-dark: #1ab7b7; /* 1 use — .headline__button:hover */
--color-mint: #7bffd1; /* 9 uses (css+html) — secondary accent, hover */
--color-green: #01e898; /* 3 uses — mint's pressed state, always paired */
--color-indigo: #0f04c4; /* 17 uses — vivid accent, links and rules */
/* ------------------------------------------------------------------------
COLOR — ink ramp
A dark navy-to-violet range used for grounds and headings. These read as
one scale, darkest first. --color-navy-soft / --color-navy are the
base/hover pair on .services-item (style.css:451 / :465).
---------------------------------------------------------------------- */
--color-ink: #010121; /* 18 uses — darkest; text and grounds */
--color-navy: #020856; /* 5 uses — deep ground */
--color-navy-soft: #1a1b36; /* 1 use — .services-item base */
--color-violet: #100b46; /* 2 uses — gradient stops only (services, band) */
/* ------------------------------------------------------------------------
COLOR — neutrals
White is written four ways across 355 occurrences: #fff (9), #ffffff (2),
white (2), and fill="white" (342 — every page's inline logo SVG).
Black is written three ways across 17.
---------------------------------------------------------------------- */
--color-white: #ffffff; /* 355 uses (css+html) */
--color-black: #000000; /* 17 uses (css+html) — body text, style.css:26 */
--color-surface: #f4f4f7; /* 3 uses — light section grounds */
--color-hairline: #e7e8ec; /* 13 uses — every rule and panel edge */
--color-muted: #716f6f; /* 1 use — .date (style.css:1025) */
--color-blush: #fff2f2; /* 2 uses — warm off-white, used as TEXT color */
--color-teal-deep: #061b1b; /* 2 uses — dropdown rules */
--color-taupe: #4b3c3c; /* 1 use — .form-input border (style.css:1280) */
/* ------------------------------------------------------------------------
COLOR — semantic
---------------------------------------------------------------------- */
/* Was #ea0b4e, which measured 4.51:1 on white — clearing 4.5:1 by 0.01 —
and 4.11:1 on --color-surface, where it failed. Three --color-surface
grounds exist and form errors can land on any of them. Darkened with the
hue preserved: 5.41:1 on white, 4.93:1 on surface. */
--color-danger: #d40043; /* 3 uses — form error text and underline */
/* ------------------------------------------------------------------------
CONTRAST — which colors may carry text, and on what
Measured against WCAG 2.2 SC 1.4.3 (4.5:1 for body text, 3:1 at 24px+).
The palette is strong on dark grounds and weak on light ones:
white / blush / cyan / mint on ink, navy, navy-soft ....... 10.6–20.4:1
black, ink, indigo, taupe on white ........................ 10.4–21.0:1
danger on white ............................................... 4.51:1
These FAIL as text on any light ground and must stay icon fills,
strokes, borders, or text on the dark ramp:
cyan on white ................................................. 1.69:1
mint on white ................................................. 1.23:1
green on white ................................................ 1.62:1
--color-muted was #a5a3a3, which measured 2.51:1 on white and shipped
as the blog post date. It is now #716f6f: 4.99:1 on white and 4.55:1
on --color-surface, so it passes on either light ground.
---------------------------------------------------------------------- */
/* ------------------------------------------------------------------------
COLOR — alpha and gradient
Both rgba() values in the project resolve to tokens above:
rgba(18, 221, 221, 0.5) is exactly --color-cyan at 50%
rgba(245, 245, 253, 0.96) is a near-white scrim (#F5F5FD at 96%)
Written here in modern space-separated form.
---------------------------------------------------------------------- */
--color-cyan-50: rgb(18 221 221 / 0.5); /* 1 use — style.css:477 */
--color-scrim: rgb(245 245 253 / 0.96); /* 1 use — style.css:825 */
/* The home hero's veil over its photograph (style.css, .picture--1). The
photograph had nothing over it: the copy read only because the sky
happens to be dark, and the stars ran through the description. Ink,
heavy behind the copy on the left and thinning toward the silhouette on
the right, plus a floor under the founder's record along the bottom edge.
Contrast of the text over it is measured from the screenshot by the
stardevs-visual capture probes, not by check-contrast, which cannot see
a photograph. */
--gradient-hero:
linear-gradient(
90deg,
rgb(1 1 33 / 0.88) 0%,
rgb(1 1 33 / 0.72) 45%,
rgb(1 1 33 / 0.15) 85%
),
linear-gradient(0deg, rgb(1 1 33 / 0.8) 0%, rgb(1 1 33 / 0) 40%);
/* The dark sections' ground (style.css, .services).
Angle and stops are Figma exports — note the 108.26% stop runs past the
end of the gradient line, which is legal but unintentional. */
--gradient-services: linear-gradient(
0.32deg,
var(--color-violet) 9.4%,
var(--color-ink) 65.67%,
var(--color-black) 108.26%
);
/* The masthead band's ground (.headline--band). On --gradient-services the
band opened at #000007 under the #010121 header, which an OLED phone
shows as pixels off, a hole under the header; and its violet foot,
#100b46, met the next dark section's #000007 top as a hard step, at every
width (measured 2026-10-26 on a Pixel 10 emulation). This one starts on
the header's ink and ends on the black the next section starts on, with
the violet between, so neither edge shows. */
--gradient-band: linear-gradient(
180deg,
var(--color-ink) 0%,
var(--color-violet) 65%,
var(--color-black) 100%
);
/* ------------------------------------------------------------------------
TYPOGRAPHY — families
Poppins is the real body face (style.css:24, inherited by everything).
Inter is used exactly once, at weight 600 (style.css:914).
Both declarations below carry a full fallback stack. Two of the five
font-family declarations in style.css today have NO fallback at all
(style.css:914 `"Inter"`, style.css:1285 `"Poppins"`), so a failed
webfont drops those elements to the browser default rather than to a
comparable system face.
---------------------------------------------------------------------- */
/* Four roles, measured rather than assumed.
Inter sets interface and marketing text: 2,345 kern pairs, a variable
optical-size axis, and the features this site actually uses (calt, case,
ccmp, cpsp, frac, kern, mark, mkmk, pnum, tnum, zero — read off the
shipped woff2).
Literata sets article prose. A screen-optimised reading serif earns its
keep over several thousand words in a way it does not in a nav bar.
Poppins carries the brand at display sizes only. Measured: its shipped
subsets have an empty GSUB and an empty GPOS feature list — zero kern
pairs — so it is not a text face and cannot be made into one. It is also
static upstream, so it has no weight or optical-size axis.
JetBrains Mono backs , which previously had no chosen face at all
and resolved to whatever fontconfig offered. */
--font-sans:
"Inter", "Inter-fallback", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-serif:
"Literata", "Literata-fallback", Georgia, "Times New Roman", serif;
--font-display:
"Poppins", "Poppins-fallback", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono:
"JetBrains Mono", "JetBrains Mono-fallback", ui-monospace, "SF Mono", Menlo,
Consolas, monospace;
/* Retained so existing references keep resolving; same stack as --font-sans. */
--font-alt: var(--font-sans);
/* ------------------------------------------------------------------------
TYPOGRAPHY — measure and leading
Line length and leading are the two settings that decide whether a page
reads. Nothing on this site constrained either: prose ran the full
viewport width, and every line-height was a px value bolted to a px
font-size, so nothing scaled together.
65-75 characters per line is the range the eye tracks without losing its
place on the return sweep.
Expressed in em, not ch. ch is the advance of "0", which in Inter is far
wider than the average character of running text — 68ch measured 90
characters per line, not 68 — and the ratio between the two drifts with
font-size, so a ch measure gives different line lengths at different
sizes. Average character width is a stable fraction of the em (~0.42 for
this face in mixed-case prose), so an em measure holds across sizes.
Calibrated against real rendered text.
---------------------------------------------------------------------- */
--measure: 29em; /* running prose, ~68 characters per line */
--measure-wide: 34em; /* UI text, cards, list items */
--measure-narrow: 22em; /* pull quotes, captions, standfirsts */
/* The articles are technical writing, not prose: argument interleaved with
three-column tables, code and a diagram. The 66-75 character band is
calibrated for continuous literary text and is too tight here — it left
522px of text stranded in a 980px column while every table and figure
beside it ran the full width.
40em is ~91 characters at 18px Literata, measured in the browser rather
than derived. That is the band technical documentation actually uses
(MDN, Stripe, the Rust book all sit well above 75), and it lets the prose
share a left edge with the figures instead of floating between them. */
--measure-technical: 40em;
/* Unitless, so they scale with whatever font-size they land on. */
--leading-tight: 1.15; /* display sizes, 40px and up */
--leading-snug: 1.3; /* headings */
--leading-normal: 1.55; /* running text */
--leading-loose: 1.7; /* small print and captions */
/* Vertical rhythm derived from body leading (16px x 1.55 = 24.8px), so
paragraph and heading spacing land on a consistent beat rather than the
mix of 15/20/30/40px the stylesheet grew. */
--rhythm: 1.55rem;
--rhythm-half: 0.775rem;
--rhythm-double: 3.1rem;
/* ------------------------------------------------------------------------
TYPOGRAPHY — size scale
All 14 sizes in use, 100% px today. The --*-rem mirror is provided as a
migration target: px font sizes do not respond to the reader's browser
font-size setting (WCAG 2.2 SC 1.4.4 Resize Text). Base is 16px.
---------------------------------------------------------------------- */
--text-xs: 12px; /* 3 uses — eyebrow/label, paired with --tracking-label */
--text-2xs: 13px; /* 2 uses */
--text-sm: 14px; /* 1 use */
--text-base: 16px; /* 5 uses — body (style.css:25) */
--text-md: 18px; /* 5 uses */
--text-lg: 20px; /* 7 uses */
--text-xl: 22px; /* 1 use */
--text-2xl: 24px; /* 5 uses */
--text-3xl: 26px; /* 3 uses */
--text-4xl: 30px; /* 9 uses — most common heading size */
--text-5xl: 34px; /* 1 use */
--text-6xl: 40px; /* 4 uses */
--text-7xl: 50px; /* 5 uses — display */
--text-8xl: 54px; /* 1 use */
/* ------------------------------------------------------------------------
TYPOGRAPHY — heading roles
Three roles, so a heading's size says what it is rather than where it
was written. On a phone the page title was 30px while About's and the
contact block's section headings stayed 40px, an inverted scale
(docs/visual-assessment/2026-10-20-mobile.md, finding 4); Careers set
its section headings at 50px, the page title's own size, at 768.
title the page's h1 ........ 50 · 40 at <=1024 · 34 at <=425
section an h2 that opens a part of the page ............. 30
subsection an h2/h3 inside one (the article's, a practice) . 26 · 24 at <=768
Section is 30 at every width: the step down the service details already
took from a 50px title, and the one every phone width can keep under the
title. The breakpoint values are set once, in the @media blocks after
this :root; no rule overrides a role's size. Poppins stays at 30px and
up, so the title and section roles may use it and subsection may not
(check-type-roles reads every value a role takes). */
--type-title: var(--text-7xl);
--type-section: var(--text-4xl);
--type-subsection: var(--text-3xl);
--text-xs-rem: 0.75rem;
--text-2xs-rem: 0.8125rem;
--text-sm-rem: 0.875rem;
--text-base-rem: 1rem;
--text-md-rem: 1.125rem;
--text-lg-rem: 1.25rem;
--text-xl-rem: 1.375rem;
--text-2xl-rem: 1.5rem;
--text-3xl-rem: 1.625rem;
--text-4xl-rem: 1.875rem;
--text-5xl-rem: 2.125rem;
--text-6xl-rem: 2.5rem;
--text-7xl-rem: 3.125rem;
--text-8xl-rem: 3.375rem;
/* ------------------------------------------------------------------------
TYPOGRAPHY — weights
Only three weights are used. Note that the @import at style.css:1 also
fetches Inter 400/500/700/800 and Poppins 700/800, none of which any rule
references.
---------------------------------------------------------------------- */
--weight-regular: 400; /* 7 uses */
--weight-medium: 500; /* 3 uses */
--weight-semibold: 600; /* 13 uses — most common */
/* renders at 700 through the UA stylesheet on every page; the
token vocabulary could not express it until now. Inter and Literata both
cover it from their wght axis; Poppins does not ship it. */
--weight-bold: 700;
/* ------------------------------------------------------------------------
TYPOGRAPHY — line height
All 18 values in style.css are px bolted to a px font-size, so nothing
scales together. The unitless ratios below are the migration target.
The unitless ratios live in the measure-and-leading block above; what
follows is the px ladder the stylesheet still uses at specific sizes.
---------------------------------------------------------------------- */
--leading-16: 16px;
--leading-18: 18px;
--leading-20: 20px;
--leading-24: 24px; /* body */
--leading-26: 26px;
--leading-27: 27px;
--leading-28: 28px; /* 6 uses */
--leading-30: 30px;
--leading-40: 40px; /* 5 uses */
--leading-43: 43px;
--leading-45: 45px;
--leading-60: 60px;
--leading-65: 65px; /* 7 uses — pairs with --text-7xl */
--leading-70: 70px;
/* ------------------------------------------------------------------------
TYPOGRAPHY — tracking
One value, used twice, both times on the same uppercase 12px eyebrow
treatment (style.css:474 and :1193). The style is duplicated rather than
shared — a good first candidate for a real component class.
---------------------------------------------------------------------- */
--tracking-label: 0.1em;
/* ------------------------------------------------------------------------
SPACING
A clean 5px scale drawn from the values that actually recur. Counts are
across all padding/margin declarations.
---------------------------------------------------------------------- */
--space-1: 5px; /* 8 uses */
--space-2: 10px; /* 15 uses */
--space-3: 15px; /* 6 uses */
--space-4: 20px; /* 13 uses */
--space-5: 25px; /* 2 uses */
--space-6: 30px; /* 9 uses */
--space-8: 40px; /* 17 uses — most common */
--space-10: 50px; /* 9 uses */
--space-12: 60px; /* 5 uses */
--space-16: 80px; /* 2 uses */
--space-20: 100px; /* 2 uses */
--space-24: 120px; /* 2 uses */
/* Drift — off-scale values measured straight out of Figma, left untokenized
deliberately so they stay visible as cleanup targets:
104px (5) · 96px (2) · 90px (3) · 46px (3) · 45px (4) · 42px (2)
36px (2) · 24px (4) · 18px (2) · 12px (2) · 9px (1) · 8px (1)
and compound one-offs such as `49px 1px 42px 44px` and `66px 0 104px`. */
/* The 44px touch-target minimum (WCAG 2.5.5 AAA, and the de facto platform
floor below it). Not on the --space-* scale: it sizes a tap target's hit
area, not a gap between elements. */
--touch-target: 44px;
/* ------------------------------------------------------------------------
BORDERS
Widths and the colors they are drawn in. All borders are `solid`.
---------------------------------------------------------------------- */
--border-1: 1px; /* 11 uses */
--border-2: 2px; /* 2 uses */
--border-3: 3px; /* 2 uses */
--border-style: solid;
/* ------------------------------------------------------------------------
LAYOUT
---------------------------------------------------------------------- */
--container-max: 1260px;
/* The side gutter every container keeps, and so the left edge the logo,
the band and every section share. 10px on wider screens; 15px at 768 and
below (the @media block after this :root). Phones had six left edges at
390 — 10, 15, 30, 32, 37 and 59 — because the band used the container's
10px, the services sections their own 15px, and About and the contact
block padded their sections on top of the container
(docs/visual-assessment/2026-10-20-mobile.md, finding 5). */
--gutter: var(--space-2);
/* The chrome's container from 921 to 1024px, and so the column the menu
drawer's rows share with the logo there. */
--container-tablet: 855px; /* 2 uses */
/* Not a design value. index.js overwrites it on the menu drawer with the
header's measured bottom edge, because the header is static and a page
scrolled a little has moved that edge. Declared here so check-tokens can
still prove every var() in style.css resolves. */
--drawer-top: 0px;
/* The blog index's article column — a scanning list held to a readable
width inside the wider container. */
--container-list: 960px; /* 2 uses — .information-list, .information__next */
/* The article's right rail. Wide enough for the byline portrait plus a
name that wraps once, and for a download button to sit on its own line;
narrow enough that the text measure beside it is still centred rather
than shouldered aside. Not on the --space-* scale, which stops at 120px
because it describes gaps rather than columns. */
--article-rail: 220px;
/* ------------------------------------------------------------------------
MOTION
Originally one duration written three different ways across five
declarations — `0.5s`, `all 0.5s`, `ease-in-out 0.5s`. Unified here, and
shortened from 500ms to 200ms: half a second is sluggish for UI feedback
such as the burger morph.
---------------------------------------------------------------------- */
--duration-base: 0.2s;
--ease-base: ease-in-out;
}
/* The only tokens that change with the viewport: the gutter and the heading
roles. Each value is set here once, so style.css never re-states a size or
a gutter inside its own breakpoints. */
@media (max-width: 1024px) {
:root {
--type-title: var(--text-6xl);
}
}
@media (max-width: 768px) {
:root {
--gutter: var(--space-3);
--type-subsection: var(--text-2xl);
}
}
@media (max-width: 425px) {
:root {
--type-title: var(--text-5xl);
}
}
/* ==========================================================================
PROPOSED — not used anywhere in the site today
==========================================================================
The audit found ZERO occurrences of border-radius, box-shadow, text-shadow
and gap in all 1757 lines of style.css. The site is deliberately flat and
square-cornered, and every gap between elements is margin or padding.
Nothing below was extracted — these are starter scales so the system has
somewhere to grow. Adopting any of them is a visual design decision, not a
refactor. Delete this block if the flat treatment is intentional and final.
========================================================================== */
:root {
/* PROPOSED — no rounded corners exist in the site today */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-pill: 999px;
/* PROPOSED — no elevation system exists in the site today.
Tinted toward the ink ramp rather than neutral black, so shadows read as
part of this palette. */
--shadow-1: 0 1px 2px rgb(1 1 33 / 0.08);
--shadow-2: 0 2px 8px rgb(1 1 33 / 0.1);
--shadow-3: 0 8px 24px rgb(1 1 33 / 0.12);
/* PROPOSED — flex/grid gap, to replace margin-based spacing over time.
Aliases the real spacing scale rather than inventing new values. */
--gap-sm: var(--space-2);
--gap-md: var(--space-4);
--gap-lg: var(--space-8);
}
/* ==========================================================================
BREAKPOINTS — reference only
==========================================================================
Custom properties cannot be used in @media conditions, so these are
documented here rather than tokenized. 30 media queries exist in style.css,
written inline within each section rather than grouped.
1024px 10 queries mini-desktop matches DEVICES.mini_desktop
768px 8 queries tablet matches DEVICES.tablet
425px 10 queries mobile matches DEVICES.mobile
The ladder agrees with the DEVICES object in index.js:11-16.
Two one-offs break it, both inside the NAV section:
920px style.css:332
630px style.css:338
========================================================================== */