@import url("/static/tokens.css");

/* ─── reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-950);
  background: var(--paper);
  font-feature-settings: "cv11", "ss01", "kern";
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
hr { border: 0; border-top: var(--rule-soft); margin: var(--s-6) 0; }
::selection { background: var(--accent); color: var(--paper); }

/* ─── layout primitives ─── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-wide { max-width: 1480px; }

/* ─── typography ─── */
.display, .h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink-950);
  line-height: var(--lh-heading);
  margin: 0;
  letter-spacing: var(--tracking-heading);
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 600; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}

.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }
.small { font-size: var(--fs-small); color: var(--ink-500); }
.mute  { color: var(--ink-500); }
.tight { line-height: var(--lh-tight); }

/* ─── top navigation ─── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--rule-med);
  backdrop-filter: saturate(180%) blur(6px);
}
.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--s-6);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-heading);
}
.brand__mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  transform: translateY(-1px);
}
.brand:hover { color: var(--ink-950); }
.topnav__links {
  display: flex;
  gap: var(--s-6);
  font-size: var(--fs-small);
  font-weight: 500;
}
.topnav__links a { color: var(--ink-700); }
.topnav__links a:hover, .topnav__links a.is-active { color: var(--accent); }
.topnav__stats {
  font-size: var(--fs-micro);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
/* ─── source-view popover (navbar) ─── */
.topnav__view { position: relative; margin: 0; }
.topnav__view > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.topnav__view > summary::-webkit-details-marker { display: none; }
.topnav__view > summary:hover { border-color: var(--ink-500); }
.topnav__view[open] > summary { border-color: var(--accent); color: var(--accent); }
.topnav__view-arrow {
  font-size: 0.75em;
  transition: transform var(--t-fast) var(--ease-out);
}
.topnav__view[open] .topnav__view-arrow { transform: rotate(180deg); }

.topnav__view-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink-300);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.topnav__view-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.topnav__view-group legend {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  padding: 0;
  margin-bottom: 2px;
}
.topnav__view-section + .topnav__view-section { margin-top: var(--s-2); }
.topnav__view-section-label {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-500);
  margin-bottom: 4px;
}
.topnav__view-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: var(--fs-small);
  color: var(--ink-950);
  cursor: pointer;
  font-weight: 400;
}
.topnav__view-check:hover { background: var(--ink-50); }
.topnav__view-check input { margin: 0; cursor: pointer; }
.topnav__view-count {
  margin-left: auto;
  font-size: var(--fs-micro);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  background: var(--ink-100);
  border-radius: 10px;
  padding: 1px 8px;
  min-width: 26px;
  text-align: center;
  font-weight: 500;
}
.topnav__view-check:hover .topnav__view-count { background: var(--ink-150); }
.topnav__view-actions {
  display: flex;
  gap: var(--s-2);
  border-top: 1px solid var(--ink-150);
  padding-top: var(--s-3);
}
.topnav__view-apply,
.topnav__view-reset {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.topnav__view-apply {
  background: var(--ink-950);
  color: var(--paper);
  flex: 1;
}
.topnav__view-apply:hover { background: var(--accent); }
.topnav__view-reset {
  background: transparent;
  border-color: var(--ink-300);
  color: var(--ink-700);
}
.topnav__view-reset:hover { background: var(--ink-50); }

/* ─── hero ─── */
.hero {
  padding: var(--s-12) 0 var(--s-10);
  border-bottom: var(--rule-med);
}
.hero__eyebrow { margin-bottom: var(--s-4); }
.hero__title { max-width: 18ch; margin-bottom: var(--s-5); }
.hero__lede  { max-width: 56ch; font-size: 1.125rem; color: var(--ink-700); }
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-10);
  border-top: var(--rule-med);
  padding-top: var(--s-6);
}
.stat__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  margin-bottom: var(--s-2);
}
.stat__value {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
}

/* ─── section blocks ─── */
.section { padding: var(--s-10) 0; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: var(--rule-strong);
}
.section__head .h2 { margin: 0; }
.section__link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}

/* ─── firms grid ─── */
.firms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.firm-tile {
  background: var(--paper);
  padding: var(--s-5);
  transition: background var(--t-fast) var(--ease-out);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.firm-tile:hover { background: var(--ink-50); }
.firm-tile__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
}
.firm-tile__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.firm-tile__count {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
}

/* ─── pillars (home: Skill / App / Analysis) ─── */
/* Editorial three-column layout — no boxes. Vertical rules separate the
 * pillars; numbered eyebrows (01/02/03) anchor the "Three ways" promise
 * in the section header above. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: var(--rule-soft);
}
@media (max-width: 720px) {
  .pillars { grid-template-columns: 1fr; }
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-6) var(--s-7) 0;
  position: relative;
  min-height: 220px;
  color: inherit;
}
.pillar + .pillar {
  border-left: var(--rule-soft);
  padding-left: var(--s-6);
}
@media (max-width: 720px) {
  .pillar + .pillar {
    border-left: none;
    border-top: var(--rule-soft);
    padding-left: 0;
  }
}
.pillar__num {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-300);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-1);
}
.pillar__eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.pillar__title {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
  margin: 0;
  transition: color var(--t-fast) var(--ease-out);
}
.pillar__lede {
  font-size: 1.0625rem;
  color: var(--ink-700);
  margin: 0;
  flex: 1;
  line-height: 1.5;
}
.pillar__cta {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-300);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pillar:hover .pillar__title { color: var(--accent); }
.pillar:hover .pillar__cta {
  color: var(--accent);
  border-color: var(--accent);
}

/* ─── deck cards grid ─── */
.decks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}
.deck-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--rule-soft);
  transition: box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.deck-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.deck-card__thumb {
  aspect-ratio: 4/3;
  background: var(--ink-100);
  overflow: hidden;
  position: relative;
}
.deck-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.deck-card__body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.deck-card__firm {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.deck-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-950);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  /* clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deck-card__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* ─── deck detail page ─── */
.deck-head {
  padding: var(--s-10) 0 var(--s-6);
  border-bottom: var(--rule-med);
}
.deck-head__firm { color: var(--accent); }
.deck-head__title { margin-top: var(--s-3); max-width: 24ch; }
.deck-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.deck-head__meta a { color: var(--ink-700); border-bottom: 1px solid var(--ink-300); }
.deck-head__meta a:hover { color: var(--accent); border-color: var(--accent); }

/* slide list (per-page inventory rows) */
.slide-list { padding: var(--s-8) 0 var(--s-12); }
.slide-row {
  display: grid;
  grid-template-columns: 80px 380px 1fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: var(--rule-soft);
  align-items: start;
}
.slide-row:last-child { border-bottom: var(--rule-soft); }
.slide-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-400);
  padding-top: 4px;
}
.slide-row__thumb {
  background: var(--ink-100);
  border: var(--rule-soft);
  aspect-ratio: 4/3;
  overflow: hidden;
  padding: 0;
  display: block;
  cursor: zoom-in;
}
button.slide-row__thumb { font: inherit; color: inherit; }
button.slide-row__thumb:hover img { opacity: 0.92; }
.slide-row__thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.slide-row__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.slide-row__eyebrow {
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
}
.slide-row__eyebrow .pill {
  background: var(--ink-100);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  color: var(--ink-700);
}
.slide-row__eyebrow .pill--action {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
/* action title = declarative insight, the editorial hero */
.slide-row__action {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
  border-left: 4px solid var(--accent);
  padding-left: var(--s-4);
  max-width: 52ch;
}
/* topic label = non-declarative heading (section titles, "Table of contents", etc.) */
.slide-row__topic {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
}
.slide-row__desc {
  font-size: var(--fs-body);
  color: var(--ink-700);
  max-width: 70ch;
}
.slide-row__metrics {
  display: flex;
  gap: var(--s-5);
  font-size: var(--fs-small);
  color: var(--ink-500);
  flex-wrap: wrap;
}
.slide-row__metrics strong {
  font-family: var(--font-serif);
  color: var(--ink-950);
  font-size: 1rem;
  font-weight: 700;
}
.slide-row__callout {
  background: var(--ink-50);
  border-left: 2px solid var(--ink-300);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-700);
  max-width: 70ch;
}
.slide-row__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--blue-editorial);
  border-left: 3px solid var(--blue-editorial);
  padding-left: var(--s-4);
  max-width: 60ch;
}
.slide-row__elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.slide-row__elements .el {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  padding: 2px 6px;
  border: var(--rule-soft);
  border-radius: var(--radius-xs);
}
.slide-row__unextracted {
  color: var(--ink-400);
  font-style: italic;
  font-size: var(--fs-small);
}

/* ─── browse page ─── */
.browse-head {
  padding: var(--s-8) 0 var(--s-6);
  border-bottom: var(--rule-med);
}
.browse-filters {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
}
.browse-filters input[type="search"] {
  font: inherit;
  padding: 8px 12px;
  border: var(--rule-med);
  border-radius: var(--radius-sm);
  min-width: 280px;
}
.browse-filters select {
  font: inherit;
  padding: 8px 12px;
  border: var(--rule-med);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.browse-filters button {
  padding: 8px 14px;
  background: var(--ink-950);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
}
.browse-filters button:hover { background: var(--accent); }

/* ─── action titles library ─── */
.action-titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--s-5);
}
.action-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) 0;
  background: var(--paper);
  border: var(--rule-soft);
  transition: box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
  min-height: 320px;
}
.action-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.action-card__eyebrow {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.action-card__eyebrow .pill {
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--ink-100);
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.action-card__eyebrow .pill--firm {
  background: var(--ink-950);
  color: var(--paper);
}
.action-card__eyebrow .pill--action {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.action-card__title {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--accent);
  padding-left: var(--s-4);
  /* clamp to 4-5 lines */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.action-card__meta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.action-card__meta strong {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-950);
}
.action-card__thumb {
  margin: 0 calc(var(--s-5) * -1);
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--ink-100);
  border-top: var(--rule-soft);
}
.action-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ─── curate (duplicate groups) ─── */
.dupe-group {
  margin-bottom: var(--s-8);
  border: var(--rule-soft);
  padding: var(--s-5);
}
.dupe-group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: var(--rule-soft);
  margin-bottom: var(--s-5);
}
.pill--reason {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 3px 10px;
  border-radius: 2px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-right: var(--s-3);
}
.dupe-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.dupe-option {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border: var(--rule-soft);
  background: var(--paper);
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.dupe-option:hover { box-shadow: var(--shadow-hover); }
.dupe-option__thumb {
  display: block;
  aspect-ratio: 4/3;
  background: var(--ink-100);
  overflow: hidden;
  border: var(--rule-soft);
}
.dupe-option__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dupe-option__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dupe-option__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: var(--lh-tight);
  color: var(--ink-950);
}
.btn-keep {
  padding: 10px 14px;
  background: var(--ink-950);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  cursor: pointer;
}
.btn-keep:hover { background: var(--accent); }
.btn-skip {
  padding: 6px 12px;
  border: var(--rule-med);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--ink-700);
  cursor: pointer;
  background: var(--paper);
}
.btn-skip:hover { border-color: var(--ink-950); }

