/* =====================================================================
   WHEN MACHINES DECIDE — deck design system (theme-driven)
   Canvas: 1920 x 1080 logical px, scaled to the viewport by .stage
   Every colour, font, radius and effect below is a token. The theme engine
   (assets/js/theme.js) rewrites the tokens on <html> (global) and on each
   .slide (section / slide overrides). Defaults = theme 01 Desert Executive.
   ===================================================================== */

:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #14110d; --surface: #1b1712; --panel: #241e17; --panel-2: #2d261d; --panel-3: #372e23; --panel-4: #423727;
  --line: rgba(255, 235, 205, 0.10); --line-2: rgba(255, 235, 205, 0.20);
  /* ink */
  --ink: #f5efe4; --ink-2: #d3c8b6; --ink-3: #a3957f; --ink-4: #6f6455;
  /* brand roles */
  --brand-primary: #c98a3a; --brand-secondary: #4f8a92; --brand-accent: #d9b26a; --brand-highlight: #efd39a;
  /* semantic series: threat warm · defense cool · OT amber · quantum mineral · identity magenta */
  --ai: #5b8fb9; --ot: #d47a2e; --def: #3f9a8a; --warn: #d8a839; --mag: #b8687e; --green: #6e9b4a; --quantum: #7fa8a3; --threat: #d96459;
  --ai-glow: #9dbfe0; --quantum-glow: #b7d4d0;
  --c1: var(--ai); --c2: var(--ot); --c3: var(--def); --c4: var(--warn); --c5: var(--mag); --c6: var(--green); --c7: var(--quantum); --c8: var(--threat);
  /* status (never reused for series) */
  --st-good: #4f9a4a; --st-warning: #e0a83a; --st-serious: #e07a4a; --st-critical: #cf4a44;
  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-heading: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font: var(--font-body);
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --font-svg: "Inter", "Segoe UI", system-ui, sans-serif;
  /* shape & effects */
  --radius: 14px; --radius-sm: 8px;
  --fx-shadow: 0.5; --fx-gradient: 0.45;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  --scrim: 0.62;
  --scrim-color: rgba(27, 23, 18, 0.62); --scrim-color-strong: rgba(27, 23, 18, 0.88); --scrim-color-soft: rgba(27, 23, 18, 0.25);
  --img-filter: saturate(0.82) contrast(1.08) brightness(0.94) sepia(0.06);
  --grid-line: rgba(255, 255, 255, 0);
  /* section identity (set per slide by the theme engine) */
  --accent: var(--brand-primary);
  --sec-tint: rgba(201, 138, 58, 0.07); --sec-tint-2: rgba(79, 138, 146, 0.045);
}
:root[data-mode="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: var(--ai-glow); }
button { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); }

