/* ============================================================
   RESEARCH — listing + publication templates
   ============================================================ */

/* ---------- Page hero (compact, non-homepage) ---------- */
.page-hero {
  padding-block: clamp(4rem, 8vw, 7rem) var(--space-9);
  background: var(--ls-navy-900);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -10%;
  top: -20%;
  width: 520px; height: 600px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid rgba(127, 225, 212, 0.14);
  pointer-events: none;
}
.page-hero .eyebrow { color: var(--ls-teal-400); }
.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: var(--fw-regular);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
  color: var(--ls-white);
  margin-top: var(--space-4);
}
.page-hero .lead {
  color: var(--color-text-inverse-muted);
  margin-top: var(--space-5);
  max-width: 62ch;
}
.page-hero .breadcrumb {
  color: var(--color-text-inverse-muted);
  margin-bottom: var(--space-5);
}
.page-hero .breadcrumb a { color: var(--color-text-inverse-muted); }
.page-hero .breadcrumb a:hover { color: var(--ls-teal-400); }

/* ---------- Filter bar ---------- */
.filter-bar {
  position: sticky;
  top: 78px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 10;
  padding-block: var(--space-4);
}
.filter-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: var(--space-2); }
.filter-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.filter-select {
  appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.85rem;
  font-size: var(--fs-sm);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356564F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
}
.filter-select:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filter-count {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------- Publication listing ---------- */
.pub-list {
  padding-block: var(--section-y);
}
.pub-list__featured { margin-bottom: var(--space-10); }

.pub-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}
@media (max-width: 900px) { .pub-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pub-list__grid { grid-template-columns: 1fr; } }

.pub-list__pagination {
  margin-top: var(--space-9);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.page-btn {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
}
.page-btn:hover { border-color: var(--ls-navy-900); text-decoration: none; }
.page-btn[aria-current="page"] {
  background: var(--ls-navy-900);
  color: var(--ls-white);
  border-color: var(--ls-navy-900);
}

/* ---------- Publication cover thumbnails ---------- */
/* Cover image (PDF page 1) fills the card media area.
   object-position top keeps titles visible at any aspect ratio. */
.card__media--cover {
  background: var(--ls-neutral-100, #f2efe8);
}
.card__media--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.card--feature .card__media--cover {
  aspect-ratio: 4 / 5;
  flex: 0 0 40%;
  max-width: 420px;
}
.card--feature .card__media--cover img {
  object-fit: contain;
  background: var(--ls-neutral-100, #f2efe8);
  padding: var(--space-5);
}
@media (max-width: 900px) {
  .card--feature .card__media--cover {
    aspect-ratio: 16 / 10;
    max-width: none;
    flex: none;
  }
  .card--feature .card__media--cover img {
    object-fit: cover;
    padding: 0;
  }
}

/* External commentary tiles (no cover image available) —
   outlet-branded text treatment. */
.ext-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-6);
  color: var(--ls-white);
  background: var(--ls-navy-900);
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.ext-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 14px
  );
  pointer-events: none;
}
.ext-cover__source {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ls-teal-300, #7fe1d4);
  position: relative;
  z-index: 1;
}
.ext-cover__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--ls-white);
  position: relative;
  z-index: 1;
}
.ext-cover--compass { background: #0b2c3d; }
.ext-cover--ni { background: #5a1e20; }
.ext-cover--ni .ext-cover__source { color: #e8b47a; }

/* ---------- Publication detail page ---------- */
.publication {
  padding-block: var(--space-8) var(--section-y);
}

.publication__header {
  /* Align flush-left with the prose column (skips the left TOC column width + gap)
     and extend to the right edge of the container, rather than sitting centered. */
  max-width: none;
  margin-inline: 0;
  margin-left: calc(220px + clamp(1.5rem, 3vw, 3rem));
  padding-right: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: var(--space-9);
}
@media (max-width: 1100px) {
  .publication__header {
    margin-left: calc(220px + clamp(1rem, 2vw, 1.5rem));
    padding-right: 0;
  }
}
@media (max-width: 900px) {
  .publication__header {
    margin-left: 0;
    padding-right: 0;
  }
}
.publication__breadcrumb { margin-bottom: var(--space-6); }
.publication__badges {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.publication__title {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
}
.publication__subtitle {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  margin-top: var(--space-3);
}
.publication__abstract {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--color-text);
  margin-top: var(--space-6);
  max-width: none;
}

.publication__meta-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.publication__authors {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.publication__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ls-teal-500), var(--ls-teal-300));
  flex-shrink: 0;
}
.publication__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Publication body layout (article + TOC + sidenote gutter) ---------- */
.publication__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
  max-width: none;
  margin-inline: 0;
  align-items: start;
}
@media (max-width: 1100px) {
  .publication__layout {
    grid-template-columns: 220px minmax(0, 1fr);
    max-width: none;
  }
}
@media (max-width: 900px) { .publication__layout { grid-template-columns: 1fr; } }