/* ─── progress dashboard ─── */
.progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.pstat {
  background: var(--paper);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pstat__val {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
.pstat__lbl {
  font-size: var(--fs-micro);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
}
.progress-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
.pbar {
  height: 14px;
  background: var(--ink-100);
  overflow: hidden;
  border-radius: 2px;
}
.pbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width 0.5s var(--ease-out);
}
.pbar__label {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.by-model { margin-top: var(--s-6); }
.by-model__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.by-model__table th, .by-model__table td {
  padding: 8px 12px;
  border-bottom: var(--rule-soft);
  text-align: left;
}
.by-model__table th {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  border-top: var(--rule-med);
  border-bottom: var(--rule-med);
}
.by-model__table .num,
.runs-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.runs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.runs-table th, .runs-table td {
  padding: 8px 12px;
  border-bottom: var(--rule-soft);
  text-align: left;
  vertical-align: top;
}
.runs-table th {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  border-top: var(--rule-strong);
  border-bottom: var(--rule-strong);
  background: var(--ink-50);
}
.runs-table code {
  font-size: 11px;
  color: var(--ink-700);
}

/* ─── deck critiques (per-deck panel + index) ─── */
.deck-critique {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--ink-50);
  border-left: 3px solid var(--accent);
}
.deck-critique__verdict {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  padding-bottom: var(--s-4);
  border-bottom: var(--rule-soft);
  margin-bottom: var(--s-4);
}
.deck-critique__score {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.deck-critique__line {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ink-950);
  line-height: var(--lh-tight);
  margin-top: 4px;
}
.deck-critique__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.deck-critique__cell {
  display: flex; flex-direction: column; gap: 6px;
}
.deck-critique__cell-head {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
}
.deck-critique__cell-head strong {
  font-family: var(--font-serif);
  color: var(--accent);
  font-size: 1.125rem;
  margin-right: 4px;
  vertical-align: baseline;
}
.deck-critique__cell-body {
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.5;
}
.deck-critique__suggestions {
  border-top: var(--rule-soft);
  padding-top: var(--s-4);
}
.deck-critique__suggestions ol {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-5);
  color: var(--ink-700);
  font-size: var(--fs-small);
}
.deck-critique__suggestions li { margin-bottom: 4px; }

.critique-list { display: flex; flex-direction: column; gap: var(--s-4); }
.critique {
  background: var(--paper);
  border: var(--rule-soft);
  padding: var(--s-5);
  display: block;
  transition: box-shadow var(--t-med) var(--ease-out);
}
.critique:hover { box-shadow: var(--shadow-hover); }
.critique__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: start;
  margin-bottom: var(--s-3);
}
.critique__firm {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  margin-bottom: 4px;
}
.critique__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-heading);
  margin-bottom: 6px;
}
.critique__verdict {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-700);
  font-size: 1rem;
  line-height: var(--lh-tight);
  max-width: 80ch;
}
.critique__scores {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--s-4);
  align-items: center;
}
.big-score {
  text-align: center;
  border-right: var(--rule-med);
  padding-right: var(--s-4);
}
.big-score__val {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.big-score__lbl {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  margin-top: 4px;
}
.mini-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.mini-scores div { display: flex; flex-direction: column; }
.mini-scores strong {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink-950);
}
.mini-scores span {
  font-size: var(--fs-micro);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.critique__sw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--rule-soft);
}
.critique__col-head {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--s-2);
}
.critique__col--good .critique__col-head { color: var(--success); }
.critique__col--bad .critique__col-head { color: var(--accent); }
.critique__col ul {
  margin: 0;
  padding-left: var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.5;
}

/* ─── copy patterns ─── */
.copy-pattern-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.copy-pattern {
  background: var(--paper);
}
.copy-pattern summary {
  display: grid;
  grid-template-columns: 60px 1fr 200px;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  align-items: baseline;
  list-style: none;
  transition: background var(--t-fast) var(--ease-out);
}
.copy-pattern summary::-webkit-details-marker { display: none; }
.copy-pattern summary:hover { background: var(--ink-50); }
.copy-pattern[open] summary { background: var(--ink-50); border-bottom: var(--rule-soft); }
.copy-pattern__count {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.copy-pattern__sig {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink-950);
  letter-spacing: -0.01em;
}
.copy-pattern__sig::before, .copy-pattern__sig::after {
  content: '';
}
.copy-pattern__firms { text-align: right; }

.copy-pattern__examples {
  padding: var(--s-3) var(--s-5) var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.copy-example {
  background: var(--paper);
  padding: var(--s-3) var(--s-4);
  border: var(--rule-soft);
  border-left: 3px solid var(--accent);
  display: block;
}
.copy-example:hover { background: var(--ink-50); }
.copy-example__firm {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  margin-bottom: 4px;
}
.copy-example__text {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-950);
}

/* ═══════════════════════════════════════════════════════════════════
   /insights — editorial + interactive
   ═══════════════════════════════════════════════════════════════════ */
.ins-hero {
  padding: var(--s-12) 0 var(--s-10);
  border-bottom: var(--rule-strong);
  background: linear-gradient(180deg, var(--paper) 0%, var(--ink-50) 100%);
  position: relative;
}
.ins-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-950);
  max-width: 22ch;
  margin: var(--s-4) 0 var(--s-5);
}
.ins-strike { position: relative; color: var(--accent); display: inline-block; }
.ins-strike::after {
  content: ""; position: absolute;
  left: -4%; right: -4%; top: 48%; height: 4px;
  background: var(--accent); transform: rotate(-3deg); transform-origin: left center; opacity: 0.8;
}
.ins-hero__lede {
  max-width: 62ch; font-size: 1.125rem; color: var(--ink-700);
  line-height: 1.55; margin-bottom: var(--s-10);
}
.ins-stats {
  display: flex; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
.ins-stat { display: flex; flex-direction: column; }
.ins-stat__big {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.75rem);
  line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink-950); letter-spacing: -0.03em;
}
.ins-stat__big--accent { color: var(--accent); }
.ins-stat__lbl {
  font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500); margin-top: 4px;
}
.ins-stat--arrow {
  font-family: var(--font-serif); font-size: 3rem;
  color: var(--ink-300); padding: 0 var(--s-3); padding-bottom: 12px;
}
.ins-stat--gap { margin-left: auto; text-align: right; }
.ins-stat--gap .ins-stat__big { color: var(--accent); }
.ins-scroll-hint {
  margin-top: var(--s-8); font-size: var(--fs-small); color: var(--ink-400);
  animation: bobble 2s ease-in-out infinite;
}
@keyframes bobble {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(6px); opacity: 1; }
}
.ins-block { padding: var(--s-10) 0; }
.ins-block--alt { background: var(--ink-50); }
.ins-lead {
  max-width: 65ch; font-family: var(--font-serif); font-size: 1.0625rem;
  line-height: 1.55; color: var(--ink-700); margin-bottom: var(--s-6);
}
.ins-chart {
  width: 100%; min-height: 520px;
  background: var(--paper); border: var(--rule-soft); padding: var(--s-2);
}
.ins-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4);
  font-size: var(--fs-small); color: var(--ink-700);
}
.ins-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ins-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #888; }

.scatter-tip {
  position: absolute; z-index: 80;
  background: var(--ink-950); color: var(--paper);
  padding: 8px 11px; font-size: 12px; max-width: 280px;
  border-radius: 3px; pointer-events: none;
  font-family: var(--font-sans);
}
.scatter-tip__firm {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent);
}
.scatter-tip__title {
  font-family: var(--font-serif); font-weight: 700; font-size: 13px;
  margin: 3px 0; line-height: 1.3;
}
.scatter-tip__scores { font-variant-numeric: tabular-nums; color: var(--ink-300); font-size: 11px; }
.scatter-tip__verdict { font-style: italic; color: var(--ink-200); margin-top: 6px; line-height: 1.4; }

.firm-bars {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--ink-150); border: var(--rule-soft);
}
.firm-bars__head, .firm-bars__row {
  display: grid; grid-template-columns: 200px repeat(4, 1fr);
  gap: var(--s-4); background: var(--paper);
  padding: var(--s-3) var(--s-4); align-items: center;
}
.firm-bars__head {
  font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--ink-500); font-weight: 600;
}
.firm-bars__name {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-serif);
}
.firm-bars__cell { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
.firm-bars__track { height: 8px; background: var(--ink-100); border-radius: 2px; overflow: hidden; }
.firm-bars__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width 0.8s var(--ease-out);
}
.firm-bars__val {
  font-family: var(--font-serif); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 1rem;
  color: var(--ink-950); min-width: 40px; text-align: right;
}

.exemplars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.exemplars__col { display: flex; flex-direction: column; }
.exemplars__head {
  padding: var(--s-3) var(--s-4); border-top: 3px solid; margin-bottom: var(--s-3);
}
.exemplars__head--up { border-top-color: var(--success); }
.exemplars__head--down { border-top-color: var(--accent); }
.exemplar {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper); border: var(--rule-soft);
  margin-bottom: 1px; transition: background 120ms;
}
.exemplar:hover { background: var(--ink-50); }
.exemplar__score {
  font-family: var(--font-serif); font-size: 2rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.exemplar__score--up { color: var(--success); }
.exemplar__score--down { color: var(--accent); }
.exemplar__meta { display: flex; gap: 6px; margin-bottom: 4px; }
.exemplar__meta .pill {
  font-size: 10px; padding: 2px 6px; background: var(--ink-100);
  border-radius: 2px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-700);
}
.exemplar__meta .pill--firm { background: var(--ink-950); color: var(--paper); }
.exemplar__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 0.975rem; line-height: 1.25;
  color: var(--ink-950); margin-bottom: 4px;
}
.exemplar__verdict {
  font-size: 12px; color: var(--ink-500); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.themes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--ink-150); border: var(--rule-soft);
  margin-bottom: var(--s-6);
}
.theme {
  display: grid; grid-template-rows: auto auto auto; gap: 4px;
  padding: var(--s-3) var(--s-4); background: var(--paper);
  cursor: pointer; text-align: left; transition: background 120ms;
  font: inherit; color: inherit; border: none;
}
.theme:hover { background: var(--ink-50); }
.theme.is-active {
  background: var(--ink-50); border-left: 3px solid var(--accent);
  padding-left: calc(var(--s-4) - 3px);
}
.theme__bar { height: 4px; background: var(--ink-100); border-radius: 2px; overflow: hidden; order: 1; }
.theme__fill { height: 100%; background: var(--accent); }
.theme__label {
  font-family: var(--font-serif); font-weight: 700; font-size: 1rem;
  color: var(--ink-950); order: 2;
}
.theme__pct { font-size: var(--fs-small); color: var(--ink-500); font-variant-numeric: tabular-nums; order: 3; }

