/* Afterburners — components (Phase 2, re-themed Phase 7+20)
 *
 * One class per component. Naming: c-{component}[__element][--modifier].
 * Components consume tokens only. Stage theming flows through --stage*.
 * Visual identity aligned with division-wide shared/style.css.
 */

@import url("base.css");

/* ============================================================
 * c-topnav — persistent header nav
 * ============================================================ */
.c-topnav {
  background: var(--surface);
  border-bottom: var(--stroke) solid var(--hairline);
  font-family: var(--font-sans);
  font-size: clamp(11px, 1.5vw, 13px);
  line-height: 2.2;
}
.c-topnav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.c-topnav__brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(11px, 1.5vw, 13px);
  color: var(--ink-strong);
  text-decoration: none;
  margin-right: auto;
}
.c-topnav__brand:hover { color: var(--accent); }
.c-topnav__links {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.c-topnav__links li { margin: 0; }
.c-topnav__links a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.c-topnav__links a[aria-current="page"],
.c-topnav__links a:hover {
  color: var(--ink-strong);
}

/* ============================================================
 * c-breadcrumb — visible breadcrumb strip aligned with division pages
 * ============================================================ */
.c-breadcrumb {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.8rem var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.c-breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
}
.c-breadcrumb a:hover { color: var(--ink-strong); }
.c-breadcrumb__sep {
  margin: 0 0.5rem;
  color: var(--ink-faint);
}
.c-breadcrumb__current {
  color: var(--accent);
}

/* ============================================================
 * c-timeline — persistent 5-stage protocol timeline bar
 * ============================================================ */
.c-timeline {
  background: var(--surface);
  border-bottom: var(--stroke) solid var(--hairline);
  padding: var(--s-3) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}
.c-timeline__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: stretch;
}
.c-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-mute);
  border: var(--stroke) solid transparent;
  background: transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.c-timeline__step:hover { background: var(--surface); color: var(--ink); }
.c-timeline__step[aria-current="step"] {
  background: var(--surface-mute);
  border-color: var(--stage-line);
  color: var(--ink-strong);
}
.c-timeline__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.c-timeline__step[aria-current="step"] .c-timeline__num { color: var(--stage); }
.c-timeline__name {
  font-weight: 600;
  color: inherit;
  letter-spacing: -0.005em;
}
.c-timeline__when {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
@media (max-width: 48rem) {
  .c-timeline__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .c-timeline__step { padding: var(--s-2); }
  .c-timeline__when { display: none; }
  .c-timeline__name { font-size: var(--fs-xs); }
}

/* ============================================================
 * c-hero — pillar page hero (direct answer + tier)
 * ============================================================ */
.c-hero {
  padding: var(--s-7) 0 var(--s-5);
  margin-bottom: var(--s-6);
}
.c-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.c-hero__title { margin-bottom: 0.2rem; }
.c-hero__lede {
  font-size: var(--fs-md);
  color: var(--ink);
  max-width: var(--measure);
}
.c-hero--index,
.c-hero--static {
  border-bottom: var(--stroke) solid var(--rule);
}

/* ============================================================
 * c-stage-card — protocol stage card (used on home + cross-links)
 * ============================================================ */
.c-stage-card {
  display: block;
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-left: 3px solid var(--stage, var(--rule));
  padding: var(--s-4) var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-1) var(--ease);
}
.c-stage-card:hover {
  background: var(--surface-mute);
}
.c-stage-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--stage, var(--ink-soft));
  text-transform: uppercase;
}
.c-stage-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-strong);
  margin: 2px 0 var(--s-2);
}
.c-stage-card__when {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}
.c-stage-card__lede {
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.c-stage-card--amber  { --stage: var(--amber);  }
.c-stage-card--blue   { --stage: var(--blue);   }
.c-stage-card--purple { --stage: var(--purple); }
.c-stage-card--green  { --stage: var(--green);  }
.c-stage-card--red    { --stage: var(--red);    }

/* ============================================================
 * c-ingredient-summary — top-of-ingredient-page block
 * Holds tier, impact, evidence, short justification, dose matrix
 * ============================================================ */
.c-ingredient-summary {
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-5);
  box-shadow: var(--shadow-1);
}
@media (max-width: 48rem) {
  .c-ingredient-summary { grid-template-columns: 1fr; }
}
.c-ingredient-summary__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.c-ingredient-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.c-ingredient-summary__justification {
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.c-ingredient-summary__stages {
  border-left: var(--stroke) solid var(--hairline);
  padding-left: var(--s-4);
}
@media (max-width: 48rem) {
  .c-ingredient-summary__stages {
    border-left: 0;
    border-top: var(--stroke) solid var(--hairline);
    padding-left: 0;
    padding-top: var(--s-4);
  }
}
.c-ingredient-summary__stages h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
  font-weight: 500;
}

