/* ═══════════════════════════════════════════════════════════════════════════
   "The AI Architecture We Deleted" — AWS Summit New York, June 2026.

   ── THE LOOK, AND WHY ──────────────────────────────────────────────────────
   Chad asked for the Dreamforce keynote feeling: saturated gradient field,
   one enormous headline, and content sitting in rounded cards rather than
   floating as bare text. That register is right HERE specifically, because
   this is a conference talk — the same job a keynote slide does. It is not
   automatically right for the interview decks, which are read by one person
   with a resume open in another tab.

   What was borrowed, deliberately, from that style:
     - a deep gradient field instead of a flat background
     - a sparse star/particle wash, very low contrast, pure CSS
     - display type at roughly twice the old size
     - rounded cards with a soft lift, so no slide is bare text on a void
     - colour-filled pills as labels
     - one huge number per card where there is a number to give

   What was NOT borrowed: their blue. This is chadholdorf.com's void black and
   emerald (--ac #00DC82 in app/globals.css). Copying Salesforce's palette onto
   Chad's talk would make it look like a Salesforce deck, which is the opposite
   of the point. The STRUCTURE is the borrowed part; the colour stays his.

   AGENTS.md requires each deck to justify its palette. This one wears the
   site's, because the homepage links straight here and it is Chad's public
   work. It is also the only deck here that is indexable.

   ── THE DIAGRAMS ARE WHITE-BACKGROUND, ON PURPOSE ──────────────────────────
   They are the original engineering drawings shown on stage. Recolouring a
   diagram to suit a slide theme is how a diagram starts lying. They sit in a
   white plate instead, framed like a whiteboard on a dark stage. See .canvas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #07080A;
  --bg-2:        #0A1512;
  --bg-3:        #06140F;
  --surface:     rgba(255, 255, 255, 0.055);
  --surface-2:   rgba(255, 255, 255, 0.085);
  --ink:         #FFFFFF;
  --ink-2:       #B9C0BD;
  --ink-3:       #8C9793;
  --line:        rgba(255, 255, 255, 0.10);
  --line-2:      rgba(255, 255, 255, 0.16);
  --accent:      #00DC82;
  --accent-ink:  #00DC82;
  --accent-2:    #E8863F;
  --accent-3:    #5AC8FA;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

html, body { background: var(--bg); }

/* The gradient field. Two radial glows over a diagonal base, which is what
   gives the keynote look its depth — a flat dark background reads as "unstyled
   dark mode", a lit one reads as staged. Kept low-saturation so white text
   sits at 15:1 and the diagram plates do not glare against it. */
.reveal-viewport {
  background:
    radial-gradient(1100px 620px at 82% 8%,  rgba(0, 220, 130, 0.16), transparent 62%),
    radial-gradient(900px 700px at 8% 96%,   rgba(90, 200, 250, 0.10), transparent 60%),
    linear-gradient(158deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
  background-attachment: fixed;
}

/* Star wash. Four scattered dot layers at very low alpha. Pure CSS so there is
   no image request and nothing to go stale. If it ever reads as dust on a
   projector, drop the opacity rather than deleting it — the field looks flat
   without something in it. */
.reveal-viewport::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* 0.38, down from 0.5. The keynote reference and Duarte's signal-to-noise
     rule genuinely pull against each other here: the star wash is decoration
     and decoration is noise. Kept, because a totally flat field reads as
     unstyled dark mode, but dialled to where it is texture you notice only if
     you look for it. If it ever competes with a slide, delete the block. */
  opacity: 0.38;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.6px 1.6px at 88% 62%, rgba(0,220,130,0.55), transparent),
    radial-gradient(1.2px 1.2px at 32% 78%, rgba(255,255,255,0.36), transparent),
    radial-gradient(1.3px 1.3px at 58% 40%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1.5px 1.5px at 22% 52%, rgba(90,200,250,0.42), transparent),
    radial-gradient(1.2px 1.2px at 92% 30%, rgba(255,255,255,0.34), transparent),
    radial-gradient(1.4px 1.4px at 46% 90%, rgba(255,255,255,0.28), transparent);
}
.reveal { position: relative; z-index: 1; }

.reveal {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

/* Left-aligned text, vertically centred slides. Do not set `height: 100%` on
   section: it defeats reveal's centring and top-aligns every slide, which
   leaves the sparse slides looking like the bottom half of the frame fell off. */
.reveal .slides { text-align: left; }

.reveal h1, .reveal h2, .reveal h3 {
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 0.5em;
  text-transform: none;
}
.reveal h1 { font-size: 2.5em; font-weight: 800; }
.reveal h2 { font-size: 1.9em; font-weight: 800; }
.reveal h3 { font-size: 1.0em; font-weight: 600; }

.reveal p { line-height: 1.45; margin: 0 0 0.7em; }
.reveal strong { color: var(--ink); font-weight: 700; }
.reveal a { color: var(--accent-ink); }

/* ── Type roles ─────────────────────────────────────────────────────────── */

.reveal .kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.52em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.85em;
}

/* THE headline. Roughly double the old size, which is the single biggest part
   of the keynote feeling — those slides commit to one idea at a size you can
   read from the back of a hall. Cap is one sentence. If it needs two, it is
   two slides. */
