/*
 * Kapernikov Slides Theme for reveal.js
 * Ports Kapernikov branding from the Marp theme (kapernikov-theme.css)
 *
 * Recommended slide dimensions: 1280x720 (16:9), set via Reveal config:
 *   width: 1280, height: 720
 *
 * This is a standalone theme - do NOT import reveal.js default themes.
 */

/* ============================================
   Kapernikov brand fonts
   ============================================ */

@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-LightOblique.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-MediumOblique.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-BlackOblique.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

/* ============================================
   Kapernikov brand colors - from huisstijlgids v4
   ============================================ */

:root {
  --kpv-primary: #ba2415;
  --kpv-red-light: #D4734F;
  --kpv-red-lighter: #dd977a;
  --kpv-black: #000000;
  --kpv-dark-grey: #484847;
  --kpv-medium-grey: #818281;
  --kpv-light-grey: #bfc0c0;
  --kpv-very-light-grey: #ececec;
  --kpv-beige: #e2d7cd;
  /* Secondary - accents */
  --kpv-burgundy: #5a322b;
  --kpv-crimson: #901C1D;
  --kpv-tangerine: #DD8028;
  --kpv-amber: #FFB31B;
  --kpv-emerald: #1E9F49;
  --kpv-jade: #36b191;
  --kpv-petrol: #1D6E88;
  --kpv-cyan: #1F92A6;
}

/* ============================================
   Content wrapper - centers original 1280px layout
   within wider ultrawide slides
   ============================================ */

:root {
  --content-offset: 0px;
}

.content-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  height: 100%;
  box-sizing: border-box;
}

/* Default slides: flow content needs padding below the header chrome and is
   vertically centered (matches Marp's default section flex behavior). */
