/* ============================================================
   The Nearly Whole Truth — reveal.js theme
   Recreates the PowerPoint "Wisp"-style look:
   white bg · brush-script headings · geometric sans body ·
   dotted rail down the right edge · date + page number footer.
   ============================================================ */

/* Fonts are DECK-LOCAL (kept in this folder, not in the shared engine/).
   The PowerPoint used "Modern Love" for headings, but that's a paid font (and
   NOT embedded in the pptx), so we use the free Kaushan Script brush face instead.
   Body = Avenir Next (a macOS system font → exact match locally, Nunito Sans on the
   web). Caveat = the pencil "Nearly". */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Caveat:wght@400;600&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600;6..12,700&display=swap');

:root {
  --bg:       #ffffff;
  --ink:      #333333;   /* body text — soft black */
  --head:     #2b2b2b;   /* headings */
  --muted:    #9c968c;   /* bullet markers / footer */
  --accent:   #d6452a;   /* red underline / rules */
  --mauve:    #8c4a54;   /* thought-cloud / call-out fill */
  --box:      #2e4a6b;   /* diagram box text (blue) */
  --rail-dot: #d9d3c8;   /* the decorative dots */
  --pencil-ink: #6b655c; /* graphite grey for the handwritten "Nearly" */
  --sans: 'Avenir Next', 'Avenir', 'Nunito Sans', system-ui, sans-serif;
  --script: 'Kaushan Script', cursive;
  --pencil: 'Caveat', cursive;
}

/* ---------- base deck ---------- */
.reveal-viewport { background: var(--bg); }
.reveal {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
}
.reveal .slides { text-align: left; }
.reveal .slides section { line-height: 1.4; }

/* ---------- headings (brush script) ---------- */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--script);
  color: var(--head);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 0.5em;
}
.reveal h1 { font-size: 2.5em; }
.reveal h2 { font-size: 1.9em; }
.reveal h3 { font-size: 1.4em; }

/* ---------- body text ---------- */
.reveal p { margin: 0 0 0.6em; }
.reveal strong { color: var(--head); font-weight: 600; }
.reveal em { font-style: italic; }
.reveal a { color: var(--accent); text-decoration: none; }

/* bulleted lists — muted round markers, roomy */
.reveal ul { list-style: none; margin: 0.3em 0; padding-left: 1.2em; }
.reveal ul li {
  position: relative;
  margin: 0.5em 0;
  padding-left: 0.2em;
}
.reveal ul li::before {
  content: "";
  position: absolute;
  left: -0.85em; top: 0.62em;
  width: 0.32em; height: 0.32em;
  border-radius: 50%;
  background: var(--muted);
}
/* nested / dash sub-bullets */
.reveal ul ul { margin: 0.35em 0; }
.reveal ul ul li::before {
  top: 0.66em; left: -0.9em;
  width: 0.5em; height: 2px; border-radius: 0;
  background: var(--muted);
}

/* ---------- images ---------- */
.reveal img { border: 0; box-shadow: none; margin: 0; }
.reveal .fig { display: block; max-width: 100%; margin: 0.2em auto; }

/* ---------- helpers ---------- */
.reveal .center { text-align: center; }
.reveal .muted  { color: var(--muted); }
.reveal .small  { font-size: 0.82em; }
.reveal .grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em;
  align-items: start;
}
.reveal .capt { text-align: center; color: var(--ink); margin-top: 0.3em; }

/* two-meme row captions like "- HARDWARE   - SOFTWARE" */
.reveal .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.reveal .duo figure { margin: 0; }
.reveal .duo img { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; }
.reveal .duo figcaption { text-align: center; margin-top: 0.5em; color: var(--ink); }

/* mauve "call-out" (recreates the PPT thought-cloud) */
.reveal .callout {
  position: relative;
  max-width: 62%;
  margin: 1em auto 0;
  background: var(--mauve);
  color: #fff;
  text-align: center;
  padding: 1.1em 1.4em;
  border-radius: 40% 40% 42% 42% / 55% 55% 45% 45%;
  font-size: 0.95em;
  line-height: 1.35;
}
.reveal .callout::after {   /* the little tail */
  content: "";
  position: absolute;
  left: 24%; bottom: -18px;
  width: 26px; height: 26px;
  background: var(--mauve);
  border-radius: 50%;
}

