:root {
  --page-shell-max: 900px;
  --page-hero-measure: 72ch;
  --page-readable-measure: 60ch;
  --page-shell-pad-x: 20px;
  --page-shell-pad-bottom: 72px;
  --page-nav-margin-top: 1em;
  --page-nav-margin-bottom: 2em;
  --page-section-gap: 24px;
  --page-card-radius: 24px;
  --page-card-padding: 28px;
  --page-card-padding-mobile: 22px;
  --page-bg: #ffffff;
  --page-border: #e5e5ea;
  --page-contrast-bg: #f2f2f7;
  --page-contrast-bg-alt: #f5f5f7;
  --page-contrast-bg-strong: #ebebf0;
  --page-section-bg: var(--page-contrast-bg);
  --page-section-border: var(--page-border);
  --page-component-bg: var(--page-contrast-bg);
  --page-component-bg-alt: var(--page-contrast-bg-alt);
  --page-component-bg-strong: var(--page-contrast-bg-strong);
  --page-component-border: var(--page-border);
  --page-section-shadow: none;
  --page-subtle-link-underline: #9cb9ee;
  --page-subtle-link-hover: #134493;
}

html.force-light {
  --page-bg: #ffffff;
  --page-border: #e5e5ea;
  --page-contrast-bg: #f2f2f7;
  --page-contrast-bg-alt: #f5f5f7;
  --page-contrast-bg-strong: #ebebf0;
  --page-section-bg: var(--page-contrast-bg);
  --page-section-border: var(--page-border);
  --page-component-bg: var(--page-contrast-bg);
  --page-component-bg-alt: var(--page-contrast-bg-alt);
  --page-component-bg-strong: var(--page-contrast-bg-strong);
  --page-component-border: var(--page-border);
  --page-section-shadow: none;
  --page-subtle-link-underline: #9cb9ee;
  --page-subtle-link-hover: #134493;
}

html.force-dark {
  --page-bg: #1c1c1e;
  --page-border: #3a3a3c;
  --page-contrast-bg: #2a2a2c;
  --page-contrast-bg-alt: #2c2c2e;
  --page-contrast-bg-strong: #3a3a3c;
  --page-section-bg: var(--page-contrast-bg);
  --page-section-border: var(--page-border);
  --page-component-bg: var(--page-contrast-bg);
  --page-component-bg-alt: var(--page-contrast-bg-alt);
  --page-component-bg-strong: var(--page-contrast-bg-strong);
  --page-component-border: var(--page-border);
  --page-section-shadow: none;
  --page-subtle-link-underline: #6f97d1;
  --page-subtle-link-hover: #9ec4ff;
}

@media (prefers-color-scheme: dark) {
  html:not(.force-light):not(.force-dark) {
    --page-bg: #1c1c1e;
    --page-border: #3a3a3c;
    --page-contrast-bg: #2a2a2c;
    --page-contrast-bg-alt: #2c2c2e;
    --page-contrast-bg-strong: #3a3a3c;
    --page-section-bg: var(--page-contrast-bg);
    --page-section-border: var(--page-border);
    --page-component-bg: var(--page-contrast-bg);
    --page-component-bg-alt: var(--page-contrast-bg-alt);
    --page-component-bg-strong: var(--page-contrast-bg-strong);
    --page-component-border: var(--page-border);
    --page-section-shadow: none;
    --page-subtle-link-underline: #6f97d1;
    --page-subtle-link-hover: #9ec4ff;
  }
}

.site-nav {
  margin: 0 0 var(--page-nav-margin-bottom);
  line-height: 1.5;
  padding-inline: var(--page-card-padding);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li {
  display: inline-flex;
  align-items: center;
}

.site-nav li + li::before {
  content: "|";
  margin: 0 0.75rem;
  color: var(--muted, var(--color-muted));
}

.site-nav [aria-current="page"] {
  color: var(--text, var(--color-text));
}

.site-nav .nav-item-with-icon {
  gap: 0.35rem;
}

.site-nav .nav-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-nav .nav-item-with-icon .nav-icon {
  display: block;
  width: 0.95em;
  height: 0.95em;
  flex: none;
  margin-left: -0.7rem;
  opacity: 0.8;
  transform: translateY(0.08em);
}

.hero,
.content-card {
  background: var(--page-section-bg);
  border: 1px solid var(--page-section-border);
  border-radius: var(--page-card-radius);
  padding: var(--page-card-padding);
  box-shadow: var(--page-section-shadow);
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 1.7vw + 1rem, 1.8rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero p {
  margin: 0;
  color: var(--muted, var(--color-muted));
  max-inline-size: min(100%, var(--page-hero-measure));
}

/* Keep prose readable even inside wide cards. */
:where(.content-card) :where(p, li, dd, figcaption) {
  max-inline-size: min(100%, var(--page-readable-measure));
}

:where(.content-card) :where(th, td) {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* Avoid automatic hyphenation in short label columns. */
:where(.content-card) :where(th, td):first-child {
  hyphens: none;
}

.page-subtle-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--page-subtle-link-underline);
  text-underline-offset: 2px;
}

.page-subtle-link:hover {
  color: var(--page-subtle-link-hover);
}

.wrapper {
  max-width: var(--page-shell-max);
  margin: 0 auto;
  padding: var(--page-nav-margin-top) var(--page-shell-pad-x) var(--page-shell-pad-bottom);
}

@media (max-width: 720px) {
  .site-nav {
    padding-inline: var(--page-card-padding-mobile);
  }

  .hero,
  .content-card {
    padding: var(--page-card-padding-mobile);
  }
}