/* assets/css/fonts.css */
/**
 * Self-hosted webfaces.
 *
 * Downloaded from Google Fonts and served from this origin, never from
 * fonts.gstatic.com. Performance and a single origin are part of the reason,
 * but the deciding one is that a third-party font request discloses the
 * visitor's IP address to that third party. A meaningful share of this audience
 * reads with a live case and a possibly monitored device, and the Privacy Policy
 * is far stronger for being able to say the site makes no third-party request
 * at all.
 *
 * Both families are licensed under the SIL Open Font License 1.1, which permits
 * redistribution. See OFL.txt alongside the font files.
 *
 * Latin and latin-ext subsets only, 97 KB across six files. latin-ext is carried
 * deliberately: English at launch, but Canada implies a French question
 * eventually and the accented characters should already be there when it
 * arrives.
 *
 * Inclusive Sans upright is a VARIABLE font covering 400 to 700 in one file.
 * Google serves the same bytes whichever static weight you ask for, so asking
 * for 400, 600 and 700 separately downloads the identical file three times.
 * The weight range below is what makes one file serve all three.
 */

/* Geologica SemiBold. Major headings only - page and section titles. */

@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/wp-content/themes/fathers-inquiry/assets/fonts/geologica-600-normal-latin.woff2") format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/wp-content/themes/fathers-inquiry/assets/fonts/geologica-600-normal-latin-ext.woff2") format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inclusive Sans. Body text, UI, captions, navigation, buttons. */

@font-face {
	font-family: 'Inclusive Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/wp-content/themes/fathers-inquiry/assets/fonts/inclusive-sans-normal-latin.woff2") format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inclusive Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/wp-content/themes/fathers-inquiry/assets/fonts/inclusive-sans-normal-latin-ext.woff2") format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inclusive Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/wp-content/themes/fathers-inquiry/assets/fonts/inclusive-sans-italic-latin.woff2") format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inclusive Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/wp-content/themes/fathers-inquiry/assets/fonts/inclusive-sans-italic-latin-ext.woff2") format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* assets/css/tokens.css */
/**
 * Design tokens.
 *
 * Single source of truth for colour, type and spacing. Mirrored in the editor
 * palette in functions.php, which disables custom colours so an author cannot
 * pick a value that fails contrast.
 *
 * Every contrast ratio below is from the design brief
 * (docs/site-content/claude-design-prompt.md) and is against --fi-bg unless
 * stated otherwise. WCAG 2.1 AA is a hard requirement, not a polish pass:
 * much of this audience is reading in distress, on a phone, at night.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour. Dark mode is the only mode.
	 *
	 * A constraint of this background that shapes the whole layout:
	 * #2E373F is mid-tone, so filled surfaces barely separate from it -
	 * every candidate lands between 1.14:1 and 1.29:1 in either
	 * direction. Subtle elevation does not work here. SEPARATE REGIONS
	 * WITH BORDERS AND RULES, NOT WITH RAISED OR INSET FILLS. Cards get
	 * a --fi-border-subtle outline, never a lighter background.
	 * --------------------------------------------------------------- */

	--fi-bg: #2E373F;

	/*
	 * The same colour at 44% alpha, for the one surface that sits over moving
	 * content: the stuck header. It is written out rather than mixed because
	 * the mix functions that would derive it are newer than the browsers this
	 * audience is on. KEEP THE FIRST SIX DIGITS IN STEP WITH --fi-bg - a header
	 * that is a slightly different hue from the page is the kind of thing
	 * nobody can name and everybody notices.
	 */
	--fi-bg-translucent: #2E373F70;
	--fi-surface: #374149;           /* decorative separation only, 1.16:1 */
	--fi-border-subtle: #46515A;     /* decorative dividers and rules */
	--fi-border-strong: #8C9BA9;     /* input borders, button edges, 4.25:1 */

	/*
	 * TWO WEIGHTS, TWO COLOURS, and the pairing is the point.
	 *
	 * Running text sits a step below white. Full-strength white across two
	 * thousand words of legal prose is tiring to read on a dark background,
	 * and it leaves emphasis nowhere to go - these documents mark one clause
	 * in a sentence as unmissable roughly two thirds as often as they start a
	 * paragraph, and if the body is already at maximum the bold cannot be
	 * louder than it.
	 *
	 * So the body drops and the emphasis rises. Both still clear AAA on
	 * --fi-bg, which is what makes the step affordable: 7.06:1 for the body
	 * and 12.1:1 for the emphasis, against the 7:1 that AAA asks of normal
	 * text. There was room to spend and this spends it on hierarchy.
	 */
	--fi-text: #C3C6C9;              /* running text at normal weight, 7.06:1 */
	--fi-text-strong: #FFFFFF;       /* emphasis and headings, 12.11:1 */
	--fi-text-muted: #A8B0B8;        /* secondary, captions, metadata, 5.52:1 */

	--fi-accent: #FF8859;            /* links, focus rings, accent rules, 5.14:1 */
	--fi-accent-hover: #E66946;
	--fi-on-accent: #14181C;         /* the ONLY label colour on an accent fill */

	--fi-secondary: #526E86;         /* secondary button FILL ONLY */
	--fi-secondary-hover: #445D72;

	/*
	 * Two traps, recorded here so nobody rediscovers them the hard way.
	 *
	 * 1. Never white text on the orange: 2.35:1 at rest, 3.24:1 on hover.
	 *    Both fail. And --fi-bg as the label passes at rest (5.14:1) but
	 *    fails on hover (3.73:1). #14181C is the only value clearing both.
	 *
	 * 2. Never use --fi-secondary as a TEXT colour. Against the background
	 *    it measures 2.27:1. It is a button fill and nothing else.
	 */

	/* ---------------------------------------------------------------
	 * Typography
	 *
	 * Geologica SemiBold for major headings only. Inclusive Sans for
	 * everything else. Long-form reading is the primary activity here:
	 * the most important pages are 2,000-word plain-language documents,
	 * not marketing pages.
	 * --------------------------------------------------------------- */

	--fi-font-display: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fi-font-body: "Inclusive Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--fi-weight-display: 600;
	--fi-weight-regular: 400;
	--fi-weight-medium: 600;
	--fi-weight-bold: 700;

	/* Body is 18px MINIMUM on mobile. This site is read, not scanned. */
	--fi-size-base: 1.125rem;        /* 18px */
	--fi-size-sm: 1rem;              /* 16px - captions and metadata only */
	--fi-size-xs: 0.875rem;          /* 14px - legal small print only */

	--fi-size-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--fi-size-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
	--fi-size-h3: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);

	/*
	 * h4 used to be 1.125rem - the same value as --fi-size-base, so a
	 * sub-heading was distinguished from the paragraph under it by weight
	 * alone. In documents this dense that is not enough structure: the eye
	 * reads a continuous column and the numbered sections stop being
	 * navigable.
	 *
	 * h4 now sits a clear step above body text, and h3 was lifted with it so
	 * the order p < h4 < h3 < h2 holds at every viewport width rather than
	 * collapsing on a phone. h1 and h2 are unchanged.
	 */
	--fi-size-h4: clamp(1.25rem, 1.16rem + 0.45vw, 1.375rem);

	--fi-leading-body: 1.7;          /* brief: 1.6 to 1.75 */
	--fi-leading-tight: 1.2;

	/*
	 * A radio or a checkbox, sized against the LABEL rather than against
	 * itself. An input does not inherit font-size, so an em here would resolve
	 * against the control's own ~13.3px default and come out too small.
	 */
	--fi-control-size: calc(var(--fi-size-base) * 1.15);

	/* Measure capped at 68-72 CHARACTERS.

	   Note that 68ch does not give 68 characters. The ch unit is the width of
	   the "0" glyph, which in Inclusive Sans is narrower than the average
	   character, so 68ch measured 81 characters per line - well past the
	   60-75 that actually reads comfortably. Measured with a canvas against
	   the rendered font rather than assumed: 58ch gives about 69. */
	--fi-measure: 58ch;
	--fi-measure-narrow: 46ch;

	/* ---------------------------------------------------------------
	 * Space. A 4px base, so everything lands on a common grid.
	 * --------------------------------------------------------------- */

	--fi-space-1: 0.25rem;
	--fi-space-2: 0.5rem;
	--fi-space-3: 0.75rem;
	--fi-space-4: 1rem;
	--fi-space-5: 1.5rem;
	--fi-space-6: 2rem;
	--fi-space-7: 3rem;
	--fi-space-8: 4rem;
	--fi-space-9: 6rem;

	/* The 16px side gutter, never less, on the narrowest phone. */
	--fi-gutter: 1rem;

	/*
	 * The header's height, as a number rather than a measurement.
	 *
	 * It is knowable without JavaScript because the wordmark is the tallest
	 * thing in that row and it is never scaled: a fixed 168x72 SVG, stated
	 * once in header-footer.css and here. The home page uses it to start the
	 * hero at the top of the document rather than underneath the header, so
	 * the artwork runs behind a header that has no background of its own.
	 *
	 * Measuring it in script instead would move the hero after first paint,
	 * which is a layout shift on the one page that has to load well.
	 *
	 * If the row ever wraps - it does not above 340px - this under-reads and
	 * the hero simply starts a little lower. Nothing breaks.
	 */
	--fi-header-height: calc(72px + 2 * var(--fi-space-4));

	/*
	 * The page background, as a value rather than as a rule.
	 *
	 * Declared here so the stylesheet and assets/js/nav.js share one copy of
	 * the URL - the script reads it back out to preload the file, and a second
	 * copy in JavaScript would be a thing to forget when this changes.
	 */
	--fi-page-bg: url("/wp-content/uploads/2026/09/fire-sparks-and-trails-in-the-night.jpg");
	--fi-container: 72rem;

	/* ---------------------------------------------------------------
	 * Shape and focus
	 * --------------------------------------------------------------- */

	/* Buttons are fully rounded on both variants, with horizontal padding
	   generous enough that the radius reads as intentional. */
	--fi-radius-pill: 999px;
	--fi-radius: 4px;

	--fi-border-width: 1px;
	--fi-border-width-strong: 1.5px;

	/* A 2px accent ring at a 2px offset. The offset is what keeps it
	   visible against the primary button's own orange fill. */
	--fi-focus-width: 2px;
	--fi-focus-offset: 2px;

	--fi-transition: 150ms ease;
}

