/* =============================================================================
   CURIOSITY CURRENT — WEB SYSTEM   (cc-web.css)
   -----------------------------------------------------------------------------
   The website layer of the Curiosity Current design system. It adds everything
   the marketing site / portal / data-viz surfaces need that the core brand
   system (cc-theme.css) does not yet define:

     §1  Web surface system        Aegean-tinted dark "frosted glass" tokens
     §2  Categorical palettes      6 topic-families · 5 sectors · 3 resonance
     §3  Per-context theming hooks --cc-family-color, accent slots, etc.
     §4  Chrome-cluster recipe     share · like · favorite-toggle (one set)
     §5  Panel / nav glass recipe  nav · favorites · speaker panels
     §6  Data-viz gradient helpers the ONE sanctioned gradient exception
     §7  Drop-in component reskins keyed to the audit's existing class names
                                   (.pn-* .sb-* .sp-* .fp-* .gc-* .shb-* .lb-*
                                    .ft-* .sf-*) — pure visual override, no JS

   HOW TO USE
   Load AFTER the core system (styles.css already imports it last). The whole
   system is dark by default now — no data-theme attribute needed. Every recipe
   below resolves to CC color — no aytm hues, no decorative gradients. The only
   gradients are §6, and they live exclusively inside data-viz fills.

   DESIGN RULES BAKED IN
   • All dark, in the CC palette. Large text = white; small accents = Aquamarine;
     interactive hover = Coral.
   • Glass is Aegean-tinted, never neutral-gray. Hairlines are Aquamarine at low
     alpha. Focus rings are Aquamarine.
   • The 3 brand colors anchor the categorical ramps (Aquamarine + Coral appear
     verbatim; the rest are hue-rotated at matched chroma/lightness so they read
     as one family on dark glass).
   ========================================================================== */

