/* CognioNews — "Institutional Density" sub-brand extension of GL-003.
   Iris-authored 2026-06-07. Phase One staging.
   Source of truth: 2026-06-07-iris-cognionews-institutional-density-GL003-extension.md
   Surface scope: cognionews.com web/editorial ONLY. Inherits GL-003 umbrella
   spacing, voice, imagery; overrides neutrals, accent split, typography, radius. */

:root {
  /* ── 1. Canvas / ink / line (sanctioned cool-gray deviation) ── */
  --cn-canvas:        #FAFAFA;
  --cn-surface:       #FFFFFF;
  --cn-surface-hover: #FDFDFD;  /* card hover wash — Iris Addendum 2026-06-07 */
  --cn-ink:           #111827;
  --cn-ink-muted:     #6B7280;
  --cn-line:          #E5E7EB;

  /* ── 2. Accent split: bronze (severity) + teal (identity/interactive) ── */
  --cn-bronze:        #B45309;  /* CMR scores, concealment alerts, critical omissions, severity rules ONLY */
  --cn-bronze-fill:   rgba(180, 83, 9, 0.08); /* radar polygon fill */
  --cn-teal:          #03828E;  /* nav, links, wordmark — retained from GL-003 §2b */
  --cn-teal-soft:     rgba(3, 130, 142, 0.4); /* link underline / focus ring */

  /* ── 3a. Goethean lens hues — canonical (§2c). BORDERS / POINTS / STROKES ONLY ── */
  --cn-lens-indigenous:     #d96464;
  --cn-lens-historical:     #d9bb64;
  --cn-lens-crosscultural:  #9ed964;
  --cn-lens-artistic:       #64d9bb;
  --cn-lens-scientific:     #64d9d9;
  --cn-lens-future:         #64bbd9;
  --cn-lens-marginalised:   #9e64d9;
  --cn-lens-trickster:      #d964bb;

  /* ── 3b. Lens text-safe variants — use when lens name renders AS TEXT on paper ── */
  --cn-lens-indigenous-text:    #A33232;
  --cn-lens-historical-text:    #7A5E12;
  --cn-lens-crosscultural-text: #4E6B1F;
  --cn-lens-artistic-text:      #2C7A63;
  --cn-lens-scientific-text:    #1E7A7A;
  --cn-lens-future-text:        #256C8A;
  --cn-lens-marginalised-text:  #6A3FA0;
  --cn-lens-trickster-text:     #A23583;

  /* ── 4. Typography ── */
  --cn-font-serif: "Merriweather", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cn-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cn-text-display: clamp(1.6rem, 3.5vw, 2.3rem); /* reduced from clamp(2.2rem,5vw,3.4rem) per Kenny 2026-06-07 */
  --cn-text-h1:      2rem;
  --cn-text-h2:      1.4rem;
  --cn-text-h3:      1.15rem;
  --cn-text-body:    1.05rem;
  --cn-text-small:   0.92rem;
  --cn-text-cmr:     1.6rem;   /* JetBrains Mono 500, bronze, tabular-nums */
  --cn-text-signal:  0.95rem;  /* JetBrains Mono 400 */
  --cn-text-meta:    0.8rem;   /* JetBrains Mono 400, uppercase, 0.08em */
  --cn-text-label:   0.78rem;  /* JetBrains Mono 500, uppercase, 0.1em */

  /* ── 5. Spacing (inherited verbatim from GL-003 §4, 8px base) ── */
  --space-xs:   0.5rem;   /*  8px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   2.5rem;   /* 40px */
  --space-xl:   4rem;     /* 64px */
  --space-2xl:  6rem;     /* 96px */

  /* ── 6. Radius (near-square sub-brand override) ── */
  --cn-radius-none: 0;
  --cn-radius:      2px;
  --cn-radius-pill: 9999px; /* portfolio-shared status/provenance chips only */
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cn-canvas);
  color: var(--cn-ink);
  font-family: var(--cn-font-serif);
  font-size: var(--cn-text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cn-teal); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--cn-teal-soft); }

