/* Container Escapes 101 — light theme, since most diagrams are transparent PNGs with black ink */

:root {
  --ink: #1a1a1a;
  --accent: #5d4037;
  --link: #0b5d8f;
  --muted: #5f6b73;
  --slide-gutter: 4%;
}

.reveal-viewport {
  background: #fdfdfc;
}

.reveal {
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 30px;
  color: var(--ink);
}

.reveal h1,
.reveal h2,
.reveal h3 {
  color: var(--accent);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.5em;
}

.reveal h1 {
  font-size: 2.1em;
}
.reveal h2 {
  font-size: 1.4em;
}
.reveal h3 {
  font-size: 1.1em;
}

.reveal a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reveal a:hover {
  color: var(--accent);
}

.reveal p,
.reveal li {
  line-height: 1.35;
}

.reveal strong {
  font-weight: 700;
}

/* Content reads left-aligned; only headings and section breaks are centered */
/* border-box so the gutter eats into the slide width instead of overflowing it */
.reveal .slides section {
  text-align: left;
  box-sizing: border-box;
  padding-left: var(--slide-gutter);
  padding-right: var(--slide-gutter);
}

.reveal h1,
.reveal h2,
.reveal h3 {
  text-align: center;
}

.reveal ul {
  display: block;
  margin-left: 1.2em;
}

.reveal ul ul {
  font-size: 0.85em;
}

.reveal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Inline code only — pre blocks keep the monokai highlight theme */
.reveal :not(pre) > code {
  background: #f0efec;
  padding: 0.05em 0.25em;
  border-radius: 3px;
}

.reveal pre {
  width: 100%;
  font-size: 0.46em;
  box-shadow: none;
}

.reveal pre code {
  padding: 0.9em;
  border-radius: 6px;
  max-height: none;
}

.subtle {
  color: var(--muted);
}

/* Two-column layout — most slides in the source deck are text beside an image */
.split {
  display: flex;
  align-items: center;
  gap: 1.5em;
  text-align: left;
}

.split > div {
  flex: 1;
  min-width: 0;
}

/* Narrow the left column when it holds a tall portrait image */
.split-narrow-left > div:first-child {
  flex: 0 0 26%;
}

.split img {
  max-width: 100%;
  max-height: 58vh;
  width: auto;
  margin: 0 auto;
}

.split h2 {
  margin-top: 0;
  text-align: left;
}

/* Transparent-background diagrams shouldn't get reveal's default frame */
.reveal img.plain {
  background: none;
  border: none;
  box-shadow: none;
  margin: 0.3em auto;
  display: block;
  max-width: 100%;
  max-height: 66vh;
}

.reveal section > img.plain {
  max-height: 72vh;
}

.reveal img.terminal {
  border-radius: 6px;
  max-height: 22vh;
  margin-top: 0.6em;
}

.reveal img.headshot {
  border-radius: 50%;
  max-height: 55vh;
  border: none;
  box-shadow: none;
}

.reveal ul.contact {
  list-style: none;
  margin: 1em 0 0;
  font-size: 0.8em;
}

.reveal ul.contact li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.25em;
}

.reveal ul.contact i {
  width: 1.2em;
  text-align: center;
  color: var(--accent);
}

.reveal ul.contact a {
  text-decoration: none;
  color: var(--ink);
}

.reveal ul.contact a:hover {
  color: var(--link);
  text-decoration: underline;
}

.reveal img.qr {
  max-height: 45vh;
}

.reveal .slides section.section-break {
  text-align: center;
}

.section-break h1,
.section-break h2 {
  margin: 0;
}

.reveal img.shout {
  width: 100%;
  max-width: none;
  max-height: 80vh;
  object-fit: contain;
}

.reveal ul.cols-2 {
  columns: 2;
  font-size: 0.85em;
}

.reveal ul.tight,
.reveal ol.tight {
  font-size: 0.72em;
}

/* Workshop lists — the whole label is a link, so drop the underline until hover */
.reveal li > a {
  color: inherit;
  text-decoration-color: var(--link);
  text-decoration-thickness: 1px;
}

.reveal li > a:hover {
  color: var(--link);
}