.theme-quotes__pane { display: none; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4); }
.theme-quotes__pane.is-active { display: grid; }
.quote-card {
  padding: var(--s-4); background: var(--paper);
  border: var(--rule-soft); border-left: 3px solid var(--accent);
  display: block; transition: box-shadow 120ms;
}
.quote-card:hover { box-shadow: var(--shadow-hover); }
.quote-card__text {
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.4;
  color: var(--ink-950); margin-bottom: var(--s-3);
}
.quote-card__meta { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-small); color: var(--ink-500); }
.quote-card__meta .pill--firm {
  background: var(--ink-950); color: var(--paper); font-size: 10px;
  padding: 2px 8px; border-radius: 2px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}

.verbs-row { margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--rule-soft); }
.verbs { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: baseline; margin-top: var(--s-3); }
.verb { font-family: var(--font-serif); color: var(--ink-950); line-height: 1; }
.verb em {
  font-family: var(--font-sans); font-size: 0.6em; font-style: normal;
  color: var(--accent); margin-left: 3px; vertical-align: super;
}

.praise-blame { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.praise-blame__col { padding: var(--s-4); background: var(--paper); border: var(--rule-soft); }
.praise-blame__head {
  font-size: var(--fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  padding-bottom: var(--s-3); border-bottom: var(--rule-soft); margin-bottom: var(--s-4);
}
.praise-blame__cloud {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: baseline; min-height: 160px;
}
.pb-word { font-family: var(--font-serif); font-weight: 700; line-height: 1; }
.pb-word--praise { color: var(--success); }
.pb-word--blame { color: var(--accent); }
.pb-word em {
  font-family: var(--font-sans); font-style: normal; font-size: 0.55em;
  color: var(--ink-500); margin-left: 3px; vertical-align: super;
}

/* ─── /evolution ─── */
.ev-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.era-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.era-col { background: var(--paper); border: var(--rule-soft); padding: var(--s-5); }
.era-col__head { padding-bottom: var(--s-3); border-bottom: var(--rule-soft); margin-bottom: var(--s-4); }
.era-col__name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: var(--tracking-heading); color: var(--accent); }
.era-col__words { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; line-height: 1.2; }
.era-word { font-family: var(--font-serif); font-weight: 700; color: var(--ink-950); line-height: 1; }
.era-word em { font-family: var(--font-sans); font-style: normal; font-size: 0.55em; color: var(--accent); margin-left: 3px; vertical-align: super; }

.fw-trajectories {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--ink-150); border: var(--rule-soft);
}
.fw-row {
  background: var(--paper);
  display: grid; grid-template-columns: 220px 1fr 60px;
  gap: var(--s-4); align-items: center;
  padding: var(--s-2) var(--s-4);
}
.fw-row__name { font-family: var(--font-serif); font-weight: 700; font-size: 0.94rem; color: var(--ink-950); }
.fw-row__spark { min-height: 36px; }
.fw-row__total {
  font-family: var(--font-serif); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 700; color: var(--accent); text-align: right;
}

/* ─── heatmap drill-down page ─── */
.drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.drill-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--rule-soft);
  transition: box-shadow 180ms var(--ease-out);
}
.drill-card:hover { box-shadow: var(--shadow-hover); }
.drill-card__thumb {
  aspect-ratio: 4/3;
  background: var(--ink-100);
  overflow: hidden;
  border-bottom: var(--rule-soft);
}
.drill-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.drill-card__body { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.drill-card__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.drill-card__meta .pill {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: var(--ink-100);
  color: var(--ink-700);
  border-radius: 2px;
}
.drill-card__deck {
  font-size: var(--fs-small);
  color: var(--ink-500);
  line-height: 1.3;
}
.drill-card__title {
  font-family: var(--font-serif);
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
}
.drill-card__topic {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  font-weight: 600;
}
.drill-card__callout {
  font-size: var(--fs-small);
  color: var(--ink-700);
  font-style: italic;
  border-left: 2px solid var(--ink-200);
  padding-left: var(--s-3);
}
.drill-card__metric {
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.drill-card__metric strong {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--accent);
}

/* ─── archetype tip ─── */
.archetype-tile__tip {
  font-size: 11px;
  color: var(--ink-700);
  line-height: 1.4;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--ink-200);
  margin-top: var(--s-2);
  font-style: italic;
}

/* ─── arc filters bar ─── */
.arc-filters {
  margin-bottom: var(--s-5);
}

/* ─── arc heatmap (slide_type positional) ─── */
.heatmap { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.heatmap__head {
  display: grid; grid-template-columns: repeat(6, 1fr);
  font-size: var(--fs-micro);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--s-2);
  margin-left: 210px;
  font-weight: 600;
}
.heatmap__head span { text-align: center; }
.heatmap__head .heatmap__axis:first-child { text-align: left; }
.heatmap__head .heatmap__axis:last-child { text-align: right; }
.heatmap__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-3);
  align-items: center;
  padding: 3px 0;
}
.heatmap__row:hover { background: var(--ink-50); }
.heatmap__label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-700);
  font-weight: 500;
}
.heatmap__cells {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 1px;
  height: 22px;
}
.heatmap__cell {
  display: block;
  transition: outline 120ms;
  position: relative;
  cursor: crosshair;
}
.heatmap__cell:hover {
  outline: 2px solid var(--ink-950);
  outline-offset: 1px;
  z-index: 1;
}
.heatmap__cell:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-950);
  color: var(--paper);
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
  z-index: 20;
  border-radius: 3px;
  font-family: var(--font-sans);
}

/* ─── sankey — dual-mode with animated ribbons ─── */
.sankey-controls {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.sankey-toggle {
  display: inline-flex;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  overflow: hidden;
}
.sankey-toggle__btn {
  padding: 7px 14px;
  background: var(--paper);
  color: var(--ink-700);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--ink-200);
  letter-spacing: 0.02em;
}
.sankey-toggle__btn:last-child { border-right: none; }
.sankey-toggle__btn:hover { background: var(--ink-50); }
.sankey-toggle__btn.is-active {
  background: var(--ink-950);
  color: var(--paper);
}
.sankey-readout {
  flex: 1;
  min-width: 240px;
  padding: 6px 10px;
  background: var(--ink-50);
  border-left: 2px solid var(--ink-200);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.sankey-readout strong { color: var(--ink-950); }
.sankey-readout .readout-n   { color: var(--accent); font-weight: 600; }
.sankey-readout .readout-pct {
  display: inline-block;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 2px;
  color: var(--ink-700);
  font-size: 0.92em;
}

.sankey-chart {
  width: 100%;
  min-height: 420px;
  background: var(--paper);
  border: var(--rule-soft);
  padding: var(--s-3);
  overflow: hidden;
}

/* nodes */
.sankey-node {
  stroke: var(--paper);
  stroke-width: 0.5;
  transition: opacity 200ms ease-out, filter 200ms ease-out;
  cursor: pointer;
}
.sankey-node.is-dimmed { opacity: 0.15; }
.sankey-node:hover { filter: brightness(1.08); }

/* ensure labels always render on top of ribbons */
.sankey-svg .sankey-labels { pointer-events: all; }

/* labels — wrapped in a <g> with white pill background */
.sankey-label-group { transition: opacity 200ms ease-out; cursor: pointer; }
.sankey-label-group.is-dimmed { opacity: 0.18; }
.sankey-label-bg {
  fill: var(--paper);
  fill-opacity: 0.92;
  stroke: var(--ink-200);
  stroke-width: 0.5;
  pointer-events: none;
}
.sankey-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink-950);
  pointer-events: none;
  letter-spacing: 0.01em;
}
.sankey-svg--roles .sankey-label { font-size: 13px; }

/* ribbons — tiered by value */
.sankey-link {
  cursor: pointer;
  transition: stroke-opacity 180ms ease-out, filter 180ms ease-out;
  stroke-opacity: 0.45;
}
.sankey-link.is-secondary { stroke-opacity: 0.13; }
.sankey-link.is-primary   { stroke-opacity: 0.48; }
.sankey-link.is-active    { stroke-opacity: 0.85 !important; filter: drop-shadow(0 0 6px rgba(200,16,46,0.18)); }
.sankey-link.is-dimmed    { stroke-opacity: 0.04 !important; }
.sankey-link:hover        { stroke-opacity: 0.7; }

/* The sankey itself is static — no shimmer, no flowing dashes.
   Animation lives in the toggle transition (see JS crossfade below).
   The toggle button itself gets a tiny pressed feel. */
.sankey-toggle__btn { transition: background 160ms ease-out, color 160ms ease-out; }
.sankey-toggle__btn:active { transform: translateY(1px); }
.sankey-svg { transition: opacity 260ms ease-out; }
.sankey-svg.is-swapping { opacity: 0.2; }