section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark) > .content-wrapper {
  padding: 130px 50px 30px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fullscreen slides have no wrapper (they manage their own layout); but if
   one is present it should span the full slide so videos/images can fill it. */
.fullscreen-dark > .content-wrapper,
.fullscreen-light > .content-wrapper {
  width: 100%;
  left: 0;
  transform: none;
}

/* ============================================
   Hide reveal.js chrome
   ============================================ */

.reveal .controls {
  color: var(--kpv-light-grey);
}

.reveal .progress {
  display: none;
}

/* ============================================
   Base slide styles
   ============================================ */

.reveal .slides section {
  font-family: 'Avenir LT Std', 'Avenir', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 1.3;
  color: var(--kpv-dark-grey);
  text-align: left;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Tighter paragraph rhythm — match Marp's compact spacing */
.reveal .slides section p {
  margin: 0.5em 0;
  line-height: 1.3;
}

/* Disable reveal.js vertical centering globally */
.reveal .slides {
  text-align: left;
}

.reveal .slides section.present {
  top: 0 !important;
}

/* ============================================
   Default slides (no class)
   White background, red header bar, logo top-left, h1 in bar
   ============================================ */

.reveal .slides section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark) {
  padding: 130px 50px 30px 50px;
  background: white;
  box-shadow: inset 0 110px 0 0 #ba2415;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
}

.reveal .slides section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark)::before {
  content: '';
  position: absolute;
  top: 55px;
  left: calc(var(--content-offset) + 40px);
  width: 58px;
  height: 58px;
  background-image: url('./assets/kapernikov-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.reveal .slides section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark) h1 {
  color: white;
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.5em;
  position: absolute;
  top: 55px;
  left: calc(var(--content-offset) + 130px);
  margin: 0;
  padding: 0;
  height: 58px;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

/* ============================================
   Headings (shared across slide types)
   ============================================ */

.reveal .slides section h2 {
  color: var(--kpv-primary);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.3em;
}

.reveal .slides section h3 {
  color: var(--kpv-dark-grey);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
}

/* ============================================
   .lead - Title / cover slides
   Solid red background, white text, centered, logo top-right
   ============================================ */

.reveal .slides section.lead {
  background: var(--kpv-primary);
  color: white;
  padding: 80px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: none;
}

.reveal .slides section.lead::before {
  display: none;
}

.reveal .slides section.lead img {
  position: absolute;
  top: 50px;
  right: 60px;
}

.reveal .slides section.lead h1 {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
  font-size: 3em;
  color: white;
  margin-bottom: 20px;
  height: auto;
  display: block;
}

.reveal .slides section.lead h2,
.reveal .slides section.lead p,
.reveal .slides section.lead strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.3em;
}

/* ============================================
   .section - Section transition slides
   White background, centered logo-header, h1 in grey box
   ============================================ */

.reveal .slides section.section {
  background: white;
  box-shadow: none;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 60px 100px;
  text-align: center;
}

.reveal .slides section.section::before {
  content: '';
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 400px;
  height: 144px;
  background-image: url('./assets/kapernikov-logo-header.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 30px;
  flex-shrink: 0;
}

.reveal .slides section.section h1 {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  color: var(--kpv-dark-grey);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  margin: 0;
  padding: 20px 80px;
  background-color: var(--kpv-very-light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.reveal .slides section.section h2 {
  color: var(--kpv-dark-grey);
  font-size: 1.3em;
  font-weight: normal;
  margin: 20px 0 0 0;
}

.reveal .slides section.section p {
  color: var(--kpv-medium-grey);
  font-size: 1.1em;
  margin-top: 20px;
}

/* ============================================
   .fullscreen-dark - Full-bleed dark image slides
   Transparent background, white text, no branding
   ============================================ */

.reveal .slides section.fullscreen-dark {
  padding: 60px;
  background: transparent;
  box-shadow: none;
  font-family: 'Avenir LT Std', 'Avenir', 'Segoe UI', Roboto, Arial, sans-serif;
  justify-content: center !important;
}

/* When fullscreen slides contain a video, remove all padding */
.reveal .slides section.fullscreen-dark:has(video) {
  padding: 0 !important;
  margin: 0 !important;
}

.reveal .slides section.fullscreen-dark::before {
  display: none;
}

.reveal .slides section.fullscreen-dark h1 {
  color: white;
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-size: 2.5em;
  margin-bottom: 20px;
  height: auto;
  display: block;
}

.reveal .slides section.fullscreen-dark h2 {
  color: rgba(255, 255, 255, 0.9);
}

.reveal .slides section.fullscreen-dark p,
.reveal .slides section.fullscreen-dark li {
  color: rgba(255, 255, 255, 0.9);
}

.reveal .slides section.fullscreen-dark strong {
  color: white;
}

/* ============================================
   .fullscreen-light - Full-bleed light image slides
   Transparent background, dark text, h1 in red, no branding
   ============================================ */

.reveal .slides section.fullscreen-light {
  padding: 60px;
  background: transparent;
  box-shadow: none;
  font-family: 'Avenir LT Std', 'Avenir', 'Segoe UI', Roboto, Arial, sans-serif;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center !important;
  height: 100%;
}

.reveal .slides section.fullscreen-light:has(video) {
  padding: 0 !important;
  margin: 0 !important;
}

.reveal .slides section.fullscreen-light::before {
  display: none;
}

.reveal .slides section.fullscreen-light h1 {
  color: var(--kpv-primary);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-size: 2.5em;
  margin-bottom: 20px;
  height: auto;
  display: block;
}

.reveal .slides section.fullscreen-light h2 {
  color: var(--kpv-primary);
}

.reveal .slides section.fullscreen-light p,
.reveal .slides section.fullscreen-light li {
  color: var(--kpv-dark-grey);
}

/* ============================================
   Animated agent-illustrator (.ail-anim-wrap)
   ============================================ */

/* Trigger spans drive reveal fragments; they must not occupy layout. */
.reveal .ail-trigger {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0 !important;
  visibility: hidden;
}

.reveal .ail-anim-wrap {
  width: 100%;
}

.reveal .ail-anim-wrap svg.ail-anim {
  display: block;
  margin: 0 auto;
  width: var(--ail-width, 900px);
  height: var(--ail-height, 480px);
  max-width: 100%;
  max-height: 100%;
}

/* Smooth transitions between keyframes. Must list every property AIL animates
   (transform/opacity for moving chips, width/height/fill/stroke for resizing
   shapes, d for connection paths that follow their endpoints) — otherwise this
   high-specificity rule clobbers AIL's own per-element transitions and motion
   degrades to an opacity-only fade. */
.reveal .ail-anim-wrap svg.ail-anim .kf-hidden,
.reveal .ail-anim-wrap svg.ail-anim [class*="kf-"],
.reveal .ail-anim-wrap svg.ail-anim .ai-shape,
.reveal .ail-anim-wrap svg.ail-anim .ai-connection {
  transition: transform 0.5s ease, opacity 0.5s ease, d 0.5s ease,
              width 0.5s ease, height 0.5s ease, fill 0.5s ease, stroke 0.5s ease;
}

/* ============================================
   Two-column layout (.twocol)
   ============================================ */

.reveal .slides section.twocol .columns {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.reveal .slides section.twocol .col-left {
  flex: 3;
  min-width: 0;
}

.reveal .slides section.twocol .col-right {
  flex: 2;
  min-width: 0;
  color: var(--kpv-dark-grey);
}

.reveal .slides section.twocol .col-right p {
  margin: 4px 0;
}

.reveal .slides section.twocol table {
  font-size: 0.6em;
}

/* Images inside columns honor the column width */
.reveal .slides section.twocol .columns img {
  max-width: 100%;
}

/* ============================================
   Blockquotes - highlight boxes
   ============================================ */

.reveal .slides section blockquote {
  background-color: var(--kpv-very-light-grey);
  border-left: 4px solid var(--kpv-primary);
  padding: 15px 20px;
  margin: 15px 0;
  font-style: normal;
  box-shadow: none;
  width: auto;
}

.reveal .slides section blockquote strong {
  color: var(--kpv-primary);
}

/* ============================================
   Tables
   ============================================ */

.reveal .slides section table {
  font-size: 0.8em;
  border-collapse: collapse;
  margin: 0 auto 1.5em auto;
}

.reveal .slides section table th {
  background-color: var(--kpv-dark-grey);
  color: white;
  padding: 10px 12px;
  text-align: left;
  border: none;
}

.reveal .slides section table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--kpv-light-grey);
  border-left: none;
  border-right: none;
  border-top: none;
}

.reveal .slides section table tr:nth-child(even) {
  background-color: var(--kpv-very-light-grey);
}

/* ============================================
   Code blocks
   ============================================ */

.reveal .slides section pre {
  background-color: var(--kpv-very-light-grey);
  border-left: 4px solid var(--kpv-primary);
  padding: 15px;
  font-size: 0.75em;
  box-shadow: none;
  width: auto;
}

.reveal .slides section code {
  font-size: 0.9em;
}

/* Two code blocks in one column need breathing room. Done in CSS rather than
   with a spacer element between the fences: any element there ends the
   markdown block, and reveal's highlight plugin then leaves both blocks
   unhighlighted. */
.reveal .slides section pre + pre {
  margin-top: 22px;
}

/* --- Syntax highlighting (reveal's highlight plugin, highlight.js classes) ---
   The shipped hljs themes (monokai, zenburn) are dark and fight the light code
   block above, so the token palette is brand colours instead of a vendor theme.
   Only the token classes are set — layout stays with the `pre` rule. */
.reveal .slides section pre code {
  background: none;
  padding: 0;
  max-height: none;
  color: #2b2724;
}

.reveal .slides .hljs-comment,
.reveal .slides .hljs-quote {
  color: var(--kpv-medium-grey);
  font-style: italic;
}

.reveal .slides .hljs-keyword,
.reveal .slides .hljs-selector-tag,
.reveal .slides .hljs-literal,
.reveal .slides .hljs-doctag {
  color: var(--kpv-primary);
}

.reveal .slides .hljs-string,
.reveal .slides .hljs-regexp,
.reveal .slides .hljs-addition {
  color: var(--kpv-emerald);
}

.reveal .slides .hljs-number,
.reveal .slides .hljs-built_in,
.reveal .slides .hljs-symbol,
.reveal .slides .hljs-bullet {
  color: var(--kpv-tangerine);
}

.reveal .slides .hljs-attr,
.reveal .slides .hljs-attribute,
.reveal .slides .hljs-title,
.reveal .slides .hljs-section,
.reveal .slides .hljs-name {
  color: var(--kpv-petrol);
}

.reveal .slides .hljs-type,
.reveal .slides .hljs-class .hljs-title,
.reveal .slides .hljs-params {
  color: var(--kpv-burgundy);
}

.reveal .slides .hljs-meta,
.reveal .slides .hljs-deletion {
  color: var(--kpv-crimson);
}

.reveal .slides .hljs-emphasis { font-style: italic; }
.reveal .slides .hljs-strong   { font-weight: 700; }

/* ============================================
   Lists
   ============================================ */

.reveal .slides section ul,
.reveal .slides section ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.reveal .slides section li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

.reveal .slides section ul ul,
.reveal .slides section ol ol,
.reveal .slides section ul ol,
.reveal .slides section ol ul {
  margin-top: 0.3em;
  font-size: 0.95em;
}

/* ============================================
   Images - fit within slide content area
   ============================================ */

.reveal .slides section img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  margin: 10px auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* Figure size scale — opt a slide into a different image cap than the default
   480px with `<!-- .slide: class="fig-lg" -->`. The title sits in the header
   bar (absolute), so a figure can use almost the full content area.
   Use fig-sm when text and a figure must share the slide. */
.reveal .slides section.fig-sm img  { max-height: 290px; }
.reveal .slides section.fig-md img  { max-height: 400px; }
.reveal .slides section.fig-lg img,
.reveal .slides section.bigfig img  { max-height: 552px; }   /* bigfig = legacy alias */

/* Absorb the ~60px of viewBox padding agent-illustrator emits around a short,
   wide diagram, so it sits closer to the slide text. Scoped to the ail image
   (src ail-*) so it does NOT pull other images on the same slide. */
.reveal .slides section.fig-flush img[src*="ail-"] {
  margin-top: -44px;
  margin-bottom: -36px;
}

/* Small muted source/citation line: <p class="ref">Source ...</p> */
.reveal .slides .ref {
  font-size: 0.42em;
  opacity: 0.55;
  font-style: italic;
  margin-top: 0.6em;
}

/* When multiple images are on one line (inline), shrink them */
.reveal .slides section p > img {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 10px;
}

/* If a paragraph has multiple images, constrain each */
.reveal .slides section p > img + img {
  max-height: 350px;
}

/* Lead slide logo - small, positioned */
.reveal .slides section.lead img {
  max-width: 180px;
  max-height: 80px;
}

/* ============================================
   Video
   ============================================ */

/* Video: fit within the content area (720px canvas minus padding) */
.reveal .slides section video {
  display: block;
  max-width: 90%;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* Black behind any video slide, so the bars left over when the recording's
   aspect ratio does not match the slide are black rather than white. */
.reveal .slides section.fullscreen-dark:has(video),
.reveal .slides section.fullscreen-light:has(video) {
  background: #000 !important;
}

/* Fullscreen slides with video — fill the entire slide.
   dark uses contain: a screen recording must keep its aspect ratio and must
   not be cropped. light keeps cover, where the video is a backdrop. */
.reveal .slides section.fullscreen-dark video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  margin: 0;
}

.reveal .slides section.fullscreen-light video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* ============================================
   Links
   ============================================ */

.reveal .slides section a {
  color: var(--kpv-primary);
  text-decoration: underline;
}

.reveal .slides section a:hover {
  color: var(--kpv-crimson);
}

/* Lead slides have a --kpv-primary background, and fullscreen-dark slides a
   dark one, so the default link colour is invisible on them. Autolinked email
   addresses in particular vanish entirely. */
.reveal .slides section.lead a,
.reveal .slides section.fullscreen-dark a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.reveal .slides section.lead a:hover,
.reveal .slides section.fullscreen-dark a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* ============================================
   .fullbleed - edge-to-edge image, NO header bar, NO logo
   (image story slides; the image covers the whole 1280x720 slide)
   ============================================ */

.reveal .slides section.fullbleed {
  padding: 0 !important;
  background: #000;
  box-shadow: none;
}

.reveal .slides section.fullbleed::before {
  display: none !important;
}

/* The h1 is kept in the markdown for the outline, but not shown. */
.reveal .slides section.fullbleed h1 {
  display: none !important;
}

.reveal .slides section.fullbleed > .content-wrapper {
  padding: 0 !important;
  margin: 0;
  width: 100%;
  height: 100%;
}

.reveal .slides section.fullbleed img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================
   Layout components
   Reusable blocks for content slides. Every one of them is a flex item of the
   section's column layout, so they set `flex: none` and manage their own width.
   Accent colour is passed in per instance:
       <div class="cards" style="--accent: var(--kpv-petrol)">
   ============================================ */

.reveal .slides section {
  --accent: var(--kpv-primary);
}

/* --- .eyebrow — small uppercase kicker above a block ------------------- */
.reveal .slides .eyebrow {
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.55em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kpv-medium-grey);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

/* --- .subtitle — muted one-liner under the (header-bar) h1 ------------- */
.reveal .slides .subtitle {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--kpv-dark-grey);
  margin: 0 0 0.3em;
  flex: none;
}

/* --- .tag — inline pill badge, tinted with the current accent ---------- */
.reveal .slides .tag {
  display: inline-block;
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.43em;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 9px;
  vertical-align: 3px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

/* --- .rows — labelled row list, hairline-separated --------------------- */
/*  <div class="rows">
      <div class="row">
        <span class="row-label">Where does work wait?<span class="tag">research</span></span>
        <span class="row-body">Not where it is busy. Where it queues.</span>
      </div>
    </div>
    Tune the label column with --row-label-w (default 400px; `auto` lets the
    label size itself, for two-column "term / source" lists).                */
.reveal .slides .rows {
  --row-label-w: 400px;
  flex: none;
  width: 100%;
  max-width: 1180px;
  margin: 30px auto 0;
  text-align: left;
}

.reveal .slides .row {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid #e2e4e6;
}

.reveal .slides .row-label {
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.76em;
  line-height: 1.2;
  color: var(--accent);
  width: var(--row-label-w);
  flex: none;
}

.reveal .slides .row-body {
  font-size: 0.68em;
  line-height: 1.32;
  color: #2b2724;
}

/* A right-aligned muted column, for a source or a figure per row. */
.reveal .slides .row-note {
  width: 340px;
  flex: none;
  font-size: 0.57em;
  line-height: 1.25;
  color: var(--kpv-medium-grey);
}

/* .rows.roomy — fewer, heavier rows (a list of 3-4 statements). */
.reveal .slides .rows.roomy .row       { padding: 18px 0; gap: 26px; }
.reveal .slides .rows.roomy .row-label { font-size: 1em; width: auto; flex: 1; }

/* --- .cards — 2-3 equal columns with a coloured top border ------------- */
/*  <div class="cards">
      <div class="card" style="--accent: var(--kpv-petrol)">
        <h2>Card title</h2>
        <p>Lead line.</p>
        <ul><li>Point.</li></ul>
        <div class="card-foot">Footnote pinned to the bottom.</div>
      </div>
    </div>                                                                 */
.reveal .slides .cards {
  display: flex;
  gap: 34px;
  justify-content: center;
  align-items: stretch;
  flex: none;
  width: 100%;
  max-width: 1180px;
  margin: 14px auto 0;
  text-align: left;
}

.reveal .slides .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--accent);
  background: #f6f7f8;
  border-radius: 8px;
  padding: 20px 24px;
}

.reveal .slides .card h2 {
  margin: 0 0 12px;
  font-size: 1.22em;
  line-height: 1.2;
  color: var(--accent);
}

.reveal .slides .card p  { margin: 0 0 12px; font-weight: 600; }
.reveal .slides .card ul { margin: 0; padding-left: 1.1em; line-height: 1.35; }

/* Pinned to the bottom of the card, whatever the card above it contains. */
.reveal .slides .card-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #e2e4e6;
  font-size: 0.6em;
  color: var(--kpv-medium-grey);
  line-height: 1.3;
}