/* Let prose fill the middle grid column rather than cap at container-narrow */
.publication__layout .prose { max-width: none; }

/* Right-column home for the sticky PDF CTA (and future share rail) */
.publication__sidenote-col {
  position: relative;
}

/* Sticky Download-PDF CTA that tracks the reader down the article */
.pub-aside {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
}
.pub-aside__card {
  background: var(--ls-teal-050, #eef6f6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pub-aside__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pub-aside__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  line-height: 1.35;
  margin: 0;
}
.pub-aside__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.pub-aside__btn {
  width: 100%;
  justify-content: center;
}
.pub-aside__share {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.pub-aside__share-label {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.pub-aside__share-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ls-navy-900);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pub-aside__share-btn:hover {
  background: var(--ls-navy-900);
  color: var(--ls-white, #fff);
}
.pub-aside__share-btn svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .publication__sidenote-col { display: none; }
}

.toc {
  position: sticky;
  top: 110px;
  font-size: var(--fs-sm);
  padding: var(--space-4) 0;
  border-left: 1px solid var(--color-border);
}
.toc__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  margin-bottom: var(--space-4);
}
.toc__list { list-style: none; }
.toc__list a {
  display: block;
  padding: var(--space-2) var(--space-4);
  margin-left: -1px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.toc__list a:hover { color: var(--color-text); }
.toc__list a.is-active {
  color: var(--color-text);
  border-left-color: var(--ls-teal-500);
  font-weight: var(--fw-medium);
}
.toc__list--sub { padding-left: var(--space-4); font-size: 0.9em; }
.toc__list--sub a { padding-block: 0.25rem; }

@media (max-width: 900px) {
  .toc {
    position: static;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }
  .toc__label { padding-left: 0; }
  .toc__list a { padding-inline: 0; border-left: 0; }
}

/* ---------- Reading progress bar (fixed top of viewport) ---------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}
.read-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--ls-teal-500) 0%,
    var(--ls-teal-400) 60%,
    var(--ls-teal-300) 100%
  );
  transform-origin: left center;
  transition: width 60ms linear;
  box-shadow: 0 0 12px rgba(34, 194, 181, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .read-progress__bar { transition: none; }
}

/* ---------- IFP-style margin sidenotes ---------- */
.fn-ref {
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: var(--fw-semibold);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
}
.fn-ref a {
  color: var(--ls-teal-600);
  text-decoration: none;
  padding: 0 0.2em;
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast) var(--ease-out);
}
.fn-ref a:hover,
.fn-ref a:focus-visible {
  background: var(--ls-teal-100);
  color: var(--ls-teal-600);
}

/* Sidenotes are hidden on publication pages — the page uses endnotes only.
   Sup fn-ref links still jump to #fn-N at the bottom. */
.sidenote {
  display: none !important;
}

/* ---------- Publication figure images (rasterized from PDFs) ---------- */
.prose__figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--ls-white, #fff);
}

/* Cover photo variant — full color, 16:9 crop so tall photos don't
   dominate the article flow */
