/* ============================================================
   SELF-HOSTED FONTS, AND THIS IS NOT A PERFORMANCE TWEAK.

   The rest of the site loads IBM Plex from the Google CDN
   (base.njk; self-hosting site-wide is still open, PRD §2).
   That is survivable for a web page and NOT survivable for a
   PDF, because the PDF is a file someone keeps.

   Proven on 2026-08-19, not theorised: the first CI-built field
   guide embedded DejaVu Sans and DejaVu Sans Mono, with no IBM
   Plex anywhere in it, while the same commit built locally
   embedded IBM Plex Mono. Same source, same script, two
   different documents — 5 pages and 274 KB against 6 pages and
   111 KB — and nothing failed. `networkidle0` plus
   `document.fonts.ready` does NOT guarantee a CDN webfont was
   fetched and applied; it only guarantees the browser stopped
   waiting.

   Serving the faces from our own origin makes the output the
   same on every machine. Declared here rather than in
   tokens.css so this stays scoped to the pages that carry
   guides, and doesn't pre-empt the site-wide decision.
   ============================================================ */

/* STATIC INSTANCES, NOT THE VARIABLE FONT, and that is the second
   half of the fix.

   Google Fonts now serves IBM Plex Sans only as a variable font.
   Chrome's PDF writer cannot embed a variable instance, so it
   emits the body copy as /Type3 glyph procedures instead: the
   text stops being text. It looks right and it is not
   selectable, not searchable, and not extractable — on a
   document whose whole purpose is to be kept and quoted, and
   which an LLM may be asked to read.

   The mono faces embedded correctly all along (CIDFontType2)
   precisely because Google still serves those as statics. That
   contrast is what identified the cause.

   These five files are the static instances from IBM's own
   release (github.com/IBM/plex v6.4.1, OFL 1.1). Keep them
   static. Swapping in a variable file would silently turn the
   PDFs back into pictures of words. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* ============================================================
   Field guides and training guides.

   Loaded by any page that sets `guidesCss: true`, the same
   opt-in pattern transcript.css uses.

   The @media print block at the bottom is not a nicety: it is
   what scripts/build-guides.mjs renders both PDFs
   through. Changing screen styles here is safe; changing the
   print block changes the downloads.
   ============================================================ */