/* ---------- stage & scaling ---------- */
.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
}
.slide {
  position: relative;
  width: 1920px; height: 1080px;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  transform-origin: center center;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 72px 96px 44px;
  gap: 24px;
  isolation: isolate;
  font-family: var(--font-body);
}
/* background: section tint + optional grid (both scale with --fx-gradient / texture tokens) */
.slide::before {
  content: "";
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1300px 760px at 88% -12%, var(--sec-tint), transparent 62%),
    radial-gradient(1000px 640px at -12% 112%, var(--sec-tint-2), transparent 62%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 96px 100%;
}
.slide[data-bg-style="flat"]::before { background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 96px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 96px 100%; }
.slide[data-bg-style="gradient"]::before {
  background:
    linear-gradient(160deg, var(--sec-tint) 0%, transparent 45%, var(--sec-tint-2) 100%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 96px 100%;
}
/* film grain / paper texture (pure CSS noise, no asset) */
.slide[data-texture="grain"]::after, .slide[data-texture="paper"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.16; mix-blend-mode: overlay;
}
.slide[data-texture="paper"]::after { opacity: 0.22; mix-blend-mode: multiply; }
.slide[data-projector="1"]::before, .slide[data-projector="1"]::after { display: none; }

/* ---------- header / footer ---------- */
.slide-head { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.kicker {
  font-size: 22px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  display: flex; align-items: center; gap: 16px;
}
.kicker::before { content: ""; width: 34px; height: 3px; background: var(--accent); border-radius: 2px; flex: none; }
.slide-title {
  font-family: var(--font-heading);
  font-size: 58px; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; margin: 0;
  max-width: 1600px;
}
.slide-subtitle { font-size: 28px; color: var(--ink-2); margin: 0; max-width: 1500px; line-height: 1.35; }
.slide-body { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.slide-body > * { min-height: 0; }
.slide-foot {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
  font-size: 19px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 16px;
}
.slide-foot .sources { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-foot .sources b { color: var(--ink-2); font-weight: 600; }
.slide-foot .meta { display: flex; gap: 22px; align-items: center; white-space: nowrap; }
.slide-foot .meta .sec { letter-spacing: 0.16em; text-transform: uppercase; font-size: 16px; }
.slide-foot .meta .num { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.badge-evidence {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.badge-evidence i { width: 8px; height: 8px; border-radius: 50%; background: var(--def); display: inline-block; }

/* message ribbon (ONE STRONG MESSAGE) */
.message {
  font-size: 34px; font-weight: 600; line-height: 1.3; color: var(--ink);
  padding: 22px 30px; border-left: 6px solid var(--accent); background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.message.small { font-size: 28px; padding: 16px 24px; }

/* ---------- classification badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1.5px solid currentColor; width: max-content;
}
.badge::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.badge.observed { color: var(--threat); }
.badge.research { color: var(--warn); }
.badge.illustrative { color: var(--ai-glow); }
.badge.disclosed { color: var(--st-serious); }
.badge.contested { color: var(--ink-3); }

/* ---------- visuals ---------- */
.visual { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; min-width: 0; overflow: hidden; }
.visual img, .visual svg, .visual object { width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; display: block; }
.visual.framed { background: color-mix(in srgb, var(--ink) 2%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.visual-caption { font-size: 20px; color: var(--ink-3); text-align: center; margin-top: 8px; }
svg.inline { font-family: var(--font-svg); }

/* ---------- media (photography) ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(135deg, var(--panel-2), var(--panel-3)); min-height: 0; min-width: 0; margin: 0; box-shadow: var(--shadow); }
.media img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: calc(var(--focal-x, 0.5) * 100%) calc(var(--focal-y, 0.5) * 100%);
  filter: var(--media-filter, var(--img-filter)); opacity: var(--media-opacity, 1);
}
.media.fit img { object-fit: contain; background: var(--panel-2); }
.media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.38) 100%); }
.media[data-overlay="none"]::after { display: none; }
.media[data-overlay="light"]::after { background: linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.25) 100%); }
.media[data-overlay="strong"]::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.62) 100%); }
.media .credit {
  position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 15px; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.03em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); font-family: var(--font-body);
}
.media .credit .ill { border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px; padding: 1px 7px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.media.missing img { display: none; }
.media.missing::after { display: none; }
.media.missing .credit { display: none; }
body.presenter .media.missing::before { content: "media missing"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); border: 2px dashed var(--line-2); border-radius: inherit; }
/* full-bleed background image + scrim (title, section, break, closing) */
.bg-media { position: absolute; inset: 0; z-index: -1; margin: 0; border-radius: 0; box-shadow: none; background: var(--surface); }
.bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--focal-x, 0.5) * 100%) calc(var(--focal-y, 0.5) * 100%); filter: var(--media-filter, var(--img-filter)); opacity: var(--media-opacity, 1); display: block; }
.bg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--scrim-color-strong) 0%, var(--scrim-color) 55%, var(--scrim-color-soft) 100%), linear-gradient(0deg, var(--scrim-color-strong) 0%, transparent 45%); }
.bg-media[data-overlay="light"]::after { background: linear-gradient(0deg, var(--scrim-color) 0%, var(--scrim-color-soft) 55%, transparent 100%); }
.bg-media[data-overlay="strong"]::after { background: linear-gradient(90deg, var(--scrim-color-strong) 0%, var(--scrim-color-strong) 50%, var(--scrim-color) 100%); }
.bg-media[data-overlay="center"]::after { background: radial-gradient(1200px 700px at 50% 55%, var(--scrim-color-strong) 0%, var(--scrim-color) 60%, var(--scrim-color-soft) 100%); }
.bg-media[data-overlay="none"]::after { display: none; }
.bg-media .credit { position: absolute; z-index: 2; left: auto; right: 40px; bottom: 26px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.03em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); font-family: var(--font-body); }
.bg-media .credit .ill { border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 1px 7px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.slide[data-mode="light"] .bg-media .credit { color: rgba(0, 0, 0, 0.55); text-shadow: none; }
.slide[data-mode="light"] .bg-media .credit .ill { border-color: rgba(0, 0, 0, 0.35); }
.slide[data-mode="light"] .media .credit { color: rgba(255, 255, 255, 0.85); }
.bg-media.missing { background: var(--surface); }
.bg-media.missing::after { display: none; }
/* non-destructive treatments (override the theme default) */
.media.t-none img, .bg-media.t-none img { filter: none; }
.media.t-documentary img, .bg-media.t-documentary img { filter: saturate(0.82) contrast(1.08) brightness(0.94) sepia(0.06); }
.media.t-warm img, .bg-media.t-warm img { filter: saturate(0.95) sepia(0.22) contrast(1.04); }
.media.t-cool img, .bg-media.t-cool img { filter: saturate(0.9) hue-rotate(-8deg) contrast(1.05) brightness(0.96); }
.media.t-mono img, .bg-media.t-mono img { filter: grayscale(1) contrast(1.12) brightness(0.92); }
.media.t-contrast img, .bg-media.t-contrast img { filter: contrast(1.25) saturate(0.9) brightness(0.9); }
.media.t-soft img, .bg-media.t-soft img { filter: saturate(0.75) contrast(0.95) brightness(1.02); }
.media.t-duotone img, .bg-media.t-duotone img { filter: grayscale(1) contrast(1.1) brightness(0.9); }
.media.t-duotone::before, .bg-media.t-duotone::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--accent); mix-blend-mode: color; opacity: 0.75; pointer-events: none; }
.media[style*="--media-filter"] img { filter: var(--media-filter); }

/* ---------- layout: title ---------- */
.slide.l-title { padding: 0; grid-template-rows: 1fr; }
.slide.l-title .hero-art { position: absolute; inset: 0; z-index: 0; }
.slide.l-title .hero-art img, .slide.l-title .hero-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.l-title .hero-copy { position: relative; z-index: 1; align-self: end; padding: 0 120px 96px; max-width: 1400px; }
.slide.l-title .hero-kicker { font-size: 22px; letter-spacing: 0.32em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 26px; }
.slide.l-title .hero-title { font-family: var(--font-display); font-size: 128px; line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 30px; }
.slide.l-title .hero-title .thin { font-weight: 300; color: var(--ink-2); }
.slide.l-title .hero-sub { font-size: 36px; color: var(--ink); font-weight: 500; line-height: 1.25; max-width: 1200px; margin: 0 0 18px; }
.slide.l-title .hero-tag { font-size: 24px; color: var(--ink-2); line-height: 1.4; max-width: 1200px; }
.slide.l-title .hero-event { position: absolute; right: 96px; bottom: 72px; z-index: 1; text-align: right; color: var(--ink-3); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; }
.slide.l-title .bg-media + .hero-copy .hero-title { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }

/* ---------- layout: question / statement ---------- */
.slide.l-question .slide-body { place-items: center; text-align: center; }
.q-text { font-family: var(--font-display); font-size: 84px; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; max-width: 1600px; margin: 0; }
.q-text em { font-style: normal; color: var(--brand-highlight); }
.q-sub { font-size: 30px; color: var(--ink-3); margin-top: 40px; max-width: 1400px; }
.slide.l-question .bg-media ~ .slide-body .q-text { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); }
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; height: 100%; }
.statement .part { padding: 56px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 2.5%, transparent); display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.statement .part.alt { border-color: var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)); }
.statement .label { font-size: 22px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.statement .text { font-family: var(--font-display); font-size: 52px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.statement .part.alt .text em { color: var(--brand-highlight); font-style: normal; }
.statement .sub { font-size: 26px; color: var(--ink-2); line-height: 1.4; }

/* ---------- layout: stats (reality check) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; height: 100%; }
.stat-tile {
  position: relative; padding: 34px 36px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; cursor: pointer; transition: transform .15s, border-color .15s;
  box-shadow: var(--shadow);
}
.stat-tile:hover, .stat-tile:focus-visible { border-color: var(--line-2); transform: translateY(-2px); outline: none; }
.stat-tile .value { font-family: var(--font-display); font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.stat-tile .value small { font-size: 40px; font-weight: 600; color: var(--ink-2); margin-left: 6px; font-family: var(--font-heading); }
.stat-tile .label { font-size: 27px; font-weight: 600; line-height: 1.3; }
.stat-tile .sub { font-size: 20px; color: var(--ink-3); line-height: 1.35; }
.stat-tile .src { font-size: 17px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; letter-spacing: 0.04em; }
.stat-tile .src::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tile-accent, var(--accent)); }
.stat-tile .trend { position: absolute; top: 30px; right: 30px; font-size: 20px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); }
.stat-tile .trend.up { color: var(--st-serious); }
.stat-tile .trend.down { color: var(--st-good); }
.stat-tile.hero { grid-column: span 1; }

/* ---------- layout: shift ---------- */
.shift { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; height: 100%; align-items: stretch; }
.shift .era { border-radius: var(--radius); padding: 48px 44px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 2%, transparent); display: flex; flex-direction: column; gap: 26px; position: relative; overflow: hidden; }
.shift .era .when { font-size: 22px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.shift .era .what { font-family: var(--font-display); font-size: 46px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.shift .era .how { font-size: 24px; color: var(--ink-2); line-height: 1.45; }
.shift .era .icon { margin-top: auto; height: 220px; display: grid; place-items: center; }
.shift .era .icon img, .shift .era .icon svg { height: 100%; width: auto; }
.shift .era.today { border-color: color-mix(in srgb, var(--ai) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 10%, transparent), transparent); }
.shift .era.tomorrow { border-color: color-mix(in srgb, var(--quantum) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--quantum) 12%, transparent), transparent); }
.shift .era .tag { position: absolute; top: 24px; right: 24px; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; }