h1, h2, h3 { font-family: var(--cn-font-serif); font-weight: 700; color: var(--cn-ink); }

img { max-width: 100%; display: block; }

button {
  font-family: var(--cn-font-mono);
  cursor: pointer;
  border-radius: var(--cn-radius);
}

/* Mono registers (Iris §4c — labels, figures, metadata strips, never running text) */
.cn-meta {
  font-family: var(--cn-font-mono);
  font-weight: 400;
  font-size: var(--cn-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cn-ink-muted);
}
.cn-label {
  font-family: var(--cn-font-mono);
  font-weight: 500;
  font-size: var(--cn-text-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cn-ink-muted);
}
.cn-cmr {
  font-family: var(--cn-font-mono);
  font-weight: 500;
  font-size: var(--cn-text-cmr);
  color: var(--cn-bronze);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cn-signal {
  font-family: var(--cn-font-mono);
  font-weight: 400;
  font-size: var(--cn-text-signal);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Ticker — thin mono top rule, lens names in text-safe hues
   ============================================================ */
.cn-ticker {
  border-bottom: 1px solid var(--cn-line);
  background: var(--cn-surface);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.35rem 0;
}
.cn-ticker-inner {
  display: inline-block;
  animation: cn-ticker-scroll 60s linear infinite;
  padding-left: 100vw;
}
.cn-ticker:hover .cn-ticker-inner { animation-play-state: paused; }
.cn-ticker-item { margin-right: var(--space-lg); }
@keyframes cn-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-ticker-inner { animation: none; padding-left: 0; }
}

/* ============================================================
   Nav — teal identity register
   ============================================================ */
.cn-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cn-canvas);
  border-bottom: 1px solid var(--cn-line);
}
.cn-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.65rem var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.cn-brand {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cn-teal);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cn-brand:hover { text-decoration: none; }
.cn-brand img { width: 28px; height: 28px; }
.cn-brand .cn-brand-suffix { color: var(--cn-ink-muted); font-weight: 400; }
.cn-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-nav-links a {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cn-teal);
}
.cn-nav-links a.cn-nav-active { border-bottom: 2px solid var(--cn-teal); padding-bottom: 2px; }
.cn-staging-flag {
  font-family: var(--cn-font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cn-bronze);
  border: 1px solid var(--cn-bronze);
  border-radius: var(--cn-radius);
  padding: 0.15rem 0.45rem;
}

/* ============================================================
   Hero — serif statement + mono stat strip
   ============================================================ */
.cn-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--cn-line);
}
.cn-hero p.cn-hero-statement {
  font-size: 1.15rem;
  max-width: 62ch;
  margin: 0 0 var(--space-sm);
}
.cn-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.cn-hero-stats strong {
  font-family: var(--cn-font-mono);
  font-weight: 500;
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Layout
   ============================================================ */
/* Two-column compact front page — INT-15, Iris Addendum 2026-06-07.
   Left partner rail dropped; partners fold into the single right rail.
   Three-column restorable if a sponsor-heavy moment needs it. */
.cn-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-md);
  align-items: start;
}
@media (max-width: 780px) {
  .cn-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Panels (shared sidebar/card chrome) — white on paper, 1px line
   ============================================================ */
.cn-panel {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  margin-bottom: var(--space-sm);
}
.cn-panel-head {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--cn-line);
}
.cn-panel-body { padding: 0.8rem; }
.cn-panel-body p { margin: 0.3rem 0; font-size: var(--cn-text-small); }