/* .cards.dense — three or more cards, smaller type. */
.reveal .slides .cards.dense      { gap: 22px; font-size: 0.62em; }
.reveal .slides .cards.dense .card { padding: 20px 24px 21px; gap: 9px; }

/* --- .split — text beside a figure ------------------------------------- */
/*  <div class="split" style="--split: 1.3fr 1fr">
      <div>markdown text column</div>
      <div><img src="..."></div>
    </div>
    Both columns are vertically centred. Override --split to shift the weight;
    the default is an even 1:1.                                             */
.reveal .slides .split {
  --split: 1fr 1fr;
  display: grid;
  grid-template-columns: var(--split);
  gap: 44px;
  align-items: center;
  flex: none;
  width: 100%;
  max-width: 1200px;
  margin: 6px auto 0;
  text-align: left;
  min-height: 0;
}

/* Images inside a split fill their column rather than the slide default. */
.reveal .slides .split img {
  margin: 0 auto;
  max-height: 480px;
}

/* --- .postits — a row of sticky notes --------------------------------- */
/*  <div class="postits">
      <div class="postit">short note</div>
      <div class="postit">another one</div>
    </div>
    For a handful of observations that are jottings rather than an argument:
    the things you look for, the symptoms you keep seeing. Each note carries a
    slight, alternating tilt so the row reads as pinned paper. Keep the text to
    one or two lines — a note that needs a paragraph belongs in a card.       */
