/* Self-hosted: the CSP sets font-src 'self', so a CDN would be blocked. */
/* Variable fonts: Google serves ONE file covering the whole weight axis, so a weight
RANGE is declared and a single file is shipped per family. Declaring two static
weights pointing at the same file would download identical bytes twice. */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('fonts/source-sans-3-latin.woff2') format('woff2');
}
/* Our type system ships two weights, 400 and 600. Bold maps to 600 rather than 700:
the ranged variable faces above stop at 600, and an unmatched 700 request would either
clamp silently or be faux-bolded by the engine. is the common case — Markdown
emphasis in article bodies compiles to it.
Bootstrap's .fw-bold utility is deliberately NOT covered here: it declares
font-weight: 700 !important, which no non-important rule can override. Nothing in this
app uses it today. If that changes, it needs its own !important override rather than a
silent clamp to the top of the variable range. */
strong, b, th {
font-weight: 600;
}
:root {
--sf-ink: #2A211C;
--sf-muted: #7A6355;
--sf-faint: #7E634F;
/* Text accent. Darkened from #D9762B, which reached only 3.08:1 on --sf-page and
2.53:1 on the hero gradient's warmest stop (#FFE0BE) — both below the 4.5:1 AA
threshold for normal-size text. This value clears 4.8:1 on the gradient and
5.8:1 on the page. Use it for anything a reader has to READ.
Also the colour of the global :focus-visible ring, for the same reason: the ring can
be drawn on top of --sf-gradient (the home hero), not only on --sf-page. --sf-accent-
bright measured only 2.53:1 / 2.88:1 there — below the 3:1 WCAG 1.4.11 floor for
non-text indicators — while this value clears 4.8:1 on the gradient. */
--sf-accent: #9A4E12;
/* Decorative accent — the original warm orange. Non-text use ONLY: rules, underlines,
borders. It does not meet the text contrast threshold, so it must never colour a run
of text, AND it must not be used for the focus ring either — see --sf-accent below. */
--sf-accent-bright: #D9762B;
--sf-surface: #FFFCF9;
--sf-page: #FFFAF6;
/* Destructive actions. #B32121 on --sf-page text reaches 6.42:1, clearing the 4.5:1 AA
threshold for normal-size text with room to spare. */
--sf-danger: #B32121;
--sf-radius-card: 16px;
--sf-radius-pill: 999px;
--sf-shadow: 0 1px 2px rgba(120, 80, 50, .10), 0 10px 26px rgba(120, 80, 50, .09);
--sf-gradient: radial-gradient(115% 85% at 15% 0%, #FFE0BE 0%, #FFF1E4 42%, #FFFAF6 100%);
--sf-display: 'Fraunces', Charter, Georgia, serif;
--sf-text: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Type scale, ratio ~1.25, as declared in the visual-identity spec. Every font-size in
the app resolves to one of these nine steps — no raw rem literals. A size that is not
on the scale is not a smaller decision than one that is; it is the same decision made
without the scale, and it is what let 17 distinct sizes accumulate for 9 slots. */
--sf-text-2xs: .75rem; /* 12px */
--sf-text-xs: .8125rem; /* 13px */
--sf-text-sm: .875rem; /* 14px */
--sf-text-base: 1rem; /* 16px */
--sf-text-md: 1.125rem; /* 18px */
--sf-text-lg: 1.375rem; /* 22px */
--sf-text-xl: 1.75rem; /* 28px */
--sf-text-2xl: 2.25rem; /* 36px */
--sf-text-3xl: 2.75rem; /* 44px */
/* Spacing, on a 4px base. Named by multiple of that base, so --sf-space-6 is 6x4 = 24px:
the name states the arithmetic and cannot drift from the value.
The spec's ramp reads 4/8/12/16/24/32/48/64. The 20px and 40px steps below are
additions: both are legitimate 4px multiples, and the implementation already leaned on
them 15 times. Snapping those call sites to the nearest spec step would have moved the
layout visibly to satisfy a ramp, which is the tail wagging the dog. Everything OFF the
4px base — 6px, 10px, 11px, 18px, 22px gaps — was snapped instead. */
--sf-space-1: .25rem; /* 4px */
--sf-space-2: .5rem; /* 8px */
--sf-space-3: .75rem; /* 12px */
--sf-space-4: 1rem; /* 16px */
--sf-space-5: 1.25rem; /* 20px */
--sf-space-6: 1.5rem; /* 24px */
--sf-space-8: 2rem; /* 32px */
--sf-space-10: 2.5rem; /* 40px */
--sf-space-12: 3rem; /* 48px */
--sf-space-14: 3.5rem; /* 56px */
--sf-space-16: 4rem; /* 64px */
}
html, body {
font-family: var(--sf-text);
color: var(--sf-ink);
background: var(--sf-page);
}
h1, h2, h3, .sf-display {
font-family: var(--sf-display);
font-weight: 600;
letter-spacing: -.015em;
}
a, .btn-link {
color: var(--sf-accent);
}
/* Bootstrap ships no focus ring on plain links. Keyboard users need one everywhere.
Uses --sf-accent, not --sf-accent-bright: with outline-offset: 2px the ring can land on
--sf-gradient (the home hero), where --sf-accent-bright falls below the 3:1 WCAG 1.4.11
floor for non-text indicators. See the --sf-accent token comment for the measurements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 2px solid var(--sf-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Shared button layer. Previously redeclared per-page (HomePage, SiteHeader, Login), and the
copies had already drifted; several other pages used these classes with no rule at all and
rendered as bare OS-default buttons. One definition here, consumed by every page, works on
both and