:root {
  color-scheme: dark light;
  /* Unified onto the InstituteOS design-system token contract (instituteos-ds.css,
     linked before this file). The fallbacks keep the site styled even if the DS
     stylesheet is ever absent. This is how the website inherits the canonical
     brand — red #dc2626, the dashboard surfaces, and the editorial type. */
  --ink: var(--ds-text, #e5e5e5);
  --muted: var(--ds-text-muted, #999999);
  --soft: var(--ds-text, #e5e5e5);
  --paper: var(--ds-bg, #0a0a0a);
  --surface: var(--ds-surface, #151515);
  --surface-strong: var(--ds-surface-2, #2a2a2a);
  --line: var(--ds-glass-border, rgba(255, 255, 255, 0.08));
  --red: var(--ds-red, #dc2626);
  /* Accent for link/label text. Flips to brand red in light mode — see the
     html.theme-light override below — so it clears WCAG AA on both backgrounds. */
  --accent-text: var(--ds-red-light, #ef4444);
  /* Custom dark-red used only as a colored hover background (white text sits on
     it in both themes); intentionally not a DS token. */
  --red-deep: #2a0d0d;
  --shadow: var(--ds-shadow, 0 8px 32px rgba(0, 0, 0, 0.5));
  --radius: var(--ds-radius-sm, 10px);
  font-family: var(--ds-font-body,
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Accent text flips to the darker brand red in light mode so links and small
   labels clear WCAG AA on light backgrounds (light-red #ef4444 is only ~3.6:1
   there, while brand red #dc2626 is ~5:1). The DS handles surface/text flipping;
   this handles the one accent that needs a per-theme value. */
html.theme-light {
  --accent-text: var(--ds-red, #dc2626);
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

a {
  /* Theme-aware accent text (see --accent-text): light-red on the dark bg,
     brand red on the light bg — both clear WCAG AA. */
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Honor reduced-motion: neutralize smooth-scroll, transitions, and the design
   system's infinite spinner/shimmer animations for users who opt out. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  background: var(--surface-strong);
  color: var(--ink);
  padding: 0.75rem 1rem;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  /* Theme-aware translucent bar: tracks the page background in both light and
     dark so the (theme-flipping) brand/nav text never lands on a same-tone bar. */
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.site-header[data-scrolled] {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: max-content;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--red);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
}

.brand strong,
.brand em {
  display: block;
}

.brand strong {
  font-size: 0.98rem;
}

.brand em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.nav-group {
  position: relative;
}

.nav-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.nav-menu-button:hover,
.nav-group[data-open] .nav-menu-button {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}

.nav-menu-button span:last-child {
  color: var(--red);
}

.nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  min-width: 15rem;
  display: none;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.nav-group[data-open] .nav-menu,
.nav-group:focus-within .nav-menu {
  display: grid;
  gap: 0.15rem;
}

.nav-menu a {
  display: block;
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--red-deep);
  color: var(--ds-on-accent, #ffffff);
  outline: none;
}

.hero {
  min-height: min(78vh, 760px);
  display: grid;
  align-items: end;
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 5vw, 5rem);
  color: var(--ds-on-accent, #ffffff);
  /* The hero is always dark, so its accent text stays light-red in both themes
     (brand red is too dim on this dark gradient). Scoped override of the alias. */
  --accent-text: var(--ds-red-light, #ef4444);
  /* Intentionally theme-independent: the home hero is an always-dark showcase
     band with white text in both light and dark mode, so these stops are fixed
     dark values rather than (theme-flipping) surface tokens. */
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 1), rgba(5, 5, 5, 0.76)),
    linear-gradient(135deg, #050505 0%, #111111 58%, #1c1c1f 100%);
}

.hero-inner {
  width: min(760px, 100%);
}

.eyebrow {
  margin: 0 0 0.75rem;
  /* theme-aware accent (see --accent-text); tracking aids small-caps. */
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1,
.page-hero h1 {
  margin: 0;
  /* Editorial display serif (Fraunces) for hero headlines — matches the DS. */
  font-family: var(--ds-font-display, "Fraunces", Georgia, serif);
  font-size: clamp(2.6rem, 6.2vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
}

.hero-copy,
.page-hero p {
  max-width: 760px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.hero-actions,
.footer-links,
.social-links,
.mini-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.72rem 1rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-weight: 750;
  text-decoration: none;
  transition:
    filter var(--ds-motion, 200ms) var(--ds-ease, ease),
    background var(--ds-motion, 200ms) var(--ds-ease, ease),
    border-color var(--ds-motion, 200ms) var(--ds-ease, ease);
}

.button.primary {
  border-color: var(--red);
  background: var(--red);
  color: var(--ds-on-accent, #ffffff);
}

.button.secondary {
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
}

.button:hover {
  filter: brightness(1.06);
}

.metrics-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.metrics-band div {
  padding: clamp(1.1rem, 3vw, 2rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid transparent;
}

.metrics-band div:last-child {
  border-right: 0;
}

.metrics-band strong {
  display: block;
  color: var(--ink);
  /* Editorial display serif + tabular figures for the headline metrics. */
  font-family: var(--ds-font-display, "Fraunces", Georgia, serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.metrics-band span {
  color: var(--muted);
}

.content-band {
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem);
}

.content-band > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.content-band.muted {
  background: var(--paper);
}

.page-index-band {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-index {
  display: grid;
  grid-template-columns: minmax(200px, 0.35fr) 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.page-index h2 {
  margin: 0;
  font-size: 1.1rem;
}

.page-index nav,
.link-chips,
.category-nav,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.page-index nav a,
.link-chips a,
.category-nav a,
.mini-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--ink);
  text-decoration: none;
}

.page-index nav a:hover,
.link-chips a:hover,
.category-nav a:hover,
.mini-links a:hover,
.resource-card:hover,
.pager a:hover {
  border-color: var(--red);
  color: var(--ink);
}

.link-chips,
.mini-links {
  margin-top: 1rem;
}

.link-chips a {
  gap: 0.45rem;
}

.link-chips em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--soft);
}

.section-heading {
  margin-bottom: 2rem;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
}

.section-heading p:not(.eyebrow),
.lede {
  max-width: 860px;
  color: var(--muted);
  font-size: 1.12rem;
}

.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.feature-layout article {
  font-size: 1.14rem;
}

.feature-layout h3 {
  margin-top: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.action-panel {
  display: grid;
  gap: 0.75rem;
}

.action-panel a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.action-panel a:hover {
  border-color: var(--red);
}

.action-panel span {
  color: var(--muted);
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pathway-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.pathway-card > span,
.resource-kicker {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pathway-card h3 {
  margin: 0;
  font-size: 1.2rem;
}

.pathway-card p {
  margin: 0;
  color: var(--muted);
}

.interface-gate-home {
  background:
    radial-gradient(circle at 12% 0%, rgba(220, 38, 38, 0.18), transparent 34rem),
    linear-gradient(135deg, var(--surface), var(--paper));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gate-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gate-metric {
  display: grid;
  gap: 0.45rem;
  min-height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.gate-metric:hover {
  border-color: var(--red);
}

.gate-metric strong {
  font-family: var(--ds-font-display, "Fraunces", Georgia, serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 0.95;
}

.gate-metric span {
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gate-metric p {
  margin: 0;
  color: var(--muted);
}

.interface-gate-section {
  background: linear-gradient(180deg, var(--paper), var(--surface));
}

.gate-ladder,
.export-artifacts {
  display: grid;
  gap: 1rem;
}

.gate-ladder {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.gate-ladder article,
.export-snapshot,
.export-artifact {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.gate-ladder article {
  padding: 1.2rem;
}

.gate-ladder span {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--accent-text);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.gate-ladder h3,
.export-snapshot h3,
.export-artifact strong {
  margin: 0;
  color: var(--ink);
}

.gate-ladder p,
.export-snapshot p,
.export-artifact span,
.export-artifact em {
  color: var(--muted);
}

.gate-ladder p {
  margin-bottom: 0;
}

.export-snapshot {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) 1fr;
  gap: 1rem;
  padding: 1.25rem;
}

.export-snapshot h3 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.export-artifacts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.export-artifact {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem;
}

.export-artifact em {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-style: normal;
}

.next-action-band {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.next-action-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.next-action-panel h2,
.next-action-panel p {
  margin: 0;
}

.next-action-panel p:not(.eyebrow) {
  color: var(--muted);
}

.card-grid,
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card,
.resource-card,
.article-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.info-card,
.resource-card,
.article-block {
  padding: 1.25rem;
}

.info-card h3,
.resource-card h3,
.resource-card strong {
  color: var(--ink);
}

.info-card h3,
.resource-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.18rem;
  letter-spacing: 0;
}

.info-card p,
.resource-card p {
  margin-bottom: 0;
  color: var(--muted);
}

/* Link-card icons: a small accent badge to the left of the heading. The glyph
   inherits the brand red; the badge is a tinted rounded square. Inline SVG
   (CSP-safe, no external request). Cards without an icon are unaffected. */
.info-card .card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
}

.info-card .card-head h3 {
  margin: 0;
}

.card-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  color: var(--accent-text);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.32);
}

.info-card:hover .card-icon-badge {
  background: rgba(220, 38, 38, 0.2);
  border-color: var(--red);
}

.card-icon {
  display: block;
}

.resource-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.resource-card > span {
  display: block;
  margin-bottom: 0.45rem;
}

.resource-card h3 a {
  color: var(--ink);
  text-decoration-color: transparent;
}

.resource-card h3 a:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}

.resource-meta {
  color: var(--soft);
  font-size: 0.86rem;
}

.resource-audience {
  margin: 0 0 0.45rem;
  color: var(--soft);
  font-size: 0.86rem;
}

.tag-row {
  margin-top: 1rem;
  gap: 0.35rem;
}

.tag-row span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  margin: 0;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: none;
}

.section-link {
  max-width: 1180px;
  margin: 1.5rem auto 0;
}

.internal-card strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.page-hero {
  padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 5vw, 5rem);
  background: var(--paper);
  color: var(--ink);
}

.page-hero.compact {
  min-height: 34vh;
  display: grid;
  align-content: end;
}

.article-stack {
  display: grid;
  gap: 1rem;
}

.article-block h2 {
  margin-top: 0;
  letter-spacing: 0;
}

.resource-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(150px, 0.8fr)) max-content;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.knowledge-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.knowledge-brand-image {
  width: min(320px, 100%);
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.knowledge-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.35fr) max-content;
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.section-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.section-controls label {
  display: grid;
  gap: 0.35rem;
  min-width: min(280px, 100%);
  font-weight: 750;
}

.section-controls select {
  min-height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
}

.section-controls p {
  margin: 0;
  color: var(--muted);
}

.resource-tools label,
.knowledge-tools label {
  display: grid;
  gap: 0.35rem;
  font-weight: 750;
}

.resource-tools input,
.resource-tools select,
.knowledge-tools input,
.knowledge-tools select {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
}

.result-count {
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
}

.tag-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
}

.tag-filter-chips button {
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.45rem 0.65rem;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tag-filter-chips button:hover,
.tag-filter-chips button[aria-pressed="true"] {
  border-color: var(--red);
  color: var(--ds-on-accent, #ffffff);
  background: var(--red-deep);
}

.category-count {
  color: var(--soft);
  font-weight: 750;
}

.resource-category {
  scroll-margin-top: 7rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.resource-category:last-child {
  margin-bottom: 0;
}

.directory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.directory-entry {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.directory-entry h3 {
  margin-top: 0;
  letter-spacing: 0;
}

.directory-entry p {
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.directory-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.directory-table caption {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--soft);
  font-weight: 750;
  text-align: left;
}

.directory-table th,
.directory-table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.directory-table thead th {
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.84rem;
}

.directory-table tbody th {
  color: var(--ink);
  font-weight: 750;
  text-align: left;
}

.directory-table tr:last-child td {
  border-bottom: 0;
}

.directory-table td {
  color: var(--soft);
}

.directory-table td a {
  display: inline-block;
  margin-right: 0.45rem;
  margin-bottom: 0.25rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
}

.page-pager {
  padding-top: clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

.pager a {
  max-width: 48%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.site-footer p {
  max-width: 680px;
  color: var(--muted);
}

.footer-links,
.social-links {
  align-content: start;
  justify-content: flex-end;
}

.social-links {
  max-width: 320px;
}

.footer-links a,
.social-links a {
  color: var(--red);
}

@media (max-width: 960px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-group {
    position: static;
  }

  .nav-menu {
    left: 0;
    right: auto;
  }

  .metrics-band,
  .page-index,
  .feature-layout,
  .knowledge-hero-layout,
  .card-grid,
  .directory-list,
  .export-artifacts,
  .export-snapshot,
  .gate-home-grid,
  .gate-ladder,
  .pathway-grid,
  .next-action-panel,
  .resource-grid,
  .resource-tools,
  .knowledge-tools {
    grid-template-columns: 1fr;
  }

  .knowledge-brand-image {
    justify-self: start;
  }

  .result-count {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .hero,
  .page-hero {
    padding-top: 4rem;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 2.55rem;
  }

  .nav,
  .nav-group,
  .nav-menu-button {
    width: 100%;
  }

  .nav-menu-button {
    justify-content: space-between;
  }

  .nav-menu {
    position: static;
    width: 100%;
    margin-top: 0.35rem;
  }

  .pager {
    flex-direction: column;
  }

  .pager a {
    max-width: none;
  }
}
.build-stamp{margin-top:1.5rem;font-size:.75rem;opacity:.55;letter-spacing:.02em}

/* Global site search (header) */
.site-search{position:relative;margin-left:auto;flex:0 1 15rem;max-width:15rem}
.site-search input{width:100%;padding:.5rem .75rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:inherit;font:inherit}
.site-search input:focus{outline:2px solid var(--ds-red-light,#ef4444);outline-offset:1px}
.site-search-results{position:absolute;top:calc(100% + .35rem);right:0;width:min(24rem,82vw);max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);z-index:60}
.site-search-result{display:flex;gap:.7rem;align-items:baseline;padding:.55rem .85rem;text-decoration:none;color:inherit;border-bottom:1px solid rgba(255,255,255,.06)}
.site-search-result:last-child{border-bottom:0}
.site-search-result:hover,.site-search-result:focus-visible{background:rgba(239,68,68,.16);outline:none}
.site-search-kind{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);flex:0 0 5rem}
.site-search-title{font-size:.9rem}
.site-search-empty{padding:.75rem .85rem;margin:0;opacity:.6;font-size:.85rem}
.site-search-all{display:block;padding:.55rem .85rem;text-decoration:none;color:var(--accent-text);font-size:.82rem;font-weight:600;border-top:1px solid rgba(255,255,255,.12);background:rgba(239,68,68,.06)}
.site-search-all:hover,.site-search-all:focus-visible{background:rgba(239,68,68,.18);outline:none}
@media (max-width:720px){.site-search{max-width:100%;flex-basis:100%;order:3;margin-left:0}.site-search-results{width:100%}}
.search-page{max-width:46rem}
.search-page-label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);margin-bottom:.4rem}
.search-page-input{width:100%;padding:.8rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:inherit;font:inherit;font-size:1.05rem}
.search-page-input:focus{outline:2px solid var(--ds-red-light,#ef4444);outline-offset:1px}
.search-page-status{margin:.6rem 0 0;font-size:.85rem;opacity:.7}
.search-page-results{margin-top:1.5rem}
.search-page-group{margin-bottom:1.75rem}
.search-page-group h2{font-size:1.1rem;margin:0 0 .6rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:.35rem}
.search-page-group-count{color:var(--accent-text);font-size:.85rem;font-weight:600}
.search-page-result-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.search-page-result a{display:block;padding:.7rem .9rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);text-decoration:none;color:inherit;background:rgba(255,255,255,.03)}
.search-page-result a:hover,.search-page-result a:focus-visible{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.1);outline:none}
.search-page-result-title{display:block;font-weight:600}
.search-page-result-snippet{display:block;margin-top:.25rem;font-size:.85rem;opacity:.7}
/* Highlight for matched query substrings injected at runtime by search.js. */
.site-search-result mark,.site-search-title mark,.search-page-result-title mark,.search-page-result-snippet mark{background:rgba(239,68,68,.28);color:inherit;border-radius:2px;padding:0 .1em}

/* Light/dark theme toggle button (in the site header; bound by theme.js). */
.theme-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);cursor:pointer;padding:.45rem .6rem;font-size:1rem;line-height:1;transition:background-color 200ms,color 200ms,border-color 200ms}
.theme-toggle:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5)}
.theme-toggle-icon{display:inline-block}
/* Read-aloud (text-to-speech) trigger — mirrors the theme switch. Ships hidden
   and is revealed by tts.js only when the Web Speech API is available. */
.tts-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);cursor:pointer;padding:.45rem .6rem;font-size:1rem;line-height:1;transition:background-color 200ms,color 200ms,border-color 200ms}
.tts-toggle:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5)}
.tts-toggle.is-speaking{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.6);color:var(--red)}
.tts-toggle-icon{display:inline-block}
/* Highlight-color picker — mirrors the toggle buttons. Swatch + dot background
   colors are painted by accent.js via the CSSOM (the strict style-src CSP blocks
   inline style attributes), so no palette hexes live in this stylesheet. */
.accent-control{flex:0 0 auto;position:relative;display:inline-flex}
.accent-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);cursor:pointer;padding:.45rem .6rem;line-height:1;transition:background-color 200ms,color 200ms,border-color 200ms}
.accent-toggle:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5)}
.accent-toggle-dot{display:inline-block;width:1rem;height:1rem;border-radius:50%;border:1px solid var(--line);background-color:var(--red)}
.accent-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:50;display:flex;gap:.4rem;padding:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.accent-menu[hidden]{display:none}
.accent-swatch{width:1.4rem;height:1.4rem;padding:0;border-radius:50%;border:1px solid var(--line);cursor:pointer;transition:transform 120ms}
.accent-swatch:hover{transform:scale(1.12)}
.accent-swatch[aria-checked="true"]{outline:2px solid var(--ink);outline-offset:2px}
/* Soften the theme switch (and the FOUC from external defer scripts). */
body{transition:background-color 200ms,color 200ms}

/* Language switcher — a CSP-safe <details> dropdown (no JS, pure links) styled
   to match the theme/accent controls. */
.lang-switcher{flex:0 0 auto;position:relative;display:inline-flex}
.lang-switcher>summary{display:inline-flex;align-items:center;gap:.35rem;list-style:none;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);cursor:pointer;padding:.45rem .6rem;line-height:1;font-size:.85rem;transition:background-color 200ms,color 200ms,border-color 200ms}
.lang-switcher>summary::-webkit-details-marker{display:none}
.lang-switcher>summary:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5)}
.lang-globe{font-size:1rem;line-height:1}
.lang-current{font-weight:600;letter-spacing:.02em}
.lang-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:50;display:flex;flex-direction:column;min-width:9rem;gap:.1rem;padding:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.lang-menu a{display:block;padding:.4rem .55rem;border-radius:calc(var(--radius) - 2px);color:var(--ink);text-decoration:none;font-size:.9rem;white-space:nowrap}
.lang-menu a:hover{background:rgba(239,68,68,.14)}
.lang-menu a[aria-current="true"]{font-weight:700;color:var(--red)}

/* Machine-translation provenance note shown atop non-English pages. */
.mt-notice{margin:0 0 1rem;padding:.55rem .8rem;font-size:.85rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--red);border-radius:var(--radius)}
.mt-notice a{color:var(--red)}

@media (max-width:720px){.theme-toggle{order:5}.accent-control{order:4}.lang-switcher{order:6}.tts-toggle{order:3}}


/* Back-to-top control (created by site.js on long pages, CSP-safe). */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    background var(--ds-motion, 200ms) var(--ds-ease, ease),
    border-color var(--ds-motion, 200ms) var(--ds-ease, ease),
    color var(--ds-motion, 200ms) var(--ds-ease, ease);
}
.to-top:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--ds-on-accent, #ffffff);
}

/* Interactive-surface polish ─────────────────────────────────────────────────
   Smooth the many border/color/background hover states that previously snapped,
   using the same DS motion tokens as .button. The global prefers-reduced-motion
   rule above neutralizes all of these for users who opt out, so this is purely
   additive and accessibility-safe. */
.nav-menu-button,
.nav-menu a,
.page-index nav a,
.link-chips a,
.category-nav a,
.mini-links a,
.action-panel a,
.pathway-card,
.info-card,
.resource-card,
.directory-entry,
.pager a,
.tag-filter-chips button {
  transition:
    border-color var(--ds-motion, 200ms) var(--ds-ease, ease),
    background var(--ds-motion, 200ms) var(--ds-ease, ease),
    color var(--ds-motion, 200ms) var(--ds-ease, ease),
    box-shadow var(--ds-motion, 200ms) var(--ds-ease, ease),
    transform var(--ds-motion, 200ms) var(--ds-ease, ease);
}

/* Subtle lift on the elevated cards (those that already carry a shadow) so the
   hover reads as a tactile surface, not just a color shift. */
.info-card:hover,
.resource-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .info-card:hover,
  .resource-card:hover {
    transform: none;
  }
}

/* Calendar page — public events list (server-baked, CSP-safe). */
.calendar-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) minmax(150px, 0.8fr) max-content;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.calendar-tools label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.calendar-tools input,
.calendar-tools select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: inherit;
  font: inherit;
}