/* ─── arc cell tooltip (hover thumb) ─── */
.arc-tooltip {
  position: fixed;
  z-index: 90;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink-950);
  box-shadow: 0 8px 24px rgba(10,11,13,0.18);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arc-tooltip__thumb {
  background: var(--ink-100);
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: var(--rule-soft);
}
.arc-tooltip__thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.arc-tooltip__body {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.arc-tooltip__meta {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.arc-tooltip__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.22;
  color: var(--ink-950);
}
.arc-tooltip__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.arc-tooltip__tags .tag {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: var(--ink-100);
  color: var(--ink-700);
  border-radius: 2px;
}
.arc-tooltip__tags .tag-setup      { background: #F2F3F5; color: #3C3F4A; }
.arc-tooltip__tags .tag-tension    { background: #FDEBD1; color: #9A5200; }
.arc-tooltip__tags .tag-analysis   { background: #DEE5EF; color: #0F2E4C; }
.arc-tooltip__tags .tag-evidence   { background: #D1F0DC; color: #0A5C2C; }
.arc-tooltip__tags .tag-resolution { background: var(--accent-soft); color: var(--accent-dark); }
.arc-tooltip__tags .tag-appendix   { background: #F2F3F5; color: #8B8E99; }

/* ─── arc archetypes ─── */
.archetype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.archetype-tile {
  background: var(--paper);
  padding: var(--s-5);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-2);
  transition: background var(--t-fast) var(--ease-out);
  min-height: 160px;
}
.archetype-tile:hover, .archetype-tile.is-active { background: var(--ink-50); }
.archetype-tile.is-active { border-left: 3px solid var(--accent); padding-left: calc(var(--s-5) - 3px); }
.archetype-tile__count {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.archetype-tile__label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--tracking-heading);
  color: var(--ink-950);
}
.archetype-tile__blurb {
  font-size: var(--fs-small);
  color: var(--ink-500);
  line-height: 1.4;
}

/* ─── narrative arcs ─── */
.arc-legend {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-700);
  align-items: center;
  flex-wrap: wrap;
}
.arc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.arc-setup      { background: #B4B7BF; }
.arc-tension    { background: #D97706; }
.arc-analysis   { background: #0F2E4C; }
.arc-resolution { background: #C8102E; }
.arc-evidence   { background: #15803D; }
.arc-appendix   { background: #E6E7EB; }

.arcs-list { display: flex; flex-direction: column; gap: var(--s-3); }
.arc-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: var(--rule-soft);
  background: var(--paper);
  transition: box-shadow var(--t-med) var(--ease-out);
  align-items: center;
}
.arc-row:hover { box-shadow: var(--shadow-hover); }
.arc-row__firm {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  margin-bottom: 4px;
}
.arc-row__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
}
.arc-row__stats { margin-top: 4px; }
.arc-strip {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 32px;
  background: var(--ink-100);
  padding: 2px;
  overflow: hidden;
  min-width: 0;
}
.arc-cell {
  flex: 1 1 0;
  min-width: 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.35);
}
.arc-cell:hover { outline: 2px solid var(--ink-950); outline-offset: 1px; }

/* ─── language fingerprint ─── */
.word-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-6) 0;
  align-items: baseline;
}
.wc-word {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
  /* scale based on --n; tuned for counts 10..500 */
  font-size: clamp(0.95rem, calc(0.75rem + var(--n) * 0.008rem), 2.75rem);
  line-height: 1;
}
.wc-word em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.7em;
  font-weight: 500;
  color: var(--ink-400);
  margin-left: 3px;
  vertical-align: super;
}

.firm-signature {
  padding: var(--s-5) 0;
  border-top: var(--rule-soft);
}
.firm-signature__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
}
.firm-signature__head a { border-bottom: 2px solid var(--ink-950); }
.firm-signature__head a:hover { color: var(--accent); border-color: var(--accent); }
.firm-signature__words {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.sig-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  background: var(--ink-50);
  border: var(--rule-soft);
  border-radius: 2px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: background var(--t-fast) var(--ease-out);
}
.sig-word:hover { background: var(--accent-soft); border-color: var(--accent); }
.sig-word__rel {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ─── frameworks by category ─── */
.fw-group { margin-bottom: var(--s-10); }
.fw-group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-strong);
}

/* ─── frameworks catalog ─── */
.framework-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.framework-tile {
  background: var(--paper);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 110px;
  transition: background var(--t-fast) var(--ease-out);
}
.framework-tile:hover, .framework-tile.is-active { background: var(--ink-50); }
.framework-tile.is-active { border-left: 3px solid var(--accent); }
.framework-tile__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--ink-950);
}
.framework-tile__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}
.framework-tile__count {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ─── Storymakers evaluations ─── */
.firm-leaderboard {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-strong);
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 40px 200px 1fr 80px 180px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: var(--rule-soft);
}
.leaderboard-row__rank {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.leaderboard-row__firm {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.0625rem;
}
.leaderboard-row__bar {
  height: 8px;
  background: var(--ink-100);
  border-radius: 2px;
  overflow: hidden;
}
.leaderboard-row__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 2px;
}
.leaderboard-row__score {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-950);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.leaderboard-row__range { text-align: right; }

/* dim matrix */
.dim-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.dim-matrix th, .dim-matrix td {
  text-align: center;
  padding: 10px 8px;
  border: var(--rule-soft);
}
.dim-matrix th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-micro);
  color: var(--ink-500);
  background: var(--ink-50);
  border-top: var(--rule-strong);
  border-bottom: var(--rule-strong);
}
.dim-matrix__firm {
  text-align: left !important;
  font-family: var(--font-serif);
  font-weight: 700;
  padding-left: var(--s-4) !important;
}
.dim-cell {
  font-family: var(--font-serif);
  font-weight: 700;
  background: linear-gradient(90deg,
              rgba(200, 16, 46, calc(var(--v) / 140)),
              rgba(200, 16, 46, calc(var(--v) / 140)));
}

/* scorecard list */
.deck-scorecard-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.scorecard {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: var(--rule-soft);
  align-items: center;
  transition: box-shadow var(--t-med) var(--ease-out);
}
.scorecard:hover { box-shadow: var(--shadow-hover); }
.scorecard__thumb {
  aspect-ratio: 4/3;
  background: var(--ink-100);
  overflow: hidden;
}
.scorecard__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scorecard__eyebrow {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.scorecard__eyebrow .pill {
  font-size: var(--fs-micro);
  padding: 2px 8px;
  background: var(--ink-100);
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  border-radius: 2px;
}
.scorecard__eyebrow .pill--firm {
  background: var(--ink-950);
  color: var(--paper);
}
.scorecard__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--s-3);
}
.scorecard__dims {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
  font-size: 11px;
}
.mini-dim {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2px;
}
.mini-dim__label {
  color: var(--ink-500);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-dim__bar {
  height: 4px;
  background: var(--ink-100);
  border-radius: 1px;
  overflow: hidden;
}
.mini-dim__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.mini-dim__val {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink-950);
}
.scorecard__total {
  text-align: center;
  border-left: var(--rule-med);
  padding-left: var(--s-5);
}
.scorecard__total-val {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.scorecard__total-label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  margin-top: 4px;
}

/* ─── footer ─── */
.footer {
  margin-top: var(--s-16);
  padding: var(--s-8) 0;
  border-top: var(--rule-strong);
  font-size: var(--fs-small);
  color: var(--ink-500);
}
.footer__grid { display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }

/* ─── hamburger (mobile only) ─── */
.topnav__toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.topnav__toggle {
  display: none; /* shown only at <=720px */
  width: 40px;
  height: 40px;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  background: var(--paper);
}
.topnav__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-900);
  transition: transform 180ms, opacity 180ms;
}
.topnav__toggle-input:focus-visible + .topnav__toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── responsive ─── */
@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .slide-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .slide-row__num { order: -1; }
  .topnav__stats { display: none; }

  .topnav__toggle { display: flex; }
  .topnav__inner {
    flex-wrap: wrap;
    gap: var(--s-3);
    height: auto;
    min-height: 64px;
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
  }

  /* Hide the inline links + auth button by default on mobile; reveal when
     the hamburger checkbox is checked. */
  .topnav__links,
  .topnav__right { display: none; width: 100%; }
  .topnav__toggle-input:checked ~ .topnav__links,
  .topnav__toggle-input:checked ~ .topnav__right {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) 0 var(--s-3);
    border-top: var(--rule-soft);
    margin-top: var(--s-3);
    align-items: stretch;
  }
  .topnav__toggle-input:checked ~ .topnav__links a,
  .topnav__toggle-input:checked ~ .topnav__links details {
    padding: var(--s-3) 0;
    font-size: 1rem;
    border-bottom: var(--rule-soft);
  }
  .topnav__toggle-input:checked ~ .topnav__more-menu { position: static; box-shadow: none; padding: 0; }

  /* Animate hamburger → X when open */
  .topnav__toggle-input:checked + .topnav__toggle .topnav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .topnav__toggle-input:checked + .topnav__toggle .topnav__toggle-bar:nth-child(2) { opacity: 0; }
  .topnav__toggle-input:checked + .topnav__toggle .topnav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ─── metrics page ─── */
.metric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.metric-table td {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ink-150);
  color: var(--ink-700);
}
.metric-table td a { color: var(--ink-900); border-bottom: 1px dotted var(--ink-300); }
.metric-table td a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.metric-table__n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  width: 4em;
}
.metric-examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.metric-example {
  background: var(--paper);
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: 120px 1fr 2fr;
  gap: var(--s-5);
  align-items: start;
  transition: background var(--t-fast) var(--ease-out);
}
.metric-example:hover { background: var(--ink-50); }
.metric-example__number {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric-example__metric {
  font-weight: 600;
  color: var(--ink-900);
  font-size: var(--fs-small);
  line-height: 1.3;
}
.metric-example__title {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-800);
}
@media (max-width: 720px) {
  .metric-example { grid-template-columns: 1fr; gap: var(--s-2); }
  .metric-example__number { font-size: 1.75rem; }
}

/* ─── /explore ─── */
.explore-filters .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.filter-bar select,
.filter-bar input[type="search"],
.filter-bar input[type="number"] {
  font: inherit;
  padding: 0.35em 0.6em;
  border: 1px solid var(--ink-300);
  background: var(--paper);
  color: var(--ink-900);
  border-radius: 4px;
  font-size: var(--fs-small);
}
.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--accent);
  outline: none;
}
.filter-bar button {
  font: inherit;
  padding: 0.35em 1em;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-small);
}
.filter-bar button:hover { filter: brightness(1.1); }

