:root {
  color-scheme: dark;
  background: #0b0b0b;
  color: #dededb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11pt;
  font-weight: normal;
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

body {
  --page-padding-block: 48px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--page-padding-block) 12vw;
}

.page {
  flex: none;
  width: 100%;
  max-width: 900px;
  margin: auto;
  overflow-wrap: anywhere;
  /* Lift fitting content, clamped at the top padding; overflowing pages stay put. */
  transform: translateY(clamp(-4vh, calc(50% - 50vh + var(--page-padding-block)), 0px));
  transform: translateY(clamp(-4dvh, calc(50% - 50dvh + var(--page-padding-block)), 0px));
}

.page--compact {
  max-width: 600px;
}

nav {
  color: #aaaaa7;
  margin-bottom: 20px;
}

nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-separator {
  margin-left: 0.25em;
}

nav a,
nav a:visited {
  color: inherit;
}

.home-icon {
  width: 14px;
  height: 14px;
  margin-right: 0.3em;
  vertical-align: -2px;
}

h1 {
  margin: 0 0 20px;
  font: inherit;
  /*font-weight: 600;*/
  text-align: center;
}

p {
  margin: 0 0 8px;
}

.content > :last-child {
  margin-bottom: 0;
}

a,
a:visited {
  color: #8ab4f8;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.link-arrow {
  /* Inline spaces carry the link underline beneath the gap and drawn arrow. */
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.15em;
}

.link-arrow svg {
  position: absolute;
  right: 0;
  bottom: 0.1em;
  width: 0.75em;
  height: 0.75em;
}

figure {
  margin: 20px 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figcaption {
  margin-top: 8px;
}

model-viewer {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: #0b0b0b;
}

@media (max-width: 640px) {
  body {
    --page-padding-block: 28px;
    padding: var(--page-padding-block) 20px;
  }
}