@charset "utf-8";
/* ============================================================================
VADER BARCLAY · INNER PAGE LAYER
Loads AFTER atlas.css on every page except the homepage.
Rules of this file
------------------
1. It ADDS components. It never redefines a selector that atlas.css owns, so
the approved homepage renders byte-identically whether or not this loads.
2. It introduces no new tokens. Every colour, size, space, easing and font
decision below resolves to a variable already declared in atlas.css.
3. There is no viewport media query anywhere in it. Components that must
change shape do so with container queries, auto-fit grids and clamp().
A component adapts to the box it is in, not to a guess about the device.
========================================================================== */
/* ---------------------------------------------------------- 1. PAGE HERO */
/* An inner page is not a homepage and must not behave like one. The hero
resolves to roughly two thirds of a screen and grows only if its own content
needs the room, so the first section is always visible under it.
Four layers, back to front:
0 the photograph, held at 34% so it reads as atmosphere, not subject
1 a navy wash, heaviest at the edges, that guarantees text contrast
2 the ruled column grid, Atlas's signature
3 the copy
The wash sits above the photograph and below the text, which is what keeps
the headline legible over any part of any image. */
.phero {
background: var(--navy); color: var(--ice);
/* Three terms, each doing a job a plain vh value cannot:
30rem floor, a landscape phone or a short laptop never collapses it
70svh the normal case; svh, not vh, so mobile browser chrome coming and
going cannot resize the band under the reader
41rem ceiling, the important one. A raw 75vh becomes 810px on a 1080p
monitor and 1080px on a 1440p one, at which point an inner page is
a landing page again. The cap holds the hero at a deliberate size
however tall the display is.
Equal heights across pages come from the content being equalised, not from
this value: every landing hero now carries the same block (breadcrumb,
eyebrow, two-line headline, three-line standfirst, actions), so whichever
term wins, it wins identically on all of them. */
min-block-size: clamp(30rem, 70svh, 41rem);
display: grid; align-content: center;
padding-block: calc(var(--s-5) + 5.6rem) var(--s-5);
position: relative; overflow: hidden; isolation: isolate;
container-type: inline-size; container-name: ph;
}
.phero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .34; }
.phero::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(to right, var(--navy) 0%, rgba(13,23,41,.92) 38%, rgba(13,23,41,.55) 72%, rgba(13,23,41,.72) 100%),
linear-gradient(to bottom, rgba(7,13,24,.92) 0%, rgba(7,13,24,.15) 42%, rgba(7,13,24,.55) 100%);
}
.phero::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background-image: linear-gradient(to right, rgba(194,207,224,.07) 1px, transparent 1px);
background-size: calc(100%/6) 100%;
}
.phero > * { position: relative; z-index: 3; }
/* Must outrank `.phero > *` above, or the picture is taken back into flow and
the hero grows to the full height of the photograph. */
.phero > .phero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* The copy block carries the floor, not just the section. Equalising the box
rather than the words is what lets FAQ keep a one-line headline and Insights
and Contact keep no button row, while every landing hero still resolves to
the same height, the lighter ones simply take more air around the type
instead of being padded with copy written to fill a gap. */
.phero-in { display: grid; gap: var(--s-4); align-content: center; min-block-size: 31rem; }
/* One step below the homepage h1 (--h-4). The homepage should hold the largest
type on the site; an inner page announcing itself at the same scale is what
made every page read like a landing page. */
.phero h1 { font-size: var(--h-3); color: var(--white); max-inline-size: 20ch;
text-shadow: 0 1px 30px rgba(7,13,24,.45); }
.phero .lede { color: var(--dusty-4); font-size: var(--t-lg); max-inline-size: 56ch; }
.phero .mk { color: var(--sig-lt); }
/* Legal and utility pages take a shorter hero, there is less to say and the
reader is there for the document, not the picture. The copy block needs its
own smaller floor too, or the landing-page floor above drags these back up to
the same height and the distinction disappears. */
.phero-sm { min-block-size: 44svh; }
.phero-sm .phero-in { min-block-size: 24rem; }
/* Facts rail, a ruled spec strip pinned beneath the hero on the ice ground.
It was inside the hero and was the main reason inner heroes ran past a full
screen; as its own band it reads as a deliberate index of the page. */
.factbar { background: var(--ice-2); border-block-end: 1px solid var(--line); }
.factbar dl { display: grid; gap: 0 var(--s-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.factbar dl > div { display: grid; gap: .4rem; align-content: start;
padding-block: var(--s-5); padding-inline-end: var(--s-4);
border-block-start: 2px solid var(--fg); }
.factbar dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent); }
.factbar dd { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.55; }
/* ------------------------------------------------------- 2. BREADCRUMBS */
.crumbs { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
color: var(--dusty-3); margin-block-end: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; }
.crumbs li { display: flex; align-items: center; gap: .55em; }
.crumbs li + li::before { content: ''; inline-size: .75rem; block-size: 1px;
background: currentColor; opacity: .5; flex: none; }
.crumbs a { color: var(--dusty-3); transition: color 220ms var(--ease); }
.crumbs a:hover { color: var(--sig-lt); }
.crumbs [aria-current] { color: var(--dusty-4); }
/* ------------------------------------------------------------- 3. PROSE */
/* Long-form reading column: articles and legal pages. */
.prose { max-inline-size: 68ch; }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h2 { font-size: var(--h-2); margin-block-start: var(--s-6); scroll-margin-block-start: 7rem; }
.prose h3 { font-size: var(--h-1); margin-block-start: var(--s-5); scroll-margin-block-start: 7rem; }
.prose h2 + p, .prose h3 + p { margin-block-start: var(--s-3); }
.prose p, .prose li { color: var(--fg-2); }
.prose .lead { font-size: var(--t-lg); line-height: 1.5; color: var(--fg); }
.prose a:not(.btn):not(.alink) { color: var(--accent); text-decoration: underline;
text-underline-offset: .22em; text-decoration-thickness: 1px;
transition: text-decoration-color 220ms var(--ease); }
.prose a:not(.btn):not(.alink):hover { text-decoration-color: transparent; }
/* List markers are positioned, not laid out as grid tracks.
These items were `display:grid` with the marker as track 1. That works only
while the item holds exactly one child: the moment a list item contains
inline markup, "sets no cookies, not necessary…", each
run becomes its own grid item, so the dropped into the 1.1rem
marker column and set one letter per line. Every legal page was affected.
Keeping the item a normal block lets its inline content flow as prose. */
.prose ul, .prose ol { display: grid; gap: var(--s-2); padding-inline-start: 0; }
.prose ul li, .prose ol li { position: relative; }
.prose ul li { padding-inline-start: 1.75rem; }
.prose ul li::before { content: ''; position: absolute; inset-inline-start: 0;
inset-block-start: .72em; inline-size: 8px; block-size: 2px; background: var(--accent); }
.prose ol { counter-reset: p; }
.prose ol li { counter-increment: p; padding-inline-start: 2.6rem; }
.prose ol li::before { content: counter(p, decimal-leading-zero); position: absolute;
inset-inline-start: 0; inset-block-start: .34em; font-size: var(--t-xs);
font-weight: 700; letter-spacing: .1em; color: var(--accent); font-variant-numeric: tabular-nums; }
.prose strong { font-weight: 700; color: var(--fg); }
.prose blockquote { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--s-4);
font-size: var(--h-1); font-weight: 600; line-height: 1.35; letter-spacing: -.018em; color: var(--fg); }
.prose hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--s-6); }
.prose figure img { inline-size: 100%; }
.prose figcaption { font-size: var(--t-xs); letter-spacing: .04em; color: var(--fg-3);
margin-block-start: var(--s-2); }
.prose dl { display: grid; gap: var(--s-3); }
.prose dt { font-weight: 700; color: var(--fg); }
.prose dd { color: var(--fg-2); margin-block-start: .2rem; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose th, .prose td { text-align: start; padding: var(--s-3) var(--s-3) var(--s-3) 0;
border-block-end: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.prose td { color: var(--fg-2); }
/* Any wide block inside prose scrolls itself rather than the page. */
.scroll-x { overflow-x: auto; overscroll-behavior-inline: contain; }
/* --------------------------------------------- 4. DOCUMENT + SIDEBAR GRID */
/* One column by default. The aside dissolves with `display:contents` so its two
halves become grid items in their own right and can be ordered around the
article: contents first, then the article, then the sign-up and the two
lists. That is the tablet and phone reading order, nobody should have to
scroll past four side modules to reach the piece they came for. */
.doc { display: grid; gap: var(--s-6) var(--s-7); align-items: start;
grid-template-columns: 1fr; }
.doc-aside { display: contents; }
.doc-nav { order: 1; }
.doc > .prose, .doc .prose { order: 2; }
.doc-extra { order: 3; display: grid; gap: var(--s-6); }
/* Once there is room for two columns the reading column takes the larger share.
Expressed as a container query on the section, not on the viewport. */
.doc-wrap { container-type: inline-size; container-name: doc; }
@container doc (inline-size >= 58rem) {
.doc { grid-template-columns: 18rem minmax(0, 1fr); }
/* Wide enough for a true sidebar. The aside takes whatever height its four
modules need, no cap, no scrollbar of its own, nothing pinned.
Nothing here is sticky, and that is deliberate. A sticky element stays in
flow: once it pins it slides down over its own siblings, so a pinned
contents list would ride over the sign-up and the two lists below it. The
alternative, pinning the whole column, needs a height cap and an inner
scrollbar to keep its lower half reachable. Since the column is to expand
freely, it scrolls with the page like any other column. */
.doc-aside { display: grid; gap: var(--s-5); align-content: start; }
.doc-nav, .doc-extra, .doc .prose { order: 0; }
.doc-extra { gap: var(--s-5); }
}
/* Between phone and sidebar, an iPad mini in portrait is the clear case. The
layout is single column, but the contents list would be a thin ribbon of
text down the left of a wide box, so it runs in two columns instead. The
phone keeps one column, because at that width two would break the labels. */
@container doc (34rem <= inline-size < 58rem) {
.toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
.doc-extra { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
align-items: start; }
.doc-extra .signup { grid-column: 1 / -1; }
}
.toc { border-block-start: 2px solid var(--fg); padding-block-start: var(--s-3); }
.toc p { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--fg-3); margin-block-end: var(--s-3); }
.toc ol { display: grid; gap: .55rem; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 1.9rem 1fr; gap: .4rem; font-size: var(--t-sm);
line-height: 1.4; color: var(--fg-2); transition: color 220ms var(--ease); }
.toc a::before { content: counter(t, decimal-leading-zero); font-size: var(--t-xs);
font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; padding-block-start: .2em; }
.toc a:hover { color: var(--accent); }
.toc a:hover::before { color: var(--accent); }
/* --------------------------------------------------------- 5. ICON SYSTEM */
/* Drawn on a 24 grid, 1.6 stroke, square caps and joins, the same geometry
as the rest of Atlas. No fills, no rounded ends, no gradients. */
/* Stroke geometry is declared once here so the markup carries only a viewBox
and a path, the icons stay legible in the HTML and weigh almost nothing. */
.ico { inline-size: 1.75rem; block-size: 1.75rem; color: var(--accent); flex: none;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: square; stroke-linejoin: miter; }
.ico-lg { inline-size: 2.5rem; block-size: 2.5rem; }
.ico-frame { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center;
border: 1px solid var(--line); flex: none;
transition: border-color 380ms var(--ease), background-color 380ms var(--ease); }
.ico-frame .ico { inline-size: 1.6rem; block-size: 1.6rem; }
/* ------------------------------------------------------------- 6. CARDS */
/* One hairline grid, one background per cell, the Atlas table idiom.
Cells stretch to the tallest in their row, so heights are equal by
construction rather than by a fixed value. */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
/* A set of six wants a track that can only ever resolve to 1, 2 or 3 columns,
never 4 or 5, otherwise the last row is left with dead cells on a wide
screen. Filling that gap with a decorative image would be treating the
symptom; sizing the track so the gap cannot occur is the actual fix. */
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); }
/* The card is a column so a trailing action can be pushed to the floor of the
cell with margin-block-start:auto, level across the whole row whatever the
copy above it does. A grid with align-content:start cannot do that. */
.card { background: var(--bg); padding: var(--s-5) var(--s-4);
display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3);
transition: background-color 380ms var(--ease); }
.card:hover { background: var(--white); }
.inv .card:hover { background: var(--navy-2); }
.card:hover .ico-frame { border-color: var(--accent); }
.card h3 { font-size: var(--h-1); }
.card p { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.6; }
.card .n { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; color: var(--accent);
font-variant-numeric: tabular-nums; }
.card ul { display: grid; gap: .4rem; padding-block-start: var(--s-2);
border-block-start: 1px solid var(--line); }
.card ul li { font-size: var(--t-sm); color: var(--fg-2); display: flex; gap: .6em; align-items: baseline; }
.card ul li::before { content: ''; inline-size: 6px; block-size: 2px; background: var(--accent);
flex: none; translate: 0 -.3em; }
a.card { color: inherit; }
a.card h3 { transition: color 240ms var(--ease); }
a.card:hover h3 { color: var(--accent); }
/* A trailing action or list is pushed to the floor of the cell, so the row
reads as one baseline no matter how much copy sits above it. */
.card-foot { margin-block-start: auto; padding-block-start: var(--s-3); }
.card > ul:last-child { margin-block-start: auto; }
/* --------------------------------------------------- 6b. SECTION HAND-OFF */
/* Replaces the plain "read more →" sentence. A ruled action row that sits on
the grid at full section width: eyebrow, destination, and a bordered arrow
that fills on hover while an accent rule draws itself across the top. It
reads as part of the layout system rather than a stray line of text. */
.nlink {
position: relative; display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: .35rem var(--s-4);
padding-block: var(--s-4); color: inherit;
border-block-start: 2px solid var(--fg);
}
.nlink::before {
content: ''; position: absolute; inset-block-start: -2px; inset-inline-start: 0;
inline-size: 0; block-size: 2px; background: var(--accent);
transition: inline-size 620ms var(--expo);
}
.nlink:hover::before, .nlink:focus-visible::before { inline-size: 100%; }
.nlink-k { grid-column: 1; font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--accent); }
.nlink-t { grid-column: 1; font-size: var(--h-1); font-weight: 700; line-height: 1.12;
letter-spacing: -.025em; font-variation-settings: 'wdth' 92;
transition: color 260ms var(--ease); }
.nlink-i { grid-column: 2; grid-row: 1 / 3; inline-size: 3.4rem; block-size: 3.4rem;
display: grid; place-items: center; border: 1px solid var(--line);
transition: background-color 380ms var(--ease), border-color 380ms var(--ease); }
.nlink-i .ico { inline-size: 1.3rem; block-size: 1.3rem; color: var(--fg);
transition: transform 480ms var(--expo), color 380ms var(--ease); }
.nlink:hover .nlink-t, .nlink:focus-visible .nlink-t { color: var(--accent); }
.nlink:hover .nlink-i, .nlink:focus-visible .nlink-i { background: var(--accent); border-color: var(--accent); }
.nlink:hover .nlink-i .ico, .nlink:focus-visible .nlink-i .ico { color: var(--white); transform: translateX(.2rem); }
/* On a dark ground the accent is the light tint, so the arrow inverts. */
.inv .nlink:hover .nlink-i .ico, .inv .nlink:focus-visible .nlink-i .ico { color: var(--navy); }
/* Two or three hand-offs side by side close a page section cleanly. */
.nlinks { display: grid; gap: 0 var(--s-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
/* Cards that need to breathe rather than rule, used on Why us. */
.cards-open { display: grid; gap: var(--s-5) var(--s-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.cards-open > * { display: grid; gap: var(--s-3); align-content: start;
border-block-start: 2px solid var(--fg); padding-block-start: var(--s-3); }
.cards-open h3 { font-size: var(--h-1); }
.cards-open p { font-size: var(--t-sm); color: var(--fg-2); }
/* -------------------------------------------------------- 7. FEATURE ROW */
/* Image and copy side by side; every other one reverses. Reversal is done by
ordering the grid children, so at one column the image is always first. */
.frow { display: grid; gap: var(--s-6); align-items: center;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.frow + .frow { margin-block-start: var(--s-7); }
.frow img { inline-size: 100%; aspect-ratio: 4/3; object-fit: cover; }
.frow-body { display: grid; gap: var(--s-3); align-content: start; }
.frow-body h3 { font-size: var(--h-2); }
.frow-body p { color: var(--fg-2); max-inline-size: 54ch; }
.frow-wrap { container-type: inline-size; container-name: fr; }
@container fr (inline-size >= 46rem) {
.frow.rev > :first-child { order: 2; }
/* Once there are two columns the picture takes the height of the column
beside it instead of holding a fixed 4:3 and floating in the middle of a
tall block of copy. The image is taken out of flow inside a stretched
cell, so the text decides the row height and the photograph fills it, which is why a landscape source can sit in a portrait column and still
look composed. */
.frow { align-items: stretch; }
.frow-media { position: relative; min-block-size: 24rem; }
.frow-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
object-fit: cover; aspect-ratio: auto; }
}
/* ------------------------------------------- 7b. EQUAL-HEIGHT NOTE GRID */
/* Notes laid out as stacked columns end up ragged, because each column is only
as tall as its own contents. As cells of one hairline grid they are equal by
construction, and four cells resolve to 1, 2 or 4 across, never leaving a
hole. */
.notes-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.notes-grid > .note { border: 0; border-inline-start: 2px solid var(--accent);
padding: var(--s-5) var(--s-4); margin: 0; }
/* --------------------------------------------------- 8. DELIVERABLES LIST */
.dlist { border-block-start: 2px solid var(--fg); }
.dlist > div { display: grid; gap: var(--s-2) var(--s-4); padding-block: var(--s-4);
border-block-end: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
transition: background-color 380ms var(--ease); }
.dlist > div:hover { background: var(--line-2); }
.dlist dt { font-size: var(--h-1); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.dlist dd { font-size: var(--t-sm); color: var(--fg-2); }
.dlist .meta { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
color: var(--fg-3); }
/* ------------------------------------------------------------ 9. PEOPLE */
.people { display: grid; gap: var(--s-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.person { display: grid; gap: var(--s-2); align-content: start; }
.person .pic { overflow: hidden; background: var(--ice-2); }
.person img { inline-size: 100%; aspect-ratio: 4/5; object-fit: cover;
transition: transform 900ms var(--expo); filter: saturate(.9); }
.person:hover img { transform: scale(1.04); }
.person h3 { font-size: var(--h-1); margin-block-start: var(--s-2); }
.person .role { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent); }
.person p { font-size: var(--t-sm); color: var(--fg-2); }
/* ------------------------------------------------------- 10. NOTE / PANEL */
.note { border: 1px solid var(--line); border-inline-start: 2px solid var(--accent);
padding: var(--s-4); display: grid; gap: var(--s-2); background: var(--bg); }
.note p, .note li { font-size: var(--t-sm); color: var(--fg-2); }
.note .h { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent); }
.panel { border: 2px solid var(--fg); padding: var(--s-5); display: grid; gap: var(--s-4);
align-content: start; }
.inv .panel { border-color: rgba(194,207,224,.26); }
.panel h2, .panel h3 { font-size: var(--h-2); }
/* ------------------------------------------------------ 11. SPEC / FIGURE */
.spec { display: grid; gap: 0; }
.spec > div { display: grid; gap: .2rem var(--s-4); padding-block: var(--s-3);
border-block-end: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.spec > div:last-child { border-block-end: 0; }
.spec dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--fg-3); }
.inv .spec dt { color: var(--sig-lt); }
.spec dd { font-size: var(--t-sm); color: var(--fg-2); }
.inv .spec dd { color: var(--ice); }
/* --------------------------------------------------------- 12. TIMELINE */
.tline { display: grid; gap: 0; border-block-start: 2px solid var(--fg); }
.tline > li { display: grid; gap: var(--s-2) var(--s-4); padding-block: var(--s-5);
border-block-end: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tline .stage { display: grid; gap: var(--s-2); align-content: start; }
.tline .n { font-size: var(--h-3); font-weight: 800; line-height: 1; letter-spacing: -.045em;
color: var(--accent); font-variation-settings: 'wdth' 78; }
.tline h3 { font-size: var(--h-2); }
.tline p { font-size: var(--t-sm); color: var(--fg-2); }
.tline .detail { display: grid; gap: var(--s-3); align-content: start; }
/* ------------------------------------------------------------- 13. FORM */
.form { display: grid; gap: var(--s-4); }
.form-row { display: grid; gap: var(--s-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-3); }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
font: inherit; font-size: var(--t-sm); color: var(--fg); background: var(--white);
border: 1px solid var(--line); border-radius: 0; padding: .95em 1em; inline-size: 100%;
min-block-size: 3.2rem; transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
-webkit-appearance: none; appearance: none;
}
.field textarea { min-block-size: 9rem; resize: vertical; line-height: 1.6; }
.field select { background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 1.15rem) 1.45rem, calc(100% - .8rem) 1.45rem;
background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field .hint { font-size: var(--t-xs); color: var(--fg-3); letter-spacing: 0; text-transform: none; }
.check { display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--s-3); align-items: start; }
.check input { inline-size: 1.35rem; block-size: 1.35rem; min-block-size: 0; padding: 0;
accent-color: var(--sig); margin-block-start: .15em; }
.check label { font-size: var(--t-sm); letter-spacing: 0; text-transform: none;
font-weight: 400; color: var(--fg-2); line-height: 1.5; }
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.form .btn { justify-self: start; }
/* -------------------------------------------------------- 14. PILL / TAGS */
.pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pills li, .pill { font-size: var(--t-xs); letter-spacing: .04em; color: var(--fg-3);
border: 1px solid var(--line); padding: .35em .7em; }
.inv .pills li, .inv .pill { color: var(--dusty-3); border-color: rgba(194,207,224,.24); }
/* Section sub-navigation across the six services. */
.subnav { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line);
border: 1px solid var(--line); }
.subnav a { flex: 1 1 12rem; background: var(--bg); padding: var(--s-3) var(--s-3);
font-size: var(--t-sm); font-weight: 600; line-height: 1.3; display: grid; gap: .3rem;
transition: background-color 320ms var(--ease), color 240ms var(--ease); }
.subnav a span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
color: var(--fg-3); font-variant-numeric: tabular-nums; }
.subnav a:hover { background: var(--white); color: var(--accent); }
.subnav a[aria-current] { background: var(--navy); color: var(--ice); }
.subnav a[aria-current] span { color: var(--sig-lt); }
/* ------------------------------------------------------------ 15. PAGER */
.pager { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pager a { background: var(--bg); padding: var(--s-4); display: grid; gap: var(--s-2);
align-content: start; transition: background-color 380ms var(--ease); }
.pager a:hover { background: var(--white); }
.pager .dir { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent); }
.pager strong { font-size: var(--h-1); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.pager .next { text-align: end; }
.pager .next .dir { justify-self: end; }
/* --------------------------------------------------------- 16. POST META */
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--dusty-3); }
.pmeta .k { color: var(--sig-lt); font-weight: 700; }
.article-hero img { inline-size: 100%; aspect-ratio: 16/7; object-fit: cover; }
/* ------------------------------------------------------------- 17. ERROR */
.err { min-block-size: 100svh; display: grid; align-content: center; background: var(--navy);
color: var(--ice); padding-block: calc(var(--s-7) + 4rem) var(--s-7); position: relative;
overflow: hidden; }
.err::before { content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(to right, rgba(194,207,224,.06) 1px, transparent 1px);
background-size: calc(100%/6) 100%; }
.err > * { position: relative; z-index: 1; }
.err .code { font-size: clamp(5rem, 22vw, 14rem); font-weight: 800; line-height: .82;
letter-spacing: -.055em; color: var(--sig-lt); font-variation-settings: 'wdth' 76;
font-variant-numeric: tabular-nums; }
.err h1 { font-size: var(--h-3); color: var(--white); max-inline-size: 18ch; }
.err p { color: var(--dusty-4); max-inline-size: 52ch; }
.err-links { display: grid; gap: 1px; background: rgba(194,207,224,.18);
border: 1px solid rgba(194,207,224,.18);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.err-links a { background: var(--navy); padding: var(--s-4); display: grid; gap: .35rem;
transition: background-color 320ms var(--ease); }
.err-links a:hover { background: var(--navy-2); }
.err-links strong { font-size: var(--t-md); font-weight: 700; color: var(--ice); }
.err-links span { font-size: var(--t-sm); color: var(--dusty-3); }
/* ---------------------------------------------------------- 18. UTILITIES */
.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack-lg { display: grid; gap: var(--s-6); align-content: start; }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.mt-5 { margin-block-start: var(--s-5); }
.mt-6 { margin-block-start: var(--s-6); }
.measure { max-inline-size: 58ch; }
.center-col { display: grid; gap: var(--s-4); justify-items: start; }
.updated { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
color: var(--fg-3); }
/* .phero is a dark band that does not carry .inv, so the light-mode --fg-3
would land on navy at 3.12:1. Both dark contexts take the dusty tint. */
.phero .updated, .inv .updated { color: var(--dusty-3); }
.split-2 { display: grid; gap: var(--s-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.split-2.tight { gap: var(--s-5); }
/* Print: the legal pages are the ones people actually print. */
@media print {
/* Sections carry content-visibility:auto for scroll performance. Some
engines skip skipped subtrees when printing, which would drop most of a
legal page from the paper. Force them back for print. */
.defer { content-visibility: visible !important; }
[data-rev] { opacity: 1 !important; transform: none !important; }
.site-header, .site-footer, .divider, .skip, .subnav, .pager, .doc-aside { display: none !important; }
.phero { background: none !important; color: #000 !important; padding-block: 0 1.5rem !important; }
.phero h1, .phero .lede, .phero .mk { color: #000 !important; }
.phero::before { display: none; }
body { background: #fff; color: #000; }
.sec { padding-block: 0 !important; }
.prose { max-inline-size: none; }
a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; word-break: break-all; }
}
/* Current page in the primary navigation. Only ever applies on inner pages,
which is why it lives here and not in atlas.css. */
.nav a[aria-current='page'] { opacity: 1; }
.nav a[aria-current='page']::after { inline-size: 100%; }
/* The in-card affordance is the small sibling of .nlink: a hairline above it
so it reads as a footer to the cell, and an arrow that steps on hover. */
.card-foot { border-block-start: 1px solid var(--line); }
.card-foot .alink { gap: .55em; }
.card-foot .alink::after {
content: ''; inline-size: 1.1rem; block-size: 1px; background: currentColor;
transition: inline-size 420ms var(--expo);
}
a.card:hover .card-foot .alink::after,
a.card:focus-visible .card-foot .alink::after { inline-size: 2rem; }
/* ------------------------------------------------- 19. QUALIFYING LIST */
/* "We are a good fit if / we are probably not, if". Replaces four repeated
inline style attributes per item with one class that inherits its colours
from whichever ground the section sits on. */
.ticks { display: grid; gap: var(--s-3); }
.ticks li { display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--s-2);
font-size: var(--t-sm); color: var(--fg-2); align-items: start; }
.ticks .ico { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .2em; }
.ticks .yes .ico { color: var(--accent); }
.ticks .no .ico { color: var(--fg-3); }
/* ------------------------------------------------- 20. NEWSLETTER SIGN-UP */
/* Sits in the article sidebar under the contents. Deliberately quiet: it is a
panel in the same ruled idiom as the rest of the aside, not an interruption,
and it states frequency and how to leave before it asks for an address, which is both the honest order and the one that converts on a site like this.
Consent is an unticked box, never a pre-selection, and never bundled with
the enquiry form. */
.signup { border: 1px solid var(--line); border-block-start: 2px solid var(--fg);
padding: var(--s-4); display: grid; gap: var(--s-2); background: var(--bg); }
.signup .h { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--accent); }
.signup .t { font-size: var(--h-1); font-weight: 700; line-height: 1.14;
letter-spacing: -.02em; font-variation-settings: 'wdth' 92; }
.signup p { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.55; }
.signup .field { gap: .35rem; }
.signup .field label { font-size: var(--t-xs); }
.signup .field input { min-block-size: 2.9rem; padding: .75em .85em; font-size: var(--t-sm); }
.signup .check { grid-template-columns: 1.15rem 1fr; gap: var(--s-2); }
.signup .check input { inline-size: 1.15rem; block-size: 1.15rem; }
.signup .check label { font-size: var(--t-xs); line-height: 1.5; }
.signup .btn { inline-size: 100%; min-block-size: 2.9rem; padding-inline: var(--s-3); }
.signup .fine { font-size: var(--t-xs); color: var(--fg-3); line-height: 1.5; }
/* ------------------------------------------- 21. SIDEBAR LISTS + TAXONOMY */
.side-list { border-block-start: 2px solid var(--fg); padding-block-start: var(--s-3);
display: grid; gap: var(--s-3); align-content: start; }
.side-list > .h { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--fg-3); }
.side-list ul { display: grid; gap: var(--s-3); }
.side-list .item { display: grid; gap: .2rem; }
.side-list .item .k { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent); }
.side-list .item a { font-size: var(--t-sm); font-weight: 600; line-height: 1.28;
letter-spacing: -.012em; transition: color 220ms var(--ease); }
.side-list .item a:hover { color: var(--accent); }
.side-list .item time { font-size: var(--t-xs); color: var(--fg-3); }
/* Categories carry their count, so the list doubles as a map of the library. */
.side-cats ul { gap: 0; }
.side-cats li { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-2); padding-block: .6rem; border-block-end: 1px solid var(--line); }
.side-cats li:last-child { border-block-end: 0; }
.side-cats a { font-size: var(--t-sm); font-weight: 600; transition: color 220ms var(--ease); }
.side-cats a:hover { color: var(--accent); }
.side-cats .n { font-size: var(--t-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; flex: none; }
/* Full-width category row on the index and category pages. */
.cat-row { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.cat-row a { background: var(--bg); padding: var(--s-4); display: flex; gap: var(--s-3);
align-items: baseline; justify-content: space-between; font-size: var(--t-sm); font-weight: 600;
transition: background-color 320ms var(--ease), color 240ms var(--ease); }
.cat-row a:hover { background: var(--white); color: var(--accent); }
.cat-row a span { font-size: var(--t-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.cat-row a[aria-current] { background: var(--navy); color: var(--ice); }
.cat-row a[aria-current] span { color: var(--sig-lt); }
/* ------------------------------------------------------- 22. PAGINATION */
/* Built now rather than when it is needed: the page size is one constant in
_maintenance/insights.mjs, and the markup, the rel prev/next and the
noindex on page two and beyond are already correct. */
.pgnav { display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--s-3) var(--s-4);
margin-block-start: var(--s-7); padding-block-start: var(--s-4);
border-block-start: 2px solid var(--fg); }
.pg-step { display: inline-flex; align-items: center; gap: .6em; padding: .8em 1.1em;
border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 700;
min-block-size: 3rem; transition: background-color 320ms var(--ease),
border-color 320ms var(--ease), color 240ms var(--ease); }
.pg-step .ico { inline-size: 1.05rem; block-size: 1.05rem; color: currentColor;
transition: transform 420ms var(--expo); }
.pg-step:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.inv .pg-step:hover { color: var(--navy); }
.pg-step:hover .ico { transform: translateX(.18rem); }
.pg-step:first-child:hover .ico { transform: translateX(-.18rem); }
.pg-step.is-off { opacity: .35; pointer-events: none; }
.pg-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.pg-n { display: grid; place-items: center; min-inline-size: 3rem; min-block-size: 3rem;
padding-inline: .6em; font-size: var(--t-sm); font-weight: 700;
font-variant-numeric: tabular-nums; border: 1px solid var(--line);
transition: background-color 320ms var(--ease), border-color 320ms var(--ease), color 240ms var(--ease); }
a.pg-n:hover { border-color: var(--accent); color: var(--accent); }
.pg-n[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--ice); }
.pg-count { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
color: var(--fg-3); margin-block-start: var(--s-3); }