:root {
  /* ===========================================================================
     §1 — WEB SURFACE SYSTEM  (Aegean-tinted dark frosted glass)
     A coherent ladder of translucent Aegean darks. Replaces the old grab-bag of
     rgba(18,18,20,.88) / rgba(14,16,22,.92) / rgba(37,37,45,1) glass values.
     ========================================================================= */
  --cc-web-bg:            #0C1623;   /* page canvas — deepest Aegean-black      */
  --cc-web-bg-2:          #0F1B2B;   /* raised section ground                   */

  /* Glass fills — Aegean hue (215°), increasing opacity for closer surfaces */
  --cc-glass-chrome:      rgba(20, 34, 52, 0.55);   /* chrome cluster (lightest) */
  --cc-glass-nav:         rgba(16, 27, 43, 0.86);   /* floating nav pill         */
  --cc-glass-panel:       rgba(14, 24, 38, 0.90);   /* slideover panels          */
  --cc-glass-tooltip:     rgba(11, 19, 31, 0.94);   /* tooltips / popovers        */
  --cc-glass-toast:       rgba(13, 22, 35, 0.94);   /* confirmation toasts        */

  --cc-blur-sm:           blur(10px);   /* @kind other */
  --cc-blur-md:           blur(14px);   /* @kind other */
  --cc-blur-lg:           blur(18px);   /* @kind other */

  /* Hairlines & rings — Aquamarine at low alpha is the brand's edge light */
  --cc-glass-border:      rgba(91, 191, 192, 0.16);  /* default hairline         */
  --cc-glass-border-soft: rgba(255, 255, 255, 0.08); /* neutral hairline         */
  --cc-glass-border-hi:   rgba(91, 191, 192, 0.32);  /* hover / active edge       */
  --cc-focus-ring:        0 0 0 2px rgba(91, 191, 192, 0.55);  /* Aquamarine ring */

  /* Glass shadows */
  --cc-glass-shadow:      0 8px 32px rgba(4, 10, 18, 0.55), 0 2px 8px rgba(4, 10, 18, 0.40);
  --cc-glass-shadow-sm:   0 4px 16px rgba(4, 10, 18, 0.45);

  /* Web text ramp on dark glass */
  --cc-web-text:          #DCE3EC;   /* body                                    */
  --cc-web-text-strong:   #FFFFFF;   /* headings / strong                       */
  --cc-web-text-muted:    #8A98A8;   /* captions / meta                         */
  --cc-web-text-dim:      #5E6B7A;   /* disabled / faint                        */

  /* ===========================================================================
     §2 — CATEGORICAL PALETTES
     Three independent categorical sets, each a harmonious ramp derived from the
     CC hues (rotated around the wheel at a matched lightness/chroma so they read
     as one family on dark). Brand colors appear verbatim where they fit.
     ========================================================================= */

  /* --- 2a · TOPIC FAMILY palette (6) ----------------------------------------
     Drives Topic-Timeline cells + legend, Topic-detail H1/quotes, Resonance-Map
     topic-tags. SINGLE SOURCE OF TRUTH — keep in sync with any JS/JSON copy
     (audit: Topic-Timeline/index.html FAMILY_COLOR + _topic-timeline.json). */
  --cc-fam-ai:          #9B8CE6;   /* AI & technology            — violet      */
  --cc-fam-researcher:  #5BBFC0;   /* Researcher craft & identity — Aquamarine ★*/
  --cc-fam-business:    #4FA8E0;   /* Insights function & business — azure     */
  --cc-fam-methods:     #F0A35B;   /* Methods, methodology & rigor — amber     */
  --cc-fam-consumer:    #E06FB2;   /* Consumer behavior & culture — berry      */
  --cc-fam-industry:    #FB40A5;   /* Industry, profession & meta — Coral     ★*/

  /* Lightened derivatives (≈ +18% L) — start stop of each cell-fill gradient */
  --cc-fam-ai-lt:         #C3B8F2;
  --cc-fam-researcher-lt: #93D7D8;
  --cc-fam-business-lt:   #8FC9EE;
  --cc-fam-methods-lt:    #F7C79A;
  --cc-fam-consumer-lt:   #ECA3CE;
  --cc-fam-industry-lt:   #FD86C2;

  /* --- 2b · SECTOR palette (5) -----------------------------------------------
     Drives Constellation node rings + legend, speaker-panel sector pill.
     Shares hues with the family ramp for system cohesion. */
  --cc-sector-brand:     #9B8CE6;   /* brand-side                 — violet     */
  --cc-sector-supplier:  #4FA8E0;   /* supplier-side              — azure      */
  --cc-sector-academia:  #5BBFC0;   /* academia                   — Aquamarine */
  --cc-sector-startup:   #F0A35B;   /* wider marketing / startup  — amber      */
  --cc-sector-other:     #8E94A8;   /* other                      — slate      */

  /* --- 2c · RESONANCE scale (3) ----------------------------------------------
     Resonance-Map node rings + edges. An independent 3-color semantic ramp
     (agree / sharpen / tension), tuned to sit beside the brand without clashing.
     Keep in sync with the JS literals (audit: placePartner). */
  --cc-res-agree:        #4FC2A0;   /* agrees / builds on / echoes — fresh green */
  --cc-res-sharpen:      #F0A35B;   /* sharpens                    — amber       */
  --cc-res-tension:      #F0617A;   /* in tension / contradicts    — coral-red   */
  --cc-res-agree-glow:   rgba(79, 194, 160, 0.55);
  --cc-res-sharpen-glow: rgba(240, 163, 91, 0.55);
  --cc-res-tension-glow: rgba(240, 97, 122, 0.55);

  /* ===========================================================================
     §3 — PER-CONTEXT THEMING HOOKS
     The custom-property contracts the site themes per page/guest/issue. Defaults
     given; hosts override inline (e.g. style="--cc-family-color:var(--cc-fam-ai)").
     ========================================================================= */
  --cc-family-color:     var(--cc-aquamarine);  /* speaker panel, topic page    */
  --cc-ft-fill:          var(--cc-aquamarine);  /* favorite star "on" fill       */
  --cc-gc-hover-border:  var(--cc-glass-border-hi);
  --cc-gc-hover-name:    var(--cc-web-text-strong);
  --cc-gc-active-tint:   rgba(91, 191, 192, 0.10);

  /* Accent slots for editorial pages (WHO/WHY/white-papers) — flat, no gradient.
     Per-issue themers set --cc-accent + --cc-accent-2 to brand colors only. */
  --cc-accent:           var(--cc-aquamarine);
  --cc-accent-2:         var(--cc-coral);
  --cc-accent-glow:      rgba(91, 191, 192, 0.28);
  --cc-accent-tint:      rgba(91, 191, 192, 0.06);

  /* ===========================================================================
     §4 + §5 — recipe constants (heights / radii / z-index / motion)
     ========================================================================= */
  --cc-chrome-h:         36px;      /* share / like / favorite-toggle height    */
  --cc-chrome-radius:    10px;      /* shared chrome-cluster radius (0.625rem)   */
  --cc-nav-h:            44px;
  --cc-panel-w:          380px;     /* speaker panel                            */
  --cc-panel-w-left:     360px;     /* favorites panel                          */

  --cc-z-nav:            90;    /* @kind other */
  --cc-z-favorites:      95;    /* @kind other */
  --cc-z-panel:          101;   /* @kind other */
  --cc-z-toast:          110;   /* @kind other */

  --cc-ease-out:         cubic-bezier(.2, .7, .2, 1);     /* @kind other */
  --cc-ease-pop:         cubic-bezier(.34, 1.4, .64, 1);  /* @kind other */
  --cc-dur-fast:         140ms;   /* @kind other */
  --cc-dur-base:         240ms;   /* @kind other */
  --cc-dur-slow:         320ms;   /* @kind other */
}

/* =============================================================================
   §6 — DATA-VIZ GRADIENT HELPERS   (the only sanctioned gradients)
   Functional fills for the Voronoi cells — a diagonal sweep from the lightened
   derivative to the raw family hex. UI never uses these; viz only.
   Usage in SVG: fill="url(#cc-cell-ai)"  (mirror these stops in <defs>), or as
   a CSS background on a sample swatch via the class helpers below.
   ========================================================================== */
.cc-cell-ai        { background: linear-gradient(135deg, var(--cc-fam-ai-lt)        0%, var(--cc-fam-ai)        100%); }
.cc-cell-researcher{ background: linear-gradient(135deg, var(--cc-fam-researcher-lt) 0%, var(--cc-fam-researcher) 100%); }
.cc-cell-business  { background: linear-gradient(135deg, var(--cc-fam-business-lt)  0%, var(--cc-fam-business)  100%); }
.cc-cell-methods   { background: linear-gradient(135deg, var(--cc-fam-methods-lt)   0%, var(--cc-fam-methods)   100%); }
.cc-cell-consumer  { background: linear-gradient(135deg, var(--cc-fam-consumer-lt)  0%, var(--cc-fam-consumer)  100%); }
.cc-cell-industry  { background: linear-gradient(135deg, var(--cc-fam-industry-lt)  0%, var(--cc-fam-industry)  100%); }