/* Partner carousel (ported sidebar-ad pattern) */
.cn-carousel { position: relative; }
.cn-carousel .cn-partner { display: none; }
.cn-carousel .cn-partner.active { display: block; }
.cn-partner img {
  width: 100%;
  border-bottom: 1px solid var(--cn-line);
  border-radius: var(--cn-radius) var(--cn-radius) 0 0;
}
.cn-partner-name { font-family: var(--cn-font-serif); font-weight: 700; color: var(--cn-ink); margin: 0.4rem 0 0.1rem; }
.cn-partner-desc { color: var(--cn-ink-muted); font-size: var(--cn-text-small); margin: 0; }
.cn-partner:hover { text-decoration: none; }
.cn-partner:hover .cn-partner-name { color: var(--cn-teal); }
.cn-carousel-dots {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  padding: 0.5rem 0 0.7rem;
}
.cn-carousel-dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 1px solid var(--cn-ink-muted);
  border-radius: var(--cn-radius-pill);
  background: transparent;
}
.cn-carousel-dots button.active { background: var(--cn-teal); border-color: var(--cn-teal); }

/* ============================================================
   Hero carousel — full-bleed rotating editorial band.
   Reuses initCarousels() (.cn-carousel + .cn-partner.active engine);
   the partner-carousel display:none/block toggle is overridden here to an
   opacity crossfade. One signature motion: the 900ms fade. Full-bleed: body
   has no max-width; the sticky nav (z-50) scrolls over this band.
   ============================================================ */
.cn-hero-carousel {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vw, 460px);
  overflow: hidden;
  background: var(--cn-ink);
}
/* override inherited display:none/block toggle → absolute-stacked opacity fade */
.cn-hero-carousel .cn-partner {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.cn-hero-carousel .cn-partner.active { opacity: 1; }
/* strip the inherited .cn-partner img hairline/radius; bias crop right
   (subject lit on the right ~60%, dark-left zone preserved for the scrim) */
.cn-hero-carousel .cn-hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  border: none;
  border-radius: 0;
}
/* left-weighted scrim — required for text contrast across all 10 images */
.cn-hero-slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: clamp(var(--space-md), 6vw, var(--space-2xl));
  padding-right: var(--space-md);
  background: linear-gradient(
    90deg,
    rgba(17, 24, 39, 0.72) 0%,
    rgba(17, 24, 39, 0) 62%
  );
}
.cn-hero-aphorism {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  color: #F5F2EA;                 /* brand bone, not pure white */
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.18;
  max-width: 16ch;
  text-wrap: balance;
  margin: 0;
  text-shadow: 0 1px 12px rgba(17, 24, 39, 0.45);
}
/* 20 auto-generated dots → thin bronze ticks, pinned bottom-left.
   Kept visible: keyboard nav + the WCAG 2.2.2 pause affordance. */
