/* ═══════════════════════════════════════════════════════════════
   WHITE GROUND (global override)
   One background for the whole guide. Sections no longer alternate;
   the panels that were built on dark grounds are re-inked for white.
   Remove this block to restore the alternating scheme.
   ═══════════════════════════════════════════════════════════════ */

/* 1 — every section ground is white, every default ink is dark */
.section, .section.dark, .section.darkblue, .section.cream, .section.blue,
.storyhero, .sage, .tagline-page, .footer {
  background: var(--white);
  color: var(--neutral-darkest);
}
.section.dark h2, .section.dark h3, .section.dark h4,
.darkblue h2, .darkblue h3, .storyhero h2, .storyhero h3,
.story-text h2, .footer h2, .footer h3 { color: var(--neutral-darkest); }
.section .chapter-hero h2, .section.dark .chapter-hero h2, .section.darkblue .chapter-hero h2,
.section .chapter-hero .ch-eyebrow, .section.dark .chapter-hero .ch-eyebrow { color: var(--color-neutral-lightest); }
#introduction .chapter-hero h2 { color: var(--ink,var(--color-neutral-darkest)); -webkit-text-fill-color: currentColor; background-image: none; }
.dark .lede, .darkblue .lede, .story-text .lede, .blue .lede { color: var(--neutral-dark); opacity: 1; }
.dark .eyebrow, .darkblue .eyebrow, .blue .eyebrow,
.dark .sh-label, .darkblue .sh-label,
.dark .st-eyebrow, .darkblue .st-eyebrow, .storyhero .st-eyebrow, .sage .st-eyebrow { color: var(--neutral); }
.dark .sub-title h3, .dark .sub-title h4, .darkblue .sub-title h3,
.storyhero .sub-title h3, .sage .sub-title h3 { color: var(--neutral-darkest); }
.dark .section-head .num, .darkblue .section-head .num { color: var(--neutral); }
.dark .mv p, .cream .mv p { color: var(--neutral-darkest); }
.dark .ch-index a, .darkblue .ch-index a { color: var(--neutral-dark); }
.dark .ch-index a:hover, .darkblue .ch-index a:hover { color: var(--blue-dark); }

/* 2 — hairlines and rails that were white become ink at low alpha */
.story-layers, .story-layer, .layer-block, .compass-stack, .compass-row,
.altitude-card, .alt-bottom, .footer-bottom, .archetype-stage .attr,
.layer-block .lb-label .quote, .layer-block .layer-sub { border-color: var(--opacity-neutral-darkest-15); }

/* 3 — the compass / values / storytelling type that was white */
.cx-stmt, .compass-row .cx-stmt, .story-layer h3, .story-layer .num,
.layer-block .lb-label h3, .value-card .vc-name, .alt-bottom .alt-altitude .val,
.altitude-card h3, .archetype-stage .stage-title, .archetype-stage .attr strong,
.layer-sub .who, .slide-cap .who, .n-name, .vk-name,
.layer-block .lb-num { color: var(--neutral-darkest); }
.story-layer .label, .story-layer .body, .value-card .vc-desc,
.archetype-stage .stage-desc, .archetype-stage .attr span,
.layer-block .lb-label .quote, .venn-key p, .layer-sub-note { color: var(--neutral-dark); }

/* 4 — cards that were translucent white-on-dark get a light surface */
.value-card, .altitude-card, .alt-meter, .expression-card.dark, .expression-card.blue,
.app-card.dark, .app-card.gradient, .archetype-stage {
  background: var(--cream);
  border-color: var(--opacity-neutral-darkest-10);
  color: var(--neutral-darkest);
}
.expression-card.dark h4, .expression-card.blue h4, .app-card.dark h4, .app-card.gradient h4 { color: var(--neutral-darkest); }
.expression-card.dark .ex-desc, .expression-card.blue .ex-desc { color: var(--neutral-dark); }
.alt-meter .rule { background: var(--opacity-neutral-darkest-20); }
.altitude-card .alt-glow { display: none; }