/* ---------- layout: speaker ---------- */
.speaker { display: grid; grid-template-columns: 560px 1fr; gap: 64px; height: 100%; align-items: stretch; }
.speaker .portrait { border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); position: relative; display: grid; place-items: center; box-shadow: var(--shadow); }
.speaker .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--focal-x, 0.5) * 100%) calc(var(--focal-y, 0.35) * 100%); display: block; }
.speaker .portrait.editorial img { filter: var(--img-filter); }
.speaker .portrait.mono img { filter: grayscale(1) contrast(1.08) brightness(0.95); }
.speaker .portrait.duotone img { filter: grayscale(1) contrast(1.1) brightness(0.9); }
.speaker .portrait.duotone::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: color; opacity: 0.7; pointer-events: none; }
.speaker .portrait.fade::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2; background: linear-gradient(180deg, transparent, var(--scrim-color-strong)); pointer-events: none; }
.speaker .portrait .placeholder { text-align: center; color: var(--ink-3); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; padding: 40px; line-height: 1.7; }
.speaker .portrait .placeholder .initials { font-size: 160px; font-weight: 800; color: var(--ink-4); letter-spacing: -0.04em; line-height: 1; margin-bottom: 20px; }
.speaker .portrait .plabel { position: absolute; left: 24px; bottom: 22px; z-index: 3; font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.speaker .right { display: flex; flex-direction: column; gap: 28px; min-height: 0; }
.speaker .name { font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.speaker .position { font-size: 26px; color: var(--ink-2); line-height: 1.4; }
.speaker .position b { color: var(--ink); }
.speaker .areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.speaker .area { padding: 24px 26px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--area-accent, var(--accent)); }
.speaker .area h4 { margin: 0 0 12px; font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.speaker .area ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.speaker .area li { font-size: 22px; line-height: 1.35; padding-left: 22px; position: relative; }
.speaker .area li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--area-accent, var(--accent)); }
.speaker .creds { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.speaker .creds span { font-size: 19px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.speaker .placeholder-note { display: none; }

/* ---------- layout: agenda ---------- */
.agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; height: 100%; align-items: stretch; }
.agenda.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.agenda.cols-3 .act { padding: 44px 40px; gap: 22px; }
.agenda.cols-3 .act h3 { font-size: 40px; }
.agenda.cols-3 .act p { font-size: 25px; line-height: 1.45; }
.agenda.cols-3 .act .takeaway { font-size: 22px; }
.agenda .act { padding: 36px 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; border-top: 6px solid var(--act-accent, var(--accent)); }
.agenda .act .n { font-size: 20px; letter-spacing: 0.3em; color: var(--ink-3); font-weight: 700; }
.agenda .act h3 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.agenda .act p { margin: 0; font-size: 21px; color: var(--ink-2); line-height: 1.45; }
.agenda .act .takeaway { margin-top: auto; font-size: 19px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 16px; line-height: 1.4; }

/* ---------- layout: section divider ---------- */
.slide.l-section { grid-template-rows: 1fr; padding: 0; }
.slide.l-section .sec-wrap { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 140px; gap: 60px; }
.slide.l-section .sec-num { font-family: var(--font-display); font-size: 240px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--accent); opacity: 0.22; font-variant-numeric: lining-nums; }
.slide.l-section .sec-part { font-size: 24px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; font-weight: 700; }
.slide.l-section .sec-title { font-family: var(--font-display); font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin: 0 0 34px; }
.slide.l-section .sec-thesis { font-size: 32px; color: var(--ink-2); line-height: 1.4; max-width: 800px; }
.slide.l-section .sec-art { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; opacity: 0.9; z-index: -1; }
.slide.l-section .sec-art img, .slide.l-section .sec-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.l-section .bg-media ~ .sec-wrap .sec-num { opacity: 0.5; }
.slide.l-section .bg-media ~ .sec-wrap .sec-title { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }

/* ---------- layout: visual break (one image, one sentence) ---------- */
.slide.l-break { padding: 0; grid-template-rows: 1fr; }
.slide.l-break .break { position: relative; z-index: 1; height: 100%; display: grid; align-items: end; padding: 0 140px 120px; }
.slide.l-break .break.center { align-items: center; text-align: center; justify-items: center; padding: 0 200px; }
.slide.l-break .break-kicker { font-size: 20px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 26px; font-weight: 600; }
.slide.l-break .break-text { font-family: var(--font-display); font-size: 108px; font-weight: 600; line-height: 1.0; letter-spacing: -0.02em; margin: 0; max-width: 1450px; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.slide.l-break .break-text em { font-style: normal; color: var(--brand-highlight); }
.slide.l-break .break-sub { font-size: 30px; color: var(--ink-2); margin-top: 26px; max-width: 1200px; line-height: 1.4; }
/* teaser: same full-bleed treatment as a break, plus numbered hooks for the next session */
.slide.l-teaser { padding: 0; grid-template-rows: 1fr; }
.slide.l-teaser .teaser { position: relative; z-index: 1; height: 100%; display: grid; align-items: end; padding: 0 140px 100px; }
.slide.l-teaser .break-kicker { font-size: 20px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brand-highlight); margin-bottom: 22px; font-weight: 700; }
.slide.l-teaser .break-text { font-family: var(--font-display); font-size: 88px; font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 34px; max-width: 1450px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.slide.l-teaser .break-text em { font-style: normal; color: var(--brand-highlight); }
.slide.l-teaser .hooks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 1300px; }
.slide.l-teaser .hooks li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: baseline; font-size: 32px; line-height: 1.3; color: var(--ink); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); }
.slide.l-teaser .hooks .n { font-family: var(--mono); font-size: 22px; color: var(--brand-highlight); letter-spacing: 0.08em; }
.slide.l-teaser .break-sub { font-size: 24px; color: var(--ink-2); margin: 30px 0 0; letter-spacing: 0.06em; }