.reveal .slides .postits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  max-width: 1200px;
  margin: 10px auto 0;
  flex: none;
}

.reveal .slides .postit {
  flex: 1 1 0;
  min-width: 170px;
  padding: 16px 16px 18px;
  background: #fdf3c4;
  border: none;
  color: var(--kpv-dark-grey);
  font-size: 0.62em;
  line-height: 1.32;
  text-align: left;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.16);
  transform: rotate(-1.1deg);
}

.reveal .slides .postit:nth-child(even) {
  background: #fbe9a8;
  transform: rotate(1.3deg);
}

.reveal .slides .postit:nth-child(3n) {
  transform: rotate(-0.4deg);
}

/* --- .qr-panel — QR codes with a caption ------------------------------- */
/*  <div class="qr-panel">
      <div class="qr">
        <img src="assets/qr-slides.svg">
        <div class="qr-label">These slides</div>
        <div class="qr-url">slides.example.com/talk</div>
      </div>
    </div>
    Works on a .lead slide (white text) and on a normal slide (dark text) —
    the caption inherits the slide's colour. The QR keeps a white quiet zone
    either way, so it stays scannable on the red background. Size with
    --qr-size; use one .qr for a mid-talk "open this on your phone" slide and
    two for the closer (slides + review).                                   */