.cn-hero-carousel .cn-carousel-dots {
  position: absolute;
  left: clamp(var(--space-md), 6vw, var(--space-2xl));
  bottom: var(--space-sm);
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  max-width: 70%;
}
.cn-hero-carousel .cn-carousel-dots button {
  width: 14px;
  height: 3px;
  border: none;
  border-radius: 0;
  background: rgba(245, 242, 234, 0.4);
}
.cn-hero-carousel .cn-carousel-dots button.active {
  background: var(--cn-bronze);
  border: none;
}
.cn-hero-carousel .cn-carousel-dots button:focus-visible {
  outline: 2px solid var(--cn-teal);
  outline-offset: 2px;
}
@media (max-width: 780px) {
  .cn-hero-carousel { height: clamp(220px, 52vw, 320px); }
  .cn-hero-slide-overlay {
    background: linear-gradient(
      90deg,
      rgba(17, 24, 39, 0.78) 0%,
      rgba(17, 24, 39, 0) 78%
    );
  }
  .cn-hero-aphorism { max-width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-hero-carousel .cn-partner { transition: none; }
}

/* ============================================================
   Prime Signal strip — severity register
   ============================================================ */
.cn-signal-strip {
  border: 1px solid var(--cn-line);
  border-top: 2px solid var(--cn-bronze);  /* severity rule (Iris §2) */
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  padding: 0.8rem;
  margin-bottom: var(--space-md);
}
.cn-signal-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.cn-signal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
@media (max-width: 780px) { .cn-signal-cards { grid-template-columns: 1fr; } }
.cn-signal-card {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  padding: 0.6rem;
  display: block;
  color: var(--cn-ink);
}
.cn-signal-card:hover { text-decoration: none; border-color: var(--cn-ink-muted); }
.cn-signal-card .cn-signal-headline {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 0.3rem 0;
}
.cn-signal-card .cn-cmr { font-size: 1rem; }

/* ============================================================
   Search + topic chips
   ============================================================ */
.cn-controls { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.cn-search {
  display: flex;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
}
.cn-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.55rem 0.8rem;
  font-family: var(--cn-font-serif);
  font-size: var(--cn-text-small);
  color: var(--cn-ink);
  outline: none;
}
.cn-search input:focus { box-shadow: none; }
.cn-search:focus-within { border-color: var(--cn-teal); }
.cn-topic-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cn-chip {
  font-family: var(--cn-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  color: var(--cn-ink-muted);
}
.cn-chip:hover { border-color: var(--cn-ink-muted); }
.cn-chip.active {
  border-color: var(--cn-bronze);
  color: var(--cn-bronze);
  font-weight: 500;
}

/* ============================================================
   StoryCard — the dense feed unit
   ============================================================ */
.cn-feed { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--cn-line); }
.cn-story-card {
  display: block;
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-top: none;
  border-radius: var(--cn-radius-none);
  padding: var(--space-sm);
  color: var(--cn-ink);
}
.cn-story-card:hover { text-decoration: none; background: var(--cn-surface-hover); }
.cn-story-card:hover .cn-story-headline { color: var(--cn-teal); }

/* Story imagery — INT-21/22, Iris Addendum 2026-06-07.
   grayscale(1) is MANDATORY on all story imagery on this surface;
   always bordered 1px --cn-line at --cn-radius, never full-bleed.
   PLACEHOLDER source: Lorem Picsum seeded by story slug (staging only —
   swap for real editorial photography, kept grayscale, in production). */
.cn-thumb {
  filter: grayscale(1);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  object-fit: cover;
  flex-shrink: 0;
}
/* "Modern Media Collage" register (proposed INT-31): monochrome by
   construction — its only colour is semantic (lens chips, bronze severity
   sticker), so the photographic grayscale(1) mandate must not strip it. */
.cn-thumb.cn-collage { filter: none; }
.cn-story-row { display: flex; gap: var(--space-sm); }
/* INT-30 (ratified): corpus-rank cue — the one Coverage key on the feed card.
   Bronze here is sanctioned severity register (corpus rank = how exceptional
   the finding is) — Iris Addendum 2. */
.cn-rank-cue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
}
.cn-rank-cue .cn-key-track { flex: 1; max-width: 160px; }
.cn-story-row .cn-thumb { width: 118px; height: 84px; }
.cn-story-row .cn-story-content { flex: 1; min-width: 0; }
@media (max-width: 540px) { .cn-story-row .cn-thumb { width: 84px; height: 84px; } }
.cn-signal-card .cn-thumb { width: 100%; height: 64px; margin-bottom: 0.4rem; }
.cn-top-story { display: flex; gap: 0.6rem; align-items: flex-start; }
.cn-top-story .cn-thumb { width: 52px; height: 52px; }
.cn-top-story .cn-top-story-body { flex: 1; min-width: 0; }
.cn-hero-img {
  filter: grayscale(1);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  margin-bottom: var(--space-md);
}
.cn-story-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.cn-story-meta-left, .cn-story-meta-right { display: flex; gap: 0.7rem; align-items: baseline; }
.cn-story-cmr {
  font-family: var(--cn-font-mono);
  font-weight: 500;
  font-size: var(--cn-text-meta);
  color: var(--cn-bronze);
  font-variant-numeric: tabular-nums;
}
.cn-story-headline {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  margin: 0 0 0.35rem;
}
.cn-story-correction {
  font-style: italic;
  color: var(--cn-ink-muted);
  font-size: var(--cn-text-small);
  line-height: 1.55;
  margin: 0 0 0.55rem;
}
.cn-story-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.cn-tag {
  font-family: var(--cn-font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  color: var(--cn-ink-muted);
}
.cn-tag-dossier { border-color: var(--cn-teal); color: var(--cn-teal); }

/* Concealment chips — severity register, bronze family */
.cn-concealment {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cn-ink-muted);
}
.cn-concealment.high, .cn-concealment.critical { color: var(--cn-bronze); font-weight: 500; }