/* =============================================================================
   §7 — DROP-IN COMPONENT RESKINS
   Pure visual overrides keyed to the existing markup class names in the audit.
   No structural or behavioral change — drop this file in and the dark frosted
   kit re-tints to Curiosity Current. Font is unified to the system UI face.
   ========================================================================== */

/* ---- 2 · Portal Nav (floating pill) — frosted glass ----------------------- */
.pn-root { z-index: var(--cc-z-nav); }
.pn-row-entries {
  /* Clear, neutral "liquid glass" — low-opacity fill so the backdrop reads
     through; gentle saturate+brightness lifts it without going blue. */
  background: rgba(18, 26, 38, 0.46);
  -webkit-backdrop-filter: blur(20px) saturate(1.15) brightness(1.06);
          backdrop-filter: blur(20px) saturate(1.15) brightness(1.06);
  border-radius: 9999px;
  /* Outer depth + a bright neutral top highlight and soft bottom shade. */
  box-shadow:
    var(--cc-glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(4, 10, 18, 0.28);
  font-family: var(--font-ui);
}
/* Edge light — a crisp near-white specular ring, brightest at the top and
   fading down (Apple-style). Neutral, not tinted, so the glass reads clear. */
.pn-row-entries::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 9999px;
}
.pn-entry { color: rgba(220, 227, 236, 0.62); letter-spacing: .08em; text-transform: uppercase; }
.pn-entry:hover { color: var(--cc-web-text-strong); background: rgba(91, 191, 192, 0.08); }
.pn-entry.pn-active {
  color: var(--cc-web-text-strong);
  background: rgba(91, 191, 192, 0.12);
  box-shadow: inset 0 0 0 1px var(--cc-glass-border-hi);
}
.pn-entry:focus-visible,
.pn-back:focus-visible,
.pn-fav:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }
.pn-page-name { color: var(--cc-web-text-muted); }
/* Favorites star: Aquamarine "has items" (was gold), Coral on hover. */
.pn-fav { color: var(--cc-web-text-muted); }
.pn-fav.has-items { color: var(--cc-aquamarine); }
.pn-fav:hover { color: var(--cc-coral); }
.pn-mob-drawer {
  background: var(--cc-glass-panel);
  -webkit-backdrop-filter: var(--cc-blur-lg); backdrop-filter: var(--cc-blur-lg);
}

/* ---- 3 · Search Box -------------------------------------------------------- */
.sb-field {
  font-family: var(--font-ui);
}
.sb-input {
  background: rgba(11, 19, 31, 0.90);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border-radius: 9999px;
  color: var(--cc-web-text-strong);
}
.sb-input::placeholder { color: rgba(138, 152, 168, 0.65); }
/* Search ring → flat Aquamarine (was the cyan→indigo→violet sweep). */
.sb-field::before { background: var(--cc-glass-border-hi); opacity: .85; }
.sb-root:focus-within .sb-field::before { opacity: 1; }
.sb-root:focus-within .sb-input {
  background: rgba(16, 27, 43, 0.85);
  box-shadow: var(--cc-focus-ring), 0 0 10px rgba(91, 191, 192, 0.35);
}
.sb-clear { background: rgba(255, 255, 255, 0.08); color: var(--cc-web-text-muted); }
.sb-clear:hover { background: rgba(91, 191, 192, 0.22); color: var(--cc-web-text-strong); }

/* ---- 4 · Speaker Panel (right slideover) ---------------------------------- */
.sp-panel {
  width: var(--cc-panel-w); max-width: 90vw;
  padding: 28px 28px 60px;
  background: var(--cc-glass-panel);
  -webkit-backdrop-filter: var(--cc-blur-md); backdrop-filter: var(--cc-blur-md);
  border-left: 4px solid var(--cc-family-color);
  box-shadow: -8px 0 40px rgba(4, 10, 18, 0.55);
  color: var(--cc-web-text);
  font-family: var(--font-sans);
  z-index: var(--cc-z-panel);
}
.sp-close { color: var(--cc-web-text-muted); }
.sp-close:hover { color: var(--cc-coral); }
.sp-sector { border-color: currentColor; color: var(--cc-family-color); }
/* Top-claim — no left rail. A soft family-tinted card with a hanging quote
   glyph; the family color reads through the glyph + tint, not a stripe. */