.view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-soft);
}
.view-toggle__btn {
  padding: 0.4em 0.9em;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  color: var(--ink-700);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
}
.view-toggle__btn.is-active {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.view-toggle__sep {
  width: 1px;
  height: 1.2em;
  background: var(--ink-300);
  margin: 0 var(--s-2);
}
.view-toggle__axis {
  padding: 0.25em 0.6em;
  font-size: var(--fs-small);
  color: var(--ink-500);
  border-radius: 3px;
  text-decoration: none;
}
.view-toggle__axis:hover { color: var(--ink-900); }
.view-toggle__axis.is-active {
  color: var(--accent);
  font-weight: 600;
  background: var(--ink-50);
}

/* palette tokens ─ each class declares its own fg + bg via CSS custom props.
   The tile and all its children inherit --tile-fg naturally; no brittle
   `color: paper` overrides per-class required. */

/* density — light→dark grey ramp. Only the bottom two are dark. */
.cell-density-sparse       { --tile-bg: #F2F0EC; --tile-fg: var(--ink-950); }
.cell-density-balanced     { --tile-bg: #C8C3B9; --tile-fg: var(--ink-950); }
.cell-density-dense        { --tile-bg: #6E6A62; --tile-fg: var(--paper);   }
.cell-density-overcrowded  { --tile-bg: #2A2824; --tile-fg: var(--paper);   }
.cell-density-             { --tile-bg: #E6E7EB; --tile-fg: var(--ink-950); }

/* slide_category — 8 muted editorial hues */
.cell-cat-meta       { --tile-bg: #C7C1B6; --tile-fg: var(--ink-950); }
.cell-cat-context    { --tile-bg: #DEBE84; --tile-fg: var(--ink-950); }
.cell-cat-framework  { --tile-bg: #A4B5C3; --tile-fg: var(--ink-950); }
.cell-cat-chart      { --tile-bg: #4F6E87; --tile-fg: var(--paper);   }
.cell-cat-case       { --tile-bg: #AE98AD; --tile-fg: var(--ink-950); }
.cell-cat-recommend  { --tile-bg: #8FA67A; --tile-fg: var(--ink-950); }
.cell-cat-appendix   { --tile-bg: #D4D0C6; --tile-fg: var(--ink-950); }
.cell-cat-other      { --tile-bg: #DEDAD0; --tile-fg: var(--ink-950); }

/* metric_family — 15 muted editorial hues */
.cell-metric-none                { --tile-bg: #EDEAE3; --tile-fg: var(--ink-950); }
.cell-metric-survey_sentiment    { --tile-bg: #C58D6E; --tile-fg: var(--ink-950); }
.cell-metric-market_size         { --tile-bg: #6C89A6; --tile-fg: var(--paper);   }
.cell-metric-cost_savings        { --tile-bg: #8A7C6C; --tile-fg: var(--paper);   }
.cell-metric-share_penetration   { --tile-bg: #B69464; --tile-fg: var(--ink-950); }
.cell-metric-growth_rate         { --tile-bg: #7D9E83; --tile-fg: var(--ink-950); }
.cell-metric-rate_catchall       { --tile-bg: #A9A881; --tile-fg: var(--ink-950); }
.cell-metric-employment          { --tile-bg: #A77785; --tile-fg: var(--ink-950); }
.cell-metric-index_score         { --tile-bg: #7E6F95; --tile-fg: var(--paper);   }
.cell-metric-margin_return       { --tile-bg: #B47158; --tile-fg: var(--paper);   }
.cell-metric-environment         { --tile-bg: #598A72; --tile-fg: var(--paper);   }
.cell-metric-volume_count        { --tile-bg: #9A8C79; --tile-fg: var(--ink-950); }
.cell-metric-revenue             { --tile-bg: #C7A26C; --tile-fg: var(--ink-950); }
.cell-metric-macro               { --tile-bg: #6C7E94; --tile-fg: var(--paper);   }
.cell-metric-valuation           { --tile-bg: #836B7F; --tile-fg: var(--paper);   }
.cell-metric-other               { --tile-bg: #D2CDC2; --tile-fg: var(--ink-950); }

/* narrative roles (used when grouping by function) */
.arc-setup      { --tile-bg: #D4CEC4; --tile-fg: var(--ink-950); }
.arc-tension    { --tile-bg: #E2C797; --tile-fg: var(--ink-950); }
.arc-analysis   { --tile-bg: #5C7A92; --tile-fg: var(--paper);   }
.arc-resolution { --tile-bg: #C8102E; --tile-fg: var(--paper);   }  /* McKinsey red */
.arc-evidence   { --tile-bg: #B8A5B7; --tile-fg: var(--ink-950); }
.arc-appendix   { --tile-bg: #E8E4DC; --tile-fg: var(--ink-950); }

/* filter chips ─────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.5em 0.25em 0.7em;
  background: var(--ink-900);
  color: var(--paper);
  border-radius: 999px;
  font-size: var(--fs-small);
  text-decoration: none;
  line-height: 1.3;
}
.chip:hover { background: var(--accent); color: var(--paper); }
.chip__x {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.15em;
  text-align: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 0.9em;
}
.chip--clear {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--ink-300);
}
.chip--clear:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* treemap — squarified, absolutely positioned ─────────── */
/* treemap context header — breadcrumb + subset note ─────── */
.treemap-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-3) 0;
  margin-bottom: var(--s-3);
  border-bottom: var(--rule-soft);
}
.treemap-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-family: var(--font-sans);
  color: var(--ink-500);
}
.treemap-crumbs__back {
  padding: 0.2em 0.6em 0.25em;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  color: var(--ink-700);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}
.treemap-crumbs__back:hover {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.treemap-crumbs__sep { color: var(--ink-300); }
.treemap-crumbs__item {
  color: var(--ink-500);
  text-decoration: none;
}
.treemap-crumbs__item[href]:hover { color: var(--accent); }
.treemap-crumbs__item.is-current {
  color: var(--ink-950);
  font-family: var(--font-serif);
  font-weight: 700;
}
.treemap-crumbs__chev { color: var(--ink-300); margin: 0 0.1em; }

.treemap-context__primary {
  font-size: var(--fs-body);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.treemap-context__primary strong { color: var(--ink-950); }
.treemap-context__note {
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.45;
}

.treemap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 600px;
  background: var(--paper);
  overflow: visible;   /* so tooltips can escape */
}

/* a group tile (is_group=true) gets a subtle visual cue that it's drillable */
.treemap__tile.tile-is-group {
  cursor: zoom-in;
}
.treemap__tile.tile-is-group::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) center/100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center/2px 100% no-repeat;
  opacity: 0.55;
}
.treemap__tile {
  position: absolute;
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: filter 120ms ease-out, outline-color 120ms ease-out;
  overflow: visible;        /* so tooltip can spill out */
  box-sizing: border-box;
  outline: 1px solid rgba(255,255,255,0.6);
  outline-offset: -1px;
  /* palette classes supply --tile-bg and --tile-fg via CSS custom props */
  background: var(--tile-bg, #C8C3B9);
  color:      var(--tile-fg, var(--ink-950));
}
.treemap__tile:hover {
  filter: brightness(1.05);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  z-index: 10;
}
/* default axis fallbacks (firm / function / default use the neutral tile) */
.tile-function { --tile-bg: #B6C4CF; --tile-fg: var(--ink-950); }
.tile-firm     { --tile-bg: #D4CEC4; --tile-fg: var(--ink-950); }
.tile-default  { --tile-bg: #C8C3B9; --tile-fg: var(--ink-950); }
/* inner label bleed-clip (keeps content tidy while tooltip escapes) */
.treemap__tile-label,
.treemap__tile-count,
.treemap__tile-pct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treemap__tile-label {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-950);
  overflow: hidden;
  text-overflow: ellipsis;
}
.treemap__tile-count {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
}
.treemap__tile-pct {
  color: rgba(0,0,0,0.55) !important;
  font-variant-numeric: tabular-nums;
}
/* size classes — clear, non-overflowing scale with per-element visibility.
   xl/lg show label + count + pct · md shows label + count · sm shows count only
   · xs shows only the colored square (tooltip carries the info). */
.tile-sz-xl .treemap__tile-label { font-size: 1.35rem; }
.tile-sz-xl .treemap__tile-count { font-size: 2.5rem;  }

.tile-sz-lg .treemap__tile-label { font-size: 1.05rem; }
.tile-sz-lg .treemap__tile-count { font-size: 1.85rem; }

.tile-sz-md { padding: var(--s-2) var(--s-3); }
.tile-sz-md .treemap__tile-label { font-size: 0.85rem; }
.tile-sz-md .treemap__tile-count { font-size: 1.2rem; }
.tile-sz-md .treemap__tile-pct   { display: none; }

.tile-sz-sm { padding: 4px 6px; justify-content: center; }
.tile-sz-sm .treemap__tile-label { display: none; }
.tile-sz-sm .treemap__tile-count {
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: 600;
}
.tile-sz-sm .treemap__tile-pct { display: none; }

.tile-sz-xs { padding: 0; }
.tile-sz-xs .treemap__tile-label,
.tile-sz-xs .treemap__tile-count,
.tile-sz-xs .treemap__tile-pct { display: none; }

/* fullscreen mode — most browsers set width:100% height:100% automatically,
   but we still need to neutralise aspect-ratio + min-height from the base rule. */
.treemap:fullscreen,
.treemap:-webkit-full-screen {
  background: var(--paper);
  padding: var(--s-5);
  aspect-ratio: auto;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  max-height: none;
}
.view-toggle__fs {
  margin-left: auto;
  background: var(--paper);
  cursor: pointer;
}
.view-toggle__fs:hover { background: var(--ink-100); }
/* readable text on any tile: labels/counts inherit --tile-fg naturally.
   Muted secondary text uses color-mix() so it reads on any tile. */
.treemap__tile-label,
.treemap__tile-count { color: inherit; }
.treemap__tile-pct   { color: color-mix(in srgb, currentColor 65%, transparent); }

/* floating tooltip — single element, JS-positioned with viewport clamping.
   Uses position:fixed so it's never clipped by any ancestor. */
#tile-tooltip {
  position: fixed;
  min-width: 240px;
  max-width: 320px;
  padding: var(--s-4);
  background: var(--paper);
  color: var(--ink-950);
  border: 1px solid var(--ink-200);
  box-shadow: 0 8px 28px -8px rgba(10, 11, 13, 0.22),
              0 2px 8px     rgba(10, 11, 13, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 0s 140ms;
  pointer-events: none;
  z-index: 9999;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  left: -9999px;
  top:  -9999px;
}
#tile-tooltip.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 40ms, 40ms, 0s;
}

.tile-tooltip__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-950);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 4px;
}
.tile-tooltip__stat {
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink-150);
}
.tile-tooltip__stat .mute { color: var(--ink-400); }
.tile-tooltip__stat strong { color: var(--accent); font-family: var(--font-serif); font-size: 1.1rem; }
.tile-tooltip__desc {
  padding: var(--s-2) 0;
  color: var(--ink-700);
  font-style: italic;
  border-bottom: 1px solid var(--ink-150);
}
.tile-tooltip__firms {
  padding-top: var(--s-2);
}
.tile-tooltip__firms-heading {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500);
  margin-bottom: 4px;
}
.tile-tooltip__firm {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--ink-900);
}
.tile-tooltip__firm .mute { color: var(--ink-400); font-variant-numeric: tabular-nums; }
.tile-tooltip__cta {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--ink-150);
  color: var(--accent) !important;
}


/* catalog ─────────── */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.catalog-slide {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--rule-soft);
  text-decoration: none;
  color: var(--ink-900);
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.catalog-slide:hover { box-shadow: var(--shadow-hover); }
.catalog-slide__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--ink-100);
  border-bottom: var(--rule-soft);
}
.catalog-slide__meta {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.catalog-slide__title {
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-950);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── unlock page ─── */
.unlock-card {
  padding: var(--s-8) var(--s-6);
  border: var(--rule-soft);
  background: var(--paper);
}
.unlock-err {
  margin-top: var(--s-4);
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 2px solid var(--accent);
  color: var(--accent-dark);
  font-size: var(--fs-small);
}
.unlock-form { margin: 0; }
.unlock-input {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  padding: 0.6em 0.8em;
  border: 1px solid var(--ink-300);
  background: var(--paper);
  font: inherit;
  font-size: 1rem;
  border-radius: 4px;
  box-shadow: none;
}
/* Suppress the browser's default :invalid red glow on empty required field.
   We surface errors explicitly via .unlock-input--err instead. */
.unlock-input:invalid { border-color: var(--ink-300); box-shadow: none; }
.unlock-input:focus { border-color: var(--accent); outline: none; }
.unlock-input--err,
.unlock-input--err:focus { border-color: var(--accent); }
.unlock-submit {
  display: block;
  width: 100%;
  margin-top: var(--s-3);
  padding: 0.7em 1em;
  background: var(--ink-950);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.unlock-submit:hover { background: var(--accent); }

/* padlock / unlock button in nav */
.topnav__auth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--s-3);
  padding: 0.25em 0.6em;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  color: var(--ink-700);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.topnav__auth:hover { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); }
.topnav__auth.is-unlocked { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--ink-300)); }
.topnav__auth.is-unlocked:hover { background: var(--success); color: var(--paper); border-color: var(--success); }
.topnav__auth form { display: inline; margin: 0; }
.topnav__auth button {
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ─── nav: right cluster + more dropdown ─── */
.topnav__right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.topnav__more {
  position: relative;
  list-style: none;
}
.topnav__more summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink-700);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.topnav__more summary::-webkit-details-marker { display: none; }
.topnav__more summary::after {
  content: "▾";
  font-size: 0.75em;
  opacity: 0.55;
  margin-left: 2px;
}
.topnav__more summary:hover { color: var(--accent); }
.topnav__more[open] summary { color: var(--accent); }
.topnav__more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  box-shadow: 0 8px 24px -8px rgba(10,11,13,0.18);
  padding: var(--s-2) 0;
  z-index: 60;
}
.topnav__more-menu a {
  display: block;
  padding: 0.5em var(--s-4);
  color: var(--ink-800);
  font-size: var(--fs-small);
}
.topnav__more-menu a:hover {
  background: var(--ink-50);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   /copy — the copywriting of consulting
   ═══════════════════════════════════════════════════════════════════ */

/* HERO ──────────────────────────────────────── */
.copy-hero {
  padding: var(--s-10) 0 var(--s-8);
  border-bottom: var(--rule-strong);
  background:
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 55%),
    var(--paper);
}
.copy-hero__inner { max-width: 960px; }
.copy-hero__title {
  margin-top: var(--s-4);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  max-width: 18ch;
}
.copy-hero__sub {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-700);
  font-size: 0.72em;
}
.copy-hero__lede {
  margin-top: var(--s-5);
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--ink-700);
  line-height: 1.6;
}

/* rotating hero of real action titles — pure CSS carousel */
.copy-rotator {
  position: relative;
  margin: var(--s-8) 0;
  padding: var(--s-6) var(--s-8);
  border-left: 3px solid var(--accent);
  min-height: 180px;
  background: var(--paper);
}
.copy-rotator__slot {
  position: absolute;
  top: var(--s-6); left: var(--s-8); right: var(--s-8); bottom: var(--s-6);
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: copy-rotate 48s infinite ease-in-out;
}
.copy-rotator__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 400;
  color: var(--ink-950);
  line-height: 1.35;
  margin: 0 0 var(--s-3);
  font-style: italic;
}
.copy-rotator__cite {
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.copy-rotator__cite strong { color: var(--ink-900); font-weight: 600; }
.copy-rotator__link {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
@keyframes copy-rotate {
  /* 12 slots × 4s each = 48s cycle. Each slot: fade-in (0.5s) → hold (3s) → fade-out (0.5s) → hide.
     8.33% of 48s = 4s window, which is each slot's turn. */
  0%             { opacity: 0; transform: translateY(6px); }
  1%, 7.3%       { opacity: 1; transform: translateY(0); }
  8.33%, 100%    { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .copy-rotator__slot { animation: none; }
  .copy-rotator__slot:first-child { opacity: 1; transform: none; position: relative; }
}

/* SECTION SCAFFOLDING ──────────────────────────── */
.copy-section { padding: var(--s-10) 0; border-bottom: var(--rule-soft); }
.copy-section--alt { background: color-mix(in srgb, var(--ink-100) 55%, var(--paper)); }
.copy-section__head { max-width: 64ch; margin-bottom: var(--s-8); }
.copy-section__num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--s-2);
}
.copy-section__lede {
  margin-top: var(--s-3);
  font-size: 1rem;
  color: var(--ink-700);
  line-height: 1.55;
}

/* ANATOMY GRID ─────────────────────────────────── */
.copy-anatomy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.copy-card {
  background: var(--paper);
  border: var(--rule-soft);
  padding: var(--s-5) var(--s-6);
}
.copy-card--wide { grid-column: 1 / -1; }
.copy-card__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-soft);
}

/* opener leaderboard ─ */
.copy-openers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-6);
  row-gap: 2px;
}
.copy-opener {
  position: relative;
  display: grid;
  grid-template-columns: 7em 1fr 4em;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 4px;
  border-bottom: 1px dashed var(--ink-150);
  cursor: default;
  font-size: var(--fs-small);
}
.copy-opener:hover { background: var(--ink-50); }
.copy-opener__word {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink-950);
}
.copy-opener__bar {
  position: relative;
  height: 10px;
  background: var(--ink-100);
}
.copy-opener__bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--ink-700);
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.copy-opener:hover .copy-opener__bar-fill { background: var(--accent); }
.copy-opener__n {
  text-align: right;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
/* hover popup with examples */
.copy-opener__pop {
  position: absolute;
  top: 100%; left: 0;
  min-width: 100%;
  z-index: 20;
  margin-top: 4px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  box-shadow: 0 8px 24px -8px rgba(10,11,13,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease-out, visibility 0s 140ms;
}
.copy-opener:hover .copy-opener__pop {
  opacity: 1; visibility: visible;
  transition-delay: 120ms, 120ms;
}
.copy-opener__pop-ex {
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink-150);
  font-size: var(--fs-small);
  color: var(--ink-800);
  line-height: 1.35;
}
.copy-opener__pop-ex:last-child { border-bottom: 0; }
.copy-opener__pop-ex strong {
  display: block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500) !important;
  margin-bottom: 2px;
  font-weight: 600;
}

/* big stat ─ */
.copy-big {
  padding: var(--s-5) 0;
  text-align: center;
}
.copy-big__value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--accent);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
}
.copy-big__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-700);
  line-height: 1.4;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
.copy-small-table {
  width: 100%;
  margin-top: var(--s-3);
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.copy-small-table td {
  padding: 6px 0;
  border-bottom: 1px dashed var(--ink-150);
}
.copy-small-table td:last-child { text-align: right; color: var(--ink-900); font-weight: 600; }

/* length histogram ─ */
.copy-hist { display: flex; flex-direction: column; gap: 6px; }
.copy-hist__row {
  display: grid;
  grid-template-columns: 5em 1fr 7em;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
}
.copy-hist__label { color: var(--ink-700); font-variant-numeric: tabular-nums; }
.copy-hist__bar { height: 14px; background: var(--ink-100); position: relative; }
.copy-hist__fill {
  position: absolute; top: 0; left: 0;
  height: 100%;
  background: var(--blue-editorial);
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.copy-hist__n {
  text-align: right;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.copy-hist__n em { font-style: normal; font-size: 0.92em; }

/* hedge audit ─ */
.copy-hedges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  background: var(--ink-150);
}
.copy-hedge {
  background: var(--paper);
  padding: var(--s-3) var(--s-4);
}
.copy-hedge summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.copy-hedge summary::-webkit-details-marker { display: none; }
.copy-hedge summary::after {
  content: "+";
  margin-left: auto;
  color: var(--ink-400);
  font-size: 1.2em;
  font-family: var(--font-serif);
}
.copy-hedge[open] summary::after { content: "−"; color: var(--accent); }
.copy-hedge__word {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink-950);
}
.copy-hedge__n {
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  font-size: var(--fs-small);
}
.copy-hedge__examples {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copy-hedge__example {
  padding: var(--s-2) var(--s-3);
  background: var(--ink-50);
  border-left: 2px solid var(--ink-200);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-800);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.copy-hedge__example:hover { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--ink-50)); }
.copy-hedge__example .mute {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
}

/* TEMPLATES ───────────────────────────────────── */
.copy-template-bucket {
  margin-bottom: var(--s-8);
}
.copy-template-bucket__head {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: var(--rule-strong);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.copy-template-bucket__head .h3 { margin: 0; }
.copy-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
}
.copy-template {
  background: var(--paper);
  padding: 0;
}
.copy-template summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  display: grid;
  grid-template-columns: 3.5em 1fr auto;
  align-items: center;
  gap: var(--s-3);
  transition: background var(--t-fast) var(--ease-out);
}
.copy-template summary::-webkit-details-marker { display: none; }
.copy-template summary:hover { background: var(--ink-50); }
.copy-template[open] summary { background: var(--ink-50); border-bottom: 1px dashed var(--ink-200); }
.copy-template__count {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 1rem;
}
.copy-template__sig {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-900);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copy-template__chev {
  color: var(--ink-400);
  font-size: 1.25em;
  line-height: 1;
  font-family: var(--font-serif);
  transition: transform 140ms ease-out, color 140ms ease-out;
  display: inline-block;
}
.copy-template[open] .copy-template__chev {
  transform: rotate(90deg);
  color: var(--accent);
}
.copy-template__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--s-3) var(--s-4);
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  color: var(--ink-700);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
}
.copy-template__copy-btn:hover {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.copy-template__copy-btn.is-copied {
  background: var(--success);
  color: var(--paper);
  border-color: var(--success);
}

.copy-template__examples {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0;
  background: var(--ink-100);
}
.copy-template__example {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-4);
  background: var(--paper);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-800);
}
.copy-template__example:hover { background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.copy-template__example .mute {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-500) !important;
  font-weight: 600;
}

/* FIRM FINGERPRINTS ───────────────────────────── */
.copy-firms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.copy-firm {
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: var(--rule-soft);
}
.copy-firm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-soft);
  margin-bottom: var(--s-3);
}
.copy-firm__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: var(--tracking-heading);
}
.copy-firm__n { font-variant-numeric: tabular-nums; }
.copy-firm__words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}
.copy-firm__word {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink-800);
  padding: 2px 6px;
  border-bottom: 1px dashed var(--ink-300);
  transition: color 120ms, border-color 120ms;
}
.copy-firm__word:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}

/* responsive ─ */
@media (max-width: 860px) {
  .copy-anatomy-grid { grid-template-columns: 1fr; }
  .copy-openers { grid-template-columns: 1fr; }
}

/* footer-next block ─ */
.copy-footer-next {
  padding: var(--s-6) var(--s-8);
  border: 2px dashed var(--ink-200);
  background: var(--paper);
  max-width: 800px;
}

/* ═══ /copy pass-2: Do&Don't · Callout · Quote wall ═══════════════ */

/* DO & DON'T ────────────────────────────────── */
.copy-dd-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  margin-right: 4px;
}
.copy-dd-dot--good { background: var(--success); }
.copy-dd-dot--bad  { background: var(--accent); }

.copy-dd-group { margin-bottom: var(--s-8); }
.copy-dd-group__label {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: var(--rule-strong);
  font-family: var(--font-serif);
}
.copy-dd-pairs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.copy-dd-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.copy-dd {
  background: var(--paper);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 1px solid var(--ink-200);
  transition: box-shadow 140ms ease-out, border-color 140ms ease-out;
}
.copy-dd:hover { box-shadow: var(--shadow-hover); }
.copy-dd--good { border-left: 3px solid var(--success); }
.copy-dd--bad  { border-left: 3px solid var(--accent); }
.copy-dd--good:hover { border-left-color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--ink-200)); }
.copy-dd--bad:hover  { border-left-color: var(--accent);  border-color: color-mix(in srgb, var(--accent) 30%, var(--ink-200)); }