.cn-feed-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
}
.cn-more-btn {
  font-size: var(--cn-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  color: var(--cn-ink);
  padding: 0.5rem 1.2rem;
}
.cn-more-btn:hover { border-color: var(--cn-teal); color: var(--cn-teal); }

/* Right sidebar: top stories list */
.cn-top-story {
  display: block;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--cn-line);
  color: var(--cn-ink);
}
.cn-top-story:last-child { border-bottom: none; }
.cn-top-story:hover { text-decoration: none; background: var(--cn-surface-hover); }
.cn-top-story .cn-top-story-headline {
  font-family: var(--cn-font-serif);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0.2rem 0 0;
}

/* ============================================================
   Dossier — article header
   ============================================================ */
.cn-dossier {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}
.cn-dossier-meta {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.cn-dossier-meta .cn-meta-sep { color: var(--cn-line); }

/* Compact header row — above-the-fold pass 2026-06-07.
   Thumb left, headline + original + clamped correction right. */
.cn-dossier-header {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}
.cn-dossier-thumb { width: 200px; height: 150px; }
@media (max-width: 640px) { .cn-dossier-thumb { display: none; } }
.cn-dossier-header-text { flex: 1; min-width: 0; }
.cn-dossier h1 {
  font-size: var(--cn-text-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.cn-original-line { font-size: var(--cn-text-small); color: var(--cn-ink-muted); margin: 0 0 0.6rem; }
.cn-original-line a { color: var(--cn-teal); }

/* Structural correction callout — severity register; clamped to keep the
   dashboard + lens grid above the fold (click to expand) */
.cn-correction-callout {
  border-left: 3px solid var(--cn-bronze);
  padding: 0.25rem 0 0.25rem var(--space-sm);
  margin-bottom: 0;
  cursor: pointer;
}
.cn-correction-callout .cn-label { color: var(--cn-bronze); display: block; margin-bottom: 0.25rem; }
.cn-correction-callout p {
  font-style: italic;
  color: var(--cn-ink-muted);
  font-size: var(--cn-text-small);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-correction-callout.open p { -webkit-line-clamp: unset; }

/* ============================================================
   Dossier — dashboard grid (CMR | Power Audit | Radar)
   ============================================================ */
.cn-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  margin-bottom: var(--space-md);
}
/* 4-cell variant (CMR | Coverage | Audit | Radar) — above-the-fold pass */
.cn-dashboard-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .cn-dashboard-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-dashboard-4 .cn-dash-cell:nth-child(2n) { border-right: none; }
  .cn-dashboard-4 .cn-dash-cell:nth-child(-n+2) { border-bottom: 1px solid var(--cn-line); }
}
@media (max-width: 780px) { .cn-dashboard { grid-template-columns: 1fr; } }
.cn-dash-cell { padding: 0.8rem; border-right: 1px solid var(--cn-line); }
.cn-dash-cell:last-child { border-right: none; }
@media (max-width: 780px) {
  .cn-dash-cell, .cn-dashboard-4 .cn-dash-cell { border-right: none; border-bottom: 1px solid var(--cn-line); }
  .cn-dash-cell:last-child { border-bottom: none; }
}

/* Coverage Details — mini visual keys (INT-25, visual pass 2026-06-07).
   At-a-glance corpus stats as micro-charts in the brand chart register:
   bronze = this story's reading, muted ticks = comparators, hairline tracks,
   Goethean canonical hues only as dots/fills (chart register). Baked per
   story; Phase Two runs the same aggregates as a live DB query. */
.cn-key {
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--cn-line);
}
.cn-key:last-child { border-bottom: none; }
.cn-key-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.28rem;
}
.cn-key-label {
  font-family: var(--cn-font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cn-ink-muted);
  white-space: nowrap;
}
.cn-key-val {
  font-family: var(--cn-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cn-key-val .hot { color: var(--cn-bronze); }

/* Bullet track: hairline rail; bronze fill or dot = this story;
   muted tick = comparator (source avg / cluster top) */
.cn-key-track {
  position: relative;
  height: 4px;
  background: var(--cn-line);
  border-radius: var(--cn-radius-none);
}
.cn-key-fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  background: var(--cn-bronze);
}
.cn-key-fill.dim { background: var(--cn-ink-muted); }
.cn-key-tick {
  position: absolute;
  top: -2.5px;
  width: 2px;
  height: 9px;
  background: var(--cn-ink-muted);
  transform: translateX(-50%);
}
.cn-key-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cn-bronze);
  border: 1px solid var(--cn-surface);
}