/* ---------- layout: challenge (artefact + framed question, two-step reveal) ---------- */
.challenge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; height: 100%; min-height: 0; }
.challenge .artefact { display: grid; grid-template-rows: auto minmax(0, auto); align-self: start; max-height: 100%; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; min-height: 0; box-shadow: var(--shadow); }
.challenge .ahead { display: flex; gap: 16px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: 15px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; }
.challenge .ahead .akind { color: var(--accent); font-weight: 800; }
.challenge .ahead .afile { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.challenge .ahead .asrc { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink-3); }
.challenge .abody { padding: 18px 0; overflow: hidden; min-height: 0; }
.challenge.mono .abody { font-family: var(--mono); font-size: 21px; line-height: 1.5; color: var(--ink); }
.challenge.mono .cl { position: relative; display: grid; grid-template-columns: 58px 1fr; padding: 0 22px 0 0; white-space: pre-wrap; }
.challenge.mono .cl .ln { text-align: right; padding-right: 16px; color: var(--ink-4); user-select: none; }
.challenge.mono .cl.cm .ct { color: var(--ink-3); }
.challenge.mono .cl .hlfx { position: absolute; inset: 0; background: color-mix(in srgb, var(--threat) 16%, transparent); box-shadow: inset 4px 0 0 var(--threat); pointer-events: none; }
.challenge.mono .cl .ln, .challenge.mono .cl .ct { position: relative; z-index: 1; }
.challenge.prose .abody { padding: 22px 30px; font-size: 23px; line-height: 1.45; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.challenge.prose .abody p { margin: 0; }
.challenge.prose .abody p.gap { height: 6px; }
.challenge.k-email .abody, .challenge.k-doc .abody { font-family: var(--font-body); }
.challenge.k-prompt .abody, .challenge.k-chat .abody { font-family: var(--mono); font-size: 21px; }
.challenge .mark { background: color-mix(in srgb, var(--threat) 22%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--threat) 22%, transparent); border-radius: 3px; color: var(--ink); transition: background-color .5s ease, box-shadow .5s ease; }
/* the tell is always readable — only its highlight waits for the verdict */
.slide .challenge .mark[data-reveal].rv-hidden { opacity: 1; transform: none; background: transparent; box-shadow: none; }
.challenge .qbox { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; min-height: 0; align-content: start; }
.challenge .qhead { display: flex; gap: 12px; align-items: center; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.challenge .qhead .qnum { color: var(--accent); }
.challenge .qhead .qmode { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.challenge .qhead .qthink { margin-left: auto; font-family: var(--mono); font-size: 16px; letter-spacing: 0.04em; color: var(--brand-highlight); text-transform: none; }
.challenge .question { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.challenge .question em { font-style: normal; color: var(--brand-highlight); }
.challenge .opts { display: flex; flex-direction: column; gap: 8px; min-height: 0; align-self: start; }
.challenge .opt { position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: start; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); transition: opacity .4s ease; }
.challenge .opt .key { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line-2); }
.challenge .opt .ot { font-size: 22px; line-height: 1.3; padding-top: 6px; }
.challenge .opt .on { font-size: 16px; color: var(--ink-3); margin-top: 3px; line-height: 1.3; }
.challenge .opt .verdict { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--surface); background: var(--def); margin-top: 3px; }
.challenge .qbox:has(.answer:not(.rv-hidden)) .opt.correct { border-color: color-mix(in srgb, var(--def) 60%, transparent); background: color-mix(in srgb, var(--def) 9%, var(--panel)); }
.challenge .qbox:has(.answer:not(.rv-hidden)) .opt:not(.correct) { opacity: 0.42; }
.challenge .kwprompt { padding: 14px 20px; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); font-size: 21px; color: var(--ink-2); line-height: 1.4; }
.challenge .kws { display: flex; flex-wrap: wrap; gap: 10px; }
.challenge .kw { padding: 8px 13px; border-radius: 10px; background: color-mix(in srgb, var(--def) 12%, transparent); border: 1px solid color-mix(in srgb, var(--def) 45%, transparent); font-size: 19px; font-weight: 700; color: var(--ink); }
.challenge .answer { display: flex; flex-direction: column; gap: 10px; }
.challenge .expl { padding: 14px 20px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--def) 10%, transparent); border: 1px solid color-mix(in srgb, var(--def) 40%, transparent); display: flex; gap: 14px; align-items: baseline; font-size: 19px; line-height: 1.36; }
.challenge .expl b { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--def); white-space: nowrap; }
.challenge .refs { display: flex; flex-wrap: wrap; gap: 8px; }
.challenge .ref { font-family: var(--mono); font-size: 14px; color: var(--ai-glow); background: color-mix(in srgb, var(--ai) 12%, transparent); padding: 4px 9px; border-radius: 6px; }
/* challenge · redacted text ({{answer}}): a black bar until the verdict, then the text */
.challenge .redact { display: inline; }
.challenge .redact .rq { display: inline-block; height: 0.95em; vertical-align: -0.1em; border-radius: 3px; background: var(--ink); opacity: 0.86; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); }
.challenge .redact .ra { background: color-mix(in srgb, var(--def) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--def) 18%, transparent); border-radius: 3px; color: var(--ink); font-weight: 600; }
.challenge .redact .ra.rv-hidden { display: none; }
.challenge .redact:has(.ra:not(.rv-hidden)) .rq { display: none; }
/* challenge · figure artefact: big numbers, masked values swap to the answer at the verdict */
.challenge.k-figure .abody { padding: 26px 34px 24px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-body); }
.challenge .figs { display: flex; flex-direction: column; gap: 0; }
.challenge .fig { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 26px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.challenge .fig:first-child { border-top: 0; padding-top: 4px; }
.challenge .figs.n1 .fig { grid-template-columns: 1fr; gap: 10px; padding: 10px 0 6px; }
.challenge .fv { font-family: var(--font-display); font-weight: 700; font-size: 92px; line-height: 0.95; letter-spacing: -0.03em; color: var(--fig-accent, var(--brand-highlight)); font-variant-numeric: tabular-nums; min-width: 2.2ch; white-space: nowrap; }
.challenge .figs.n1 .fv { font-size: 148px; }
.challenge .figs.n3 .fv { font-size: 74px; }
.challenge .fv .fq { color: var(--ink-3); display: inline-block; padding: 0 0.12em; border-radius: 12px; border: 3px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.challenge .fv .fa { display: inline-block; color: var(--fig-accent, var(--brand-highlight)); animation: figIn .55s cubic-bezier(.2, .8, .2, 1.2) both; }
.challenge .fv .fa.rv-hidden { display: none; animation: none; }
.challenge .fv:has(.fa:not(.rv-hidden)) .fq { display: none; }
.challenge .fl { font-size: 22px; line-height: 1.32; color: var(--ink-2); }
.challenge .figs.n1 .fl { font-size: 25px; }
.challenge .fcap { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.4; color: var(--ink-3); }
@keyframes figIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
body.print-mode .challenge .fv .fa.rv-hidden, body.print-mode .challenge .redact .ra.rv-hidden { display: inline-block; }
body.print-mode .challenge .fv .fq, body.print-mode .challenge .redact .rq { display: none; }

.slide.l-break .break-art { position: absolute; inset: 0; z-index: 0; }
.slide.l-break .break-art svg, .slide.l-break .break-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- layout: evidence (hero number + visual + message) ---------- */
.evidence { display: grid; grid-template-columns: 640px 1fr; gap: 56px; height: 100%; min-height: 0; }
.evidence .hero-num { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.evidence .hero-num .value { font-family: var(--font-display); font-size: 190px; font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); cursor: pointer; font-variant-numeric: lining-nums; }
.evidence .hero-num .value small { font-size: 64px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); margin-left: 8px; font-family: var(--font-heading); }
.evidence .hero-num .value.long { font-size: 136px; }
.evidence .hero-num .value.xlong { font-size: 96px; }
.stat-tile .value.long { font-size: 72px; }
.stat-tile .value.xlong { font-size: 56px; }
.evidence .hero-num .label { font-size: 32px; font-weight: 600; line-height: 1.3; }
.evidence .hero-num .sub { font-size: 22px; color: var(--ink-3); line-height: 1.4; }
.evidence .hero-num .src { font-size: 19px; color: var(--ink-3); display: flex; gap: 10px; align-items: center; }
.evidence .hero-num .src::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.evidence .right { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 22px; min-height: 0; }
.evidence.wide { grid-template-columns: 1fr; }
.evidence.compact { grid-template-columns: 460px 1fr; gap: 44px; }
.evidence.compact .hero-num { gap: 18px; }
.evidence.compact .hero-num .value { font-size: 150px; }
.evidence.compact .hero-num .value.long { font-size: 112px; }
.evidence.compact .hero-num .value.xlong { font-size: 80px; }
.evidence.compact .hero-num .label { font-size: 28px; }
.evidence.compact .hero-num .sub { font-size: 20px; }
.evidence.compact .hero-num .message { margin-top: 10px; }
.evidence.compact .right { grid-template-rows: minmax(0, 1fr); }

/* ---------- layout: infographic / summary / mindmap / photo ---------- */
.info-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 20px; height: 100%; min-height: 0; }
.info-wrap.with-side { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
.info-wrap.with-photo { grid-template-rows: minmax(0, 1fr); grid-template-columns: 5fr 7fr; gap: 40px; }
.info-wrap.with-photo.photo-right { grid-template-columns: 7fr 5fr; }
.info-wrap.with-photo .photo-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-height: 0; }
.info-wrap.with-photo .diagram-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-height: 0; }
.info-wrap .side { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.callouts { display: flex; flex-direction: column; gap: 14px; }
.callout { padding: 18px 22px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--co-accent, var(--accent)); }
.callout b { display: block; font-size: 20px; letter-spacing: 0.06em; margin-bottom: 4px; }
.callout span { font-size: 20px; color: var(--ink-2); line-height: 1.4; }
.photo-wrap { display: grid; grid-template-columns: 1fr 640px; gap: 44px; height: 100%; min-height: 0; }
.photo-wrap .media { height: 100%; }
.photo-wrap .copy { display: flex; flex-direction: column; gap: 22px; justify-content: center; min-height: 0; }
.photo-wrap .copy .big { font-family: var(--font-display); font-size: 54px; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
.photo-wrap .copy ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.photo-wrap .copy li { font-size: 25px; line-height: 1.4; padding-left: 36px; position: relative; color: var(--ink); }
.photo-wrap .copy li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 6px; border-radius: 3px; background: var(--accent); }

