/* ============================================================
TEMPLATE STANDARD (ruled by Keiron, 13 Jul 2026) — build any page
from this sheet and the code tells you what to do:
TYPE 17px (--type-body) for ALL reading text and ALL buttons;
24px (--type-h1 = --type-h2) for ALL headers; 14px
(--type-small) for furniture only (tags, captions, notes) -
never reading text, never safety-critical text.
RHYTHM line-height 1.7 body (--line-body), 1.35 headings
(--line-tight); paragraph and box gaps 1.2em - em, not px,
so spacing scales with the visitor's text-size choice.
WIDTH reading column 640px (--opening-width) = 68-73 chars at 17px;
page box 780px (--page-max) - content-first, the box hugs
the column; section gap 48px (--gap-major).
RULES one owner per gap (the section gap owns room boundaries -
a section-opening h2 has no top margin); no manual spacing
in content (no
, no empty - the rhythm is in the
sheet, not the typing); an ad-hoc size is a finding.
ELEMENTS an element never sets its own flow gap - it inherits its
context's rhythm (in flow: the 1.2em paragraph gap; in a row
container like the band: the container's padding). A BUTTON
owns two things only: its target size (>=44px tall via its
own padding - the tap protection lives inside the element)
and its spacing from neighbouring targets.
OPTICAL LAW: text carries ~half-leading of invisible air;
hard-edged elements (buttons, cards) don't - give them a
0.35em margin on the CONTAINER-EDGE-facing side so VISIBLE
gaps match (the text-facing side is already aired by the
text's own leading - never double-pay). The eye measures
pixels of air, not box models.
SURFACES green speaks, white hands over (see index draft).
Full rationale: Research/build-log-typography-and-spacing-2026-07-13.md
============================================================ */
/* Safe & Sound - shared site styles: design tokens, layout shell, header,
footer, skip links, orientation band, reading options, back-to-top, and the
hero. Loaded by every page BEFORE its own sheet. Page-specific styles live
in .css. Behaviour is in site.js. */
:root {
--unit: 10px;
--major: calc(var(--unit) * 10);
--page-max: calc(var(--major) * 7.8);
--page-pad-x: calc(var(--unit) * 4);
--page-pad-y: calc(var(--unit) * 5);
--gap-major: calc(var(--unit) * 4.8); /* SECTION GAP 60->48 (14 Jul, Keiron: too big once the inner gaps opened up). Still clearly > box gap (32) and > paragraph (28); proximity holds — 48 above a heading vs 20 below = 2.4:1 (heading groups downward, the accessibility requirement). Dial here if still too big. */
--gap-minor: calc(var(--unit) * 3);
--gap-tight: calc(var(--unit) * 2);
--opening-width: calc(var(--major) * 6.4); /* 640px = 68-73 chars at 17px */
--intro-width: calc(var(--major) * 7); /* 700px - re-rule to 6.4 at that page type pass */
--card-width: calc(var(--major) * 9);
--reviews-width: calc(var(--major) * 7); /* 700px - re-rule to 6.4 at that page type pass */
--sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--type-body: 1.0625rem;
--type-small: 0.875rem;
--type-large: 1.25rem;
--type-h1: 1.5rem; /* = --type-h2: every header is 24px */
--type-h2: 1.5rem;
--line-body: 1.7;
--line-tight: 1.35;
--paper: #f7f5f0;
--paper-warm: #efe9df;
--ink: #23282b;
--ink-soft: #4a534f;
--line: #d8d0c2;
--teal: #2f6f6a;
--teal-deep: #1d4d49;
--copper: #a25f2e;
--copper-light: #e7b489;
--white: #ffffff;
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
/* RULING 23 Jul 2026, CORRECTED 24 Jul (verified at MDN): keep BOTH the -webkit- and the
unprefixed text-size-adjust - MDN recommends the pair for maximum compatibility. Support:
Safari honours ONLY -webkit-text-size-adjust; Chrome/Edge/Blink honour BOTH; Firefox supports
neither and needs neither (it runs no text-inflation algorithm). Mobile-only - desktop ignores
it. It stops a phone silently inflating our 17px body text, the one number the type standard
rests on.
ERROR CORRECTED: the earlier note here claimed Chrome/Edge IGNORE -webkit-text-size-adjust and
it "did nothing at all" there. That was WRONG - Blink honours the -webkit- form. The unprefixed
is kept as the standards form, not because Chrome needed it.
The Edge Tools hint "text-size-adjust not supported by Firefox, Safari" (line above) is EXPECTED
and handled: Safari is covered by the -webkit- line; Firefox needs nothing. It flags each
declaration per-browser and cannot be cleared by more CSS - the pair is MDN's own advice.
Scoped-ignored in .hintrc so it stops cluttering the Problems pane; all other compat checks stay. */
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: var(--type-body);
line-height: var(--line-body);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
a { color: var(--teal-deep); }
a:hover { color: var(--copper); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; background: var(--teal-deep); color: #fff; padding: .6rem 1rem; border-radius: 6px; z-index: 999; text-decoration: none; }
.page { width: 100%; max-width: var(--page-max); display: flex; flex-direction: column; gap: var(--gap-major); padding: var(--gap-minor) var(--page-pad-x) var(--page-pad-y); }
.section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--gap-minor); }
.container { margin-inline: auto; width: 100%; }
.container--opening { max-width: var(--opening-width); }
.footer-nav {margin-top:var(--gap-tight);font-size:var(--type-body)}
.footer-nav a {margin:0 .3rem}
.footer-nav [aria-current="page"] {font-weight:700;color:var(--ink-soft);text-decoration:none}
header.page-header { width: 100%; max-width: var(--page-max); padding: var(--gap-tight) var(--page-pad-x); display: flex; justify-content: space-between; align-items: center; gap: var(--gap-tight); flex-wrap: wrap; }
.logo { font-weight: 800; font-size: var(--type-h2); color: var(--teal-deep); letter-spacing: -0.01em; }
.logo span { color: var(--copper); }
a.logo {text-decoration:none;cursor:pointer}
a.logo:hover {color:var(--teal-deep)}
a.logo:focus-visible {outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.mission { font-size: var(--type-body); color: var(--ink-soft); letter-spacing: 0.06em; }
.hero { width: 100%; background: var(--teal-deep); color: #fff; border-radius: var(--gap-tight); }
.hero-inner { max-width: var(--opening-width); margin-inline: auto; padding: 0; }
/* ^ ALIGNMENT + RHYTHM FIX 2026-07-19 (Keiron's rendered catches, both same sitting):
(1) horizontal padding removed - it inset the hero text 40px and narrowed its measure
to 560px against the 640 column every section uses; read as "wrong font" on privacy.
(2) SAME DAY, second catch ("privacy spacing is all wrong"): vertical padding removed
too - it doubled the air above the utility h1s (box padding + hero padding) and made
the hero->first-section gap ~2x every other section gap. The index never showed either
fault because index.css carried a page-scoped padding:0 override (12-13 Jul) - THE FIX
LIVED IN THE WRONG FILE, so the one patched page masked the shared defect. One owner
now: vertical rhythm belongs to main.page's box padding + .page's section gap;
horizontal clearance to main.page's pad-x; the hero-inner is just the 640 column.
index.css's override is now fully redundant (identical values). The hero box itself
is transparent site-wide, so no visible edge needs breathing room. */
.hero h1 { font-size: var(--type-h1); line-height: var(--line-tight); font-weight: 800; margin-bottom: var(--gap-tight); }
.hero h1 em { font-style: normal; color: var(--copper-light); }
.hero p { font-size: var(--type-body); color: #e4efed; line-height: var(--line-body); }
.hero p + p { margin-top: 1.2em; }
.prose p + p { margin-top: 1.2em; }
footer.page-footer { width: 100%; max-width: var(--page-max); padding: var(--gap-minor) var(--page-pad-x); border-top: 1px solid var(--line); text-align: center; font-size: var(--type-body); color: var(--ink-soft); }
/* P15-F3 FIX 2026-07-17 (template pass): footer links were teal-deep beside ink-soft text -
1.20:1 apart, visually the same colour, and no rule DECLARED the underline (1.4.1-shaped:
colour alone was carrying "this is a link", and barely). Underline now explicit - never
rely on a browser default for the only affordance - with a little offset for readability.
The aria-current rule above keeps the current page un-underlined on purpose: the page you
are on is not a door. The "Safe & Sound compliant" badge now looks pressable (it is). */
footer.page-footer a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 0.15em; }
footer.page-footer a:hover { text-decoration-thickness: 2px; }
.passes { margin-top: var(--gap-tight); font-size: var(--type-small); color: var(--ink-soft); }
.to-top-wrap { text-align: center; margin-top: var(--gap-minor); }
.to-top { background: transparent; border: 1px solid var(--teal); color: var(--teal-deep); font-family: inherit; font-size: var(--type-body); padding: .5rem 1.1rem; border-radius: 6px; cursor: pointer; }
.to-top:hover { background: var(--teal); color: #fff; }
.to-top-float { visibility: hidden; position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 200; background: var(--teal-deep); color: #fff; border: none; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.4rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.to-top-float.show { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.to-top:focus-visible, .to-top-float:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
@media (max-width: 480px) {
:root { --page-pad-x: calc(var(--unit)*2); --gap-major: calc(var(--unit)*4); } /* mobile section gap 40px (<= desktop 48) */
header.page-header { padding-top: var(--unit); padding-bottom: var(--unit); }
.logo { font-size: 1.125rem; }
.brand { gap: 0.05rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.to-top-float { transition: none; }
}
/* RULING 14 Jul: a dead ".prefs-trigger { position:fixed; bottom-left }" rule lived here and was
overridden by the in-band rule further down (position:static). It misled a reading of the
cascade — removed. There is ONE reading-options button; it lives in the sticky orientation band
and stays pinned as the page scrolls.
STATE CORRECTED 23 Jul 2026: this note used to end "(see .orientation-band.is-collapsed above)".
That class was retired on 22 Jul with the scroll-fade — the pointer outlived the thing it
pointed at. .is-collapsed now has no rule and no script anywhere on the site.
CHECK: grep -c is-collapsed site.css site.js *.html -> comments only, no rule, no JS. */
.prefs-trigger .ico { font-weight: 800; }
.prefs-panel { position: fixed; inset: 0; z-index: 300; display: none; align-items: flex-start; justify-content: center; padding: 6vh var(--page-pad-x) var(--gap-major); background: rgba(29,77,73,0.45); overflow: auto; }
.prefs-panel[aria-hidden="false"] { display: flex; }
.prefs-box { width: 100%; max-width: calc(var(--major)*6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--gap-tight); padding: var(--gap-minor); box-shadow: 0 4px 24px rgba(0,0,0,.3); }
.prefs-box h2 { font-size: var(--type-h2); color: var(--teal-deep); margin-bottom: calc(var(--unit)*0.5); line-height: var(--line-tight); }
.prefs-box > p.intro { color: var(--ink-soft); font-size: var(--type-body); margin-bottom: var(--gap-minor); }
.prefs-group { border-top: 1px solid var(--line); padding-top: var(--gap-tight); margin-top: var(--gap-tight); }
.prefs-group:first-of-type { border-top: 0; margin-top: 0; }
.prefs-group .pour-tag { font-size: var(--type-small); text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal); font-weight: 700; }
.prefs-group h3 { font-size: var(--type-body); line-height: var(--line-tight); color: var(--ink); margin: calc(var(--unit)*0.3) 0 calc(var(--unit)*0.8); }
.prefs-options { display: flex; flex-wrap: wrap; gap: var(--unit); }
.prefs-options button { font-family: inherit; font-size: var(--type-body); padding: .45rem .8rem; border: 2px solid var(--teal); background: var(--paper); color: var(--teal-deep); border-radius: 6px; cursor: pointer; }
.prefs-options button[aria-pressed="true"] { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); }
.prefs-options button:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.prefs-close { margin-top: var(--gap-minor); display: flex; justify-content: space-between; align-items: center; gap: var(--gap-tight); flex-wrap: wrap; }
.prefs-note { font-size: var(--type-small); color: var(--ink-soft); }
.prefs-done { background: var(--teal-deep); color:#fff; border:none; border-radius:6px; padding:.55rem 1.1rem; font-family:inherit; font-size:var(--type-body); cursor:pointer; }
.prefs-done:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
html[data-textsize="large"] { font-size: 112.5%; }
html[data-textsize="xlarge"] { font-size: 125%; }
html[data-contrast="high"] {
--paper: #ffffff; --paper-warm: #f2efe8; --ink: #000000; --ink-soft: #2b2b2b;
--teal-deep: #143b38; --line: #b9b09f;
}
html[data-reading="dyslexia"] body {
line-height: 1.9;
letter-spacing: 0.06em;
word-spacing: 0.16em;
}
html[data-reading="dyslexia"] p { max-width: 62ch; margin-inline:auto; }
html[data-motion="reduce"] * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
/* BOLD TEXT PREFERENCE 2026-07-19 (Keiron's ruling, per Irina's finding - partial sight,
heavier strokes read easier): body text to 700 site-wide when chosen. Headings are
already 700; same colours, so every measured contrast pair is unchanged. Buttons and
the prefs panel inherit via body. Rendered check at the §9 pass: rung heads vs bolded
body on the green field (weight distinction collapses there by design - size + colour
still carry the hierarchy). Stored as ss_bold, localStorage, like every preference. */
html[data-bold="bold"] body { font-weight: 700; }
.skip-links { position: absolute; }
.orientation-band {
width: 100%; max-width: var(--page-max); margin-inline: auto;
padding: 1.2em var(--page-pad-x); /* the rhythm gap - the button inherits its context's
spacing (ELEMENTS clause), and it now scales with
the visitor's text size like every other gap */
display: flex; align-items: flex-start; justify-content: flex-start;
gap: 1.2em; flex-wrap: wrap;
background: transparent;
position: sticky; top: 0; z-index: 50;
pointer-events: none; /* the invisible band passes clicks through to the content beneath */
/* 2026-07-22 (Keiron): scroll-linked FADE and the wheat/divider ::before bar REMOVED - the fade did
not run on Android Chrome / iPhone Safari and was a nice-to-have. The band now carries only the
Accessibility options button (its own paper background + green border), pinned top-left as the page
scrolls (WCAG 3.2.3 / 3.2.4 consistent location). No bar, no message; the --fade var and the
.is-collapsed fallback are gone, and the matching fade code was removed from site.js. */
}
.orientation-band .prefs-trigger { pointer-events: auto; }
.prefs-trigger {
position: static; left: auto; bottom: auto; flex: 0 0 auto;
margin-block: 0 0.35em; /* OPTICAL LAW (13 Jul, Keiron's catch): text sits in its leading
(~6px invisible air around the glyphs at 17px/1.7); a hard edge has
none, so the button read closer to the band's bottom than the text
read to its top. Half-leading margin on the EDGE-FACING side only -
the text-facing side is already aired by the text's own leading
(one owner per gap, optical edition; rendered-measured 13 Jul). */
background: var(--paper); color: var(--teal-deep);
border: 2px solid var(--teal); border-radius: 8px;
font-family: inherit; font-size: var(--type-body); font-weight: 400;
padding: .5rem .9rem; cursor: pointer; box-shadow: none;
display: inline-flex; align-items: center; gap: .5rem;
}
.prefs-trigger:hover { background: var(--teal); color: #fff; }
.prefs-trigger:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
@media (max-width: 480px) { .orientation-band { flex-direction: column; align-items: flex-start; } }
.prose--left { text-align: left; }
.prose h2 { font-size: var(--type-h2); color: var(--teal-deep); margin: var(--gap-minor) 0 .3em; line-height: var(--line-tight); }
/* ^ HEADING-BIND FIX 2026-07-19 (Keiron's third rendered catch this sitting): bottom margin
was --gap-tight (20px) -> h2-to-paragraph measured ~30px VISIBLE, the SAME as the
paragraph rhythm (28-32px) - the heading floated as far from its own text as strangers
sit from each other, owning nothing. The ruled law (14 Jul, the ladder): A HEADER BINDS
TIGHT TO ITS TEXT (.3em - the rung-head precedent); unit-to-unit takes the paragraph
rhythm. Now ~17px visible below h2 vs ~30 between units: the heading groups downward,
as proximity requires. Applies site-wide - index h2s had the same fault. */
.prose h2:first-child { margin-top: 0; } /* the section gap owns the room boundary */
.prose h3 { font-size: var(--type-body); color: var(--teal); margin: var(--gap-tight) 0 .3em; line-height: var(--line-tight); }
/* ^ .3rem -> .3em 2026-07-19: one law, one form - the tight bind is em-based (the rung
precedent) so it scales with the element's own type. */
.prose ul, .prose ol { margin: var(--gap-tight) 0 var(--gap-tight) 1.4em; line-height: 1.7; }
.prose h2 + ul, .prose h2 + ol, .prose h3 + ul, .prose h3 + ol { margin-top: 0; }
/* ^ HEADING-BIND, list edition 2026-07-19: a list's 20px top margin collapsed OVER the
heading's .3em (adjacent-margin collapse takes the larger), so list-led sections
("What we don't do", "Your rights") kept the floating-heading fault after the h2 fix.
Zeroed when a list directly follows its heading - the heading's own .3em wins the
collapse and owns the gap (one owner per gap). */
.prose > :last-child { margin-bottom: 0; }
/* ^ BOUNDARY LAW, GENERAL FORM 2026-07-19 (Keiron's catches, iterated: "The standard we
aim for" exposed the list leak; "What we don't do" exposed the TABLE leak - .cookie-table
carries a 30px bottom margin; element-by-element patching is whack-a-mole). Whatever
element ends a prose container - paragraph, list, table, figure, anything future -
its bottom margin is zeroed: THE SECTION GAP OWNS THE ROOM BOUNDARY, both ends, alone.
Replaces the narrower ul/ol:last-child rule from earlier this sitting. */
.prose li { margin-bottom: .4rem; }
.prose li:last-child { margin-bottom: 0; } /* no residue through the collapsed boundary */
.prose code { background: var(--paper-warm); padding: .05em .35em; border-radius: 4px; font-size: .95em; }
.prefs-reset-btn{background:none;border:0;color:var(--teal-deep);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
[tabindex="-1"]:focus{outline:none}
/* ================================================================
GATE-GARDEN THEME - SITE-WIDE (promoted from index.css 2026-07-17,
Keiron's ruling: the utility pages were "quite jarring" beside the
index; one theme everywhere is a predictability kindness to the
anxious visitor (consistent presentation across pages), not just
taste. History: born as the index's 12 Jul green-box experiment;
all contrast pairs below measured (Johnson) - numbers in comments.
================================================================ */
/* DRAFT-ONLY (12 Jul): THE GATE PALETTE — colours lifted from the photo, mapped onto the site's own
variable roles (the gate's wood turned out to BE the site's copper — the photo chose us back).
Contrast VERIFIED (Johnson): ink/paper 13.6:1 · links 7.8:1 · white-on-deep-green 8.6:1 ·
tag green 5.9:1 · copper hover 4.8:1 · focus ring 3.9:1 (non-text, needs 3:1). Delete this block
to restore the teal scheme. IRINA'S SEED: these variables make user-switchable schemes one
data-attribute away — captured in _TODO. */
:root {
--paper: #f7f4ec; /* sunlit warm white */
--paper-warm: #efe6d6; /* sun on wood */
--ink: #2b2620; /* wood-shadow ink */
--ink-soft: #57503f;
--line: #ddd2bd;
--teal: #546b46; /* nursery sage */
--teal-deep: #3c5233; /* deep leaf */
--copper: #9c5d28; /* the gate itself */
--copper-light: #d9b06a; /* the brass bolt */
}
:focus-visible { outline-color: #7a6da0; } /* the lavender rows */
/* ============================================================
DRAFT EXPERIMENT (12 Jul, Keiron): THE ONE GREEN BOX.
Page background deep green; the hero's box grows to hold the
whole page (same width, whatever length the contents need);
white cards stay white; the cookie-pair box becomes a white
card like the others. Contrast verified (Johnson): white on
box-green 8.6:1 · prose-light 7.2:1 · footer 8.4:1 · links
stay white-underlined on green (brass = hover only).
DELETE FROM HERE TO THE MARKER TO RESTORE THE SECTIONED PAGE.
============================================================ */
body { background: #f4ead8; } /* the page: sunlit gate-wood, light as before */
main.page { background: var(--teal-deep); border-radius: var(--gap-tight);
padding: calc(var(--gap-major) + 0.35em) var(--page-pad-x) var(--gap-major); color: #fff;
box-shadow: 0 2px 14px rgba(60,82,51,.25); } /* the green box sits ON the light page */
/* ^ OPTICAL LAW on the box top (14 Jul, Keiron): box-top->Welcome is a HARD edge -> heading; the
section gaps run TEXT->heading and carry an extra half-leading. So the box-top padding adds
+0.35em (one half-leading) to make box-top->Welcome LOOK the same as the section gaps. Bottom
stays --gap-major (text->hard edge; compensate later if flagged). */
main.page .hero { background: transparent; } /* the old box dissolves into the big one */
main.page h1, main.page h2, main.page h3 { color: #fff; }
main.page p, main.page li { color: #e7eedd; }
main.page a { color: #ffffff; text-decoration: underline; }
main.page a:hover { color: var(--copper-light); }
/* white cards keep their own weather */
main.page .card, main.page .way, main.page .lede-principle {
background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: var(--gap-minor); }
main.page .card p, main.page .way p, main.page .lede-principle p { color: var(--ink); }
main.page .card h3, main.page .way h3 { color: var(--teal-deep); }
main.page .card a, main.page .way a, main.page .lede-principle a { color: var(--teal-deep); }
main.page .lede-principle p + p { color: var(--ink-soft); }
main.page .way .primary-tag { color: var(--teal); }
main.page .support p { color: #d8e2cf; }
/* footer sits on the light page again — site defaults (ink-soft / teal-deep links) already pass on this tone */
/* 2026-07-22 (Keiron): the band's brass ::before bar and the message colour removed with the fade
(see the note by .orientation-band above). The Accessibility options button keeps its own theme
below - deep-green border and focus ring, on its paper background. */
/* Conformance fixes (12 Jul, from Keiron's "does it conform?"): button border was 2.8:1 on brass
(needs 3:1 non-text) -> deep green 4.3:1; lavender focus ring fell to ~2:1 on the green box ->
white ring inside the box (8.6:1), lavender survives on the light page outside. */
.orientation-band .prefs-trigger { border-color: #3c5233; }
main.page :focus-visible { outline-color: #ffffff; }
/* P15-F1 FIX 2026-07-17 (template pass): the trigger's COPPER focus ring measured 2.29:1 on the
brass band unscrolled (needs 3:1 non-text, SC 1.4.11); it only passed once the band faded.
Ring re-coloured to the SAME deep green as the button border above (the 12 Jul precedent pair):
#3c5233 vs brass #d9b06a ~4.2:1, vs the faded body #f4ead8 ~7.2:1 - passes in BOTH states,
and ring matches border so the control has one identity focused or not. */
.orientation-band .prefs-trigger:focus-visible { outline-color: #3c5233; }
/* P15-F2 FIX 2026-07-17, CORRECTED SAME DAY (Fable's first fix used the band brass #d9b06a
"estimated ~4.7:1" - MEASURED 4.24:1, the exact failing number the register recorded. The
estimate reproduced the finding; the checker caught the checker. Numbers, never eyes - ours
included.) Hover on green now uses the ORIGINAL palette's lighter copper #e7b489: MEASURED
4.61:1 on deep-leaf - passes 4.5 text minimum, keeps the warm-on-green intent, underline
carries the affordance throughout. Links inside WHITE cards need their own hover (the light
copper would be 1.86:1 on white): gate copper #9c5d28, MEASURED 5.22:1 on white. */
main.page a:hover { color: #e7b489; }
main.page .card a:hover, main.page .way a:hover, main.page .lede-principle a:hover { color: var(--copper); }
/* ============================ END OF GREEN-BOX EXPERIMENT ============================ */
/* Utility-page adjustments for the green box (17 Jul, measured):
- caption sat ink-soft on green (2.0:1) -> prose-light #e7eedd (~9:1 on deep leaf);
- table cells get white ground + ink text (13.6:1) - the cookie table is a handed
instrument, and handed instruments are white boxes (the surface rule);
- the in-box Back to top was NEW-FOUND during this pass: site.css gave it teal-deep
text on the now-teal-deep box - the SAME colour, ~1:1, an invisible control (it
was already invisible on the index invite section; nobody had pressed it from
inside the box). White text + white border on green: 8.6:1 / passes 3:1 non-text;
hover fills white with deep-green text (8.6:1 inside the fill). */
main.page .cookie-table th, main.page .cookie-table td { background: #fff; color: var(--ink); }
main.page .cookie-table caption { color: #e7eedd; }
main.page .to-top { color: #fff; border-color: #fff; }
main.page .to-top:hover { background: #fff; color: var(--teal-deep); }