/* red underline rule used under diagrams */
.reveal .rule-accent { height: 3px; background: var(--accent); border: 0; margin: 0.4em 0; }

/* ---------- chrome: dotted right rail + footer ---------- */
/* rail — repeated dots down the right edge (skips .plain slides) */
.reveal .slides section:not(.plain)::after {
  content: "";
  position: absolute;
  top: -4%; right: -3.5%;
  width: 26px; height: 108%;
  background-image: radial-gradient(var(--rail-dot) 2.6px, transparent 3px);
  background-size: 13px 30px;
  pointer-events: none;
}

/* date bottom-left + page number bottom-right (global, hidden on title) */
.deck-date {
  position: fixed; left: 26px; bottom: 16px;
  font-family: var(--sans); font-size: 15px; color: var(--muted);
  z-index: 30;
}
.reveal .slide-number {
  font-family: var(--sans); font-size: 15px;
  color: var(--muted); background: transparent;
  right: 26px; bottom: 12px;
}
body.on-title .deck-date, body.on-title .reveal .slide-number { display: none; }

/* ---------- content-slide helpers ---------- */
/* text-left / figure-right (and reverse) */
.reveal .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.3em; align-items: center; }
.reveal .split img { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto; }
.reveal .fig-r { max-width: 100%; max-height: 58vh; display: block; margin: 0 auto; }

/* full-bleed figure (title is baked into the image) */
.reveal .imgfull { max-width: 100%; max-height: 84vh; display: block; margin: 0.1em auto; }

/* yellow ribbon banner heading (Memory Hierarchy) */
.reveal .banner {
  display: inline-block; background: #F6B317; color: var(--head);
  font-family: var(--script); font-size: 1.9em; line-height: 1;
  padding: 0.18em 1.1em; border-radius: 8px; margin: 0 auto 0.4em;
}

/* scattered free-floating labels (registers slide) */
.reveal .scatter { position: relative; height: 62vh; }
.reveal .scatter span { position: absolute; font-family: var(--sans); white-space: nowrap; }

/* image stage with absolutely-positioned overlays */
.reveal .stage { position: relative; }
.reveal .stage img { max-width: 100%; display: block; margin: 0 auto; }
.reveal .stage .over { position: absolute; }

/* speech-cloud / box colour variants (extend .callout) */
.reveal .callout.small { font-size: 0.8em; max-width: 42%; padding: 0.8em 1em; }
.reveal .callout.green  { background: #7FBF3F; } .reveal .callout.green::after  { background: #7FBF3F; }
.reveal .callout.blue   { background: #23A7E0; } .reveal .callout.blue::after   { background: #23A7E0; }
.reveal .callout.yellow { background: #F5E11E; color: var(--head); } .reveal .callout.yellow::after { background: #F5E11E; }
/* rectangular boxes (no tail) */
.reveal .box { display: inline-block; padding: 0.45em 1em; border-radius: 5px; color: #fff; }
.reveal .box.navy   { background: #123166; }
.reveal .box.orange { background: #F07B10; }

/* light-theme tables */
.reveal table { border-collapse: collapse; margin: 0.6em auto; font-size: 0.92em; }
.reveal table th, .reveal table td { border: 1px solid #cfc9bd; padding: 0.4em 1.1em; text-align: center; }
.reveal table th { background: #efece5; font-weight: 600; color: var(--head); }

/* centered stacked Q&A text block */
.reveal .qa { text-align: center; }
.reveal .qa p { margin: 0.5em 0; }

/* ---------- title slide ---------- */
.reveal .slides section.plain { height: 720px; }
.reveal .title-caption {
  position: absolute; top: 8%; right: 4%;
  text-align: center; color: var(--head);
}
.reveal .title-caption img { width: 150px; display: block; margin: 0 auto 0.4em; border-radius: 6px; }
.reveal .title-caption span { font-family: var(--sans); font-size: 26px; }

/* handwritten "Nearly" + caret inserted into THE ^ WHOLE TRUTH */
.reveal .title-nearly {
  position: absolute; left: 30%; top: 33%;
  font-family: var(--pencil); font-weight: 600; font-size: 2.4em;
  color: var(--pencil-ink); transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.reveal .title-caret {
  position: absolute; left: 39%; top: 45%;
  font-family: var(--pencil); font-weight: 700; font-size: 2.2em; color: var(--pencil-ink);
}