/* ---------- layout: incident (FROM THE FIELD template) ---------- */
.incident { display: grid; grid-template-columns: 1fr 460px; gap: 44px; height: 100%; min-height: 0; }
.incident .quads { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.incident .quad { padding: 26px 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.incident .quad h4 { margin: 0; font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 12px; }
.incident .quad h4::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--q-accent, var(--accent)); }
.incident .quad p { margin: 0; font-size: 23px; line-height: 1.4; color: var(--ink); }
.incident .aside { display: flex; flex-direction: column; gap: 22px; }
.incident .aside .figure, .incident .ctx .figure { padding: 26px 30px; border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--threat) 16%, transparent), color-mix(in srgb, var(--threat) 2%, transparent)); border: 1px solid color-mix(in srgb, var(--threat) 40%, transparent); cursor: pointer; }
.incident .figure .value { font-family: var(--font-display); font-size: 84px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: lining-nums; }
.incident .figure .label { font-size: 21px; color: var(--ink-2); margin-top: 12px; line-height: 1.4; }
.incident .aside .facts { display: flex; flex-direction: column; gap: 10px; font-size: 20px; color: var(--ink-2); }
.incident .aside .facts div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.incident .aside .facts dt { color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 15px; padding-top: 4px; }
.incident .aside .facts dd { margin: 0; line-height: 1.4; }
/* field template: 40% context column (image, badge, figure) · 60% three blocks + lesson / timeline */
.incident.field { grid-template-columns: 2fr 3fr; gap: 40px; }
.incident.field .ctx { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.incident.field .ctx .field-stamp { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ot); font-weight: 700; }
.incident.field .ctx .field-stamp::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--ot) 45%, transparent); }
.incident.field .ctx .media { flex: 1; min-height: 200px; }
/* only the picture gives way when the column is tight: stamp, badge row and figure keep their height */
.incident.field .ctx > :not(.media):not(.visual) { flex-shrink: 0; }
.incident.field .ctx .visual { flex: 1; min-height: 0; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); padding: 18px; }
.incident.field .ctx .badge-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.incident.field .ctx .badge { font-size: 15px; padding: 6px 12px; }
.incident.field .ctx .badge-note { font-size: 16px; color: var(--ink-3); }
.incident.field .ctx .figure { padding: 20px 24px; }
.incident.field .ctx .figure .value { font-size: 64px; }
.incident.field .ctx .figure .label { font-size: 19px; margin-top: 8px; }
.incident.field .body { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.incident.field .block { padding: 16px 26px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--b-accent, var(--accent)); display: flex; flex-direction: column; gap: 8px; }
.incident.field .block h4 { margin: 0; font-size: 16px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.incident.field .block p { margin: 0; font-size: 22.5px; line-height: 1.38; color: var(--ink); }
.incident.field .lesson { margin-top: auto; padding: 14px 26px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--def) 10%, transparent); border: 1px solid color-mix(in srgb, var(--def) 40%, transparent); font-size: 22px; line-height: 1.38; font-weight: 500; display: flex; gap: 16px; align-items: baseline; }
.incident.field .lesson b { font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--def); white-space: nowrap; }
.incident.field .timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.incident.field .timeline .tstep { padding: 10px 16px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); font-size: 17px; line-height: 1.3; color: var(--ink-2); position: relative; }
.incident.field .timeline .tstep b { display: block; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--threat); margin-bottom: 4px; }
.incident.field .timeline .tstep:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 22px; }

/* ---------- layout: research says ---------- */
.research { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; height: 100%; align-items: center; }
.research .finding { font-family: var(--font-display); font-size: 60px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.research .finding em { color: var(--brand-highlight); font-style: normal; }
.research .card { padding: 40px 44px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 22px; box-shadow: var(--shadow); }
.research .card .row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; }
.research .card .row dt { font-size: 17px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.research .card .row dd { margin: 0; font-size: 24px; line-height: 1.4; }
.research .card .row.impl { border-top: 1px solid var(--line); padding-top: 22px; }
.research .card .row.impl dd { font-weight: 600; }
.research-stamp { font-size: 24px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--brand-accent); font-weight: 800; }

/* ---------- layout: conclusions ---------- */
.conclusions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; height: 100%; }
.conclusions .c { padding: 34px 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; border-top: 6px solid var(--c-accent, var(--accent)); }
.conclusions .c .n { font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--c-accent, var(--accent)); }
.conclusions .c .from { font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.conclusions .c h3 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; }
.conclusions .c p { margin: 0; font-size: 21px; color: var(--ink-2); line-height: 1.45; }

/* ---------- layout: cards ---------- */
.cards { display: grid; gap: 22px; height: 100%; align-content: stretch; }
.cards .card { padding: 30px 32px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; border-top: 5px solid var(--card-accent, var(--accent)); }
.cards .card h3 { margin: 0; font-size: 30px; line-height: 1.2; }
.cards .card .k { font-size: 17px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.cards .card p, .cards .card li { font-size: 22px; color: var(--ink-2); line-height: 1.42; margin: 0; }
.cards .card ul { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.cards .card .big { font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.cards.cols-5 .card { padding: 22px 22px; gap: 10px; }
.cards.compact .card { padding: 24px 28px; gap: 10px; }
.cards.compact .card h3 { font-size: 27px; }
.cards.compact .card p, .cards.compact .card li { font-size: 20.5px; line-height: 1.38; }
.cards.cols-5 .card h3 { font-size: 25px; }
.cards.cols-5 .card .k { font-size: 15px; }
.cards.cols-5 .card p, .cards.cols-5 .card li { font-size: 18.5px; line-height: 1.36; }

/* ---------- layout: two columns ---------- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; height: 100%; min-height: 0; }
.twocol.narrow-left { grid-template-columns: 620px 1fr; }
.twocol .col { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.twocol h3 { margin: 0; font-size: 34px; }
.twocol ul.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.twocol ul.points li { font-size: 26px; line-height: 1.4; padding-left: 40px; position: relative; color: var(--ink); }
.twocol ul.points li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 6px; border-radius: 3px; background: var(--accent); }
.twocol ul.points li b { color: var(--ink); }
.twocol ul.points li span { color: var(--ink-2); }
.twocol ul.points li em { font-style: normal; color: var(--brand-highlight); }

/* ---------- layout: tables ---------- */
.tbl-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); height: 100%; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 21px; }
table.tbl th, table.tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.35; }
table.tbl th { background: var(--panel-2); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; position: sticky; top: 0; }
table.tbl td:first-child { font-weight: 600; color: var(--ink); }
table.tbl.dense { font-size: 18px; }
table.tbl.dense th, table.tbl.dense td { padding: 9px 12px; }
table.tbl tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 1.5%, transparent); }
table.tbl .id { font-family: var(--mono); font-size: 0.9em; color: var(--ai-glow); }
table.tbl code { font-family: var(--mono); font-size: 0.85em; color: var(--ai-glow); background: color-mix(in srgb, var(--ai) 12%, transparent); padding: 2px 6px; border-radius: 4px; }
.tbl-wrap.scroll { overflow: auto; }

/* ---------- layout: references ---------- */
.refs { columns: 2; column-gap: 56px; height: 100%; overflow: hidden; font-size: 18px; line-height: 1.38; }
.refs .cat { break-inside: avoid; margin-bottom: 20px; }
.refs .cat h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ai-glow); }
.refs ol { margin: 0; padding: 0; list-style: none; }
.refs li { margin: 0 0 9px; padding-left: 52px; position: relative; color: var(--ink-2); }
.refs li .n { position: absolute; left: 0; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.refs li .t { color: var(--ink); }
.refs li a { color: var(--ai-glow); text-decoration: none; }
.refs li a:hover { text-decoration: underline; }
.refs li .lvl { display: inline-block; margin-left: 8px; font-size: 13px; letter-spacing: 0.1em; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-3); vertical-align: middle; }

/* ---------- layout: timeline (speaker journey) ---------- */
.journey { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; align-items: start; height: 100%; align-content: center; position: relative; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius: 2px; }
.journey .step { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-top: 0; }
.journey .step .dot { width: 70px; height: 70px; border-radius: 50%; background: var(--surface); border: 3px solid var(--j-accent, var(--accent)); display: grid; place-items: center; font-weight: 800; font-size: 24px; color: var(--ink); position: relative; z-index: 1; }
.journey .step h4 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: 0.02em; }
.journey .step p { margin: 0; font-size: 19px; color: var(--ink-2); line-height: 1.4; }