.tg-head__meta {
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.tg-download { margin-bottom: var(--space-2xl); }

.tg-summary {
  font-size: var(--t-body-lg-size);
  line-height: 1.6;
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}

/* The most perishable thing on the page. Given a hard edge so a
   reader skimming for "what changed" finds it without reading. */
.tg-change {
  border-left: var(--rule-accent) solid var(--accent);
  background: var(--bg-sunken);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.tg-change__label { color: var(--accent); margin-bottom: var(--space-xs); }
.tg-change p { margin: 0; max-width: var(--measure); }

.tg-section { margin-bottom: var(--space-2xl); }
.tg-section h2 {
  border-top: var(--border-w-strong) solid var(--text-primary);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tg-dl { margin: 0; }
.tg-dl dt {
  font-weight: 600;
  margin-top: var(--space-md);
}
.tg-dl dt:first-child { margin-top: 0; }
.tg-dl dd {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.tg-steps { list-style: none; margin: 0; padding: 0; counter-reset: tg-step; }
.tg-steps__item {
  counter-increment: tg-step;
  padding-left: var(--space-xl);
  position: relative;
  margin-bottom: var(--space-lg);
}
.tg-steps__item::before {
  content: counter(tg-step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}
.tg-steps__step { font-weight: 600; }
.tg-steps__item p { margin: var(--space-2xs) 0 0; color: var(--text-secondary); max-width: var(--measure); }

.tg-table { width: 100%; border-collapse: collapse; }
.tg-table th,
.tg-table td {
  text-align: left;
  padding: var(--space-xs) 0;
  border-bottom: var(--border-w) solid var(--border-default);
  vertical-align: top;
}
.tg-table th { font-weight: 500; color: var(--text-secondary); padding-right: var(--space-lg); }
.tg-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.tg-list { margin: 0; padding-left: var(--space-lg); }
.tg-list li { margin-bottom: var(--space-sm); max-width: var(--measure); }

.tg-note {
  margin-top: var(--space-md);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.tg-freshness p { max-width: var(--measure); margin-bottom: var(--space-md); }
.tg-sources__note { color: var(--text-muted); }


/* Typewriter body weight, and the hand for REMARKS. Both static,
   for the same embedding reason as everything above. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/caveat-400.woff2") format("woff2");
}

/* ============================================================
   FORM BLOCKS — the shared military-form vocabulary.

   Numbered fields in ruled boxes, mono labels in caps. It reads
   as a service form to the audience without imitating one: no
   seal, no agency, no form number, and the show's name sits in
   the header bar of every document that uses it.
   ============================================================ */

.formhead,
.aar__head {
  border: var(--border-w-strong) solid var(--text-primary);
  margin-bottom: var(--space-xl);
}

.formhead__bar,
.aar__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 6px 10px;
  background: var(--text-primary);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.formhead__org,
.aar__org { font-weight: 400; letter-spacing: .06em; }

/* Three columns, fixed. `auto-fit` gave four at Letter width and both headers
   carry three short fields, so the row ended in a dead cell with a hairline
   round it — which on a form reads as a box someone forgot to fill in. */
.formhead__grid,
.aar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) {
  .formhead__grid { grid-template-columns: 1fr; }
}

/* Ruled cells, hairlines shared between neighbours. */
.formfield {
  padding: 6px 10px 8px;
  border-top: var(--border-w) solid var(--border-default);
  border-right: var(--border-w) solid var(--border-default);
  min-width: 0;
}
.formfield--wide { grid-column: 1 / -1; }
.formfield__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.formfield__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.formfield__value--lg { font-size: 17px; font-weight: 600; }

/* ============================================================
   Training guide (document A) — a manual, on the web.
   Sans body for a long read; the form vocabulary above carries
   the register.
   ============================================================ */

.tg-download { margin-bottom: var(--space-2xl); }

/* Section numbers are COUNTED, not written into the template, and that is the
   only shape that stays correct. The numbers were hardcoded 1-5, 7, 8 with a
   genuine hole at 6, left behind when a section was removed. Renumbering by hand
   would have re-broken twice over: `#questions` is hidden in print, and
   `#renewal` is absent on any credential that never expires (a degree has no
   renewal block), so any fixed sequence shows a gap in one document or another.
   A counter can't, because a `display: none` section does not increment it and
   an absent one was never there. `E` and `R` stay literal, being deliberate
   exceptions rather than part of the run. */
body { counter-reset: tg-section; }
.tg-section--numbered { counter-increment: tg-section; }
.tg-section--numbered .tg-section__num::before { content: counter(tg-section); }

.tg-section h2 { display: flex; align-items: baseline; gap: var(--space-sm); }
.tg-section__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-inverse);
  background: var(--text-primary);
  padding: 2px 7px;
  flex: none;
}
.tg-lede { max-width: var(--measure); margin-bottom: var(--space-lg); }
.tg-subhead {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin: var(--space-lg) 0 var(--space-sm);
}

/* ============================================================
   After action report (document B) — the printed two-pager.

   TWO PAGES, LETTER, and the sizes below are what hold it there.
   Mono throughout the body: it is the typewriter register the
   form asks for, and it also makes overrun obvious, because mono
   can't quietly reflow its way onto a third page.
   ============================================================ */

.aar {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 8.6pt;
  line-height: 1.42;
  color: #14120C;
  background: #fff;
  max-width: 7in;
  margin: 0 auto;
  padding: var(--space-lg);
}

.aar__head { margin-bottom: 9pt; }

/* --- EXECUTIVE SUMMARY ---------------------------------------
   First block on the page, and the one that has to earn the
   second paragraph from a reader who hasn't heard the episode.

   Ruled top and bottom rather than boxed, deliberately. The
   CONDITIONS notice sits immediately below it and IS boxed, and
   two bordered blocks stacked read as a matched warning pair
   rather than as a summary followed by a caveat. */
.aar__summary {
  border-top: var(--border-w-strong) solid var(--text-primary);
  border-bottom: var(--border-w-strong) solid var(--text-primary);
  padding: 6pt 0 7pt;
  margin-bottom: 9pt;
}
.aar__summary-label {
  font-weight: 600;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4pt;
}
.aar__summary p { margin: 0 0 4pt; }
.aar__summary p:last-child { margin-bottom: 0; }
/* The guest's arc, a touch larger than the credential paragraph
   below it. That half is the hook, and it goes first. */
.aar__summary-lede { font-size: 9.2pt; }

/* --- NEXT STEP -----------------------------------------------
   The document's one call to action, and the reason it exists:
   this report sits between the episode page and the training
   guide, and its job is to move a reader on to the second.

   The link is UNDERLINED rather than coloured. This is a document
   people print, and an accent colour that survives as mid-grey
   reads as damage rather than as a link. */
.aar__next {
  border: var(--border-w-strong) solid var(--text-primary);
  border-left: var(--rule-accent) solid var(--accent);
  padding: 5pt 7pt 6pt;
  margin-bottom: 9pt;
}
.aar__next-label {
  display: block;
  font-weight: 600;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 2pt;
}
.aar__next-text { margin: 0 0 3pt; }
.aar__next-link {
  font-size: 9.4pt;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2pt;
}
.aar__next .aar__small { margin-top: 0; }

.aar__notice {
  border: var(--border-w) solid var(--text-primary);
  border-left: var(--rule-accent) solid var(--accent);
  padding: 5pt 7pt;
  margin-bottom: 9pt;
}
.aar__notice-label {
  display: block;
  font-weight: 600;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 2pt;
}
.aar__notice p { margin: 0; }

.aar__section { margin-bottom: 9pt; }
.aar__section h2 {
  font-family: var(--font-mono);
  font-size: 9.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: var(--border-w-strong) solid var(--text-primary);
  padding-bottom: 2pt;
  margin: 0 0 5pt;
  display: flex;
  align-items: baseline;
  gap: 6pt;
}
.aar__num {
  background: var(--text-primary);
  color: #fff;
  padding: 1pt 5pt;
  font-size: 8pt;
  flex: none;
}
.aar__lede { margin: 0 0 5pt; }
.aar__small { font-size: 7.6pt; line-height: 1.4; color: #46422F; margin: 4pt 0 0; }

/* --- AFTER ACTION REPORT ------------------------------------
   Back to the base three columns as of 2026-08-20, having spent
   a while at two.

   Two columns was the right call when the header ran six fields.
   At four it is actively worse: every value gets a half-width
   cell, wraps to two or three lines, and the block cost 133pt for
   four short facts. Three columns puts each of the three short
   ones on one line and gives Reporting a full-width row of its
   own, which is the only value here long enough to need it. Same
   information, a little over half the height, and the height is
   what the executive summary above it is paid for out of. */

/* Task and standard, stated before the table that specifies it.
   An AAR always names the standard it is measuring against, and
   without this line the table reads as trivia rather than as the
   bar the rest of the document is scored against. */
.aar__standard-task {
  margin: 0 0 5pt;
  font-size: 8.4pt;
}
.aar__standard-task strong {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 7.6pt;
}

/* SUSTAIN and IMPROVE side by side. Two columns rather than two
   stacked lists because the comparison is the point: a veteran
   scans left for what worked and right for what bit. Falls to one
   column on a narrow screen, though the only view that matters is
   the printed one. */
.aar__si {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--border-w-strong) solid var(--text-primary);
}
.aar__si-col { padding: 5pt 7pt 7pt; min-width: 0; }
.aar__si-col--improve { border-left: var(--border-w-strong) solid var(--text-primary); }
.aar__si-head {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 2.5pt;
  margin-bottom: 4pt;
  border-bottom: 0.5pt solid #C9C2AC;
}
/* The one place colour carries meaning in this document. Improve
   takes the accent because it is the column that costs money if
   ignored; sustain stays black so the pair doesn't read as a
   warning box with a companion. */
.aar__si-col--improve .aar__si-head { color: var(--accent); }
.aar__si .aar__ticks li { padding-left: 11pt; font-size: 8.2pt; }
.aar__si .aar__ticks li::before { width: 6pt; height: 6pt; }

/* IMPROVE IS THE GUEST'S, so it is set in the same hand and the
   same pen blue as REMARKS.

   This is the document's one attribution cue, and it now works
   in both directions: typed is the show, handwritten is the
   person who was there. Before 2026-08-20 the two findings
   columns were typographically identical, so nothing told a
   reader that SUSTAIN is our standard advice and IMPROVE is
   what this guest actually said.

   Smaller than REMARKS, which runs 11.8pt across the full page.
   This column is half as wide, and the block's height is the
   TALLER of the two columns, so every point here is paid for
   out of the two-page budget. The checkbox keeps its black
   rule: the box is part of the printed form, the writing in it
   is not. */
.aar__si-col--improve .aar__ticks li {
  font-family: "Caveat", "Segoe Script", cursive;
  /* EXACTLY THE SIZE OF REMARKS. Keep them equal.

     It ran a step smaller first, at 11pt against 12.5, and Stuart read it as a
     smaller voice rather than a narrower column, which is the one thing the
     hand is here to prevent: it is the same person talking, so it is the same
     size. 12.5 in both was tried and pushed the report to three pages, because
     this column is half the width and wraps roughly twice as often. 12 in both
     fits, so both moved rather than one.

     If you change this, change .aar__hand with it. */
  font-size: 12pt;
  line-height: 1.2;
  color: #1B2A4A;   /* pen blue, matching REMARKS */
}

@media (max-width: 560px) {
  .aar__grid--aar { grid-template-columns: 1fr; }
  .aar__si { grid-template-columns: 1fr; }
  .aar__si-col--improve {
    border-left: none;
    border-top: var(--border-w-strong) solid var(--text-primary);
  }
}

/* Checkbox-style list: the form idiom, and denser than bullets. */
.aar__ticks { list-style: none; margin: 0; padding: 0; }
.aar__ticks li {
  position: relative;
  padding-left: 14pt;
  margin-bottom: 2.5pt;
}
.aar__ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.5pt;
  width: 7pt;
  height: 7pt;
  border: 0.8pt solid var(--text-primary);
}

.aar__table { width: 100%; border-collapse: collapse; }
.aar__table th,
.aar__table td {
  text-align: left;
  vertical-align: top;
  padding: 2.5pt 0;
  border-bottom: 0.5pt solid #C9C2AC;
}
.aar__table th { font-weight: 600; padding-right: 8pt; width: 38%; }
.aar__table--cost th { width: 55%; font-weight: 400; }
.aar__table--cost td { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Section 3 runs cost rows then return rows in ONE table, so the turn from
   money out to money in needs marking. A rule on the first return row costs no
   vertical space, which a sub-heading would. Without it "US median, PMP:
   $135,000" sits directly under "GI Bill ceiling" and reads as another cost. */
.aar__row--return:first-of-type th,
.aar__row--return:first-of-type td { border-top: 1.5px solid var(--ink, #1a1a1a); }


/* --- REMARKS -------------------------------------------------
   The block label is the literal one from a service form
   (DD-214 block 18), and the hand is what sells it: a typed form
   with something written into it by the person who was there.
   Sized up, because handwriting needs more room than type to
   stay legible. */
.aar__remarks {
  border: var(--border-w-strong) solid var(--text-primary);
  padding: 6pt 8pt 8pt;
  margin-bottom: 9pt;
}
.aar__remarks-head {
  display: flex;
  align-items: baseline;
  gap: 6pt;
  font-weight: 600;
  font-size: 9.5pt;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 0.5pt solid #C9C2AC;
  padding-bottom: 3pt;
  margin-bottom: 5pt;
}
.aar__remarks-who {
  margin-left: auto;
  font-weight: 400;
  font-size: 7.6pt;
  text-transform: none;
  letter-spacing: 0;
  color: #46422F;
}
.aar__hand {
  font-family: "Caveat", "Segoe Script", cursive;
  /* 12pt, and IMPROVE is set to match. The guest gets ONE size wherever they
     appear, so nothing on the page implies one of their two blocks matters
     less than the other. It sat at 12.5 for most of 2026-08-20; both columns
     at 12.5 ran to three pages, so both came down together rather than
     splitting the difference and reintroducing the size gap.

     If you change this, change .aar__si-col--improve .aar__ticks li with it. */
  font-size: 12pt;
  line-height: 1.24;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #1B2A4A;   /* pen blue, against the black of the form */
}
.aar__hand li { margin-bottom: 3.5pt; padding-left: 10pt; text-indent: -10pt; }
.aar__hand li::before { content: "— "; }

.aar__foot { border-top: var(--border-w-strong) solid var(--text-primary); padding-top: 5pt; }
.aar__foot-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 3pt; }
.aar__foot .formfield { border-right: none; border-top: none; padding: 0 8pt 0 0; }
.aar__foot .formfield__value { font-size: 8pt; font-weight: 400; }

/* ============================================================
   The block on /certifications/{slug}/
   ============================================================ */
.cert-guide {
  border: var(--border-w-strong) solid var(--text-primary);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.cert-guide__kicker { color: var(--accent); margin-bottom: var(--space-xs); }
.cert-guide__title { margin: 0 0 var(--space-sm); }
.cert-guide__text { margin: 0 0 var(--space-lg); color: var(--text-secondary); max-width: var(--measure); }
.cert-guide__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* The same block sitting INSIDE an episode's show notes, between the first and
   second paragraphs. Every rule here is reasserting what the block already says,
   because `.prose h2` and `.prose p` are one specificity point heavier than the
   block's own classes and win no matter which stylesheet loads last. Without
   them the title picks up a var(--space-xl) top margin inside the border and the
   standfirst loses its gap above the buttons.

   The box also needs symmetric breathing room here: on /certifications/ it
   relies on `.block` for space above it, and in a paragraph flow there is
   nothing above it but a paragraph's margin. */
.prose .cert-guide { margin: var(--space-xl) 0; }
.prose .cert-guide__title { margin: 0 0 var(--space-sm); }
.prose .cert-guide__text { margin: 0 0 var(--space-lg); }

.cert-empty { color: var(--text-secondary); max-width: var(--measure); }

/* ============================================================
   PDF / print.

   This block is what scripts/build-guides.mjs renders both
   documents through. Screen changes above are safe; changes here
   change the downloads.
   ============================================================ */
@media print {
  @page { size: Letter; margin: 13mm 12mm; }

  html, body { background: #fff; }

  .site-header,
  .site-footer,
  .skip,
  .breadcrumb,
  .tg-download,
  .cta,
  .email {
    display: none !important;
  }

  /* AND THE WRAPPER THE TEMPLATE PUT .email IN, which is a separate element and
     the reason the CAPM guide shipped a blank eighth page on 2026-08-22.

     Hiding the component leaves its parent <section> in the flow as a
     zero-height block, and a zero-height block is still a box that has to land
     on a page. CAPM's references end 2.3pt above the bottom margin of page 7,
     so the empty box didn't fit and Chrome opened page 8 to put it on:
     3,011 characters on page 7, none at all on page 8, and the budget in
     scripts/build-guides.mjs counts physical pages.

     Measured, not reasoned about. Hiding this wrapper is the only change that
     takes CAPM from 8pp to 7pp, and it is a LATENT bug on all six guides.
     CAPM is simply the first one whose content ended close enough to the
     boundary to tip the box over: 2.3pt of headroom against 39pt on the next
     tightest guide.

     Two things a future editor will be tempted to do here, both wrong. Don't
     replace this with a margin rule: Chrome truncates a margin at the end of
     the flow, and 2000px of margin-bottom on .tg-sources still prints seven
     pages, which is why zeroing that margin looks like it does nothing. It
     takes a BOX. And don't delete this as redundant because .email is hidden
     just above: that rule hides the contents, this one hides the container.

     :has() rather than a class on the wrapper, because that wrapper is written
     into nine page templates and only this one is ever printed. It gets its
     own rule rather than joining the list above deliberately: a browser that
     doesn't understand :has() throws away the whole selector list it appears
     in, which would have un-hidden the site header and footer on anything
     printed from the browser. */
  .section:has(> .email) {
    display: none !important;
  }

  /* THE PAGE BUDGET, and this is where two whole sections pay for it.
     scripts/build-guides.mjs caps a training guide at MAX_TRAINING_GUIDE_PAGES.
     Both guides rendered at nine pages on 2026-08-21; these two rules are what
     brings them under. Measured, not estimated: hiding these takes PMP and MSPM
     from 9pp to 7pp.

     PRINT ONLY, and for #questions that is the entire point. The Q&A block is
     the AEO and citation surface — what gets a passage quoted is its shape, and
     crawlers and LLMs read the HTML, not the PDF. So it stays in the page,
     untouched, and only leaves the download. Never turn this into a template
     condition or a data cut.

     #episodes is four links, and links are dead on paper. The live list already
     sits on /certifications/{slug}/, in full rather than truncated to four.

     What is NOT here, deliberately: .tg-sources. Dropping the references was
     measured and would have bought a sixth-page budget, and it was rejected.
     Checkable facts are what make this site's independence claim credible
     rather than asserted, so the printed guide keeps its sources with the URLs
     spelled out. That is also why the freshness paragraph can go on saying
     "check the sources below". */
  #questions,
  #episodes { display: none !important; }

  .content-col,
  .section { max-width: none; padding: 0; margin: 0; }

  .tg-summary,
  .tg-dl dd,
  .tg-steps__item p,
  .tg-list li,
  .tg-note,
  .tg-lede,
  .tg-freshness p,
  .tg-change p { max-width: none; }

  /* Document A only. B sets its own type scale above and must not
     be overridden here, or the two-page budget goes. */
  .tg { font-size: 10.5pt; line-height: 1.45; }
  .tg h1 { font-size: 20pt; }
  .tg h2 { font-size: 12pt; }

  .aar { max-width: none; padding: 0; }

  /* Never split a step, a remark, a table row or a field block
     across a page break. */
  .tg-section h2,
  .aar__section h2,
  .tg-dl dt { break-after: avoid; }
  .tg-steps__item,
  .tg-remarks li,
  .tg-dl dt,
  .tg-dl dd,
  .tg-change,
  .aar__notice,
  .aar__remarks,
  .aar__head,
  /* The summary is the hook and the next step is the payoff.
     Either one split across the break stops working. */
  .aar__summary,
  .aar__next,
  /* The sustain/improve pair must never split: half a comparison on
     each side of a page break stops being a comparison. */
  .aar__si,
  /* Nor may a costs table, which orphaned its last two rows onto page
     two under their own headless stub and read as a fragment of a
     different document. */
  .aar__table,
  .formfield,
  .tg-table tr,
  .aar__table tr,
  .aar__ticks li,
  .aar__hand li { break-inside: avoid; }

  /* Printed links are dead, so the URL has to be on the paper.
     References block only: everywhere else it wrecks the prose. */
  .tg-sources a::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
}

/* Q&A. Visible text is the whole point — see the note in
   training-guide-body.njk about why there is no FAQPage schema
   under it. Each answer is styled to stand alone, because a
   passage that reads correctly lifted out of the page is what
   actually gets quoted. */
.tg-qa__item { margin-bottom: var(--space-lg); }
.tg-qa__q {
  font-size: var(--t-body-size);
  font-weight: 600;
  margin: 0 0 var(--space-2xs);
  max-width: var(--measure);
}
.tg-qa__a { margin: 0; color: var(--text-secondary); max-width: var(--measure); }

.tg-change__conflict {
  margin-top: var(--space-sm) !important;
  padding-top: var(--space-sm);
  border-top: var(--border-w) solid var(--border-default);
}