/* ==========================================================================
   report.css — the report itself: hero, chapter openers, body rhythm,
   pull-quotes, the pricing ladder, appendix, diagnostic placeholder.
   Accent is reserved for chapter NUMERALS and the headline figure only.
   ========================================================================== */

/* --- Document masthead ---------------------------------------------------- */
.masthead {
  padding-block: var(--space-s);
  border-bottom: var(--rule-hair) solid var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
}
.masthead__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.masthead__kicker {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Overline (small caps label) ----------------------------------------- */
.overline {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft); /* AA: ink-faint (3.34:1) fails on small caps; ink-soft is 6.53:1 */
}

/* ==========================================================================
   COVER / HERO
   ========================================================================== */
.cover {
  min-height: 92svh;            /* dvh-equivalent for viewport-honest hero */
  min-height: 92dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-block: var(--space-l) var(--space-xl);
}

.cover__inner {
  align-self: center;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cover__overline { margin-bottom: var(--space-m); }

/* The oversized ₱5M / 90 DAYS lockup. */
.cover__lockup {
  font-family: var(--font-display);
  line-height: 0.86;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72;
}
.cover__figure {
  display: block;
  font-size: var(--step-display);
  font-weight: 580;
  color: var(--accent);                 /* the only colored figure */
}
.cover__days {
  display: block;
  font-size: clamp(2rem, 0.9rem + 5.4vw, 6.4rem);
  font-weight: 500;
  color: var(--ink);
  margin-top: 0.04em;
}
.cover__days .amp {
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 440;
  padding-inline: 0.12em;
}

.cover__premise {
  font-family: var(--font-display);
  font-weight: 440;
  font-size: var(--step-2);
  line-height: 1.28;
  letter-spacing: -0.006em;
  color: var(--ink);
  max-width: 32ch;
  margin-top: var(--space-l);
}

.cover__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: var(--rule-hair) solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.cover__meta .dot { color: var(--ink-faint); }
.cover__meta-byline { font-weight: 600; color: var(--ink); }

/* ==========================================================================
   SECTION + CHAPTER STRUCTURE
   ========================================================================== */
.report-section { padding-block: var(--space-2xl); }

/* Executive summary sits on a slightly sunk panel to set it apart. */
.exec {
  background: var(--paper-sunk);
  border-block: var(--rule-hair) solid var(--rule);
}
.exec__overline { margin-bottom: var(--space-s); }
.exec__title {
  font-size: var(--step-4);
  margin-bottom: var(--space-l);
}
.exec p + p { margin-top: var(--space-s); }
.exec .lead {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: var(--step-2);
  line-height: 1.32;
  letter-spacing: -0.004em;
}

/* --- Chapter opener ------------------------------------------------------- */
.chapter { padding-block: var(--space-2xl); }
.chapter + .chapter { border-top: var(--rule-hair) solid var(--rule); }

.chapter__head { margin-bottom: var(--space-xl); }

.chapter__numeral {
  display: block;
  font-family: var(--font-display);
  font-weight: 520;
  font-size: var(--step-6);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--accent);                 /* numeral carries the accent */
  font-variation-settings: "opsz" 72;
}
.chapter__label {
  display: block;
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-xs);
}
.chapter__title {
  font-size: var(--step-4);
  max-width: 18ch;
}
.chapter__rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--rule-strong);
  width: clamp(3rem, 12vw, 6rem);
  margin-top: var(--space-m);
}

/* ==========================================================================
   BODY PROSE RHYTHM
   ========================================================================== */
.prose > * + * { margin-top: var(--space-s); }
.prose p { font-size: var(--step-0); }

/* The opening paragraph of a chapter reads a touch larger. */
.chapter__body > p:first-child {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
}

/* Step labels (RAI delegation system). h3 keeps the small bold sans look
   so heading order stays h2 -> h3 without changing the approved visual. */
.prose h3 {
  margin-top: var(--space-m);
  font-size: var(--step-0);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.prose ul { padding-left: 1.3em; }
.prose li { margin-top: var(--space-3xs); }
.prose li::marker { color: var(--ink-faint); }

/* The headline figure ₱5M when it appears inline in prose. */
.figure-accent { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Pull-quote ----------------------------------------------------------- */
.prose blockquote {
  margin-block: var(--space-l);
  padding-block: var(--space-2xs);
}
.prose blockquote p {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: var(--step-2);
  line-height: 1.32;
  letter-spacing: -0.004em;
  color: var(--ink);
  text-indent: -0.5em;             /* hang the opening quote mark */
}
.prose blockquote p::before { content: "\201C"; color: var(--ink-faint); }
.prose blockquote p::after  { content: "\201D"; color: var(--ink-faint); }

/* A note/aside inside prose (e.g. the 1-3-1 explainer) — quiet, no stripe. */
.prose .note {
  margin-block: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--paper-sunk);
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.55;
}
.prose .note p { font-size: var(--step--1); }

/* Spoken-line emphasis (the dialogue / quoted objections in ch.7). */
.prose .said {
  font-style: italic;
  color: var(--ink-soft);
}

/* ==========================================================================
   THE PRICING LADDER (table)
   ========================================================================== */
.ladder-wrap {
  margin-block: var(--space-l);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ladder {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}
.ladder caption {
  text-align: left;
  margin-bottom: var(--space-xs);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.ladder thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--space-2xs) var(--space-s) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--rule-strong);
  white-space: nowrap;
}
.ladder tbody td {
  padding: var(--space-xs) var(--space-s);
  border-bottom: var(--rule-hair) solid var(--rule);
  vertical-align: baseline;
}
.ladder tbody tr:last-child td { border-bottom: 0; }
.ladder .price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
/* Climbing the ladder: the final, richest row gets the accent figure. */
.ladder tbody tr:last-child .price { color: var(--accent); }

/* ==========================================================================
   APPENDIX
   ========================================================================== */
.appendix {
  background: var(--paper-sunk);
  border-top: var(--rule-hair) solid var(--rule);
}
.appendix__title { font-size: var(--step-3); margin-bottom: var(--space-s); }
.appendix .editor-note {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: var(--space-m);
}

/* ==========================================================================
   DIAGNOSTIC — placeholder section (interactive logic is a later phase)
   ========================================================================== */
.diagnostic {
  border-top: var(--rule-hair) solid var(--rule-strong);
  text-align: center;
}
.diagnostic__overline { margin-bottom: var(--space-s); }
.diagnostic__title {
  font-size: var(--step-4);
  margin-inline: auto;
  max-width: 16ch;
}
.diagnostic__intro {
  margin-inline: auto;
  max-width: 46ch;
  margin-top: var(--space-m);
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.45;
}
#diagnostic-app {
  margin-top: var(--space-xl);
  min-height: 4rem;            /* reserves space; interactive UI mounts here */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: var(--rule-hair) solid var(--rule);
  padding-block: var(--space-l);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  justify-content: space-between;
  align-items: baseline;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 34em) {
  .masthead__kicker { display: none; }
  .cover { min-height: 88svh; min-height: 88dvh; }
  .cover__premise { max-width: 22ch; }
}