/* ============================================================
   RKC LLC — Reveal.js theme  (near-black · white · teal)
   "Designing for the Machine Learner" · Harvard Macy Institute
   ============================================================ */

/* ---- Self-hosted fonts (offline-safe) ---- */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../assets/fonts/montserrat-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../assets/fonts/nunito-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/nunito-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); }

/* ---- Brand tokens ---- */
:root {
  --bg:         #ffffff;   /* content background */
  --paper:      #ffffff;
  --dark:       #1c1c1e;   /* dark slide bg: title / section / close */
  --ink:        #121417;   /* headings */
  --body:       #2b2e33;   /* body text */
  --teal:       #117c70;   /* deep teal accent */
  --teal-soft:  #e3efec;   /* soft teal fill */
  --muted:      #8b9096;   /* secondary text (on light) */
  --muted-dark: #9aa0a6;   /* secondary text (on dark) */
  --line:       #e5e5e3;   /* hairline */
  --card:       #f7f7f6;   /* soft card fill */

  --r-main-font: 'Nunito Sans', system-ui, sans-serif;
  --r-heading-font: 'Montserrat', system-ui, sans-serif;
}

/* ---- Base deck ---- */
.reveal-viewport { background: var(--bg); }
.reveal { font-family: var(--r-main-font); font-weight: 300; color: var(--body); font-size: 36px; }
.reveal .slides { text-align: left; }
.reveal .slides section { line-height: 1.4; }
/* center:false → full-height slides so absolute .fill can center its content */
.reveal .slides > section,
.reveal .slides > section > section { height: 100%; width: 100%; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--r-heading-font); font-weight: 300; color: var(--ink);
  margin: 0 0 .4em 0; line-height: 1.1; letter-spacing: .005em; text-transform: none;
}
.reveal h1 { font-size: 2.05em; }
.reveal h2 { font-size: 1.5em; }
.reveal h3 { font-size: 1.1em; font-weight: 400; }
.reveal strong { font-weight: 700; color: var(--teal); }
.reveal em { font-style: italic; color: var(--muted); }
.reveal a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-soft); }

.reveal ul, .reveal ol { margin: 0 0 0 1em; }
.reveal li { margin: .35em 0; }
.reveal ::selection { background: var(--teal-soft); color: var(--ink); }

.reveal .progress { color: var(--teal); height: 4px; }
.reveal .controls { color: var(--teal); }
.reveal .slide-number {
  background: transparent; color: var(--muted); font-family: var(--r-main-font);
  top: 18px; right: 22px; bottom: auto; left: auto; font-size: 16px; letter-spacing: .04em;
}

/* ---- Layout helpers ---- */
.kicker {
  font-family: var(--r-heading-font); font-weight: 500; text-transform: uppercase;
  letter-spacing: .22em; font-size: .42em; color: var(--muted); display: block; margin-bottom: .8em;
}
.lead { color: var(--muted); font-size: .9em; }
.center { text-align: center; }
.muted { color: var(--muted); }
.tiny { font-size: .55em; color: var(--muted); }

.fill { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; }
.cols { display: flex; gap: 1.2em; align-items: center; }
.cols > * { flex: 1; }

.rule { width: 84px; height: 4px; background: var(--teal); border: 0; border-radius: 2px; margin: .6em 0; }

.chip {
  display: inline-block; padding: .18em .7em; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal);
  font-size: .5em; font-weight: 700; letter-spacing: .04em; font-family: var(--r-main-font);
}

/* ---- Footer (content slides) ---- */
.deck-footer {
  position: absolute; bottom: 18px; left: 8%; right: 8%;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--r-main-font); font-size: 13px; color: var(--muted);
  letter-spacing: .04em; border-top: 1px solid var(--line); padding-top: 8px;
}
.deck-footer .ft-title { color: var(--muted); }
.deck-footer .ft-name { color: var(--teal); font-weight: 700; }

/* ============================================================
   SLIDE TYPES
   ============================================================ */

