/*
 * Long-form institutional narrative
 *
 * Scoped to decks/investor.html (and any future investor / procurement
 * memos in this folder). Distinct from sections.css — which composes the
 * marketing-site sections — to keep the narrative document on its own
 * typographic discipline:
 *
 *   - Reading measure max 720px (memo / briefing standard).
 *   - Headline scale capped lower than the marketing site (no 48-72px
 *     flourishes).
 *   - Generous vertical rhythm between sections; no slide-style
 *     compression.
 *   - No italic doctrine lines, no oversized aphorisms, no slide
 *     counters / Prev-Next chrome.
 */

/* ───────────────────────────────────────────────────────── */
/* Document frame                                            */
/* ───────────────────────────────────────────────────────── */

.doc {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s8) var(--s6) var(--s24) var(--s6);
}

.doc__nav {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--surface-base) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: var(--s3) var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

.doc__nav-back {
  font-family: var(--font-body);
  font-size: var(--type-body-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-normal) var(--ease-out),
              border-color var(--motion-normal) var(--ease-out);
}

.doc__nav-back:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.doc__nav-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

/* ───────────────────────────────────────────────────────── */
/* Title block                                               */
/* ───────────────────────────────────────────────────────── */

.doc__title-block {
  max-width: 720px;
  margin: var(--s16) 0 var(--s12) 0;
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--border);
}

.doc__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--s4) 0;
}

.doc__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin: 0 0 var(--s5) 0;
}

.doc__summary {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0.92;
  margin: 0;
  max-width: 60ch;
}

.doc__meta {
  margin-top: var(--s6);
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

/* ───────────────────────────────────────────────────────── */
/* Contents                                                  */
/* ───────────────────────────────────────────────────────── */

.doc__contents {
  max-width: 720px;
  margin: 0 0 var(--s16) 0;
  padding: var(--s6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.doc__contents-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--s4) 0;
}

.doc__contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: section;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2) var(--s8);
}

.doc__contents-list li {
  counter-increment: section;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.5;
}

.doc__contents-list li::before {
  content: counter(section, decimal-leading-zero) ".  ";
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
}

.doc__contents-list a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.doc__contents-list a:hover {
  border-bottom-color: var(--accent);
}

/* ───────────────────────────────────────────────────────── */
/* Sections                                                  */
/* ───────────────────────────────────────────────────────── */

.section--doc {
  max-width: 720px;
  margin: 0 0 var(--s20) 0;
  scroll-margin-top: var(--s12);
}

.section--doc__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  margin: 0 0 var(--s3) 0;
}

.section--doc__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin: 0 0 var(--s6) 0;
}

.section--doc__subhead {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: var(--s8) 0 var(--s3) 0;
}

.section--doc p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0 0 var(--s5) 0;
  max-width: 64ch;
}

.section--doc p.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: var(--s6);
  max-width: 60ch;
}

.section--doc ul,
.section--doc ol {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 var(--s6) 0;
  padding-left: var(--s6);
  max-width: 64ch;
}

.section--doc li {
  margin-bottom: var(--s2);
}

.section--doc li::marker {
  color: var(--text-secondary);
}

/* ───────────────────────────────────────────────────────── */
/* Evidence figure                                           */
/* ───────────────────────────────────────────────────────── */

.evidence {
  margin: var(--s8) 0 var(--s6) 0;
  max-width: 960px;
}

.evidence__frame {
  padding: var(--s6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.evidence__frame object,
.evidence__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  margin: 0 auto;
}

.evidence__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: var(--s3) 0 0 0;
  max-width: 64ch;
}

.evidence__caption-label {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  margin-bottom: 2px;
}

/* Runtime-screenshot placeholder block (image-not-yet) */
.evidence__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--s6);
  background: var(--surface-base);
}

/* ───────────────────────────────────────────────────────── */
/* Stats row — restrained, no big numbers                    */
/* ───────────────────────────────────────────────────────── */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s5);
  margin: var(--s6) 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-row__cell {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.stat-row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.stat-row__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.stat-row__note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ───────────────────────────────────────────────────────── */
/* Footer                                                    */
/* ───────────────────────────────────────────────────────── */

.doc__foot {
  max-width: 720px;
  margin: var(--s20) 0 0 0;
  padding-top: var(--s8);
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  justify-content: space-between;
}

.doc__foot a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.doc__foot a:hover {
  border-bottom-color: var(--accent);
}

/* ───────────────────────────────────────────────────────── */
/* Light register adjustments                                */
/* ───────────────────────────────────────────────────────── */

html[data-register="light"] .doc__nav {
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
}

html[data-register="light"] .evidence__frame {
  background: var(--surface-base);
}

/* ───────────────────────────────────────────────────────── */
/* Narrow viewport                                           */
/* ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .doc {
    padding: var(--s6) var(--s4) var(--s16) var(--s4);
  }

  .doc__title {
    font-size: 28px;
  }

  .section--doc__title {
    font-size: 22px;
  }

  .section--doc p,
  .section--doc ul,
  .section--doc ol {
    font-size: 16px;
  }

  .section--doc p.lede {
    font-size: 17px;
  }

  .doc__contents-list {
    grid-template-columns: 1fr;
  }
}