/* ---- 1. Design tokens ---- */
:root {
/* Brand */
--mid: #2a256d; /* Midnight Blue */
--mid-deep: #1d1950; /* darker midnight for gradients */
--mid-deeper: #14113a;
--gold: #fdd803; /* Bright Gold */
--gold-soft: #ffe767;
--fuchsia: #ec008c; /* Fuchsia Flame (decorative) */
--fuchsia-ink: #c4007a; /* fuchsia for text/buttons on light (>= 4.5:1 white) */
--pacific: #39bfd0; /* Pacific Blue (hover) */
--cream: #faf6e4;
--color-primary: var(--fuchsia);
--color-primary-accessible: var(--fuchsia-ink);
--a11y-accent: var(--mid);
--color-secondary: var(--mid);
--color-accent: var(--gold);
--color-dark: #14113a;
--color-light: var(--cream);
--color-bg: #ffffff;
--color-text: #211d40;
--color-muted: #5c5878;
--color-border: #e7e3d4;
/* Typography */
--font-heading: "termina", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-base: 16px;
--lh-base: 1.65;
/* Layout */
--container-max: 1380px;
--container-pad: 1.35rem;
--radius: 12px;
--radius-lg: 22px;
--page-frame: 0px;
--page-frame-color: transparent;
--shadow-card: 0 24px 60px -28px rgba(20, 17, 58, .55);
--focus-ring: 3px solid var(--fuchsia-ink);
/* Footer (dark Midnight) */
--footer-bg: var(--mid);
--footer-text: #ffffff;
--footer-text-soft: rgba(255,255,255,0.82);
--footer-link-hover: var(--pacific);
--footer-org-accent: var(--gold);
--footer-rule: rgba(255,255,255,0.20);
--footer-donate-bg: var(--gold);
--footer-donate-text:var(--mid);
}
/* ---- 2. Minimal reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; color-scheme: light only; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Browser force-dark (e.g. Samsung Internet): ship a dark-pref theme so it uses our light styles instead of inverting */
@media (prefers-color-scheme: dark) {
html { color-scheme: only light; }
input, textarea, select { background-color: #fff; }
}
body {
margin: 0;
font-family: var(--font-body);
line-height: var(--lh-base);
color: var(--color-text);
background: var(--color-bg);
border: var(--page-frame) solid var(--page-frame-color);
}
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-accessible); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* ---- 3. Structural utilities (not visual design) ---- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--color-dark); color: #fff; padding: .65rem 1rem;
}
.skip-link:focus { left: 0; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Progressive enhancement hook (header sets .js on ). */
.js [data-js-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ---- ACCESSIBILITY: "Display preferences" modes + menu UI ---- */
/* High contrast: dark scheme, forced with !important to beat campaign CSS */
html.a11y-contrast {
--color-bg: #000000; --color-text: #ffffff; --color-muted: #ffffff;
--color-border: #ffffff; --color-light: #000000;
--color-secondary: #000000; --color-dark: #000000;
--color-primary: #ffff00; --color-primary-accessible: #ffff00; --color-accent: #ffff00;
}
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
/* surfaces -> black (incl. blockquote/figure/list/table/a so cards & whole-card links aren't left light) */
html.a11y-contrast header, html.a11y-contrast main, html.a11y-contrast footer,
html.a11y-contrast section, html.a11y-contrast article, html.a11y-contrast aside,
html.a11y-contrast nav, html.a11y-contrast form, html.a11y-contrast a,
html.a11y-contrast blockquote, html.a11y-contrast figure, html.a11y-contrast ul,
html.a11y-contrast ol, html.a11y-contrast li, html.a11y-contrast dl,
html.a11y-contrast dd, html.a11y-contrast table,
html.a11y-contrast div:not([data-a11y-menu]):not(.a11y__panel) {
background-color: #000 !important; background-image: none !important;
}
/* text -> white */
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span,
html.a11y-contrast label, html.a11y-contrast blockquote, html.a11y-contrast figcaption,
html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast dt, html.a11y-contrast dd,
html.a11y-contrast strong, html.a11y-contrast em, html.a11y-contrast small {
color: #fff !important;
}
/* links: bright yellow + always underlined */
html.a11y-contrast a, html.a11y-contrast a * { color: #ffff00 !important; text-decoration: underline !important; }
/* buttons: bright yellow with black text (leave the a11y widget controls alone) */
html.a11y-contrast .btn,
html.a11y-contrast button:not(.a11y__toggle):not(.a11y__reset) {
background: #ffff00 !important; color: #000 !important; border: 2px solid #ffff00 !important;
}
html.a11y-contrast .btn *,
html.a11y-contrast button:not(.a11y__toggle):not(.a11y__reset) * { color: #000 !important; }
html.a11y-contrast :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 2px; }
/* keep media visible (don't blacken images/video) */
html.a11y-contrast img, html.a11y-contrast picture, html.a11y-contrast video { background: transparent !important; }
/* Menu keeps its normal look under high contrast (higher specificity wins) */
html.a11y-contrast .a11y__toggle { background: var(--a11y-accent) !important; border-color: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel { background: #f3f5f7 !important; color: #1b232b !important; border-color: #c9ced3 !important; }
/* Accent header / footer + circular badge + close */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel-head,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__footer { background: var(--a11y-accent) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel-title { color: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__kbd { background: rgba(255,255,255,.22) !important; color: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__close { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__close svg { color: #fff !important; }
/* Status strip */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__status { background: #eef1f4 !important; border-bottom-color: #d7dde3 !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__status--on .a11y__status-ico { color: #15803d !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__status-count { color: #1b232b !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__status-ico,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__resetall { background: transparent !important; color: var(--a11y-accent) !important; }
/* Sections + rows */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-title,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-icon,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__row-icon { color: var(--a11y-accent) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__row-label { color: #1b232b !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__dys-chip { color: var(--a11y-accent) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section { border-color: #c9ced3 !important; }
/* Toggle switch */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__sw { background: #c9ced3 !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__sw-input:checked ~ .a11y__sw { background: var(--a11y-accent) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__sw-knob { background: #fff !important; }
/* Segmented option buttons (off = white; active = accent) */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2-opt { background: #fff !important; color: #1b232b !important; border-color: #d3d9df !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="dark"] [data-a11y-cycle-opt="dark"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="invert"] [data-a11y-cycle-opt="invert"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="low"] [data-a11y-saturate-opt="low"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="high"] [data-a11y-saturate-opt="high"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="grey"] [data-a11y-saturate-opt="grey"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="big"] [data-a11y-cursor-opt="big"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="mask"] [data-a11y-cursor-opt="mask"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="guide"] [data-a11y-cursor-opt="guide"] { background: var(--a11y-accent) !important; color: #fff !important; border-color: var(--a11y-accent) !important; }
/* Position segmented + hide-for */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg { background: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg-opt { color: #1b232b !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg-opt:has(input:checked) { background: var(--a11y-accent) !important; color: #fff !important; }
/* Footer bug + Help (accent bar; keep white text, no yellow-link bleed) */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug { background: transparent !important; color: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-by { color: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-tag { color: rgba(255,255,255,.9) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-logo,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-logo * { color: #fff !important; fill: #fff !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug * { text-decoration: none !important; }
/* Neutralize generic high-contrast bleed inside the menu */
html.a11y-contrast .a11y[data-a11y-menu] ul,
html.a11y-contrast .a11y[data-a11y-menu] li,
html.a11y-contrast .a11y[data-a11y-menu] section,
html.a11y-contrast .a11y[data-a11y-menu] div { background-color: transparent !important; }
html.a11y-contrast .a11y[data-a11y-menu] p,
html.a11y-contrast .a11y[data-a11y-menu] span,
html.a11y-contrast .a11y[data-a11y-menu] label,
html.a11y-contrast .a11y[data-a11y-menu] h3 { color: #1b232b !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-title,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-icon,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__row-icon { color: var(--a11y-accent) !important; }
html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel-title,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__kbd,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__footer .a11y__bug-by { color: #fff !important; }
/* Larger text (rem-based layout scales with it) */
html.a11y-text-lg { --fs-base: 20px; }
/* OpenDyslexic; @font-face only downloads when dyslexia mode applies. To self-host, download woff2 to resources/fonts/ and repoint src. */
@font-face { font-family:'OpenDyslexic'; font-style:normal; font-weight:400; font-display:swap;
src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff) format('woff'); }
@font-face { font-family:'OpenDyslexic'; font-style:normal; font-weight:700; font-display:swap;
src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff2) format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff) format('woff'); }
@font-face { font-family:'OpenDyslexic'; font-style:italic; font-weight:400; font-display:swap;
src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-italic.woff2) format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-italic.woff) format('woff'); }
@font-face { font-family:'OpenDyslexic'; font-style:italic; font-weight:700; font-display:swap;
src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-italic.woff2) format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-italic.woff) format('woff'); }
/* Dyslexia-friendly font + extra spacing */
html.a11y-dyslexia {
--font-body: "OpenDyslexic", system-ui, sans-serif;
--font-heading: "OpenDyslexic", system-ui, sans-serif;
--lh-base: 1.8;
}
html.a11y-dyslexia body { letter-spacing: .02em; word-spacing: .08em; }
/* Reduce motion (overrides regardless of OS setting) */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
/* Hide images but keep info: a11y.js adds alt text in .a11y-alt. Decorative bg opts in via [data-decorative-bg]. */
html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video,
html.a11y-hide-images svg:not(.a11y__icon) { display: none !important; }
html.a11y-hide-images [data-decorative-bg] { background-image: none !important; }
.a11y-alt {
display: none;
font-style: italic;
color: var(--color-muted);
border: 1px dashed var(--color-border);
padding: .4rem .6rem;
}
html.a11y-hide-images .a11y-alt { display: inline-block; }
/* Underline links: thick, offset, currentColor so it stays contrasty */
html.a11y-underline-links a {
text-decoration: underline !important;
text-decoration-thickness: 3px !important;
text-decoration-color: currentColor !important;
text-underline-offset: 3px !important;
}
/* Text spacing (headings included) */
html.a11y-spacing h1, html.a11y-spacing h2, html.a11y-spacing h3,
html.a11y-spacing h4, html.a11y-spacing h5, html.a11y-spacing h6,
html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing a,
html.a11y-spacing span, html.a11y-spacing blockquote, html.a11y-spacing label {
letter-spacing: .12em !important; word-spacing: .16em !important;
}
/* Line height (headings included; overrides their fixed 1.2) */
html.a11y-line-height { --lh-base: 2; }
html.a11y-line-height p, html.a11y-line-height li, html.a11y-line-height blockquote,
html.a11y-line-height h1, html.a11y-line-height h2, html.a11y-line-height h3,
html.a11y-line-height h4, html.a11y-line-height h5, html.a11y-line-height h6 {
line-height: 2 !important;
}
/* Invert colors. filter on makes position:fixed resolve against page not viewport (known filter side effect; acceptable for opt-in). */
html.a11y-invert body > :not(.a11y) { filter: invert(1) hue-rotate(180deg); }
/* body bg isn't inverted (menu lives in body), so give it a dark backdrop for readability */
html.a11y-invert body { background: #11151a; }
/* Re-invert real media so photos/logos render normally. Filter the ![]()
, not (double-filter = net negative). [data-no-invert] to opt out. */
html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert iframe,
html.a11y-invert [data-no-invert] { filter: invert(1) hue-rotate(180deg) !important; }
/* ---- Menu UI (fixed px so Larger Text can't scale it; isolated from all modes) ---- */
.a11y { position: fixed; bottom: 16px; z-index: 1000; font-size: 16px; pointer-events: none; }
.a11y--bottom-right { right: 16px; }
.a11y--bottom-left { left: 16px; }
/* wrapper is click-through so footer links underneath aren't blocked */
.a11y__toggle, .a11y__panel { pointer-events: auto; }
.a11y__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; padding: 0; border-radius: 50%;
background: var(--a11y-accent); color: #fff; border: 2px solid #fff; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.a11y__toggle:hover { background: color-mix(in srgb, var(--a11y-accent) 88%, #000); }
.a11y__btn-icon { width: 26px; height: 26px; }
/* Panel: fixed-height flex column */
.a11y__panel {
position: fixed; top: 8px; right: 8px; bottom: 8px;
width: min(376px, calc(100vw - 16px));
display: flex; flex-direction: column; overflow: hidden;
background: #f3f5f7; color: #1b232b;
border-radius: 14px; padding: 0;
box-shadow: 0 18px 50px rgba(0,0,0,.28);
transform-origin: bottom right;
transition: transform .22s cubic-bezier(.34,1.18,.64,1), opacity .18s ease;
}
.a11y--bottom-left .a11y__panel { left: 8px; right: auto; transform-origin: bottom left; }
.a11y__panel[hidden] { display: none; }
/* Closed state for grow/shrink anim */
.a11y__panel:not(.a11y__panel--open) { opacity: 0; transform: scale(.55); }
/* Header: accent bar with circular badge, title + shortcut, round close */
.a11y__panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--a11y-accent); color: #fff; }
.a11y__head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.a11y__panel-title { margin: 0; font-weight: 800; font-size: 22px; line-height: 1.1; color: #fff; font-family: var(--a11y-title-font, inherit); }
.a11y__kbd { align-self: flex-start; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: rgba(255,255,255,.22); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
/* touch-primary: no keyboard, hide shortcut hint */
@media (pointer: coarse) { .a11y[data-a11y-menu] .a11y__kbd { display: none; } }
.a11y__close {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border-radius: 50%;
background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); cursor: pointer; line-height: 1;
}
.a11y__close:hover { background: rgba(255,255,255,.16); }
.a11y__close svg { width: 16px; height: 16px; }
/* Focus ring: the menu accent by default; white inside the accent header/footer bars */
.a11y[data-a11y-menu] :focus-visible { outline: 3px solid var(--a11y-accent) !important; outline-offset: 2px !important; }
.a11y[data-a11y-menu] .a11y__panel-head :focus-visible,
.a11y[data-a11y-menu] .a11y__footer :focus-visible { outline-color: #fff !important; }
/* Status strip: adjustments counter + Reset all (accent-tinted via .--on in JS) */
.a11y__status { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 18px; background: #fff; border-bottom: 1px solid #e7ebef; transition: background .15s ease, border-color .15s ease; }
.a11y__status--on { background: color-mix(in srgb, var(--a11y-accent) 8%, #fff); border-bottom-color: color-mix(in srgb, var(--a11y-accent) 14%, #e7ebef); }
.a11y__status-count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1b232b; }
.a11y__status-ico { display: inline-flex; color: #9aa2ab; transition: color .15s ease; }
.a11y__status--on .a11y__status-ico { color: #15803d; } /* active = success green, intentionally theme-independent */
.a11y__status-ico svg { width: 20px; height: 20px; }
.a11y__resetall { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 14px; color: var(--a11y-accent); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.a11y__resetall svg { width: 18px; height: 18px; }
.a11y__resetall:hover { color: color-mix(in srgb, var(--a11y-accent) 80%, #000); }
/* Scrolling body: positioning context for overscroll shadow + scroll indicator */
.a11y__body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.a11y__body::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
background: linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0));
opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.a11y__body.is-over-bottom::after { opacity: 1; }
.a11y__sections { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; padding: 12px 16px 16px; scrollbar-width: none; }
.a11y__sections::-webkit-scrollbar { width: 0; height: 0; }
/* Custom scroll indicator (visual only) */
.a11y__sb {
position: absolute; top: 6px; bottom: 6px; right: 5px; width: 6px; display: block;
border-radius: 999px; background: rgba(0,0,0,.06);
opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.a11y__body.is-scrollable .a11y__sb { opacity: 1; }
.a11y__sb-thumb {
position: absolute; left: 0; right: 0; top: 0; display: block; width: 100%;
min-height: 24px; border-radius: 999px; background: var(--a11y-accent);
}
/* Sections (Vision / Text & Reading / Navigation & Motion) */
.a11y__section { margin: 0 0 16px; padding: 14px 14px 6px; background: #fff; border: 1px solid #e4e9ee; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.a11y__section:last-child { margin-bottom: 4px; }
.a11y__section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.a11y__section-icon { display: inline-flex; color: var(--a11y-accent); }
.a11y__section-icon svg { width: 22px; height: 22px; }
.a11y__section-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a11y-accent); }
/* Rows */
.a11y__row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-radius: 10px; }
.a11y__row + .a11y__row { border-top: 1px solid #eef1f4; }
.a11y__row--toggle { cursor: pointer; user-select: none; -webkit-user-select: none; }
.a11y__row--toggle:hover { background: color-mix(in srgb, var(--a11y-accent) 5%, #fff); }
.a11y__row--seg { display: block; padding: 12px 4px; }
.a11y__row-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.a11y__row-icon { flex: 0 0 auto; display: inline-flex; color: var(--a11y-accent); }
.a11y__row-icon svg { width: 24px; height: 24px; }
.a11y__row-label { flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.25; color: #1b232b; }
/* OpenDyslexic "Aa" preview chip (label stays in UI font) */
.a11y__dys-chip { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--a11y-accent) 12%, #fff); color: var(--a11y-accent); font-family: "OpenDyslexic", system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.4; }
/* On/off toggle switch (input is visually hidden; the track/knob follow it) */
.a11y__sw-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.a11y__sw { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c9ced3; transition: background .15s ease; }
.a11y__sw-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; }
.a11y__sw-input:checked ~ .a11y__sw { background: var(--a11y-accent); }
.a11y__sw-input:checked ~ .a11y__sw .a11y__sw-knob { transform: translateX(20px); }
.a11y__sw-input:focus-visible ~ .a11y__sw { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }
/* Segmented multi-option controls (contrast / saturation / cursor); re-click active = off */
.a11y__seg2 { display: flex; gap: 0; }
.a11y__seg2-opt { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; color: #1b232b; background: #fff; border: 1.5px solid #d3d9df; border-right-width: 0; border-radius: 0; padding: 9px 6px; min-height: 46px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.a11y__seg2-opt:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.a11y__seg2-opt:last-child { border-right-width: 1.5px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.a11y__seg2-opt:hover { background: color-mix(in srgb, var(--a11y-accent) 8%, #fff); }
.a11y__seg2-opt:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; position: relative; }
/* check marks active option (not colour alone); aria-pressed synced in JS */
.a11y__seg2-opt[aria-pressed="true"]::before { content: "\2713"; margin-right: 5px; font-weight: 900; }
.a11y__seg2[data-state="dark"] [data-a11y-cycle-opt="dark"],
.a11y__seg2[data-state="invert"] [data-a11y-cycle-opt="invert"],
.a11y__seg2[data-state="low"] [data-a11y-saturate-opt="low"],
.a11y__seg2[data-state="high"] [data-a11y-saturate-opt="high"],
.a11y__seg2[data-state="grey"] [data-a11y-saturate-opt="grey"],
.a11y__seg2[data-state="big"] [data-a11y-cursor-opt="big"],
.a11y__seg2[data-state="mask"] [data-a11y-cursor-opt="mask"],
.a11y__seg2[data-state="guide"] [data-a11y-cursor-opt="guide"] {
background: var(--a11y-accent); border-color: var(--a11y-accent); color: #fff;
}
/* Menu-position picker - segmented control (radios) */
.a11y__seg { display: flex; gap: 3px; padding: 3px; background: #fff; border: 1px solid #d3d9df; border-radius: 999px; }
.a11y__seg-opt { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 3px; border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.a11y__seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a11y__seg-opt:has(input:checked) { background: var(--a11y-accent); color: #fff; }
.a11y__seg-opt:has(input:focus-visible) { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }
/* Footer: accent bar with the MDW bug (logo + tagline) and a Help link */
.a11y__footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--a11y-accent); }
.a11y__bug { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: #fff; }
.a11y__bug-logo { height: 22px; width: auto; flex: 0 0 auto; color: #fff; }
.a11y__bug-tag { display: flex; flex-direction: column; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.9); }
.a11y__bug-by { font-weight: 700; color: #fff; }
/* Cursor tools (page-level; toggled on by mdw-a11y.js) */
html.a11y-cursor-big, html.a11y-cursor-big * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.5 1.4L16 19.5l-2.6 1.1-3.4-7L5 19z' fill='%23fff' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; }
.a11y-guide { position: fixed; left: 0; right: 0; height: 0; border-top: 5px solid var(--a11y-cursor-accent, #1b232b); box-shadow: 0 0 0 1.5px rgba(255,255,255,.75), 0 3px 8px rgba(0,0,0,.4); pointer-events: none; z-index: 999; }
.a11y-mask-panel { position: fixed; left: 0; right: 0; background: rgba(13,18,26,.6); pointer-events: none; z-index: 998; }
.a11y-mask-top { top: 0; box-shadow: inset 0 -3px 0 var(--a11y-cursor-accent, #1b232b); }
.a11y-mask-bottom { bottom: 0; box-shadow: inset 0 3px 0 var(--a11y-cursor-accent, #1b232b); }
/* Saturation: a page filter applied to everything EXCEPT the (isolated) menu */
html.a11y-saturate-low body > :not(.a11y) { filter: saturate(.5) !important; }
html.a11y-saturate-high body > :not(.a11y) { filter: saturate(1.6) !important; }
html.a11y-saturate-grey body > :not(.a11y) { filter: saturate(0) !important; }
/* ---- MENU ISOLATION: modes must not reach inside the menu ---- */
.a11y[data-a11y-menu], .a11y[data-a11y-menu] * {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
letter-spacing: normal !important; word-spacing: normal !important; line-height: normal !important;
}
.a11y[data-a11y-menu] .a11y__dys-chip { font-family: "OpenDyslexic", system-ui, sans-serif !important; }
.a11y[data-a11y-menu] { filter: none !important; }
/* keep menu icons visible under hide-images */
html.a11y-hide-images .a11y[data-a11y-menu] svg { display: inline-block !important; }
/* ---- r3peat (repeating-content grid; e.g. endorsements) ---- */
.r3peat-group { text-align: center; margin: 2rem 0 1rem; }
.r3peat-grid {
list-style: none; margin: 0 0 2rem; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem;
}
.r3peat-card { text-align: center; }
.r3peat-card__fig { margin: 0; }
.r3peat-card__photo {
width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto .75rem;
}
.r3peat-card__cap { display: flex; flex-direction: column; gap: .15rem; }
.r3peat-card__name { font-weight: 700; }
.r3peat-card__title { color: var(--color-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.r3peat-card__link { text-decoration: none; color: inherit; }
/* ---- Lengua — floating language picker (default switcher) ---- */
.lengua-fab { position: fixed; bottom: 80px; z-index: 999; font-size: 16px; }
.lengua-fab--right { right: 16px; }
.lengua-fab--left { left: 16px; }
.lengua-fab--solo { bottom: 16px; } /* a11y widget off: nothing below, so sit in the corner */
.lengua-fab__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; padding: 0; border-radius: 50%;
background: #316ed2; color: #fff; border: 2px solid #fff; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.28);
transition: background .2s ease, transform .2s ease;
}
.lengua-fab__toggle:hover { background: #295db3; transform: translateY(-2px); }
.lengua-fab__toggle:focus-visible { outline: 3px solid #316ed2; outline-offset: 2px; }
.lengua-fab__icon { width: 28px; height: 28px; transform: translateY(1px); }
/* Picker: pointed tag beside the button */
/* Stacks VERTICALLY and stays centred on the button, so it holds any number of
languages. It was a horizontal row, which worked only because this site has
two languages and therefore exactly one option to show. Kept in step with the
kit so a third language doesn't run the tag off the side of the screen. */
.lengua-fab__pop {
position: absolute; top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; align-items: stretch;
background: #316ed2;
box-shadow: 0 6px 18px rgba(0,0,0,.26);
overflow: hidden; /* let the rounded corners clip the first/last option */
}
.lengua-fab--right .lengua-fab__pop { right: calc(100% + 20px); left: auto; border-radius: 12px 0 0 12px; }
.lengua-fab--left .lengua-fab__pop { left: calc(100% + 20px); right: auto; border-radius: 0 12px 12px 0; }
.lengua-fab__pop[hidden] { display: none; }
/* Arrow point. Fixed height and centred rather than spanning the tag — with
more than one row it became a tall spike. */
.lengua-fab__pop::after {
content: ''; position: absolute; top: 50%; transform: translateY(-50%);
width: 16px; height: 34px; background: #316ed2;
}
.lengua-fab--right .lengua-fab__pop::after { left: 100%; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.lengua-fab--left .lengua-fab__pop::after { right: 100%; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.lengua-fab__opt {
display: block; padding: .72rem 1.3rem;
font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem;
letter-spacing: .01em; color: #fff; text-decoration: none; white-space: nowrap;
text-align: center; transition: background .18s ease;
}
.lengua-fab__opt + .lengua-fab__opt { border-top: 1px solid rgba(255,255,255,.22); }
.lengua-fab__opt:link,
.lengua-fab__opt:visited,
.lengua-fab__opt:hover,
.lengua-fab__opt:focus { color: #fff; text-decoration: none; }
/* Teal on hover, per OPTION. It used to tint the whole tag, which reads as the
block being the target rather than the language under the cursor. */
.lengua-fab__opt:hover,
.lengua-fab__opt:focus-visible { background: #0fa3b1; }
.lengua-fab__opt[aria-current] { display: none; } /* the current language isn't an option */
/* Lift floating buttons off the footer at page bottom (body.at-bottom); small screens only */
.a11y__toggle, .lengua-fab { transition: transform .3s ease; }
@media (max-width: 768px) {
body.at-bottom .a11y__toggle,
body.at-bottom .lengua-fab { transform: translateY(-90px); }
}
/* ---- SCROLL PERFORMANCE (kit standard) ----
Keep scroll smooth: no un-throttled scroll handlers (site.js rAF-throttles
is-scrolled — style off that class); transition only transform/opacity/
background-color/box-shadow on the header (never `all`, size, or filter);
no background-attachment:fixed; use backdrop-filter sparingly. */
.site-header {
/* cheap-only transitions for the scrolled state */
transition: box-shadow .4s ease, transform .2s ease;
}
/* Baseline scrolled treatment (sites override the look) */
html.is-scrolled .site-header { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
/* ---- PAGE TRANSITIONS (opt-in via config 'transitions') ----
Cross-document View Transitions; server adds xt + xt--