/* EdQuest classroom slide deck styles.
 *
 * Used inside <deck-stage> elements. The shadow-piercing
 * ::slotted(*) rules in deck-stage.js handle stacking + scaling.
 * This file just defines the *contents* of each slide.
 *
 * Authored at 1920×1080. Do not introduce media queries - the
 * deck-stage component scales the canvas uniformly.
 */

:root {
  --type-display: 168px;
  --type-hero: 120px;
  --type-title: 76px;
  --type-subtitle: 44px;
  --type-body: 30px;
  --type-small: 24px;
  --type-mono: 26px;
  --type-mono-sm: 24px;

  /* The frame every layout is set inside. Horizontal was 0 for a while, on
     the theory that full-bleed reads as confident; on a 1920-wide slide it
     just reads as a printing error, with headlines and body copy running
     into the trim on both sides and the EdQuest mark tucked into the corner.
     The layouts that genuinely need to bleed (cover-b's orange panel, the
     divider's ink field) set `padding: 0` on themselves and re-apply --pad-x
     to their inner boxes, so they are unaffected by this number. */
  --pad-x: 72px;
  --pad-top: 56px;
  --pad-bottom: 56px;
  /* Clearance a full-height layout has to leave under its content for the
     bottom chrome. The logo and slide number are absolutely positioned over
     the section and painted UNDER everything else (section > * gets
     position: relative), so a layout that stretches to the section's own
     bottom padding runs its last line straight through the EdQuest mark. That
     is 44px of offset plus a 44px mark plus a little air. Layouts whose
     content only reaches the bottom when it happens to be long do not need
     this; the ones that fill the height by construction do. */
  --chrome-clear: 108px;
  --gap-title: 56px;
  --gap-item: 28px;

  /* ---- Palette ----
   * Every colour in this file comes from a token here, which is what makes a
   * project theme (below) a block of eight values rather than a second
   * stylesheet. These are EdQuest's, and they are also the fallback: a deck
   * with no data-project renders exactly as it always has.
   *
   * `--accent` was called `--orange` until the themes arrived, which stopped
   * being a colour name and started being a lie the moment GardenCAD's deck
   * turned green.
   */
  --ink: #1a1715;
  --ink-soft: #3d3835;
  --ink-mute: #87807a;
  --paper: #faf7f1;
  --paper-2: #f0ebe0;
  --paper-3: #e6dfd1;
  --accent: #ff8844;
  --accent-deep: #d96321;
  /* Text set ON a filled accent field - cover-b's panel, mainly. Orange is
     light enough to take dark text; the green and the reds are not, so each
     theme states which way round it goes rather than every layout guessing. */
  --accent-fg: #1a1715;
  /* A CSS filter cannot take a colour variable, so the accent panel's logo
     gets a filter per theme instead: flattened to black on a light accent,
     black-then-inverted to white on a dark one. */
  --accent-logo-filter: brightness(0);
  --rule: rgba(26, 23, 21, 0.14);
  --rule-strong: rgba(26, 23, 21, 0.28);
  /* Text on the divider's ink field. Near-white in every theme, so no theme
     currently overrides these - they exist so the divider stops hard-coding
     one theme's paper colour in six places. */
  --on-ink: rgba(250, 247, 241, 0.78);
  --on-ink-mute: rgba(250, 247, 241, 0.55);
  --on-ink-rule: rgba(250, 247, 241, 0.18);
}

/* ===== Project themes =====
 *
 * EdQuest runs several projects, and a GardenCAD class that looks identical to
 * a fire-safety class tells the student nothing about which one they are in.
 * `data-project` comes off CourseTemplate.project (see apps/core/projects.py);
 * the slug there and the selector here are the same string, which is the one
 * coupling between the model and the stylesheet.
 *
 * Each block is only the tokens that differ. Type, spacing and every layout
 * are shared - these are the same slides in another set of clothes, not a
 * second deck design, and a project theme should never need a layout rule of
 * its own.
 *
 * Colours are each project's real product palette, taken from that project's
 * own stylesheet rather than invented here. (The marketing grid on /projects/
 * deliberately shows ResQ-R in grey instead of its red, because it sits beside
 * WHFD's near-identical red there. A deck is never next to another project's
 * deck, so it wears the real colour.)
 */