/* 5 — motif canvases: inverted so the shapes still read */
.dot-grid .d { background: var(--opacity-neutral-darkest-10); }
.res-bar { background: var(--opacity-neutral-darkest-10); }
.res-bar .stripe { background: var(--opacity-neutral-darkest-20); }
.mark-scale .m { background: var(--neutral-darkest); }

/* 6 — storytelling rings on white */
.n-ring { border-color: var(--opacity-neutral-darkest-20); }
.n-brand { background: color-mix(in oklch,var(--color-blue) 14%,transparent); }
.n-product { background: color-mix(in oklch,var(--color-blue) 20%,transparent); }
.n-content { background: var(--opacity-neutral-darkest-10); border-color: var(--opacity-neutral-darkest-30); }

/* 7 — photography FPO frames and layer labels on white */
.slide-fpo { background: color-mix(in oklch,var(--color-neutral-darkest) 2%,transparent); border-color: color-mix(in oklch,var(--color-neutral-darkest) 24%,transparent); }
.slide-fpo .fpo-mark { color: var(--color-neutral, var(--color-neutral)); }
.slide-fpo .rs-num { color: var(--neutral); }
.slide-cap .role, .layer-sub .role { color: var(--blue-dark); }

/* 8 — footer */
.footer { border-top: 1px solid var(--opacity-neutral-darkest-15); }
.footer a { color: var(--neutral-dark); }
.footer a:hover { color: var(--blue-dark); }

/* WHITE GROUND — pass 2: re-ink the copy that sat on dark grounds.
   Color specimens, photo overlays and gradient legends keep their own
   surfaces on purpose, so they are deliberately not touched here. */
.section.dark.sage, .section.sage { background: var(--white); }
.ch-lead, .cx-note, .df-t, .df-x, .vr-name, .vr-desc,
.tp-eyebrow, .tp-label p, .tp-body p, .ps-label, .ps-item,
.layer-sub-note, .layer-sub .who, .slide-cap .who, .pp-statement,
.stage-eyebrow, .frame-caption, .glyph-line,
.archetype-stage .stage-title, .archetype-stage .stage-desc { color: var(--neutral-darkest); }
.cx-note, .df-x, .vr-desc, .tp-body p, .tp-label p, .layer-sub-note,
.archetype-stage .stage-desc, .pp-statement { color: var(--neutral-dark); }
.dark .st-rule, .darkblue .st-rule, .storyhero .st-rule, .sage .st-rule { color: var(--neutral-dark); }
.tp-eyebrow, .ps-label, .rs-num, .stage-eyebrow, .frame-caption { color: var(--neutral); }
.tp-lead { color: var(--ink,var(--color-neutral-darkest)); }
.ps-item { color: var(--neutral-darkest); border-color: var(--opacity-neutral-darkest-20); }
.cx-label, .vr-num, .vk-when, .ex-tag, .layer-sub .role,
.compass-values .material-symbols-outlined, .vr-head .material-symbols-outlined { color: var(--blue-dark); }
.glyph-line .accent-dot { background: var(--blue-dark); }
.archetype-stage .ghost-mark path { fill: var(--neutral-darkest); }
.archetype-art .frame-caption { color: var(--neutral); }
.pm-pill { color: var(--neutral-darkest); background: var(--opacity-neutral-darkest-5); }
.rc-corner { color: var(--neutral); }

/* WHITE GROUND — pass 3: the archetype page and the last low-contrast inks.
   #archetype carries its own in-document <style>, so these use ID specificity. */
#archetype { background: var(--white); }
#archetype .sage-title, #archetype .sage-block h4, #archetype .sage-quote p { color: var(--neutral-darkest); }
#archetype .sage-eyebrow { color: var(--neutral-dark); }
#archetype .sage-sub { color: var(--blue-darker); }
#archetype .sage-body, #archetype .sage-block p { color: var(--neutral-dark); }
#archetype .sage-quote { background: var(--cream); }
#archetype .sage-tile { background: var(--neutral-lighter); }
#archetype .sage-pill { background: var(--ink,var(--color-neutral-darkest)); color: var(--color-white, #fff); box-shadow: 0 4px 14px var(--opacity-neutral-darkest-20); }