.copy-dd__tag {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  color: var(--ink-700);
}
.copy-dd--good .copy-dd__tag { color: var(--success); }
.copy-dd--bad  .copy-dd__tag { color: var(--accent); }
.copy-dd__q {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink-950);
  font-style: italic;
  margin: 0;
}
.copy-dd__cite { font-variant-numeric: tabular-nums; }
.copy-dd__cite strong { color: var(--ink-900); font-weight: 600; }

@media (max-width: 760px) {
  .copy-dd-pair { grid-template-columns: 1fr; }
}


/* QUOTE WALL ─────────────────────────────────── */
.copy-quote-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--ink-150);
  border: var(--rule-soft);
  margin-bottom: var(--s-6);
}
.copy-quote-kind {
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid var(--ink-300);
}
.copy-quote-kind--exec     { border-top-color: var(--accent); }
.copy-quote-kind--press    { border-top-color: var(--blue-editorial); }
.copy-quote-kind--research { border-top-color: #8A7C6C; }
.copy-quote-kind--academic { border-top-color: #7E6F95; }
.copy-quote-kind--other    { border-top-color: var(--ink-300); }
.copy-quote-kind--unattributed { border-top-color: var(--ink-200); }

.copy-quote-kind__n {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.copy-quote-kind__label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-heading);
}
.copy-quote-kind__blurb { line-height: 1.4; }

.copy-quote-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.copy-quote {
  background: var(--paper);
  padding: var(--s-4) var(--s-5);
  border: var(--rule-soft);
  border-top: 3px solid var(--ink-300);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
.copy-quote:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.copy-quote--exec     { border-top-color: var(--accent); }
.copy-quote--press    { border-top-color: var(--blue-editorial); }
.copy-quote--research { border-top-color: #8A7C6C; }
.copy-quote--academic { border-top-color: #7E6F95; }
.copy-quote--other    { border-top-color: var(--ink-300); }
.copy-quote--unattributed { border-top-color: var(--ink-200); }

.copy-quote__q {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink-900);
  font-style: italic;
  margin: 0;
  /* mild hanging quote */
  text-indent: -0.25em;
}
.copy-quote__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  padding-top: var(--s-2);
  border-top: 1px solid var(--ink-150);
}
.copy-quote__source {
  font-weight: 600;
  color: var(--ink-800);
  font-style: normal;
  line-height: 1.3;
}


/* FOOTER remove — was the "coming next" placeholder, now replaced */
.copy-footer-next { display: none; }

/* ═══ /review — outlier queue ═════════════════════════════════════ */
.review-stats {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}
.review-stat {
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink-200);
  border-top: 3px solid var(--ink-400);
  background: var(--paper);
  min-width: 120px;
}
.review-stat--pending    { border-top-color: var(--accent); }
.review-stat--confirmed  { border-top-color: var(--success); }
.review-stat--overridden { border-top-color: var(--blue-editorial); }

.review-stat__n {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink-950);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.review-stat__label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  color: var(--ink-500);
  margin-top: 4px;
}

