@import url("base.css");

/* ============================================================
 * c-topnav — slim header
 * ============================================================ */
.c-topnav {
  background: var(--paper);
  border-bottom: var(--stroke) solid var(--hairline);
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.5vw, 13px);
  line-height: 1.4;
}
.c-topnav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
}
.c-topnav__brand {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  text-decoration: none;
  margin-right: auto;
  border: 0;
}
.c-topnav__brand:hover { color: var(--accent); border: 0; }
.c-topnav__links { display: flex; gap: 18px; 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;
  letter-spacing: 0.02em;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
}
.c-topnav__links a[aria-current="page"], .c-topnav__links a:hover { color: var(--ink-strong); }

/* ============================================================
 * c-home-hero — homepage hero
 * ============================================================ */
.c-home-hero {
  position: relative;
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
  max-width: var(--measure);
  margin: 0 auto;
}
.c-home-hero__wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-strong);
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
  margin: 0 0 var(--s-4);
  position: relative;
  z-index: 1;
}
.c-home-hero__title {
  font-size: clamp(var(--fs-2xl), 4.5vw, var(--fs-3xl));
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-strong);
  position: relative; z-index: 1;
}
.c-home-hero__lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--ink-mute);
  margin-bottom: var(--s-5);
  position: relative; z-index: 1;
}
.c-home-hero__system {
  max-width: 42rem;
  margin: 0 auto var(--s-6);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--ink);
  position: relative; z-index: 1;
}
.c-home-hero__system strong { color: var(--ink-strong); }
.c-home-hero__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 14px 28px;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  position: relative; z-index: 1;
}
.c-home-hero__cta:hover { background: var(--link-hover); border-color: var(--link-hover); color: var(--paper); }
.c-home-hero__trust {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  position: relative; z-index: 1;
}

/* ============================================================
 * c-entry-paths — three on-ramp tiles
 * ============================================================ */
.c-entry-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin: 0 auto var(--s-7);
  max-width: var(--measure-wide);
}
.c-entry-path {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
  text-decoration: none; color: inherit; border: 0;
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-top: 2px solid var(--accent);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.c-entry-path:hover { background: var(--surface-mute); transform: translateY(-1px); border-bottom-color: var(--hairline); }
.c-entry-path__kicker {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.c-entry-path__title { font-size: 1.2rem; font-weight: 500; color: var(--ink-strong); margin: 0; font-family: var(--font-serif); }
.c-entry-path__desc  { font-size: 0.95rem; color: var(--ink-mute); line-height: var(--lh-body); margin: 0; }
.c-entry-path__arrow {
  margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}

/* ============================================================
 * c-section — generic section
 * ============================================================ */
.c-section { margin: var(--s-7) 0; }
.c-section--home { margin: var(--s-7) 0; }
.c-section__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--stroke) solid var(--rule);
  letter-spacing: -0.01em;
}

/* ============================================================
 * c-window-card — window grid card
 * ============================================================ */
.l-window-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 900px) { .l-window-grid { grid-template-columns: 1fr; } }
.c-window-card {
  display: block;
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-top: 3px solid var(--stage, var(--rule));
  padding: var(--s-5) var(--s-4);
  text-decoration: none; color: inherit; border-bottom: var(--stroke) solid var(--hairline);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  height: 100%;
}
.c-window-card:hover { background: var(--surface-mute); transform: translateY(-1px); }
.c-window-card--celadon  { --stage: var(--celadon);  }
.c-window-card--indigo   { --stage: var(--indigo);   }
.c-window-card--stream   { --stage: var(--stream);   }
.c-window-card--loam     { --stage: var(--loam);     }
.c-window-card--hibiscus { --stage: var(--hibiscus); }
.c-window-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--stage, var(--ink-soft));
  text-transform: uppercase;
}
.c-window-card__name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-strong);
  margin: var(--s-2) 0 var(--s-3);
  letter-spacing: -0.005em;
}
.c-window-card__when {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
  line-height: var(--lh-body);
}
.c-window-card__lede { color: var(--ink-mute); font-size: 0.95rem; line-height: var(--lh-body); }

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

/* ============================================================
 * c-decision-layer — quick-start / prerequisites callout
 * ============================================================ */
.c-decision-layer {
  margin: var(--s-5) 0;
  padding: var(--s-6);
  border: var(--stroke) solid var(--hairline);
  background: var(--surface);
}
.c-decision-layer__kicker {
  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-1);
}
.c-decision-layer__question {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-strong);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-3) 0;
  letter-spacing: -0.01em;
}
.c-decision-layer__description {
  color: var(--ink-mute);
  font-size: 0.98rem;
  line-height: var(--lh-body);
  margin: 0 0 var(--s-5) 0;
}
.c-decision-layer__list {
  list-style: none; counter-reset: decision-items;
  padding: 0; margin: 0;
}
.c-decision-layer__item {
  counter-increment: decision-items;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: var(--stroke) solid var(--hairline);
  font-size: 1rem;
  line-height: var(--lh-body);
}
.c-decision-layer__item:first-child { border-top: 0; padding-top: 0; }
.c-decision-layer__item::before {
  content: counter(decision-items, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  min-width: 2em;
  letter-spacing: 0.04em;
}
.c-decision-layer__item a {
  color: var(--ink-strong);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.c-decision-layer__item a:hover { color: var(--accent); }
.c-decision-layer__role { font-size: 0.95rem; color: var(--ink-mute); }

/* ============================================================
 * c-badge — tier markers
 * ============================================================ */
.c-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: var(--stroke) solid var(--hairline);
  background: var(--surface-mute);
  color: var(--ink-mute);
  white-space: nowrap;
  border-radius: 999px;
}
.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) 35%, 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) 35%, 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) 35%, 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) 35%, var(--hairline)); background: color-mix(in srgb, var(--tier-4) 8%, var(--surface)); }

