/* presentation skill — theme-base/base.css
 * Brand-neutral design system. Templates declare two anchors (--brand-primary,
 * --brand-accent) and the rest of the system derives from them via color-mix.
 *
 * Token layers (low → high specificity):
 *   1. Anchor      — template-supplied (--brand-primary, --brand-accent, --brand-logo)
 *   2. Neutral     — pure greys, brand-agnostic
 *   3. Brand scales— derived from anchors via color-mix(in oklch, ...)
 *   4. Semantic    — bg/fg/muted/surface/divider, point at neutral by default
 *   5. Type/space/radius/shadow/motion — primitives consumed by all layouts
 */

:root {
  /* ── 1. Anchors ── overridable by template */
  --brand-primary: #0E1335;
  --brand-accent:  #2563EB;
  --brand-logo:    none;

  /* ── 2. Neutral scale ── pure grey, never branded */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;
  --neutral-950: #09090B;

  /* ── 3. Brand scales ── derived from anchor via color-mix
   * 50–400 lighten toward white, 600–900 darken toward black, 500 = anchor. */
  --brand-primary-50:  color-mix(in oklch, var(--brand-primary)  6%, white);
  --brand-primary-100: color-mix(in oklch, var(--brand-primary) 12%, white);
  --brand-primary-200: color-mix(in oklch, var(--brand-primary) 24%, white);
  --brand-primary-300: color-mix(in oklch, var(--brand-primary) 40%, white);
  --brand-primary-400: color-mix(in oklch, var(--brand-primary) 60%, white);
  --brand-primary-500: var(--brand-primary);
  --brand-primary-600: color-mix(in oklch, var(--brand-primary) 92%, black);
  --brand-primary-700: color-mix(in oklch, var(--brand-primary) 80%, black);
  --brand-primary-800: color-mix(in oklch, var(--brand-primary) 65%, black);
  --brand-primary-900: color-mix(in oklch, var(--brand-primary) 50%, black);

  --brand-accent-50:  color-mix(in oklch, var(--brand-accent)  6%, white);
  --brand-accent-100: color-mix(in oklch, var(--brand-accent) 12%, white);
  --brand-accent-200: color-mix(in oklch, var(--brand-accent) 24%, white);
  --brand-accent-300: color-mix(in oklch, var(--brand-accent) 40%, white);
  --brand-accent-400: color-mix(in oklch, var(--brand-accent) 60%, white);
  --brand-accent-500: var(--brand-accent);
  --brand-accent-600: color-mix(in oklch, var(--brand-accent) 92%, black);
  --brand-accent-700: color-mix(in oklch, var(--brand-accent) 80%, black);
  --brand-accent-800: color-mix(in oklch, var(--brand-accent) 65%, black);
  --brand-accent-900: color-mix(in oklch, var(--brand-accent) 50%, black);

  /* ── 4. Semantic colors ── named for intent, point at neutrals by default
   * Templates may override directly for dark themes, brand-tinted surfaces, etc. */
  --brand-bg:      #FFFFFF;
  --brand-fg:      var(--neutral-900);
  --brand-muted:   var(--neutral-500);
  --brand-surface: var(--neutral-100);
  --brand-divider: var(--neutral-200);

  /* ── 5. Typography */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Menlo", "Consolas", monospace;

  --text-xs:    0.65em;
  --text-sm:    0.8em;
  --text-base:  1em;
  --text-lg:    1.2em;
  --text-xl:    1.5em;
  --text-2xl:   2em;
  --text-3xl:   2.6em;
  --text-4xl:   3.2em;
  --text-5xl:   4em;
  --text-6xl:   5em;
  --text-display: 7em;

  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  --tracking-tighter: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

  /* ── 6. Spacing */
  --space-0:   0;
  --space-px:  1px;
  --space-0\.5: 0.25rem;
  --space-1:   0.5rem;
  --space-2:   1rem;
  --space-3:   1.5rem;
  --space-4:   2.5rem;
  --space-5:   4rem;
  --space-6:   6rem;
  --space-7:   8rem;

  /* ── 7. Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── 8. Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.10), 0 20px 50px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.20), 0 30px 60px rgba(0,0,0,0.25);

  /* ── 9. Motion */
  --duration-fast:  120ms;
  --duration-base:  240ms;
  --duration-slow:  480ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Base reveal */
.reveal {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 400;
  color: var(--brand-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.reveal-viewport { background: var(--brand-bg); }

/* Default content padding inside every slide. Distinct from Reveal's `margin` config:
 *   `margin` (Reveal) = letterbox between canvas and viewport
 *   this padding   = inset between section content and canvas edge
 * Bottom reserve protects the chrome (logo + slide-number) anchored at canvas-bottom.
 * Special layouts (title/section/quote/closing) override below in layouts.css. */
.reveal .slides > section {
  padding: var(--space-4) var(--space-5) var(--space-5);
  box-sizing: border-box;
}

/* ── Typography */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  font-family: var(--font-display);
  color: var(--brand-fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3) 0;
  text-transform: none;
  font-feature-settings: "ss01", "cv11";
}
.reveal h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tighter); }
.reveal h2 { font-size: var(--text-2xl); font-weight: 600; }
.reveal h3 { font-size: var(--text-xl); font-weight: 600; }
.reveal h4 { font-size: var(--text-lg); font-weight: 600; }
.reveal h5 { font-size: var(--text-base); font-weight: 600; }
.reveal h6 { font-size: var(--text-sm);  font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-muted); }

.reveal p { line-height: var(--leading-normal); margin: 0 0 var(--space-2) 0; }

.reveal ul, .reveal ol {
  margin: 0 0 var(--space-2) 1.4em;
  line-height: var(--leading-normal);
}
.reveal li { margin-bottom: var(--space-1); }
.reveal li > ul, .reveal li > ol { margin-top: var(--space-1); margin-bottom: 0; }
.reveal ul li::marker { color: var(--brand-accent); }

.reveal a {
  color: var(--brand-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-fast) var(--ease-out);
}
.reveal a:hover { color: var(--brand-accent-700); }

.reveal strong { color: var(--brand-primary); font-weight: 700; }
.reveal em     { font-style: italic; }
.reveal small  { font-size: var(--text-sm); color: var(--brand-muted); }
.reveal hr     {
  border: 0;
  border-top: 1px solid var(--brand-divider);
  margin: var(--space-3) 0;
}

.reveal blockquote {
  border-left: 3px solid var(--brand-accent);
  margin: 0 0 var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--brand-surface);
  font-style: italic;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ── Code */
.reveal pre {
  background: var(--neutral-900);
  border-radius: var(--radius-md);
  font-size: 0.7em;
  line-height: var(--leading-normal);
  box-shadow: var(--shadow-md);
}
.reveal pre code {
  padding: var(--space-2);
  display: block;
  font-family: var(--font-mono);
}
.reveal :not(pre) > code {
  background: var(--brand-surface);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--brand-primary);
}

/* ── Tables */
.reveal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.reveal th {
  background: var(--brand-primary);
  color: #fff;
  text-align: left;
  padding: var(--space-1) var(--space-2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.reveal td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--brand-divider);
}
.reveal tr:nth-child(even) td { background: var(--brand-surface); }
.reveal tr:last-child td { border-bottom: 0; }

/* ── Text alignment utilities — composable on any block element.
 * `!important` is needed because Reveal's print stylesheet forces
 * `text-align: left !important` on every div/p/ol/ul, which would otherwise
 * override author intent (inline styles or any non-`!important` rule). */
.reveal .text-center { text-align: center !important; }
.reveal .text-right  { text-align: right !important; }
.reveal .text-left   { text-align: left !important; }

/* ── Image utilities (composable on any <img> or wrapper) */
.reveal .image-rounded img,
.reveal img.image-rounded { border-radius: var(--radius-md); }
.reveal .image-shadow img,
.reveal img.image-shadow  { box-shadow: var(--shadow-lg); }
.reveal .image-bleed img,
.reveal img.image-bleed   { width: 100%; height: 100%; object-fit: cover; }
/* Duotone — converts image to brand-primary tinted monochrome via filter chain */
.reveal .image-duotone img,
.reveal img.image-duotone {
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  background: var(--brand-primary-200);
}
/* Overlay — for headline-image style, applies a brand gradient scrim */
.reveal .image-overlay { position: relative; }
.reveal .image-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    color-mix(in oklch, var(--brand-primary) 75%, transparent) 100%
  );
  pointer-events: none;
}

/* ── Footer logo — pseudo on .slides (the canvas) so it inherits Reveal's scale+translate
 * transforms and stays at canvas-bottom-right regardless of the configured `margin`. */
.reveal .slides::after {
  content: '';
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 90px;
  height: 28px;
  background: var(--brand-logo) no-repeat right bottom / contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 10;
}

/* ── Slide number — JS hook in skeleton.html re-parents Reveal's .slide-number into .slides,
 * so it shares the same canvas coordinate system as the logo. */
.reveal .slides > .slide-number {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: auto;
  top: auto;
  background: transparent;
  color: var(--brand-muted);
  font-family: var(--font-body);
  font-size: 0.55em;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: var(--tracking-wide);
  padding: 0;
  pointer-events: none;
  z-index: 10;
}

/* Hide both chrome elements on cover, divider, and closing layouts.
 * !important is required because Reveal sets style="display: block" inline on .slide-number
 * via JS — only !important beats inline styles. */
.reveal .slides:has(> section.present[data-layout="title"])::after,
.reveal .slides:has(> section.present[data-layout="title"]) > .slide-number,
.reveal .slides:has(> section.present[data-layout="section"])::after,
.reveal .slides:has(> section.present[data-layout="section"]) > .slide-number,
.reveal .slides:has(> section.present[data-layout="closing"])::after,
.reveal .slides:has(> section.present[data-layout="closing"]) > .slide-number {
  display: none !important;
}

/* ── Progress bar (Reveal's built-in, themed to brand) */
.reveal .progress {
  color: var(--brand-accent);
  height: 2px;
}

/* ── Print
 * Reveal's vendored print stylesheet (`@media print { html:not(.print-pdf) … }`)
 * forces every heading to `color:#000!important` and `p/li/td` to `#000`. That
 * inverts the white-on-brand text we use on `section` and `closing` dividers
 * (whose gradient background is on the section element itself, so it still
 * renders blue) — producing black-on-blue when the user hits Cmd+P without
 * `?print-pdf`. Restore brand text colors here, and force color-adjust:exact
 * so the gradient prints reliably. */
