/* Shared answer-first reference layer (/about, /wholehearted/about-this-show,
   and the Q&A region appended to /wholehearted).

   Loads AFTER styles.css, and on mission-lane pages after wholehearted.css.
   Every value resolves to a token already declared in styles.css :root —
   --coral, --ink, --muted, --line. No token is forked or re-declared.

   These pages are read, not scanned: one question per H2, plain prose under
   it, a generous measure, and no ornament competing with the sentence. */

.qa-measure { max-width: 68ch; }

.qa-hero {
  padding-top: clamp(32px, 6vw, 72px);
  padding-bottom: clamp(28px, 4vw, 48px);
}
.qa-hero__title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.14;
  max-width: 24ch;
}

/* The answer-first paragraph. Same coral rule as .wh-promise, held at body
   scale so it reads as an answer rather than as a pull quote. */
.qa-answer {
  border-left: 3px solid var(--coral);
  padding-left: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(24px, 3.5vw, 36px);
  max-width: 62ch;
  font-size: clamp(1.06rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink);
}

.qa-meta {
  margin-top: 30px;
  max-width: 62ch;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.qa-meta p { margin-bottom: 8px; }
.qa-meta p:last-child { margin-bottom: 0; }
.qa-updated { letter-spacing: .03em; }

/* One rule between every question keeps a long stack of H2s legible without
   adding a second background colour to the page. */
.qa-sections { padding-top: 0; }
.qa-block {
  padding-block: clamp(30px, 4.5vw, 50px);
  border-top: 1px solid var(--line);
}
/* Opens a Q&A region that already sits under its own eyebrow, so it needs
   neither the rule above it nor the leading space. */
.qa-block--first { border-top: 0; padding-top: 0; }
.qa-q {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.22rem, 2.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin-bottom: 18px;
  max-width: 30ch;
}
.qa-body {
  font-size: clamp(1.02rem, 1.9vw, 1.12rem);
  line-height: 1.75;
  color: #2A2A2A;
  margin-bottom: 1.15em;
  max-width: 68ch;
}
.qa-body:last-child { margin-bottom: 0; }
.qa-body strong { color: var(--ink); font-weight: 600; }
.qa-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: #F4F4F4;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .1em .38em;
}
.qa-body a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.qa-body a:hover { text-decoration-thickness: 2px; }

/* Closing line on a reference page. Quieter than .wh-close — this is the end
   of an answer, not the end of an invitation. */
.qa-close {
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4.5vw, 50px);
}
.qa-close__line {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  max-width: 24ch;
}

.qa-back { display: inline-block; margin-top: 28px; color: var(--muted); font-size: .95rem; text-underline-offset: 4px; }
.qa-back:hover { color: var(--coral); }

/* Mission lane: /wholehearted and its children already carry the tender
   register from wholehearted.css. The Q&A region only needs to sit on the
   same grey band the doors and invite sections use. */
.wh .qa-region { background: #FAFAFA; border-block: 1px solid var(--line); }