/* ============================================================
 * c-scenario — situation tile
 * ============================================================ */
.l-scenario-stack { display: grid; gap: var(--s-3); }
.c-scenario {
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  border-left: 3px solid var(--accent-2);
  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; } }
.c-scenario__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: 50%;
}
.c-scenario__kicker {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 4px;
}
.c-scenario__headline {
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500;
  color: var(--ink-strong); line-height: var(--lh-tight);
  margin-bottom: 4px; letter-spacing: -0.005em;
}
.c-scenario__body { color: var(--ink-mute); font-size: 0.95rem; }
.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: 0.06em; text-transform: uppercase;
  border: 0;
}
.c-scenario__cta:hover { color: var(--ink-strong); border: 0; }

/* ============================================================
 * c-ing-group — ingredient reference groups
 * ============================================================ */
.c-ing-group { margin-bottom: var(--s-6); }
.c-ing-group__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  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);
}
.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-4);
  border: var(--stroke) solid var(--hairline);
  background: var(--surface);
  min-height: 100%;
}
.c-ing-index__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink-strong);
  text-decoration: none;
  font-weight: 500;
  border: 0;
}
.c-ing-index__title:hover { color: var(--accent); border: 0; }
.c-ing-index__short {
  margin: 0; font-size: 0.92rem; color: var(--ink-mute);
  line-height: var(--lh-body);
}
.l-ingredient-index .c-badge { justify-self: start; }

/* ============================================================
 * c-research-list — research themes
 * ============================================================ */
.c-research-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.c-research-list > li {
  padding: var(--s-3) 0;
  border-bottom: var(--stroke) solid var(--hairline);
}
.c-research-list > li:last-child { border-bottom: 0; }
.c-research-list a {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--accent);
}
.c-research-list a:hover { color: var(--accent); }
.c-research-list__snippet {
  display: block;
  color: var(--ink-mute);
  font-size: 0.95rem;
  margin-top: var(--s-1);
}

/* ============================================================
 * c-related — related links footer for content pages
 * ============================================================ */
.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.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.c-related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.c-related__list li { font-size: 0.95rem; color: var(--ink-mute); }
.c-related__list a { color: var(--ink-strong); border-bottom: 1px solid var(--accent); }
.c-related__list a:hover { color: var(--accent); }

/* ============================================================
 * c-hero — page hero (window/mechanism/ingredient)
 * ============================================================ */
.c-hero {
  padding: var(--s-7) 0 var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: var(--stroke) solid var(--rule);
}
.c-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stage, var(--accent));
  margin-bottom: var(--s-3);
}
.c-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-bottom: var(--s-3);
  color: var(--ink-strong);
}
.c-hero__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink-mute);
  max-width: var(--measure);
  margin-bottom: var(--s-4);
  font-weight: 400;
}
.c-hero__when {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.c-hero__skip {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* ============================================================
 * c-ingredient-summary — ingredient page top block
 * ============================================================ */
.c-ingredient-summary {
  background: var(--surface);
  border: var(--stroke) solid var(--hairline);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 48rem) { .c-ingredient-summary { grid-template-columns: 1fr; } }
.c-ingredient-summary__col 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-2);
  font-weight: 500;
}
.c-ingredient-summary__col p { margin: 0; font-size: 0.95rem; color: var(--ink); }

/* ============================================================
 * c-footer — four columns, mirrored layout
 * ============================================================ */
.c-footer {
  margin-top: auto;
  padding: var(--s-7) 0 var(--s-5);
  border-top: var(--stroke) solid var(--rule);
  background: var(--paper);
  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-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 48rem) { .c-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .c-footer__inner { grid-template-columns: 1fr; } }
.c-footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
  font-weight: 500;
}
.c-footer ul { list-style: none; padding: 0; margin: 0; }
.c-footer li { margin-bottom: var(--s-2); }
.c-footer a {
  color: var(--ink); text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  letter-spacing: 0;
  border: 0;
}
.c-footer a:hover { color: var(--accent); border: 0; }
.c-footer__meta {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter) 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  border-top: var(--stroke) solid var(--hairline);
}
.c-footer__meta a { color: var(--ink-mute); border: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }

/* ============================================================
 * c-stub — TODO stub page styling
 * ============================================================ */
.c-stub {
  text-align: center;
  padding: var(--s-7) 0;
  max-width: var(--measure-narrow);
  margin: 0 auto;
}
.c-stub__kicker {
  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);
}
.c-stub__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  margin-bottom: var(--s-4);
  color: var(--ink-strong);
}
.c-stub__body { color: var(--ink-mute); font-size: 1.05rem; }
.c-stub__return {
  display: inline-block;
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--accent);
}