/**
 * Respect prefers-reduced-motion. Not a nicety: vestibular triggers are real,
 * and this audience is already under load.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fi-transition: 0ms;
	}
}

/* assets/css/base.css */
/**
 * Base layer. Resets, document defaults, typography and focus.
 * Component styles come later, in their own files.
 */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background-color: var(--fi-bg);
	color: var(--fi-text);
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
	font-weight: var(--fi-weight-regular);
	line-height: var(--fi-leading-body);
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
 * Anything set bold is set white. Headings, and <strong> wherever it appears.
 *
 * The body dropped to --fi-text-strong's quieter neighbour so that emphasis
 * would have somewhere to go; this is the other half of that, and the two have
 * to move together or the change is just a dimmer site.
 */
h1, h2, h3, h4,
strong, b {
	color: var(--fi-text-strong);
}

h1, h2, h3 {
	font-family: var(--fi-font-display);
	font-weight: var(--fi-weight-display);
	line-height: var(--fi-leading-tight);
	text-wrap: balance;
}

h1 { font-size: var(--fi-size-h1); }
h2 { font-size: var(--fi-size-h2); }
h3 { font-size: var(--fi-size-h3); }

h4 {
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-h4);
	font-weight: var(--fi-weight-bold);
	line-height: var(--fi-leading-tight);
}

p, li { max-width: var(--fi-measure); }

a {
	color: var(--fi-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	/* Named properties, not the `all` shorthand.

	   `transition: ease 0.1s` means transition-property: all, which includes
	   outline-color - so the focus ring, which is correctly suppressed for
	   mouse clicks by the :focus:not(:focus-visible) rule below, faded from
	   orange to transparent instead of never appearing. That fade was visible
	   as a flash around every clicked link.

	   The ring itself is deliberate and stays: keyboard users need it, and
	   CLAUDE.md treats a visible focus state as a requirement rather than a
	   preference. What is fixed here is that it no longer animates. */
	transition: color 0.1s ease, text-underline-offset 0.1s ease;
}

a:hover {
	color: var(--fi-accent-hover);
	text-underline-offset: 0.4em;
}

/* prefers-reduced-motion already zeroes --fi-transition, but this rule sets a
   duration directly, so it needs its own opt-out. The underline still moves on
   hover; it simply arrives without animating. */
@media (prefers-reduced-motion: reduce) {
	a { transition: none; }
}

/**
 * Focus. Visible on every interactive element, at 3:1 against whatever sits
 * behind it. :focus-visible alone would drop the ring for mouse users on
 * elements that genuinely need it, so both are set and the default outline is
 * never simply removed.
 */
:focus {
	outline: var(--fi-focus-width) solid var(--fi-accent);
	outline-offset: var(--fi-focus-offset);
}

:focus:not(:focus-visible) { outline-color: transparent; }

:focus-visible {
	outline: var(--fi-focus-width) solid var(--fi-accent);
	outline-offset: var(--fi-focus-offset);
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

hr {
	border: 0;
	/* Rule intentionally invisible (owner decision 2026-09-26). The generated
	   policy pages carry an <hr> between numbered sections, and with a visible
	   line every section break read as a hard division in a document that is
	   already heavily subdivided. The element stays for its semantics - a
	   screen reader still announces the break - and the margin still does the
	   spacing work. */
	/* border-top: var(--fi-border-width) solid var(--fi-border-subtle); */
	margin: var(--fi-space-6) 0;
}

/* Layout ------------------------------------------------------------ */

.fi-container {
	width: 100%;
	max-width: var(--fi-container);
	margin-inline: auto;
	padding-inline: var(--fi-gutter);
}

.fi-prose > * + * { margin-block-start: var(--fi-space-4); }
.fi-prose > * + h2 { margin-block-start: var(--fi-space-7); }
.fi-prose > * + h3 { margin-block-start: var(--fi-space-6); }

/* Skip link --------------------------------------------------------- */

.fi-skip-link {
	position: absolute;
	inset-inline-start: var(--fi-gutter);
	inset-block-start: var(--fi-space-2);
	z-index: 100;
	padding: var(--fi-space-3) var(--fi-space-5);
	background-color: var(--fi-accent);
	color: var(--fi-on-accent);
	border-radius: var(--fi-radius-pill);
	font-weight: var(--fi-weight-medium);
	text-decoration: none;
	transform: translateY(-200%);
}

.fi-skip-link:focus {
	transform: translateY(0);
	color: var(--fi-on-accent);
}

.fi-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* assets/css/prose.css */
/**
 * Long-form reading.
 *
 * The most important pages here are two-thousand-word plain-language documents,
 * read by men in distress, usually on a phone, often late at night, sometimes
 * while deciding whether to hand over the worst years of their life. Everything
 * below is in service of that and nothing is decoration.
 *
 * The register is a public record rather than a campaign. Restraint reads as
 * credibility; visual urgency reads as advocacy and undermines the premise. So
 * there is no drop cap, no pull quote, no accent bar down the side of a
 * paragraph. The typography's job is to disappear.
 */

/* Measure ------------------------------------------------------------
 *
 * The single biggest lever on readability. 60-75 characters is the usual
 * advice; these documents sit at the upper end because they are dense with
 * clauses and a shorter line breaks arguments across too many rows.
 *
 * Constrained on the PROSE, not on the container. Putting it on the container
 * centred every page inside the viewport, so a policy page sat in the middle
 * while the home page ran from the left edge - two different pages of the same
 * site, apparently laid out by two different people. The container still caps
 * at the site width; the text simply starts at its left edge like everything
 * else.
 *
 * Full-width children (tables, the FAQ accordion) opt out by overriding
 * max-width.
 */

.fi-prose { max-width: var(--fi-measure); }

/* .fi-container sets `margin-inline: auto`. Putting both classes on one element
   therefore centred the narrower measure inside the viewport, which is exactly
   how the home page intro ended up indented while the hero above it started at
   the gutter. The measure never centres itself, on any element, whatever else
   that element is. */
.fi-prose { margin-inline-start: 0; }

/* Page head ----------------------------------------------------------- */

.fi-page__header {
	padding-block: var(--fi-space-8) var(--fi-space-5);
}

.fi-page__title {
	max-width: 22ch;   /* titles break as titles, not as sentences */
	margin: 0;
}

/* The title and the prose share a left edge with the home page. */
.fi-page__header, .fi-page__title { text-align: start; }

/* Vertical rhythm ----------------------------------------------------
 *
 * Space BEFORE a heading is larger than space after it, so a heading belongs
 * to the text beneath rather than floating between two blocks. This is the
 * thing that makes a long document feel structured rather than continuous, and
 * it is the most common omission.
 */

.fi-prose > * + * { margin-block-start: 0.9em; }

.fi-prose > * + h2 { margin-block-start: var(--fi-space-8); }
.fi-prose > * + h3 { margin-block-start: var(--fi-space-7); }
.fi-prose > * + h4 { margin-block-start: var(--fi-space-6); }

.fi-prose h2, .fi-prose h3, .fi-prose h4 { margin-block-end: var(--fi-space-3); }

.fi-prose h2 + *, .fi-prose h3 + *, .fi-prose h4 + * { margin-block-start: var(--fi-space-3); }

/* h4 is a sub-heading inside a numbered section, so it reads as a label rather
   than as another title competing with the h3 above it. The BODY face is what
   makes it a label; the size step is what makes it a heading at all. It was
   previously set to --fi-size-base, which is the same value as a paragraph, so
   the only thing separating a sub-heading from the text under it was weight. */
.fi-prose h4 {
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-h4);
	font-weight: var(--fi-weight-bold);
	line-height: 1.35;
	color: var(--fi-text-strong);
}

/* Paragraphs ---------------------------------------------------------- */

.fi-prose p {
	/* Avoids orphans and short last lines without the ragged edges `balance`
	   produces on long paragraphs. Ignored by browsers that do not support it,
	   which costs nothing. */
	text-wrap: pretty;
	max-width: var(--fi-measure);
}

/* The opening paragraph carries slightly more weight, which gives the eye a
   place to start on a page that is otherwise a wall of even text. Restrained
   on purpose: a size step, not a different voice. */
.fi-prose > p:first-child {
	font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	color: var(--fi-text-strong);
}

/*
 * On a policy page the date stamp is the first child, so the paragraph AFTER
 * it is the real opening line. It gets what p:first-child would have given it.
 */
.fi-prose > p.fi-updated + * {
	font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	color: var(--fi-text-strong);
}

/* The last-updated stamp -------------------------------------------------
 *
 * It is the first block on five policy pages, so the rule above was promoting
 * a date to the opening line of the document, in bold, at lead size. It is
 * provenance rather than content: a reader checking whether a policy is
 * current wants to find it, and nobody else should notice it.
 *
 * Quiet, not invisible. --fi-text-muted on --fi-bg measures 5.5:1, which still
 * clears WCAG 1.4.3 AA - text does not get an exemption from contrast for
 * being unimportant, and 14px grey-on-grey is exactly the combination that
 * usually fails. The selector matches the specificity of the rule above and
 * follows it, which is what lets it win.
 */
.fi-prose > p.fi-updated {
	font-size: var(--fi-size-xs);
	font-weight: var(--fi-weight-regular);
	color: var(--fi-text-muted);
}

.fi-prose > p.fi-updated + * { margin-block-start: var(--fi-space-5); }

/* Emphasis -----------------------------------------------------------
 *
 * These documents use <strong> heavily - around two thirds as many strongs as
 * paragraphs. That is a drafting characteristic rather than a mistake: the
 * copy repeatedly needs to make one clause in a sentence unmissable.
 *
 * But bold at 700, set that often, turns a page into shouting and stops
 * signalling anything. 600 against the same colour still reads as emphasis at
 * a glance while letting the page settle.
 */

.fi-prose strong { font-weight: var(--fi-weight-medium); }

/* Italic is emphasis, so it is coloured as emphasis. These documents use it
   for the aside at the foot of a section, which should not be dimmer than the
   section it closes. */
.fi-prose em { font-style: italic; color: var(--fi-text-strong); }

/* Lists ---------------------------------------------------------------
 *
 * Markers in the accent colour and hung outside the text block, so the list
 * scans as a list and the text edge stays aligned with the paragraphs above.
 */

.fi-prose ul, .fi-prose ol {
	padding-inline-start: 0;
	margin-inline-start: var(--fi-space-5);
	max-width: var(--fi-measure);
}

.fi-prose li { margin-block-end: var(--fi-space-3); }
.fi-prose li:last-child { margin-block-end: 0; }

.fi-prose li::marker { color: var(--fi-accent); }

.fi-prose ol { list-style: decimal; }
.fi-prose ol li::marker { font-weight: var(--fi-weight-bold); }

.fi-prose li > ul, .fi-prose li > ol { margin-block-start: var(--fi-space-3); }

/* Links ---------------------------------------------------------------
 *
 * Underlined in running text. Colour alone is not enough: WCAG 1.4.1 says
 * colour must not be the only means of conveying information, and a reader
 * with low colour sensitivity has nothing else to go on.
 */

.fi-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Rules ---------------------------------------------------------------
 *
 * There are 87 <hr> elements across these pages, one between each numbered
 * section. The line itself is off, so all they contribute is space - and at
 * full margin that was a lot of dead air in a long document.
 */

.fi-prose hr { margin-block: var(--fi-space-6); }

/* Tables --------------------------------------------------------------
 *
 * Allowed to exceed the measure, because a table forced to 68 characters
 * wraps every cell. Scrolls horizontally on a phone rather than shrinking the
 * text below legibility.
 */

.fi-prose table {
	width: 100%;
	max-width: none;
	margin-block: var(--fi-space-5);
	border-collapse: collapse;
	font-size: var(--fi-size-sm);
}

.fi-prose th, .fi-prose td {
	padding: var(--fi-space-3);
	border-block-end: var(--fi-border-width) solid var(--fi-border-subtle);
	text-align: start;
	vertical-align: top;
}

.fi-prose th {
	font-weight: var(--fi-weight-bold);
	border-block-end-color: var(--fi-border-strong);
}

.fi-prose tr:last-child td { border-block-end: 0; }

/* Blockquotes ---------------------------------------------------------- */

.fi-prose blockquote {
	margin-inline: 0;
	padding-inline-start: var(--fi-space-5);
	border-inline-start: var(--fi-border-width-strong) solid var(--fi-border-subtle);
	color: var(--fi-text-muted);
}

/* Code ----------------------------------------------------------------- */

.fi-prose code {
	padding: 0.1em 0.35em;
	background-color: var(--fi-surface);
	border-radius: 3px;
	font-size: 0.9em;
}

/* The FAQ accordion is a list of controls rather than prose, so it takes the
   full measure of its container and does not inherit paragraph spacing. */
.fi-prose > details { margin-block-start: 0; }

/* A call to action inside a document. It is a control, so it does not take the
   paragraph's link underline, and it gets air on both sides rather than the
   0.9em that separates two sentences. */
.fi-prose .fi-cta__actions {
	margin-block: var(--fi-space-6);
}

.fi-prose .fi-cta__actions a {
	text-decoration: none;
	padding: 0.85em 2.2em;
	font-size: var(--fi-size-base);
}

/* assets/css/header-footer.css */
/**
 * Header and footer.
 *
 * The header is sticky and gets out of the way while reading. The `is-*`
 * classes below are applied by assets/js/nav.js; without that script the
 * header is simply static, the navigation is a plain visible list, and every
 * link still works. Nothing here depends on JavaScript having run.
 */

/* Header --------------------------------------------------------------
 *
 * At the top of the page the header has NO background of its own: the wordmark
 * and the nav sit directly on the hero, which is what lets the hero artwork run
 * up behind them. A background only appears once the header has left the top
 * and is floating over content scrolling underneath it, where it is the
 * difference between a header and an unreadable overlap.
 *
 * STICKY ONLY WHEN ENHANCED, and that is load-bearing rather than tidiness.
 * `is-stuck` is applied by nav.js. A page with JavaScript off would otherwise
 * get a header that is permanently sticky AND permanently transparent, which is
 * the one combination that breaks: body text scrolls up through the wordmark.
 * Without the script the header simply scrolls away with the page. Every link
 * still works and nothing overlaps.
 */

.fi-header {
	position: relative;
	z-index: 50;
	padding-block: var(--fi-space-4);
	background-color: transparent;
	transition: transform 0.25s ease, background-color 0.2s ease;
}

.fi-header.is-enhanced {
	position: sticky;
	inset-block-start: 0;
}

.fi-header.is-stuck,
/* An open menu needs a background even at the very top, or the dropdown links
   render over whatever the hero is showing. */
.fi-header.is-menu-open {
	background-color: var(--fi-bg);
}

/* No rule under the stuck header. The 1px line was removed everywhere else on
   the site, and reinstating it here would put back the one border a reader sees
   on every page. Depth comes from the colour change alone. */

/*
 * Translucent, where the browser can blur what is behind it.
 *
 * GUARDED, AND THE GUARD IS THE POINT. Without backdrop-filter a 44% alpha is
 * not a softer header, it is a broken one: body text scrolls through the
 * wordmark at full contrast and the nav becomes unreadable over whatever
 * happens to be passing. So the opacity is applied ONLY where the blur that
 * makes it work is also available, and everything else keeps the solid colour.
 *
 * -webkit- first, for Safari versions that shipped the prefixed property only.
 */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
	.fi-header.is-stuck,
	.fi-header.is-menu-open {
		background-color: var(--fi-bg-translucent);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}

/*
 * Someone who has asked their system for less transparency gets the solid
 * header back. The setting exists for people who find text over texture hard
 * to read, which is the exact thing a translucent header creates, and much of
 * this audience is reading a long document in a bad state on a small screen.
 *
 * After the @supports block deliberately, so it wins.
 */
@media (prefers-reduced-transparency: reduce) {
	.fi-header.is-stuck,
	.fi-header.is-menu-open {
		background-color: var(--fi-bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.fi-header.is-hidden { transform: translateY(-100%); }

/* Reduced motion: present always, sliding never. */
.fi-header.is-static,
.fi-header.is-static.is-hidden {
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.fi-header { transition: none; }
}

.fi-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fi-space-4);
}

.fi-wordmark {
	margin: 0;
	margin-inline-end: auto;
	/* Pulled out of the container gutter so the mark sits flush to the edge
	   without shifting anything else. --fi-gutter is 16px. */
	margin-inline-start: calc(var(--fi-gutter) * -1);
	line-height: 0;
}

.fi-wordmark a { display: inline-block; text-decoration: none; }

/* Natural size, 168x72. */
.fi-wordmark__svg {
	display: block;
	width: 168px;
	height: 72px;
	max-width: 100%;
	transition: opacity 0.2s;
}

/* The mark is a link to the home page and nothing in it says so - no
   underline, no colour change, because it is artwork. This is the only
   feedback it gives. */
.fi-wordmark__svg:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
	.fi-wordmark__svg { transition: none; }
}

/*
 * One step down on the narrowest phones, and only there.
 *
 * At 320px the row is 168 + 107 + 44 plus two gaps against 312 usable, so the
 * menu button wrapped onto a line of its own and sat under the wordmark. The
 * alternative was dropping the Testify button at that width, which would take
 * the only persistent way in off every interior page for the readers most
 * likely to be on an old handset. Shrinking the mark costs nothing instead.
 */
@media (max-width: 23rem) {
	.fi-header__inner { gap: var(--fi-space-3); }

	.fi-wordmark__svg {
		width: 120px;
		height: auto;
	}
}

.fi-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fi-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-nav__list a {
	color: var(--fi-text-strong);
	font-size: var(--fi-size-sm);
	text-decoration: none;
}

.fi-nav__list a:hover,
.fi-nav__list .current-menu-item > a {
	color: var(--fi-accent);
	text-decoration: underline;
}

.fi-header__cta { margin: 0; }

/* The menu button ----------------------------------------------------
 *
 * Only ever shown when nav.js has run, so a page without JavaScript never
 * offers a control that cannot do anything.
 *
 * nav.js appends it after the Testify button in the DOM, not before, so the
 * rightmost control is also the last one a keyboard reaches. Ordering the two
 * with CSS instead would have put visual order and focus order out of step
 * (WCAG 2.4.3) for no gain.
 */

.fi-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	/* A real target rather than a 24px icon. Filled one-handed, on a phone,
	   by someone who is not calm. */
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--fi-text);
	cursor: pointer;
	/* Pulled into the gutter so the bars sit in the corner, mirroring the
	   wordmark's negative margin at the other end. Half the gutter, not all of
	   it: the 22px bars are centred in a 44px target and so already carry 11px
	   of their own inset. */
	margin-inline-end: calc(var(--fi-gutter) / -2);
}

.fi-nav__toggle-bars,
.fi-nav__toggle-bars::before,
.fi-nav__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.fi-nav__toggle-bars::before,
.fi-nav__toggle-bars::after { content: ""; position: absolute; }

.fi-nav__toggle-bars::before { transform: translateY(-7px); }
.fi-nav__toggle-bars::after  { transform: translateY(7px); }

.is-menu-open .fi-nav__toggle-bars { background-color: transparent; }
.is-menu-open .fi-nav__toggle-bars::before { transform: rotate(45deg); }
.is-menu-open .fi-nav__toggle-bars::after  { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.fi-nav__toggle-bars,
	.fi-nav__toggle-bars::before,
	.fi-nav__toggle-bars::after { transition: none; }
}

@media (max-width: 52rem) {
	/* Collapse only where the script can reopen it. */
	.fi-header.is-enhanced .fi-nav { display: contents; }

	.fi-header.is-enhanced .fi-nav__toggle {
		display: inline-flex;
		position: relative;
	}

	/* The wordmark's auto margin already pushes both controls to the right
	   edge; this only decides which of the two is outermost. */
	.fi-header.is-enhanced .fi-header__cta { order: 1; }
	.fi-header.is-enhanced .fi-nav__toggle { order: 2; }

	.fi-header.is-enhanced .fi-nav__list {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		gap: 0;
		order: 10;
	}

	.fi-header.is-enhanced.is-menu-open .fi-nav__list { display: flex; }

	.fi-header.is-enhanced .fi-nav__list a {
		display: block;
		padding-block: var(--fi-space-4);
		font-size: var(--fi-size-base);
	}

	.fi-header.is-enhanced .fi-nav__list li + li {
		border-block-start: var(--fi-border-width) solid var(--fi-border-subtle);
	}
}

/* Footer ---------------------------------------------------------------
 *
 * Grouped into columns because a flat row of nine links is a list nobody
 * reads. The groups follow what a reader is trying to do rather than how the
 * site is organised: someone looking for the takedown route is not thinking
 * "policies".
 */

.fi-footer {
	/*
	 * 6rem of air above the footer on a desktop, where the page has width and
	 * the gap reads as separation. On a phone it is most of a screen of
	 * nothing between the last sentence and the first link, which reads as the
	 * page having ended twice. Halved below 40rem.
	 */
	margin-block-start: var(--fi-space-9);
	padding-block: var(--fi-space-7) var(--fi-space-6);
	color: var(--fi-text-muted);
	font-size: var(--fi-size-sm);
}

@media (max-width: 40rem) {
	.fi-footer { margin-block-start: var(--fi-space-7); }
}

.fi-footer__columns {
	display: grid;
	gap: var(--fi-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.fi-footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60rem) {
	.fi-footer__columns { grid-template-columns: repeat(3, 1fr); }
}

.fi-footer__heading {
	margin: 0 0 var(--fi-space-3);
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-xs);
	font-weight: var(--fi-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fi-text-strong);
}

.fi-footer__list { margin: 0; padding: 0; list-style: none; }

.fi-footer__list li { margin-block-end: var(--fi-space-2); }

/*
 * Orange, at rest rather than only on hover.
 *
 * --fi-accent measures 5.14:1 against --fi-bg, so it clears AA for normal text
 * on its own - which is what makes this affordable, because the footer is
 * nothing but links and colouring them all had to survive the contrast check
 * rather than only the eye.
 */
/*
 * Underlined, like every other link on the site.
 *
 * WCAG 1.4.1: colour must not be the only thing marking a link, and a reader
 * with low colour sensitivity had nothing else to go on here. The prose has
 * always underlined; the footer was the one place relying on orange alone.
 * Same 1px as .fi-prose a, so the two match.
 */
.fi-footer__list a {
	color: var(--fi-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.fi-footer__list a:hover { color: var(--fi-accent-hover); }

.fi-footer__foot {
	margin-block-start: var(--fi-space-7);
	padding-block-start: var(--fi-space-5);
	border-block-start: var(--fi-border-width) solid var(--fi-border-subtle);
}

/*
 * The mark and the imprint side by side, once there is room for both.
 *
 * Stacked below 48rem, because 120px of logo beside a two-line sentence on a
 * phone leaves the sentence about eleven characters wide. auto for the mark and
 * 1fr for the text, so the mark takes exactly what it is and the imprint takes
 * everything that is left rather than the two splitting the width evenly.
 *
 * Aligned to the start rather than centred: the imprint wraps to two lines at
 * some widths and one at others, and centring would make the mark move up and
 * down as the viewport changed.
 */
@media (min-width: 48rem) {
	.fi-footer__foot {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: var(--fi-space-6);
	}

	/* The mark is first in the DOM, so it is first in the grid. */
	.fi-footer__wordmark { margin-block-end: 0; }
}

/* Smaller than the header's 168x72, because it is a signature rather than a
   masthead. Pulled into the gutter so it starts on the same line as everything
   else, exactly as the header's does. */
.fi-footer__wordmark {
	margin: 0 0 var(--fi-space-4);
	margin-inline-start: calc(var(--fi-gutter) * -1);
	line-height: 0;
}

.fi-footer__wordmark a { display: inline-block; }

.fi-footer__wordmark .fi-wordmark__svg {
	width: 120px;
	height: auto;
}

/*
 * No measure on this one, unlike every other block of text on the site.
 *
 * The 58ch limit exists for paragraphs somebody reads in sequence. This is a
 * single sentence of small print at the foot of the page, and capping it beside
 * the mark left two thirds of the row empty. It fills its column instead.
 */
.fi-footer__imprint { max-width: none; margin: 0; }


/* assets/css/components.css */
/**
 * Components.
 *
 * Remember the constraint from the design brief: #2E373F is mid-tone, so
 * filled surfaces barely separate from it. SEPARATE REGIONS WITH BORDERS AND
 * RULES, NOT WITH RAISED OR INSET FILLS.
 */

/* Buttons ----------------------------------------------------------- */

.fi-button {
	/* inline-flex, not inline-block. With inline-block the label sits on a
	   text baseline, so its optical position depends on the font's ascent and
	   descent metrics - and Geologica's leave it sitting high inside the pill.
	   Flex centring ignores those metrics and centres the box, which is what
	   the pill shape needs. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.6em;          /* horizontal ~2x vertical, so the pill reads as intentional */
	border: 0;
	border-radius: var(--fi-radius-pill);
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-sm);
	font-weight: var(--fi-weight-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fi-transition);
}

.fi-button--primary {
	background-color: var(--fi-accent);
	/* Transparent, but present. Both variants declare the same border width so
	   they are the same height whatever the visible styling does - a border on
	   one and none on the other left them 3px apart. */
	border: var(--fi-border-width-strong) solid transparent;
	/* #14181C is the ONLY label that clears contrast in BOTH rest and hover.
	   White fails at 2.35:1; the page background fails on hover at 3.73:1. */
	color: var(--fi-on-accent);
}

.fi-button--primary:hover,
.fi-button--primary:focus {
	background-color: var(--fi-accent-hover);
	color: var(--fi-on-accent);
}

.fi-button--secondary {
	background-color: var(--fi-secondary);
	color: #fff;
	/* Border removed at the owner's request, 2026-09-26.
	   
	   Worth recording what it cost, because it is measurable rather than a
	   matter of taste. The fill is 2.27:1 against the page background and
	   1.76:1 on hover. WCAG 2.1 SC 1.4.11 asks for 3:1 on the boundary of a
	   control, so without a border this button's edge falls below it and the
	   hover state makes it recede into the page rather than stand out. The
	   label itself is unaffected: white on this fill is 5.34:1 and passes.
	   
	   If the borderless look is wanted without that trade, lightening
	   --fi-secondary to #62829E puts the fill itself at roughly 3:1 against
	   the background and the edge becomes visible on its own. That is a brand
	   colour change, so it is not made here. */
	border: var(--fi-border-width-strong) solid transparent;
}

.fi-button--secondary:hover,
.fi-button--secondary:focus {
	background-color: var(--fi-secondary-hover);
	color: #fff;
}

/* The statistic ------------------------------------------------------
 *
 * docs/03 section 7. The figure is the loudest thing in the block, the source
 * is visible without interaction, and the caveat is one keystroke away and
 * impossible to omit.
 */

.fi-stat {
	margin: var(--fi-space-6) 0;
	padding: var(--fi-space-5);
	/* Outline, not fill - see the note at the top of this file. */
	border: var(--fi-border-width) solid var(--fi-border-subtle);
	border-radius: var(--fi-radius);
}

.fi-stat__figure {
	margin: 0;
	font-family: var(--fi-font-display);
	font-weight: var(--fi-weight-display);
	font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	line-height: 1.05;
	color: var(--fi-accent);
	max-width: none;
}

.fi-stat__claim {
	margin: var(--fi-space-3) 0 0;
	font-size: var(--fi-size-base);
	max-width: var(--fi-measure-narrow);
}

.fi-stat__source,
.fi-stat__basis,
.fi-stat__checked {
	margin: var(--fi-space-3) 0 0;
	color: var(--fi-text-muted);
	font-size: var(--fi-size-xs);
	max-width: var(--fi-measure-narrow);
}

.fi-stat__source a { color: var(--fi-accent); }

/* The "but…" control. A real <details>, so it works with JS disabled. */

.fi-stat__caveat {
	margin-block-start: var(--fi-space-4);
	border-block-start: var(--fi-border-width) solid var(--fi-border-subtle);
	padding-block-start: var(--fi-space-4);
}

.fi-stat__caveat-toggle {
	display: inline-block;
	cursor: pointer;
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-sm);
	font-weight: var(--fi-weight-medium);
	color: var(--fi-accent);
	/* The default triangle sits awkwardly against a pill-shaped design system,
	   and a custom marker below reads more like a control. */
	list-style: none;
}

.fi-stat__caveat-toggle::-webkit-details-marker { display: none; }

.fi-stat__caveat-toggle::before {
	content: "+";
	display: inline-block;
	width: 1.25em;
	font-weight: var(--fi-weight-bold);
}

.fi-stat__caveat[open] .fi-stat__caveat-toggle::before { content: "–"; }

.fi-stat__caveat-body {
	margin-block-start: var(--fi-space-3);
	color: var(--fi-text);
	font-size: var(--fi-size-sm);
}

/* Crisis signposting. Beside the number, never in the footer.
   docs/13 section 5.3, WHO and Samaritans safe messaging. */

.fi-stat__crisis {
	margin-block-start: var(--fi-space-4);
	padding: var(--fi-space-4);
	border: var(--fi-border-width-strong) solid var(--fi-accent);
	border-radius: var(--fi-radius);
}

.fi-stat__crisis-lead {
	margin: 0 0 var(--fi-space-2);
	font-weight: var(--fi-weight-medium);
}

.fi-stat__crisis-list {
	margin: 0;
	padding-inline-start: var(--fi-space-5);
	font-size: var(--fi-size-sm);
}

/* Home page --------------------------------------------------------
 *
 * Built empty-state-first. For its first month this page has no recordings,
 * so the blocks that depend on them are absent rather than placeheld, and the
 * spacing has to hold up with two blocks on the page as well as five.
 */

.fi-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Tall enough to carry the artwork, capped so the question is never pushed
	   below the fold on a laptop. vh rather than dvh deliberately: dvh changes
	   as mobile browser chrome retracts, which would make the hero resize
	   while someone is reading the first thing on the page. */
	min-height: clamp(19rem, 58vh, 32rem);
	padding-block: var(--fi-space-7) var(--fi-space-8);
}

.fi-hero__question {
	max-width: 20ch;          /* forces the question to break as a question, not a paragraph */
	margin: 0;
}

/* One sentence, and it has to land in the time someone gives a home page.
   Narrower than the body measure on purpose: this is read in one pass, not
   settled into. */
.fi-hero__lead {
	max-width: 48ch;
	margin-block-start: var(--fi-space-5);
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	line-height: 1.6;
	/*
	 * Full strength, at normal weight. The running-text colour is a step below
	 * white so that emphasis has somewhere to go over two thousand words - an
	 * argument that does not apply to one sentence that is read once, before
	 * any of those words, and is the first thing on the site.
	 */
	color: var(--fi-text-strong);
}

.fi-hero__actions { margin-block-start: var(--fi-space-6); }

/*
 * The hero's button is the only action on the page, so it is sized like one.
 *
 * Padding in em rather than rem, so it grows with the larger font instead of
 * being a fixed box around bigger text. The 2:1 horizontal-to-vertical ratio
 * of the base button is kept, which is what stops the pill reading as an
 * accident at this size.
 */
