.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.main {
  flex: 1;
  padding: 1.75rem 0 var(--spacing-2xl);
}

/* A sheet of the paper's own colour, mostly transparent, lifts text
   off the weather without drawing a box around it */
.sheet {
  margin-top: -1rem;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

/* The ghost sheet.js draws when the browser cannot morph the sheet
   itself: the sheet's surface alone, laid over the page */
.sheet-ghost {
  position: absolute;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 5;
}

/* The about page: a short column on the left, leaving the room's
   window clear */
.page-content {
  width: 57.5%;
}

/* The card's spacing is layout, not prose rhythm, so it is set in
   rem: more air between the paragraphs than the prose default, and
   the headings closer to what they head than to what precedes them */
.page-content p {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

/* Margins collapse to the larger, so a list's top margin, not the
   heading's bottom, sets the gap under a heading */
.page-content ul {
  margin-top: 1.75rem;
  margin-bottom: 2.25rem;
}

.page-content.prose h2 {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
  margin-top: 2rem;
  margin-bottom: 0.25rem;
}

/* Its lists are plain lines, no bullets */
.page-content.prose ul {
  padding-left: 0;
  list-style: none;
}

.page-content.prose ul > li::before {
  content: none;
}

.page-content > :first-child {
  margin-top: 0;
}

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

.site-header {
  padding: var(--spacing-xl) 0;
}

/* The links carry pill padding so the active one can wear a wash
   without shifting; the row is pulled left by that padding so the
   words still line up with the sheets below */
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-left: -0.75rem;
}

.nav-link {
  padding: 0.25rem 0.75rem;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: 6px;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-accent);
}

/* You are here: on a wash of ink, as if the room's shadow fell on
   the word */
.nav-link[aria-current="page"] {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
}