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

  /* brand */
  --leaf: #0f6b52;
  --leaf-deep: #082a20;
  --mango: #d9a536;
  --cream: #faf3e2;
  --night: #0b2f26;
  --night-2: #123f33;

  /* theme (light) */
  --bg: #f7f2e6;
  --bg-2: #ece2c9;
  --ink: #17241d;
  --muted: #56655c;
  --line: rgba(15, 107, 82, .22);
  --cta-bg: #0f6b52;
  --cta-ink: #faf3e2;
  --star: #c9862a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b241c;
    --bg-2: #10352a;
    --ink: #f2ecd9;
    --muted: #b9c4b7;
    --line: rgba(242, 236, 217, .22);
    --cta-bg: #d9a536;
    --cta-ink: #1a1004;
    --star: #e0b24f;
  }
}
:root[data-theme="dark"] {
  --bg: #0b241c;
  --bg-2: #10352a;
  --ink: #f2ecd9;
  --muted: #b9c4b7;
  --line: rgba(242, 236, 217, .22);
  --cta-bg: #d9a536;
  --cta-ink: #1a1004;
  --star: #e0b24f;
}
*, *::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; }