/* small mono labels and accent inks need more weight on white than on dark */
.sh-label, .ct-label, .tp-eyebrow, .ps-label, .eyebrow, .st-eyebrow,
.rs-num, .stage-eyebrow, .frame-caption, .rc-corner,
.dark .sh-label, .darkblue .sh-label, .dark .eyebrow, .darkblue .eyebrow,
.dark .st-eyebrow, .darkblue .st-eyebrow, .storyhero .st-eyebrow, .sage .st-eyebrow { color: var(--neutral-dark); }
.cx-label, .vr-num, .vk-when, .ex-tag, .layer-sub .role, .slide-cap .role,
.tov-card .num, .compass-values .material-symbols-outlined,
.vr-head .material-symbols-outlined { color: var(--blue-darker); }
.tov-card .example .yes, .tov-card .example .icon.yes { color: var(--green-ink, var(--color-green-ink)); }
.tov-card .example .no { color: var(--neutral-dark); }
.tov-card .example .icon.no { color: var(--neutral); }
.n-content { background: var(--opacity-neutral-darkest-5); }
.n-name { color: var(--neutral-darkest); }

/* WHITE GROUND — pass 4: panels that lost their dark ground get dark ink.
   .combo, .lit-frame and .range-hero keep their own dark surfaces, so the
   white captions inside them are left alone. */
.specs, .frame-caption, .rc-corner, .type-pairing .pair-label { color: var(--neutral-dark); }
.color-story .cs-body p, .pp-rules .x, .layer-sub-note,
.rc-meta .d, .range-card p, .layer-block .lb-label .quote { color: var(--neutral-dark); }
.pp-rules .x b, .pp-statement, .rc-meta .s, .layer-block .layer-sub .sub-title h4,
.glyph-line, .layer-block .lb-label h3 { color: var(--neutral-darkest); }
.color-story .cs-body em.accent, .pp-statement em, .layer-block .lb-label .quote em,
.layer-block .lb-label .num span, .rc-meta .a, .slide-cap .role,
.type-pairing .pair-use, .co-kicker, .archetype-stage .stage-eyebrow,
.archetype-stage .stage-title em { color: var(--blue-darker); }
.slide-cap .who { color: var(--neutral-darkest); }
.color .wrap > p.lede, .photography .wrap p, .layer-block p { color: var(--neutral-dark); }

/* WHITE GROUND — pass 5: ID-scoped, so these outrank the chapter stylesheets. */
#type .type-scale .type-row .specs { color: var(--neutral-dark); }
#type .callout .co-kicker, #type .type-pairing div { color: var(--blue-darker); }
#color .color-story .cs-body p, #color .wrap p.lede, #color .wrap div p.lede,
#color .wrap > div > div { color: var(--neutral-dark); }
#color .color-story .cs-body em.accent { color: var(--blue-darker); }
#photography .photo-principle .pp-statement { color: var(--neutral-darkest); }
#photography .photo-principle .pp-statement em { color: var(--blue-darker); }
#photography .pp-rules .r .x { color: var(--neutral-dark); }
#photography .pp-rules .r .x b { color: var(--neutral-darkest); }
#photography .slide-item .slide-fpo .rs-num { color: var(--neutral-dark); }
#photography .range-card .rc-meta .s { color: var(--neutral-darkest); }
#photography .range-card .rc-meta .a { color: var(--blue-darker); }
#photography .wrap p, #photography .wrap div p { color: var(--neutral-dark); }
#photography .wrap .sub-title h3, #photography .wrap .sub-title h4 { color: var(--neutral-darkest); }

/* last four: magenta accent, the motif panel ground, and the motif tags */
#color .cs-body em.accent, .accent.magenta { color: var(--magenta, var(--color-magenta)); }

/* footer keeps its own ground: darkest blue */
.footer { background: var(--blue-darkest); color: var(--white); border-top: none; }
.footer h2, .footer h3, .footer strong { color: var(--white); }
.footer a { color: var(--color-neutral-lighter, var(--color-neutral-lighter)); }
.footer a:hover { color: var(--white); }
.footer-bottom { border-color: var(--opacity-white-10); }

/* 8 — overlay labels sit on dark photo art or dark slots: keep light ink */
.role-slot .rs-num,.role-slot.has-photo .rs-num,.slide-item .slide-fpo.has-photo .rs-num,#photography .role-slot .rs-num,#photography .slide-item .slide-fpo.has-photo .rs-num{color:var(--white);text-shadow:0 1px 3px color-mix(in oklch,var(--color-neutral-darkest) 55%,transparent)}
.role-slot .rs-bottom .role,.slide-fpo.has-photo .rs-bottom .role{color:var(--blue-light)}
.role-slot .rs-bottom .who,.slide-fpo.has-photo .rs-bottom .who{color:var(--white)}

/* Storytelling rings: each ring carries its layer hue and a dot that matches
   the key marker, so ring and label read as one pair. */
.n-ring{--lc:var(--neutral-dark)}
.n-brand{--lc:var(--color-blue);background:color-mix(in oklch,var(--color-blue) 10%,transparent);border-color:color-mix(in oklch,var(--color-blue) 55%,transparent)}
.n-product{--lc:var(--color-magenta);background:color-mix(in oklch,var(--color-magenta) 9%,transparent);border-color:color-mix(in oklch,var(--color-magenta) 50%,transparent)}
.n-content{--lc:var(--amber);background:color-mix(in oklch,var(--amber) 16%,transparent);border-color:color-mix(in oklch,var(--amber) 70%,transparent)}
.n-name{display:flex;align-items:center;gap:7px;color:var(--neutral-darkest)}
.n-name::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lc);flex:none}
.vk-dot{border-color:color-mix(in oklch,var(--color-neutral-darkest) 25%,transparent)}
.d-brand{background:var(--color-blue)}.d-product{background:var(--color-magenta)}.d-content{background:var(--amber)}
.vk-item{padding-left:16px;border-left:2px solid var(--lc,var(--opacity-neutral-darkest-10))}
.vk-item.l-brand{--lc:var(--color-blue)}.vk-item.l-product{--lc:var(--color-magenta)}.vk-item.l-content{--lc:var(--amber)}
.vk-when{color:var(--neutral-dark)}

/* ═══ GALLERY GREY GROUND (Scheme 5) ═══
   The whole guide sits on Gallery Grey; cards, stages and frames are the white foreground. */
html, body, .section, .section.dark, .section.darkblue, .section.cream, .section.blue, .section.sage, .section.dark.sage,
.storyhero, .sage, .tagline-page, #archetype { background: var(--scheme5-bg, var(--color-neutral-lightest)); }
.logo-stage, .logo-stage.cream, #color .wm-grid .logo-stage.cream { background: var(--white); box-shadow: inset 0 0 0 1px var(--scheme5-border, var(--opacity-neutral-darkest-15)); }
.value-card, .altitude-card, .alt-meter, .expression-card.dark, .expression-card.blue,
.app-card.dark, .app-card.gradient, .archetype-stage, #archetype .sage-quote { background: var(--white); border-color: var(--scheme5-border, var(--opacity-neutral-darkest-15)); }
.st-media, .sc-cell, .am-tile, .gv-card { background: var(--white); }
/* Gallery Grey specimens keep an outline so they read on the Gallery Grey ground */
[data-hex="var(--color-neutral-lightest)"], [style*="background:var(--cream)"], [style*="background:var(--color-neutral-lightest)"], [style*="background: var(--cream)"] { box-shadow: inset 0 0 0 1px var(--scheme5-border, var(--opacity-neutral-darkest-15)); }
/* every surface that used Gallery Grey as a panel becomes the white foreground */
#color .usage-media, .pr-img, .anatomy-panel, .minsize .cell, .type-specimen, .weight, .icon-cell, .expression-card,
.product-mock, .app-card.cream, .cn-empty, .ts-context, .copy-hex:hover, .copy-hex.is-copied { background: var(--white); }
.cn-cell:hover { background: var(--white); }
.ts-context[style*="background:var(--cream)"] { background: var(--white) !important; box-shadow: none; }
.product-mock .pm-bars .bar, .product-mock .pm-pill, .wr-mini { background: var(--scheme5-bg, var(--color-neutral-lightest)); }