/* c-stage-map — visual 5-column protocol stage map (Phase 13) */
.c-stage-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
}
.c-stage-map__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius);
  border: var(--stroke) solid var(--hairline);
  background: var(--surface-mute);
  text-decoration: none;
  text-align: center;
  opacity: 0.4;
  transition: opacity var(--dur-2) var(--ease);
}
.c-stage-map__col.is-active { opacity: 1; }
.c-stage-map__col--amber.is-active  { background: var(--amber-wash);  border-color: var(--amber-line); }
.c-stage-map__col--blue.is-active   { background: var(--blue-wash);   border-color: var(--blue-line); }
.c-stage-map__col--purple.is-active { background: var(--purple-wash); border-color: var(--purple-line); }
.c-stage-map__col--green.is-active  { background: var(--green-wash);  border-color: var(--green-line); }
.c-stage-map__col--red.is-active    { background: var(--red-wash);    border-color: var(--red-line); }
.c-stage-map__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.c-stage-map__col--amber.is-active  .c-stage-map__label { color: var(--amber); }
.c-stage-map__col--blue.is-active   .c-stage-map__label { color: var(--blue); }
.c-stage-map__col--purple.is-active .c-stage-map__label { color: var(--purple); }
.c-stage-map__col--green.is-active  .c-stage-map__label { color: var(--green); }
.c-stage-map__col--red.is-active    .c-stage-map__label { color: var(--red); }
.c-stage-map__dose {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-strong);
}
.c-stage-map__col:not(.is-active) .c-stage-map__dose { color: var(--ink-faint); }
@media (max-width: 48rem) {
  .c-stage-map { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 30rem) {
  .c-stage-map { grid-template-columns: repeat(2, 1fr); }
}

/* c-only-one-thing — Phase 13 "if you only do one thing" callout */
.c-only-one-thing {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  border: var(--stroke) solid var(--hairline);
  background: var(--surface-mute);
}
.c-only-one-thing--core {
  border-color: color-mix(in srgb, var(--tier-1) 30%, var(--hairline));
  background: color-mix(in srgb, var(--tier-1) 6%, var(--surface));
}
.c-only-one-thing__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}
.c-only-one-thing--core .c-only-one-thing__label { color: var(--tier-1); }
.c-only-one-thing__body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
}
.c-only-one-thing__body a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}
.c-only-one-thing__body a:hover { color: var(--link-hover); }

/* c-decision-layer — Phase 15 decision guidance block */
.c-decision-layer {
  margin: var(--s-5) 0;
  padding: var(--s-5);
  border-radius: var(--radius);
  border: var(--stroke) solid var(--hairline);
  background: var(--surface-mute);
}
.c-decision-layer__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
}
.c-decision-layer__question {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-2) 0;
}
.c-decision-layer__description {
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0 0 var(--s-4) 0;
}
.c-decision-layer__list {
  list-style: none;
  counter-reset: decision-items;
  padding: 0;
  margin: 0 0 var(--s-4) 0;
}
.c-decision-layer__item {
  counter-increment: decision-items;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: var(--stroke) solid var(--hairline);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.c-decision-layer__item:last-child { border-bottom: none; }
.c-decision-layer__item::before {
  content: counter(decision-items);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tier-1);
  min-width: 1.5em;
}
.c-decision-layer__item a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}
.c-decision-layer__item a:hover { color: var(--link-hover); }
.c-decision-layer__dose {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}
.c-decision-layer__role {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}
.c-decision-layer__cta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  padding: 6px 12px;
  border: var(--stroke) solid var(--link);
  border-radius: var(--radius-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.c-decision-layer__cta:hover { background: var(--link); color: var(--paper); }

/* ============================================================
 * c-tier-badge / c-impact-badge / c-evidence-badge
 * ============================================================ */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  border: var(--stroke) solid var(--hairline);
  background: var(--surface-mute);
  color: var(--ink-mute);
  white-space: nowrap;
}
.c-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.c-badge--tier-1 { color: var(--tier-1); border-color: color-mix(in srgb, var(--tier-1) 30%, var(--hairline)); background: color-mix(in srgb, var(--tier-1) 8%, var(--surface)); }
.c-badge--tier-2 { color: var(--tier-2); border-color: color-mix(in srgb, var(--tier-2) 30%, var(--hairline)); background: color-mix(in srgb, var(--tier-2) 8%, var(--surface)); }
.c-badge--tier-3 { color: var(--tier-3); border-color: color-mix(in srgb, var(--tier-3) 30%, var(--hairline)); background: color-mix(in srgb, var(--tier-3) 8%, var(--surface)); }
.c-badge--tier-4 { color: var(--tier-4); border-color: color-mix(in srgb, var(--tier-4) 30%, var(--hairline)); background: color-mix(in srgb, var(--tier-4) 8%, var(--surface)); }
.c-badge--tier-5 { color: var(--tier-5); border-color: color-mix(in srgb, var(--tier-5) 30%, var(--hairline)); background: color-mix(in srgb, var(--tier-5) 8%, var(--surface)); }

