/* =====================================================================
   PIPS prototype — visual concepts
   A · Round Table  (default, pips.css as is)
   B · Midnight     dark mode on deep navy; gold only for action and "now"
   C · Civic Navy   warm stone paper, navy structure, condensed headlines
   D · Zinc Light   after Lanserhof: cool zinc, glass, serif intros
   E · Zinc Dark    the same system, dark (data-concept="d" + data-theme="dark")
   The switch sets <html data-concept="b|c">; every rule below is scoped
   to it, so concept A is untouched.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@1,8..60,300;1,8..60,400&display=swap");

/* ---------- Concept switch (prototype review tool) ---------- */
.concept-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 140;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: rgba(12, 18, 30, .86); color: #E8ECF3;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: .75rem; line-height: 1;
}
.concept-switch .cs-label { padding: 0 8px 0 10px; color: #8E9AB0; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .65rem; }
.concept-switch button {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px;
  border: 0; border-radius: 999px; background: transparent; color: #C3CBD8; font: inherit; font-weight: 600; cursor: pointer;
}
.concept-switch button i { width: 18px; height: 18px; border-radius: 50%; flex: none; outline: 1px solid rgba(255,255,255,.25); }
.concept-switch button:hover { color: #fff; background: rgba(255,255,255,.08); }
.concept-switch button[aria-pressed="true"] { background: #F3F5F9; color: #0B1424; }
@media (max-width: 760px) {
  .concept-switch { left: 10px; bottom: 10px; }
  .concept-switch .cs-label, .concept-switch button span { display: none; }
  .concept-switch button { padding: 0 6px; }
}
@media print { .concept-switch { display: none; } }

/* Logo: the ink that suits the ground it sits on.
   Default: dark-letter logo in the header, light-letter logo on dark grounds (footer, mobile menu). */
.logo-on-dark { display: none !important; }
.site-footer .logo-on-light, .mobile-menu .logo-on-light { display: none !important; }
.site-footer .logo-on-dark, .mobile-menu .logo-on-dark { display: block !important; }
:root[data-concept="b"] .site-header .logo-on-light,
:root[data-concept="c"] .site-header .logo-on-light,
:root[data-concept="d"][data-theme="dark"] .site-header .logo-on-light { display: none !important; }
:root[data-concept="b"] .site-header .logo-on-dark,
:root[data-concept="c"] .site-header .logo-on-dark,
:root[data-concept="d"][data-theme="dark"] .site-header .logo-on-dark { display: block !important; }

/* =====================================================================
   B · MIDNIGHT
   ===================================================================== */
:root[data-concept="b"] {
  color-scheme: dark;
  --ink-bg: #070D18;
  --ink: #EEF2F8;            /* headings, strong text, inverted chips */
  --ink-2: #0D1626; --ink-3: #14203A; --ink-line: #1E2B44;
  --white: #0E182B;          /* page + card surface */
  --paper: #111D33;          /* alternate band */
  --paper-2: #18263F;
  --hairline: #22314C; --hairline-strong: #34466A;
  --slate: #94A2BA; --text: #C6CFDD;
  --navy: #A9C1F2; --navy-tint: #16233D;
  --gold-tint: rgba(255, 204, 2, .14); --gold-wash: rgba(255, 204, 2, .07);
  --on-gold: #0B1424;
  --on-ink: #F2F5FA; --on-ink-muted: #A7B3C8; --on-ink-faint: #7F8CA4;
  --green: #6FCF7A; --red: #FF8A80;
  --shadow-card: 0 1px 3px rgba(0,0,0,.4);
  --shadow-hover: 0 10px 28px rgba(0,0,0,.45);
  --shadow-pop: 0 18px 50px rgba(0,0,0,.6);
}
:root[data-concept="b"] body { background: var(--white); }

/* Header */
:root[data-concept="b"] .topbar { background: #050A13; border-bottom: 1px solid #141F33; }
:root[data-concept="b"] .site-header { background: #0B1424; border-bottom-color: #1A2740; }
:root[data-concept="b"] .site-header.is-compact { background: rgba(11, 20, 36, .8); border-bottom-color: rgba(255,255,255,.06); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
:root[data-concept="b"] .nav-link { color: #C9D2E1; }
:root[data-concept="b"] .nav-link:hover,
:root[data-concept="b"] .nav-link[aria-current="page"],
:root[data-concept="b"] .nav > li.is-open > .nav-link { color: #FFFFFF; }
:root[data-concept="b"] .site-header .icon-btn { color: #E6EBF3; }
:root[data-concept="b"] .dropdown { background: #111D33; border-color: #22314C; box-shadow: 0 24px 60px rgba(0,0,0,.55); }

/* Leftover light literals in pips.css / page styles */
:root[data-concept="b"] .input,
:root[data-concept="b"] .select,
:root[data-concept="b"] .textarea { border-color: #2C3D5C; background-color: #0A1322; color: var(--ink); }
:root[data-concept="b"] .input::placeholder,
:root[data-concept="b"] .textarea::placeholder { color: #6F7D96; }
:root[data-concept="b"] .year-rail { background: rgba(14, 24, 43, .92); }
:root[data-concept="b"] .page-header { color: var(--on-ink-muted); }
:root[data-concept="b"] .page-header .lede { color: var(--on-ink-muted); }
:root[data-concept="b"] .cf-card { box-shadow: 0 18px 40px rgba(0,0,0,.35); }
:root[data-concept="b"] .doc-cover { box-shadow: 0 0 0 1px #22314C, 0 8px 18px rgba(0,0,0,.4); }
:root[data-concept="b"] .cover-gen.is-paper { background: #E9EDF4; color: #0B1424; }
:root[data-concept="b"] img:not(.brand-logo):not(.donor-mark) { filter: brightness(.94); }
:root[data-concept="b"] .donor-mark { filter: grayscale(1) invert(1) brightness(1.6); mix-blend-mode: screen; }


/* =====================================================================
   C · CIVIC NAVY
   ===================================================================== */
:root[data-concept="c"] {
  --ink-bg: #1B2A4A;         /* spec Navy carries structure */
  --ink: #14213D;            /* navy-black headings */
  --ink-2: #213357; --ink-3: #2A3D64; --ink-line: #2F4269;
  --white: #FFFDF8;          /* cards, inputs */
  --paper: #ECE6DA; --paper-2: #E3DCCD;
  --hairline: #DCD4C4; --hairline-strong: #C8BEAA;
  --slate: #5D6577; --text: #2B3344;
  --navy: #1F4F91; --navy-tint: #E3E9F3;
  --on-gold: #14213D;
  --on-ink: #F6F2EA; --on-ink-muted: #BAC5D9; --on-ink-faint: #8F9CB6;
  --r-s: 2px; --r-m: 3px; --r-l: 4px;
  --shadow-card: 0 1px 2px rgba(20,33,61,.08);
  --shadow-hover: 0 10px 24px rgba(20,33,61,.12);
  --shadow-pop: 0 18px 50px rgba(20,33,61,.2);
}
:root[data-concept="c"] body { background: #F4F0E7; }

/* Editorial type: condensed Archivo for headlines */
:root[data-concept="c"] :is(h1, h2, .display, .hc-title, .hero-title) { font-stretch: 78% !important; font-weight: 800; letter-spacing: -0.012em !important; }
:root[data-concept="c"] :is(h3, .card-title, .person-name) { font-stretch: 88% !important; letter-spacing: -0.005em !important; }
:root[data-concept="c"] .page-header h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); max-width: 20ch; }

/* Square, printed shapes */
:root[data-concept="c"] .btn { border-radius: 3px; }
:root[data-concept="c"] :is(.input, .select, .textarea) { border-radius: 3px; border-color: #CFC6B4; background-color: #FFFDF8; }
:root[data-concept="c"] :is(.cf-card, .card, .doc-card, .person, .tag, .chip-filter, .year-chip, .search-trigger, .topbar-search) { border-radius: 3px; }
:root[data-concept="c"] .card-media img, :root[data-concept="c"] .card-media { border-radius: 0; }

/* Header: navy bar, cream type */
:root[data-concept="c"] .topbar { background: #14213D; }
:root[data-concept="c"] .site-header { background: #1B2A4A; border-bottom: 3px solid var(--gold); }
:root[data-concept="c"] .site-header.is-compact { background: rgba(27, 42, 74, .9); border-bottom: 3px solid var(--gold); box-shadow: 0 6px 24px rgba(20,33,61,.25); }
:root[data-concept="c"] .nav-link { color: #D9DFEA; }
:root[data-concept="c"] .nav-link:hover,
:root[data-concept="c"] .nav-link[aria-current="page"],
:root[data-concept="c"] .nav > li.is-open > .nav-link { color: #FFFFFF; }
:root[data-concept="c"] .site-header .icon-btn { color: #F6F2EA; }
:root[data-concept="c"] .site-header.is-compact .search-mobile { border-color: rgba(255,255,255,.25); }
:root[data-concept="c"] .site-header.is-compact .search-mobile:hover { background: #F6F2EA; color: #1B2A4A; }
:root[data-concept="c"] .dropdown { background: #FFFDF8; border-color: var(--hairline); }

/* Light literals */
:root[data-concept="c"] .year-rail { background: rgba(244, 240, 231, .94); }
:root[data-concept="c"] .page-header, :root[data-concept="c"] .page-header .lede { color: var(--on-ink-muted); }
:root[data-concept="c"] .section--paper { background: var(--paper); }

/* ---------- Fixes found in review ---------- */
:root[data-concept="b"] .field label, :root[data-concept="b"] .field .label { color: #C6CFDD; }
:root[data-concept="b"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23C6CFDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
:root[data-concept="b"] .band-news { background: #111D33; border-color: #22314C; border-top: 2px solid var(--gold); }
:root[data-concept="b"] .year-chip[aria-current="page"] small { color: #6B5600; }
:root[data-concept="b"] .hero-switch { background: rgba(7, 13, 24, .9); border-color: #22314C; }

:root[data-concept="c"] .field label, :root[data-concept="c"] .field .label { color: #2B3344; }
:root[data-concept="c"] .band-news { background: #F7EDC4; border-color: #E7D58E; }
:root[data-concept="c"] .hero-switch { background: rgba(20, 33, 61, .94); border-color: rgba(255,255,255,.14); }
:root[data-concept="b"] .tag-navy { background: #233A66; color: #E3EBFB; }


/* =====================================================================
   D · ZINC — after the Lanserhof system: one cool zinc ramp mirrored
   into a dark and a light theme (dark is the default), frosted glass
   chrome, quiet uppercase headlines with a light italic serif intro.
   Gold stays PIPS's single accent: actions and the current generation.
   ===================================================================== */
:root[data-concept="d"] {
  --ink-2: #26282B; --ink-3: #3A3D42;
  --gold-tint: rgba(255, 204, 2, .14); --gold-wash: rgba(255, 204, 2, .08);
  --on-gold: #1B1D21;
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
/* Dark (default) */
:root[data-concept="d"][data-theme="dark"] {
  color-scheme: dark;
  --ink-bg: #141518;          /* night: hero, page headers, footer */
  --ink: #FAFAFA;             /* snow: headings, inverted chips */
  --ink-line: #2C2E33;
  --white: #1B1D21;           /* ink: page + cards */
  --paper: #222428; --paper-2: #2C2E33;
  --hairline: #2E3035; --hairline-strong: #3D4148;
  --slate: #9EA3AD; --text: #D4D6DB;
  --navy: #E3E5E8; --navy-tint: #26282B;
  --on-ink: #FAFAFA; --on-ink-muted: #9EA3AD; --on-ink-faint: #6E737D;
  --green: #6FCF7A; --red: #F87171;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-hover: 0 12px 30px rgba(0,0,0,.45);
  --shadow-pop: 0 20px 50px rgba(0,0,0,.6);
}
/* Light: the mirror. Dark grounds turn to sunken zinc, so on-ink tokens flip to ink. */
:root[data-concept="d"][data-theme="light"] {
  --ink-bg: #EEEEEF;          /* sunken */
  --ink: #1B1D21;
  --ink-line: #DCDEE2;
  --white: #FFFFFF;           /* cards */
  --paper: #EEEEEF; --paper-2: #E3E5E8;
  --hairline: #E3E5E8; --hairline-strong: #CDD0D5;
  --slate: #6E737D; --text: #3D4148;
  --navy: #1B1D21; --navy-tint: #EEEEEF;
  --on-ink: #1B1D21; --on-ink-muted: #3D4148; --on-ink-faint: #6E737D;
  --red: #DC2626;
}
:root[data-concept="d"][data-theme="dark"] body { background: #1B1D21; }
:root[data-concept="d"][data-theme="light"] body { background: #F4F4F5; }

/* Type: quiet uppercase headlines, serif intro lines */
:root[data-concept="d"] :is(h1, h2, .display, .hc-title) { font-weight: 500 !important; font-stretch: 100% !important; text-transform: uppercase; letter-spacing: .01em !important; line-height: 1.08 !important; }
:root[data-concept="d"] :is(h3, .card-title, .person-name) { font-weight: 600 !important; font-stretch: 100% !important; letter-spacing: 0 !important; }
:root[data-concept="d"] :is(.lede, .hero-lede, .page-header .lede, .section-head p) { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 1.22em; letter-spacing: 0; }
:root[data-concept="d"] .ledger b { font-weight: 500; font-stretch: 100%; }
:root[data-concept="d"] .btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-weight: 600; }
:root[data-concept="d"] :is(.input, .select, .textarea) { border-radius: 12px; }
:root[data-concept="d"] .tag { border-radius: 999px; }

/* Glass chrome */
:root[data-concept="d"] .topbar { background: var(--ink-bg); border-bottom: 1px solid var(--hairline); }
:root[data-concept="d"] .site-header,
:root[data-concept="d"] .site-header.is-compact {
  background: color-mix(in srgb, var(--white) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-concept="d"] .nav-link { color: var(--text); }
:root[data-concept="d"] .nav-link:hover,
:root[data-concept="d"] .nav-link[aria-current="page"],
:root[data-concept="d"] .nav > li.is-open > .nav-link { color: var(--ink); }
:root[data-concept="d"] .site-header .icon-btn { color: var(--ink); }
:root[data-concept="d"] .site-header.is-compact .search-mobile:hover { background: var(--ink); color: var(--white); }
:root[data-concept="d"] .dropdown { background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: blur(20px); border-color: var(--hairline); }
:root[data-concept="d"] .page-header { color: var(--on-ink-muted); }
:root[data-concept="d"] .year-rail { background: color-mix(in srgb, var(--white) 88%, transparent); }
:root[data-concept="d"] .field label, :root[data-concept="d"] .field .label { color: var(--text); }
:root[data-concept="d"] .band-news { background: var(--paper); border-color: var(--hairline); }
:root[data-concept="d"] .hero-switch { background: color-mix(in srgb, var(--ink-bg) 88%, transparent); border-color: var(--hairline); }

/* Dark-only literals */
:root[data-concept="d"][data-theme="dark"] :is(.input, .select, .textarea) { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); color: var(--ink); }
:root[data-concept="d"][data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23D4D6DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
:root[data-concept="d"][data-theme="dark"] .donor-mark { filter: grayscale(1) invert(1) brightness(1.6); mix-blend-mode: screen; }
:root[data-concept="d"][data-theme="dark"] .year-chip[aria-current="page"] small { color: #6E5A00; }
:root[data-concept="d"][data-theme="dark"] .tag-navy { background: #3A3D42; color: #FAFAFA; }

/* Light-only: dark grounds became light, fix literals that assumed white-on-dark */
:root[data-concept="d"][data-theme="light"] .btn-on-ink { --btn-bd: var(--hairline-strong); }
:root[data-concept="d"][data-theme="light"] .tag-navy { background: #1B1D21; color: #FAFAFA; }
:root[data-concept="d"][data-theme="light"] :is(.section--ink, .page-header, .hero, .band-cta, .site-footer) :is(.gold, em, .accent) { color: #9A7A00; }

/* D review fixes */
:root[data-concept="d"] :is(.hero, .page-header) .lede { color: var(--on-ink-muted); }
:root[data-concept="d"] .hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4rem); }
:root[data-concept="d"][data-theme="light"] .hero h1 em { color: #8F7100; }
:root[data-concept="d"][data-theme="light"] .table-readout .ro-gen { color: #7A6000; }
:root[data-concept="d"][data-theme="light"] .finder-field { background: #FFFFFF; border-color: var(--hairline-strong); }
:root[data-concept="d"][data-theme="light"] .finder-field input::-webkit-search-cancel-button { filter: none; }
:root[data-concept="d"][data-theme="light"] .hero-search { background: #FFFFFF; border-color: var(--hairline-strong); color: var(--slate); }
:root[data-concept="d"][data-theme="light"] .hero-search kbd { background: var(--paper); border-color: var(--hairline); }

/* D · Zinc Light: dark top bar over a white header, dark footer, light page.
   The top bar, footer and mobile menu are a nested dark scope. */
:root[data-concept="d"][data-theme="light"] :is(.topbar, .site-footer, .mobile-menu) {
  color-scheme: dark;
  --ink-bg: #141518; --ink: #FAFAFA; --ink-line: #2C2E33;
  --white: #1B1D21; --paper: #222428; --paper-2: #2C2E33;
  --hairline: #2E3035; --hairline-strong: #3D4148;
  --slate: #9EA3AD; --text: #D4D6DB;
  --navy: #E3E5E8; --navy-tint: #26282B;
  --on-ink: #FAFAFA; --on-ink-muted: #9EA3AD; --on-ink-faint: #6E737D;
}
:root[data-concept="d"][data-theme="light"] .topbar { background: #141518; border-bottom: 0; }
:root[data-concept="d"][data-theme="light"] .site-header,
:root[data-concept="d"][data-theme="light"] .site-header.is-compact { background: rgba(255, 255, 255, .86); border-bottom-color: var(--hairline); }
:root[data-concept="d"][data-theme="light"] .site-footer { background: #141518; color: var(--on-ink-muted); }
:root[data-concept="d"][data-theme="light"] .footer-sub .input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); color: #FAFAFA; }

/* D · Zinc Light: the carousel hero turns light with the page */
:root[data-concept="d"][data-theme="light"] .hc { background: #EEEEEF; color: var(--ink); }
:root[data-concept="d"][data-theme="light"] .hc-text { color: var(--text); }
:root[data-concept="d"][data-theme="light"] .hc-title em { color: #8F7100; }
:root[data-concept="d"][data-theme="light"] .hc .tag-outline { color: var(--ink); border-color: var(--hairline-strong); }
:root[data-concept="d"][data-theme="light"] .hc-frame { background: #E3E5E8; box-shadow: 0 18px 44px rgba(27,29,33,.14); }
:root[data-concept="d"][data-theme="light"] .hc-frame::after { box-shadow: inset 0 0 0 1px rgba(27,29,33,.06); }
:root[data-concept="d"][data-theme="light"] .hc-tab { color: rgba(27,29,33,.55); }
:root[data-concept="d"][data-theme="light"] .hc-tab::before { background: rgba(27,29,33,.16); }
:root[data-concept="d"][data-theme="light"] .hc-tab b { color: rgba(27,29,33,.7); }
:root[data-concept="d"][data-theme="light"] .hc-tab:hover, :root[data-concept="d"][data-theme="light"] .hc-tab[aria-selected="true"] { color: var(--ink); }
:root[data-concept="d"][data-theme="light"] .hc-btn { border-color: rgba(27,29,33,.22); color: var(--ink); }
:root[data-concept="d"][data-theme="light"] .hc-btn:hover { background: #1B1D21; color: #FAFAFA; border-color: #1B1D21; }
:root[data-concept="d"][data-theme="light"] .hc .link-arrow { color: var(--ink); }
:root[data-concept="d"][data-theme="light"] .hc-tab[aria-selected="true"]::before { background: var(--gold); }


/* D · Zinc Light: give each band its own shade so hero and sections separate */
:root[data-concept="d"][data-theme="light"] { --ink-bg: #E1E3E6; --paper: #ECEDEF; --paper-2: #E3E5E8; }
:root[data-concept="d"][data-theme="light"] body { background: #F8F8F9; }
:root[data-concept="d"][data-theme="light"] :is(.hero, .hc, .page-header) { border-bottom: 1px solid #D3D6DA; }
:root[data-concept="d"][data-theme="light"] .hc { background: var(--ink-bg); }


/* =====================================================================
   F · ANTHRACITE — RAL 7016 anthracite carries header, hero and footer;
   grey paper between; Signal Gold stays the action colour.
   ===================================================================== */
:root[data-concept="f"] {
  --on-gold: #23272A;
  --ink-bg: #383E42;
  --ink: #23272A; --ink-2: #2F3438; --ink-3: #454C51; --ink-line: #4A5156;
  --white: #FFFFFF;
  --paper: #E7E8E7; --paper-2: #DDDFDE;
  --hairline: #DADCDC; --hairline-strong: #C3C7C8;
  --slate: #686F74; --text: #394045;
  --navy: #1F6F67; --navy-tint: #E3EFED;
  --on-ink: #F2F3F3; --on-ink-muted: #B9C0C4; --on-ink-faint: #8D959A;
  --r-s: 4px; --r-m: 6px; --r-l: 10px;
}
:root[data-concept="f"] body { background: #F4F4F3; }
:root[data-concept="f"] :is(h1, h2, .display, .hc-title) { font-stretch: 100% !important; font-weight: 700; letter-spacing: -0.02em !important; }
:root[data-concept="f"] .btn { border-radius: 6px; }
:root[data-concept="f"] :is(.input, .select, .textarea) { border-radius: 6px; border-color: #C9CDCF; }
:root[data-concept="f"] .topbar { background: #2B3034; }
:root[data-concept="f"] .site-header { background: #383E42; border-bottom: 1px solid #4A5156; }
:root[data-concept="f"] .site-header.is-compact { background: rgba(56, 62, 66, .9); border-bottom-color: #4A5156; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
:root[data-concept="f"] .nav-link { color: #D5DADD; }
:root[data-concept="f"] .nav-link:hover, :root[data-concept="f"] .nav-link[aria-current="page"], :root[data-concept="f"] .nav > li.is-open > .nav-link { color: #FFFFFF; }
:root[data-concept="f"] .site-header .icon-btn { color: #F2F3F3; }
:root[data-concept="f"] .site-header.is-compact .search-mobile { border-color: rgba(255,255,255,.22); }
:root[data-concept="f"] .site-header.is-compact .search-mobile:hover { background: #F2F3F3; color: #383E42; }
:root[data-concept="f"] .dropdown { background: #FFFFFF; }
:root[data-concept="f"] .site-header .logo-on-light { display: none !important; }
:root[data-concept="f"] .site-header .logo-on-dark { display: block !important; }
:root[data-concept="f"] .page-header, :root[data-concept="f"] .page-header .lede, :root[data-concept="f"] .hero .lede { color: var(--on-ink-muted); }
:root[data-concept="f"] .site-footer { background: #2B3034; }
:root[data-concept="f"] .band-news { background: #E7E8E7; border-color: #D3D6D6; border-top: 3px solid var(--gold); }
:root[data-concept="f"] .year-rail { background: rgba(244, 244, 243, .94); }
:root[data-concept="f"] .field label { color: #394045; }
:root[data-concept="f"] .hero-switch { background: rgba(43, 48, 52, .94); }
:root[data-concept="f"] .hc .tag-outline { border-color: rgba(255,255,255,.3); }


/* =====================================================================
   G · SLATE — cool grey with a blue hint; dark slate top bar and footer
   over a light page, PIPS Navy for actions. Same chrome strategy as D.
   ===================================================================== */
/* Light: the mirror. Dark grounds turn to sunken zinc, so on-ink tokens flip to ink. */
:root[data-concept="g"] {
  --ink-bg: #EEEEEF;          /* sunken */
  --ink: #1B1D21;
  --ink-line: #DCDEE2;
  --white: #FFFFFF;           /* cards */
  --paper: #EEEEEF; --paper-2: #E3E5E8;
  --hairline: #E3E5E8; --hairline-strong: #CDD0D5;
  --slate: #6E737D; --text: #3D4148;
  --navy: #1B1D21; --navy-tint: #EEEEEF;
  --on-ink: #1B1D21; --on-ink-muted: #3D4148; --on-ink-faint: #6E737D;
  --red: #DC2626;
}
:root[data-concept="g"] body { background: #F4F4F5; }
/* Light-only: dark grounds became light, fix literals that assumed white-on-dark */
:root[data-concept="g"] .btn-on-ink { --btn-bd: var(--hairline-strong); }
:root[data-concept="g"] .tag-navy { background: #1B1D21; color: #FAFAFA; }
:root[data-concept="g"] :is(.section--ink, .page-header, .hero, .band-cta, .site-footer) :is(.gold, em, .accent) { color: #9A7A00; }
:root[data-concept="g"] .hero h1 em { color: #8F7100; }
:root[data-concept="g"] .table-readout .ro-gen { color: #7A6000; }
:root[data-concept="g"] .finder-field { background: #FFFFFF; border-color: var(--hairline-strong); }
:root[data-concept="g"] .finder-field input::-webkit-search-cancel-button { filter: none; }
:root[data-concept="g"] .hero-search { background: #FFFFFF; border-color: var(--hairline-strong); color: var(--slate); }
:root[data-concept="g"] .hero-search kbd { background: var(--paper); border-color: var(--hairline); }
/* D · Zinc Light: dark top bar over a white header, dark footer, light page.
   The top bar, footer and mobile menu are a nested dark scope. */
:root[data-concept="g"] :is(.topbar, .site-footer, .mobile-menu) {
  color-scheme: dark;
  --ink-bg: #141518; --ink: #FAFAFA; --ink-line: #2C2E33;
  --white: #1B1D21; --paper: #222428; --paper-2: #2C2E33;
  --hairline: #2E3035; --hairline-strong: #3D4148;
  --slate: #9EA3AD; --text: #D4D6DB;
  --navy: #E3E5E8; --navy-tint: #26282B;
  --on-ink: #FAFAFA; --on-ink-muted: #9EA3AD; --on-ink-faint: #6E737D;
}
:root[data-concept="g"] .topbar { background: #141518; border-bottom: 0; }
:root[data-concept="g"] .site-header,
:root[data-concept="g"] .site-header.is-compact { background: rgba(255, 255, 255, .86); border-bottom-color: var(--hairline); }
:root[data-concept="g"] .site-footer { background: #141518; color: var(--on-ink-muted); }
:root[data-concept="g"] .footer-sub .input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); color: #FAFAFA; }
/* D · Zinc Light: the carousel hero turns light with the page */
:root[data-concept="g"] .hc { background: #EEEEEF; color: var(--ink); }
:root[data-concept="g"] .hc-text { color: var(--text); }
:root[data-concept="g"] .hc-title em { color: #8F7100; }
:root[data-concept="g"] .hc .tag-outline { color: var(--ink); border-color: var(--hairline-strong); }
:root[data-concept="g"] .hc-frame { background: #E3E5E8; box-shadow: 0 18px 44px rgba(27,29,33,.14); }
:root[data-concept="g"] .hc-frame::after { box-shadow: inset 0 0 0 1px rgba(27,29,33,.06); }
:root[data-concept="g"] .hc-tab { color: rgba(27,29,33,.55); }
:root[data-concept="g"] .hc-tab::before { background: rgba(27,29,33,.16); }
:root[data-concept="g"] .hc-tab b { color: rgba(27,29,33,.7); }
:root[data-concept="g"] .hc-tab:hover, :root[data-concept="g"] .hc-tab[aria-selected="true"] { color: var(--ink); }
:root[data-concept="g"] .hc-btn { border-color: rgba(27,29,33,.22); color: var(--ink); }
:root[data-concept="g"] .hc-btn:hover { background: #1B1D21; color: #FAFAFA; border-color: #1B1D21; }
:root[data-concept="g"] .hc .link-arrow { color: var(--ink); }
:root[data-concept="g"] .hc-tab[aria-selected="true"]::before { background: var(--gold); }
:root[data-concept="g"] {
  color-scheme: light;
  --gold: #1B2A4A; --gold-dark: #111C33; --gold-tint: #E3E8F1; --gold-wash: #F0F3F8;
  --on-gold: #FFFFFF;
  --ink-bg: #E2E6ED;
  --ink: #1E2430; --ink-2: #262C38; --ink-3: #3B4252; --ink-line: #CDD3DD;
  --white: #FFFFFF;
  --paper: #EBEEF3; --paper-2: #E1E5EC;
  --hairline: #DCE0E7; --hairline-strong: #C5CBD6;
  --slate: #636B7A; --text: #343B48;
  --navy: #1B2A4A; --navy-tint: #E3E8F1;
  --on-ink: #1E2430; --on-ink-muted: #3E4655; --on-ink-faint: #6A7385;
  --r-s: 4px; --r-m: 8px; --r-l: 12px;
}
:root[data-concept="g"] :is(.topbar, .site-footer, .mobile-menu) {
  --ink-bg: #2E3440; --ink: #F3F5F8; --ink-line: #434C5E;
  --white: #262C38; --paper: #2E3440; --paper-2: #3B4252;
  --hairline: #3B4252; --hairline-strong: #4C566A;
  --slate: #A9B2C3; --text: #D8DEE9;
  --navy: #C9D4F5; --navy-tint: #2E3440;
  --on-ink: #F3F5F8; --on-ink-muted: #B8C0CE; --on-ink-faint: #8C95A6;
  --gold: #FFCC02; --gold-dark: #E6B800; --on-gold: #1B2A4A;
}
:root[data-concept="g"] body { background: #F6F7F9; }
:root[data-concept="g"] .topbar { background: #2E3440; }
:root[data-concept="g"] .site-footer { background: #2E3440; }
:root[data-concept="g"] .site-header, :root[data-concept="g"] .site-header.is-compact { background: rgba(255,255,255,.9); }
:root[data-concept="g"] :is(.hero, .hc, .page-header) { border-bottom: 1px solid #CDD3DD; }
:root[data-concept="g"] :is(.hero h1 em, .hc-title em, .table-readout .ro-gen) { color: var(--gold); }
:root[data-concept="g"] :is(h1, h2, .display, .hc-title) { font-stretch: 104% !important; letter-spacing: -0.025em !important; }
:root[data-concept="g"] .btn { border-radius: 8px; }
:root[data-concept="g"] :is(.input, .select, .textarea) { border-radius: 8px; }
:root[data-concept="g"] .band-news { background: #E3E8F1; border-color: #CDD5E3; }
:root[data-concept="g"] .year-rail { background: rgba(246, 247, 249, .94); }
:root[data-concept="g"] .hero-switch { background: rgba(46, 52, 64, .94); }
:root[data-concept="g"] .nav-link { color: #343B48; }
:root[data-concept="g"] .hero-switch { --on-ink: #F3F5F8; --on-ink-muted: #B8C0CE; --on-ink-faint: #8C95A6; color: #F3F5F8; }
:root[data-concept="g"] :is(.hero, .page-header) .lede { color: var(--on-ink-muted); }