/* Show Me the Money — DevFest Venezia 2026 */

/* Every font ships in vendor/fonts (SIL OFL), so the deck looks the same on
   the venue projector, on a phone, and offline. Montserrat for headlines and
   numbers, Inter for everything you read. */
@font-face {
  font-family: "Montserrat";
  src: url("../vendor/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../vendor/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Neither face above has arrows or the warning sign; a 1 KB subset of
   JetBrains Mono (SIL OFL) supplies them, so they do not fall back to
   whatever the projector laptop has installed. */
@font-face {
  font-family: "Deck Symbols";
  src: url("../vendor/fonts/deck-symbols.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
  unicode-range: U+2190-2199, U+26A0;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../vendor/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: block;
}

:root {
  /* Bloom: a night sky with five colours in it, one per act.
     P(bloom) > P(doom) — the talk is about a good time to be building. */
  --bg: #15112a;
  --fg: #fbf6ee;
  --dim: #a59fc4;
  --line: #ffffff1f;
  --panel: #0000003d;
  --accent: #ffc93c;
  --act: var(--accent);

  --font: "Inter", "Deck Symbols", system-ui, sans-serif;
  --head: "Montserrat", "Deck Symbols", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Deck Symbols", ui-monospace, "DejaVu Sans Mono", monospace;

  /* width of the WIP notes panel, shared by the panel and the deck */
  --wip-w: clamp(22rem, 26vw, 34rem);
}

/* ?font=inter | montserrat | mono puts one family everywhere, to compare */
:root.f-inter { --head: var(--font); }
:root.f-montserrat { --font: var(--head); }
:root.f-mono { --font: var(--mono); --head: var(--mono); }

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

.reveal h1, .reveal h2, .reveal .beat .stat b { font-family: var(--head); }

.reveal {
  font-family: var(--font);
  font-size: 52px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg);
}

.reveal .slides section { text-align: left; }

/* numbers carry this talk */
.reveal em.n { color: var(--act); font-style: normal; font-weight: 800; }
.reveal h2 em.n {
  color: var(--bg);
  background: var(--act);
  padding: 0 0.18em;
  border-radius: 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- title + closing ---------- */
.reveal .title { text-align: center; }
.reveal .title h1 {
  font-size: 3.1em;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 0.5em;
  text-transform: none;
  color: var(--fg);
  background: linear-gradient(95deg, #ffc93c 0%, #ff6b6b 30%, #c77dff 62%, #4cc9f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reveal .title .who { font-size: 1em; margin: 0 0 0.15em; color: var(--fg); }
.reveal .title .where { font-size: 0.72em; margin: 0; color: var(--dim); letter-spacing: 0.02em; }
.reveal .title.end h1 { font-size: 3.6em; }

/* ---------- act dividers: one playing card per act ----------
   The DevFest Venezia 2026 cards: line art in one ink on a white card, the
   rank in two corners, the name on a tilted ribbon. Ink is the act colour
   darkened enough to read on white. */
.reveal .act .card {
  --ink: color-mix(in oklab, var(--act) 62%, #15112a);
  --paper: #fffaf0;
  position: relative;
  width: 600px;
  height: 840px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 40px;
  box-shadow: 0 34px 90px #15112a59;
  color: var(--ink);
  transform: rotate(-3deg);
}
.reveal .act .card::before {
  content: "";
  position: absolute;
  inset: 26px;
  border: 6px solid var(--ink);
  border-radius: 26px;
}
.reveal .act .pip {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 10px 4px;
  border-radius: 14px;
  background: var(--paper);
  font-family: var(--head);
  line-height: 0.95;
  text-align: center;
}
.reveal .act .pip b { display: block; font-size: 76px; font-weight: 800; letter-spacing: -0.04em; }
.reveal .act .pip i { display: block; font-size: 56px; font-weight: 700; font-style: normal; }
.reveal .act .pip.flip { top: auto; left: auto; bottom: 16px; right: 16px; transform: rotate(180deg); }
.reveal .act .suit {
  position: absolute;
  font-family: var(--head);
  font-size: 104px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: color-mix(in oklab, var(--act) 75%, var(--paper));
  transform: translate(-50%, -50%);
}
.reveal .act .suit.flip { transform: translate(-50%, -50%) rotate(180deg); }
.reveal .act .suit.ace { font-size: 220px; }
.reveal .act .ribbon {
  position: absolute;
  left: -44px;
  right: -44px;
  top: 50%;
  padding: 22px 34px;
  background: var(--paper);
  border: 6px solid var(--ink);
  box-shadow: 0 0 0 12px var(--paper);
  transform: translateY(-50%) rotate(-18deg);
}
.reveal .act h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

/* ---------- beats ---------- */
.reveal .beat .eyebrow {
  font-size: 0.56em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--act);
  margin: 0 0 0.9em;
  font-weight: 700;
}
.reveal .beat h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  text-transform: none;
  color: var(--fg);
  max-width: 100%;
}
/* a headline with explicit breaks keeps each line whole; the fit sizes it */
.reveal .beat h2.lines { white-space: nowrap; line-height: 1.25; }
.reveal .beat h2.s-xl { font-size: 4.2em; }
.reveal .beat h2.s-lg { font-size: 3.3em; }
.reveal .beat h2.s-md { font-size: 2.6em; }
.reveal .beat h2.s-sm { font-size: 2.1em; }
.reveal .beat h2.s-b1 { font-size: 1.85em; }
.reveal .beat h2.s-b2 { font-size: 1.6em; }

/* ---------- live demo ---------- */
.reveal .beat.demo h2 {
  border-left: 0.12em solid var(--act);
  padding-left: 0.45em;
  font-weight: 600;
}
.reveal .beat.demo .eyebrow::after {
  content: " — live demo";
  color: var(--fg);
}

/* ---------- chrome ---------- */
.reveal .progress { height: 5px; }
.reveal .progress span {
  background: linear-gradient(90deg, #ffc93c, #ff6b6b, #2ee6a6, #4cc9f0, #c77dff);
}
.reveal .slide-number {
  background: transparent;
  color: var(--dim);
  font-size: 0.5em;
  right: 1em;
  bottom: 0.8em;
}
.reveal .slide-number a { text-decoration: none; color: inherit; }

/* ---------- WIP notes panel (press W) ---------- */
#wip {
  position: fixed;
  top: 0; right: 0;
  width: var(--wip-w);
  height: 100vh;
  overflow-y: auto;
  display: none;
  z-index: 40;
  box-sizing: border-box;
  padding: 2rem 1.6rem 4rem;
  background: #100d20;
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: clamp(14px, 0.92vw, 19px);
  line-height: 1.6;
  color: #cfcbc3;
}
body.wip #wip { display: block; }
body.wip.reveal-viewport { width: calc(100vw - var(--wip-w)); }

#wip .meta {
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1.4em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  line-height: 1.5;
}
#wip .meta.thin { color: var(--accent); }
#wip .meta.long { color: #e2725b; }
#wip p { margin: 0 0 1.15em; }

/* ---------- slide payload ----------
   A conference audience photographs slides. Everything below has to read from
   the back row and make sense without the sentence I say over it. */
.reveal .beat.has-body h2 { margin-bottom: 0.7em; }
.reveal .beat .b { margin: 0; text-align: left; }

/* two or three numbers, nothing else */
.reveal .beat .stat {
  display: flex;
  gap: 0.9em;
  flex-wrap: wrap;
  align-items: baseline;
}
.reveal .beat .stat > div {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  background: var(--panel);
  border-top: 0.12em solid var(--act);
  border-radius: 0.08em 0.08em 0.35em 0.35em;
  padding: 0.45em 0.7em 0.55em;
}
.reveal .beat .stat b {
  font-size: 2.6em;
  line-height: 1;
  color: var(--act);
  letter-spacing: -0.03em;
}
.reveal .beat .stat span {
  font-size: 0.56em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* the data tables — the slides most likely to end up in somebody's phone */
.reveal .beat .tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84em;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.reveal .beat .tbl th {
  font-size: 0.72em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--act);
  font-weight: 700;
  text-align: left;
  padding: 0 0 0.5em;
  border-bottom: 2px solid var(--act);
}
.reveal .beat .tbl.cols-2 { max-width: 70%; }
.reveal .beat .tbl.cols-3 { max-width: 100%; }
.reveal .beat .tbl.cols-2.txt { max-width: 100%; }
.reveal .beat .tbl th + th, .reveal .beat .tbl td.num { text-align: right; }
.reveal .beat .tbl.txt th + th, .reveal .beat .tbl.txt td.num { text-align: left; }
.reveal .beat .tbl.txt th, .reveal .beat .tbl.txt td { padding-right: 1.2em; }
.reveal .beat .tbl td { padding: 0.36em 0; border-bottom: 1px solid var(--line); }
.reveal .beat .tbl tr:last-child td { border-bottom: 0; }
.reveal .beat .tbl:not(.txt) th + th, .reveal .beat .tbl:not(.txt) td + td { padding-left: 1em; }
.reveal .beat .tbl tr.spacer td { border: 0; padding-top: 0.5em; color: var(--dim); }

.reveal .beat .lst { list-style: none; padding: 0; font-size: 0.9em; line-height: 1.35; }
.reveal .beat .lst li { padding: 0.3em 0 0.3em 1.3em; position: relative; }
.reveal .beat .lst li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.78em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--act);
}

.reveal .beat .code {
  font-family: var(--mono);
  font-size: 0.68em;
  line-height: 1.6;
  background: var(--panel);
  border-left: 0.2em solid var(--act);
  padding: 0.9em 1.1em;
  border-radius: 0.3em;
  white-space: pre;
  overflow-x: auto;
}
.reveal .beat .code i { color: var(--act); font-style: normal; font-weight: 700; }

/* the line under the payload — the thing to remember, not a caption */
.reveal .beat .foot {
  margin: 0.9em 0 0;
  font-size: 0.72em;
  line-height: 1.35;
  color: var(--dim);
  text-align: left;
  max-width: 100%;
}
.reveal .beat .foot em.n { color: var(--act); }

/* a QR beside the payload, for a link nobody can type from the back row */
.reveal .beat .with-qr { display: flex; align-items: center; gap: 1.2em; }
.reveal .beat .with-qr > .b { flex: 1; min-width: 0; }
.reveal .beat .qr { flex: none; margin: 0; text-align: center; }
.reveal .beat .qr svg { display: block; width: 6.6em; height: 6.6em; border-radius: 0.18em; }
.reveal .beat .qr figcaption {
  margin-top: 0.5em;
  font-size: 0.5em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--act);
}