.sp-claim {
  position: relative;
  border-radius: 12px;
  padding: 22px 20px 18px 22px;
  background: color-mix(in srgb, var(--cc-family-color) 9%, transparent);
  font-style: italic;
  color: var(--cc-web-text-strong);
}
.sp-claim > * { position: relative; }
.sp-axis-dot, .sp-axis-fill { background: var(--cc-family-color); }
.sp-linkedin { color: #5BBFC0; }                 /* keep recognizable, on-brand */
.sp-cta { border: 1px solid var(--cc-family-color); color: var(--cc-family-color); }
.sp-cta:hover { background: color-mix(in srgb, var(--cc-family-color) 18%, transparent); transform: translateY(-1px); }
.sp-cta.disabled { color: var(--cc-web-text-dim); border-color: var(--cc-web-text-dim); }
/* Section labels */
.sp-section-label, .sp-axis-label { color: var(--cc-web-text-muted); }
@media (max-width: 640px) {
  .sp-panel { border-left: none; border-radius: 20px 20px 0 0; }
}

/* ---- 5 · Favorites Panel (left slideover) --------------------------------- */
.fp-panel {
  width: var(--cc-panel-w-left); max-width: 92vw;
  background: var(--cc-glass-panel);
  -webkit-backdrop-filter: var(--cc-blur-lg); backdrop-filter: var(--cc-blur-lg);
  border-right: 1px solid var(--cc-glass-border-soft);
  box-shadow: 6px 0 32px rgba(4, 10, 18, 0.55);
  color: var(--cc-web-text);
  font-family: var(--font-sans);
  z-index: var(--cc-z-favorites);
}
.fp-title { color: var(--cc-web-text-strong); }
.fp-group-label { color: var(--cc-web-text-muted); letter-spacing: .12em; text-transform: uppercase; }
.fp-row:hover { background: rgba(91, 191, 192, 0.06); }
.fp-row-title { color: var(--cc-web-text-strong); }
.fp-row-kind { color: var(--cc-web-text-muted); }
.fp-row-remove { color: var(--cc-web-text-muted); }
.fp-row-remove:hover { color: var(--cc-res-tension); }
.fp-row.is-stale { opacity: .55; }
.fp-row.is-stale .fp-row-kind { color: var(--cc-res-sharpen); }

/* ---- 6 · Guest Card -------------------------------------------------------- */
.gc-card { text-decoration: none; }
.gc-name, .gc-role, .gc-count { text-decoration: none; }
.gc-name { color: var(--cc-web-text-strong); }
.gc-role, .gc-count { color: var(--cc-web-text-muted); }
.gc-avatar { background: rgba(91, 191, 192, 0.06); border: 1px solid var(--cc-glass-border); box-shadow: var(--cc-glass-shadow-sm); }
.gc-clickable:hover .gc-card { background: rgba(91, 191, 192, 0.05); border-color: var(--cc-gc-hover-border); transform: translateY(-1px); }
.gc-clickable:hover .gc-name { color: var(--cc-gc-hover-name); }
.gc-clickable:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }
.gc-card.gc-active { background: var(--cc-gc-active-tint); border-color: var(--cc-glass-border-hi); }

/* ---- 7 · Share Button + Toast --------------------------------------------- */
.shb-btn {
  height: var(--cc-chrome-h);
  background: var(--cc-glass-chrome);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border: 1px solid var(--cc-glass-border);
  border-radius: var(--cc-chrome-radius);
  color: var(--cc-web-text-muted);
  box-shadow: var(--cc-glass-shadow-sm);
  font-family: var(--font-ui);
}
.shb-btn:hover { color: var(--cc-web-text-strong); background: rgba(91, 191, 192, 0.12); border-color: var(--cc-glass-border-hi); }
.shb-btn:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }   /* unified ring */
.shb-toast {
  background: var(--cc-glass-toast);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border-radius: var(--cc-chrome-radius);
  color: var(--cc-web-text);
  z-index: var(--cc-z-toast);
}

/* ---- 8 · Like Button ------------------------------------------------------- */
.lb-button {
  height: var(--cc-chrome-h);
  background: var(--cc-glass-chrome);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border: 1px solid var(--cc-glass-border);
  border-radius: var(--cc-chrome-radius);
  color: var(--cc-web-text-muted);
  box-shadow: var(--cc-glass-shadow-sm);
  font-family: var(--font-ui);
}
.lb-button:hover { background: rgba(91, 191, 192, 0.12); border-color: var(--cc-glass-border-hi); transform: translateY(-1px); }
.lb-button:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }
.lb-icon-hollow { color: rgba(255, 255, 255, 0.40); }
.lb-icon-filled { color: var(--cc-coral); }            /* was #1C9AC4 brand leak  */
.lb-button.lb-liked { background: rgba(251, 64, 165, 0.12); }
.lb-button.lb-liked .lb-count { color: var(--cc-web-text-strong); }

/* ---- 9 · Favorite Toggle --------------------------------------------------- */
.ft-toggle {
  width: var(--cc-chrome-h); height: var(--cc-chrome-h);
  background: var(--cc-glass-chrome);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border: 1px solid var(--cc-glass-border);
  border-radius: var(--cc-chrome-radius);
  box-shadow: var(--cc-glass-shadow-sm);
}
.ft-toggle:hover { transform: translateY(-1px); border-color: var(--cc-glass-border-hi); }
.ft-toggle:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }
.ft-icon-hollow { color: rgba(255, 255, 255, 0.40); }
.ft-icon-filled { color: var(--cc-ft-fill); }          /* Aquamarine default       */
.ft-toggle.ft-on { background: rgba(91, 191, 192, 0.12); }

/* Shared pop keyframe for like + favorite (one motion). */
@keyframes cc-pop { 0% { transform: scale(1); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }
.lb-pop, .ft-pop { animation: cc-pop var(--cc-dur-base) var(--cc-ease-pop); }

/* ---- 10 · Site Footer ------------------------------------------------------ */
.sf-root {
  background: var(--cc-glass-nav);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border-top: 1px solid var(--cc-glass-border-soft);
  box-shadow: 0 -2px 12px rgba(4, 10, 18, 0.30);
  font-family: var(--font-ui);
}
.sf-brand { color: rgba(220, 227, 236, 0.55); letter-spacing: .10em; }
.sf-platforms a { color: rgba(220, 227, 236, 0.45); }
.sf-copyright { color: rgba(220, 227, 236, 0.35); }
.sf-root a:hover { color: var(--cc-coral); }
.sf-root a { text-decoration: none; }
.sf-root a:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }

/* =============================================================================
   §8 — EDITORIAL / LANDING PAGE RECIPES
   The WHO / WHY / white-paper / topic-detail surfaces (audit §5), keyed to the
   existing class names. All dark, flat CC color, gradients only in data-viz.
   The hero gradient-bokeh / per-issue plate backdrops collapse to the brand's
   signature treatment: a dark Aegean canvas, optionally the signature photo
   under a left-heavy Aegean wash. Per-issue/per-page themers set --cc-accent
   (+ --cc-accent-2) to a BRAND color (Aquamarine or Coral) — never Tailwind.
   ========================================================================= */

/* ---- Hero (WHO .hero / WHY .entry-section) -------------------------------- */
.hero, .entry-section {
  position: relative;
  background: var(--cc-web-bg);              /* was --grad-bokeh / issue plate */
  color: var(--cc-web-text);
  isolation: isolate;
}
/* Optional signature photo: add .cc-hero-photo and set --cc-hero-img.
   Left-heavy Aegean wash keeps headlines legible (replaces the directional scrim). */
.cc-hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--cc-hero-img, none) center/cover no-repeat;
}
.cc-hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(12,22,38,.88) 0%, rgba(12,22,38,.55) 45%, rgba(12,22,38,.18) 100%);
}
.hero .eyebrow, .entry-section .eyebrow {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cc-aquamarine);
}
/* Hero headline: flat white display. The "accent" word is Aquamarine (flat),
   not a gradient text-fill. */
.hero h1, .entry-title { font-family: var(--cc-font-h1); font-weight: 700; color: var(--cc-web-text-strong); letter-spacing: -0.02em; }
.entry-title__accent, .hero h1 em { color: var(--cc-aquamarine); font-style: normal; }
.hero .lead, .entry-statement { color: rgba(255,255,255,.72); }

/* Primary CTA — solid Coral, flat (replaces the --grad-brand fill). */
.cta-primary {
  background: var(--cc-coral); color: #fff;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 9999px; border: 0; padding: 13px 26px; cursor: pointer;
  box-shadow: 0 8px 28px rgba(251,64,165,.28);
}
.cta-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---- "What you'll find" cards (.what-card) -------------------------------- */
.what-card {
  background: var(--cc-glass-panel);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 12px; padding: 24px;
}
.what-card .what-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(91,191,192,.12); color: var(--cc-aquamarine);
}
.what-card h3 { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--cc-web-text-strong); }
.what-card p { color: var(--cc-web-text-muted); font-size: 13px; line-height: 1.6; }

/* ---- Seven-axes pole pairs (.axis-row) ------------------------------------ */
.axis-row { color: var(--cc-web-text); }
.axis-row .pole { font-size: 13px; font-weight: 600; color: var(--cc-web-text-strong); }
.axis-row .axis-track { background: var(--cc-aquamarine); opacity: .5; }   /* flat, was accent gradient */
.axis-row .axis-vs { color: var(--cc-web-text-muted); }
.axis-row:hover { background: var(--cc-glass-panel); border-color: var(--cc-glass-border); }

/* ---- Cover cards (.cover-card--featured / --archive) ---------------------- */
.cover-card {
  background: var(--cc-glass-panel);
  -webkit-backdrop-filter: var(--cc-blur-lg); backdrop-filter: var(--cc-blur-lg);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 12px;
  box-shadow: var(--cc-glass-shadow), inset 0 1px 0 rgba(255,255,255,.10);
}
.cover-card--featured:hover { transform: translateY(-3px) rotate(0deg); box-shadow: var(--cc-glass-shadow), 0 0 40px var(--cc-accent-glow); }
.cover-card .latest-badge { background: var(--cc-coral); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: 9999px; padding: 5px 12px; }
.cover-card .issue-quarter { color: var(--cc-accent); }

/* ---- Waypoint cards (.waypoint-card) -------------------------------------- */
.waypoint-card {
  background: var(--cc-glass-panel);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 12px; padding: 24px;
}
.waypoint-card .surface-id { font-family: var(--font-ui); font-weight: 700; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--cc-web-text-muted); }
.waypoint-card .wp-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--cc-accent-tint); color: var(--cc-accent); }
.waypoint-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--cc-web-text-strong); }
.waypoint-card .wp-status { font-size: 11px; color: var(--cc-web-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.waypoint-card .wp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-accent); }
.derived-question-example { font-family: var(--font-display); font-style: italic; color: var(--cc-web-text); }

