:root {
  /* #theme */
  --color-background: #f2f5f5;
  --color-paper: #fff;
  --space: 32px;
  --half-space: calc(var(--space) / 2);
  --polaroid-scale: 0.5;
  --polaroid-scaled-width: calc(var(--polaroid-width) * var(--polaroid-scale));
  --polaroid-scaled-height: calc(
    var(--polaroid-height) * var(--polaroid-scale)
  );
  --content-max-width: 768px;
}

@media (min-width: 480px) {
  :root {
    --polaroid-scale: 0.75;
  }
}
@media (min-width: 768px) {
  :root {
    --polaroid-scale: 1;
  }
}

body {
  margin: 0;
  background: var(--color-background);

  /* Always show the scrollbar to prevent layout shift when changing pages. */
  overflow-y: scroll;

  /* Increase line-height for everything. */
  line-height: 1.25;
}

.content code {
  background-color: #fffff9;
}

.content img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* About as small as possible without trampling multi-line headings. */
  line-height: 1;
}

h1 {
  margin-block-start: 0;
}

html {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, system-ui;
}

pre {
  overflow-x: auto;
  overflow-y: auto;
  background-color: #fffff9;
  padding: 1rem;
  scroll-padding-top: 2px;
  scroll-padding-inline: 32px;
  scroll-padding-block: 32px;
  outline: 1px solid #f0f0f0;
  border-radius: 2px;
}

.heading__fragment {
  float: left;
  padding-right: 20px;
  margin-left: -20px;
  color: #0000;
  text-decoration: none;
  width: 0;
  display: block;
}

.heading__fragment:hover {
  color: #ddd;
}

main {
  box-sizing: border-box;
  padding: var(--space);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px #0002;
  border-radius: 2px;
}

footer {
  padding-block-start: var(--half-space);
  padding-block-end: var(--half-space);
  padding-inline-start: var(--half-space);
  padding-inline-end: var(--half-space);
}

.footer__text {
  /* Left-align. */
  display: block;
  width: 100%;
  font-size: xx-small;
}

a {
  font-weight: bold;
}

.logo {
  display: block;
}

header {
  padding: var(--half-space);
}

.page {
  max-width: var(--content-max-width);
  margin: 0 auto var(--space) auto;
}

.nav__list {
  margin: 0;
  display: flex;
  gap: var(--half-space);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.nav__link-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav__link {
  font-weight: normal;
  /* Center vertically. */
  display: block;
}

.lead {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--half-space);
}
.lead__image {
  width: var(--polaroid-scaled-width);
  height: var(--polaroid-scaled-height);
}
.lead__polaroid {
  transform: rotate(-1deg) scale(var(--polaroid-scale));
  margin: calc(
      -1 * (var(--polaroid-height) - var(--polaroid-scaled-height)) / 2
    )
    0 0 calc(-1 * (var(--polaroid-width) - var(--polaroid-scaled-width)) / 2);
}
.lead__text {
  min-width: 192px;
  flex: 1;
  padding-block-start: var(--half-space);
}

h1 + .subtitle {
  display: block;
  margin-top: -1rem;
}