/* Talk deck design system: AEA brand on Reveal.js. Design size 1920x1080; Reveal scales the stage.
   Layout primitives are section classes (d-title, d-statement, ...). See deck/README.md. */

@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: block; }

:root {
  --ink-950: #0f1626; --ink: #1a2332; --ink-800: #20293c; --ink-700: #2b3650; --ink-600: #3a4763;
  --ink-500: #51607f; --ink-300: #93a0bb; --ink-200: #c2cad9; --paper: #fbfcfe;
  --blue: #1565c0; --blue-300: #5e9ce8; --blue-200: #9cc3f2;
  --s-red: #e53935; --s-orange: #f57c00; --s-amber: #fbc02d; --s-green: #66bb6a;
  --s-sky: #29b6f6; --s-indigo: #5c6bc0; --s-purple: #7e57c2;
  /* The ladder: seven hard-stop rungs, Foundations (purple) to Native (red). Rails and progress only. */
  --ladder: linear-gradient(90deg, var(--s-purple) 0 14.29%, var(--s-indigo) 0 28.57%, var(--s-sky) 0 42.86%,
    var(--s-green) 0 57.14%, var(--s-amber) 0 71.43%, var(--s-orange) 0 85.71%, var(--s-red) 0);
  --diff: var(--s-orange);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad-x: 128px; --pad-top: 112px; --pad-bottom: 148px;
  --fs-h1: 108px; --fs-h2: 76px; --fs-lede: 40px; --fs-body: 30px; --fs-caption: 28px;
  --fs-eyebrow: 18px; --fs-source: 17px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Stage */
html, body { background: var(--ink); }
/* Flat Ink Navy: a soft radial gradient bands into a visible ellipse on projectors. The scene supplies the depth. */
.reveal-viewport { background: var(--ink); }
.reveal { color: var(--paper); font-family: var(--sans); }
.reveal ::selection { background: var(--blue); color: var(--paper); }
.reveal .slides { text-align: left; font: 400 var(--fs-body)/1.45 var(--sans); color: var(--paper); font-kerning: normal; }
.reveal .slides section:not(.stack) { height: 100%; box-sizing: border-box; padding: var(--pad-top) var(--pad-x) var(--pad-bottom); flex-direction: column; }
:where(.reveal .slides section) > * { position: relative; z-index: 1; }
:where(.reveal) a { color: var(--blue-200); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:where(.reveal) a:hover { color: var(--paper); }
.reveal :focus-visible, .reveal .controls button:focus-visible { outline: 3px solid var(--s-sky); outline-offset: 4px; }

/* Type */
:where(.reveal) :is(h1, h2, h3) { margin: 0; font-family: var(--display); color: var(--paper); text-wrap: balance; text-transform: none; }
:where(.reveal) h1 { font-size: var(--fs-h1); font-weight: 850; line-height: .98; letter-spacing: -.035em; }
:where(.reveal) h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.03; letter-spacing: -.03em; max-width: 22ch; }
:where(.reveal) h3 { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
:where(.reveal) p { margin: 0; max-width: 46ch; text-wrap: pretty; }
:where(.reveal) em { font-style: normal; color: var(--blue-200); }
.d-eyebrow { display: flex; align-items: center; gap: 18px; max-width: none; margin: 0 0 40px; font: 500 var(--fs-eyebrow)/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-300); }
.d-eyebrow::before { content: ''; flex: none; width: 32px; height: 3px; background: var(--blue); }
.d-lede { font-size: var(--fs-lede); line-height: 1.3; color: var(--ink-200); max-width: 34ch; }
.d-muted { color: var(--ink-300); }
.d-num, [data-countup] { display: inline-block; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.d-mono { font-family: var(--mono); }

/* Source footer: every number on a slide names its feed. */
.d-source { position: absolute; left: var(--pad-x); right: 360px; bottom: 52px; z-index: 1; padding-top: 16px; border-top: 1px solid var(--ink-700); font: 400 var(--fs-source)/1.45 var(--mono); color: var(--ink-300); }
.d-source b { font-weight: 500; color: var(--ink-200); letter-spacing: .12em; text-transform: uppercase; margin-right: 12px; }

/* Ladder accents (sparingly) */
.d-rail { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ladder); }
.d-ladder { display: inline-flex; align-items: flex-end; gap: 5px; height: 56px; }
.d-ladder i { width: 14px; background: var(--c); }
.d-ladder i:nth-child(1) { height: 14%; --c: var(--s-purple); } .d-ladder i:nth-child(2) { height: 28%; --c: var(--s-indigo); }
.d-ladder i:nth-child(3) { height: 42%; --c: var(--s-sky); } .d-ladder i:nth-child(4) { height: 57%; --c: var(--s-green); }
.d-ladder i:nth-child(5) { height: 71%; --c: var(--s-amber); } .d-ladder i:nth-child(6) { height: 86%; --c: var(--s-orange); }
.d-ladder i:nth-child(7) { height: 100%; --c: var(--s-red); }
.d-badge { display: inline-block; padding: 6px 14px; border: 2px solid var(--rail, var(--blue-300)); font: 500 16px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }

/* Layout: title */
.d-title h1 { margin-top: auto; max-width: 15ch; }
.d-title .d-byline { display: flex; align-items: flex-end; gap: 40px; max-width: none; margin-top: 56px; font: 500 22px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-200); }