/* ---------- layout: closing ---------- */
.slide.l-closing { grid-template-rows: 1fr; }
.closing { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; height: 100%; }
.closing .big { font-family: var(--font-display); font-size: 96px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; max-width: 1500px; margin: 0 auto 30px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }
.closing .big em { font-style: normal; color: var(--brand-highlight); }
.closing .lines { font-size: 30px; color: var(--ink-2); line-height: 1.5; max-width: 1200px; margin: 0 auto; }
.closing .contact { margin-top: 40px; font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Q&A slide ---------- */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; align-content: start; }
.qa-grid .q { padding: 20px 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.qa-grid .q h4 { margin: 0; font-size: 23px; line-height: 1.3; }
.qa-grid .q p { margin: 0; font-size: 19px; color: var(--ink-2); line-height: 1.4; }

/* ---------- progressive reveal (data-reveal="n", driven by app.js) ---------- */
[data-reveal] { transition: opacity .4s ease, transform .4s ease; }
.slide [data-reveal].rv-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
.slide svg g[data-reveal].rv-hidden { transform: none; }
.slide.fitting [data-reveal], .slide.fitting [data-reveal] * { transform: none !important; transition: none !important; }
body.print-mode .rv-hidden { opacity: 1 !important; transform: none !important; }

/* ---------- speaker: five credibility dimensions ---------- */
.speaker.five { grid-template-columns: 440px 1fr; gap: 52px; }
.speaker.five .right { gap: 18px; }
.speaker.five .name { font-size: 58px; }
.speaker.five .position { font-size: 23px; }
.speaker .dims { display: flex; flex-direction: column; gap: 10px; }
.speaker .dim { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: center; padding: 14px 22px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--area-accent, var(--accent)); }
.speaker .dim h4 { margin: 0; font-size: 19px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); line-height: 1.25; }
.speaker .dim .dbody { display: flex; flex-direction: column; gap: 4px; }
.speaker .dim .kw { font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.3; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.speaker .dim .kw i { color: var(--area-accent, var(--accent)); font-style: normal; }
.speaker .dim .anchor { font-size: 17px; color: var(--ink-3); line-height: 1.35; }
.speaker .sp-note { font-size: 18px; color: var(--ink-2); line-height: 1.45; padding: 12px 18px; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); }
.speaker .sp-note b { color: var(--ink); }
.speaker .sp-note .chip { font-size: 12px; margin-left: 6px; }
.speaker.five .creds { margin-top: 0; gap: 8px; }
.speaker.five .creds span { font-size: 16px; padding: 6px 12px; }

/* ---------- agenda with eight acts ---------- */
.agenda.cols-4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 16px; height: auto; align-self: center; align-content: center; }
.agenda.cols-4 .act { padding: 22px 24px; gap: 8px; border-top-width: 5px; min-height: 250px; }
.agenda.cols-4 .act .n { font-size: 17px; }
.agenda.cols-4 .act h3 { font-size: 25px; }
.agenda.cols-4 .act p { font-size: 17.5px; line-height: 1.35; }
.agenda.cols-4 .act .takeaway { font-size: 16px; padding-top: 10px; }
.conclusions.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- layout: questions (anchor questions, board questions) ---------- */
.qs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; height: 100%; align-content: stretch; min-height: 0; }
.qs.cols-1 { grid-template-columns: 1fr; }
.qs .qi { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 30px 34px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--q-accent, var(--accent)); align-items: start; min-height: 0; }
.qs .qn { font-family: var(--font-display); font-size: 68px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--q-accent, var(--accent)); }
.qs .qq { font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; text-transform: uppercase; }
.qs .qq em { font-style: normal; color: var(--q-accent, var(--brand-highlight)); }
.qs .qk { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.qs .qk span { font-size: 18px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line-2); color: var(--ink); }
.qs .qsub { margin-top: 12px; font-size: 21px; color: var(--ink-2); line-height: 1.4; }
.qs.compact .qi { padding: 20px 26px; grid-template-columns: 80px 1fr; align-items: center; }
.qs.compact .qn { font-size: 48px; }
.qs.compact .qq { font-size: 28px; }
.qs.compact .qsub { font-size: 19px; margin-top: 8px; }

/* ---------- layout: poll (audience interaction) ---------- */
.poll { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; height: 100%; min-height: 0; }
.poll .scenario { padding: 36px 40px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.poll .scenario .k { font-size: 17px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.poll .scenario .big { font-family: var(--font-display); font-size: 112px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.poll .scenario p { margin: 0; font-size: 25px; line-height: 1.4; color: var(--ink-2); }
.poll .scenario p b { color: var(--ink); }
.poll .scenario .pq { margin-top: auto; font-size: 38px; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.poll .options { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.poll .opt { display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: center; padding: 16px 22px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); position: relative; }
.poll .opt .key { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 27px; font-weight: 800; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line-2); }
.poll .opt .t { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.poll .opt .n { font-size: 18px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.poll .opt .tick { position: absolute; right: 18px; top: 14px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--def); font-weight: 700; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--def) 50%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--def) 10%, transparent); }
.poll .opt.is-answer { border-color: color-mix(in srgb, var(--def) 55%, transparent); }
.poll .opt.is-answer > div { padding-right: 200px; }
.poll .disc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
.poll .disc .d { padding: 14px 16px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--def) 8%, transparent); border: 1px solid color-mix(in srgb, var(--def) 35%, transparent); display: flex; flex-direction: column; gap: 6px; }
.poll .disc .d b { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--def); }
.poll .disc .d span { font-size: 16.5px; color: var(--ink-2); line-height: 1.35; }

/* ---------- layout: equations (risk combinations) ---------- */
.eqs { display: flex; flex-direction: column; justify-content: center; gap: 24px; height: 100%; min-height: 0; }
.eqs .eq { padding: 24px 32px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--eq-accent, var(--accent)); display: flex; flex-direction: column; gap: 12px; }
.eqs .terms { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.eqs .term { font-size: 23px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 16px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line-2); }
.eqs .op { font-size: 34px; font-weight: 300; color: var(--ink-3); padding: 0 4px; }
.eqs .result { font-size: 24px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 18px; border-radius: var(--radius-sm); background: var(--eq-accent, var(--accent)); color: #fff; }
.eqs .ex { font-size: 20px; color: var(--ink-3); line-height: 1.4; }

/* ---------- layout: pairs (technical → executive) ---------- */
.pairs { display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; min-height: 0; }
.pairs .ph { display: grid; grid-template-columns: 1fr 64px 1.15fr; gap: 20px; font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 0 28px; }
.pairs .pr { display: grid; grid-template-columns: 1fr 64px 1.15fr; gap: 20px; align-items: center; padding: 16px 28px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--p-accent, var(--accent)); }
.pairs .pl b { display: block; font-size: 23px; letter-spacing: 0.06em; text-transform: uppercase; }
.pairs .pl span { display: block; font-size: 18px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; }
.pairs .parrow { font-size: 32px; color: var(--ink-3); text-align: center; }
.pairs .pe { font-size: 25px; font-weight: 700; line-height: 1.25; color: var(--ink); }

/* ---------- layout: code (engineering edition) ---------- */
.codewrap { display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; }
.codewrap.with-side { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 40px; }
/* listings are 8–14 lines: large monospace, the panel sized to its content and centred in the row */
.code { margin: 0; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; display: grid; grid-template-rows: auto auto; align-self: center; max-height: 100%; font-family: var(--mono); font-size: 24px; line-height: 1.55; min-height: 0; box-shadow: var(--shadow); }
.codewrap.dense .code { font-size: 19px; line-height: 1.42; }
.slide-body :not(pre) > code { font-family: var(--mono); font-size: 0.88em; color: var(--ai-glow); background: color-mix(in srgb, var(--ai) 10%, transparent); padding: 0 0.25em; border-radius: 4px; }
.codewrap.wide .code { font-size: 20px; line-height: 1.45; }
.code .codehead { display: flex; gap: 18px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-family: var(--font-body); font-size: 15px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; }
.code .codehead .lang { color: var(--accent); font-weight: 800; }
.code .codehead .file { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.code .codehead .cap { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--ink-2); }
.code code { display: block; padding: 16px 0; overflow: hidden; color: var(--ink); }
.code .cl { display: grid; grid-template-columns: 64px 1fr; padding: 0 22px 0 0; white-space: pre; }
.code .cl .ln { text-align: right; padding-right: 18px; color: var(--ink-4); user-select: none; }
.code .cl.cm .ct { color: var(--ink-3); }
.code .cl.hl { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 4px 0 0 var(--accent); }
.codewrap .side { display: flex; flex-direction: column; gap: 22px; justify-content: center; min-height: 0; }
.codewrap .side ul.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.codewrap .side li { font-size: 24px; line-height: 1.4; padding-left: 36px; position: relative; color: var(--ink); }
.codewrap .side li::before { content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 6px; border-radius: 3px; background: var(--accent); }
.codewrap .side li b { color: var(--ink); } .codewrap .side li code { font-family: var(--mono); font-size: 0.9em; color: var(--ai-glow); }