.fi-hero__actions .fi-button {
	padding: 1em 2.6em;
	font-size: var(--fi-size-base);
}

/* The portrait ---------------------------------------------------------
 *
 * Two columns only where there is room for two. Below that the text keeps the
 * full width and the picture follows it, AFTER the button rather than before,
 * so the one action never gets pushed off a phone screen by an image.
 */

.fi-hero__inner { display: grid; gap: var(--fi-space-6); }

@media (min-width: 52rem) {
	.fi-hero__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
		gap: var(--fi-space-7);
	}
}

.fi-hero__figure {
	position: relative;   /* the play button is placed against this */
	line-height: 0;
}

.fi-hero__figure img,
.fi-hero__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fi-radius);
	/*
	 * NO FILTER. The previous still was mostly a bright window, and a white
	 * rectangle on a #2E373F page reads as something that arrived from
	 * somewhere else, so it was desaturated and dimmed. This one is already
	 * dark and already graded warm, and putting grayscale over it would only
	 * fight the grading it arrived with.
	 */
}

/* Constrained on a phone, where it is stacked and would otherwise take most of
   a screen on the way to the rest of the page. */
@media (max-width: 52rem) {
	.fi-hero__figure img,
	.fi-hero__video { max-height: 44vh; object-fit: cover; }
}

/* The play button ------------------------------------------------------
 *
 * Added by assets/js/nav.js and only when the video will not start by itself,
 * so a page where autoplay worked never shows a control that does nothing.
 * Centred over the poster, which is what is on screen at that moment.
 */

.fi-hero__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* A real target, filled one-handed on a phone. */
	width: 72px;
	height: 72px;
	padding: 0;
	background-color: var(--fi-accent);
	border: 0;
	border-radius: var(--fi-radius-pill);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.fi-hero__play:hover { transform: translate(-50%, -50%) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.fi-hero__play,
	.fi-hero__play:hover { transition: none; transform: translate(-50%, -50%); }
}

/* A triangle from a border, so there is no icon file and nothing to load.
   Nudged right because a triangle's optical centre is left of its box. */
.fi-hero__play-icon {
	display: block;
	margin-inline-start: 5px;
	border-block: 13px solid transparent;
	border-inline-start: 21px solid var(--fi-bg);
	border-inline-end: 0;
}



.fi-intro { padding-block: var(--fi-space-7); }

/* Prose and the ask, side by side -------------------------------------
 *
 * One column until there is room for two. 60rem rather than the usual 52,
 * because the box needs about 20rem of its own before its buttons start
 * wrapping and the prose needs its measure - squeezing both into a narrow
 * laptop gives two columns that are each too tight to read.
 *
 * The box is second in the DOM as well as on the right, so a phone gets the
 * explanation before the ask and a keyboard reaches it in that order too.
 */

.fi-intro__inner { display: grid; gap: var(--fi-space-6); }

@media (min-width: 60rem) {
	.fi-intro__inner {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
		gap: var(--fi-space-8);
		align-items: start;
	}
}

/*
 * Outlined, never filled. --fi-bg is mid-tone and every candidate fill lands
 * between 1.14:1 and 1.29:1 against it, so a panel simply does not read as
 * raised on this palette - the same reason the cards are outlined.
 *
 * --fi-border-strong rather than --fi-border-subtle, which is for decorative
 * dividers and is too faint to hold a box together. NOT --fi-accent: that is
 * the crisis block's border, and a second orange-edged panel on the same page
 * would spend the one signal this site reserves for someone in danger.
 */
.fi-cta-box {
	padding: var(--fi-space-6);
	/* --fi-border-strong at 40%. Written out because a hex token cannot be
	   given an alpha channel in a border shorthand; KEEP IT IN STEP with
	   #8C9BA9. At this opacity the edge is about 1.9:1 against --fi-bg, which
	   is below the 3:1 that SC 1.4.11 asks of a control's boundary - fine
	   here, because this box is a container rather than a control and nothing
	   about using it depends on seeing its edge. */
	border: var(--fi-border-width) solid rgba(140, 155, 169, 0.4);
	border-radius: var(--fi-radius);
}

.fi-cta-box__title {
	margin: 0 0 var(--fi-space-3);
	font-size: var(--fi-size-h4);
	font-family: var(--fi-font-body);
	font-weight: var(--fi-weight-bold);
}

.fi-cta-box .fi-cta__body {
	margin: 0;
	color: var(--fi-text-muted);
	font-size: var(--fi-size-sm);
}

/* Stacked and full width. Two buttons side by side do not fit in a 17rem
   column, and a wrapped row of buttons reads as a mistake. */
.fi-cta-box .fi-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--fi-space-3);
	margin-block-start: var(--fi-space-5);
}

.fi-cta-box .fi-button {
	display: flex;
	justify-content: center;
	text-align: center;
}

/* The non-evidential formula is a qualification of the sentence above it, not
   a second claim, so it is set as one: same size, quieter colour.
   --fi-text-muted measures 5.5:1 here, which still clears WCAG 1.4.3 AA. */
.fi-intro__note { color: var(--fi-text-muted); }

.fi-intro__lead {
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	line-height: 1.6;
	color: var(--fi-text-strong);
}

.fi-block {
	padding-block: var(--fi-space-7);
}

.fi-block__title { margin: 0 0 var(--fi-space-4); }

.fi-block__standfirst {
	margin: 0 0 var(--fi-space-6);
	color: var(--fi-text-muted);
	max-width: var(--fi-measure);
}

/* Cards: outlined, never filled. #2E373F is mid-tone and every candidate fill
   lands between 1.14:1 and 1.29:1 against it, so elevation does not read. */

.fi-cards {
	display: grid;
	gap: var(--fi-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.fi-cards { grid-template-columns: repeat(3, 1fr); }
}

.fi-card {
	padding: var(--fi-space-5);
	border: var(--fi-border-width) solid var(--fi-border-subtle);
	border-radius: var(--fi-radius);
	max-width: none;
}

.fi-card__title {
	margin: 0;
	font-size: var(--fi-size-h4);
	font-family: var(--fi-font-body);
	font-weight: var(--fi-weight-bold);
}

.fi-card__title a { text-decoration: none; }
.fi-card__title a:hover { text-decoration: underline; }

.fi-card__excerpt {
	margin-block-start: var(--fi-space-3);
	color: var(--fi-text-muted);
	font-size: var(--fi-size-sm);
	max-width: none;
}

/* The Testify block. The safeguards link sits FIRST, so the order of reading
   matches the order of deciding - docs/03 section 5 block 6. */

.fi-block--cta { padding-block-end: var(--fi-space-8); }

.fi-cta__body { max-width: var(--fi-measure); }

.fi-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fi-space-4);
	margin-block-start: var(--fi-space-5);
	max-width: none;
}

/* FAQ accordion -----------------------------------------------------
 *
 * Native <details name="fi-faq">, no JavaScript. Browsers that support the
 * name attribute close the others when one opens; browsers that do not let
 * several sit open, which is a usable page rather than a broken one.
 */

.fi-faq {
	border-block-end: var(--fi-border-width) solid var(--fi-border-subtle);
}

.fi-faq:first-of-type {
	border-block-start: var(--fi-border-width) solid var(--fi-border-subtle);
}

.fi-faq__q {
	display: flex;
	align-items: baseline;
	gap: var(--fi-space-3);
	padding-block: var(--fi-space-4);
	cursor: pointer;
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
	font-weight: var(--fi-weight-bold);
	color: var(--fi-text-strong);
	list-style: none;           /* the default triangle fights the design system */
	transition: color 0.1s ease;
}

.fi-faq__q::-webkit-details-marker { display: none; }

.fi-faq__q:hover { color: var(--fi-accent); }

/* A marker that rotates rather than swapping glyphs, so the open and closed
   states read as the same control in two positions. */
.fi-faq__q::before {
	content: "+";
	flex: 0 0 auto;
	width: 1em;
	color: var(--fi-accent);
	font-weight: var(--fi-weight-bold);
	transition: transform 0.15s ease;
}

.fi-faq[open] > .fi-faq__q::before { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
	.fi-faq__q, .fi-faq__q::before { transition: none; }
}

.fi-faq__a {
	padding-block-end: var(--fi-space-5);
}

/* The answer's own first paragraph should not add a second gap on top of the
   summary's padding. */
.fi-faq__a > :first-child { margin-block-start: 0; }