.prose__figure-img--cover {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
  object-fit: cover;
}

/* Multi-panel figure: stacked full-width panels, caption below the stack */
.prose__figure--multi .prose__figure-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.prose__figure--multi .prose__figure-row .prose__figure-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--ls-white, #fff);
  border: 1px solid var(--ls-gray-200, #e6e6e6);
  border-radius: var(--radius-sm);
}
.prose__figure-panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.prose__figure-panel-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ls-gray-700);
  line-height: var(--lh-snug);
}
.prose__figure-panel-label strong {
  color: var(--ls-navy-900);
}
/* Placeholder slot for an unfilled panel in a multi-panel figure */
.prose__figure-slot {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ls-teal-050, #eef6f6);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* ---------- Stat callout grid ---------- */
.stat-callout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-7);
}
.stat-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--ls-teal-050);
  border-left: 3px solid var(--ls-teal-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-sans);
}
.stat-callout__num {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
}
.stat-callout__text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.4;
}

/* ---------- Brand table (prose figure tables) ---------- */
.prose__table-figure {
  margin-block: var(--space-8);
}
.prose__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--ls-white, #fff);
}
.prose__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ls-navy-900);
}
.prose__table thead th {
  background: var(--ls-navy-900);
  color: #fff;
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-5);
  vertical-align: top;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.prose__table thead th:last-child { border-right: 0; }
.prose__table tbody td {
  padding: var(--space-5);
  vertical-align: top;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.prose__table tbody td:last-child { border-right: 0; }
.prose__table tbody tr:nth-child(even) td { background: var(--ls-teal-050); }
.prose__table tbody th {
  padding: var(--space-5);
  vertical-align: top;
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-left: 3px solid var(--ls-teal-500);
  background: var(--ls-white, #fff);
  width: 22%;
  min-width: 180px;
}
.prose__table tbody tr:nth-child(even) th { background: var(--ls-teal-050); }
.prose__table tbody th small {
  display: block;
  margin-top: var(--space-2);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--ls-gray-700);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Footnotes ---------- */
.footnotes {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  counter-reset: footnote;
}
.footnotes__heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.footnotes ol { padding-left: 1.5em; }
.footnotes li { margin-bottom: var(--space-3); }

/* ---------- Key finding callout ---------- */
.key-finding {
  margin-block: var(--space-7);
  padding: var(--space-7);
  background: var(--ls-teal-050);
  border-left: 4px solid var(--ls-teal-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-sans);
}
.key-finding__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ls-teal-600);
  margin-bottom: var(--space-3);
}
.key-finding__text {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ls-navy-900);
}
.key-finding > h3,
.key-finding > h4,
.prose .key-finding > h3,
.prose .key-finding > h4 {
  margin: 0 0 var(--space-6) 0 !important;
}
.key-finding > h3 + ol,
.key-finding > h3 + ul,
.key-finding > h4 + ol,
.key-finding > h4 + ul,
.key-finding > p:first-child + ol,
.key-finding > p:first-child + ul {
  margin-top: var(--space-4);
}
.key-finding > ol > li + li,
.key-finding > ul > li + li {
  margin-top: var(--space-3);
}

/* ---------- Author bio (bottom of publication) ---------- */
.author-bio {
  margin-top: var(--space-10);
  padding: var(--space-7);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-5);
  font-family: var(--font-sans);
}
.author-bio__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ls-teal-500), var(--ls-teal-300));
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}
.author-bio__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-bio__name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.author-bio__title { color: var(--color-text-muted); font-size: var(--fs-sm); }
.author-bio__body { margin-top: var(--space-3); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-text); }