/* ---------- layout: checklist (engineering edition) ---------- */
.checklist { display: grid; grid-template-columns: 1fr; gap: 12px; height: 100%; align-content: start; min-height: 0; }
.checklist.cols-2 { grid-template-columns: 1fr 1fr; }
.checklist .ci { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: start; padding: 16px 22px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--ci-accent, var(--accent)); }
.checklist .box { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--ci-accent, var(--accent)); display: grid; place-items: center; font-weight: 800; color: var(--ci-accent, var(--accent)); font-size: 20px; margin-top: 2px; }
.checklist .ci.lv-must .box { background: color-mix(in srgb, var(--ci-accent, var(--accent)) 18%, transparent); }
.checklist .ct .t { font-size: 23px; font-weight: 600; line-height: 1.3; }
.checklist .ct .s { font-size: 18px; color: var(--ink-2); line-height: 1.35; margin-top: 4px; }
.checklist .ct { min-width: 0; }
.checklist .ref { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 340px; text-align: right; }
.checklist .ref span { font-family: var(--mono); font-size: 15px; color: var(--ai-glow); background: color-mix(in srgb, var(--ai) 12%, transparent); padding: 3px 8px; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.checklist .ref em { font-style: normal; font-size: 15px; color: var(--ink-3); line-height: 1.3; }
.checklist.cols-2 .ci { padding: 12px 18px; grid-template-columns: 34px 1fr auto; gap: 14px; }
.checklist.cols-2 .box { width: 28px; height: 28px; font-size: 16px; }
.checklist.cols-2 .ct .t { font-size: 20px; } .checklist.cols-2 .ct .s { font-size: 16px; } .checklist.cols-2 .ref span { font-size: 13px; } .checklist.cols-2 .ref em { font-size: 13.5px; } .checklist.cols-2 .ref { max-width: 240px; }

/* ---------- chips for evidence and maturity labels ([[LABEL]]) ---------- */
.chip { display: inline-block; font-size: 0.74em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); white-space: nowrap; vertical-align: middle; font-family: var(--font-body); }
.chip-mature, .chip-observed, .chip-observed-in-the-wild, .chip-verified-public-tool, .chip-verified { color: var(--def); border-color: var(--def); background: color-mix(in srgb, var(--def) 12%, transparent); }
.chip-emerging, .chip-research-prototype, .chip-demonstrated, .chip-research-demonstration { color: var(--ai-glow); border-color: var(--ai); background: color-mix(in srgb, var(--ai) 12%, transparent); }
.chip-experimental, .chip-claimed-underground-tool, .chip-claimed, .chip-partial, .chip-projected { color: var(--st-warning); border-color: var(--st-warning); background: color-mix(in srgb, var(--st-warning) 10%, transparent); }
.chip-high-risk, .chip-high-risk-autonomy, .chip-publicly-reported-criminal-tool, .chip-unverified { color: var(--threat); border-color: var(--threat); background: color-mix(in srgb, var(--threat) 12%, transparent); }
.chip-verified-frontier-model, .chip-observed-adversary-use, .chip-restricted { color: var(--quantum-glow); border-color: var(--quantum); background: color-mix(in srgb, var(--quantum) 14%, transparent); }
.chip-illustrative-concept, .chip-analysis, .chip-speaker-provided, .chip-vendor-claim { color: var(--ink-3); }

/* ---------- overlays: sources, inspector, help, overview (audience window, presenter-driven) ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: none; background: rgba(5, 5, 8, 0.72); backdrop-filter: blur(6px); }
.overlay.open { display: grid; place-items: center; }
.panel {
  width: min(1100px, 92vw); max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 28px 32px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); font-size: 16px; line-height: 1.5; font-family: var(--font-body);
}
.panel h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: 0.02em; }
.panel h3 { margin: 22px 0 8px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.panel .close { position: sticky; top: 0; float: right; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.panel .close:hover { color: var(--ink); border-color: var(--ink-3); }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.src-list li { padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1px solid var(--line); display: grid; gap: 6px; }
.src-list li .t { font-weight: 600; color: var(--ink); }
.src-list li .m { color: var(--ink-3); font-size: 14px; }
.src-list li .u a { color: var(--ai-glow); word-break: break-all; }
.src-list li .lvl { display: inline-block; font-size: 11px; letter-spacing: 0.12em; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-3); margin-right: 8px; vertical-align: middle; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; }
.kv dt { color: var(--ink-3); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 4px; }
.kv dd { margin: 0; color: var(--ink); }
.kv dd a { color: var(--ai-glow); word-break: break-all; }
.inspector-value { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 6px 0 4px; }
.inspector-label { font-size: 18px; color: var(--ink-2); margin-bottom: 18px; }
.tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); margin-right: 6px; }
.tag.observed { color: var(--def); border-color: var(--def); }
.tag.estimated, .tag.projected { color: var(--st-warning); border-color: var(--st-warning); }
.tag.survey { color: var(--ai-glow); border-color: var(--ai); }
.help kbd { display: inline-block; min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 5%, transparent); font-family: var(--mono); font-size: 13px; margin-right: 8px; }
.help .row { display: grid; grid-template-columns: 220px 1fr; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* overview grid */
.overview { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: none; overflow: auto; padding: 24px; }
.overview.open { display: block; }
.overview .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.overview .thumb { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; aspect-ratio: 16/9; background: var(--surface); }
.overview .thumb.active { outline: 3px solid var(--brand-primary); }
.overview .thumb .slide { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.overview .thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font-size: 12px; background: rgba(5,5,8,0.75); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview .thumb .cap b { color: var(--ink); margin-right: 6px; }
.overview h2 { font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 10px; }

/* HUD — debug only (?debug=1); never shown to the audience by default */
.hud { position: fixed; left: 16px; bottom: 12px; z-index: 30; font-size: 12px; color: var(--ink-4); display: none; gap: 14px; letter-spacing: 0.06em; pointer-events: none; }
body.debug .hud { display: flex; }
.hud b { color: var(--ink-3); }
.hud .live { color: var(--def); }
.blank { position: fixed; inset: 0; background: #000; z-index: 60; display: none; }
.blank.open { display: block; }
/* hold screen (PAUSE): calm, no text that could leak */
.hold { position: fixed; inset: 0; z-index: 58; display: none; place-items: center; background: var(--bg); }
.hold.open { display: grid; }
.hold .mark { width: 160px; height: 160px; border-radius: 50%; border: 3px solid var(--brand-primary); opacity: 0.5; display: grid; place-items: center; }
.hold .mark::after { content: ""; width: 60px; height: 60px; border-radius: 50%; background: var(--brand-primary); }
.hold .word { margin-top: 30px; font-size: 18px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-3); }
/* end screen */
.endscreen { position: fixed; inset: 0; z-index: 57; display: none; place-items: center; background: var(--bg); text-align: center; }
.endscreen.open { display: grid; }
.endscreen .t { font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.02em; }
.endscreen .s { margin-top: 18px; font-size: 22px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }

/* stat traceability affordance (audience-safe: only under E, controlled by the presenter) */
[data-stat-id] { position: relative; }
body.evidence-mode [data-stat-id]::after {
  content: "i"; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-primary); color: #fff; font-size: 18px; font-weight: 800; display: grid; place-items: center; font-style: italic;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
body.evidence-mode .stat-tile, body.evidence-mode .hero-num .value, body.evidence-mode .incident .figure { outline: 2px dashed color-mix(in srgb, var(--brand-primary) 55%, transparent); outline-offset: 6px; }

/* ---------- print ---------- */
@media print {
  @page { size: 20in 11.25in; margin: 0; }
  body { overflow: visible; background: #000; }
  .stage { position: static; display: block; }
  .slide { transform: none !important; page-break-after: always; break-after: page; margin: 0; }
  .hud, .overlay, .overview, .blank, .hold, .endscreen { display: none !important; }
}
body.print-mode { overflow: auto; }
body.print-mode .stage { position: static; display: flex; flex-direction: column; gap: 24px; align-items: center; padding: 24px 0; }
body.print-mode .slide { transform: none !important; }
/* the on-screen preview spacing above must not reach paper: one slide = one page, no spill, no trailing blank */
@media print {
  body.print-mode .stage { display: block; padding: 0; gap: 0; }
  body.print-mode .slide { margin: 0; break-inside: avoid; page-break-inside: avoid; overflow: hidden; }
  body.print-mode .slide:last-child { break-after: auto; page-break-after: auto; }
}

/* ---------- illustrations: question symbols (header medallion) and concept art (emblem on full-bleed slides) ---------- */
.slide-sym { position: absolute; top: 46px; right: 88px; width: 172px; height: 172px; z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28)); animation: symIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.slide-sym svg, .slide-sym img { width: 100%; height: 100%; display: block; }
.slide.has-symbol .slide-head { padding-right: 196px; }
.slide-art { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.4)); animation: symIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.slide-art svg, .slide-art img { width: 100%; height: 100%; display: block; }
.slide.l-section .slide-art { right: 120px; top: 50%; width: 430px; height: 430px; margin-top: -215px; }
.slide.l-section.has-art .sec-num { opacity: 0.16; }
.slide.l-break .slide-art { right: 140px; top: 96px; width: 400px; height: 400px; }
.slide.l-teaser .slide-art { right: 140px; top: 90px; width: 360px; height: 360px; }
.slide.l-question .slide-art { right: 150px; bottom: 150px; width: 280px; height: 280px; }
.slide.l-title .slide-art { right: 140px; bottom: 140px; width: 320px; height: 320px; }
@keyframes symIn { from { opacity: 0; transform: scale(.86) rotate(-6deg); } to { opacity: 1; transform: none; } }
body.print-mode .slide-sym, body.print-mode .slide-art { animation: none; }

