/* ==========================================================================
weg-article.css — Whole Earth Gifts, Responsible Use pillar — v2.16.0
==========================================================================
One file, installed once in the theme. No framework, no build step,
no preprocessor. Loads site-wide, but every rule except two is scoped
so nothing outside the pages carrying the weg-doc body class changes.
That class means the twenty Responsible Use pages, the disclaimer
page, the author archive, and the fourteen supporting pages whose copy
is written (about, shipping, returns, contact-us, faqs, reviews,
lab-tests, rewards, referral, cost-comparison, kratom-education,
1-on-1-consultation, aka-gmp-qualified-kratom, disclaimers). Scope was
ruled wide 08/24/26; it was undecided in v2.1.0, which is why the
class was renamed from weg-ru. Kratom University is out — it is a
separate platform rebuild with its own template. The two exceptions:
1. `body.weg-doc` — page background, palette custom properties,
header-offset property, horizontal-overflow clip, and the
H1/subtitle type. The class is emitted by one shared PHP helper
(see RU_TEMPLATE_SPEC.md Section 3a), so these rules match only
the pages that helper names. The site background is NOT changed
globally.
2. `a:focus-visible` — a visible keyboard-focus outline on every
link, required site-wide by the build spec (WCAG 2.4.7). It uses
`currentColor`, so the outline inherits the link's own text
color and keeps the link's own contrast against whatever
background it sits on — including the cream-on-green closing
band. It adds an outline only; it changes no color, size, or
layout anywhere.
The @font-face rules are technically unscoped, but a font loads only
when something references its family name, and every reference below
is gated behind `weg-doc` or the `weg-` prefix. Pages without the
class never request the files.
The section rail was cut before deployment — owner decision, upheld
08/20/26. No rail rules exist in this file. The header-offset
property and the scroll-margin-top on headings are kept deliberately:
every H2 and H3 in the body HTML carries an id, and a heading reached
by any anchor — a Google jump-to-section link included — must land
clear of the fixed header (WCAG 2.2 SC 2.4.11).
Changed in v2 (build brief 08/22/26):
— The system serif stack is replaced by three self-hosted variable
fonts: Fraunces (H1/H2/H3), Source Serif 4 (body), IBM Plex Mono
(the last-checked line and the source citations, nowhere else).
Section 0 below. The size scale is retuned only where the new
metrics demanded it; each change is noted at the rule.
— The palette gains slate blue, terracotta, ochre alongside the
existing greens and cream, with hard permitted-use limits per
color, commented at the definitions.
— New `weg-` classes for the hub's directory: full-width breakout,
grid, plate, deckle, block, pair, band. Sections 10–16.
Sections:
0. Fonts (@font-face)
1. Page scope: background + custom properties (body.weg-doc)
2. Layout: the article column
3. Hero figure
4. H1 and subtitle (theme-emitted, outside .weg-article)
5. Base type
6. Headings
7. Links
8. Metadata: last-checked line and source citations (mono)
9. Byline spacing
10. Full-width breakout
11. The directory row (one treatment, all thirteen destinations)
11a. Section marking: the dinkus and the group rule
11b. The brand row (/brands/)
17. Disclosure (disclaimer) block
18. Keyboard focus (site-wide)
19. Reduced motion
Contrast, computed against the actual page background #f7eedf:
body text #212b26 12.69:1
H1 / headings #36604e 6.21:1
link hover #24493a 8.74:1
slate blue #4A6C8C 4.78:1 (text permitted — clears 4.5:1 AA)
terracotta #B5643C 3.76:1 (large text and rules only)
ochre #C8923A 2.39:1 (decorative and fill only, never text)
sage #8fa896 2.22:1 (rules and underlines only, never text)
========================================================================== */
/* --------------------------------------------------------------------------
0. Fonts
--------------------------------------------------------------------------
Three variable fonts, one file per family, self-hosted in the theme at
/fonts/ next to /css/ (the ../fonts/ paths below resolve from this
file's enqueued location — see RU_TEMPLATE_SPEC.md). Roughly 120KB
total; fonts are fetched on a budget separate from the 2MB HTML
limit. font-display: swap — the system serif fallbacks below are
metric-close enough that the swap does not reflow the column
painfully, and invisible text is never acceptable on a YMYL page.
No italic files are shipped: the hub copy contains no italics. If a
destination page introduces them, add the italic file then — the
browser's synthetic oblique is not good enough for Fraunces.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Fraunces";
src: url("../fonts/Fraunces-VF.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Serif 4";
src: url("../fonts/SourceSerif4-VF.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/IBMPlexMono-VF.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
1. Page scope — weg-doc pages only
--------------------------------------------------------------------------
The `weg-doc` body class is emitted by the shared scope helper in the
theme (RU_TEMPLATE_SPEC.md Section 3a) and exists nowhere else. Adding
a page to the scope is one edit in that helper, never a CSS change.
Background #f7eedf matches the measured paper ground of the sketchbook
and ink-and-wash images (their grounds sit within 2–9 points of it,
1.003–1.048 contrast), so artwork with empty paper melts into the
page instead of reading as a rectangle. The artwork's own inks drift
from the CSS palette (ochre ≈ #D08A24, terracotta ≈ #C15E2B in the
files); the two palettes rhyme rather than match, deliberately. Do
not sample colors out of the images.
Permitted use, per the amended palette (build brief 08/22/26):
--weg-paper background; text on the dark band only
--weg-ink body copy
--weg-green H1/H2/H3, links
--weg-green-deep link hover; the closing band ground
--weg-slate text permitted (4.78:1)
--weg-terracotta large text and rules only, never body copy.
On this page it means one thing: a destination
starts here
--weg-ochre decorative and fill only, never text at any size.
Spent on the two dinkus marks and nowhere else
--weg-sage rules and underlines only, never text. On this
page it means: a group of destinations starts here
--weg-header-offset: the height of the site's fixed header. It drives
scroll-margin-top on every heading that carries an id. 164px is the
measured header height on the live site, read off body.weg-doc in
DevTools 08/27/26; it replaces the 120px placeholder this file
shipped with. Re-measure and reset it here if the header changes —
see RU_TEMPLATE_SPEC.md. px is correct: the header it offsets is
itself a fixed pixel height.
overflow-x: clip — the directory breakouts (section 10) are sized in
vw, which ignores the scrollbar gutter; without this a desktop
scrollbar adds ~15px of horizontal scroll. clip (not hidden) so no
scroll container is created. Nothing on a weg-doc page may scroll
horizontally anyway; wide content scrolls inside its own box.
-------------------------------------------------------------------------- */
body.weg-doc {
--weg-paper: #f7eedf;
--weg-ink: #212b26;
--weg-green: #36604e;
--weg-green-deep: #24493a;
--weg-slate: #4A6C8C;
--weg-terracotta: #B5643C;
--weg-ochre: #C8923A;
--weg-sage: #8fa896;
--weg-band: #e8dabe;
--weg-header-offset: 164px;
background-color: #f7eedf;
overflow-x: clip;
}
/* --------------------------------------------------------------------------
2. Layout — the article column
--------------------------------------------------------------------------
One centered column at every width. The figure (section 3), the H1
(section 4), and the article all center on the same container, so the
shared axis needs no wrapper.
The measure is 68ch, capped at 700px. The ch unit is deliberate: it
holds the character count per line when a reader enlarges their
browser font, which a fixed pixel width does not. Do not convert it
to px. Source Serif 4's ch advance at 18px lands within 2px of
the old stack's, so the cap and the ch count both stand unchanged.
-------------------------------------------------------------------------- */
.weg-article {
max-width: min(68ch, 700px); /* the measure: 68ch, capped at 700px */
margin-left: auto;
margin-right: auto;
}
.weg-article img {
max-width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
3. Hero figure
--------------------------------------------------------------------------
Printed by the page template immediately above the H1. It centers on
the same container as the article column, so figure, H1, and text
share one axis. Renders at 440px, native 16:9 (the width/height
attributes on the ![]()
reserve the space — no layout shift). Never
full container width: at 1170px a 16:9 image is 658px tall and fills
a laptop viewport. No shadow, no border, no radius — the shared cream
ground is what integrates it. 440px is layout, not text; px is
correct. The figure is centered on the column axis; its left edge
sits inside the text edge by half the width difference, and that
inset is expected and correct.
-------------------------------------------------------------------------- */
.weg-figure {
width: 440px;
max-width: 100%;
margin: 0 auto 24px;
padding: 0;
}
.weg-figure img {
display: block;
width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
4. H1 and subtitle
--------------------------------------------------------------------------
Selector corrected 08/29/26. This section was written against
and the WEG Document template emits a bare
with no class at all, so every rule below matched nothing on
every page in the pillar. Read out of live source on nine pages:
eight bare, and the author archive carrying h1.auth_name. The H1 has
therefore been unstyled since the template shipped, taking neither
the face, the size, the colour, nor the 700px cap that puts its left
edge on the article column. It surfaced on 08/28/26 only because the
directory moved the article column far enough right for the mismatch
to be visible.
The element is matched by tag inside body.weg-doc rather than by
class, because the class is what was wrong. That class is a fact
about the theme, and the theme is free to change it; the tag is not.
These pages carry exactly one H1 and it is never inside the body
HTML, so tag scoping cannot collide with anything. The old class
selectors are kept alongside, so a future template that does emit
page-title is styled identically. Scoped to body.weg-doc. #36604e on #f7eedf is
6.21:1 — clear of 4.5:1, and far clear of the 3:1 large-text minimum.
v2 type: the H1 is Fraunces with the optical-size axis live
(font-optical-sizing: auto), weight 600. The size stays 36px.
Retune notes: Fraunces at display optical sizes is looser-spaced
than Iowan was, so the H1 alone takes -0.01em tracking; nothing
else in the scale needed a metric correction. The subtitle is set
in Source Serif 4 regular, not Fraunces — a serif deck under a
Fraunces title is the book-title-page pairing, and it keeps the
display face reserved for the three heading levels the brief names.
Centered 08/29/26, and the left-edge alignment below is abandoned.
The H1 is capped at 700px while the article measure computes to
roughly 612px, so a left-aligned H1 started 44px outside the copy: it
read neither as centered nor as aligned, which is the worst of the
two. Centering the text removes the dependency entirely. The block
stays centered and the text centers inside it, so the title lands on
the page's centre line, which is also the hero image's centre and the
article column's, at every viewport and every title length. The
max-width now only governs where a long title wraps.
The ch note below is kept because it still explains the cap. ch
scales with the element's own font size, so the article's measure —
68ch at 18px — is restated per element:
68 × 18 / 36 = 34ch at the title size
68 × 18 / 22 = 55.64ch at the subtitle size
-------------------------------------------------------------------------- */
body.weg-doc h1,
body.weg-doc .page-title,
body.weg-doc .page-subtitle {
color: #36604e; /* 6.21:1 on #f7eedf */
text-align: center; /* was left; see the 08/29/26 note above */
}
body.weg-doc h1,
body.weg-doc .page-title {
font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-optical-sizing: auto;
font-variation-settings: "SOFT" 0, "WONK" 0; /* Fraunces 1.000 defaults WONK
to 1 (wonky alternates ON); pin both axes so
production matches the reviewed rendering */
font-weight: 600;
font-size: 36px; /* above the H2's 28px */
letter-spacing: -0.01em; /* Fraunces display metrics; see note above */
line-height: 1.2;
max-width: min(34ch, 700px); /* = the article's 68ch measure; see above */
margin: 0 auto 12px;
}
body.weg-doc .page-subtitle {
font-family: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-weight: 400;
font-size: 22px;
line-height: 1.25;
max-width: min(55.64ch, 700px); /* = the article's 68ch measure; see above */
margin: 0 auto 24px;
}
/* --------------------------------------------------------------------------
5. Base type
--------------------------------------------------------------------------
Source Serif 4, self-hosted (section 0) — replaces the system serif
stack, which rendered three different pages on Mac, Windows and
Android. Built for screen reading at length; holds at 17px on a
phone. Sizes unchanged from v1: Source Serif 4's x-height is taller
than Iowan's, so at the same size it reads fractionally larger, which
is the right direction on a phone — no scale change was needed.
Every size and every margin in this file is px, not rem. The theme
sets html { font-size: 10px }, so a rem here resolves to 10px and the
whole scale renders at 62.5% of intent — 17px body copy arrives as
10.625px. The root value cannot be raised to 16px because the theme's
own rules are built on 10px and would all scale with it. px is
immune to the root value, whatever it becomes, and costs nothing: an
explicit html font-size already overrides the reader's browser
font-size preference, so rem was not carrying that benefit here
either. Browser zoom scales px normally, so resize-to-200% still
holds (WCAG 1.4.4). If the theme's root declaration is ever removed,
do not convert this file back — the ch measure in section 2 is what
carries reader font scaling. Left-aligned, never justified.
-------------------------------------------------------------------------- */
.weg-article {
font-family: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-size: 17px; /* below 768px */
line-height: 1.5;
color: #212b26; /* 12.69:1 on #f7eedf */
text-align: left;
}
@media (min-width: 768px) {
.weg-article {
font-size: 18px;
}
}
.weg-article p {
margin: 0 0 20px;
}
/* --------------------------------------------------------------------------
6. Headings
--------------------------------------------------------------------------
Fraunces, weight 600, optical-size axis live — the hand-cut old-style
character that sits naturally against woodblock and cut-paper
illustration. Sizes unchanged from v1 (H2 28px, H3 22px at
1.25); the face change needed no metric correction at these sizes.
More space above than below, so a heading binds to the text it
introduces. scroll-margin-top keeps a jumped-to heading clear of the
fixed site header (WCAG 2.2 SC 2.4.11). Every H2 and H3 in the body
HTML carries an id, so any anchor — a Google jump-to-section link, a
shared #fragment — can land on it; this rule is what makes that
landing visible. --weg-header-offset is defined on body.weg-doc, so
it is always available here.
-------------------------------------------------------------------------- */
.weg-article h2,
.weg-article h3 {
font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-optical-sizing: auto;
font-variation-settings: "SOFT" 0, "WONK" 0; /* see .page-title note */
font-weight: 600;
color: #36604e; /* 6.21:1 on #f7eedf */
line-height: 1.25;
scroll-margin-top: calc(var(--weg-header-offset) + 16px);
}
.weg-article h2 {
font-size: 28px;
margin: 40px 0 12px;
}
.weg-article h3 {
font-size: 22px;
margin: 32px 0 8px;
}
/* --------------------------------------------------------------------------
6a. Lists
--------------------------------------------------------------------------
Added 08/24/26. v2.1.0 shipped with no ul or ol rules at all, so a list
on any weg-doc page inherited whatever the theme happened to set. No
Day 1 page uses a list; the first later page that does would have
rendered wrong with nothing to say so.
Indented by padding rather than margin, so the marker sits inside the
68ch measure instead of hanging outside it. Item spacing is looser than
a default list and tighter than a paragraph: a list is one thought
broken into parts, so its items should read closer together than
paragraphs do. Bottom margin matches .weg-article p exactly, so a list
and a paragraph are interchangeable in the vertical rhythm.
Nested lists take no extra bottom margin, which would otherwise double
up against the parent item's own spacing.
-------------------------------------------------------------------------- */
.weg-article ul,
.weg-article ol {
margin: 0 0 20px;
padding-left: 24px;
}
.weg-article li {
margin-bottom: 8px;
}
.weg-article li:last-child {
margin-bottom: 0;
}
.weg-article ul {
list-style-type: disc;
}
.weg-article ol {
list-style-type: decimal;
}
.weg-article li::marker {
color: #36604e; /* 6.21:1 on #f7eedf */
}
.weg-article li > ul,
.weg-article li > ol {
margin: 8px 0 0;
}
/* --------------------------------------------------------------------------
7. Links
--------------------------------------------------------------------------
Link text #36604e (6.21:1), hover #24493a (8.74:1). The sage underline
#8fa896 (2.22:1) is decorative only and never carries text.
The 150ms color transition is the entire motion budget of the page:
nothing else moves, floats, or pulses. Killed under reduced motion
(section 19).
-------------------------------------------------------------------------- */
.weg-article a {
color: #36604e;
text-decoration: underline;
text-decoration-color: #8fa896;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
transition: color 150ms ease, text-decoration-color 150ms ease;
}
.weg-article a:hover {
color: #24493a;
text-decoration-color: #24493a;
}
/* --------------------------------------------------------------------------
8. Metadata — the last-checked line and the source citations
--------------------------------------------------------------------------
IBM Plex Mono, these two uses and nowhere else. The signature device:
the verification signals read as a stamp on a page whose whole
argument is that we checked and cited things. The body HTML marks the
five external citations with class="weg-cite".
The em sizes are optical compensation, not a reduction: Plex Mono's
fixed advance and tall x-height make it read larger than the serif at
equal size, so 0.88em sits it on the serif's apparent size. Colors
are untouched — the checked line stays body ink, citations stay link
green — so nothing here is lighter than body copy.
-------------------------------------------------------------------------- */
.weg-checked,
.weg-article a.weg-cite {
font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.weg-checked {
font-size: 15px;
letter-spacing: 0.01em;
}
.weg-article a.weg-cite {
font-size: 0.88em;
}
/* --------------------------------------------------------------------------
9. Byline and last-checked lines — spacing
--------------------------------------------------------------------------
The byline stays body face, body size, body color. Spacing only: the
two lines sit tight to each other at the top of the article.
-------------------------------------------------------------------------- */
.weg-byline {
margin-bottom: 4px;
}
.weg-checked {
margin-top: 0;
margin-bottom: 24px;
}
/* --------------------------------------------------------------------------
10. Full-width breakout
--------------------------------------------------------------------------
The directory sections keep their H2 and prose in the text column,
then break to the full viewport for their destinations. The change in
measure is the page's only navigational device: it tells the reader
they have moved from reading to choosing.
The mechanism: the breakout's containing block (.weg-section, inside
the centered .weg-article) is centered in the viewport, so
margin-left: calc(50% - 50vw) lands the element's left edge exactly
at the viewport's left edge, at any column width. This holds for any
chain of CENTERED ancestors with symmetric padding. It breaks if the
theme wrapper is ever off-center (a sidebar layout) or clips overflow
— if the RU template gains either, this whole approach needs
revisiting, not patching. The scrollbar-gutter overshoot of 100vw is
absorbed by overflow-x: clip on body.weg-doc (section 1).
-------------------------------------------------------------------------- */
.weg-breakout {
width: 100vw;
margin-left: calc(50% - 50vw);
}
/* --------------------------------------------------------------------------
11. The directory row — every destination on the page
--------------------------------------------------------------------------
Owner ruling 08/28/26. Six treatments (grid, plate, deckle, block,
pair, band) are replaced by one, and sections 12 through 16 are
retired into this one. They had been built to the artwork: washes
got type set into their bare paper, hard-edged pieces got a rule and
a label beneath, and each carried its own width cap, so the images
stepped from 1100px to 1800px down the page. Read as a whole it was
six geometries with no way to tell where one destination ended and
the next began.
One row, thirteen times. Image one half, text the other, vertically
centered, capped at 1400px. Sides alternate down the page, carried
by an explicit weg-row-flip class rather than nth-of-type, because
the rows sit inside different weg-section parents and a positional
selector would restart its count in each one.
The full-width terracotta rule above every row is the device that
was missing. It runs the whole viewport, so it reads as a divider
between items rather than as a caption rule belonging to one of
them. The last row closes with weg-row-end so the final item is
bounded on both sides.
Every row carries a heading and two sentences, so all thirteen are
the same height and nothing is ragged. The H3 is the destination's
locked anchor text and it is the link, not the row, so a screen
reader announces a heading rather than a run-together paragraph. No
click handlers anywhere; every href is real and crawlable. The
heading-size underline takes 2px so the sage line does not vanish at
22px; sage stays decorative and the link text itself is green,
6.21:1.
Two sentences at the body scale run four lines against a half-width
image roughly 371px tall, which fits inside the image height at
every width above the stack breakpoint.
<768px: one column, image above text, rule still above. The halves
would each be under 350px, which is too narrow for the image to
carry and too narrow for the type to hold a measure.
-------------------------------------------------------------------------- */
.weg-breakout img {
display: block;
width: 100%;
height: auto;
}
.weg-row {
border-top: 2px solid var(--weg-terracotta);
padding-block: 40px;
}
.weg-row-end {
border-bottom: 2px solid var(--weg-terracotta);
}
/* A standalone terracotta rule, where a list of destinations ends and
prose begins and there is no next row to carry the rule as a border.
Added 08/29/26 for the toolkit and extended to the hub the same day,
under both contents lists.
The first note on this class said it must never appear on the hub,
on the grounds that terracotta there means a destination starts and
a loose rule would make the mark mean two things. That was the wrong
reading of its own rule. Terracotta marks the boundary between
destinations and everything else: between two rows that boundary
falls between two destinations, and under a contents list it falls
between the destinations and the prose. One mark, one job, in both
places. Stating it the narrow way would have produced two pages that
close the same object differently.
It rides .weg-breakout in the markup rather than repeating the
calculation, and sets only its block margins so the inherited
margin-left survives. */
.weg-article .weg-rule {
border: 0;
border-top: 2px solid var(--weg-terracotta);
margin-block: 88px;
}
.weg-row-inner {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 1400px;
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 48px);
}
@media (min-width: 768px) {
.weg-row-inner {
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
/* The flip is a column assignment, never a direction reversal:
source order stays image then text, so reading order and tab order
are identical on both sides of the page. */
.weg-row-flip .weg-row-img {
grid-column: 2;
grid-row: 1;
}
.weg-row-flip .weg-row-text {
grid-column: 1;
grid-row: 1;
}
}
.weg-row-img {
margin: 0;
}
.weg-article .weg-row-text h3 {
margin: 0 0 8px;
}
.weg-article .weg-row-text h3 a {
text-decoration-thickness: 2px;
}
.weg-row-text p {
margin: 0;
}
/* --------------------------------------------------------------------------
11b. The brand row — /brands/ only
--------------------------------------------------------------------------
Added v2.15.0, 08/29/26. The /brands/ hub reuses the row geometry of
section 11 rather than inventing a second vocabulary for the same
shape: seven brands, image one half and text the other, sides
alternating, capped at 1400px. Two things differ, and both are
because a logo is not an illustration.
A logo is not sized to its column. Section 11 sets
.weg-breakout img to width: 100%, which is right for the Responsible
Use artwork, where the image is the destination's illustration and
should fill its half. A brand mark filling half of a 1400px row
renders around 660px wide and reads as a billboard. It is capped at
320px and centred in its half instead.
The cap is also below the native width of every file in the set,
including the two smallest at 385px and 478px, so nothing upscales.
Do not raise it past 385px without replacing those two files.
The rows carry no group bands, so the standalone rule is what opens
the set. Terracotta means the same thing it means everywhere else in
this file: a destination starts here. The first row therefore takes
no border of its own, exactly as a row following a group band does,
or the reader gets two rules a few pixels apart with nothing to tell
them apart. Same defect, same fix, second place it occurs.
-------------------------------------------------------------------------- */
.weg-article .weg-rule + .weg-row {
border-top: 0;
}
/* The space under the standalone rule was 128px against 88px above it,
because weg-rule's own 88px bottom margin and the row's 40px top
padding stack. The row's padding is what does the work between two
rows and there is no row above this one, so it is dropped on the
first row only. 88px each side, symmetric. v2.16.0, 08/29/26. */
.weg-article .weg-rule + .weg-row {
padding-top: 0;
}
.weg-article .weg-row-brand .weg-row-img img {
width: auto;
max-width: 320px;
margin-inline: auto;
}
/* --------------------------------------------------------------------------
11a. Section marking: the dinkus and the group rule
--------------------------------------------------------------------------
Added 08/28/26. The page is two documents in one treatment: an essay
that argues, then a directory that routes. Every H2 was set
identically, so nothing told the reader which half they were in, and
the only thing marking the groups was a change of illustration
technique. That is not a signal a reader can be expected to find.
Two marks, two jobs, and the colours carry the distinction:
sage band a group of destinations starts here. Seven times.
A filled compartment holding the group heading and
its lead sentence, never a rule.
terracotta one destination starts here. Thirteen times. The
only horizontal rule left on the page, which is what
makes it readable.
The ochre dinkus is retired from the page 08/29/26. It marked where
the essay stopped and resumed; the two closing essay sections moved
above the directory, so there is nothing to resume, and the first
sage band already says the directory has begun. The rule below is
kept for a future use rather than deleted.
Terracotta is deliberately not reused for the group rule. It already
means one thing thirteen times, and a mark that means two things
means neither.
The dinkus is an hr, not a paragraph of bullet characters. It is a
thematic break, so a screen reader announces a separator rather than
reading three dots aloud, and the glyphs live in CSS where they
cannot be pasted away by an editor. The trailing letter-spacing after
the last dot is cancelled by an equal text-indent, which is what
keeps the group optically centred rather than sitting a fraction left.
-------------------------------------------------------------------------- */
.weg-dinkus {
border: 0;
margin: 56px 0;
text-align: center;
line-height: 1;
}
.weg-dinkus::before {
content: "\2022\2009\2022\2009\2022";
display: block;
color: var(--weg-ochre); /* decorative; carries no meaning alone */
font-size: 20px;
letter-spacing: 0.7em;
text-indent: 0.7em; /* cancels the trailing space, centres the trio */
}
/* The group mark is a band, not a rule. 08/29/26, superseding the
full-width sage rule shipped the same day. That rule was correct in
scale and wrong in kind: a terracotta rule already runs the full
viewport above every destination, so a sage rule of the same width
directly above it stacked two horizontal lines a few inches apart and
the reader could no longer tell which line opened what. The page had
more rules than it had structure.
A filled band cannot be confused with a rule at any distance. It also
holds the group heading and its lead sentence inside one object, so
the group reads as a titled compartment containing destinations
rather than as a line with copy hanging beneath it.
The band is a darker paper, not a colour. 08/29/26, superseding the
sage tint shipped earlier the same day. Sage read as a new element
introduced into the page rather than as the page's own ground
stepping down, and at seven repetitions that is loud. #e8dabe is
#f7eedf darkened on its own hue, so the band reads as shadow rather
than as a second colour, and sage returns to being an underline.
Measured, not asserted: 1.20:1 against the paper, which is the band
edge; body ink 10.57:1 on the band; heading green 5.17:1 on the band.
The 08/20/26 finding that struck #f2f5ec at 1.04:1 as invisible is
the reason this one was computed before it was chosen.
The band does not do its own breakout math. It carries .weg-breakout
in the markup and inherits the width and the negative margin from the
one implementation that has been rendering correctly on this page
since 08/28/26. v2.6.0 wrote the same calculation a second time, on a
pseudo-element inside the H2, and that duplicate is the only thing
that changed on the day the H1 moved. One implementation, one place
to fix it. The children are pulled back to the text measure so the
copy inside the band sets identically to the copy outside it. */
.weg-article .weg-group-head {
margin-top: 96px;
margin-bottom: 56px;
padding: 44px 24px;
box-sizing: border-box; /* the padding is inside the 100vw, never added to it */
background-color: var(--weg-band);
}
/* Terracotta separates one destination from the next and nothing else.
A band already says a group has started, so the first row inside a
group takes no rule above it; a rule there was marking a boundary
the band had just marked. 08/29/26. */
.weg-article .weg-group-head + .weg-row {
border-top: 0;
}
.weg-article .weg-group-head > * {
width: min(68ch, 700px);
margin-left: auto;
margin-right: auto;
}
.weg-article .weg-group-head h2 {
margin-top: 0;
}
.weg-article .weg-group-head > *:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
16b. Data table
--------------------------------------------------------------------------
Added 08/29/26 for the lab tests page and rewritten the same day.
The first version scoped every rule to `.weg-article table` while the
wrapper carried no scope at all, so on the first page it shipped to
the wrapper positioned the table and nothing else applied: no header
ground, no rules, no width. **Everything here is now keyed to the
`weg-table` class on the table element itself.** A rule that depends
on an ancestor is a rule that depends on markup somebody has to
remember, and this file has already lost a day to that once.
It is a two-column table and it is sized to its content rather than
broken out to the row measure. A table stretched to 1400px with two
short columns is a pair of words at either edge of the screen with a
gulf between them, which is harder to read than the list it replaced,
not easier. It centres as a block and its cells set left, because
centred cell text loses the left edge the eye scans down.
Full grid rules rather than horizontal ones. On a two-column table
the vertical rule is what ties a product to its brand across the
gap. Sage at 1px: decorative only, which is the use that colour has
always had, and light enough that twenty rows do not read as twenty
section breaks.
-------------------------------------------------------------------------- */
.weg-table-wrap {
margin: 40px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.weg-table {
border-collapse: collapse;
margin-inline: auto;
font-size: 17px;
line-height: 1.4;
text-align: left;
}
table.weg-table th,
table.weg-table td {
border: 1px solid var(--weg-sage);
padding: 12px 22px;
vertical-align: top;
}
table.weg-table thead th {
background-color: var(--weg-band);
color: #36604e; /* 5.17:1 on the band */
font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-optical-sizing: auto;
font-variation-settings: "SOFT" 0, "WONK" 0;
font-weight: 600;
font-size: 18px;
white-space: nowrap;
}
/* The brand column repeats down the table and is the thing the eye
scans, so it holds its line rather than wrapping mid-name. */
table.weg-table td.weg-brand {
white-space: nowrap;
}
/* --------------------------------------------------------------------------
17. Disclosure (disclaimer) block
--------------------------------------------------------------------------
Carries the legal warnings; it is the conspicuousness argument in a
failure-to-warn posture. It inherits body size and body color exactly —
the inherits below are explicit guards against any other stylesheet
shrinking or lightening it. Never smaller, never lighter, never inside
an accordion, never collapsed, never truncated. The mono metadata
class (section 8) must never be applied to it.
Separation is a border, not a tint: the old sage ground #f2f5ec
measures 1.04:1 against #f7eedf — invisible. A 2px #36604e rule above
the block survives any future background change.
-------------------------------------------------------------------------- */
/* Widened to the row measure 08/29/26. It sets at 1400px, the same cap
as .weg-row-inner, so its edges land on the outer edges of the
directory images rather than on the text column. The disclosure is
the one block on the page that is not the article, and at the
article's own measure it read as the last paragraph of it. Nothing
about the type changes: still body size, still body colour, still
never collapsed. Wider is a stronger conspicuousness position than
the text measure, never a weaker one.
Two rules, not four. Owner ruling 08/29/26, replacing the box shipped
earlier the same day. A closed box reads as a callout or a legal
sidebar, which is a thing a reader is invited to skip; two rules read
as the page turning to something else, which is a thing a reader
reads. Horizontal only, so nothing about it looks like a component.
The widening is done in this file rather than by adding a class to
twenty pages. The element sets its own width and then centres itself
by pulling left half the difference: 50% is half its containing
block, and the min() is half its own width, clamped so it never
exceeds the viewport. No markup anywhere has to change and every page
in the pillar gets it at once. */
.weg-disclaimer {
width: min(1400px, 100vw - 40px);
margin-left: calc(50% - min(700px, 50vw - 20px));
border: 0;
border-top: 2px solid #36604e;
border-bottom: 2px solid #36604e;
margin-top: 72px;
padding: 40px clamp(20px, 4vw, 48px);
box-sizing: border-box; /* padding inside the width, never added to it */
font-size: inherit; /* body size, exactly */
color: inherit; /* body color, exactly */
}
/* Retired 08/29/26 and left in place as a no-op. It briefly carried the
1400px cap and the padding on the hub only, which is why the other
nineteen pages rendered their border hard against the type. The block
itself now carries both, so this wrapper governs nothing. It stays
defined so that the hub does not depend on being repasted, and it is
removed from the hub markup at the next edit to that page. */
.weg-disclaimer-inner {
max-width: 1400px;
margin-inline: auto;
}
.weg-disclaimer-link {
margin-top: 20px;
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
18. Keyboard focus — site-wide
--------------------------------------------------------------------------
Required site-wide by the build spec: a visible :focus-visible outline
on every link, at least 2px, at least 3:1 against its background.
currentColor makes the outline the link's own text color: wherever
link text is readable (≥ 4.5:1), the outline clears 3:1 automatically,
on any background on the site. Within the article: #36604e at 6.21:1;
on the closing band: cream at 8.74:1.
-------------------------------------------------------------------------- */
a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
19. Reduced motion
--------------------------------------------------------------------------
The page's only motion is the 150ms link-color transition (section 7).
Under prefers-reduced-motion it goes too — the hover states still
apply, instantly.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.weg-article a {
transition: none;
}
}