/* ---- Subscribe panel + form (.subscribe-panel) ---------------------------- */
.subscribe-panel {
  background: var(--cc-glass-panel);
  -webkit-backdrop-filter: var(--cc-blur-lg); backdrop-filter: var(--cc-blur-lg);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 14px; padding: 44px;
  box-shadow: var(--cc-glass-shadow), 0 0 60px var(--cc-accent-glow);
}
.subscribe-panel .topline { width: 48px; height: 3px; background: var(--cc-coral); border-radius: 2px; }
.subscribe-panel input {
  height: 44px; background: rgba(255,255,255,.05);
  border: 1px solid var(--cc-glass-border-soft); border-radius: 8px;
  color: var(--cc-web-text-strong); padding: 0 14px; font-family: var(--font-sans);
}
.subscribe-panel input::placeholder { color: var(--cc-web-text-muted); }
.subscribe-panel input:focus { outline: none; border-color: var(--cc-aquamarine); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.subscribe-panel button[type="submit"] {
  height: 44px; background: var(--cc-coral); color: #fff; border: 0;
  border-radius: 9999px; font-family: var(--font-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 0 22px;
}
.subscribe-panel button[type="submit"]:hover { filter: brightness(1.06); }
.subscribe-panel.is-success button[type="submit"] { background: var(--cc-res-agree); }  /* flat green, was a gradient */

/* ---- White-paper: cover, TOC, glass sections, body, citations ------------- */
.cc-wp-cover__glass {
  background: rgba(14, 24, 38, 0.80);
  -webkit-backdrop-filter: var(--cc-blur-lg); backdrop-filter: var(--cc-blur-lg);
  border: 1px solid var(--cc-glass-border);   /* flat Aquamarine hairline, was magenta border-image */
}
.cc-wp-cover__title { font-family: var(--font-display); font-weight: 700; color: var(--cc-web-text-strong); }
.cc-wp-cover__thesis { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--cc-web-text); }

.toc-link {
  background: var(--cc-glass-chrome);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 14px; color: var(--cc-web-text-muted);
  font-family: var(--font-ui);
}
.toc-link.is-active, .toc-link:hover { color: var(--cc-accent); background: var(--cc-accent-tint); border-color: var(--cc-glass-border-hi); }

.glass-card {
  background: var(--cc-glass-panel);
  -webkit-backdrop-filter: var(--cc-blur-md); backdrop-filter: var(--cc-blur-md);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 12px; padding: 40px 44px;
}
.glass-card.glass-card--dim { background: var(--cc-glass-tooltip); }
.section-num { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-accent); }
.glass-card h2 { font-family: var(--font-display); font-weight: 500; color: var(--cc-web-text-strong); }
.body-text { color: var(--cc-web-text); font-size: 16px; line-height: 1.75; }
.tl-num { color: var(--cc-accent); }
sup.cite a { color: var(--cc-accent); font-size: .72em; }
.lexicon-card .term { color: var(--cc-accent); font-weight: 600; }
.lexicon-card .coinage { font-style: italic; color: var(--cc-web-text-muted); }

/* Verdict chips — reuse the resonance ramp (held/partial/not-evidenced). */
.scorecard-chip {
  font-family: var(--font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 9999px; padding: 4px 11px;
}
.scorecard-chip--held         { background: rgba(79,194,160,.16);  color: var(--cc-res-agree); }
.scorecard-chip--partial      { background: rgba(240,163,91,.16);  color: var(--cc-res-sharpen); }
.scorecard-chip--not-evidenced{ background: rgba(240,97,122,.16);  color: var(--cc-res-tension); }

/* References + contributor triggers */
.ref-row { color: var(--cc-web-text-muted); font-size: 14px; }
.ref-row .ref-num { color: var(--cc-accent); }
.ref-row:target { border-left: 2px solid var(--cc-accent); padding-left: 12px; }
.ref-name-trigger { background: none; border: 0; color: var(--cc-web-text); border-bottom: 1px solid var(--cc-accent); cursor: pointer; font: inherit; }
.ref-name-trigger:hover { color: var(--cc-accent); }

/* ---- Topic detail: family-themed hero + quote bento ----------------------- */
.topic-header { color: var(--cc-web-text); }
/* Family band replaces the old 4px left rail with a flat top accent on the page,
   themed via --cc-family-color (set per topic). */
.topic-name {
  font-family: var(--cc-font-h1); font-weight: 700; color: var(--cc-family-color);
  letter-spacing: -0.02em;
}
.topic-header .breadcrumb { color: var(--cc-family-color); font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: .1em; }
.topic-section-title { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-aquamarine); }
.quote-cell {
  border-radius: 16px; padding: 22px;
  background: color-mix(in srgb, var(--cc-family-color) 14%, var(--cc-web-bg-2));
  color: var(--cc-web-text-strong);
}
.quote-cell .quote-body { font-family: var(--font-display); font-style: italic; }
.quote-cell.is-expanded { box-shadow: 0 0 0 2px var(--cc-family-color); }  /* was hardcoded blue */

/* =============================================================================
   §9 — 3D CONSTELLATION  (WHO entry · WebGL star-field · audit §4)
   An interactive field where every guest is a billboarded circular avatar
   floating in 3D, positioned on up to three axes; sector-colored ring is the
   core mark. The system defines: scene atmosphere, node/avatar treatment, the
   3-axis spatial system, the 2D chrome (hover card, legend, reset/dimension
   pills, axis-pole labels), and motion. Sector colors reuse §2b; glass chrome
   reuses §7. The canvas is transparent — the CSS backdrop below shows through.
   ========================================================================= */