/* ---------- theme logo (theme.logo) and slide logo: footer mark, title / closing emblem ---------- */
.slide-foot .sources { display: flex; align-items: center; gap: 18px; min-width: 0; }
.slide-foot .foot-logo { height: 30px; width: auto; flex: none; opacity: 0.9; }
.slide .hero-logo { display: block; height: 220px; width: auto; margin: 0 0 34px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35)); }
.slide.l-closing .hero-logo { height: 260px; margin: 0 auto 30px; }
.slide.l-closing .hero-art { position: absolute; inset: 0; z-index: 0; }
.slide.l-closing .hero-art svg, .slide.l-closing .hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- reveal effects inside inline SVG: data-fx on a revealed group (rise, pop) or on a path (draw) ----------
   A group with data-fx must carry no transform attribute (CSS transforms override it). A drawn path carries
   pathLength="1" stroke-dasharray="1" so the same keyframes draw any length. */
.slide svg [data-reveal][data-fx="rise"] { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.slide svg [data-reveal][data-fx="rise"].rv-hidden { transform: translateY(18px); }
.slide svg [data-reveal][data-fx="pop"] { transform-box: fill-box; transform-origin: center; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25); }
.slide svg [data-reveal][data-fx="pop"].rv-hidden { transform: scale(0.55); }
.slide svg [data-fx="draw"] { animation: wmdDraw .9s cubic-bezier(.3, .7, .3, 1) both; }
.slide svg .rv-hidden [data-fx="draw"], .slide svg [data-fx="draw"].rv-hidden { animation: none; stroke-dashoffset: 1; }
.slide.fitting svg [data-fx="draw"] { animation: none !important; }
body.print-mode svg [data-fx="draw"] { animation: none !important; stroke-dashoffset: 0 !important; }
@keyframes wmdDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- layout: walkthrough (screenshots, zones highlighted step by step) ---------- */
.walkthrough { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 40px; height: 100%; min-height: 0; align-items: center; }
.walkthrough.wide { grid-template-columns: minmax(0, 1fr); }
.wt-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; align-self: start; padding-top: 14px; }
.wt-points li { position: relative; font-size: 24px; line-height: 1.32; font-weight: 500; color: var(--ink-2); padding-left: 32px; transition: color .3s; }
.wt-points li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 11px; height: 11px; border-radius: 3px; background: var(--brand-primary); transform: rotate(45deg); box-shadow: 0 0 14px color-mix(in srgb, var(--brand-primary) 60%, transparent); transition: background .3s, box-shadow .3s; }
.wt-points li.is-current { color: var(--ink); }
.wt-points li.is-current::before { background: var(--brand-secondary); box-shadow: 0 0 16px color-mix(in srgb, var(--brand-secondary) 80%, transparent); }
.wt-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; min-width: 0; }
.wt-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.35); }
.wt-bar { position: relative; height: 30px; background: linear-gradient(var(--panel-3), var(--panel-2)); border-bottom: 1px solid var(--line); }
.wt-bar i { position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel-4); }
.wt-bar i:nth-child(1) { left: 16px; } .wt-bar i:nth-child(2) { left: 34px; } .wt-bar i:nth-child(3) { left: 52px; }
.wt-bar span { position: absolute; left: 84px; right: 20px; top: 6px; font-size: 13px; color: var(--ink-3); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; }
.wt-view { position: relative; overflow: hidden; background: var(--bg); }
.wt-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; will-change: transform; }
.wt-img img, .wt-img svg { display: block; width: 100%; height: auto; max-width: none; }
.wt-img.is-current { opacity: 1; }
.wt-img[data-reveal].rv-hidden { transform: none; } /* the hook positions the pictures; the reveal state only drives opacity */
.wt-img[data-reveal].rv-hidden, .wt-img:not(.is-current) { opacity: 0 !important; }
.wt-zone { position: absolute; z-index: 3; border: 3px solid var(--brand-secondary); border-radius: 10px; cursor: pointer; opacity: 0; transition: opacity .35s ease, left .75s cubic-bezier(.2, .8, .2, 1), top .75s cubic-bezier(.2, .8, .2, 1), width .75s cubic-bezier(.2, .8, .2, 1), height .75s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-secondary) 18%, transparent), 0 0 34px color-mix(in srgb, var(--brand-secondary) 55%, transparent), 0 0 0 4000px color-mix(in srgb, var(--surface) 46%, transparent); }
.wt-zone.is-current { opacity: 1; }
.wt-zone[data-reveal].rv-hidden { opacity: 0; transform: none; pointer-events: auto; }
.wt-zone::after { content: attr(data-label); position: absolute; left: -3px; top: -36px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 6px; background: var(--brand-secondary); color: var(--surface); white-space: nowrap; }
.wt-zone.lbl-below::after { top: auto; bottom: -36px; }
.wt-zone[data-label=""]::after { display: none; }
.wt-badge { position: absolute; right: 22px; bottom: 22px; z-index: 5; padding: 12px 20px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 2px solid var(--brand-primary); box-shadow: 0 0 30px color-mix(in srgb, var(--brand-primary) 35%, transparent); font-size: 18px; color: var(--ink-2); opacity: 0; transition: opacity .4s ease; }
.wt-badge.is-current { opacity: 1; }
.wt-badge[data-reveal].rv-hidden { transform: none; }
.wt-badge b { display: block; font-size: 42px; font-weight: 800; color: var(--brand-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.05; }
.wt-credit { font-size: 15px; color: var(--ink-3); letter-spacing: 0.04em; align-self: flex-start; }
body.presenter .wt-view, .overview .wt-view { pointer-events: auto; }
body.print-mode .wt-img, body.print-mode .wt-zone, body.print-mode .wt-badge { transition: none; }