.review-filter-bar { margin-bottom: var(--s-5); }

.review-list { display: flex; flex-direction: column; gap: var(--s-4); }

.review-item {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-left: 4px solid var(--ink-400);
  padding: var(--s-4) var(--s-5);
}
.review-item--rare_function_for_type { border-left-color: #c9a56c; }
.review-item--intra_deck_inconsistency { border-left-color: var(--accent); }

.review-item__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px dashed var(--ink-150);
  flex-wrap: wrap;
}
.review-item__sev {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 56px; height: 16px;
  background: var(--ink-100);
  border-radius: 2px;
  overflow: hidden;
  font-size: var(--fs-micro);
  color: var(--ink-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.review-item__sev-bar {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: color-mix(in srgb, var(--accent) 50%, transparent);
}
.review-item__sev-n {
  position: relative;
  z-index: 1;
  padding: 0 6px;
}
.review-item__meta { flex: 1; font-size: var(--fs-small); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.review-item__meta strong { color: var(--ink-900); font-weight: 600; }
.review-item__kind {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  color: var(--ink-500);
}

.review-item__body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-5);
}
.review-item__slide {
  margin: 0;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  aspect-ratio: 16/10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-item__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.review-item__locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-500);
  font-size: var(--fs-small);
  padding: var(--s-3);
  text-align: center;
}

.review-item__details { display: flex; flex-direction: column; gap: var(--s-3); }
.review-item__deck-title {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink-900);
  font-size: 0.95rem;
}

.review-item__classif {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--fs-small);
}
.review-item__classif > div { display: inline-flex; align-items: center; gap: 6px; }
.review-item__pill {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  border-radius: 2px;
}
.review-item__pill--actual   { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); }
.review-item__pill--expected { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.review-item__val { font-variant-numeric: tabular-nums; color: var(--ink-900); }

.review-item__quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-900);
  line-height: 1.45;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--ink-200);
  background: var(--ink-50);
}
.review-item__quote--label { font-style: normal; font-weight: 600; }

.review-item__callout { line-height: 1.4; }
.review-item__reason  { line-height: 1.45; }

.review-item__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--ink-150);
}
.review-form { display: inline-flex; gap: 4px; align-items: stretch; }
.review-btn {
  padding: 6px 12px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  color: var(--ink-800);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
}
.review-btn--confirm:hover { background: var(--success); color: var(--paper); border-color: var(--success); }
.review-btn--override:hover { background: var(--blue-editorial); color: var(--paper); border-color: var(--blue-editorial); }
.review-select {
  padding: 6px 8px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  color: var(--ink-800);
  font: inherit;
  font-size: var(--fs-small);
  border-radius: 3px;
}

.review-item__resolved {
  padding: var(--s-2);
  background: var(--ink-50);
  border-left: 2px solid var(--ink-200);
  margin-top: var(--s-2);
}

@media (max-width: 780px) {
  .review-item__body { grid-template-columns: 1fr; }
  .review-item__slide { max-width: 320px; }
}

/* ─── Lightbox ──────────────────────────────────────────────────────── */
html.lightbox-open { overflow: hidden; }

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: clamp(16px, 4vw, 56px);
  animation: lightbox-fade 160ms ease-out;
}
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 22, 0.88);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 0;
  cursor: zoom-out;
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  max-height: calc(100vh - 160px);
  width: 100%;
}

.lightbox__img {
  max-width: min(1400px, 92vw);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}

.lightbox__locked {
  background: #fff;
  padding: 48px 56px;
  max-width: 420px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.lightbox__locked-icon { font-size: 28px; margin-bottom: 12px; }
.lightbox__locked-title {
  font: 600 18px/1.3 var(--font-serif);
  color: var(--ink-900);
  margin-bottom: 8px;
}
.lightbox__locked-body {
  font: 400 14px/1.55 var(--font-sans);
  color: var(--ink-600);
  margin: 0 0 20px;
}
.lightbox__locked-cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
  border-radius: 3px;
}
.lightbox__locked-cta:hover { background: var(--accent-dark); }

.lightbox__close,
.lightbox__nav {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 120ms, transform 120ms;
}
.lightbox__close:hover,
.lightbox__nav:hover { color: #fff; transform: scale(1.08); }

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 24px;
  font: 300 36px/1 var(--font-sans);
  padding: 4px 12px;
}

.lightbox__nav {
  font: 300 56px/1 var(--font-sans);
  padding: 16px 20px;
  line-height: 1;
}
.lightbox__nav[hidden] { visibility: hidden; display: block; }

.lightbox__caption {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
  max-width: min(720px, 90vw);
  text-align: center;
  color: #fff;
}
.lightbox__meta {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.lightbox__title[hidden] { display: none; }
.lightbox__title {
  font: 600 18px/1.35 var(--font-serif);
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.95);
}
.lightbox__permalink {
  display: inline-block;
  margin-top: 12px;
  font: 500 13px/1 var(--font-sans);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
}
.lightbox__permalink:hover { color: #fff; border-bottom-color: #fff; }

/* Thumbnails that open the lightbox: make the cursor hint + touch target
   explicit so users understand it's clickable. */
[data-lightbox] { cursor: zoom-in; }
[data-lightbox]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .lightbox { padding: 8px; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; padding: 10px; }
  .lightbox__nav--prev { left: 4px; } .lightbox__nav--next { right: 4px; }
  .lightbox__caption { bottom: 12px; }
}

/* Instant filters: the submit button is kept for JS-off fallback and Enter
   navigation but hidden visually. `clear` link is preserved. */
.browse-filters__submit-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.browse-filters__clear {
  color: var(--ink-500);
  text-decoration: none;
  font-size: var(--fs-small);
  padding: 0 var(--s-2);
  align-self: center;
}
.browse-filters__clear:hover { color: var(--accent); }

/* ─── unified focus-visible on clickable cards ──────────────────────── */
.deck-card:focus-visible,
.action-card:focus-visible,
.scorecard:focus-visible,
.drill-card:focus-visible,
.critique:focus-visible,
.firm-tile:focus-visible,
.catalog-slide:focus-visible,
.archetype-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── treemap legend ─── */
.treemap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
  font-size: var(--fs-small);
}
.treemap-legend__swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 20px;
  border-radius: 2px;
  background: var(--tile-bg, var(--ink-100));
  color: var(--tile-fg, var(--ink-900));
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
}
.treemap-legend__swatch::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}