/* Lens coverage dots — the Goethean wheel as a key (canonical hues,
   point register). Solid = signal ≥ 70%, faded outline = below. */
.cn-lens-dots { display: flex; gap: 4px; align-items: center; }
.cn-lens-dots .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid;       /* border-color set inline: canonical hue */
}
.cn-lens-dots .dot.off { opacity: 0.3; background: transparent !important; }

/* Strongest / weakest micro-bars — fill in the lens's canonical hue,
   short label in its text-safe variant */
.cn-key-bar-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.22rem;
}
.cn-key-bar-row .cn-key-lens {
  font-family: var(--cn-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 5.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-key-bar-row .cn-key-track { flex: 1; }
.cn-key-bar-row .cn-key-pct {
  font-family: var(--cn-font-mono);
  font-size: 0.66rem;
  color: var(--cn-ink-muted);
  font-variant-numeric: tabular-nums;
  width: 2.6em;
  text-align: right;
}
.cn-dash-cell .cn-label { display: block; margin-bottom: 0.7rem; }
.cn-cmr-value { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.5rem; }
.cn-cmr-denom { font-family: var(--cn-font-mono); font-size: 0.85rem; color: var(--cn-ink-muted); }
.cn-cmr-bar {
  width: 100%; height: 3px;
  background: var(--cn-line);
  border-radius: var(--cn-radius-none);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.cn-cmr-bar-fill { height: 100%; background: var(--cn-bronze); }
.cn-cmr-note {
  font-family: var(--cn-font-mono);
  font-size: 0.72rem;
  color: var(--cn-ink-muted);
  line-height: 1.5;
  margin: 0;
}
.cn-audit-prose {
  font-size: var(--cn-text-small);
  line-height: 1.6;
  color: var(--cn-ink);
  margin: 0;
  /* dense cell: clamp long audits, full prose stays in the source story page
     (clamp 7 per Variant B) */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Dossier — 8-lens selector grid + shared reading panel (Iris §3c)
   Dense alternative to the stacked accordion: all 8 lenses visible
   as compact cells, one analysis panel below. ~1/3 of the VH.
   ============================================================ */
.cn-lenses { margin-bottom: var(--space-md); }
.cn-lenses-head {
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}
.cn-lens-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
@media (max-width: 780px) { .cn-lens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-lens-cell {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-left: 3px solid transparent; /* canonical hue set inline per lens */
  border-radius: var(--cn-radius);
  padding: 0.45rem 0.55rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cn-lens-cell:hover { border-color: var(--cn-ink-muted); border-left-color: inherit; }
/* keep the inline density tint on the active cell; mark selection with a ring
   + heavier left rule instead of overriding the wash */
.cn-lens-cell.active { border-color: var(--cn-ink); border-left-width: 5px; box-shadow: inset 0 0 0 1px var(--cn-ink); }
.cn-lens-name {
  font-family: var(--cn-font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  /* color set inline: text-safe lens variant */
}
.cn-lens-signal {
  font-family: var(--cn-font-mono);
  font-size: 0.72rem;
  color: var(--cn-ink-muted);
  font-variant-numeric: tabular-nums;
}
.cn-lens-detail {
  border: 1px solid var(--cn-line);
  border-left: 3px solid transparent; /* set to active lens hue */
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  padding: 0.8rem var(--space-sm);
  position: relative;
  overflow: hidden;
  min-height: 120px;
}
/* Faint radar backdrop — Variant B (INT-27 ratified): the radar lives behind
   the reading panel instead of spending a dashboard cell. */
.cn-lens-radar-backdrop {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  opacity: 0.16;
  pointer-events: none;
}
.cn-lens-detail .cn-lens-detail-head,
.cn-lens-detail p { position: relative; }
.cn-lens-detail .cn-lens-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 0.4rem;
}
.cn-lens-detail p {
  margin: 0;
  color: var(--cn-ink);
  font-size: var(--cn-text-small);
  line-height: 1.65;
}

/* ============================================================
   Gated synthesis — email gate (no shadows; overlay is solid panel)
   ============================================================ */
.cn-synthesis {
  position: relative;
  border: 1px solid var(--cn-line);
  border-top: 2px solid var(--cn-bronze); /* severity rule: the load-bearing finding */
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.cn-synthesis-head {
  display: block;
  color: var(--cn-ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cn-line);
  margin-bottom: var(--space-sm);
}
.cn-synthesis-text { position: relative; }
.cn-synthesis-text p { margin: 0 0 var(--space-sm); }
/* The gate blur is functional state, not decorative chrome (Iris no-blur rule
   governs box chrome; the gate obscures withheld text by design). */
.cn-gate-blurred { filter: blur(6px); user-select: none; pointer-events: none; }
.cn-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 250, 250, 0.82);
}
.cn-gate-card {
  text-align: center;
  max-width: 380px;
  border: 1px solid var(--cn-ink);
  border-radius: var(--cn-radius);
  background: var(--cn-canvas);
  padding: var(--space-md);
}
.cn-gate-card .cn-label { display: block; margin-bottom: 0.7rem; }
.cn-gate-card p { font-size: var(--cn-text-small); margin: 0 0 var(--space-sm); }
.cn-gate-form { display: flex; gap: 0.4rem; }
.cn-gate-form input {
  flex: 1;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  padding: 0.45rem 0.6rem;
  font-family: var(--cn-font-mono);
  font-size: 0.8rem;
  background: var(--cn-surface);
  color: var(--cn-ink);
  outline: none;
}
.cn-gate-form input:focus { border-color: var(--cn-teal); }
.cn-gate-form button {
  background: var(--cn-ink);
  color: var(--cn-canvas);
  border: none;
  font-size: var(--cn-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
}
.cn-gate-form button:hover { background: var(--cn-bronze); }
.cn-gate-status { font-family: var(--cn-font-mono); font-size: 0.72rem; margin-top: 0.5rem; min-height: 1em; }
.cn-gate-status.error { color: var(--cn-bronze); }
.cn-gate-status.success { color: var(--cn-teal); }

/* Solution pathways + source link block */
.cn-dossier-foot {
  border-top: 1px solid var(--cn-line);
  padding-top: var(--space-sm);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ============================================================
   Footer
   ============================================================ */
.cn-footer {
  border-top: 1px solid var(--cn-line);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}
.cn-footer-brand { font-family: var(--cn-font-serif); font-weight: 700; color: var(--cn-teal); margin-bottom: 0.3rem; }
.cn-footer p { font-size: var(--cn-text-small); color: var(--cn-ink-muted); margin: 0.3rem 0; }
.cn-footer-links { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin: var(--space-sm) 0; }
.cn-footer-links a { font-family: var(--cn-font-mono); font-size: var(--cn-text-meta); text-transform: uppercase; letter-spacing: 0.08em; }
.cn-footer-statement {
  max-width: 60ch;
  margin: var(--space-xs) auto var(--space-sm);
  color: var(--cn-ink-muted);
  font-family: var(--cn-font-serif);
  font-size: 1rem;        /* was 0.9rem — bump up */
  line-height: 1.5;
  text-align: center;     /* explicit centering */
}

/* Loading / empty states */
.cn-loading {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cn-ink-muted);
  padding: var(--space-lg);
  text-align: center;
}