:root {
  /* --- Scene atmosphere -----------------------------------------------------
     Page ground is the deep Aegean navy; seven large blurred orbs drawn ONLY
     from brand + family hues (was a rainbow of cyan/purple/pink/blue/emerald/
     orange/indigo) so the field reads on-brand, then a darkening overlay. */
  --cc-scene-bg:        #0A1322;
  --cc-orb-1:           rgba(91, 191, 192, 0.22);   /* Aquamarine */
  --cc-orb-2:           rgba(34, 61, 100, 0.55);    /* Aegean      */
  --cc-orb-3:           rgba(251, 64, 165, 0.14);   /* Coral       */
  --cc-orb-4:           rgba(79, 168, 224, 0.18);   /* azure (business family) */
  --cc-orb-5:           rgba(155, 140, 230, 0.16);  /* violet (AI family)      */
  --cc-orb-6:           rgba(47, 110, 142, 0.30);   /* teal-deep   */
  --cc-orb-7:           rgba(34, 61, 100, 0.45);    /* Aegean      */
  --cc-scene-overlay:   rgba(8, 14, 24, 0.42);      /* darkening veil over orbs */

  /* --- Node (avatar) treatment ---------------------------------------------
     Circular avatar + sector-colored ring is the core mark. Ring color = the
     guest's --cc-sector-* (§2b). These feed makeCircularTexture (drawn on a
     256px canvas) + the DOM fallback. */
  --cc-node-ring-width:   8px;                       /* on the 256px texture    */
  --cc-node-separator:    rgba(10, 19, 34, 0.85);    /* thin gap ring → fill    */
  --cc-node-fill:         #14233A;                   /* matte behind a missing photo */
  --cc-node-fallback:     linear-gradient(135deg, #1B3350 0%, #0E1A2E 100%);  /* @kind color */
  --cc-node-initials:     rgba(220, 227, 236, 0.92); /* initials on fallback    */
  --cc-node-halo:         0 0 0 6px rgba(255,255,255,0.05), 0 0 44px rgba(91,191,192,0.18);

  /* --- Axis system ----------------------------------------------------------
     Three axes through origin. Mapped to brand-harmonious hues (NOT the stock
     red/green/blue): X = Coral, Y = Aquamarine, Z = azure. Negative poles dim. */
  --cc-axis-x:          #FB40A5;   /* Coral      */
  --cc-axis-y:          #5BBFC0;   /* Aquamarine */
  --cc-axis-z:          #4FA8E0;   /* azure      */
  --cc-axis-opacity:    0.45;     /* @kind other */
  --cc-axis-len:        1.65;      /* @kind other */
  --cc-axis-neg-dim:    0.72;      /* @kind other */
  --cc-axis-ref-1d:     rgba(255, 255, 255, 0.28);   /* 1D mode reference line   */
  --cc-axis-origin:     rgba(255, 255, 255, 0.40);   /* origin marker            */
  /* Lightened pole-label tints (sit on the dark chip) */
  --cc-axis-x-lt:       #FD86C2;
  --cc-axis-y-lt:       #93D7D8;
  --cc-axis-z-lt:       #8FC9EE;

  /* --- Motion ---------------------------------------------------------------
     Dimension switch lerps node positions old→new; not the camera. */
  --cc-tween-dur:       800ms;   /* @kind other */
  --cc-tween-ease:      cubic-bezier(.65, 0, .35, 1);  /* @kind other */
}

/* Scene backdrop — drop behind the transparent WebGL canvas. */
.cc-scene-bg {
  position: fixed; inset: 0; z-index: 0;
  background: var(--cc-scene-bg);
  overflow: hidden;
}
.cc-scene-bg::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(38% 40% at 18% 22%, var(--cc-orb-1) 0%, transparent 70%),
    radial-gradient(46% 48% at 78% 18%, var(--cc-orb-2) 0%, transparent 72%),
    radial-gradient(32% 34% at 65% 72%, var(--cc-orb-3) 0%, transparent 70%),
    radial-gradient(40% 42% at 30% 80%, var(--cc-orb-4) 0%, transparent 72%),
    radial-gradient(36% 38% at 88% 60%, var(--cc-orb-5) 0%, transparent 70%),
    radial-gradient(44% 46% at 50% 38%, var(--cc-orb-6) 0%, transparent 74%),
    radial-gradient(50% 52% at 8% 60%, var(--cc-orb-7) 0%, transparent 74%);
  filter: blur(60px);
}
.cc-scene-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Solid-ground band at the very top so the scene's top edge is uniform
     --cc-scene-bg (no orb tint) and matches the host's full-bleed strip above an
     embedded scene — no seam. Mirrors scene-backdrop.css (this is the copy that
     wins in what.html, which links cc-web.css after scene-backdrop.css). */
  background:
    linear-gradient(to bottom, var(--cc-scene-bg) 0, var(--cc-scene-bg) 8px, transparent 120px),
    var(--cc-scene-overlay);
}

/* Subtle space atmosphere — a two-layer CSS starfield that slowly pans for
   parallax + twinkles, plus a gentle "breathing" drift on the nebula orbs.
   Drop <div class="cc-starfield"></div> inside .cc-scene-bg (above the orbs,
   below the overlay is fine too). All motion is gated on prefers-reduced-motion
   so print / reduced-motion shows a calm static field. */
