* leaves text hugging the left of any column already sized for reading.
* Use .measure (or set a width on the container) where prose needs it.
*/
.measure { max-width: var(--line-length); }
.measure-tight { max-width: var(--measure-tight); }
/* Opening paragraph: larger and looser than body copy. */
.lede {
font-size: var(--size-1);
line-height: var(--leading);
letter-spacing: var(--tracking);
color: var(--text-muted);
}
/* Small label above a heading. */
.eyebrow {
display: block;
margin-bottom: var(--space-2xs);
font-size: var(--size--1);
font-weight: var(--weight-strong);
line-height: var(--leading);
letter-spacing: var(--tracking-caps-total); /* capitals */
text-transform: uppercase;
color: var(--on-soft);
}
small, .text-small { font-size: var(--size--1); line-height: var(--leading); letter-spacing: var(--tracking); }
strong, b { font-weight: var(--weight-strong); }
a {
color: var(--link);
text-decoration-thickness: var(--border-width-s);
text-underline-offset: 0.15em;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }
/* The focus ring lives in "Form controls & focus" below. */
ul, ol { padding-left: var(--space-m); }
/*
* List spacing applies to PROSE lists only. Navigation, button groups and
* card grids are lists too, and flow margins on those knock flex/grid items
* out of alignment (the site header) or balloon the spacing (the footer).
*
* Presence of a class is not the test — a footer nav is a nav whether or not
* anyone put a class on it — so navigation context opts out explicitly.
*/
:where(ul, ol) > li { margin-bottom: var(--space-2xs); }
:where(ul, ol) > li:last-child { margin-bottom: 0; }
nav ul, nav ol,
header ul, header ol,
footer ul, footer ol,
menu {
margin: 0;
padding-left: 0;
list-style: none;
}
nav li, header li, footer li, menu li {
margin-bottom: 0;
}
/* A list explicitly used for layout carries no bullets, indent or margin. */
:where(ul, ol)[class] {
margin: 0;
padding-left: 0;
list-style: none;
}
:where(ul, ol)[class] > li { margin-bottom: 0; }
blockquote {
/* The quote bar is a quiet border in the group's colour: Dials' subtle
* border pattern (tokens.md, "A subtle border in a group's colour"),
* declared here rather than at :root so it follows an .is-* class on the
* quote. --line itself is a strong 3:1 line since Dials v0.2.0; 30% of
* it keeps the bar about as light as it was before (the pattern's
* example is 40%: a step darker). Decoration: no contrast promised. */
--quote-bar: color-mix(in oklab, var(--line) 30%, var(--border));
padding-left: var(--space-m);
border-left: var(--border-width-l) solid var(--quote-bar);
color: var(--text-muted);
font-style: italic;
}
hr {
height: 0;
margin: var(--space-l) 0;
border: 0;
border-top: var(--border-width-s) solid var(--border);
}
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* Media ────────────────────────────────────────────────────────────────
* Images carry NO radius and NO background plate by default.
*
* They used to. `img { border-radius: var(--radius-m); background: var(--surface-raised) }`
* was added to fix one square photo on Wellbrook, and it cost far more than it
* saved: every migration since has had to undo it, because a faithful clone of a
* customer's live site decides its own corners, and the background plate fills
* the transparent areas of every PNG and SVG — a logo on a dark footer renders
* as a solid block. Ten of the thirteen sites on this box carried an override
* for it before it was removed.
*
* A radius is a design decision belonging to the site's own stylesheet, next to
* the cards it should match. Use .is-rounded (below) or a site-layer rule; do
* not put it back here. */
img, picture, video, canvas, svg {
height: auto;
}
/* Opt in where a photo should match the radius of the cards around it. */
img.is-rounded, .is-rounded img { border-radius: var(--radius-m); }
figure { margin-inline: 0; }
figcaption {
margin-top: var(--space-2xs);
font-size: var(--size--1);
line-height: var(--leading);
letter-spacing: var(--tracking);
color: var(--text-quiet);
}
/* Tables ───────────────────────────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th, td {
padding: var(--space-2xs) var(--space-xs);
border-bottom: var(--border-width-s) solid var(--border);
vertical-align: top;
}
th {
font-weight: var(--weight-strong);
color: var(--text-strong);
}
tbody tr:last-child :where(th, td) { border-bottom: 0; }
/* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════
* A text field's look, and every focus ring on the site, are set ONCE,
* here: by the --field-* and --focus-ring* tokens and a few base rules.
* Every text-like control on the site (contact, search, careers, booking,
* anything mediflare.js or Connect writes) inherits it, so they match by
* construction.
*
* - This section is copied VERBATIM from _template and never edited in a
* site: check-system.sh fails the site if its copy differs by a character.
* A site differs only in TOKEN VALUES, set in the site layer's own :root,
* below this section (a later :root wins over the defaults here).
* - Never restyle a control inside a component. A component rule may place
* a field (grid, margin, width) but never sets its border, radius,
* background or height -- check-system.sh fails the site if one does.
* - Fields and buttons share ONE corner, --control-radius: set it in the
* site layer's :root and both follow. Never set --field-radius
* (check-system.sh fails it), except to 0px in underline mode below;
* pill buttons mean pill fields.
* - The base rules are at zero specificity (:where), so any token change
* reaches every field and nothing here outranks a deliberate override.
* - ONE focus ring per site, on links, buttons and fields alike: an outline
* in --focus-ring at --focus-ring-w. No other rule sets a focus outline,
* colour or box-shadow (check-system.sh fails one); outline-offset may be
* adjusted where a ring would be clipped.
* - Underline-only fields: set --field-border-w: 0,
* --field-border-bottom: var(--border-width-s) solid