/* Layout: statement (one big line) */
.d-statement { justify-content: center; }
.d-statement .d-line { font: 800 104px/1.02 var(--display); letter-spacing: -.035em; max-width: 17ch; text-wrap: balance; }
.d-statement .d-lede { margin-top: 48px; }

/* Layout: two-column */
.d-two-column .d-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; margin-top: 56px; flex: 1; min-height: 0; align-items: start; }

/* Layout: big number */
.d-big-number .d-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 112px; align-items: center; flex: 1; min-height: 0; }
.d-big-number .d-body > :only-child { grid-column: 1 / -1; }
.d-figure { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--display); line-height: .8; }
.d-figure .d-num { font-size: 340px; font-weight: 900; letter-spacing: -.05em; }
.d-figure .d-unit { font-size: 120px; font-weight: 700; letter-spacing: -.03em; color: var(--ink-300); }
.d-caption { margin-top: 40px; font-size: 40px; line-height: 1.25; color: var(--ink-200); max-width: 30ch; }
.d-stats { margin: 0; }
.d-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--ink-700); }
.d-stat:first-child { border-top: 1px solid var(--ink-700); }
.d-stat dt { font: 500 var(--fs-eyebrow)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }
.d-stat dd { margin: 0; font: 800 56px/1 var(--display); letter-spacing: -.02em; }
.d-stat dd small { font-size: .5em; font-weight: 600; color: var(--ink-300); letter-spacing: 0; }

/* Layout: quote (review text with ID) */
.d-quote blockquote { position: relative; margin: auto 0 0; padding: 0; max-width: 30ch; font: 400 52px/1.28 var(--sans); letter-spacing: -.01em; color: var(--paper); }
.d-quote blockquote::before { content: '\201C'; position: absolute; left: -.62em; top: -.12em; font: 900 1.6em/1 var(--display); color: var(--blue-300); }
.d-quote cite { display: block; margin: 40px 0 auto; font: 500 20px/1.4 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }

/* Layout: table (saved answers with highlighted differences) */
.d-table .d-data { margin-top: 40px; }
.d-data { width: 100%; border-collapse: collapse; font-size: 28px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.d-data caption { caption-side: top; padding-bottom: 12px; text-align: left; font: 500 var(--fs-eyebrow)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }
.d-data th, .d-data td { padding: 9px 28px 9px 16px; text-align: left; vertical-align: baseline; white-space: nowrap; border-bottom: 1px solid var(--ink-700); }
.d-data thead th { font: 500 17px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); border-bottom-color: var(--ink-500); }
.d-data tbody th { font-weight: 600; white-space: nowrap; }
.d-data tr.is-reference { background: rgba(251, 252, 254, .04); }
.d-data tr.is-reference th { color: var(--blue-200); }
.d-data td { perspective: 600px; box-shadow: inset 4px 0 0 transparent; transition: box-shadow .3s var(--ease), color .3s var(--ease); }
.d-data td.is-diff { color: var(--diff); box-shadow: inset 4px 0 0 var(--diff); }
.d-data .flip { display: inline-block; transform-origin: 50% 60%; backface-visibility: hidden; }
.d-replay-row.fragment { transition: opacity .25s var(--ease), visibility .25s; }
/* The tally sits on the caption line, top right, so long replays keep their rows. */
.d-replay { position: relative; }
.d-replay-tally { position: absolute; top: -17px; right: 0; max-width: none; margin: 0; font: 500 22px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-200); }
.d-replay-tally .d-num { font: 800 44px/1 var(--display); color: var(--diff); margin-right: 8px; }

