:root {
  color-scheme: light dark;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --fg: light-dark(#1a1a1a, #ececec);
  --muted: light-dark(#5c5c5c, #a3a3a3);
  --bg: light-dark(#fafafa, #121212);
  --rule: light-dark(#e5e5e5, #333);
  --link: light-dark(#4d7199, #e6eefb);
  --link-visited: light-dark(#5f5688, #ebe7fc);
  --link-hover: light-dark(#395a82, #f7faff);
  --focus-ring: light-dark(#4d7199, #b8cef5);

  --space-hairline: 1px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --space-stretch-xs: calc(var(--space-xs) + var(--space-2xs));
  --space-stretch-md: calc(var(--space-md) + var(--space-2xs));
  --space-stretch-lg: calc(var(--space-lg) + var(--space-2xs));
  --space-stretch-xl: calc(var(--space-xl) + var(--space-2xs));

  --ring-width: 2px;
  --ring-offset: 2px;
  /* Radii: px (same unit system as --space-*) */
  --radius-sm: var(--space-2xs);
  --radius-ui: var(--ring-width);
  --radius-pill: 999px;

  --measure-max: 672px;

  --font-size-overline: 11px;
  --font-size-sm: 14px;
  --font-size-meta: 15px;
  --font-size-body: 17px;
  --font-size-intro: 18px;
  --font-size-h1-fluid: clamp(32px, 5vw, 44px);
  --font-size-legal-title: clamp(24px, 3.25vw, 32px);

  --line-height-body: 1.6;
  --line-height-tight: 1.15;
  --line-height-title: 1.2;
  --line-height-snug: 1.5;
  --line-height-icon: 1;

  --letter-tight: -0.02em;
  --letter-label: 0.12em;

  --space-block-copy: var(--font-size-body);
  --space-list-indent: 24px;
  --space-list-item-gap: var(--space-xs);
  --space-after-heading: var(--space-stretch-xs);
  --space-after-intro: var(--space-2xs);

  --link-underline-offset: var(--ring-offset);
  --link-rest-opacity: 0.80;
  --link-hover-opacity: 1;

  --border-solid: var(--space-hairline) solid var(--rule);
  --border-dashed: var(--space-hairline) dashed var(--rule);

  --pill-bg: light-dark(#ebebeb, #252525);
  --pill-bg-hover: light-dark(#e0e0e0, #2e2e2e);
  --pill-border: light-dark(#dedede, #3a3a3a);

  --duration-fast: 0.15s;
  --ease-default: ease;

  --z-theme: 1;
  --z-skip: 2;
}

@media (prefers-color-scheme: light) {
  :root:has(#invert-theme:checked) {
    color-scheme: dark only;
  }
}

@media (prefers-color-scheme: dark) {
  :root:has(#invert-theme:checked) {
    color-scheme: light only;
  }
}

@supports not (color: light-dark(white, black)) {
  html {
    --fg: #1a1a1a;
    --muted: #5c5c5c;
    --bg: #fafafa;
    --rule: #e5e5e5;
    --link: #4d7199;
    --link-visited: #5f5688;
    --link-hover: #395a82;
    --focus-ring: #4d7199;
    --pill-bg: #ebebeb;
    --pill-bg-hover: #e0e0e0;
    --pill-border: #dedede;
  }

  @media (prefers-color-scheme: dark) {
    html:not(:has(#invert-theme:checked)) {
      --fg: #ececec;
      --muted: #a3a3a3;
      --bg: #121212;
      --rule: #333;
      --link: #e6eefb;
      --link-visited: #ebe7fc;
      --link-hover: #f7faff;
      --focus-ring: #b8cef5;
      --pill-bg: #252525;
      --pill-bg-hover: #2e2e2e;
      --pill-border: #3a3a3a;
    }
  }

  @media (prefers-color-scheme: light) {
    html:has(#invert-theme:checked) {
      --fg: #ececec;
      --muted: #a3a3a3;
      --bg: #121212;
      --rule: #333;
      --link: #e6eefb;
      --link-visited: #ebe7fc;
      --link-hover: #f7faff;
      --focus-ring: #b8cef5;
      --pill-bg: #252525;
      --pill-bg-hover: #2e2e2e;
      --pill-border: #3a3a3a;
    }
  }

  @media (prefers-color-scheme: dark) {
    html:has(#invert-theme:checked) {
      --fg: #1a1a1a;
      --muted: #5c5c5c;
      --bg: #fafafa;
      --rule: #e5e5e5;
      --link: #4d7199;
      --link-visited: #5f5688;
      --link-hover: #395a82;
      --focus-ring: #4d7199;
      --pill-bg: #ebebeb;
      --pill-bg-hover: #e0e0e0;
      --pill-border: #dedede;
    }
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.theme-input-sr-only,
a.skip-link:not(:focus-visible):not(:active) {
  position: absolute;
  width: var(--space-hairline);
  height: var(--space-hairline);
  padding: 0;
  margin: calc(-1 * var(--space-hairline));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a.skip-link:focus-visible {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  opacity: var(--link-hover-opacity);
  color: var(--fg);
  background: var(--bg);
  border: var(--border-solid);
  border-radius: var(--radius-sm);
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
  text-decoration: none;
}

body {
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-md) var(--space-xxxl);
  font-family: var(--font);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--fg);
  background: var(--bg);
}

body > header:not(.page-header-sub) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

body > header:not(.page-header-sub) > h1 {
  margin-bottom: 0;
}

.header-lede {
  display: flex;
  flex-direction: column;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--font-size-h1-fluid);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-tight);
  margin: 0 0 var(--space-after-heading);
}

.intro {
  font-size: var(--font-size-intro);
  margin: 0 0 var(--space-after-intro);
}

.meta {
  color: var(--muted);
  font-size: var(--font-size-meta);
  margin: 0 0 var(--space-md);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-stretch-lg);
}

main:has(> section) {
  margin-top: var(--space-stretch-lg);
}

main section h2 {
  margin: 0 0 var(--space-stretch-xs);
}

h2 {
  font-size: var(--font-size-overline);
  text-transform: uppercase;
  letter-spacing: var(--letter-label);
  color: var(--muted);
  font-weight: 600;
  margin: var(--space-stretch-lg) 0 var(--space-stretch-xs);
}

p {
  margin: 0 0 var(--space-block-copy);
}

a {
  color: var(--link);
  opacity: var(--link-rest-opacity);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
  border-radius: var(--radius-ui);
  transition:
    opacity var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
  opacity: var(--link-hover-opacity);
}

a:focus-visible {
  opacity: var(--link-hover-opacity);
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
}

ul {
  margin: 0 0 var(--space-block-copy);
  padding-left: var(--space-list-indent);
}

li {
  margin-bottom: var(--space-list-item-gap);
}

main .pill-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 0;
  margin: 0 0 var(--space-block-copy);
  list-style: none;
}

main .pill-list > li {
  margin: 0;
}

a.pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  border: var(--space-hairline) solid var(--pill-border);
  color: var(--fg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default);
}

a.pill:hover {
  background: var(--pill-bg-hover);
  color: var(--fg);
  opacity: var(--link-hover-opacity);
}

a.pill:visited {
  color: var(--fg);
}

a.pill:focus-visible {
  color: var(--fg);
}

.hint {
  font-size: var(--font-size-sm);
  color: var(--muted);
}

.meta--tight-bottom {
  margin-bottom: var(--space-xs);
}

.page-header-sub h1 {
  margin-bottom: var(--space-sm);
}

article.legal {
  padding-bottom: var(--space-sm);
}

article.legal address {
  font-style: normal;
  margin: 0 0 var(--space-sm);
}

h2.legal-page-title {
  font-family: var(--serif);
  font-size: var(--font-size-legal-title);
  font-weight: 600;
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-tight);
  text-transform: none;
  color: var(--fg);
  margin: 0 0 var(--space-xs);
}

article.legal .hint + h2 {
  margin-top: var(--space-stretch-md);
}

.placeholder-block {
  display: inline-block;
  margin: var(--space-xs) 0 0;
  padding: var(--space-stretch-xs) var(--space-sm);
  max-width: 100%;
  border: var(--border-dashed);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-snug);
}

footer {
  margin-top: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--muted);
}

.footer-rule {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--space-sm));
  max-width: 100%;
  margin: 0 auto var(--space-md);
  border: 0;
  border-top: var(--space-hairline) solid color-mix(in srgb, var(--rule) 42%, transparent);
}

.footer-nav {
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  display: inline-flex;
  min-height: var(--space-stretch-xl);
  padding: var(--space-2xs) var(--space-xs);
  margin: calc(-1 * var(--space-2xs)) calc(-1 * var(--space-xs));
}

@media (max-width: 480px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

.theme-bar {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-theme);
}

.theme-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-stretch-xl);
  height: var(--space-stretch-xl);
  border: var(--border-solid);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-label,
  a {
    transition: none;
  }

  a.pill {
    transition: none;
  }
}

.theme-toggle-label:hover {
  border-color: var(--muted);
}

#invert-theme:focus-visible + .theme-toggle-label {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
}

.theme-toggle-icon {
  font-size: var(--font-size-intro);
  line-height: var(--line-height-icon);
}

.theme-toggle-icon::before {
  content: "☾";
}

@media (prefers-color-scheme: light) {
  :root:has(#invert-theme:checked) .theme-toggle-icon::before {
    content: "☀";
  }
}

@media (prefers-color-scheme: dark) {
  html:not(:has(#invert-theme:checked)) .theme-toggle-icon::before {
    content: "☀";
  }

  :root:has(#invert-theme:checked) .theme-toggle-icon::before {
    content: "☾";
  }
}