@media print {
  .reveal section[data-layout="section"],
  .reveal section[data-layout="closing"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .reveal section[data-layout="section"] h1,
  .reveal section[data-layout="section"] h4,
  .reveal section[data-layout="closing"] h1 {
    color: #fff !important;
  }
  .reveal section[data-layout="section"] h2,
  .reveal section[data-layout="section"] h3 {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .reveal section[data-layout="section"] p,
  .reveal section[data-layout="section"] li,
  .reveal section[data-layout="closing"] h2,
  .reveal section[data-layout="closing"] p,
  .reveal section[data-layout="closing"] li {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .reveal section[data-layout="title"] h1 {
    color: var(--brand-primary) !important;
  }

  /* ── Cmd+P scope (browser print on the regular URL, NOT ?print-pdf)
   * Reveal forces every section to `display:block; position:static; padding:60px 20px;
   * transform:none`, which strips the flex centering from title/section/closing/quote/
   * big-stat/pull-quote and leaves their content top-aligned. Restore centering, then
   * frame every printed page with a hairline so it reads like a printed sheet. */

  /* Hairline frame — inset so it lives inside the printable area and survives
   * the printer's unprintable-margin clipping. */
  html:not(.print-pdf) .reveal .slides section {
    box-shadow: inset 0 0 0 1px var(--neutral-300) !important;
  }

  /* Make every section fill the printable page. Two effects, no layout
   * coercion:
   *   1. The inset frame above wraps the full page edge instead of
   *      shrink-wrapping content.
   *   2. The flex-centered layouts below have a tall container to center
   *      within (without a tall container, `justify-content: center` has
   *      nothing to center against). */
  html:not(.print-pdf) .reveal .slides section {
    min-height: 100vh !important;
    box-sizing: border-box !important;
  }

  /* Apply `--table-scale` to td/th in print. Reveal's print stylesheet forces
   * `font-size: 20pt !important` on all td, which would otherwise override
   * the screen rule. Scale font AND padding together — scaling font alone
   * leaves the row height dominated by static cell padding, dampening the
   * shrink effect. */
  html:not(.print-pdf) .reveal section[data-layout="table"] td,
  html:not(.print-pdf) .reveal section[data-layout="table"] th {
    font-size: calc(20pt * var(--table-scale, 1)) !important;
    padding: calc(0.5rem * var(--table-scale, 1)) calc(1rem * var(--table-scale, 1)) !important;
  }

  /* Reveal's print stylesheet forces every section to `display: block`,
   * stripping the on-screen flex centering from the layouts that use it.
   * Restore `display: flex` for those layouts ONLY — `flex-direction`,
   * `justify-content`, and `align-items` come from layouts.css unchanged.
   * Layouts not listed here stay as `display: block` and sit at the top of
   * the page; that preserves the natural flow of layouts that depend on it
   * (image-text and two-column rely on inline-block siblings, content/agenda/
   * comparison/metric-grid/code/table all flow as block stacks). */
  html:not(.print-pdf) .reveal .slides section[data-layout="title"],
  html:not(.print-pdf) .reveal .slides section[data-layout="section"],
  html:not(.print-pdf) .reveal .slides section[data-layout="closing"],
  html:not(.print-pdf) .reveal .slides section[data-layout="quote"],
  html:not(.print-pdf) .reveal .slides section[data-layout="big-stat"],
  html:not(.print-pdf) .reveal .slides section[data-layout="pull-quote"] {
    display: flex !important;
  }
}

/* ── Print-view polish (`?print-pdf` URL — Reveal stacks each slide as a `.pdf-page`)
 * Reveal sizes `.pdf-page` to slide dims and stacks them flush-left with no
 * separation. Center each one and draw a hairline frame so the print preview
 * reads like a sheaf of printed pages, not a left-aligned wall of slides.
 *
 * Why box-shadow inset and not `border`: Reveal forces `@page { margin: 0 }`,
 * so an outside border would land at the edge of paper and be clipped by the
 * printer's unprintable margin. An inset shadow draws the line *inside* the
 * page box and survives the print. */
html.print-pdf .reveal .slides .pdf-page {
  box-shadow: inset 0 0 0 1px var(--neutral-300);
}
@media screen {
  html.print-pdf .reveal .slides .pdf-page {
    margin: 16px auto !important;
  }
}

/* ── Trainer notes in print (Cmd+P on the regular URL)
 * skeleton.html injects a `.print-notes-page` div after each slide section that
 * has speaker notes. On screen they are invisible; Cmd+P produces the ordering
 * [Slide N][Notes N][Slide N+1][Notes N+1]…. Long notes flow across multiple
 * pages. Slides with no Note: block produce no extra page.
 *
 * Key mechanics:
 *   • `page-break-after: always` on sections forces each slide to end at a page
 *     boundary even if its content is shorter than the page height.
 *   • `page-break-before/after: always` on .print-notes-page ensures the notes
 *     block starts on a fresh page and the next slide starts on a fresh page.
 *   • `break-inside: auto` lets long notes flow across pages naturally. */
@media print {
  html:not(.print-pdf) .reveal .slides > section {
    page-break-after: always !important;
    break-after: always !important;
  }

  html:not(.print-pdf) .reveal .slides > .print-notes-page {
    display: block !important;
    page-break-before: always !important;
    break-before: always !important;
    page-break-after: always !important;
    break-after: always !important;
    page-break-inside: auto;
    break-inside: auto;
    overflow: visible !important;
    position: static !important;
    min-height: 0 !important;
    padding: 36px 56px 56px 56px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    font-size: 13pt;
    line-height: 1.5;
    color: #111;
    background: #fff;
  }

  html:not(.print-pdf) .reveal .slides > .print-notes-page ul,
  html:not(.print-pdf) .reveal .slides > .print-notes-page ol {
    margin: 0.4em 0 0.8em 0;
    padding-left: 1.4em;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page li {
    margin: 0.15em 0;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page a {
    color: var(--brand-primary, #0040c2);
    text-decoration: underline;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: #f4f4f4;
    padding: 1px 4px;
    border-radius: 3px;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page pre {
    font-size: 0.92em;
    line-height: 1.4;
    background: #f4f4f4;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: pre-wrap;
    overflow: visible;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page blockquote {
    margin: 0.6em 0 0.6em 1em;
    padding-left: 0.8em;
    border-left: 2px solid #a0a0a0;
    color: #444;
    font-style: italic;
  }

  /* Slide-context header: "Notes — slide N  <slide title>" */
  html:not(.print-pdf) .reveal .slides > .print-notes-page .print-notes-header {
    display: flex;
    align-items: baseline;
    gap: 0.8em;
    margin: 0 0 24px 0;
    padding: 0 0 10px 0;
    border-bottom: 1.5pt solid var(--brand-primary, #0040c2);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page .print-notes-label {
    font-size: 11pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary, #0040c2);
    white-space: nowrap;
  }
  html:not(.print-pdf) .reveal .slides > .print-notes-page .print-notes-title {
    font-size: 13pt;
    font-weight: 500;
    color: #222;
  }
}

/* ── Per-slide print chrome (logo + slide number)
 * skeleton.html injects `.print-logo` and `.print-slide-number` into every
 * section. On screen: invisible. In Cmd+P print: positioned at the same
 * bottom corners as the screen-mode chrome, once per slide page.
 *
 * The screen-mode equivalents (.slides::after logo and .slides > .slide-number)
 * are suppressed in print because they are positioned relative to .slides — a
 * container that spans all pages in Cmd+P mode, putting them at the very end
 * of the document rather than on each individual slide. */
@media print {
  /* Suppress the screen-mode global chrome */
  html:not(.print-pdf) .reveal .slides::after,
  html:not(.print-pdf) .reveal .slides > .slide-number {
    display: none !important;
  }

  /* Sections must be position:relative so absolute children anchor to the
   * slide page, not to the full-document .slides container. */
  html:not(.print-pdf) .reveal .slides > section {
    position: relative !important;
    /* Ensure background images (logos) print on all browsers. */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html:not(.print-pdf) .reveal .slides > section .print-logo {
    display: block !important;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 90px;
    height: 28px;
    background: var(--brand-logo) no-repeat right bottom / contain;
    opacity: 0.55;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html:not(.print-pdf) .reveal .slides > section .print-slide-number {
    display: block !important;
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 9pt;
    font-weight: 400;
    line-height: 28px;
    color: #71717A;
    letter-spacing: 0.05em;
    pointer-events: none;
  }
}

/* ── Layout-specific print overrides
 * Reveal's vendored print CSS forces several properties with !important on
 * heading and paragraph elements, which clobbers layout-specific design intent:
 *   • h1-h6: font-size (28–20pt), color (#000), text-align (left),
 *             letter-spacing (normal), line-height (normal)
 *   • p, li, td: font-size (20pt), color (#000)
 *
 * We beat these by pairing higher-specificity selectors with !important.
 * Reveal's rules are scoped to `html:not(.print-pdf) .reveal h1` — specificity
 * (0,2,1). Our layout-scoped rules use `html:not(.print-pdf) .reveal
 * section[data-layout="…"] h1` — specificity (0,3,2), which wins. */
@media print {
  /* big-stat — restore the dominant number that Reveal shrinks to 28pt */
  html:not(.print-pdf) .reveal section[data-layout="big-stat"] h1 {
    font-size: 96pt !important;
    color: var(--brand-primary, #0E1335) !important;
    text-align: center !important;
    letter-spacing: -0.025em !important;
    line-height: 0.9 !important;
    font-weight: 800 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html:not(.print-pdf) .reveal section[data-layout="big-stat"] h2,
  html:not(.print-pdf) .reveal section[data-layout="big-stat"] p {
    color: #71717A !important;
    text-align: center !important;
    font-weight: 400 !important;
  }

  /* quote / pull-quote — Reveal forces p { font-size: 20pt !important }, but
   * blockquote text lives in p elements. `inherit` re-derives the size from the
   * blockquote element (var(--text-xl) / var(--text-2xl)), restoring design intent. */
  html:not(.print-pdf) .reveal section[data-layout="quote"] blockquote p,
  html:not(.print-pdf) .reveal section[data-layout="pull-quote"] blockquote p {
    font-size: inherit !important;
    color: inherit !important;
  }
}

/* Screen: injected notes pages are invisible. The `@media print` block above
 * restores display:block. Using !important because Reveal may globally set
 * visibility rules on .slides children. */
@media screen {
  .reveal .slides > .print-notes-page,
  .reveal .slides > section .print-logo,
  .reveal .slides > section .print-slide-number {
    display: none !important;
  }
}