/* --- Dark slides (title / section / close) --- */
.s-dark { background: var(--dark); }
.s-dark h1, .s-dark h2 { color: #ffffff; }
.s-dark .kicker, .s-dark .muted, .s-dark .desc { color: var(--muted-dark); }
.s-dark strong { color: var(--teal); }

/* --- Title slide --- */
.s-title { text-align: center; align-items: center; }
.s-title h1 { font-size: 2.4em; line-height: 1.05; color:#fff; }
.s-title .subtitle { font-size: 1.02em; color: var(--muted-dark); font-family: var(--r-heading-font); font-weight: 300; margin-top: .2em; }
.s-title .byline { margin-top: 1.4em; font-size: .62em; letter-spacing: .02em; color: var(--muted-dark); }
.s-title .byline .name { color: #fff; font-weight: 700; }
.s-title .meta { margin-top: .5em; font-size: .5em; color: var(--muted-dark); letter-spacing: .04em; }

/* Title-slide "follow along" QR + link */
.followalong { display: inline-flex; align-items: center; gap: .75em; margin-top: 1.5em;
  background: #fff; border-radius: 14px; padding: .55em .85em; box-shadow: 0 16px 34px -20px rgba(0,0,0,.65); }
.followalong .fa-qr { width: 76px; height: 76px; display: block; }
.followalong .fa-lead { font-family: var(--r-heading-font); font-weight: 600; font-size: .36em; color: var(--ink); letter-spacing: .02em; }
.followalong .fa-url { font-family: var(--r-main-font); font-weight: 700; font-size: .42em; color: var(--teal); margin-top: .18em; }

/* --- Section header --- */
.s-section { justify-content: center; }
.s-section .num { font-family: var(--r-heading-font); font-weight: 300; font-size: 1.1em; color: var(--teal); letter-spacing: .1em; }
.s-section h1 { font-size: 2.6em; margin-top: .1em; color:#fff; }
.s-section .desc { color: var(--muted-dark); font-size: .8em; max-width: 16em; margin-top: .3em; }

/* --- System tray: components accumulating across the talk (on dark dividers) --- */
.systray { display: flex; gap: .55em; margin-top: 1.7em; flex-wrap: wrap; }
.sys-chip {
  display: flex; align-items: center; gap: .45em;
  font-family: var(--r-heading-font); font-weight: 500; font-size: .4em; letter-spacing: .04em;
  padding: .42em .85em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); color: var(--muted-dark);
}
.sys-chip .sc-ic { font-size: 1.15em; line-height: 1; }
.sys-chip.done { color: #cfd3d6; border-color: rgba(17,124,112,.45); }
.sys-chip.done .sc-ic { color: var(--teal); }
.sys-chip.done::after { content: "✓"; color: var(--teal); font-weight: 700; margin-left: .15em; }
.sys-chip.active {
  color: #fff; background: rgba(17,124,112,.16); border-color: var(--teal);
  box-shadow: 0 0 0 1px rgba(17,124,112,.35);
}
.sys-chip.active .sc-ic { color: var(--teal); }

/* --- Demo / live-prompt card --- */
.demo-tag {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--r-heading-font);
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
  font-size: .5em; margin-bottom: .6em;
}
.demo-tag::before { content: "▶"; font-size: .8em; }
.prompt-card {
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--teal);
  border-radius: 14px; padding: .9em 1.1em; box-shadow: 0 18px 40px -28px rgba(18,20,23,.35);
  font-family: 'Nunito Sans', monospace; font-size: .62em; line-height: 1.5; color: var(--body);
}
.prompt-card .who { color: var(--teal); font-weight: 700; font-size: .85em; letter-spacing: .05em; display:block; margin-bottom:.3em; }

/* Output of a demo = a durable component the system loads (not a chat) */
.artifact-out { margin-top: .8em; font-size: .5em; color: var(--muted); display: flex;
  align-items: baseline; gap: .5em; flex-wrap: wrap; }
.artifact-out .af-arrow { color: var(--teal); font-weight: 700; }
.artifact-out .af-file {
  font-family: var(--r-main-font); font-weight: 700; color: var(--teal);
  background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 7px;
  padding: .1em .5em; letter-spacing: .02em;
}
.artifact-out .af-desc { color: var(--muted); }

/* JSON format spec inside a prompt card */
.json-spec { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; white-space: pre; color: var(--ink);
  background: rgba(17,124,112,.06); border: 1px solid var(--line); border-radius: 8px;
  padding: .7em .9em; margin: .5em 0 0; overflow-x: auto; }

/* activity callout */
.activity { background: var(--teal-soft); border-radius: 16px; padding: 1em 1.2em; color: var(--ink); }
.activity .hd { font-family: var(--r-heading-font); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.5em; color: var(--teal); }

.ba-label { font-family: var(--r-heading-font); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.5em; color: var(--muted); text-align:center; margin-bottom:.4em; }

.reveal .speaker-notes { font-family: var(--r-main-font); }
.reveal .fragment.fade-up { transform: translateY(14px); }
.reveal .fragment.fade-up.visible { transform: translateY(0); }