/* ─── browse pagination ─── */
.browse-pagination {
  margin-top: var(--s-8);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
}
.browse-pagination__status {
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}
.browse-pagination__link {
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-300);
}
.browse-pagination__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── firm tile tier-1 featured row ─── */
.firms-grid--featured {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--s-6);
  gap: var(--s-3);
}
.firm-tile--featured {
  padding: var(--s-4) var(--s-5);
  background: var(--ink-50);
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.firm-tile--featured:hover { background: var(--paper); border-top-color: var(--ink-950); }
.firm-tile--featured .firm-tile__name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
}
.firm-tile__big {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: var(--s-2) 0 var(--s-1);
}
.firm-tile--featured .firm-tile__meta {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ─── mobile nav override (must come last to beat .topnav__right default) ─── */
@media (max-width: 720px) {
  .topnav__links,
  .topnav__right { display: none; }
  .topnav__toggle-input:checked ~ .topnav__links,
  .topnav__toggle-input:checked ~ .topnav__right {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: 100%;
    align-items: stretch;
    padding: var(--s-3) 0 var(--s-2);
    border-top: var(--rule-soft);
  }
  .topnav__toggle-input:checked ~ .topnav__links a {
    padding: var(--s-3) 0;
    font-size: 1rem;
    border-bottom: var(--rule-soft);
  }
  .topnav__more[open] > .topnav__more-menu,
  .topnav__toggle-input:checked ~ .topnav__links .topnav__more-menu {
    position: static;
    box-shadow: none;
    background: transparent;
    padding: var(--s-2) 0 0 var(--s-4);
  }
}

/* ─── /critiques v2 (lens tabs + histogram + filters + rows + pager) ─── */
.section--tight { padding: var(--s-5) 0; }

/* lens tabs */
.lens-tabs {
  display: inline-flex;
  border: var(--rule-soft);
  background: var(--paper);
  margin-bottom: var(--s-5);
  overflow: hidden;
}
.lens-tab {
  padding: var(--s-2) var(--s-5);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink-700);
  border-right: var(--rule-soft);
  letter-spacing: 0.01em;
}
.lens-tab:last-child { border-right: none; }
.lens-tab:hover { background: var(--ink-50); color: var(--ink-950); }
.lens-tab.is-active {
  background: var(--ink-950);
  color: var(--paper);
}
.lens-tab.is-active:hover { background: var(--ink-950); color: var(--paper); }

/* histogram */
.crit-hist { max-width: 720px; }
.crit-hist__bars {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  height: 110px;
  align-items: end;
}
.crit-hist__bars { border-bottom: 1px solid var(--ink-300); }
.crit-hist__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  background: var(--ink-50);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.crit-hist__bar:hover { background: var(--ink-100); }
.crit-hist__bar.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.crit-hist__fill {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--ink-300);
  transition: background var(--t-fast) var(--ease-out);
}
.crit-hist__bar--bad  .crit-hist__fill { background: color-mix(in srgb, var(--accent) 70%, var(--ink-300)); }
.crit-hist__bar--mid  .crit-hist__fill { background: #C58A2E; }
.crit-hist__bar--good .crit-hist__fill { background: var(--success); }
.crit-hist__n {
  position: absolute;
  top: -16px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}
.crit-hist__axis {
  position: relative;
  height: 14px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.crit-hist__axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.crit-hist__axis span:first-child { transform: translateX(0); }
.crit-hist__axis span:last-child  { transform: translateX(-100%); }
.crit-hist__caption { margin-top: var(--s-2); }

/* filter strip */
.crit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: end;
  padding: var(--s-4);
  background: var(--ink-50);
  border: var(--rule-soft);
}
.crit-filter { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.crit-filter--grow { flex: 1 1 240px; }
.crit-filter select,
.crit-filter input[type="search"] {
  padding: 6px 10px;
  border: var(--rule-soft);
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink-950);
  min-height: 34px;
}
.crit-filter input[type="search"]:focus,
.crit-filter select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.crit-filters .btn--primary {
  padding: 6px 14px;
  background: var(--ink-950);
  color: var(--paper);
  border: 1px solid var(--ink-950);
  font-weight: 600;
  font-size: var(--fs-small);
  min-height: 34px;
}
.crit-filters .btn--primary:hover { background: var(--accent); border-color: var(--accent); }

.crit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.crit-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--fs-small);
  background: var(--paper);
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  color: var(--ink-700);
}
.crit-pill:hover { border-color: var(--accent); color: var(--accent); }
.crit-pill--clear { border-style: dashed; color: var(--ink-500); }

/* picks */
.crit-picks {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--s-6);
}
.crit-pick { min-width: 0; }
.crit-pick .h3 {
  font-size: 1rem;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.crit-pick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-family: var(--font-serif);
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 0.85rem;
}
.crit-picklist { list-style: none; margin: 0; padding: 0; }
.crit-picklist li { border-top: var(--rule-soft); }
.crit-picklist li:first-child { border-top: none; }
.crit-picklist a {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
  font-size: var(--fs-small);
}
.crit-picklist a:hover { color: var(--accent); }
.crit-picklist__score {
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}
.crit-picklist__score--good { color: var(--success); }
.crit-picklist__score--mid  { color: #C58A2E; }
.crit-picklist__score--bad  { color: var(--accent); }
.crit-picklist__title {
  font-family: var(--font-serif);
  color: var(--ink-950);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crit-verdicts { list-style: none; margin: 0; padding: 0; }
.crit-verdicts li { padding: var(--s-3) 0; border-top: var(--rule-soft); }
.crit-verdicts li:first-child { border-top: none; }
.crit-verdicts a { display: block; }
.crit-verdicts em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-950);
  font-size: 0.95rem;
  line-height: 1.45;
  display: block;
}
.crit-verdicts .small { display: block; margin-top: 4px; }
.crit-verdicts a:hover em { color: var(--accent); }

/* rows */
.crit-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.crit-row {
  display: grid;
  grid-template-columns: 76px 56px 1fr;
  gap: var(--s-4);
  align-items: stretch;
  padding: var(--s-4);
  background: var(--paper);
  border: var(--rule-soft);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.crit-row:hover {
  border-color: var(--ink-500);
  box-shadow: var(--shadow-hover);
}
.crit-row__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border-right: var(--rule-soft);
  padding-right: var(--s-3);
  color: var(--ink-700);
}
.crit-row__score--good { color: var(--success); }
.crit-row__score--mid  { color: #C58A2E; }
.crit-row__score--bad  { color: var(--accent); }
.crit-row__score--n\/a { color: var(--ink-300); }
.crit-row__score-lbl {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}
.crit-row__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  align-items: end;
  height: 100%;
  min-height: 56px;
  padding: 4px 0;
}
.crit-row__bar {
  display: block;
  width: 100%;
  background: var(--ink-300);
  min-height: 2px;
}
.crit-row__bar--good { background: var(--success); }
.crit-row__bar--mid  { background: #C58A2E; }
.crit-row__bar--bad  { background: var(--accent); }
.crit-row__bar--n\/a { background: var(--ink-150); }
.crit-row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crit-row__meta {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}
.crit-row__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink-950);
  font-size: 1rem;
  line-height: 1.3;
}
.crit-row__verdict {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-700);
  font-size: 0.95rem;
  line-height: 1.4;
}
.crit-row__hint {
  font-size: var(--fs-small);
  color: var(--ink-700);
  margin-top: 2px;
}
.crit-row__hint--bad  { color: color-mix(in srgb, var(--accent) 75%, var(--ink-700)); }
.crit-row__hint--good { color: color-mix(in srgb, var(--success) 80%, var(--ink-700)); }

/* pagination */
.crit-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--s-6);
}
.crit-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 12px;
  border: var(--rule-soft);
  background: var(--paper);
  font-size: var(--fs-small);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.crit-pager__btn:hover { border-color: var(--accent); color: var(--accent); }
.crit-pager__btn.is-current {
  background: var(--ink-950);
  color: var(--paper);
  border-color: var(--ink-950);
  font-weight: 600;
}
.crit-pager__btn.is-disabled {
  color: var(--ink-300);
  pointer-events: none;
  background: var(--ink-50);
}
.crit-pager__ellipsis { color: var(--ink-500); font-size: var(--fs-small); padding: 0 2px; }

/* suggestion-verb cloud */
.crit-svcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  padding: var(--s-4) 0;
  line-height: 1.4;
}
.crit-svtag {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink-700);
  text-transform: lowercase;
}
.crit-svtag:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crit-svtag.is-active {
  color: var(--paper);
  background: var(--accent);
  padding: 2px 10px;
}
.crit-svtag.is-active .crit-svtag__n { color: var(--paper); opacity: 0.85; }
.crit-svtag__n {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

@media (max-width: 880px) {
  .crit-picks { grid-template-columns: 1fr; }
  .crit-row { grid-template-columns: 64px 44px 1fr; }
  .crit-hist__bars { height: 84px; }
}

/* ─── Learn band on the homepage + Learn button in the topnav ──────
   The Learn product is the corpus's editorial counterpart, so it gets
   editorial chrome — full-bleed band, serif headline, stat row that
   mirrors the hero's stat row, and two CTAs (one filled, one ghost).
   The topnav exposes a single "Learn →" pill on the right rail so the
   primary action survives even when the user is deep in /browse,
   /arcs, /critiques, etc. */

.learn-band {
  margin-top: calc(var(--s-8) * -1);
  padding: var(--s-10) 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, var(--paper)) 0%,
    var(--paper) 100%);
  border-top: 1px solid var(--ink-150);
  border-bottom: 1px solid var(--ink-150);
}

.learn-band__head { max-width: 64ch; }

.learn-band__eyebrow {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.learn-band__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-display);
  margin: 0 0 var(--s-4);
  max-width: 22ch;
}

.learn-band__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  max-width: 60ch;
}

.learn-band__stats {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-150);
}

.learn-band__stat {
  display: block;
  padding: var(--s-3) 0;
  color: var(--ink-950);
  text-decoration: none;
  border-radius: 4px;
  transition: transform .15s ease, color .15s ease;
}
.learn-band__stat:hover {
  color: var(--accent);
  transform: translateY(-1px);
}

.learn-band__stat-value {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.learn-band__stat-label {
  margin-top: 6px;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}

.learn-band__actions {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.learn-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.learn-band__cta span { transition: transform .15s ease; }
.learn-band__cta:hover span { transform: translateX(3px); }

.learn-band__cta--primary {
  background: var(--accent);
  color: var(--paper);
}
.learn-band__cta--primary:hover {
  background: var(--accent-dark);
  color: var(--paper);
}

.learn-band__cta--ghost {
  background: transparent;
  color: var(--ink-950);
  border: 1px solid var(--ink-300);
}
.learn-band__cta--ghost:hover {
  border-color: var(--ink-950);
  color: var(--ink-950);
}

@media (max-width: 880px) {
  .learn-band { padding: var(--s-8) 0; }
  .learn-band__stats {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--s-4);
  }
}
@media (max-width: 520px) {
  .learn-band__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Topnav Learn button ──────────────────────────────────────── */
.topnav__learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 16px;
  margin-right: var(--s-3);
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.topnav__learn:hover {
  background: var(--accent-dark);
  color: var(--paper);
  transform: translateY(-1px);
}
.topnav__learn-arrow {
  transition: transform .15s ease;
  display: inline-block;
}
.topnav__learn:hover .topnav__learn-arrow { transform: translateX(2px); }
.topnav__learn.is-active {
  background: var(--ink-950);
  color: var(--paper);
}

@media (max-width: 720px) {
  .topnav__learn { padding: 6px 12px; }
  .topnav__learn-label { font-size: 0.82rem; }
}