/* Stack of author bios at end of publication */
.author-bio-group {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.author-bio-group .author-bio { margin-top: 0; }

/* Compact author card: avatar + name only, links to /team/#bio-... */
.author-bio-group--compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.author-bio--compact {
  margin-top: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  transition: background 120ms ease, border-color 120ms ease;
}
.author-bio--compact:hover,
.author-bio--compact:focus-visible {
  background: var(--ls-teal-050, #eef6f6);
  border-color: var(--ls-teal-500);
}
.author-bio--compact .author-bio__avatar {
  width: 48px;
  height: 48px;
}
.author-bio--compact .author-bio__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

/* ---------- Related publications ---------- */
.related {
  margin-top: var(--section-y);
  padding-top: var(--space-9);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   TOPIC HUB PAGES
   (/research/housing/, /research/employee-ownership/, etc.)
   ============================================================ */

/* Topic accent — switch per topic by setting data-topic on the page wrapper */
.topic-hub {
  --topic-accent: var(--topic-housing);
  --topic-accent-soft: var(--ls-teal-050);
}
.topic-hub[data-topic="housing"] {
  --topic-accent: var(--topic-housing);
  --topic-accent-soft: var(--ls-teal-050);
}
.topic-hub[data-topic="employee-ownership"] {
  --topic-accent: var(--topic-employee-ownership);
  --topic-accent-soft: var(--ls-gray-050);
}
/* Chartreuse accent appears only on the EO stat cards. */
.topic-hub[data-topic="employee-ownership"] .topic-stat {
  border-left-color: var(--ls-chartreuse-500);
}
.topic-hub[data-topic="employee-ownership"] .topic-stat__number {
  color: var(--ls-chartreuse-500);
}
.topic-hub[data-topic="job-quality"] {
  --topic-accent: var(--topic-job-quality);
  --topic-accent-soft: var(--ls-purple-100);
}
/* Purple accent on Job Quality hero eyebrow, stat cards, and topic motifs */
.topic-hub[data-topic="job-quality"] .topic-hero__eyebrow,
.topic-hub[data-topic="job-quality"] .page-hero .eyebrow,
.topic-hub[data-topic="job-quality"] .page-hero .breadcrumb a:hover,
.topic-hub[data-topic="job-quality"] .page-hero .breadcrumb [aria-current] {
  color: var(--ls-purple-300);
}
.topic-hub[data-topic="job-quality"] .topic-stat {
  border-left-color: var(--ls-purple-500);
}
.topic-hub[data-topic="job-quality"] .topic-stat__number {
  color: var(--ls-purple-500);
}
.topic-hub[data-topic="job-quality"] .page-hero::after {
  border-color: rgba(139, 61, 250, 0.30);
}

/* ---------- Topic hero extensions ---------- */
.topic-hero {
  padding-block: clamp(5rem, 10vw, 8rem) clamp(4rem, 8vw, 6rem);
}
.topic-hero h1 {
  max-width: 26ch;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}
.topic-hero .lead {
  max-width: 58ch;
}
.topic-hero__eyebrow {
  color: var(--ls-teal-400);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
}
.topic-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Light-on-dark ghost button variant used in dark heroes */
.btn--ghost-light {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.btn--ghost-light:hover {
  border-color: var(--ls-teal-400);
  color: var(--ls-teal-400);
  background: rgba(34, 194, 181, 0.08);
}

/* ---------- Stats band ---------- */
.topic-stats {
  background: var(--ls-navy-800);
  color: var(--color-text-inverse);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topic-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .topic-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .topic-stats__grid { grid-template-columns: 1fr; }
}
.topic-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--topic-accent);
}
.topic-stat__number {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--ls-white);
}
.topic-stat__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  max-width: 28ch;
}
.topic-stat__source {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-2);
}

/* ---------- Our view ---------- */
.topic-view {
  padding-block: var(--section-y-lg);
}
.topic-view__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin-top: var(--space-4);
  margin-bottom: var(--space-7);
}
.topic-view__body p + p { margin-top: 1.2em; }