/* ============================================================
 * c-section — generic content section
 * ============================================================ */
.c-section { margin: var(--s-7) 0; }
.c-section__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

/* ============================================================
 * c-affiliate — curated 1–3 product block
 * Understated. Never above primary content. Labeled.
 * ============================================================ */
.c-affiliate {
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-deep);
  padding: var(--s-5);
  position: relative;
}
.c-affiliate__label {
  position: absolute;
  top: -10px;
  left: var(--s-4);
  background: var(--paper);
  padding: 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.c-affiliate__intro {
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.c-affiliate__products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-affiliate__product {
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.c-affiliate__rank {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.c-affiliate__name {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: var(--lh-tight);
}
.c-affiliate__reason {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  flex: 1;
}
.c-affiliate__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 8px 14px;
  border: var(--stroke) solid var(--accent);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.c-affiliate__cta:hover { background: var(--accent); color: var(--paper); }
.c-affiliate__disclosure {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: var(--s-3);
  font-style: italic;
}

/* ============================================================
 * c-deep-science — collapsible, visually separated
 * ============================================================ */
.c-deep-science {
  margin: var(--s-7) 0;
  background: var(--paper-deep);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius);
  overflow: clip;
}
.c-deep-science > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  user-select: none;
}
.c-deep-science > summary::-webkit-details-marker { display: none; }
.c-deep-science > summary::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease);
  flex: 0 0 auto;
}
.c-deep-science[open] > summary::before { transform: rotate(45deg); }
.c-deep-science > summary:hover { color: var(--ink-strong); }
.c-deep-science__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
.c-deep-science__body {
  padding: var(--s-2) var(--s-5) var(--s-5);
  border-top: var(--stroke) solid var(--hairline);
  max-width: var(--measure);
}

/* ============================================================
 * c-related — related pages block
 * ============================================================ */
.c-related {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--stroke) solid var(--rule);
}
.c-related__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.c-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-related__item {
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: border-color var(--dur-1) var(--ease);
}
.c-related__item:hover { border-color: var(--stage-line); }
.c-related__kind {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.c-related__name {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 4px 0 6px;
  display: block;
}
.c-related__name a { color: var(--ink-strong); text-decoration: none; }
.c-related__name a:hover { color: var(--link); }
.c-related__snippet {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  line-height: var(--lh-body);
}

/* ============================================================
 * c-scenario — "if this is your situation" callout
 * ============================================================ */
.c-scenario {
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-left: 3px solid var(--accent);
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
@media (max-width: 42rem) {
  .c-scenario { grid-template-columns: 1fr; text-align: left; }
}
.c-scenario__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.c-scenario__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.c-scenario__headline {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: var(--lh-tight);
  margin-bottom: 4px;
}
.c-scenario__body {
  color: var(--ink-mute);
  font-size: var(--fs-sm);
}
.c-scenario__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 1px;
  transition: color var(--dur-1) var(--ease);
}
.c-scenario__cta:hover { color: var(--ink-strong); }

/* ============================================================
 * c-compare — comparison table
 * ============================================================ */
.c-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius);
  overflow: clip;
}
.c-compare caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: var(--s-2);
}
.c-compare th, .c-compare td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--stroke) solid var(--hairline);
}
.c-compare thead th {
  background: var(--surface);
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.c-compare tbody tr:last-child td { border-bottom: 0; }
.c-compare tbody th {
  font-weight: 600;
  color: var(--ink-strong);
  font-family: var(--font-sans);
}
.c-compare__best { color: var(--tier-1); font-weight: 600; }
.c-compare__strong { color: var(--tier-2); }
.c-compare__situational { color: var(--ink-mute); }

/* ============================================================
 * c-index-list — taxonomy and index pages
 * ============================================================ */
.c-index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.c-index-list__item {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-4);
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
}
.c-index-list__kind,
.c-index-list__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c-index-list__kind {
  color: var(--accent);
}
.c-index-list__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-strong);
}
.c-index-list__name a {
  color: inherit;
}
.c-index-list__name a:hover {
  color: var(--link);
}
.c-index-list__meta {
  color: var(--ink-soft);
  justify-self: end;
  text-align: right;
}
.c-index-list__snippet {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
}
@media (max-width: 42rem) {
  .c-index-list__item {
    grid-template-columns: 1fr;
  }
  .c-index-list__meta {
    justify-self: start;
    text-align: left;
  }
}

