/* ============================================================
   Y2Lead Website — CHAPTERED EXPERIENCE (v3 evolution branch)
   Authority: AMEND-001 (chapters as meaning-complete movements)
   Phase 1: Chapters 1–2 only (WEBSITE-008 validation build).
   Inherits: tokens.css (WP-001C) + foundation.css (voices, motion).
   All values are token references. Certified v2 untouched.
   ============================================================ */

/* ---- Chapter container ---- */

.chapter {
  /* chapter boundary = the big silence now (anticipation tier
     preserved as the INTER-CHAPTER breath) */
  padding-block-start: var(--space-9);
}

.chapter:first-of-type { padding-block-start: var(--space-8); }

/* ---- Chapter identity (AMEND-001: orientation, not menus) ----
   A quiet editorial chapter head: number · title · driving question.
   Never a card, never a section menu. */

.chapter-head { margin-bottom: var(--space-6); }

.chapter-number {
  font-size: var(--type-scale-whisper);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-tracking-whisper);
  text-transform: uppercase;
  color: var(--color-ink-whisper);
}

.chapter-title {
  font-size: var(--type-scale-statement);
  line-height: var(--type-lineheight-statement);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-display);
  color: var(--color-ink-primary);
  margin-top: var(--space-1);
}

.chapter-question {
  font-style: italic;
  font-size: var(--type-scale-body);
  line-height: var(--type-lineheight-body);
  color: var(--color-ink-whisper);
  margin-top: var(--space-2);
}

.chapter-head .rule {
  width: var(--space-6);
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
  margin-top: var(--space-3);
}

/* ---- Intra-chapter rhythm: tighter than the keynote model ----
   Beats breathe at inter-idea intervals, not scene intervals. */

.beat + .beat { margin-top: var(--space-6); }
.beat--minor + .beat, .beat + .beat--minor { margin-top: var(--space-5); }

/* chapter-internal voiced question (bridge to next chapter) */
.chapter-bridge {
  margin-top: var(--space-7);
  display: flex;
  align-items: center;
  height: var(--space-6);
}

/* continuation marker for unbuilt chapters (Phase 1 prototype) */
.chapter-next {
  margin-top: var(--space-8);
  padding-block: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--color-hairline);
  color: var(--color-ink-disabled);
}

/* ---- Era-contrast figure (EXP-002 F02.1 — the permitted
   subordinate figure, first implementation) ------------------- */

.era-figure { max-width: 30rem; margin-block: var(--space-5); }
.era-figure svg { display: block; width: 100%; height: auto; }

/* ---- Monument (unchanged treatment, inherited composition) --- */

.monument-lead {
  font-size: var(--type-scale-monument);
  line-height: var(--type-lineheight-monument);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-display);
  color: var(--color-ink-primary);
  max-width: 44ch;
}

.definition > * + * { margin-top: var(--space-5); }

.definition-support {
  font-size: var(--type-scale-statement);
  line-height: var(--type-lineheight-statement);
  font-weight: var(--type-weight-regular);
  letter-spacing: var(--type-tracking-display);
  color: var(--color-ink-primary);
  max-width: 40ch;
}

.monument-approach {
  /* WEBSITE-008A R-1: the meaningful pause between orientation
     (the chapter question) and the answer (the definition).
     Scored: 160px block; measured question→definition ≈ 35vh —
     the DEEPEST silence of the chaptered page (beats ~7vh,
     chapter boundary ~21vh), and ~25% under the keynote's
     46vh — guided depth, not contemplative distance. */
  height: calc(var(--space-8) + var(--space-4));
}

.monument-stage {
  /* summit exhale: definition→bridge ≈ 32vh (was ~25vh) —
     second-deepest silence; the monument owns both extremes. */
  padding-block-start: 0;
  padding-block-end: var(--space-9);
}

/* transition question voice (inherited pattern from Phase 1) */
.transition-question {
  font-style: italic;
  color: var(--color-ink-whisper);
}

.arrival .arrival-line { margin-top: var(--space-1); color: var(--color-ink-whisper); }

/* ============================================================
   WEBSITE-009 — Phase 2 (Chapters 3–6)
   ============================================================ */

/* ---- Navigation Figure support (engine classes, from v2) ---- */

.figure-block { max-width: 24rem; }
.figure-block--wide { max-width: 30rem; }