/* ---------- Sub-priorities ---------- */
.topic-priorities {
  padding-block: var(--section-y);
  background: var(--color-bg-subtle);
}
.topic-priorities__header {
  max-width: 48ch;
  margin-bottom: var(--space-8);
}
.topic-priorities__header h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-3);
}
.topic-priorities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 1000px) {
  .topic-priorities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topic-priorities__grid { grid-template-columns: 1fr; }
}
.priority-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  height: 100%;
}
.priority-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--topic-accent);
  margin-bottom: var(--space-5);
}
.priority-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.priority-card__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  flex: 1;
}
.link-arrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ls-navy-900);
  text-decoration: none;
  border-bottom: 1px solid var(--topic-accent);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow::after { content: ' \2192'; }
.link-arrow:hover { color: var(--ls-teal-600); }

/* ---------- Featured flagship publication ---------- */
.topic-featured {
  padding-block: var(--section-y);
}
.topic-featured__header {
  margin-bottom: var(--space-7);
}
.card--feature-lg .card__title--lg {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* ---------- Cross-pillar modules ---------- */
.cross-pillar {
  padding-block: var(--section-y);
  background: var(--ls-navy-900);
  color: var(--color-text-inverse);
}
.cross-pillar__header {
  max-width: 58ch;
  margin-bottom: var(--space-8);
}
.cross-pillar__header h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--ls-white);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.cross-pillar__header .lead {
  color: var(--color-text-inverse-muted);
}
.cross-pillar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 800px) {
  .cross-pillar__grid { grid-template-columns: 1fr; }
}

.companion {
  display: block;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-inverse);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.companion:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  text-decoration: none;
}
.companion--tool { border-top: 3px solid var(--pillar-technology); }
.companion--coalition { border-top: 3px solid var(--pillar-initiatives); }

.companion__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
  margin-bottom: var(--space-4);
}
.companion--tool .companion__tag { color: var(--pillar-technology); }
.companion--coalition .companion__tag { color: var(--pillar-initiatives); }

.companion__title {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--ls-white);
  margin-bottom: var(--space-4);
}
.companion__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--space-5);
  max-width: 44ch;
}
.companion__cta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ls-teal-400);
}

/* ---------- Under-construction variant ---------- */
.companion--wip { pointer-events: none; position: relative; }
.companion--wip .companion__body { color: rgba(255, 255, 255, 0.60); }
.companion--wip .companion__cta {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.companion__status {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-3);
  padding: 2px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ls-navy-900);
  background: var(--ls-teal-400);
  border-radius: 999px;
  line-height: 1.6;
}

/* ---------- Contributors ---------- */
.topic-team {
  padding-block: var(--section-y);
}
.topic-team__header {
  margin-bottom: var(--space-8);
  max-width: 52ch;
}
.topic-team__header h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-3);
}
.topic-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .topic-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .topic-team__grid { grid-template-columns: 1fr; }
}
.team-card {
  padding: var(--space-5) 0;
}
.team-card__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ls-teal-500), var(--ls-teal-300));
  margin-bottom: var(--space-4);
}
.team-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin-bottom: 2px;
}
.team-card__title {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.team-card__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* ---------- Topic subscribe CTA ---------- */
.cta-block--topic {
  background: var(--topic-accent-soft);
  border-top: 4px solid var(--topic-accent);
  color: var(--ls-navy-900);
}
.cta-block--topic .eyebrow,
.cta-block--topic h2 {
  color: var(--ls-navy-900);
}
.cta-block--topic .lead {
  color: var(--ls-navy-900);
  opacity: 0.78;
}
/* Legacy alias retained */
.cta-block--housing {
  background: var(--ls-teal-050);
  border-top: 4px solid var(--topic-housing);
  color: var(--ls-navy-900);
}
.cta-block--housing .eyebrow,
.cta-block--housing h2,
.cta-block--housing h3 {
  color: var(--ls-navy-900);
}
.cta-block--housing .lead,
.cta-block--housing .cta-block__body {
  color: var(--ls-navy-900);
  opacity: 0.78;
}
.topic-cta .cta-block__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 800px) {
  .topic-cta .cta-block__inner { grid-template-columns: 1fr; }
}
.topic-cta h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.topic-cta .lead {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  max-width: 50ch;
}