/* Layout: timeline */
.d-timeline .d-track { position: relative; flex: 1; min-height: 0; margin: 48px 0 0; padding: 0; list-style: none; }
.d-track::before, .d-track::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink-600); }
.d-track::after { background: var(--paper); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
.d-event { position: absolute; z-index: 2; top: 50%; left: calc(var(--at) * 100%); width: 300px; padding-top: 36px; transform: translateX(calc(var(--at) * -100%)); }
.d-event[data-side='above'] { padding: 0 0 36px; transform: translate(calc(var(--at) * -100%), -100%); }
.d-event::before { content: ''; position: absolute; left: calc(var(--at) * 100%); top: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px var(--ink); }
.d-event[data-side='above']::before { top: auto; bottom: -8px; }
.d-event.is-key::before { background: var(--s-amber); }
.d-event time { display: block; font: 500 var(--fs-eyebrow)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }
.d-event strong { display: block; margin-top: 6px; font: 700 30px/1.15 var(--display); }
.d-event span { display: block; margin-top: 4px; font-size: var(--fs-caption); line-height: 1.25; color: var(--ink-200); }
.d-event.fragment { transition: opacity .3s var(--ease), visibility .3s; }

/* Layout: grid-3 */
.d-grid-3 .d-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: auto; }
.d-card { padding: 40px 36px 44px; background: rgba(251, 252, 254, .035); border-top: 6px solid var(--rail, var(--blue)); }
.d-card .d-num { font: 900 96px/1 var(--display); letter-spacing: -.03em; }
.d-card h3 { margin-top: 16px; }
.d-card p { margin-top: 12px; font-size: var(--fs-caption); line-height: 1.35; color: var(--ink-200); }

/* Layout: chart frame */
.d-chart-frame .d-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; flex: 1; min-height: 0; margin: 40px 0 0; }
.d-frame-head { display: flex; justify-content: space-between; gap: 24px; font: 500 var(--fs-eyebrow)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }
.d-plot { position: relative; min-height: 0; border-left: 1px solid var(--ink-600); border-bottom: 1px solid var(--ink-600); }
.d-plot > svg, .d-plot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-frame figcaption { font-size: var(--fs-caption); color: var(--ink-300); }

/* Layout: closing */
.d-closing { justify-content: center; }
.d-closing h2 { font-size: 96px; max-width: 16ch; }
.d-closing .d-contact { display: flex; gap: 48px; margin-top: 56px; font: 500 24px/1.4 var(--mono); letter-spacing: .06em; }

/* Split-text masks */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .12em; margin: 0 -.03em -.12em; }
.split-i { display: inline-block; }
.split-line, .split-line > .split-i { display: block; }

/* Logos from deck/assets: the white lockup over dark stages and scenes, never redrawn. Minimum 32px tall. */
.d-logo { display: block; align-self: flex-start; width: auto; height: 96px; }
.d-closing .d-logo { height: 128px; margin-bottom: 48px; }

