/* ============================================================ SELF-HOSTED WEB FONTS (Aug 2026) - replaces the Google Fonts on every page: Google's font hosts are unreachable in mainland China (a primary audience) and the render-blocking request stalled first paint there. Latin subset only, WOFF2 only, font-display: swap (text always visible). Oswald was in the old Google URL but is used NOWHERE in the CSS, so it is deliberately not hosted. All families OFL-licensed. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.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: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/lora-500-italic.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: 'Lora'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/lora-600-italic.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: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/lora-500.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: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/lora-600.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: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lora-700.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: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-400.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: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/playfair-display-700.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; } /* GEM Platform — brand tokens (single source of truth for design values). Use these variables everywhere. No hard-coded colors anywhere in the site. */ :root{ /* Color */ --purple: #3A2A66; /* primary — headings, key UI, dark sections */ --purple-deep: #2E2150; /* hovers / deeper accents */ --purple-bright:#6B4FA0; /* lively mid-violet — buttons, links, icons, hover states, italic headline accents. 6.5:1 on white / 5.6:1 on lavender → AA at all text sizes on light surfaces; never use on dark backgrounds. */ --gold: #BB863F; /* canonical gold — matches the logo/crest; accents, large headings, icons, dividers only */ --gold-deep: #8A6222; /* accessible deep gold — SMALL gold TEXT on LIGHT (white/cream/lavender) backgrounds only, where canonical --gold (#BB863F ≈ 3.2:1) fails AA. AA at small size: ≈5.4:1 white, ≈5.2:1 cream, ≈5.0:1 lavender-light, ≈4.8:1 lavender. Never for dark backgrounds. */ --lavender: #F2EEF8; /* soft section backgrounds */ --lavender-light:#F7F4FB; /* lighter, airier lavender — light section backgrounds and scrims where a softer tint than --lavender is wanted */ --cream: #FBF9F4; /* warm near-white — sticky header background */ --teal: #3E8E8C; /* soft teal — doorway icon accent */ --purple-mid: #5B4A8A; /* mid purple — doorway icon accent */ --text: #2E2A3D; /* body text (AA+ on white) */ --text-muted: #5B5670; /* secondary text */ --text-warm: #4A4658; /* warm grey — body copy on cream (e.g. calls-for-action band) */ --white: #FFFFFF; --focus: #3A2A66; /* purple focus ring — high-contrast/AA (gold is too light to ring reliably) */ /* Type */ --font-head: "Lora", Georgia, "Times New Roman", serif; /* warm, trustworthy — all headings */ --font-body: "Inter", system-ui, -apple-system, sans-serif; /* high legibility — body */ --font-display: "Playfair Display", "Lora", Georgia, serif; /* display only — org name + hero headline */ /* Section type scale (homepage) — ONE fluid source of truth, reused across every section so kickers / H2s / ledes / card-titles / body all match. Hero H1 and the big stat numbers keep their own larger DISPLAY sizes (not in this scale). */ --fs-kicker: clamp(1.25rem, 1.8vw, 1.55rem); /* eyebrow / kicker — real presence (~20-25px), still clearly below the H2 scale (1.7-2.3rem); clean Title Case treatment unchanged */ --fs-h2: clamp(1.7rem, 3vw, 2.3rem); /* section heading (H2) */ --fs-lede: clamp(1rem, 1.6vw, 1.15rem); /* supporting line under a heading */ --fs-h3: clamp(1.15rem, 2vw, 1.35rem); /* card title (H3) */ --fs-body: clamp(0.9rem, 1.4vw, 1rem); /* body / description */ /* Glass materials — UNIFIED by client direction (2026-08): the scrolled header AND the four homepage doorway panels now share ONE material, --glass-bg-header — the near-transparent light-purple "water" tint with NO backdrop-filter anywhere. Rationale: backdrop-filter blur renders heavier/less transparent on Apple engines than on Chrome; a flat translucent tint composites identically on Chrome, Android, Windows, iOS/macOS Safari and the WeChat webview. Legibility over busy ground is carried by per-glyph text shadows, never by darkening the tint. */ --glass-bg: rgba(98, 73, 147, 0.30); /* RETIRED (kept for easy rollback) — the panels' old heavier frost tint; no longer referenced */ --glass-bg-header: rgba(98, 73, 147, 0.14); /* THE shared glass tint: scrolled header + homepage doorway panels (see-through; content reads straight through). Black logo over the palest band ≈13.6:1; white text on it is carried by per-glyph shadows, NOT by this tint */ --glass-blur: 20px; /* RETIRED (kept for easy rollback) — the panels' old frost blur; no longer referenced */ --glass-border: 1px solid rgba(255, 255, 255, 0.16); /* subtle edge hairline (shared: panels + header bottom edge) */ /* Spacing / rhythm — generous, low-fatigue */ --line: 1.65; /* body line-height; long-form, tired eyes */ --maxw: 72ch; /* readable measure for prose */ --radius: 14px; }