.reveal .slides .qr-panel {
  --qr-size: 290px;
  display: flex;
  gap: 84px;
  justify-content: center;
  align-items: flex-start;
  flex: none;
  margin-top: 34px;
}

.reveal .slides .qr {
  text-align: center;
}

/* Overrides both the default 480px image cap and .lead's 180x80 logo rule. */
.reveal .slides section .qr img {
  position: static;
  width: var(--qr-size);
  height: var(--qr-size);
  max-width: none;
  max-height: none;
  background: #fff;
  padding: 16px;
  border-radius: 14px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Big line above the code, for a single full-slide QR. */
.reveal .slides .qr-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 26px;
}

.reveal .slides .qr-label {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 600;
}

.reveal .slides .qr-url {
  font-size: 18px;
  opacity: 0.8;
}

/* A url directly under the code (no label between) needs its own breathing room. */
.reveal .slides .qr img + .qr-url {
  margin-top: 14px;
}

/* ============================================
   Mobile / portrait

   Here a media query used to hide every slide in portrait and paint a
   "rotate your device" prompt over the page. That is worse than the layout
   it replaced: a viewer who opens the link on a phone sees nothing at all,
   and rotating is not always an option (locked rotation, an embedded view,
   a narrow window on a desktop). The deck now scales down instead — small,
   but complete and scrollable. Better small than blank.

   The slide canvas follows the screen (see the height in build-slides.sh),
   so reveal scales to the width rather than clipping.
   ============================================ */

