is what gets tapped, not the . 2026-08-24. */
.reveal-list__more a { display: inline-flex; align-items: center; min-height: 44px; }
/* Below 40em the icon disc costs more than it earns: it pushes the title
into a second line on a 390px row. The title and toggle keep the row. */
@media (max-width: 39.99em) {
.reveal-list__summary { gap: var(--space-3); }
.reveal-list__icon { width: 36px; height: 36px; }
.reveal-list__icon .icon { width: 22px; height: 22px; }
.reveal-list__body { padding-left: calc(36px + var(--space-3)); }
}
/* ============================================================
4.15 — Grid rail. Turns a .grid--4 into a horizontal
scroll-snap rail BELOW 40em only, where that grid is 1-up and
four stacked full-width cards cost 1,616px on a 390px phone —
15% of the whole page for one section.
A MODIFIER, NEVER A CHANGE TO .grid--4. base.css's .grid--4 is a
shared primitive — it carried the credentials band until 2026-08-20
(§4.4) and still carries /about/; rail behaviour has to be opted
into by the one caller that wants it.
No `scroll-behavior: smooth` anywhere here, deliberately.
base.css's prefers-reduced-motion block flattens animation and
transition durations globally but does NOT cover scroll-behavior,
so a smooth rail would keep animating for users who asked it not
to. Not opting in is the fix.
DORMANT SINCE 2026-08-24. Its one caller — the homepage Expertise
grid in index.njk — moved to .grid--compact (§4.15a) when the
maintainer asked for side-scrolling elements to be removed
site-wide. Nothing in src/ sets this class now; grep before
assuming otherwise. Retained, not deleted, on the same precedent
as .timeline--ladder (§4.13) and tokens.css's marine ramp: it is
a working component and the reversal is a preference, not a
defect. If it is ever revived, note that it needs its trailing
scroll-gap fix (described above) which was never implemented.
============================================================ */
@media (max-width: 39.99em) {
.grid--rail {
grid-auto-flow: column;
grid-auto-columns: 78%;
grid-template-columns: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
/* The gap is the grid's --space-8. This padding-bottom is vertical —
it clears the scrollbar the browser draws under an overflow-x
track so the cards don't sit flush against it, nothing to do with
horizontal snap spacing (padding-bottom cannot affect that axis).
It does NOT give the last card room to snap flush left; that gap
is still open. (Note for a future editor: `scroll-padding-right`
would NOT fix it — scroll-padding shrinks the snapport, it does
not create trailing scrollable space, so the last card's
start-snap position would still sit beyond max-scroll. A trailing
`padding-right` of roughly `100% - 78%`, or an `::after` spacer,
is the remedy that would actually work — not implemented here.) */
padding-bottom: var(--space-4);
}
.grid--rail > * { scroll-snap-align: start; }
}
/* ============================================================
4.15a — Grid compact. Turns a .grid--4 into a TWO-UP grid
below 40em, where that grid is otherwise 1-up.
REPLACES .grid--rail AS THE HOMEPAGE EXPERTISE TREATMENT
(2026-08-24, maintainer: remove side-scrolling elements
site-wide). §4.15 above is now dormant — see its note.
THIS IS TALLER THAN THE RAIL IT REPLACES, BY DESIGN AND WITH
THE MAINTAINER'S AGREEMENT: a rail is one row, a 2-up grid is
two, so this costs roughly +225px on the homepage. It is still
far shorter than the 1-up stack (~1,616px) the rail originally
existed to avoid, and the height is bought back several times
over by the footer and type-scale changes in the same pass.
Do not "restore" the rail on height grounds — that trade was
made deliberately.
A MODIFIER, NEVER A CHANGE TO .grid--4, for the same reason
§4.15 gives: base.css's .grid--4 is a shared primitive and
still carries /about/.
The gap tightens to --space-4 because --space-8 leaves a 155px
cell at 390px; --space-4 leaves 163px, which is what keeps the
longest title ("Ecommerce & Precious Metals Technology") to
four lines rather than six.
============================================================ */
@media (max-width: 39.99em) {
.grid--compact { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
/* The 21px --type-h3 title is sized for a full-width card. In a 163px
cell it wraps to six lines and the four cards stop reading as a set.
--type-h4 is the next step down on the scale. */
.grid--compact .tile__title { font: var(--type-h4); }
}
/* ============================================================
4.16 — Graticule. The 96px ink-and-gold grid the homepage hero
has carried since the rebuild, masked to a radial bloom parked
upper-right.
PROMOTED HERE FROM pages.css ON 2026-08-21, when the homepage
Our Story band asked for the hero's surface and would have been
the motif's fourth caller (hero, one brand header per brand,
Our Story). Both copies — §5.1 and §5.4 — were byte-identical
apart from a missing -webkit- prefix in the hero's, and §5.4's
own comment ended "If a fourth dark band ever wants this, that
is the refactor." This is that refactor. A fifth surface takes
the class; it does not take a local copy.
IT PAIRS WITH --grad-hero, ALWAYS. Every caller paints that
gradient underneath it. The lines are gold-500 at 10% alpha,
which is legible on ink and invisible on cream — this class does
not make a light section interesting, it makes a dark one deep.
The mask position is the one knob: --graticule-at, defaulting to
the hero's own 78% 18%. Set the property on a caller rather than
forking the rule. BOTH mask properties are required; Safari still
only drops the triangle for the -webkit- one.
============================================================ */
.graticule { position: relative; }
.graticule::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--gold-500) 10%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--gold-500) 10%, transparent) 1px, transparent 1px);
background-size: 96px 96px;
-webkit-mask-image: radial-gradient(120% 90% at var(--graticule-at, 78% 18%), #000 0%, transparent 72%);
mask-image: radial-gradient(120% 90% at var(--graticule-at, 78% 18%), #000 0%, transparent 72%);
}
/* REQUIRED, NOT COSMETIC — without it the grid paints over every word in
the band. Within one stacking context, positioned descendants with
`z-index: auto` paint in a LATER pass than in-flow block content, so an
absolutely positioned ::before beats its element's ordinary children
regardless of source order. Promoting the container to positioned puts it
in the same pass, where document order decides and it comes after.
This was `.hero > .container` and `.brand-header > .container` before the
promotion; all three callers wrap their content in a `.container`, so the
child selector carries over unchanged. No z-index on either rule, so no
stacking context is opened and the sticky header's z-index:50 still paints
over the band. */
.graticule > .container { position: relative; }
/* ============================================================
4.17 — Specimen grid. A list of short parallel labels, each on
a hairline, each with an icon. Sits inside a `.band__body`, so
it sizes off that 7fr column (635px at the 1200px container)
rather than borrowing base.css's .grid--3 breakpoints, which
assume the full container width.
PROMOTED FROM pages.css §5.5 ON 2026-08-24 as `.method-grid` /
`.method`, when /responsibility/'s four-areas index became the
second caller. Renamed because a responsibility area is not a
testing method.
DELIBERATELY NOT `.tile`: no border box, no background fill and
no tinted icon disc. /expertise/'s own template records why —
a bordered card with a tinted disc reads as a repeat of the
homepage Expertise tiles, which link TO this page. Adding the
icon (2026-08-24, maintainer request) does not reopen that:
the icon sits inline on the existing hairline row.
COLUMN BEHAVIOUR, computed against the 635px body column and
the --space-4 (16px) gap, not guessed:
base 170px floor — 3-up at 635px (3x170+2x16=542; 4-up needs
728). 1-up at 342px (2-up needs 356).
wide 240px floor — 2-up at 635px (2x240+16=496; 3-up needs
752), so a four-item index lands 2x2
instead of 3-up-plus-an-orphan. 1-up at
342px.
1-UP AT 390px IS CORRECT, NOT A FALLBACK. At 2-up a label would
have 125px beside a 30px icon, and "X-ray fluorescence (XRF)
spectrometry" would run five or six lines. If the band's 5fr/7fr
ratio or --container ever changes, BOTH floors need recomputing
together.
============================================================ */
.spec-grid {
list-style: none; margin: 0 0 var(--space-4); padding: 0;
display: grid; gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.spec-grid--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* --ink-900 is declared here, not inherited: §4.12 sets `.band__body`
to --neutral-700 and these labels are specimens, not running prose. */
.spec {
display: flex; align-items: flex-start; gap: var(--space-2);
border-top: 1px solid var(--neutral-300);
padding-top: var(--space-2);
font: var(--type-small); line-height: 1.4;
color: var(--ink-900);
}
/* ============================================================
4.18 — Buys list. `entity.brands[].buys` as a mark-and-label
grid: partials/buys-list.njk, rendered by the homepage brand
dialog (§4.3b) and by the brand pages' band body.
PROMOTED FROM §4.3b ON 2026-08-25, when the maintainer asked
for "icons similar to what is in those bento card modals" on
the brand pages and the second caller appeared. Same rule, one
file, so the two cannot drift — that is the whole point of the
shared partial. The comment below is the original, extended
with the band column's own measurements.
DELIBERATELY NOT `.spec-grid` (§4.17), which is the other
icon-and-label list living in a `.band__body`. That one is a
hairline specimen index; this one has to match the dialog it
was lifted from, because both render the SAME EIGHT LABELS and
a reader who opens the bento card and then follows through to
the brand page must see one object, not two treatments of it.
Adding hairlines here to match §4.17 breaks that; do not.
THE ICONS RENDER AT THEIR NATIVE 30px CARD-GRID SIZE and are
not scaled down. Shrinking a 30px viewBox thins its 1.4px
stroke under a pixel — the reason "arrow" carries its own 18px
grid in eleventy.config.js rather than being a shrunk copy of
the card set — and native size is also what lets this row
reuse "jewelry", "valuation" and "industrial" unmodified. So
the row height is the icon's, not the label's.
auto-fit against a 126px floor, NOT a fixed column count. One
rule covers both callers with no breakpoint of its own,
against the --space-3 (12px) gap:
dialog 636px inside the padding at 700px -> 4 columns
~278px inside the padding at 390px -> 2 columns
page 635px `.band__body` at the 1200px container
((635+12)/138 = 4.6) -> 4 columns
342px at 390px ((342+12)/138 = 2.5)-> 2 columns
Sell Your Gold's eight items land 4x2 in both places and 2x4
on a phone; Recycle Platinum's three fill one line. `1fr`
rather than `auto` so the tracks are even and the labels start
on a common x down each column.
`min-width: 0` on the item is what lets a long label wrap
INSIDE its track instead of widening it — the same auto-floor
removal .journey__step needs (see CLAUDE.md). "Luxury watches"
is the longest label at ~100px and is what the 126px floor was
measured against; it is the one to re-measure if a longer term
is ever added to `buys`.
--ink-900 on the label is declared, not inherited: §4.12 sets
`.band__body` to --neutral-700, and on the brand pages these
are specimens, not running prose. §4.17's `.spec` carries the
same declaration for the same reason.
============================================================ */
.buys-list {
list-style: none; margin: 0 0 var(--space-6); padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
gap: var(--space-3);
}
.buys-list__item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.buys-list__label { font: var(--type-small); color: var(--ink-900); min-width: 0; overflow-wrap: break-word; }