/* ============================================================
 * c-footer
 * ============================================================ */
.c-footer {
  margin-top: auto;
  text-align: center;
  padding: var(--s-6) 0;
  border-top: var(--stroke) solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}
.c-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}
.c-footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-2);
  font-weight: 500;
}
.c-footer ul { list-style: none; padding: 0; margin: 0; }
.c-footer li { margin-bottom: var(--s-1); }
.c-footer a { color: var(--ink-soft); text-decoration: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; }
.c-footer a:hover { color: var(--ink-strong); }
.c-footer__meta {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter) 0;
  font-size: 0.7rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}

/* ============================================================
 * c-tier-group — tier band on protocol pillar pages (Phase 14)
 * Visual dominance flows Core → Experimental.
 * ============================================================ */
.c-tier-group {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: var(--stroke) solid var(--hairline);
  border-left: 4px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.c-tier-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.c-tier-group__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0;
}
.c-tier-group__role {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  margin: 0;
}
.c-tier-group__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.c-tier-group__item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-top: var(--stroke) dashed var(--hairline);
}
.c-tier-group__item:first-child { border-top: 0; }
.c-tier-group__name {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink-strong);
  text-decoration: none;
  font-weight: 600;
}
.c-tier-group__name:hover { color: var(--link); }
.c-tier-group__dose {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--stage);
  justify-self: end;
  white-space: nowrap;
}
.c-tier-group__item-role {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}

/* Tier 1 — Core. Dominant. Accent wash. Larger title. */
.c-tier-group--tier-1 {
  border-left-color: var(--tier-1);
  background: color-mix(in srgb, var(--tier-1) 4%, var(--surface));
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.c-tier-group--tier-1 .c-tier-group__title { font-size: var(--fs-xl); }
.c-tier-group--tier-1 .c-tier-group__name  { font-size: var(--fs-lg); }

/* Tier 2 — Extended. Normal weight. */
.c-tier-group--tier-2 { border-left-color: var(--tier-2); }

/* Tier 3 — Optional. Subdued. */
.c-tier-group--tier-3 {
  border-left-color: var(--tier-3);
  background: var(--surface-mute);
}
.c-tier-group--tier-3 .c-tier-group__name { font-size: var(--fs-sm); }
.c-tier-group--tier-3 .c-tier-group__role { color: var(--ink-soft); }

/* Tier 4 — Experimental. Most subdued. */
.c-tier-group--tier-4 {
  border-left-color: var(--tier-4);
  background: transparent;
  padding: var(--s-4) var(--s-5);
}
.c-tier-group--tier-4 .c-tier-group__title { font-size: var(--fs-md); color: var(--ink-mute); }
.c-tier-group--tier-4 .c-tier-group__name  { font-size: var(--fs-sm); color: var(--ink-mute); font-weight: 500; }
.c-tier-group--tier-4 .c-tier-group__role  { color: var(--ink-faint); }

/* Collapsed tier groups (details/summary for tier 3/4) */
details.c-tier-group { cursor: default; }
details.c-tier-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}
details.c-tier-group > summary::-webkit-details-marker { display: none; }
details.c-tier-group > summary::marker { content: ""; }
.c-tier-group__count {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin-left: auto;
}
details.c-tier-group[open] > summary { margin-bottom: var(--s-4); }

/* Per-item badge row */
.c-tier-group__badges {
  display: inline-flex;
  gap: 4px;
  grid-column: 1 / -1;
  margin-top: 2px;
}
.c-tier-group__badges .c-badge { font-size: 10px; padding: 2px 5px; }

/* Impact score badge variants */
.c-badge--impact-high   { color: var(--tier-1); border-color: color-mix(in srgb, var(--tier-1) 30%, transparent); }
.c-badge--impact-medium { color: var(--tier-3); border-color: color-mix(in srgb, var(--tier-3) 30%, transparent); }
.c-badge--impact-low    { color: var(--ink-mute); }
.c-badge--evidence      { color: var(--ink-mute); }
.c-badge--critical {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 30%, var(--hairline));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}
.c-badge--high {
  color: var(--tier-3);
  border-color: color-mix(in srgb, var(--tier-3) 30%, var(--hairline));
  background: color-mix(in srgb, var(--tier-3) 8%, var(--surface));
}
.c-badge--medium,
.c-badge--low {
  color: var(--ink-mute);
}

