/* ============================================================
   SELF-HOSTED WEB FONTS (Aug 2026) - replaces the Google Fonts
   <link> 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 */
  /* Five pillars (welcome.html): the soft wash at the top of each card - the card's
     accent at 9%, fading into the card's --lavender ground. One per accent. */
  --pillar-wash-purple:     rgba(58, 42, 102, 0.09);   /* --purple */
  --pillar-wash-gold:       rgba(187, 134, 63, 0.09);  /* --gold */
  --pillar-wash-teal:       rgba(62, 142, 140, 0.09);  /* --teal */
  --pillar-wash-purple-mid: rgba(91, 74, 138, 0.09);   /* --purple-mid */
  --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) */
  /* The paused members video (2026-10-12): the ground under the "Continue Watching" prompt once the
     preview ends. #072944 is the title slides' own background (sampled from the Ovarian Endometrioma
     set); the scrim is the same colour at 78%, laid over the video's title slide so the prompt reads
     as the paused video. Measured on the lightest slide pixel (white): white text 7.4:1, --lavender 6.5:1. */
  --video-paused-bg:    #072944;
  --video-paused-scrim: rgba(7, 41, 68, 0.78);

  /* 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;

  /* ---- Education Centres (moved here 2026-09-22 from guides.css and
     education-center.css, where they were defined locally while those pages
     were being built; the values are unchanged). ---------------------------- */
  /* Red family - the guides' emergency guidance (mirrors the PDF's #9B1C1C) */
  --guide-help:              #9B1C1C;  /* red label + rule. 7.36:1 on --guide-help-bg */
  --guide-help-bg:           #FCF1EF;  /* untiered help body */
  --guide-help-emergency-bg: #FCEBE9;  /* tier=emergency */
  --guide-help-urgent-bg:    #FDF5E4;  /* tier=urgent */
  /* Light gold for text ON purple, where --gold (3.2:1) and --gold-deep both fail */
  --guide-gold-light:        #E7C97A;  /* 7.65:1 on --purple */
  /* Patient Education Center */
  --pec-rose:                #FCEFF3;  /* soft rose tint - first entry card ground. --purple 11.03:1 */
  --pec-rose-edge:           #F6DCE5;  /* its slightly deeper edge, borders only */
  /* The patient hero's wash. Warmed from cream to a peach-rose sunrise
     (2026-09-22) to match the mockup; the gradient alphas in
     education-center.css were raised in step so every hero text pair still
     measures >= 7:1. Re-measure if either changes. */
  --pec-wash:                252, 233, 226;  /* peach-rose #FCE9E2 as RGB */
  /* Professional Education Center - navy, the clinical counterpart to --purple */
  --navy:                    #14325C;  /* white on it 12.80:1 */
  --navy-deep:               #0E2340;  /* deeper navy for the closing band; white 15.75:1 */
  --navy-rgb:                20, 50, 92;     /* --navy as RGB, for the hero's tint and wash */
  /* The four professional-centre card tints (2026-09-22). Soft enough to read
     as one family; each measured with --navy 11.1:1 or better and
     --text-warm 7.9:1 or better. */
  --pro-tint-lavender:       #F1EDF9;
  --pro-tint-blue:           #E9F1FA;
  --pro-tint-teal:           #E6F3EF;
  --pro-tint-peach:          #FCEDE1;
}