/* OUTFIT, SELF-HOSTED.
Replaces the fonts.googleapis.com stylesheet that used to sit in the .
That was a RENDER-BLOCKING THIRD-PARTY REQUEST, so first paint tracked
Google's response time one for one — measured on /contact.html by delaying
that one request and nothing else: FCP 272ms at 0s delay, 1092ms at 1s,
3076ms at 3s. A blank white page for however long a third party took to
answer, on all 15 pages, with every one of the site's own assets already on
disk. Its two origins came out of the CSP in the same change.
ONE FILE PER UNICODE RANGE, NOT ONE PER WEIGHT. Outfit is a variable font, so
Google served the same woff2 for every weight it listed; `font-weight:200 700`
declares that range to the browser and the whole design's weights come out of
one download. Declaring separate 300/400/500/600 faces against this file would
fetch it four times.
The `unicode-range` values are Google's own, kept verbatim, so a browser still
fetches only the subset it needs to paint: a page with no accented characters
never asks for latin-ext at all. Dropping the ranges would make both files
mandatory on every page.
THERE IS DELIBERATELY NO FOR THESE, and it is not an
oversight — one was written, measured, and taken back out. A preloaded font is
fetched at high priority, which on a slow link puts 32KB in front of the
render-blocking stylesheet and delays FIRST PAINT. Median FCP over three runs,
Fast 3G at 1440px: /contact.html 776ms with the preload against 620ms without,
/services/ 944ms against 732ms — 156 to 212ms of extra blank screen bought
nothing but a shorter swap window, and `font-display:swap` already paints
every word immediately in the fallback face. Do not add one back without
re-running that A/B. */
@font-face{
font-family:"Outfit";font-style:normal;font-weight:200 700;font-display:swap;
src:url(/assets/fonts/outfit-latin-ext.woff2) format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"Outfit";font-style:normal;font-weight:200 700;font-display:swap;
src:url(/assets/fonts/outfit-latin.woff2) format("woff2");
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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
--red:#d60027; --red-dark:#a8001f; /* logo hue 349°, darkened to clear AA */
--ink:#1c1714; --ink-soft:#3a312b;
--muted:#6b6058; /* darkened from the original tone — that one failed AA on sand */
--line:#e0d6cb; --sand:#f3eee8; --warm:#ebe4db;
--sans:"Outfit",system-ui,-apple-system,sans-serif;
--s1:8px;--s2:14px;--s3:22px;--s4:34px;--s5:52px;--s6:78px;--s7:108px;
/* THE NAV BAND'S HEIGHT, DERIVED RATHER THAN TYPED. The band is
`position:sticky` now, so it occupies its own space in the flow and no
page has to reserve room for it — that reservation, and the phone bug it
was fixing (the overlay nav printing on top of the hero h1), are both gone
with the overlay. What still needs the number is SCROLL POSITION: a sticky
bar covers the top of whatever an in-page jump lands on, so #content and
any :target carry a scroll-margin of exactly one band. A second hardcoded
80 would be free to drift the moment the logo or the padding changed, and
the failure mode of that drift is a heading hidden under the bar. These
two are the only place either number lives — .nav's vertical padding and
.nav-logo's height read them directly, and the phone values below override
both inputs so --nav-h recomputes on its own. */
--nav-pad-y:14px; --nav-logo-h:52px;
--nav-h:calc(var(--nav-logo-h) + var(--nav-pad-y) * 2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--sand);color:var(--ink);font-family:var(--sans);
font-size:17px; /* was 15px */
line-height:1.7; /* was 1.55 */
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2{font-family:var(--sans);font-weight:300;letter-spacing:-.025em;line-height:1.04;}
h3{font-family:var(--sans);font-weight:400;letter-spacing:-.015em;line-height:1.14;}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:#fff}
/* Brand palette: the logo's own hue (349°). #e4002b itself is 4.20:1 on sand,
under the AA floor for 13px labels, so the accent is darkened to #d60027 (4.68:1).
The logo keeps its true colour; only type and fills use the accent. */
/* SKIP LINK — WCAG 2.4.1 Bypass Blocks (Level A). Every page opens with the
same 7 chrome controls before any content, and at 1440px a keyboard visitor
had 15–20 tab stops to walk on every single page with no way past them and no
landmark to jump to either. It is the FIRST thing in the document and the
first tab stop.
Positioned off-screen rather than `display:none` or `visibility:hidden`:
those two remove an element from the tab order entirely, which would make
this a link nobody can ever reach — the exact failure it exists to fix.
`clip-path` + a 1px box, not the old `clip:rect()`, and it takes a real box
back on focus so it is visible where it lands. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
background:var(--red);color:#fff;padding:14px 22px;
font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:0}
/* `main` has no default display in older engines and this file sets none.
The outline is dropped on purpose: it carries tabindex="-1" so programmatic
focus into the landmark does not draw a 2px ring around the entire page.
Skip-to-content targets #content (first real content), not #main — on the
home page the nav lives inside , so skipping to skipped nothing. */
main{display:block}
main:focus,main:focus-visible{outline:none}
#content:focus,#content:focus-visible{outline:none}
/* The nav band is sticky, so it sits over the top of anything an in-page jump
scrolls to — including #content, which the skip link targets on every page.
Without this the skip link lands the reader under the band. One band's
height, derived from the two inputs above rather than typed again. */
#content,:target{scroll-margin-top:var(--nav-h)}
.u{max-width:1500px;margin:0 auto;padding:0 52px}
/* labels: 13px minimum, tracking eased from .2em */
.eyebrow{color:var(--red);font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin:0 0 var(--s2);line-height:1.4}
.lead{font-size:19px;color:var(--muted);max-width:38rem;line-height:1.65;margin:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-weight:600;
font-size:14px;letter-spacing:.09em;text-transform:uppercase;transition:background .18s,transform .18s,border-color .18s}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--ink)}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
/* NAV — 14px links, one solid sticky band on every page */
/* STICKY, NOT AN OVERLAY. The home page used to wear this band transparently
over its hero photograph and every other page wore a solid copy, which meant
the one piece of chrome every page shares had two appearances, two position
schemes, and a hero that had to reserve space for a bar that occupied none.
One band now: solid, in the flow, pinned to the top of the viewport as the
page scrolls. `top:0` is what makes `sticky` do anything at all — without an
inset it behaves as `static`. z-index above the hero's own stacking (2) and
below the lightbox (200) and the skip link (100).
The nav paints its own background, so it must NOT carry max-width — that clips the
paint to 1500px and lets the page background show at the edges above that width.
The footer already does this correctly: full-bleed element, inner .u constrains.
Here there is no inner wrapper, so the gutter absorbs the centring instead, which
lands the content on exactly the same line as .u without any markup change. */
.nav{position:sticky;top:0;z-index:60;width:100%;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.1);
display:flex;align-items:center;gap:24px;padding:var(--nav-pad-y) max(52px, calc((100% - 1500px) / 2 + 52px))}
.nav-brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.nav-logo{height:var(--nav-logo-h);width:auto;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{color:rgba(255,255,255,.86);font-size:14px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:11px 15px;position:relative;transition:color .15s}
.nav-links a:hover,.nav-links a.here{color:#fff}
.nav-links a.here::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--red)}
/* THE PHONE NUMBER, VISIBLE RATHER THAN HUNTED FOR. The people this site is
written for — a QS or a project manager with a tender return date — reach for
a phone before a form, and until now the number lived only in the footer and
on /contact.html. It is a link, not a button, because `tel:` is a
destination; it keeps its own casing (a phone number is not a label) and its
own 15px, which is why it does not inherit the uppercase 14px above. */
/* THE SELECTOR CARRIES `.nav-links` ON PURPOSE, and so does .nav-cta below it.
`.nav-links a` above is 0,1,1 — a class AND a type — so a bare `.nav-tel` at
0,1,0 loses every property the two share no matter where it sits in the file.
That is not hypothetical: `.nav-cta{font-size:13.5px}` was written bare and
lost to `.nav-links a{font-size:14px}`, so the button had been painting at
14px for as long as both rules existed. Both are qualified now. Do not
un-qualify either one. */
.nav-links a.nav-tel{display:flex;align-items:center;gap:9px;color:#fff;font-size:15px;font-weight:500;
letter-spacing:0;text-transform:none;padding:11px 18px;margin-left:10px;
border:1px solid rgba(255,255,255,.28);transition:border-color .18s,color .15s}
.nav-links a.nav-tel:hover{border-color:#fff}
.nav-tel svg{width:17px;height:17px;flex:none}
.nav-links a.nav-cta{background:var(--red);color:#fff;padding:14px 22px;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-left:8px;transition:background .18s,color .15s}
.nav-links a.nav-cta:hover{background:var(--red-dark)}
.nav-toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.32);margin-left:auto}
.nav-toggle i{display:block;width:20px;height:2px;background:#fff;position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;right:0;height:2px;background:#fff}
.nav-toggle i::before{top:-7px}.nav-toggle i::after{top:7px}
/* HERO */
/* NO RESERVED SPACE FOR THE NAV, and that is the point of the sticky band.
This used to carry `padding-top:calc(var(--nav-h) + var(--s2))` because the
nav lived inside the hero as an absolutely positioned overlay and therefore
occupied nothing: on a phone the content plus the bar measured more than the
min-height, the free space went to zero, and the logo printed on top of the
h1. The band is in the flow above this element now, so the collision cannot
occur and the reservation would only push the copy down. The generous
padding on .hero-content below is composition, not clearance. */
.hero{position:relative;min-height:82vh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* Darker on the left than the band it replaces: the h1 is 200-weight at up to
112px and a thin face over a photograph is the first thing to go illegible.
Two stacked gradients — one across for the copy, one down so the bottom edge
meets the capability band's ink instead of stopping on a lit wall. */
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,14,12,.92) 0%,rgba(18,14,12,.6) 46%,rgba(18,14,12,.22) 100%),linear-gradient(180deg,rgba(18,14,12,.35) 0%,rgba(18,14,12,0) 40%,rgba(18,14,12,.75) 100%)}
.hero-content{position:relative;z-index:2;width:100%;max-width:1500px;margin:0 auto;padding:170px 52px 78px}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 30px;
font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#ea9aa9}
/* the rule beside the label — decorative, and an empty so a screen reader
reads nothing for it, the same shape .plist uses for its square bullet */
.hero-eyebrow i{width:34px;height:1px;background:var(--red);flex:none;font-style:normal}
.hero h1{font-size:clamp(58px,7.4vw,112px);font-weight:200;letter-spacing:-.035em;line-height:.92;color:#fff;margin:0 0 30px;max-width:16ch;text-wrap:balance}
.hero h1 span{color:#ea9aa9}
.hero .sub{font-size:21px;line-height:1.6;color:rgba(255,255,255,.86);max-width:44ch;margin:0 0 42px}
/* CAPABILITY BAND — the four claims that used to sit in a translucent sand bar
inside the hero. Out of the hero and onto its own ink ground: the bar was
overlapping the photograph it was meant to sit under, and being inside the
hero was what made the phone-height collision possible in the first place. */
.capband{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.12)}
.capband-in{max-width:1500px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:repeat(4,1fr)}
.cap{padding:var(--s4);border-right:1px solid rgba(255,255,255,.12)}
.cap:first-child{padding-left:0}.cap:last-child{border-right:0;padding-right:0}
.cap svg{display:block;width:32px;height:32px;color:var(--red);margin-bottom:16px}
.cap b{display:block;font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:8px;line-height:1.25}
.cap span{display:block;font-size:15px;color:rgba(255,255,255,.66);line-height:1.45}
/* TRUSTED-BY STRIP. The same seven marks that used to sit in a bordered grid
two thirds of the way down the page, moved above the fold where they do the
credibility work they were put there for.
THE HEIGHTS ARE NOT FREEHAND. Each mark is a single file with one rendition,
so group Z of scripts/browser-check.mjs measures its natural width against
the box it is painted into and fails anything over 4x. The square marks
(taylor-hart and tudor-may, both 200x200) and mp-drywall (320x197) are the
binding cases: below about 50px of height their boxes are narrow enough to
cross that line, which is why the squares sit at 52 and the wordmarks lower.
Optically that is the right way round anyway — a square mark needs more
height than a wordmark to carry the same weight. Do not shrink these
without re-reading that group. */
.trust{background:#fff;border-bottom:1px solid var(--line);padding:30px 0}
.trust-in{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.trust-lb{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);flex:none}
.trust-row{display:flex;align-items:center;gap:44px;flex-wrap:wrap;flex:1}
.tl{width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s}
.tl:hover{filter:none;opacity:1}
.tl-s{max-height:30px}.tl-m{max-height:38px}.tl-xl{max-height:52px}
/* taylor-hart.jpg is a 200x200 square whose logo occupies only the middle
third — the rest of the file is white. Sized like the other square marks it
paints a legible band about 20px tall and reads as a smudge; the box has to
be taller for the MARK inside it to match the others optically. This is the
per-mark tuning the strip asks for, done against the files as they actually
are. */
.tl-xxl{max-height:64px}
/* SECTIONS */
.sec{padding:var(--s7) 0}
.sec h2{font-size:clamp(40px,4.8vw,58px);margin:0 0 var(--s2)}
.sec-head{max-width:40rem;margin-bottom:var(--s5)}
.sand{background:var(--sand)}.white{background:#fff}
.dark{background:var(--ink);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:#ea9aa9}
.dark .lead{color:rgba(255,255,255,.76)}
.about-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s6);align-items:center}
.about-visual{aspect-ratio:4/5;overflow:hidden;background:var(--warm)}
.about-visual img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.about-visual:hover img{transform:scale(1.03)}
.pts{display:grid;gap:var(--s4)}
.pt h3{font-size:28px;margin-bottom:8px}
.pt p{color:var(--muted);font-size:17px;line-height:1.7;max-width:36ch}
/* SELECTED WORK. One feature tile and two stacked ones rather than three equal
cards: the photography is the argument this section is making, and three
cards at a third of the width each made none of it. */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5)}
.work-head>div{max-width:46rem}
.wgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s4)}
.wstack{display:grid;gap:var(--s4)}
.wtile{position:relative;display:block;overflow:hidden;background:var(--ink);color:#fff}
.wtile img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .7s ease}
.wtile:hover img{transform:scale(1.04)}
.wtile-feature{aspect-ratio:4/3}
.wtile-small{aspect-ratio:16/9}
/* A SIBLING OF THE CAPTION, NOT ITS BACKGROUND. Put this gradient on .wtile-cap
and group W of the browser harness stops judging the caption's contrast at
all — an element whose own background is an image is skipped, because the
probe cannot know what colour it composites to. Keeping the scrim separate
leaves .wtile's opaque ink as the caption's nearest painted ground, which is
also what the bottom of the gradient resolves to. */
.wtile-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,12,0) 42%,rgba(18,14,12,.88) 100%)}
.wtile-cap{position:absolute;left:0;right:0;bottom:0}
.wtile-feature .wtile-cap{padding:44px}
.wtile-small .wtile-cap{padding:30px}
.wtile-meta{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#ea9aa9;font-weight:600;margin-bottom:12px}
.wtile-small .wtile-meta{margin-bottom:8px}
.wtile-feature h3{font-size:44px;font-weight:300;letter-spacing:-.025em;line-height:1.05;margin-bottom:12px}
.wtile-small h3{font-size:30px;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.wtile p{font-size:17px;color:rgba(255,255,255,.8);max-width:52ch}
/* SCOPE GRID — all five services, which is docs/andrei-decisions.md item 4
answered: the home page used to show two of them and silently omit SFS,
shaft walls and acoustic linings. auto-fit rather than a fixed column count
so the row reflows without a second breakpoint; the border-top/left on the
grid plus border-right/bottom on each cell is what makes the rules meet at
the edges without doubling. */
.scope-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.scope-cell{display:flex;flex-direction:column;gap:var(--s2);padding:38px 34px;min-height:230px;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .18s}
.scope-cell:hover{background:var(--sand)}
.scope-no{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.scope-cell h3{font-size:26px;font-weight:400;letter-spacing:-.015em;line-height:1.12}
.scope-cell p{font-size:16px;color:var(--muted);line-height:1.6}
/* HOW WE WORK — four rows separated by hairlines. The 2px grid gap over a
--line ground is the same trick .srvs uses for the services index, rather
than a second set of border rules. */
.hlist{display:grid;gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hrow{background:var(--sand);padding:26px 0;display:grid;grid-template-columns:44px 1fr;gap:22px;align-items:start}
.hrow>span{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--red);padding-top:5px}
.hrow h3{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.hrow p{font-size:16.5px;color:var(--muted);line-height:1.6;max-width:46ch}
/* .plink is .more's twin for a link that is not "read more about this" — "All
projects", "Price this scope". One rule for both so the two cannot drift
into two different red underlined links. */
.more,.plink{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.more:hover,.plink:hover{color:var(--red-dark)}
.work-head .plink{white-space:nowrap;padding-bottom:4px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.card-img{aspect-ratio:4/3;overflow:hidden;background:var(--warm);margin-bottom:var(--s3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-img img{transform:scale(1.045)}
.card-meta{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:9px;font-weight:600}
.dark .card-meta{color:#ea9aa9}
.card h3{font-size:32px;margin-bottom:9px}
.card p{font-size:16.5px;color:var(--muted);line-height:1.65;margin-bottom:var(--s2)}
.dark .card p{color:rgba(255,255,255,.74)}
.card .go{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.dark .card .go{color:#ea9aa9}
/* THE PROJECTS INDEX, two up instead of three. A case study is read, not
scanned past: at a third of the width the photograph is a thumbnail and the
teaser is four lines of wrap. Half the width gives the image something to
say and the copy a measure. */
.cards-2{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
.cards-2 .card h3{font-size:34px;font-weight:300;letter-spacing:-.025em;line-height:1.06;margin-bottom:12px}
.cards-2 .card p{font-size:17px;max-width:52ch;margin-bottom:18px}
.cards-2 .card .go{display:inline-block;border-bottom:1.5px solid currentColor;padding-bottom:3px}
/* The meta row is sector-then-place. `b` is the sector in the accent, `i` the
place and year in muted — two elements rather than one string, because they
are two different facts and the chip row filters on only one of them. */
.card-meta b{font-weight:600}
.card-meta i{font-style:normal;font-weight:400;color:var(--muted);letter-spacing:.1em;margin-left:14px}
/* WHAT WE ACTUALLY SELF-DELIVERED, on the index rather than one click in. A QS
comparing subcontractors is looking for the scope, and until now the only
way to see it was to open each case study in turn. */
.scopes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.scopes span{font-size:13px;color:var(--ink-soft);border:1px solid var(--line);background:#fff;padding:6px 12px;line-height:1.3}
.cta-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s5);align-items:end}
.cta-grid p{color:rgba(255,255,255,.76);font-size:19px;max-width:34rem;margin-bottom:var(--s4);line-height:1.65}
.cside{border-left:3px solid var(--red);padding-left:var(--s3)}
.cside dt{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#ea9aa9;margin-bottom:5px}
.cside dd{margin-bottom:var(--s3);font-size:18px;color:var(--warm)}
.cside dd:last-child{margin-bottom:0}
/* The home page's closing band. Same component as every other page's, one
notch wider and vertically centred, because it carries a display-weight
heading rather than the standard one. */
.cta-grid.cta-wide{grid-template-columns:1.25fr 1fr;gap:var(--s6);align-items:center}
.cta-grid.cta-wide p{max-width:46ch}
/* THE DARK PAGE HEAD, one shape on every inner page. 78 above and 52 below:
the head introduces the page rather than being a band of its own, so it sits
closer to the content it opens than to the nav above it. */
.phead{background:var(--ink);color:#fff;padding:var(--s6) 0 var(--s5)}
/* The page head is a DARK ground, so the accent eyebrow has to be the light
tint, not --red. `.eyebrow` above sets colour:var(--red), which is 4.68:1 on
sand and passes; on --ink it computes to 3.24:1 at 13px/600 and fails AA,
which it was doing on 14 of the 15 pages. The stylesheet already had the
answer — `.dark .eyebrow{color:#ea9aa9}` (8.08:1 on --ink) — but .phead is
its own dark block and is not `.dark`, so it never picked it up. Keep this in
step with that rule; if a third dark surface appears, give it the same tint
rather than a new one. */
.phead .eyebrow{color:#ea9aa9}
.crumb{font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:var(--s3);display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:#fff}.crumb i{opacity:.45;font-style:normal}
.phead h1{font-size:clamp(44px,5.4vw,76px);font-weight:200;letter-spacing:-.035em;line-height:1.02;margin-bottom:var(--s3);max-width:18ch}
.phead .lead{color:rgba(255,255,255,.76);max-width:52ch}
.pmeta{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16)}
.pmeta dt{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#ea9aa9;margin-bottom:6px}
.pmeta dd{font-size:18px;color:#fff;font-weight:500}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:var(--s5)}
/* `transition` NAMES ITS PROPERTIES — it must never go back to `all`. `all`
includes outline-color, so the focus ring animated from whatever the chip's
currentColor happened to be: on the pressed chip that is #fff, which is
1.0:1 against the sand page, so a keyboard visitor who tabbed onto it got no
visible ring at all for the first ~180ms. Measured 25ms after a real Tab
keystroke: outline-color rgb(252,234,237). A focus indicator has to be there
the instant focus arrives. */
/* `display:inline-flex` is here so the class can dress something other than a