/* ============================================================
 * c-mechanism-list — plain ranked list used on protocol +
 * mechanism pages. No card chrome; prose-adjacent.
 * ============================================================ */
.c-mechanism-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.c-mechanism-list > li {
  padding: var(--s-2) 0;
  border-bottom: var(--stroke) solid var(--hairline);
  font-size: var(--fs-md);
}
.c-mechanism-list > li:last-child { border-bottom: 0; }
.c-mechanism-list a {
  font-family: var(--font-sans);
  color: var(--ink-strong);
  text-decoration: none;
  font-weight: 600;
}
.c-mechanism-list a:hover { color: var(--link); }
.c-mechanism-list__snippet {
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  margin-left: var(--s-2);
}

/* ============================================================
 * c-hero extensions — meta strip under lede (protocol hero)
 * ============================================================ */
.c-hero__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.c-hero__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.c-hero__meta dd { margin: 0; color: var(--ink); }

/* ============================================================
 * Home layout utilities (Phase 7)
 * l-stage-grid       — 5-card protocol grid on the homepage
 * l-scenario-stack   — vertical stack of scenario callouts
 * l-ingredient-index — compact alpha ingredient list with tier badges
 * ============================================================ */
.l-stage-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.l-stage-grid > li { margin: 0; }

.l-scenario-stack {
  display: grid;
  gap: var(--s-3);
}

.l-ingredient-index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}
.l-ingredient-index > li {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-3);
  border: var(--stroke) solid var(--hairline);
  background: var(--surface);
  min-height: 100%;
}
.c-ing-index__title {
  font-family: var(--font-sans);
  color: var(--ink-strong);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-base);
}
.c-ing-index__title:hover { color: var(--link); }
.c-ing-index__short {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  line-height: var(--lh-body);
}
.l-ingredient-index .c-badge { justify-self: start; }

/* ============================================================
 * Phase 7+20 — Homepage progressive-density components
 * Layer 1: c-home-hero (spacious, minimal)
 * Layer 2: l-mechanism-blocks + c-mech-block (structured, diagrammatic)
 * Layer 3: c-ing-group (organized, scannable)
 * Layer 4: c-home-divider (transition into depth)
 * ============================================================ */

/* Layer 1 — hero ------------------------------------------------ */
.c-home-hero {
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
  max-width: var(--measure);
  margin: 0 auto;
}
.c-home-hero__title {
  font-size: clamp(var(--fs-2xl), 4.5vw, var(--fs-3xl));
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.c-home-hero__lede {
  font-size: var(--fs-md);
  color: var(--ink-mute);
  margin-bottom: var(--s-5);
}
.c-home-hero__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border: var(--stroke) solid var(--accent);
  padding: var(--s-3) var(--s-6);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.c-home-hero__cta:hover {
  background: var(--accent);
  color: var(--paper);
}
.c-home-hero__image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius);
  border: var(--stroke) solid var(--rule);
  margin-top: var(--s-5);
}
.c-home-hero__trust {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* Homepage section tweaks — tighter than default c-section */
.c-section--home { margin: var(--s-6) 0; }
.c-section__heading {
  font-size: var(--fs-lg);
  margin-top: 0;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--stroke) solid var(--rule);
}

/* Layer 2 — mechanism blocks ------------------------------------ */
.l-mechanism-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.c-mech-block {
  display: block;
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-left: 3px solid var(--accent);
  padding: var(--s-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-1) var(--ease);
}
.c-mech-block:hover {
  background: var(--surface-mute);
}
.c-mech-block__title {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0 0 var(--s-2);
  line-height: var(--lh-tight);
}
.c-mech-block__desc {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  line-height: var(--lh-body);
  margin: 0;
}

/* Layer 3 — ingredient groups ----------------------------------- */
.c-ing-group {
  margin-bottom: var(--s-5);
}
.c-ing-group__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: var(--stroke) solid var(--hairline);
}

/* Layer 4 — divider into depth ---------------------------------- */
.c-home-divider {
  margin: var(--s-7) 0 var(--s-5);
  border-top: var(--stroke-2) solid var(--rule);
  text-align: center;
  position: relative;
}
.c-home-divider__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 0 var(--s-4);
  position: relative;
  top: -0.65em;
}