@import url("./system-overflow.css");

/* layout-system.css — Phase A global rhythm, hierarchy and density rules.
   Presentation-only overrides. Content, colours and architecture stay locked. */

:root {
  --chapter-gap: clamp(80px, 9vw, 148px);
  --section-gap: clamp(52px, 5vw, 88px);
  --measure: 68ch;
}

/* ---------- 1. Reading rhythm: chapters breathe, sections inside tighten ---------- */
main > section[data-chapter] {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

main > section[data-chapter-start] {
  position: relative;
  margin-top: var(--chapter-gap);
  padding-top: var(--chapter-gap);
}

main > section[data-chapter-start]::before {
  content: "";
  position: absolute;
  inset: 0 clamp(22px, 5vw, 80px) auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(184, 138, 74, 0.55),
    rgba(216, 221, 216, 0.6) 42%,
    transparent
  );
}

main > section.hero[data-chapter-start] {
  margin-top: 0;
}
main > section.hero[data-chapter-start]::before {
  display: none;
}

/* ---------- 2. Hierarchy: three heading steps, one takeaway step, one body step ---------- */
main section h2 {
  font-size: clamp(1.95rem, 2.5vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

main section h3 {
  font-size: 1.22rem;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.005em;
}

main section h4,
main section .section-heading > p,
main section p {
  max-width: var(--measure);
}

main section p {
  font-size: 17.5px;
  line-height: 1.75;
  font-weight: 350;
}

main section .section-kicker,
main section .eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

/* the single "conclusion" step — executives can scan bold only */
main section article > strong,
main section .loop-return strong,
main section .early-evidence-card .ee-why {
  display: block;
  font-size: 1.06rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--green);
}

main section small,
main section .card-path {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 3. Four canonical block forms ---------- */
main section article,
main section .growth-pillar,
main section .proof-card,
main section .early-evidence-card {
  border-radius: 0;
  box-shadow: none;
}

main section .growth-pillar,
main section .proof-card,
main section .early-evidence-card,
main section .diagnosis-grid > *,
main section .signal-board > * {
  border: 1px solid rgba(11, 61, 53, 0.14);
  background: var(--paper-2);
  transition:
    border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

main section .growth-pillar:hover,
main section .proof-card:hover,
main section .early-evidence-card:hover,
main section .diagnosis-grid > *:hover,
main section .signal-board > *:hover {
  border-color: rgba(184, 138, 74, 0.5);
  background: var(--paper-2);
  transform: none;
}

main section .card-index,
main section .ee-index,
main section .pv-index {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--brass);
}

/* ---------- 4. Density ---------- */
main section .growth-loop > *,
main section .business-change-chain > *,
main section .predictive-flow > *,
main section .learning-strip > * {
  border-radius: 0;
  box-shadow: none;
}

main section .lifecycle-track {
  border-radius: 0;
}

main section table {
  border-collapse: collapse;
}
main section table tr,
main section table td,
main section table th {
  background: transparent !important;
}
main section table th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(11, 61, 53, 0.22);
}
main section table td {
  border-bottom: 1px solid rgba(216, 221, 216, 0.8);
  font-variant-numeric: tabular-nums;
}

main section .section-heading {
  margin-bottom: clamp(28px, 3vw, 48px);
}
main section .section-heading.compact {
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

main > section[data-chapter]:not([data-chapter-start]) .section-kicker {
  color: var(--muted);
}

main section .growth-loop-block,
main section .ecosystem-capacity,
main section .commercial-value-model,
main section .product-demand-loop,
main section .bi-board {
  box-shadow: none;
  border-radius: 0;
}

@media (max-width: 860px) {
  :root {
    --chapter-gap: 64px;
    --section-gap: 44px;
  }
  main section h2 {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main section .growth-pillar,
  main section .proof-card,
  main section .early-evidence-card,
  main section .diagnosis-grid > *,
  main section .signal-board > * {
    transition: none !important;
  }
}