.cc-starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cc-starfield::before,
.cc-starfield::after {
  content: ""; position: absolute; inset: -20%;
}
/* near layer — brighter, larger, faster; mixed sizes + brand-tinted stars */
.cc-starfield::before {
  background-image:
    radial-gradient(2.4px 2.4px at 40px 60px,   rgba(255,255,255,.95), transparent),
    radial-gradient(1.3px 1.3px at 160px 120px,  rgba(147,215,216,.9),  transparent),
    radial-gradient(2px 2px at 300px 40px,       rgba(255,255,255,.9),  transparent),
    radial-gradient(1.2px 1.2px at 220px 240px,  rgba(253,134,194,.7),  transparent),
    radial-gradient(2.6px 2.6px at 90px 300px,   rgba(143,201,238,.85), transparent),
    radial-gradient(1.1px 1.1px at 360px 200px,  rgba(255,255,255,.7),  transparent),
    radial-gradient(1.7px 1.7px at 130px 360px,  rgba(195,184,242,.7),  transparent),
    radial-gradient(1.4px 1.4px at 270px 320px,  rgba(255,255,255,.8),  transparent);
  background-size: 400px 400px;
}
/* far layer — dimmer, denser, slower (parallax depth); subtle tints */
.cc-starfield::after {
  background-image:
    radial-gradient(1.4px 1.4px at 30px 50px,   rgba(255,255,255,.6),  transparent),
    radial-gradient(1px 1px at 120px 160px,     rgba(147,215,216,.5),  transparent),
    radial-gradient(1.6px 1.6px at 200px 90px,  rgba(180,220,230,.55), transparent),
    radial-gradient(1px 1px at 250px 220px,     rgba(195,184,242,.45), transparent),
    radial-gradient(1.3px 1.3px at 70px 210px,  rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 160px 30px,      rgba(253,134,194,.4),  transparent);
  background-size: 280px 280px;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-scene-bg::before { animation: cc-orb-breathe 42s ease-in-out infinite alternate; }
  .cc-starfield::before { animation: cc-star-pan-a 150s linear infinite, cc-twinkle-a 7s ease-in-out infinite; }
  .cc-starfield::after  { animation: cc-star-pan-b 240s linear infinite, cc-twinkle-b 9s ease-in-out infinite; }
}
@keyframes cc-orb-breathe {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
/* pan distances are exact multiples of each layer's tile so the loop is seamless */
@keyframes cc-star-pan-a { to { background-position: 400px -400px; } }
@keyframes cc-star-pan-b { to { background-position: -280px 280px; } }
@keyframes cc-twinkle-a { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes cc-twinkle-b { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }

/* Node DOM fallback (when a sprite texture / photo is missing). Ring color is
   set inline per guest: style="--cc-node-ring: var(--cc-sector-academia)". */
.cc-node {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--cc-node-fallback);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  color: var(--cc-node-initials);
  box-shadow:
    0 0 0 2px var(--cc-node-separator),
    0 0 0 4px var(--cc-node-ring, var(--cc-sector-other)),
    var(--cc-node-halo);
}
.cc-node:hover { transform: scale(1.05); }

/* Axis pole label — projected DOM chip (uppercase, dark glass). Tint per axis
   with the -lt vars; the negative pole dims to --cc-axis-neg-dim. */
.cc-axis-label {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(10, 17, 28, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px; padding: 6px 16px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(4, 10, 18, 0.55);
  text-shadow: 0 1px 6px rgba(4, 10, 18, 0.8);
}
.cc-axis-label.is-neg { opacity: var(--cc-axis-neg-dim); }
.cc-axis-label--x { color: var(--cc-axis-x-lt); border-color: rgba(251, 64, 165, 0.35); }
.cc-axis-label--y { color: var(--cc-axis-y-lt); border-color: rgba(91, 191, 192, 0.35); }
.cc-axis-label--z { color: var(--cc-axis-z-lt); border-color: rgba(79, 168, 224, 0.35); }

/* X/Y/Z dimension badges (mode switch) */
.cc-dim-badge {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-glass-chrome); color: var(--cc-web-text-muted);
  border: 1px solid var(--cc-glass-border-soft);
}
.cc-dim-badge--x.is-on { color: var(--cc-axis-x); border-color: var(--cc-axis-x); }
.cc-dim-badge--y.is-on { color: var(--cc-axis-y); border-color: var(--cc-axis-y); }
.cc-dim-badge--z.is-on { color: var(--cc-axis-z); border-color: var(--cc-axis-z); }

/* Hover card — fixed DOM, dark glass; name + role. */
.hover-card, .cc-hover-card {
  background: var(--cc-glass-tooltip);
  -webkit-backdrop-filter: var(--cc-blur-md); backdrop-filter: var(--cc-blur-md);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: var(--cc-glass-shadow);
}
.hover-card .name, .cc-hover-card .name { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--cc-web-text-strong); }
.hover-card .role, .cc-hover-card .role { font-size: 11px; color: var(--cc-web-text-muted); margin-top: 2px; }

/* Legend — sector swatches; reset / dimension pills. */
.cc-legend {
  background: var(--cc-glass-nav);
  -webkit-backdrop-filter: var(--cc-blur-md); backdrop-filter: var(--cc-blur-md);
  border: 1px solid var(--cc-glass-border-soft);
  border-radius: 14px; padding: 14px 16px;
}
.cc-legend__row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--cc-web-text); }
.cc-legend__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.cc-reset-pill {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; color: var(--cc-web-text-muted);
  background: var(--cc-glass-chrome);
  -webkit-backdrop-filter: var(--cc-blur-sm); backdrop-filter: var(--cc-blur-sm);
  border: 1px solid var(--cc-glass-border-soft); border-radius: 9999px;
  padding: 8px 16px; cursor: pointer;
}
.cc-reset-pill:hover { color: var(--cc-web-text-strong); border-color: var(--cc-glass-border-hi); }

/* Honor reduced motion across the kit. */
@media (prefers-reduced-motion: reduce) {
  .lb-pop, .ft-pop { animation: none; }
}