(the page's real
needs them stated. */
.hero-h {
font-family: var(--face-display);
font-weight: 800; line-height: .98;
letter-spacing: var(--track-display);
text-wrap: balance;
font-size: clamp(44px, 8.6vw, 124px);
color: var(--paper);
max-width: 15ch;
margin-bottom: 22px;
}
/* Exactly one headline is ever visible. hero.js hides the authored fallback
the moment it writes a real one, and shows it again if it cannot. Doing
this in CSS behind html.js was rejected: it would blank the headline
whenever the script fails, which is the failure Ruling 17 exists to stop. */
.hero-h[hidden] { display: none; }
.hero-sub { color: rgba(255,255,255,.84); font-size: clamp(16px, 1.5vw, 20px); max-width: 52ch; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
/* Per-word mask reveal, built by hero.js as .rv > span.
A CSS ANIMATION, not a class the script has to remember to add. The first
version started each word at translateY(105%) and revealed it when JS set
.is-lit on the next animation frame — which meant a dropped frame, a
throttled background tab, or any script failure left the entire headline
invisible with no error. `animation ... both` plays once on insertion and
ends at the visible state, so the worst case is a word that appears
without moving. Fail visible, never fail blank. */
.rv { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rv > span { display: inline-block; animation: word-rise .78s var(--ease) both; }
@keyframes word-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
.hero-ghost {
position: absolute; inset-inline-end: var(--pad); inset-block-end: clamp(48px, 9vh, 104px);
z-index: 2; font-family: var(--face-display); font-weight: 800;
font-size: clamp(88px, 16vw, 232px); line-height: .8;
color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22);
pointer-events: none; user-select: none; font-variant-numeric: tabular-nums;
}
.hero-dots {
position: absolute; inset-inline-start: var(--pad); inset-block-end: clamp(24px, 4vh, 46px);
z-index: 3; display: flex; gap: 10px;
}
.hero-dots button {
width: 52px; height: 3px; padding: 0; border: 0; cursor: pointer;
background: rgba(255,255,255,.28); position: relative;
}
/* The bar is 3px tall; this gives it a real 27px tap target without moving
anything visually. */
.hero-dots button::after { content: ""; position: absolute; inset: -12px -3px; }
.hero-dots button i { position: absolute; inset: 0; overflow: hidden; background: var(--zest); transform: scaleX(0); transform-origin: calc(50% - 50% * var(--dir)) 0; }
.hero-dots button.is-on i { animation: dot-fill var(--slide-hold) linear forwards; }
@keyframes dot-fill { to { transform: scaleX(1); } }
/* ---------------------------------------------------------- stats ---- */
.stats { background: var(--forest); color: var(--paper); padding-block: clamp(48px, 7vw, 88px); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(24px, 4vw, 56px); }
.stats .n {
font-family: var(--face-display); font-weight: 800;
font-size: clamp(42px, 5.6vw, 78px); line-height: .9;
color: var(--zest); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.stats .n.is-text { font-size: clamp(24px, 3vw, 42px); }
.stats .l { margin-top: 10px; color: rgba(255,255,255,.66); }
/* -------------------------------------------------- section frame ---- */
.sec { padding-block: clamp(68px, 10vw, 136px); }
.sec-stone { background: var(--stone); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vw, 62px); }
@media (min-width: 900px) { .sec-head { grid-template-columns: 1.15fr .85fr; align-items: end; } }
.sec-head .k { color: var(--leaf); }
.sec-head h2 { font-size: clamp(32px, 5.2vw, 72px); }
.sec-head p { color: var(--ink-soft); max-width: 46ch; }
.lede { color: var(--ink-soft); max-width: 58ch; }
/* ----------------------------------------------------- categories ---- */
.cats { display: grid; gap: 14px; grid-template-columns: 1fr; }
/* Five categories are a fixed part of the range. A deliberate five-up grid
at desktop removes the accidental four-plus-one orphan card, while the
intermediate three-up composition keeps the cards comfortably readable. */
@media (min-width: 700px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--forest); display: block; }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.cat:hover img, .cat:focus-visible img { transform: scale(1.09); }
/* MEASURED, not guessed. The blurb added below pushed the text block to 65%
of the card, so its first line landed at 57-79% down — where the old
`transparent 34%` ramp was still only 31-51% opaque. Over the pale oils
photograph that measured 4.43:1, under the 4.5:1 AA floor for 14px text.
A photo overlay cannot be checked by check_contrast.py, which compares
static token pairs; this was caught by sampling the composited pixels in
the browser, and must be re-measured there if either ramp or copy changes. */
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 16%, rgba(6,26,13,.5) 42%, rgba(6,26,13,.94)); }
.cat-tx { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2; padding: 22px; color: var(--paper); transition: transform .55s var(--ease); }
.cat:hover .cat-tx, .cat:focus-visible .cat-tx { transform: translateY(-8px); }
.cat h3 { font-size: 25px; margin-bottom: 6px; }
.cat .c { color: var(--zest); font: 500 11px/1 var(--face-mono); letter-spacing: .14em; text-transform: uppercase; }
/* The blurb sits over the same dark scrim as the heading, so it takes --paper
at reduced opacity rather than --ink-soft, which is a light-ground colour
and would be all but invisible here. */
.cat-blurb {
margin: 0; font-size: 14px; line-height: 1.45;
color: rgba(255,255,255,.93);
/* Bounded so a longer blurb at handover cannot push the text block back up
the card into the transparent part of the ramp. */
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.cat-blurb[data-pending] { color: var(--zest); }
/* ----------------------------------------------------------- band ---- */
.band { position: relative; min-height: clamp(400px, 56vh, 600px); display: grid; place-items: center; overflow: hidden; background: var(--forest); }
.band img { position: absolute; inset-block: -14%; inset-inline: 0; width: 100%; height: 128%; object-fit: cover; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6,26,13,.78), rgba(6,26,13,.86)); }
.band-c { position: relative; z-index: 2; text-align: center; color: var(--paper); padding-inline: var(--pad); }
.band .k { color: var(--zest); margin-bottom: 18px; }
.band h2 { font-size: clamp(28px, 4.4vw, 60px); max-width: 19ch; margin-inline: auto; }
/* ----------------------------------------------------------- rail ---- */
.rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x mandatory; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--grass); }
/* Category filter chips. --leaf, not --grass: --grass is 3.29:1 on white and
is decoration-only in this palette (tokens.css says so, check_contrast.py
enforces it). The active chip inverts to --forest/--paper, which measures
14.84:1 — the same pair the hero uses. */
.filters {
display: flex; flex-wrap: wrap; gap: 8px;
margin-block-end: 22px;
}
.chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
background: var(--paper); color: var(--ink-soft);
font: 500 14px/1 var(--face-body); cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { border-color: var(--leaf); color: var(--leaf); }
.chip:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.chip.is-on { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.chip-n {
font: 500 12px/1 var(--face-mono); font-variant-numeric: tabular-nums;
color: var(--ink-soft); opacity: .7;
}
.chip.is-on .chip-n { color: var(--zest); opacity: 1; }
/* The products page runs the same .prod card as the home rail, but as a grid
rather than a horizontal scroller: a catalogue is for comparing lines
side by side, and a rail hides two thirds of them off-screen. `flex` on
.prod is simply ignored on a grid item, so the card needs no variant. */
.pgrid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prod { flex: 0 0 296px; scroll-snap-align: start; background: var(--stone); overflow: hidden; }
.prod .ph { aspect-ratio: 3/2; overflow: hidden; background: var(--forest); }
.prod img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.prod:hover img { transform: scale(1.07); }
.prod .b { padding: 20px; }
.prod h3 { font-size: 20px; margin-bottom: 8px; }
/* --ink-soft on --stone measures 6.52:1 — an already-checked pair, so the
description needs no new colour. Sized down from body copy because a card
is scanned, not read. */
.prod-desc {
margin: 0 0 14px; font-size: 14.5px; line-height: 1.5;
color: var(--ink-soft);
}
/* ---------------------------------------------------- spec tables ---- */
.spec-table { display: grid; }
.spec-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 9px 0; border-block-start: 1px solid var(--line); font-size: 14px; }
.spec-row > span:first-child, .spec-row > dt { color: var(--ink-soft); }
.spec-val { font-variant-numeric: tabular-nums; text-align: end; }
.tgrid { display: grid; gap: 1px; background: var(--line); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tgrid > div { background: var(--stone); padding: 26px; }
.tgrid dt { color: var(--leaf); margin-bottom: 8px; }
.tgrid dd { font-family: var(--face-display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
/* -------------------------------------------------------- partners ---- */
.mq { overflow: hidden; padding-block: 32px; border-block: 1px solid var(--line); --gap: clamp(40px, 6vw, 88px); }
.mq-track { display: flex; gap: var(--gap); width: max-content; animation: mq-slide 34s linear infinite; align-items: center; }
/* The -50% formula only loops seamlessly when the set is rendered TWICE;
app.js renders it once, so the track shuttled and snapped. It now emits a
duplicate marked aria-hidden, and this guards the geometry. */
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
@keyframes mq-slide { to { transform: translateX(calc(-1 * (50% + var(--gap) / 2) * var(--dir))); } }
.mq img { height: 42px; width: auto; opacity: .62; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.mq img:hover { opacity: 1; filter: none; }
/* ------------------------------------------------------------ cta ---- */
.cta { background: var(--forest); color: var(--paper); padding-block: clamp(68px, 10vw, 136px); position: relative; overflow: hidden; }
.cta::after {
content: ""; position: absolute; width: 60vw; height: 60vw;
inset-inline-end: -18vw; inset-block-start: -22vw; border-radius: 50%;
background: radial-gradient(circle, rgba(106,156,21,.34), transparent 66%);
pointer-events: none;
}
.cta-in { position: relative; z-index: 2; display: grid; gap: 34px; }
@media (min-width: 920px) { .cta-in { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.cta h2 { font-size: clamp(32px, 5.2vw, 70px); }
.cta .k { color: var(--zest); margin-bottom: 16px; }
.cta p { color: rgba(255,255,255,.72); max-width: 44ch; margin-top: 16px; }
.cta .spec-row { border-block-start-color: rgba(255,255,255,.16); }
.cta .spec-row > span:first-child { color: rgba(255,255,255,.6); }
/* --------------------------------------------------------- footer ---- */
.ft { background: #071F0E; color: rgba(255,255,255,.6); padding-block: clamp(48px, 7vw, 82px) 32px; font-size: 14px; }
.ft-top { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); margin-bottom: 42px; }
.ft h3 { font: 600 12px/1 var(--face-body); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); margin-bottom: 14px; }
.ft ul { display: grid; gap: 9px; }
.ft a:hover { color: var(--zest); }
.ft-base { border-block-start: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 12.5px; }
/* --------------------------------------------------- PENDING flags ----
HAZARD: any rule that sets its own `color` and can ALSO land on a
[data-pending] element wins at equal (0,1,0) specificity by source order.
Before adding one, check whether it can co-occur; if so, add a matching
`