/* 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;

  --page: 1240px;
  --measure: 34rem;
  --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;
}

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 ---------------------------------------------------------- */

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

header h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  /* 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);
}

header p {
  max-width: var(--measure);
  margin-top: 1.25rem;
  color: var(--ink-soft);
}

/* ---- 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);
}

.slide-note {
  padding-top: 0.15rem;
}

/* 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.625rem;
}

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

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

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

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

footer p {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

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

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

@media (max-width: 820px) {
  header,
  .presentation,
  footer {
    padding: 2.5rem 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;
  }
}