/* The application form ----------------------------------------------
 *
 * Every step is a server-rendered form post. No JavaScript is involved, so
 * nothing here depends on a bundle having loaded.
 */

.fi-form { max-width: var(--fi-measure); }

.fi-form__intro,
.fi-form__help {
	color: var(--fi-text-muted);
	font-size: var(--fi-size-sm);
}

.fi-form__help { display: block; margin-block: var(--fi-space-2) var(--fi-space-3); }

.fi-form__group {
	margin-block: var(--fi-space-6);
	padding: 0;
	border: 0;
}

.fi-form__legend {
	padding: 0;
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
	font-weight: var(--fi-weight-bold);
}

.fi-form__option {
	display: flex;
	align-items: flex-start;
	gap: var(--fi-space-3);
	/* A generous target. This is filled on a phone, often one-handed, often by
	   someone who is not calm. */
	padding: var(--fi-space-3);
	/* Transparent rather than absent, so that colouring it on hover does not
	   move anything. A row that shifts by a pixel when the pointer arrives is
	   the cheapest way to make an interface feel unreliable. */
	border: var(--fi-border-width) solid transparent;
	border-radius: var(--fi-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fi-form__option:hover {
	border-color: var(--fi-accent);
	background-color: rgba(255, 136, 89, 0.06);
}

/* Keyboard users get exactly what the pointer gets. The focus ring lands on
   the input, which is small; this is what tells someone tabbing through which
   ROW they are on. */
.fi-form__option:focus-within { border-color: var(--fi-accent); }

/* The chosen one stays marked. On a one-question screen the dot alone is easy
   to lose, and on the consent list there are three to keep track of.
   In its own rule: a browser that does not know :has must ignore this without
   discarding the rules above it. */
.fi-form__option:has(input:checked) {
	border-color: var(--fi-accent);
	background-color: rgba(255, 136, 89, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.fi-form__option { transition: none; }
}

/*
 * The control itself, in brand orange rather than the operating system's blue.
 * accent-color recolours the radio dot and the checkbox tick natively, which
 * keeps the platform's own focus and touch behaviour instead of rebuilding a
 * control out of pseudo-elements.
 *
 * SIZED IN REM AND NOT IN EM, which is the bug this replaces. An input does not
 * inherit font-size, so `1.15em` resolved against the control's own ~13.3px
 * default rather than the label's 18px: it rendered at 15.3px while claiming to
 * be 20.7px, and every guess at the margin was tuned against the wrong number.
 *
 * The offset is then arithmetic rather than a guess. Half of the line box minus
 * half of the control puts the control's centre exactly on the centre of the
 * FIRST line - which is what is wanted, because a consent that wraps to three
 * lines should keep its box beside the first of them rather than floating down
 * to the middle of the paragraph. It was 5px high.
 *
 * Written against the tokens, so changing the body size or the leading moves
 * the control with them instead of leaving it behind.
 */
.fi-form input[type="radio"],
.fi-form input[type="checkbox"] {
	accent-color: var(--fi-accent);
	/* Bigger than the 13px default. This is a target on a phone. */
	width: var(--fi-control-size);
	height: var(--fi-control-size);
	margin-block-start: calc(
		(var(--fi-size-base) * var(--fi-leading-body) - var(--fi-control-size)) / 2
	);
	flex: 0 0 auto;
}

.fi-form__field { display: block; margin-block: var(--fi-space-6); max-width: none; }

.fi-form__field label {
	display: block;
	margin-block-end: var(--fi-space-2);
	font-weight: var(--fi-weight-bold);
	color: var(--fi-accent);
}

.fi-form input[type="text"],
.fi-form input[type="email"],
.fi-form textarea {
	width: 100%;
	padding: var(--fi-space-3);
	background-color: var(--fi-bg);
	color: var(--fi-text);
	/* --fi-border-strong, not subtle: an input's edge has to be perceivable,
	   and it is one of the few things on this background that clears 3:1. */
	border: var(--fi-border-width-strong) solid var(--fi-border-strong);
	border-radius: var(--fi-radius);
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
}

.fi-form textarea { resize: vertical; line-height: var(--fi-leading-body); }

.fi-form__error,
.fi-form__ok {
	margin-block: var(--fi-space-5);
	padding: var(--fi-space-4);
	border: var(--fi-border-width-strong) solid var(--fi-accent);
	border-radius: var(--fi-radius);
}

.fi-form__field-error { color: var(--fi-accent); font-size: var(--fi-size-sm); }

.fi-form__group.is-invalid .fi-form__legend { color: var(--fi-accent); }

.fi-form__consents { margin-block: var(--fi-space-6); }

.fi-form__actions { margin-block-start: var(--fi-space-6); }

/* Back and Next. Back first in the DOM so it is first for a keyboard, and
   pushed to the opposite end so the thumb does not find it by accident. */
.fi-form__actions--split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fi-space-4);
	align-items: center;
}

.fi-form__actions--split .fi-button--primary { margin-inline-start: auto; }

/* One question at a time ---------------------------------------------- */

.fi-form--step .fi-form__group { margin-block: var(--fi-space-5) 0; }

/* The question is the heading of its own screen, so it is set as one. */
.fi-form__legend--lead {
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-h3);
	font-weight: var(--fi-weight-display);
	line-height: var(--fi-leading-tight);
}

.fi-form__progress {
	display: flex;
	align-items: center;
	gap: var(--fi-space-4);
	margin-block: var(--fi-space-6) var(--fi-space-4);
	color: var(--fi-text-muted);
	font-size: var(--fi-size-xs);
}

/* Decorative, and marked aria-hidden in the template, because the count beside
   it already says the same thing in words. */
.fi-form__progress-bar {
	flex: 1 1 auto;
	height: 2px;
	background-color: var(--fi-border-subtle);
	border-radius: var(--fi-radius-pill);
	overflow: hidden;
}

.fi-form__progress-bar span {
	display: block;
	height: 100%;
	background-color: var(--fi-accent);
}

/*
 * The select, with its own chevron.
 *
 * appearance: none and a background image, rather than padding-right on the
 * native control. A browser draws its own indicator wherever it likes and
 * ignores the padding in most of them, so the only way to put a reliable 12px
 * between the arrow and the edge is to stop it drawing one and place the arrow
 * as a background.
 *
 * The stroke colour is --fi-text-muted written out, because a data URI cannot
 * read a custom property. KEEP THE TWO IN STEP - a chevron that is a different
 * grey from every other quiet thing on the page is the sort of drift nobody
 * spots and everybody feels.
 */