/* GardenCAD - leaf green on a cool paper. --leaf / --leaf-deep from the
   GardenCAD product stylesheet. */
deck-stage[data-project="gardencad"] {
  --accent-logo-filter: brightness(0) invert(1);
  --accent: #4a8a3e;
  --accent-deep: #2f6429;
  --accent-fg: #ffffff;
  --ink: #15190f;
  --ink-soft: #333a2c;
  --ink-mute: #78806f;
  --paper: #f8faf6;
  --paper-2: #e9f2e4;
  --paper-3: #dbe9d4;
  --rule: rgba(21, 25, 15, 0.14);
  --rule-strong: rgba(21, 25, 15, 0.28);
}

/* ResQ-R - the product's red, on the same warm paper the ResQ-R site uses. */
deck-stage[data-project="resqr"] {
  --accent-logo-filter: brightness(0) invert(1);
  --accent: #d11f27;
  --accent-deep: #9a0b22;
  --accent-fg: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #3a3a3c;
  --ink-mute: #85858a;
  --paper: #fbf8f4;
  --paper-2: #f4eae9;
  --paper-3: #ecdcda;
  --rule: rgba(26, 26, 26, 0.14);
  --rule-strong: rgba(26, 26, 26, 0.28);
}

/* FirePrevented - the EdQuest orange run hotter, on a warmer paper. Closest
   to the default of the four, which is right: it is the fire-safety material
   the default deck was designed around. */
deck-stage[data-project="fireprevented"] {
  --accent: #ff8844;
  --accent-deep: #c2521a;
  --accent-fg: #1a1715;
  --paper: #fdf8f3;
  --paper-2: #f7e9dc;
  --paper-3: #eed9c6;
}

/* Woodbury Heights Fire Department - department red on a cool grey paper, so
   it does not read as a warmer ResQ-R. */
deck-stage[data-project="whfd"] {
  --accent-logo-filter: brightness(0) invert(1);
  --accent: #c8102e;
  --accent-deep: #8f0a20;
  --accent-fg: #ffffff;
  --ink: #16181b;
  --ink-soft: #35383d;
  --ink-mute: #7d8189;
  --paper: #f8f9fa;
  --paper-2: #eceef1;
  --paper-3: #dee1e6;
  --rule: rgba(22, 24, 27, 0.14);
  --rule-strong: rgba(22, 24, 27, 0.28);
}