.reveal .statement {
  font-size: 2.15em;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.03;
  letter-spacing: -0.034em;
  max-width: 15.5em;
  margin: 0 0 0.42em;
}
.reveal .statement .hl { color: var(--accent-ink); }

.reveal .lede { font-size: 0.96em; color: var(--ink-2); max-width: 25em; }
.reveal .small { font-size: 0.62em; color: var(--ink-3); line-height: 1.45; }

/* ── Pills ────────────────────────────────────────────────────────────────
   The coloured capsule labels from the reference. Dark text on a saturated
   fill, so each one clears AA against its own background rather than against
   the slide. */
/* align-self is load-bearing: .kcard is a flex column with the default
   `align-items: stretch`, so without it a pill spans the whole card and stops
   reading as a capsule. width:auto + align-self keeps it hugging its text in
   both flex and block contexts. */
.reveal .pill,
.reveal .kcard .pill {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  font-family: var(--mono);
  font-size: 0.46em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.42em 0.85em;
  border-radius: 999px;
  /* Stated on the .kcard-scoped selector too, because `.reveal .kcard p` is
     more specific than `.reveal .pill` and was repainting the label grey on
     its own fill — unreadable on the light blue and green pills. */
  color: #06140F;
  background: var(--accent);
  margin: 0 0 0.7em;
  line-height: 1.25;
}
.reveal .pill-2, .reveal .kcard .pill-2  { background: var(--accent-2); color: #1A0E04; }
.reveal .pill-3, .reveal .kcard .pill-3  { background: var(--accent-3); color: #04141C; }
.reveal .pill-mute, .reveal .kcard .pill-mute {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}

/* ── Cards ────────────────────────────────────────────────────────────────
   Frosted panels on the gradient. The generous radius and the lift are doing
   the keynote work here: content sitting IN something reads as designed,
   content floating on a background reads as a draft. */
.reveal .kcards {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: 18px;
  align-items: stretch;
  margin: 0.35em 0 0;
}
.reveal .kcards.n-2 { --n: 2; }
.reveal .kcards.n-4 { --n: 4; }

.reveal .kcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 24px 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  display: flex;
  flex-direction: column;
}
.reveal .kcard.is-lit {
  background: linear-gradient(168deg, rgba(0,220,130,0.16), rgba(0,220,130,0.05));
  border-color: rgba(0, 220, 130, 0.34);
}
.reveal .kcard h3 {
  margin: 0 0 0.4em;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.reveal .kcard p { margin: 0; font-size: 0.62em; color: var(--ink-2); line-height: 1.5; }

/* One huge number per card, the way the reference stacks $841M over its label. */
.reveal .kstat {
  font-size: 1.85em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 0.18em;
}
.reveal .kstat-sub {
  font-size: 0.56em;
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0;
}

/* Numbered step, used for the flows. The numeral is the ornament. */
.reveal .kcard .n {
  font-family: var(--mono);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin: 0 0 0.7em;
}

/* ── The diagram plate ────────────────────────────────────────────────────*/
.reveal .canvas {
  background: #FFFFFF;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 18px;
  display: block;
  max-height: 56vh;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.46);
}
.reveal .canvas img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(56vh - 36px);
  object-fit: contain;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.reveal .caption {
  font-family: var(--mono);
  font-size: 0.5em;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  margin: 0.7em 0 0;
}

/* ── Title slide ──────────────────────────────────────────────────────────*/
.reveal .venue {
  font-family: var(--mono);
  font-size: 0.5em;
  color: var(--ink-2);
  letter-spacing: 0.09em;
  margin: 1.5em 0 0;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
}
.reveal .venue .sep { color: var(--ink-3); padding: 0 0.7em; }

/* ── Chrome ───────────────────────────────────────────────────────────────*/
.reveal .progress { color: var(--accent); height: 3px; }
.reveal .slide-number {
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 15px;
  right: 14px; bottom: 10px;
}
.reveal .controls { color: var(--line-2); }
.reveal .controls .navigate-left.enabled,
.reveal .controls .navigate-right.enabled,
.reveal .controls .navigate-up.enabled,
.reveal .controls .navigate-down.enabled { color: var(--ink-3); opacity: 1; }

.portrait-nudge {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  color: #06140F;
  background: var(--accent);
  z-index: 40;
}
@media (max-width: 700px) and (orientation: portrait) {
  .portrait-nudge { display: block; }
}

/* Print. reveal's PDF view is screen-mode with .print-pdf on <html>, so a bare
   @media print does not reach it. Both are required. The gradient also has to
   be forced on, or the export comes out white with white text. */
@media print {
  .portrait-nudge { display: none !important; }
  .reveal .canvas, .reveal .canvas img { max-height: none; }
}
html.print-pdf { background: var(--bg) !important; }
html.print-pdf .portrait-nudge { display: none !important; }
html.print-pdf .reveal .canvas,
html.print-pdf .reveal .canvas img { max-height: none; }
html.print-pdf .reveal-viewport,
html.print-pdf .reveal .slides section {
  background:
    radial-gradient(1100px 620px at 82% 8%, rgba(0, 220, 130, 0.16), transparent 62%),
    linear-gradient(158deg, #07080A 0%, #0A1512 52%, #06140F 100%) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}