/*
  Look and feel. Change colours and fonts here; the diagrams read them too.
*/

:root {
  --paper: #fbf8f1;
  --ink: #23211e;
  --muted: #8f887c;
  --accent: #d9480f;      /* red marker */
  --accent-2: #1864ab;    /* blue pen, used for links */
  --highlight: #ffe066;   /* highlighter behind .marker text */

  --font-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-hand: "Kalam", "Comic Neue", cursive;
}

html, body, .reveal-viewport {
  background: var(--paper);
}

.reveal {
  font-family: var(--font-text);
  font-size: 34px;
  color: var(--ink);
}

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

.reveal h1,
.reveal h2 {
  margin: 0 0 0.6em;
  font-family: var(--font-text);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.reveal h1 { font-size: 2em; max-width: 18em; }
.reveal h2 { font-size: 1.35em; }

.reveal p { margin: 0 0 0.6em; line-height: 1.35; }
.reveal a { color: var(--accent-2); }
.reveal em { font-style: italic; }

/* Highlighter stroke behind a few words. */
.marker {
  padding: 0 0.1em;
  background: linear-gradient(transparent 55%, var(--highlight) 55%, var(--highlight) 92%, transparent 92%);
}

.hand { font-family: var(--font-hand); }
.muted { color: var(--muted); }
.small { font-size: 0.7em; }

/* Diagrams */
svg.diagram {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  margin: 0.3em auto 0;
  overflow: visible;
}

/* Title slide */
.title .byline {
  margin-top: 1.2em;
  font-size: 1.15em;
  color: var(--muted);
}

/* The opening questions. A fixed height (reveal.js overrides min-height) keeps the question at the same place on every .ask slide,
   however many answer lines follow it. */
.reveal .slides section.ask { height: 480px; }
.question {
  max-width: 21em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
}

/* Our answer to an opening question, shown on click */
.answer-big {
  margin-top: 0.6em;
  font-family: var(--font-hand);
  font-size: 1.8em;
  color: var(--accent);
}
.answer-big.answer-next { margin-top: -0.2em; }
.answer-small {
  font-family: var(--font-hand);
  font-size: 1.2em;
  color: var(--muted);
}

/* One big sentence on a slide */
.statement p {
  max-width: 19em;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.25;
}
.statement p.small { font-size: 0.75em; font-weight: 400; color: var(--muted); }
.statement p.goal { font-size: 0.95em; font-weight: 400; }
.statement p.answer { font-size: 1.05em; color: var(--accent); }
.statement p.goal,
.statement p.small,
.statement p.answer { max-width: 28em; }

/* Section dividers */
.divider .num {
  margin: 0 0 0.1em;
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.divider h2 { font-size: 1.8em; max-width: 14em; }

/* Lists */
.reveal ol,
.reveal ul {
  margin: 0 0 0 1.2em;
  line-height: 1.5;
}
.reveal li { margin-bottom: 0.35em; }

.lessons ol { font-size: 1.15em; }
.lessons li::marker { font-weight: 700; color: var(--accent); }

/* Handwritten list without bullets, e.g. results of the improvement meetings */
.reveal ul.hand {
  margin-left: 0;
  list-style: none;
  font-size: 1.05em;
}
.reveal ul.hand li::before { content: "– "; color: var(--accent); }
.reveal ul.hand .fix { color: var(--accent); }

/* "What worked, what didn't" at the end of each lesson */
.verdict .kicker {
  margin-bottom: 0.2em;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--accent);
}
.verdict .columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}
.verdict .columns.single { grid-template-columns: 1fr; }
.verdict .col-title {
  margin-bottom: 0.3em;
  font-family: var(--font-hand);
  font-size: 0.9em;
  color: var(--muted);
}
.reveal .verdict ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-hand);
  font-size: 1em;
}
.reveal .verdict li {
  position: relative;
  padding-left: 1.3em;
}
.reveal .verdict li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-text);
  font-weight: 700;
}
.reveal .verdict .worked li::before { content: "✓"; color: var(--ink); }
.reveal .verdict .didnt li::before { content: "✗"; color: var(--accent); }

/* xkcd slide: the comic is the slide background, filling the screen */
.reveal .slides section.xkcd {
  height: 100%;
}

/* The closing line under the recap */
.reveal .lessons p.thesis {
  margin: 2.2em auto 0;
  max-width: 26em;
  text-align: center;
  color: var(--muted);
}
.reveal .lessons .thesis-label {
  font-family: var(--font-hand);
  font-size: 0.9em;
  color: var(--accent);
}

/* "There's only so much room in your head" */
.reveal p.head-line { margin-top: 0.3em; font-weight: 700; color: var(--accent); }

/* "What worked" highlights: the biggest win, and small tags like "hot take" */
.reveal .verdict li.big { font-size: 1.15em; }
.reveal .verdict .tag { margin-left: 0.3em; font-size: 0.65em; color: var(--accent); }

/* xkcd credit, in the empty margin right of the comic */
.credit-corner {
  position: absolute;
  right: -30px;
  bottom: -20px;
  font-size: 0.5em;
  color: var(--muted);
}