/* Live replay: a request/response panel driven by saved answers. Large mono, bold bars: legible through a 30fps share. */
.d-live { position: relative; margin-top: 32px; padding: 0 40px 24px; border: 1px solid var(--ink-600); border-radius: 14px; background: var(--ink-800); box-shadow: 0 30px 80px rgba(8, 12, 22, .45); }
.d-live-bar { display: flex; align-items: center; gap: 16px; margin: 0 -40px 20px; padding: 16px 40px; border-bottom: 1px solid var(--ink-700); font: 500 18px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); }
.d-live-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--s-green); box-shadow: 0 0 0 6px rgba(102, 187, 106, .18); }
.d-live-badge { margin-left: auto; padding: 6px 16px; border: 2px solid var(--s-amber); border-radius: 999px; font-weight: 600; color: var(--s-amber); }
.d-live-request { display: grid; gap: 6px; margin: 0; font: 400 24px/1.35 var(--mono); }
.d-live-request div { display: flex; gap: 24px; }
.d-live-request dt { width: 112px; flex: none; font-size: 18px; line-height: 1.8; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); }
.d-live-request dd { margin: 0; }
.d-live-text { margin: 16px 0 0; padding: 14px 24px; border-left: 6px solid var(--blue); background: rgba(251, 252, 254, .04); font: 400 34px/1.3 var(--sans); color: var(--paper); }
.d-live-caret { display: inline-block; width: .45em; height: 1em; margin-left: 4px; vertical-align: -.14em; background: var(--blue-300); animation: d-blink 1s steps(1) infinite; }
.d-live-caret.is-done { visibility: hidden; }
@keyframes d-blink { 50% { opacity: 0; } }
.d-live-wait { display: flex; align-items: center; gap: 20px; margin: 18px 0 4px; max-width: none; font: 500 24px/1.2 var(--mono); }
.d-live-track { width: 260px; height: 10px; overflow: hidden; border-radius: 5px; background: var(--ink-700); }
.d-live-track i { display: block; height: 100%; background: var(--blue-300); transform-origin: 0 50%; }
.d-live-answer { width: 100%; border-collapse: collapse; }
.d-live-answer th, .d-live-answer td { padding: 9px 24px 9px 16px; text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--ink-700); }
.d-live-answer thead th { font: 500 17px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); }
.d-live-answer tbody th { font: 500 18px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-200); }
.d-live-value { font: 700 34px/1.15 var(--display); letter-spacing: -.01em; box-shadow: inset 6px 0 0 transparent; transition: color .3s var(--ease), box-shadow .3s var(--ease); }
.d-live-p { font: 600 30px/1 var(--mono); }
.d-live-meter { display: inline-block; width: 220px; height: 14px; margin-right: 18px; overflow: hidden; vertical-align: middle; border-radius: 7px; background: var(--ink-700); }
.d-live-meter i { display: block; height: 100%; background: var(--paper); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: background-color .3s var(--ease); }
.d-live-ref { font-size: 30px; color: var(--ink-200); }
/* Comparison state follows Reveal's .visible class, so every PDF step shows the right state without script. */
.d-live:has(.d-live-ref.visible) tr[data-differs] .d-live-value { color: var(--diff); box-shadow: inset 6px 0 0 var(--diff); }
.d-live:has(.d-live-ref.visible) tr[data-differs] .d-live-meter i { background: var(--diff); }

/* three.js scene host and its static fallback */
#deck-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); }
#deck-scene.is-active { opacity: 1; }
#deck-scene canvas { display: block; width: 100%; height: 100%; }
.d-scene-static { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-static .d-scene-static { display: block; }

/* Reveal chrome */
.reveal .progress { height: 5px; background: rgba(251, 252, 254, .06); }
.reveal .progress span { display: none; }
/* Progress reveals the ladder rung by rung (Foundations to Native). deck.js sets --p; ::after is Reveal's hit area. */
.reveal .progress::before { content: ''; position: absolute; inset: 0; background: var(--ladder); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); transition: clip-path .8s var(--ease); }
.reveal .slide-number { top: 28px; right: 36px; bottom: auto; left: auto; padding: 0; background: none; font: 500 14px/1 var(--mono); letter-spacing: .14em; color: var(--ink-300); }
.reveal .slide-number a { color: inherit; text-decoration: none; }
.reveal .controls { color: var(--ink-300); opacity: .55; }
.reveal .controls:hover { opacity: 1; }

/* Loud data failures */
.d-data-status { position: fixed; left: 24px; bottom: 24px; z-index: 40; max-width: min(760px, 90vw); margin: 0; padding: 14px 18px; background: #2b1a0e; color: var(--paper); border-left: 4px solid var(--s-orange); font: 500 14px/1.45 var(--mono); }
.is-unbound { color: var(--s-orange) !important; outline: 2px dashed var(--s-orange); outline-offset: 6px; }

/* Print (?print-pdf) */
.reveal-print, .reveal-print body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.reveal-print .reveal .slides .pdf-page { background: var(--ink); }
/* reveal.css print rules force padding:0 and display:block with !important; restore the stage box, keep Reveal's page offsets. */
html.reveal-print .reveal .slides section:not(.stack) { display: flex !important; flex-direction: column; height: 1080px !important; padding: var(--pad-top) var(--pad-x) var(--pad-bottom) !important; }
.reveal-print #deck-scene { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal .slides section, .reveal .fragment, #deck-scene, .d-data td, .d-live-value, .d-live-meter i { transition: none !important; }
  .d-live-caret { animation: none; }
}