/* ============================================
   Print / PDF (?print-pdf, i.e. html.reveal-print)

   reveal's print sheet flattens every section with
   `.reveal-print .reveal .slides section { display: block !important;
   padding: 0 !important }`. That has the same specificity as the .lead /
   .section rules above and loads after them, so on a cover or divider slide
   it wins: the flex centring collapses to the top of the page, the h1 chip
   stretches the full width, and the padding goes. One extra class is enough
   to take those two properties back.
   ============================================ */
.reveal-print .reveal .slides section.lead,
.reveal-print .reveal .slides section.section {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.reveal-print .reveal .slides section.lead {
  padding: 80px !important;
}

.reveal-print .reveal .slides section.section {
  align-items: center !important;
  padding: 60px 100px !important;
}

/* A .fullbleed image is sized with height:100%, which needs an ancestor with a
   resolved height. In print the section's height comes from reveal's own
   layout, so a PORTRAIT photo otherwise falls back to its intrinsic height and
   spills onto a second page. Pin it to the page box. */
.reveal-print .reveal .slides section.fullbleed,
.reveal-print .reveal .slides section.fullbleed > .content-wrapper {
  height: 100% !important;
  overflow: hidden !important;
}

.reveal-print .reveal .slides section.fullbleed img {
  height: 100% !important;
  max-height: 100% !important;
}

/* Speaker notes in the PDF (--pdf-notes, i.e. showNotes in print).
   reveal still creates its on-screen notes panel, positioned just off the
   right edge of the viewport (left: 100%). In print that panel widens the
   document by a third and Chromium shrinks every page to fit it, so the
   slides print at ~72% in the top-left corner. The PDF carries its own notes
   elements (.speaker-notes-pdf); the panel has no business in print. */
.reveal-print .reveal > .speaker-notes {
  display: none !important;
}

/* A notes page (separate-page layout) reads as a handout page: brand type,
   a comfortable size, and margins that match the slides. */
.reveal-print .reveal .speaker-notes-pdf[data-layout="separate-page"] {
  font-family: 'Avenir LT Std', 'Avenir', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.45;
  /* !important: reveal's print sheet resets section and notes padding. */
  padding: 60px 80px !important;
  box-sizing: border-box !important;
}

/* Chrome scales EVERY page of a print down when the document's intrinsic
   (min-content) width is wider than the page. An in-flow block of fixed width
   holding an absolutely positioned child anchored near its right edge
   (right: 0, or left: 93% plus translateX) was enough to print a whole deck
   at ~72%, top-left, as soon as another slide followed that slide. Nothing actually overflows, so DOM measurements show
   nothing. Size containment on each PDF page (its size is set by reveal)
   keeps the slide contents out of that calculation. Not overflow: hidden on
   the root: that also fixes it for Chromium's --print-to-pdf, but makes a
   DevTools-protocol print (print-pdf.mjs) collapse to a single page. */
.reveal-print .reveal .slides .pdf-page {
  contain: strict;
}

/* ============================================================================
   Deck-local layout helpers, appended to the upstream
   kapernikov-slides-theme.css when a training is built (tools/build-training.sh).

   Only classes that are specific to these decks live here. A fix to the
   brand theme itself goes upstream (markdown-templates), not in this file.
   ============================================================================ */

/* Cap a single diagram's height on a slide (agent-illustrator pads the
   viewBox, so the image renders too tall).
   Use with <!-- .slide: class="tight-venn" -->. */
.reveal .slides section.tight-venn img {
  max-height: 400px;
}

/* Give a table's first column more room (e.g. label/term columns). */
.reveal .slides section.firstcol-wide table td:first-child,
.reveal .slides section.firstcol-wide table th:first-child {
  width: 38%;
}

/* Cap a small inline diagram so text + figure clear the title bar. */
.reveal .slides section.diagram-sm img {
  max-height: 290px;
}