deck-stage section {
  background: var(--paper);
  color: var(--ink);
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===== Type ===== */
.deck-serif { font-family: 'Noticia Text', 'Iowan Old Style', Georgia, serif; }
.deck-sans  { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.deck-mono  { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

deck-stage .display {
  font-family: 'Noticia Text', Georgia, serif;
  font-size: var(--type-display);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
deck-stage .title {
  font-family: 'Noticia Text', Georgia, serif;
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
deck-stage .subtitle {
  font-family: 'Noticia Text', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-subtitle);
  line-height: 1.15;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: balance;
}
deck-stage .body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.42;
  color: var(--ink-soft);
  text-wrap: pretty;
  margin: 0;
}
deck-stage .small {
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
deck-stage .mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
deck-stage .mono-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--accent-deep);
}
deck-stage .accent { color: var(--accent-deep); }

/* ===== Chrome on every slide ===== */
deck-stage .chrome-top {
  position: absolute;
  top: 44px;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
deck-stage .chrome-top .crumb { display: flex; gap: 18px; align-items: center; }
deck-stage .chrome-top .crumb .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block; }
deck-stage .chrome-bottom {
  position: absolute;
  bottom: 44px;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono-sm);
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  white-space: nowrap;
}
deck-stage .logo-mark { height: 44px; opacity: 0.75; display: block; }

/* A lockup for the projects that have a product mark but no wordmark drawn at
   deck proportions. Setting the name in the deck's own faces beats scaling a
   web logo up to 44px: it reads as part of the deck rather than as artwork
   pasted onto it, and it works at both footer and cover size from one rule. */
deck-stage .logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0.75;
  color: inherit;
}
deck-stage .logo-glyph { height: 40px; width: auto; display: block; }
deck-stage .logo-word {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Cover scale: the serif name, because a cover is the one place the project is
   being introduced rather than referenced. */
deck-stage .logo-lockup--cover { gap: 22px; opacity: 1; }
deck-stage .logo-lockup--cover .logo-glyph { height: 84px; }
deck-stage .logo-lockup--cover .logo-word {
  font-family: 'Noticia Text', Georgia, serif;
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}
/* On the filled accent panel the mark is flattened the same way the EdQuest
   logo is, so a two-colour product mark does not fight the panel. */
deck-stage .logo-lockup--panel { color: var(--accent-fg); opacity: 0.9; }
deck-stage .logo-lockup--panel .logo-glyph { filter: var(--accent-logo-filter); }
/* Already drawn for the panel - see Project.deck_glyph. The filter flattens a
   mark to one colour, which is right for a glyph and destroys a picture; this
   has to match the specificity of the rule above it, or "none" loses. */
deck-stage .logo-lockup--panel .logo-glyph--final { filter: none; }
deck-stage .logo-lockup--cover .logo-glyph--final { height: 132px; }
/* The panel dims an ordinary mark so it sits back from the type. A finished
   one is already balanced against the panel and only looks faded. */
deck-stage .logo-lockup--panel:has(.logo-glyph--final) { opacity: 1; }
deck-stage .logo-lockup--light { color: var(--paper); opacity: 0.9; }
deck-stage .logo-lockup--light .logo-glyph { filter: brightness(0) invert(1); }
deck-stage .rule-thin { height: 1px; background: var(--rule); border: 0; margin: 0; }
deck-stage .rule-strong { height: 2px; background: var(--ink); border: 0; margin: 0; }
deck-stage .rule-accent { height: 3px; background: var(--accent); border: 0; margin: 0; width: 72px; }

/* ===== Watermark Q ===== */
deck-stage .watermark-q {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
deck-stage .watermark-q.tr { top: -120px; right: -160px; width: 920px; height: 920px; opacity: 0.07; }
deck-stage .watermark-q.br { bottom: -200px; right: -180px; width: 1000px; height: 1000px; opacity: 0.06; }
deck-stage .watermark-q.bl { bottom: -260px; left: -200px; width: 1100px; height: 1100px; opacity: 0.05; }
deck-stage .watermark-q.divider-bg { top: -180px; right: -240px; width: 1400px; height: 1400px; opacity: 0.1; }
deck-stage section > *:not(.watermark-q) { z-index: 1; }
deck-stage section > *:not(.watermark-q):not(.chrome-top):not(.chrome-bottom) { position: relative; }

/* ============================= COVERS ============================= */

/* Cover A - editorial split, big serif left */
deck-stage .cover-a { padding: 0; display: grid; grid-template-columns: 1fr; height: 100%; }
deck-stage .cover-a .inner { padding: 80px var(--pad-x) 80px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-sizing: border-box; }
deck-stage .cover-a .meta-top { display: flex; justify-content: space-between; align-items: flex-start; }
deck-stage .cover-a .logo { height: 96px; }
deck-stage .cover-a .stamp { border: 1px solid var(--ink); padding: 14px 22px; font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
deck-stage .cover-a h1.display { font-size: 140px; max-width: 1500px; }
deck-stage .cover-a .subtitle { margin-top: 32px; max-width: 1200px; font-size: 48px; }
deck-stage .cover-a .meta-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
deck-stage .cover-a .meta-bottom .lbl { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
deck-stage .cover-a .meta-bottom .val { font-family: 'Noticia Text', serif; font-size: 30px; color: var(--ink); }

/* Cover B - orange panel */
deck-stage .cover-b { padding: 0; display: grid; grid-template-columns: 720px 1fr; height: 100%; }
deck-stage .cover-b .panel { background: var(--accent); color: var(--accent-fg); padding: 80px 72px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }
deck-stage .cover-b .panel .logo { height: 120px; filter: var(--accent-logo-filter); opacity: 0.85; }
deck-stage .cover-b .panel .module { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.16em; text-transform: uppercase; }
deck-stage .cover-b .panel .module .big { display: block; font-family: 'Noticia Text', serif; font-size: 220px; line-height: 0.9; letter-spacing: -0.04em; font-weight: 500; text-transform: none; margin-top: 8px; }
deck-stage .cover-b .panel .panel-meta { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.7; white-space: pre-line; }
deck-stage .cover-b .right { padding: 100px 88px; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
deck-stage .cover-b .right .eyebrow { color: var(--accent-deep); }
deck-stage .cover-b .right h1 { font-size: 108px; }
deck-stage .cover-b .right .subtitle { font-size: 38px; max-width: 900px; }
deck-stage .cover-b .meta-row { display: flex; gap: 56px; padding-top: 24px; border-top: 1px solid var(--rule); margin-top: 16px; flex-wrap: wrap; }
deck-stage .cover-b .meta-row .val { font-family: 'Noticia Text', serif; font-size: 32px; margin-top: 8px; }

/* Cover C - centered editorial */
deck-stage .cover-c { padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; box-sizing: border-box; }
deck-stage .cover-c .top { width: 100%; padding: 56px var(--pad-x) 0; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
deck-stage .cover-c .body-center { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 0 var(--pad-x); box-sizing: border-box; }
deck-stage .cover-c .quoted { font-family: 'Noticia Text', serif; font-style: italic; font-weight: 400; font-size: 96px; line-height: 1.08; letter-spacing: -0.01em; max-width: 1500px; text-wrap: balance; }
deck-stage .cover-c .quoted .accent { font-style: normal; color: var(--accent-deep); }
deck-stage .cover-c .quoted::before { content: "\201C"; color: var(--accent); font-size: 200px; line-height: 0; vertical-align: -0.32em; margin-right: 12px; font-style: normal; }
deck-stage .cover-c .bottom { width: 100%; padding: 0 var(--pad-x) 56px; display: flex; justify-content: space-between; align-items: flex-end; box-sizing: border-box; }
deck-stage .cover-c .course-title { text-align: left; }
deck-stage .cover-c .course-title .ti { font-family: 'Noticia Text', serif; font-size: 36px; font-weight: 500; }
deck-stage .cover-c .course-title .su { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; white-space: nowrap; }

/* ============================= OBJECTIVES ============================= */
deck-stage .obj-grid { display: grid; gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
deck-stage .obj-grid.cols-1 { grid-template-columns: 1fr; }
deck-stage .obj-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
deck-stage .obj-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
deck-stage .obj-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
deck-stage .obj-grid .cell { padding: 56px 48px 64px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 28px; }
deck-stage .obj-grid .cell:nth-child(n+2) { padding-left: 48px; }
deck-stage .obj-grid .cell:last-child { border-right: 0; padding-right: 0; }
deck-stage .obj-grid .cell .num { font-family: 'JetBrains Mono', monospace; font-size: 64px; color: var(--accent-deep); line-height: 1; font-weight: 500; }
deck-stage .obj-grid .cell .verb { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
deck-stage .obj-grid .cell .text { font-family: 'Noticia Text', serif; font-size: 36px; line-height: 1.18; color: var(--ink); text-wrap: pretty; }

/* ============================= AGENDA ============================= */
deck-stage .agenda-list { display: flex; flex-direction: column; }
deck-stage .agenda-row { display: grid; grid-template-columns: 120px 1fr 220px 180px; align-items: baseline; gap: 48px; padding: 28px 0; border-top: 1px solid var(--rule); }
deck-stage .agenda-row:last-child { border-bottom: 1px solid var(--rule); }
deck-stage .agenda-row .n { font-family: 'JetBrains Mono', monospace; font-size: 32px; color: var(--accent-deep); font-weight: 500; }
deck-stage .agenda-row .t { font-family: 'Noticia Text', serif; font-size: 44px; font-weight: 500; color: var(--ink); }
deck-stage .agenda-row .k { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
deck-stage .agenda-row .d { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); color: var(--ink-soft); text-align: right; }

/* ============================= SECTION DIVIDER ============================= */
deck-stage .divider { padding: 0; background: var(--ink); color: var(--paper); height: 100%; box-sizing: border-box; }
deck-stage .divider .chrome-top, deck-stage .divider .chrome-bottom { color: var(--on-ink-mute); }
deck-stage .divider .chrome-top .crumb .dot { background: var(--accent); }
deck-stage .divider .inner { padding: 100px var(--pad-x); height: 100%; box-sizing: border-box; display: grid; grid-template-columns: 600px 1fr; gap: 80px; align-items: center; }
deck-stage .divider .big-num { font-family: 'Noticia Text', serif; font-size: 460px; line-height: 0.82; color: var(--accent); font-weight: 500; letter-spacing: -0.04em; }
deck-stage .divider .right { display: flex; flex-direction: column; gap: 40px; max-width: 1000px; }
deck-stage .divider .part-label { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
deck-stage .divider .part-title { font-family: 'Noticia Text', serif; font-size: 96px; line-height: 1; letter-spacing: -0.015em; font-weight: 500; }
deck-stage .divider .part-body { font-family: 'Noticia Text', serif; font-style: italic; font-size: 36px; line-height: 1.3; color: var(--on-ink); max-width: 880px; }
deck-stage .divider .ticks { display: flex; gap: 48px; padding-top: 32px; border-top: 1px solid var(--on-ink-rule); flex-wrap: wrap; }
deck-stage .divider .ticks .tick { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mute); }
deck-stage .divider .ticks .tick.on { color: var(--paper); }

/* ============================= KEY CONCEPT ============================= */
deck-stage .kc-a .term { font-family: 'Noticia Text', serif; font-size: 132px; line-height: 1; letter-spacing: -0.02em; font-weight: 500; }
deck-stage .kc-a .term .acc { color: var(--accent-deep); }
deck-stage .kc-a .pron { font-family: 'Noticia Text', serif; font-style: italic; font-size: 32px; color: var(--ink-mute); margin-top: 18px; }
deck-stage .kc-a .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: var(--gap-title); padding-top: 36px; border-top: 1px solid var(--rule); }
deck-stage .kc-a .col .lbl { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }
deck-stage .kc-a .col .definition { font-family: 'Noticia Text', serif; font-size: 38px; line-height: 1.22; color: var(--ink); }
deck-stage .kc-a .col .example { font-family: 'Noticia Text', serif; font-size: 34px; line-height: 1.28; color: var(--ink); background: var(--paper-2); padding: 28px 32px; border-left: 4px solid var(--accent); }
deck-stage .kc-a .col .example .who { display: block; font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: var(--type-mono-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 16px; }

deck-stage .kc-b .row { display: grid; grid-template-columns: 1fr 760px; gap: 80px; height: 100%; align-items: stretch; }
deck-stage .kc-b .row .text-col { display: flex; flex-direction: column; gap: 36px; padding-top: 20px; }
deck-stage .kc-b .row .text-col .term { font-family: 'Noticia Text', serif; font-size: 96px; line-height: 0.98; letter-spacing: -0.02em; font-weight: 500; }
deck-stage .kc-b .row .text-col .term .acc { color: var(--accent-deep); }
deck-stage .kc-b .row .text-col .lede { font-family: 'Noticia Text', serif; font-size: 36px; line-height: 1.28; color: var(--ink-soft); }
deck-stage .kc-b .row .text-col .bullets { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
deck-stage .kc-b .row .text-col .bullets .b { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); font-family: 'Noticia Text', serif; font-size: 28px; line-height: 1.3; color: var(--ink); }
deck-stage .kc-b .row .text-col .bullets .b .bn { font-family: 'JetBrains Mono', monospace; color: var(--accent-deep); font-size: 24px; }
deck-stage .kc-b .row .visual {
  background:
    repeating-linear-gradient(135deg, rgba(26,23,21,0.05) 0 1px, transparent 1px 14px),
    var(--paper-2);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  position: relative;
}
deck-stage .kc-b .row .visual .vlabel { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: flex; justify-content: space-between; }
deck-stage .kc-b .row .visual .vcenter { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; text-align: center; }
deck-stage .kc-b .row .visual .vcenter .vinst { font-family: 'JetBrains Mono', monospace; font-size: 28px; color: var(--ink-soft); letter-spacing: 0.06em; }
deck-stage .kc-b .row .visual .vcenter .vsub { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; }
deck-stage .kc-b .row .visual img.uploaded,
deck-stage .kc-b .row .visual video.uploaded { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A screen recording is mostly interface, and cover would crop the tool rail
   or the inspector off the edge - the parts a tutorial clip is usually about.
   Fit the whole frame instead and let the paper show behind it. */
deck-stage .kc-b .row .visual video.uploaded { object-fit: contain; background: var(--paper-2); }
/* And a drawn diagram is not a photograph either. `cover` crops a screenshot's
   edges, which is survivable; on a figure it takes the callout labels off the
   sides, which is the part the figure exists for. Fit the whole drawing and let
   it sit on the panel's own paper. Keyed on the extension because that is what
   distinguishes the two cases: captures are raster, figures are drawn. */
deck-stage .kc-b .row .visual img.uploaded[src$=".svg"] {
  object-fit: contain;
  background: var(--paper-2);
  padding: 24px;
  box-sizing: border-box;
}
/* The visual panel is square-ish, so a 16:9 clip fitted inside it would sit as
   a thin strip with half the panel empty above and below. An animated slide
   gets a wider panel and a shorter one, sized so the clip fills it. The text
   column keeps enough width for the lede and three bullets. */
deck-stage section.kc-b-anim .kc-b .row { grid-template-columns: 1fr 1040px; gap: 56px; }
deck-stage section.kc-b-anim .kc-b .row .visual { align-self: center; height: 585px; }
deck-stage section.kc-b-anim .kc-b .row .text-col .term { font-size: 82px; }
/* A drawn figure is landscape for the same reason a clip is, and wants the same
   panel: fitted into the square one it renders at about half size with a third
   of the panel empty above and below it. */
deck-stage section.kc-b-fig .kc-b .row { grid-template-columns: 1fr 900px; gap: 56px; }
deck-stage section.kc-b-fig .kc-b .row .visual { align-self: center; height: 520px; }
deck-stage section.kc-b-fig .kc-b .row .text-col .term { font-size: 82px; }
deck-stage section.kc-b-fig .kc-b .row .text-col .lede { font-size: 33px; }
deck-stage section.kc-b-fig .kc-b .row .text-col .bullets .b { font-size: 26px; }

deck-stage .kc-c { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding-top: 140px; padding-bottom: 140px; }
deck-stage .kc-c .top-rail { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
deck-stage .kc-c .top-rail .l { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
deck-stage .kc-c .top-rail .r { font-family: 'Noticia Text', serif; font-style: italic; font-size: 32px; color: var(--ink-mute); }
deck-stage .kc-c .statement { flex: 1; display: flex; align-items: center; padding: 48px 0; }
deck-stage .kc-c .statement p { font-family: 'Noticia Text', serif; font-size: 108px; line-height: 1.04; letter-spacing: -0.018em; font-weight: 500; margin: 0; text-wrap: balance; }
deck-stage .kc-c .statement p .acc { color: var(--accent-deep); font-style: italic; }
deck-stage .kc-c .attrib { display: flex; justify-content: space-between; align-items: baseline; padding-top: 32px; border-top: 2px solid var(--ink); }
deck-stage .kc-c .attrib .src { font-family: 'Noticia Text', serif; font-size: 30px; color: var(--ink); }
deck-stage .kc-c .attrib .src .who { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 6px; }
deck-stage .kc-c .attrib .pg { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); color: var(--ink-mute); letter-spacing: 0.1em; }

/* ============================= PROCEDURE ============================= */
deck-stage .proc-grid { display: grid; gap: 0; border-top: 2px solid var(--ink); }
deck-stage .proc-grid.cols-1 { grid-template-columns: 1fr; }
deck-stage .proc-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
deck-stage .proc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
deck-stage .proc-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
deck-stage .proc-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
deck-stage .proc-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
deck-stage .proc-step { padding: 36px 36px 40px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 22px; min-height: 460px; }
deck-stage .proc-step:nth-child(n+2) { padding-left: 36px; }
deck-stage .proc-step:last-child { border-right: 0; padding-right: 0; }
deck-stage .proc-step .top { display: flex; align-items: baseline; gap: 14px; }
deck-stage .proc-step .num { font-family: 'JetBrains Mono', monospace; font-size: 72px; color: var(--accent-deep); line-height: 1; font-weight: 500; }
deck-stage .proc-step .of { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); color: var(--ink-mute); letter-spacing: 0.1em; }
deck-stage .proc-step .verb { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
deck-stage .proc-step .heading { font-family: 'Noticia Text', serif; font-size: 36px; line-height: 1.1; font-weight: 500; color: var(--ink); }
deck-stage .proc-step .desc { font-family: 'Geist', sans-serif; font-size: 24px; line-height: 1.4; color: var(--ink-soft); }
deck-stage .proc-step .checkpoint { margin-top: auto; font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); padding-top: 18px; border-top: 1px dashed var(--rule); }
deck-stage .proc-step .checkpoint b { color: var(--accent-deep); font-weight: 500; }

/* ============================= PITFALLS ============================= */
deck-stage .pit-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
deck-stage .pit-head .h { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 14px; }
deck-stage .pit-head .h.bad::before { content: ""; width: 12px; height: 12px; background: var(--ink-mute); display: inline-block; }
deck-stage .pit-head .h.good::before { content: ""; width: 12px; height: 12px; background: var(--accent); display: inline-block; }
deck-stage .pit-list { display: flex; flex-direction: column; }
deck-stage .pit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
deck-stage .pit-row .bad { font-family: 'Noticia Text', serif; font-size: 28px; line-height: 1.22; color: var(--ink-mute); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-mute); }
deck-stage .pit-row .bad .nope { display: block; text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
deck-stage .pit-row .good { font-family: 'Noticia Text', serif; font-size: 28px; line-height: 1.22; color: var(--ink); }
deck-stage .pit-row .good .yep { display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px; }

/* ============================= DISCUSSION ============================= */
deck-stage .disc { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding-bottom: var(--chrome-clear); }
deck-stage .disc .top-rail { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-top: 60px; }
deck-stage .disc .top-rail .l { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); }
deck-stage .disc .top-rail .r { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.1em; color: var(--ink-mute); }
deck-stage .disc .question { flex: 1; display: flex; align-items: center; padding: 48px 0 32px; }
deck-stage .disc .question p { font-family: 'Noticia Text', serif; font-size: 104px; line-height: 1.04; letter-spacing: -0.018em; font-weight: 500; margin: 0; text-wrap: balance; }
deck-stage .disc .question p .acc { color: var(--accent-deep); }
deck-stage .disc .prompts { display: grid; gap: 0; padding-top: 28px; border-top: 2px solid var(--ink); }
deck-stage .disc .prompts.cols-1 { grid-template-columns: 1fr; }
deck-stage .disc .prompts.cols-2 { grid-template-columns: repeat(2, 1fr); }
deck-stage .disc .prompts.cols-3 { grid-template-columns: repeat(3, 1fr); }
deck-stage .disc .prompts.cols-4 { grid-template-columns: repeat(4, 1fr); }
deck-stage .disc .prompts .p { padding: 24px 32px 0 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
deck-stage .disc .prompts .p:nth-child(n+2) { padding-left: 32px; }
deck-stage .disc .prompts .p:last-child { border-right: 0; padding-right: 0; }
deck-stage .disc .prompts .p .pn { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; color: var(--accent-deep); }
deck-stage .disc .prompts .p .pt { font-family: 'Noticia Text', serif; font-size: 26px; line-height: 1.3; color: var(--ink-soft); font-style: italic; }

/* ============================= SUMMARY ============================= */
deck-stage .sum-head { display: flex; justify-content: space-between; align-items: baseline; }
deck-stage .sum-head .recap { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); }
deck-stage .sum-list { display: flex; flex-direction: column; margin-top: 12px; }
deck-stage .sum-row { display: grid; grid-template-columns: 140px 1fr 320px; gap: 56px; align-items: baseline; padding: 36px 0; border-top: 1px solid var(--rule); }
deck-stage .sum-row:last-child { border-bottom: 1px solid var(--rule); }
deck-stage .sum-row .n { font-family: 'Noticia Text', serif; font-size: 92px; color: var(--accent-deep); line-height: 1; font-weight: 500; letter-spacing: -0.02em; }
deck-stage .sum-row .t { font-family: 'Noticia Text', serif; font-size: 44px; line-height: 1.15; font-weight: 500; color: var(--ink); }
deck-stage .sum-row .m { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); text-align: right; }

/* ============================= RESOURCES ============================= */
deck-stage .res-head { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); display: grid; grid-template-columns: 140px 1fr 220px 180px; gap: 32px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
deck-stage .res-head .h-lnk { text-align: right; }
deck-stage .res-list { display: flex; flex-direction: column; }
deck-stage .res-row { display: grid; grid-template-columns: 140px 1fr 220px 180px; gap: 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
deck-stage .res-row .tag { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
deck-stage .res-row .tag.star { color: var(--accent-deep); }
deck-stage .res-row .ti { font-family: 'Noticia Text', serif; font-size: 32px; line-height: 1.15; font-weight: 500; color: var(--ink); }
deck-stage .res-row .ti .au { display: block; font-family: 'Noticia Text', serif; font-style: italic; font-weight: 400; font-size: 24px; color: var(--ink-mute); margin-top: 4px; }
deck-stage .res-row .typ { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
deck-stage .res-row .lnk { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); color: var(--accent-deep); letter-spacing: 0.06em; text-align: right; }

/* ============================= CLOSING ============================= */
deck-stage .close { padding: 0; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
deck-stage .close .top { display: flex; justify-content: space-between; align-items: flex-start; padding: 60px var(--pad-x) 0; }
deck-stage .close .top .logo { height: 110px; }
deck-stage .close .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad-x); }
deck-stage .close .mid .end-stamp { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 32px; }
deck-stage .close .mid h2 { font-family: 'Noticia Text', serif; font-size: 168px; font-weight: 500; line-height: 0.92; letter-spacing: -0.02em; margin: 0; }
deck-stage .close .mid .sub { font-family: 'Noticia Text', serif; font-style: italic; font-size: 44px; color: var(--ink-soft); margin-top: 32px; max-width: 1200px; }
deck-stage .close .bot { display: grid; gap: 56px; padding: 0 var(--pad-x) 60px; border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 32px; }
deck-stage .close .bot.cols-1 { grid-template-columns: 1fr; }
deck-stage .close .bot.cols-2 { grid-template-columns: repeat(2, 1fr); }
deck-stage .close .bot.cols-3 { grid-template-columns: repeat(3, 1fr); }
deck-stage .close .bot.cols-4 { grid-template-columns: repeat(4, 1fr); }
deck-stage .close .bot .b { display: flex; flex-direction: column; gap: 8px; }
deck-stage .close .bot .b .lbl { font-family: 'JetBrains Mono', monospace; font-size: var(--type-mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
deck-stage .close .bot .b .val { font-family: 'Noticia Text', serif; font-size: 30px; color: var(--ink); }