/* Reset, typography and vertical rhythm. */
*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` beats any layout this stylesheet asks for.
 *
 * The browser's own rule for it is `display: none`, and it lives in the user
 * agent stylesheet -- which means ANY author rule that sets `display` on the
 * same element wins, and the element stays on the page with the attribute
 * still set. That is exactly what happened: `.tabs__panel:has(p img)` was
 * given `display: grid` to put the picture beside the copy, and from that
 * moment the tab groups on About and on all five loan pages printed every
 * panel at once. The script was working the whole time -- three of the four
 * panels carried `hidden` and were painted anyway.
 *
 * !important is right here and nowhere near this rule's neighbours: `hidden`
 * is a statement that the element is not part of the page, not a hint about
 * its layout, so nothing about layout may outrank it.
 */
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--step-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/*
 * Headings are set in the display serif.
 *
 * It answers the wordmark, which is a classical high-contrast serif and was
 * the one piece of brand the first pass left unechoed. Loaded only on pages
 * this theme renders (apollonia_uses_display_serif), and the fallback stack
 * is a real one -- nothing here is laid out to a metric only Newsreader has.
 *
 * Two headings opt out below, and both are labels rather than headings in
 * the typographic sense: the boxed section marker and the people-group
 * caption are set in small uppercase Inter, where a serif at 13px with
 * 0.12em of tracking would simply look broken.
 */
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.05; margin: 0 0 0.4em; }
h1 { font-size: var(--step-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--step-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--step-h3); font-weight: 400; letter-spacing: 0; }

/* h4 belongs to the client's stored copy -- it opens each tab panel -- and
   without a rule it rendered as 13px bold body text, indistinguishable from
   a lead-in sentence. Same family as the headings above it, one step down. */
h4 { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: 0; margin: 0 0 0.5em; }

.slabel,
.peoplegroup { font-family: var(--font); }

/*
 * No max-width here. A paragraph takes the width of whatever holds it.
 *
 * This rule used to cap every <p> on the site at --measure, which is right
 * for a page that IS a column of prose and wrong everywhere else: on About
 * and on the loan pages it drew a 748px line inside a 1344px container, so
 * the text stopped short of its own box for no reason a reader could see.
 *
 * Line length is now a container's decision, made where the container is
 * defined: .textpage caps the whole legal column, .faq__a caps an answer,
 * .hero__sub caps the opening line. Those three still use --measure (or
 * their own value), so the token keeps its meaning -- it just stops being
 * applied to text that never asked for it.
 */
p { margin: 0 0 1.2em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* The sticky header is --hdr-bar-h (88px) tall and covers the top of the
   viewport, so any in-page anchor would otherwise land its target
   underneath it. Slightly more than the bar's own height leaves the target
   clear of the border rather than flush against it. */
html { scroll-padding-top: 104px; }

img { max-width: 100%; height: auto; display: block; }

.wrap {
	max-width: var(--wrap-max);
	margin-inline: auto;
	padding-inline: var(--wrap-pad);
}

.section { padding-block: var(--space-section); }
.section--wash { background: var(--wash); }
.section--ink { background: var(--ink); color: var(--paper); }

/*
 * Dark sections swap in the tokens built for the dark ground.
 *
 * Both defaults above are correct on --paper and --wash and stay untouched
 * there; on --ink both fail WCAG AA, and only here. --muted is 3.68:1 on
 * --ink against the 4.5:1 minimum for text, and --green is 2.09:1 -- so a
 * hover or a focus ring in the footer was effectively invisible. Their
 * dark-ground siblings measure 6.39:1 and 8.07:1, which clears 4.5:1 for
 * the text and 3:1 (WCAG 1.4.11) for the focus outline with room to spare.
 */
.section--ink .u-muted { color: var(--muted-on-ink); }
.section--ink a:hover { color: var(--green-on-ink); }
.section--ink a:focus-visible { outline-color: var(--green-on-ink); }

.u-tabular { font-variant-numeric: tabular-nums; }
.u-muted { color: var(--muted); }

/* Screen-reader-only text, used by skip links and icon buttons. */
.u-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/*
 * A skip link that stays hidden while it holds focus is a defect, not an
 * accommodation. The rule above is right for text meant only for a screen
 * reader, but the skip link is also for the sighted keyboard user: without
 * this, the first Tab on every page moved focus into a 1x1 box clipped to
 * nothing at (-1, -1), and the focus ring simply vanished.
 *
 * The rule is keyed on :focus rather than on the class, so only the element
 * actually holding focus is revealed -- the other users of .u-sr (the
 * burger's "Menu" label, in a <span> that cannot take focus) stay hidden,
 * and the link returns to hidden the moment focus leaves it.
 *
 * :focus, not :focus-visible: this link is unreachable by pointer, so every
 * focus it ever receives is a keyboard focus, and :focus cannot be talked
 * out of matching by a heuristic.
 *
 * position: fixed so the panel is placed against the viewport rather than
 * against whatever ancestor happens to be positioned, and z-index above the
 * sticky header (z-index: 50) so it is not painted behind it. White on
 * --ink is 19.80:1 and the --green-on-ink outline is 8.07:1 on that panel.
 */
.u-sr:focus {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 100;
	width: auto; height: auto;
	padding: 14px 22px; margin: 0;
	overflow: visible; clip-path: none;
	background: var(--ink);
	color: var(--paper);
	font-size: var(--step-body);
	text-decoration: none;
	outline: 2px solid var(--green-on-ink);
	outline-offset: 2px;
}