.calendar-tools .result-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .calendar-tools {
    grid-template-columns: 1fr;
  }
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.event-row {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--surface-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.event-row.is-cancelled {
  opacity: 0.55;
}

.event-when {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.event-when time {
  font-weight: 600;
  color: inherit;
}

.event-status.cancelled {
  align-self: flex-start;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.event-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.event-link {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  word-break: break-word;
}

.event-link a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}

.event-link a:hover,
.event-link a:focus-visible {
  text-decoration: underline;
}

.past-events > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem 0;
}

@media (max-width: 640px) {
  .event-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* Textbook Group — book cover figures (project-textbook-group feature section) */
.book-covers {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}
.book-cover {
  margin: 0;
  flex: 1 1 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.book-cover img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  background: var(--surface-2, #111);
}
.book-cover figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.book-cover-title { margin: 0; font-weight: 600; line-height: 1.3; }
.book-cover-meta { margin: 0; font-size: 0.85rem; color: var(--text-dim, #9aa0a6); }
.book-cover-status { margin: 0; font-size: 0.8rem; color: var(--accent, #ef4444); }
.book-cover-link { margin: 0.1rem 0 0; font-size: 0.85rem; }

/* Activities page — calendar + searchable active-projects tables */
.activities-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.activities-table th,
.activities-table td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); vertical-align: top; }
.activities-table th { font-weight: 600; color: var(--text-dim, #9aa0a6); }
.activities-table td.activity-when { white-space: nowrap; color: var(--text-dim, #9aa0a6); }
.activities-search { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.activities-search input[type="search"] { flex: 1 1 280px; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16)); background: var(--surface-2, #111); color: inherit; }
.activities-search span { font-size: 0.85rem; color: var(--text-dim, #9aa0a6); }

/* Narrative tables (rendered from transposed markdown bodies on about/structure/ecosystem) */
.narrative-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.5rem 0 1rem; }
.narrative-table th,
.narrative-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); vertical-align: top; }
.narrative-table th { font-weight: 600; color: var(--text-dim, #9aa0a6); }
.article-block h4 { margin: 1.1rem 0 0.4rem; font-size: 1.05rem; }
.article-block h5 { margin: 0.9rem 0 0.3rem; font-size: 0.95rem; }
.article-block ul { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; }
.article-block li { margin: 0.2rem 0; }