/* ============================================================
   Dark-academic theme for "Statistical Field Theory for Weak
   Gravitational Lensing". Tuned for a conference projector:
   high contrast, large type, two recurring accent colours that
   encode the talk's spine (Ricci focusing vs Weyl shearing).
   ============================================================ */

:root {
  --bg0: #0b0f17;          /* deep slate background          */
  --bg1: #11171f;          /* panel background               */
  --ink: #eef1f6;          /* primary text                   */
  --ink-dim: #9aa6b8;      /* secondary / captions           */
  --ink-faint: #5d6b80;    /* footnotes / credits            */
  --ricci: #f5b942;        /* Ricci / focusing  (warm amber) */
  --ricci-soft: #f7cd77;
  --weyl: #4cc9f0;         /* Weyl / shearing   (cool cyan)  */
  --weyl-soft: #87ddf7;
  --good: #5fd08a;         /* validation / agreement (green) */
  --rule: #263243;         /* hairlines                      */
}

.reveal {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 30px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.005em;
}

.reveal-viewport {
  background:
    radial-gradient(1200px 800px at 78% 8%, #16202e 0%, rgba(22,32,46,0) 60%),
    radial-gradient(1000px 700px at 12% 96%, #131b27 0%, rgba(19,27,39,0) 55%),
    var(--bg0);
}

/* ---------- headings ---------- */
.reveal h1, .reveal h2, .reveal h3 {
  color: var(--ink);
  font-weight: 650;
  text-transform: none;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: none;
  margin-bottom: 0.5em;
}
.reveal h1 { font-size: 1.85em; }
.reveal h2 { font-size: 1.28em; }
.reveal h3 { font-size: 1.0em; color: var(--ink-dim); font-weight: 600; }

/* a thin accent rule under section headings */
.reveal h2.lead::after {
  content: "";
  display: block;
  width: 2.4em;
  height: 3px;
  margin-top: 0.35em;
  background: linear-gradient(90deg, var(--ricci), var(--weyl));
  border-radius: 2px;
}

/* ---------- the two-channel spine ---------- */
.ricci { color: var(--ricci); font-weight: 600; }
.weyl  { color: var(--weyl);  font-weight: 600; }
.good  { color: var(--good);  font-weight: 600; }
.dim   { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

.chip {
  display: inline-block;
  padding: 0.08em 0.55em;
  border-radius: 999px;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.chip.ricci { color: #1b1303; background: var(--ricci); }
.chip.weyl  { color: #04222c; background: var(--weyl); }
.chip.kicker{ color: var(--ink-dim); background: transparent; border: 1px solid var(--rule); }

/* ---------- body text ---------- */
.reveal p { line-height: 1.4; }
.reveal ul { margin-left: 1.1em; }
.reveal li { margin: 0.32em 0; line-height: 1.35; }
.reveal li::marker { color: var(--ink-faint); }
.reveal strong { color: var(--ink); font-weight: 650; }
.reveal em { color: var(--ink-dim); font-style: italic; }

.small  { font-size: 0.72em; }
.smaller{ font-size: 0.6em; }
.lead-in{ color: var(--ink-dim); font-size: 0.82em; letter-spacing: 0.02em; }

/* big motivating question / punchline */
.bigq {
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  max-width: 16em;
  margin: 0.4em auto;
}
.bigq .accent { background: linear-gradient(90deg,var(--ricci),var(--weyl));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- figure cards (light backdrop so dark axis text stays legible on dark slides) ---------- */
.figcard {
  background: #fbfbfd;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  display: inline-block;
  line-height: 0;
}
.figcard img, .figcard svg { display: block; border-radius: 4px; max-height: 64vh; height: auto; }
.figcap { color: var(--ink-faint); font-size: 0.62em; margin-top: 0.6em; line-height: 1.3; }

/* media (video / gif) framed without the white card */
.media {
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  border: 1px solid var(--rule);
}

/* two-column layout */
.cols { display: flex; gap: 1.1em; align-items: center; justify-content: center; }
.cols > .col { flex: 1; min-width: 0; }
.cols.v-top { align-items: flex-start; }

/* ---------- title slide ---------- */
.title-wrap { text-align: left; }
.title-wrap .eyebrow {
  color: var(--weyl);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.title-wrap h1 {
  font-size: 1.7em;
  line-height: 1.08;
  margin: 0.25em 0 0.15em 0;
  background: linear-gradient(92deg, #ffffff 30%, var(--weyl-soft) 78%, var(--ricci-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title-wrap .subtitle { color: var(--ink-dim); font-size: 0.82em; font-style: italic; margin-bottom: 1.1em; }
.title-wrap .byline { font-size: 0.66em; color: var(--ink); line-height: 1.5; }
.title-wrap .byline .ph { color: var(--ricci-soft); }
.title-wrap .venue { font-size: 0.56em; color: var(--ink-faint); margin-top: 0.9em; letter-spacing: 0.04em; }

/* ---------- credit / footer ---------- */
.credit {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 0.5em; color: var(--ink-faint); letter-spacing: 0.03em;
}

/* ---------- definition rows (e.g. the two channels) ---------- */
.deflist { text-align: left; max-width: 22em; margin: 0.4em auto; }
.defrow { display: flex; gap: 0.7em; align-items: baseline; margin: 0.5em 0; }
.defrow .tag { flex: 0 0 8.5em; font-weight: 600; }
.defrow .body { color: var(--ink-dim); font-size: 0.84em; }

/* KaTeX a touch larger & in-ink */
.reveal .katex { font-size: 1.04em; color: var(--ink); }
.formula { background: var(--bg1); border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.5em 0.9em; display: inline-block; margin: 0.3em 0; }

/* progress / controls accent */
.reveal .progress { color: var(--weyl); height: 4px; }
.reveal .controls { color: var(--weyl); }
.reveal .slide-number { background: transparent; color: var(--ink-faint); font-size: 0.5em; }

/* fragment helper */
.reveal .fragment.grow-in { opacity: 0; }
.reveal .fragment.grow-in.visible { opacity: 1; }

/* footnote-style source tag bottom-left */
.srctag { position: absolute; bottom: 16px; left: 22px; font-size: 0.46em; color: var(--ink-faint); letter-spacing: 0.04em; }

/* kicker line above headings */
.kicker { color: var(--ink-faint); font-size: 0.6em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.2em; }

/* ============================================================
   Restructure additions (2026-06-06): dark-native figures (no
   white card), title paper list, take-aways, layout-fill guards.
   ============================================================ */

/* dark-native figures sit directly on the slide; transparent PNG/SVG with
   light ink, so NO white card. A soft shadow lifts them off the background. */
.reveal img.fig {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 66vh;          /* never taller than the canvas; keeps 16:9 slides filled, not overflowing */
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}
/* GIF/video frames keep a subtle border (they are composited onto the bg) */
.reveal img.media { max-width: 100%; max-height: 66vh; height: auto; }

/* narrower definition tag so single-letter rows (R, C, F, K) don't leave a gap */
.defrow .tag { flex: 0 0 4.6em; }
.deflist.wide .defrow .tag { flex: 0 0 8.5em; }

/* keep two-column figure+text slides vertically centred and roomy */
.reveal .cols.v-top { align-items: flex-start; }
.reveal section > .cols { margin-top: 0.3em; }

/* ---------- title slide: paper list ---------- */
.title-wrap .byline { margin-top: 0.3em; }
.title-wrap .venue  { margin-top: 0.5em; font-weight: 600; color: var(--weyl-soft); }
.title-wrap .papers {
  margin-top: 1.0em; font-size: 0.46em; color: var(--ink-faint);
  letter-spacing: 0.02em; line-height: 1.35; max-width: 30em;
}
.title-wrap .papers .paper { margin-top: 0.5em; }
.title-wrap .papers .pt { color: var(--ink-dim); font-style: italic; }
.title-wrap .papers .pa { color: var(--ink-faint); }

/* dim scrim so title text stays legible over the κ-map background */
.title-wrap {
  background: linear-gradient(90deg, rgba(11,15,23,0.82) 0%, rgba(11,15,23,0.55) 60%, rgba(11,15,23,0.15) 100%);
  padding: 1.1em 1.3em; border-radius: 14px;
}

/* ---------- take-aways ordered list ---------- */
ol.takeaways { margin: 0.5em auto; max-width: 32em; text-align: left; font-size: 0.96em; }
ol.takeaways li { margin: 0.7em 0; line-height: 1.4; }
ol.takeaways li::marker { color: var(--weyl); font-weight: 700; }

/* tighten the 3-up insight slide so it fits the canvas height */
.reveal .cols .col img.fig { max-height: 60vh; }
/* opt-in taller cap for diagram-dominant slides (e.g. the Feynman panels,
   whose in-figure labels need the extra display size to read) */
.reveal .cols .col img.fig.tall { max-height: 74vh; }

/* ---------- chip cards (motivation / summary rows that fill width) ---------- */
.chipcard {
  background: var(--bg1);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.6em 0.8em;
  color: var(--ink-dim);
  line-height: 1.3;
}
.chipcard strong { color: var(--ink); }

/* ============================================================
   Round-4: summary flip card (Bad news / Good news), prominent
   insight headings, chip.good.
   ============================================================ */
.chip.good { color: #04220c; background: var(--good); }

.flipcard { perspective: 1400px; max-width: 30em; margin: 0.5em auto 0; }
.flip-inner {
  position: relative; width: 100%; min-height: 5.4em;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.4,.2,.2,1);
}
.flip-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: flex-start;
  border-radius: 12px; padding: 0.8em 1.05em; line-height: 1.32;
  border: 1px solid var(--rule); background: var(--bg1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.flip-front { border-color: #6b3a3a; background: #1b1113; }
.flip-back  { transform: rotateY(180deg); border-color: #2f5e42; background: #0f1b14; }
/* a zero-size reveal fragment; once stepped, it flips the adjacent card */
.reveal .flip-trigger { display: inline-block; width: 0; height: 0; line-height: 0; }
.reveal .flip-trigger.visible ~ .flipcard .flip-inner { transform: rotateY(180deg); }
/* PDF/print export: 3D backface-visibility is unreliable in the print engine, so
   flatten the card and stack both faces vertically (both readable, no mirroring). */
@media print {
  .flipcard { perspective: none; max-width: 34em; }
  .flip-inner { transform: none !important; min-height: 0; }
  .flip-face {
    position: static !important; inset: auto;
    transform: none !important;
    -webkit-backface-visibility: visible !important; backface-visibility: visible !important;
    margin-bottom: 0.55em;
  }
  .flip-back { transform: none !important; }
}

/* prominent insight sub-headings (Mixing Hierarchy / A Selection Rule) */
.reveal h3.ricci { color: var(--ricci); font-weight: 700; }
.reveal h3.good  { color: var(--good);  font-weight: 700; }

/* ---------- acknowledgment / funder logos (closing slide) ----------
   Dark deck + mixed-background logos (one ships a white plate, one is a
   colour EU flag), so each logo sits on a small white card that normalises
   both and lifts them off the slate background. */
.acklogos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.0em;
  margin-top: 1.5em;
}
.acklogos .ack-label {
  font-size: 0.55em; color: var(--ink-faint);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.acklogos img {
  box-sizing: content-box;
  height: 96px; width: auto;
  background: #ffffff;
  padding: 13px 20px;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.38);
}