/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------------------------------------------------------------ */

:root {
  --paper: #f4f5f3;
  --well: #ffffff;
  --ink: #1d2321;
  --ink-soft: #5f6764;
  --rule: #dce0dc;
  --accent: #1f5f5b;

  /* Avenir Next ships with macOS and carries real Medium and Demi Bold weights,
     so size, weight and color can do the work a second family would. No
     webfont, so the exported site stays self-contained. */
  --sans: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Containers are max-width'd and centred, so this is a ceiling rather than a
     width: the layout stays fluid until the viewport reaches it. */
  --page: 1840px;
  /* The note column, which sits beside a slide and stays at a reading width. */
  --measure: 34rem;
  /* The title and the markdown regions, which have the page to themselves. */
  --measure-wide: 64rem;
  --gutter: 2.5rem;
  --column-gap: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141917;
    --well: #1c2321;
    --ink: #e6e9e6;
    --ink-soft: #98a19d;
    --rule: #2c3532;
    --accent: #7fc8c1;
  }
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  /* A shade tighter than a serif would want at this measure. */
  line-height: 1.55;
}

/* Large displays. The slide column grows with the page, but note text stays at
   the reading measure, so the extra width goes to the slides. Has to sit after
   the base body rule above, which would otherwise win on source order. */
@media (min-width: 1600px) {
  :root {
    --measure: 36rem;
  }

  body {
    font-size: 1.1875rem;
  }
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

header,
.presentation,
footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 3.5rem 2.5rem;
}

/* ---- header ---------------------------------------------------------- */

/* Aligned to the same column as the title, so it reads as a corner mark
   rather than a nav bar. */
.header-link {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem 2.5rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Above the stacking breakpoint there is room for it to read as a masthead
   rather than a footnote. After the rule above, which would otherwise win. */
@media (min-width: 821px) {
  .header-link {
    font-size: 1.5rem;
  }
}

.header-link a,
.header-link a:visited {
  color: var(--accent);
  text-decoration: none;
}

.header-link a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The link already supplies the top margin. */
.header-link + header {
  padding-top: 1.75rem;
}

header {
  border-bottom: 1px solid var(--rule);
}

header h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  /* Demi Bold rather than Bold; Avenir Next has both and Bold is heavy here. */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: var(--measure-wide);
}

/* ---- markdown-authored regions --------------------------------------- */

/* The abstract and footer are rendered from markdown, so this has to cover
   whatever that emits rather than a known set of elements. */
.prose {
  max-width: var(--measure-wide);
  color: var(--ink-soft);
}

header .prose {
  margin-top: 1.25rem;
}

.prose > * + * {
  margin-top: 0.85em;
}

.prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.prose a,
.prose a:visited {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose em {
  font-style: italic;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose ul > li {
  list-style: disc;
}

.prose ol > li {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.prose blockquote {
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}

/* ---- slides ---------------------------------------------------------- */

.slides {
  display: grid;
  gap: 3.5rem;
}

.slide {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--column-gap);
  align-items: start;
  scroll-margin-top: 1.5rem;
}

/* Doubles as the anchor for deep links, which is why the number sits in the
   margin rather than trailing the note. */
.slide-index {
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  text-align: right;
  text-decoration: none;
  color: var(--ink-soft);
  padding-top: 0.35rem;
}

.slide-index:hover,
.slide:target .slide-index {
  color: var(--accent);
}

.slide:target .slide-index {
  font-weight: 600;
}

.slide-image img {
  display: block;
  width: 100%;
  /* The width/height attributes reserve space while the slide loads. Without
     this they'd also fix the rendered height and squash the image. */
  height: auto;
  background-color: var(--well);
  border: 1px solid var(--rule);
}

/* Movies sit over their poster frame in the slide image, at the rectangle they
   had in Keynote, as percentages of the slide. */
.slide-image {
  position: relative;
}

.slide-movie {
  position: absolute;
  object-fit: contain;
}

.slide-note {
  padding-top: 0.15rem;
  /* The column widens with the page; the text should not. */
  max-width: var(--measure);
}

/* On the first paragraph this would push the note off the top of its slide. */
.slide-note p + p {
  margin-top: 0.7em;
}

/* ---- share links ----------------------------------------------------- */

.share {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 2rem;
}

.share a,
.share a:visited {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

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

.share .handle {
  margin-left: 0.5em;
}

/* Driven off the label so the marks track whatever size .share is set to,
   rather than the width/height attributes on the svg itself. */
.share svg {
  height: 1.05em;
  width: auto;
}

/* Matches the header link above the stacking breakpoint. After the rules above,
   which would otherwise win. */
@media (min-width: 821px) {
  .share {
    font-size: 1.5rem;
  }
}

.bsky + .mstdn {
  margin-left: 1.5rem;
}

/* ---- footer ---------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
}

footer .share {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* Scoped to the credit line so it doesn't restyle markdown-authored footers. */
.colophon {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 2rem;
}

.colophon a,
.colophon a:visited {
  color: var(--ink-soft);
}

/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 820px) {
  header,
  .presentation,
  footer {
    padding: 2.5rem 1.25rem;
  }

  .header-link {
    padding: 1.5rem 1.25rem 0;
  }

  .header-link + header {
    padding-top: 1.25rem;
  }

  .slides {
    gap: 2.75rem;
  }

  .slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .slide-index {
    text-align: left;
    padding-top: 0;
  }

  .slide-note {
    padding-top: 0;
  }
}