/* Theme bridge for the isolated About onepager. */
html[data-theme="light"] {
  color-scheme: light;
  --color-background: oklch(97% 0 0);
  --color-foreground: oklch(16% 0 0);
  --color-muted: oklch(92% 0 0);
  --color-muted-foreground: oklch(42% 0 0);
  --color-border: oklch(84% 0 0);
  --color-primary: oklch(18% 0 0);
  --color-primary-foreground: oklch(98% 0 0);
  --color-accent: oklch(90% 0 0);
  --color-accent-foreground: oklch(16% 0 0);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  transition: background-color 180ms ease, color 180ms ease;
}

body[data-page="about"] .max-w-5xl {
  width: var(--page);
  max-width: var(--page);
}

/* Keep the About page on the same typography and color system as the site. */
body[data-page="about"] {
  background: var(--background);
  color: var(--foreground);
}

body[data-page="about"] main h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body[data-page="about"] main h2 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}

body[data-page="about"] main h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

body[data-page="about"] main .text-muted-foreground {
  color: var(--foreground);
}

body[data-page="about"] main .text-foreground {
  color: var(--foreground);
}

body[data-page="about"] main p.text-lg,
body[data-page="about"] main p.leading-relaxed:not(.text-sm):not([class*="text-["]) {
  font-size: 1rem;
  line-height: 1.7;
}

body[data-page="about"] main h1 + p {
  margin-top: 1.5rem;
  color: var(--foreground);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.7;
}

body[data-page="about"] main h2 + p {
  margin-top: 1rem;
  color: var(--foreground);
}

body[data-page="about"] main h3 + p {
  margin-top: .5rem;
  color: var(--foreground);
}

body[data-page="about"] main .bg-black .text-muted-foreground,
body[data-page="about"] main .zigzag-panel .text-muted-foreground {
  color: #f2f2f2;
}

body[data-page="about"] main #team h2 + p {
  color: #f2f2f2;
}

body[data-page="about"] main #team .bg-black,
body[data-page="about"] main #team .bg-black p,
body[data-page="about"] main #team .bg-black a {
  color: #f2f2f2;
}

body[data-page="about"] main #team .bg-black p.font-semibold {
  font-weight: 700;
}

@media (max-width: 48rem) {
  body[data-page="about"] main h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}