.fi-form__select {
	width: 100%;
	padding: var(--fi-space-3);
	/* Room for the chevron, so a long option does not run underneath it.
	   Alberta is short; Newfoundland and Labrador is not. */
	padding-inline-end: calc(12px + 12px + var(--fi-space-3));
	background-color: var(--fi-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23A8B0B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: var(--fi-text);
	border: var(--fi-border-width-strong) solid var(--fi-border-strong);
	border-radius: var(--fi-radius);
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
	-webkit-appearance: none;
	appearance: none;
}

/* Right to left languages put the chevron on the other side, and the padding
   with it. background-position has no logical keyword, so it is restated. */
[dir="rtl"] .fi-form__select { background-position: left 12px center; }

.fi-form__select:hover { border-color: var(--fi-accent); }

/* The waiting list, on a deferral page --------------------------------
 *
 * Inside an outcome rather than instead of one, so it reads as a footnote to
 * being turned away rather than as a second thing being asked of him. Outlined
 * in --fi-border-subtle, quieter than the ask box on the home page, because he
 * has just been told no and this is optional.
 */

.fi-waitlist {
	margin-block-start: var(--fi-space-6);
	padding: var(--fi-space-5) var(--fi-space-6) var(--fi-space-6);
	border: var(--fi-border-width) solid var(--fi-border-subtle);
	border-radius: var(--fi-radius);
}

.fi-waitlist__title {
	margin: 0;
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
	font-weight: var(--fi-weight-bold);
}

.fi-waitlist .fi-form__group { margin-block: var(--fi-space-5) 0; }
.fi-waitlist .fi-form__actions { margin-block-start: var(--fi-space-5); }

/* Outcomes ---------------------------------------------------------- */

.fi-outcome { max-width: var(--fi-measure); }

.fi-outcome__title { margin-block-end: var(--fi-space-4); }

.fi-outcome__body { margin-block-end: var(--fi-space-4); }

.fi-outcome__crisis {
	margin-block-start: var(--fi-space-6);
	padding: var(--fi-space-4);
	border: var(--fi-border-width-strong) solid var(--fi-accent);
	border-radius: var(--fi-radius);
}

.fi-outcome__crisis ul { margin: var(--fi-space-2) 0 0; padding-inline-start: var(--fi-space-5); }

/* Hero treatment -----------------------------------------------------
 *
 * The wordmark's own bar motif, enlarged and faded, rather than a photograph.
 *
 * The design brief is explicit that this reads as a public record and not a
 * campaign, and that "restraint reads as credibility here; visual urgency
 * reads as advocacy and undermines the premise". A stock photograph of a
 * distressed man would do the opposite, and any image of a person on a site
 * whose whole method is de-identification invites the obvious misreading.
 *
 * It is also a 1KB vector rather than a bitmap, so it costs nothing on the
 * bad mobile connection this audience is assumed to be on, and it is served
 * from this origin like everything else.
 */

/*
 * THE PHOTOGRAPH BELONGS TO THE PAGE, NOT TO THE BAND.
 *
 * It used to sit on .fi-hero, so it stopped dead at the hero's bottom edge and
 * drew a horizontal line across the page - the same seam a transparent header
 * exists to avoid, one section further down. On <main> it runs behind the hero
 * and the intro together, which for this page's first month is the whole of it.
 *
 * ON EVERY PAGE, not only the home page. What differs is how far down it
 * lasts, and that is not a preference either - see the mask below.
 *
 * MAIN NOW CARRIES THE OFFSET THAT PULLS THE PAGE UP BEHIND THE HEADER, which
 * the hero used to. It has to be here rather than there: a negative margin on
 * the first child cannot move an ancestor whose background has already been
 * painted from its own top edge, so leaving it on .fi-hero would have started
 * the image below the wordmark and put the seam back at the top instead of the
 * bottom.
 *
 * No overflow: hidden. The pseudo-elements are inset: 0, so there is nothing to
 * clip, and adding it would establish a block formatting context that changes
 * how margins behave through this element for reasons nothing here needs.
 */

#fi-main {
	position: relative;
	isolation: isolate;
	margin-block-start: calc(-1 * var(--fi-header-height));
	padding-block-start: var(--fi-header-height);
}

/*
 * The band's photograph.
 *
 * A ROOT-RELATIVE PATH, written out. Owner decision, 2026-09-27, replacing a
 * custom property fed by an attachment lookup.
 *
 * url() inside a stylesheet normally resolves against the stylesheet's own
 * folder, which would put this under assets/css/. The leading slash is what
 * makes it resolve against the site root instead, and it inherits the page's
 * scheme and host at the same time - so https here, without https being
 * written down anywhere to go stale after a move.
 *
 * `cover` rather than the `auto 100%` the vector used. That value sized the
 * artwork to the band's height and deliberately left the rest of a wide screen
 * bare, because the emptiness was the vector's fade completing. A photograph
 * has no fade and no empty side: it fills the window's full width and tracks
 * the page's height, cropping rather than distorting.
 *
 * FIXED, so that it behaves like a backdrop rather than like a very tall
 * picture. Scrolled with the page it would need to be several screens tall to
 * cover the intro, which means cropping most of it away; held still, the same
 * file covers whatever the page turns out to be.
 *
 * The opacity is the ceiling, not a preference. The standing question is set in
 * --fi-text at up to 3.25rem directly over this, and has to stay legible
 * against whatever spark trail passes behind it.
 */

/*
 * LOADED LAST, BY SCRIPT, AND THAT IS THE POINT.
 *
 * The file is 117KB and it is on every page. As a CSS background it was
 * fetched the moment the stylesheet parsed, competing with the fonts and the
 * markup for a connection that this site does not get to multiplex - the
 * server is still HTTP/1.1. It is decoration, and decoration does not get to
 * queue ahead of the words.
 *
 * So the URL lives in a custom property, the rule that uses it is gated behind
 * a class, and assets/js/nav.js adds that class once the page has finished
 * loading and the image has decoded. Nothing here is requested until the page
 * is already readable.
 *
 * The property is the single source of truth: the script reads the URL back
 * out of it rather than holding a second copy that could drift.
 *
 * Without JavaScript the class never arrives and there is no background image.
 * That is an accepted loss - the page is the words, and it reads correctly on
 * flat colour.
 */

#fi-main::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.34;
	z-index: -1;
	pointer-events: none;
	/*
	 * Faded in rather than switched on.
	 *
	 * A background image appears the instant it decodes, with no transition of
	 * any kind - so even from cache it arrives as a step change, and stepping
	 * on every page load reads as a flicker rather than as a page.
	 *
	 * The keyframes below declare only `from`. That is the whole trick: a
	 * missing `to` is taken from the element's own computed value, so one
	 * animation serves all four opacities here without any of them being
	 * repeated in a keyframe that could then drift from the rule above it.
	 */
	animation: fi-bg-in 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes fi-bg-in {
	from { opacity: 0; }
}

/* Nothing to see, and nothing fetched, until the script says so. */
html:not(.is-bg-ready) #fi-main::before {
	opacity: 0;
	animation: none;
}

html.is-bg-ready #fi-main::before {
	background-image: var(--fi-page-bg);
}

/*
 * Someone who asked their system for less motion gets it at full strength
 * immediately. Zero duration rather than removing the animation, so the
 * `from` keyframe still never applies and there is no frame at opacity 0.
 */
@media (prefers-reduced-motion: reduce) {
	#fi-main::before { animation-duration: 1ms; }
}

/*
 * WHERE THE PHOTOGRAPH STOPS, AND WHY IT IS NOT THE SAME EVERYWHERE.
 *
 * The home page is short and is mostly the hero, so the image runs its whole
 * length and dissolves over the last stretch. Measured from the bottom rather
 * than as a percentage, so a page that grows later fades over the same distance
 * rather than over more of itself.
 *
 * Every other page is a two thousand word document read by a man deciding
 * whether to hand over the worst years of his life. Running a photograph the
 * whole way down one of those puts the Rules of Procedure on a picture of fire,
 * which is both harder to read and the wrong register entirely - the design
 * brief is explicit that restraint reads as credibility here and visual urgency
 * reads as advocacy.
 *
 * So on those it fades from the TOP: present behind the title, gone by the time
 * anyone is reading. Same image in the same place, which is what makes the site
 * feel like one site; absent from the part that is actually being read.
 */
.home #fi-main::before {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22rem), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 22rem), transparent 100%);
}

body:not(.home) #fi-main::before {
	opacity: 0.26;
	-webkit-mask-image: linear-gradient(to bottom, #000 14rem, transparent 34rem);
	mask-image: linear-gradient(to bottom, #000 14rem, transparent 34rem);
}

/* A warm lift behind the question itself. Subtle enough to read as depth
   rather than as a gradient someone applied. */
#fi-main::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		120% 90% at 0% 20%,
		rgba(255, 136, 89, 0.09) 0%,
		rgba(255, 136, 89, 0.03) 45%,
		transparent 72%
	);
	z-index: -2;
	pointer-events: none;
}

/* On the narrowest phones the photograph and the question are contending for
   the same 360px, and the question wins.

   background-attachment: fixed is also dropped here. iOS Safari has never
   supported it properly - it renders as a badly scaled, jumping background -
   and a phone is where that is most obvious. */
@media (max-width: 52rem) {
	#fi-main::before {
		background-attachment: scroll;
	}
}

@media (max-width: 26rem) {
	#fi-main::before { opacity: 0.24; }
	body:not(.home) #fi-main::before { opacity: 0.2; }
}

}

.fi-hero__question { position: relative; }

/* style.css */
/*
Theme Name:   Fathers' Inquiry
Theme URI:    https://fathersinquiry.com
Description:  The theme for Fathers' Inquiry, a citizen-led public testimony record. Built as a public record rather than a campaign site: sober, documentary, legible under stress, and readable on a phone at night. Dark mode is the only mode.
Author:       Fathers' Inquiry
Version:      0.1.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fathers-inquiry
Tags:         accessibility-ready, custom-menu, translation-ready

This file carries the theme header only. The design tokens and every style rule
live in assets/css/ and are enqueued from functions.php, so that the cascade is
readable and the token layer is a single source of truth.

Design brief: docs/site-content/claude-design-prompt.md
*/