.fig-hidden { opacity: 0; }
.fig-revealed {
  opacity: 1;
  transition: opacity var(--motion-duration-gentle) var(--motion-easing-calm);
}
.fig-draw.fig-revealed {
  stroke-dashoffset: 0 !important;
  transition: opacity var(--motion-duration-gentle) var(--motion-easing-calm),
              stroke-dashoffset var(--motion-duration-gentle) var(--motion-easing-calm);
}
@media (prefers-reduced-motion: reduce) {
  .fig-hidden { opacity: 1; }
  .fig-draw { stroke-dashoffset: 0 !important; }
}

/* ---- Chapter 4: the cognitive map (diagram-first) ------------
   Not an architecture diagram: four levels of one thought,
   connected by a single descending line. Space groups; no boxes. */

.stack-map { margin-block: var(--space-5); max-width: 34rem; }

.stack-level { display: flex; gap: var(--space-3); align-items: baseline; }

.stack-level + .stack-level {
  margin-top: var(--space-4);
  position: relative;
}

.stack-level + .stack-level::before {
  /* the descending connector: one hairline of continuity */
  content: "";
  position: absolute;
  left: 3.5px;
  top: calc(-1 * var(--space-4));
  height: var(--space-4);
  border-left: var(--border-width-hairline) solid var(--color-ink-whisper);
}

.stack-node {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-ink-primary);
  flex-shrink: 0;
  position: relative; top: -1px;
}

.stack-level--latent .stack-node { background: var(--color-figure-latent); }
.stack-level--latent .stack-name,
.stack-level--latent .stack-role { color: var(--color-ink-disabled); }

.stack-name {
  font-size: var(--type-scale-body);
  font-weight: var(--type-weight-semibold);
  color: var(--color-ink-primary);
}

.stack-role {
  display: block;
  font-size: var(--type-scale-whisper);
  line-height: var(--type-lineheight-whisper);
  color: var(--color-ink-whisper);
  margin-top: 2px;
}

/* ---- Documentary lists (promise/principles/never — from v2) -- */

.principles-list, .never-list { list-style: none; counter-reset: item; }
.principles-list li, .never-list li {
  counter-increment: item; display: flex; gap: var(--space-3); align-items: baseline;
}
.principles-list li + li, .never-list li + li { margin-top: var(--space-2); }
.principles-list li::before, .never-list li::before {
  content: counter(item, decimal-leading-zero);
  font-size: var(--type-scale-whisper);
  font-weight: var(--type-weight-medium);
  color: var(--color-ink-whisper);
  letter-spacing: var(--type-tracking-whisper);
  flex-shrink: 0;
}
.never-lead { font-weight: var(--type-weight-semibold); color: var(--color-ink-primary); }

/* ---- Origin (condensed, from v2 — DR-005 link preserved) ---- */

.origin-block { display: flex; gap: var(--space-4); align-items: flex-start; }
.origin-link { display: inline-block; flex-shrink: 0; line-height: 0; }
.origin-book {
  display: block; width: 6rem; height: auto;
  border: var(--border-width-hairline) solid var(--color-hairline);
}
.origin-link:hover .origin-book {
  border-color: var(--color-ink-whisper);
  transition: border-color var(--motion-duration-feedback) var(--motion-easing-feedback);
}
@media (max-width: 600px) { .origin-block { flex-direction: column; } }

/* ---- Invitations (DR-004/006 register, from v2) -------------- */

.invitation {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  min-height: var(--a11y-target-min);
  border: var(--border-width-hairline) solid var(--color-accent);
  border-radius: var(--radius-interactive);
  color: var(--color-accent);
  font-size: var(--type-scale-body);
  font-weight: var(--type-weight-medium);
  text-decoration: none;
  transition: color var(--motion-duration-feedback) var(--motion-easing-feedback),
              border-color var(--motion-duration-feedback) var(--motion-easing-feedback);
}
.invitation:hover { color: var(--color-accent-active); border-color: var(--color-accent-active); text-decoration: none; }
.invitation-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.brand-mark {
  display: block; width: 100%; max-width: 20rem; height: auto;
  border-radius: var(--radius-interactive);
}

/* ---- Exit + footer ------------------------------------------ */

.exit-state > * + * { margin-top: var(--space-4); }

.site-footer {
  border-top: var(--border-width-hairline) solid var(--color-hairline);
  margin-top: var(--space-9);
  padding-block: var(--space-6);
}
.site-footer .narrative-column > * + * { margin-top: var(--space-2); }