:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  /* brand */
  --leaf: #12507e;
  --leaf-deep: #06263f;
  --mango: #d97b3f;
  --cream: #fbf7ee;
  --night: #06263f;
  --night-2: #0c3559;

  /* theme (light) */
  --bg: #f7f4ea;
  --bg-2: #eae3d0;
  --ink: #16283a;
  --muted: #556577;
  --line: rgba(18, 80, 126, .22);
  --cta-bg: #12507e;
  --cta-ink: #fbf7ee;
  --star: #c9622a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a2036;
    --bg-2: #0f2c48;
    --ink: #f3ece0;
    --muted: #aebccb;
    --line: rgba(243, 236, 224, .22);
    --cta-bg: #d97b3f;
    --cta-ink: #1a1004;
    --star: #e08f4f;
  }
}
:root[data-theme="dark"] {
  --bg: #0a2036;
  --bg-2: #0f2c48;
  --ink: #f3ece0;
  --muted: #aebccb;
  --line: rgba(243, 236, 224, .22);
  --cta-bg: #d97b3f;
  --cta-ink: #1a1004;
  --star: #e08f4f;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 4.5rem); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 560; margin: 0; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--mango); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }