:root {
  --color-primary: #f5c84c;
  --color-primary-contrast: #171717;
  --color-bg: #fbfaf7;
  --color-surface: #ffffff;
  --color-text: #171717;
  --color-muted: #6f6b63;
  --font-heading: "Karla", sans-serif;
  --font-body: "Karla", sans-serif;
  --radius: 1.25rem;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
.font-heading {
  font-family: var(--font-heading);
}

img {
  max-width: 100%;
}

.container-wide {
  width: min(100% - 2rem, 76rem);
  margin-inline: auto;
}

.section-space {
  padding-block: clamp(4rem, 8vw, 8rem);
}

.surface-card {
  background: var(--color-surface);
  border-radius: var(--radius);
}

.prose-copy p {
  color: var(--color-muted);
  line-height: 1.7;
}

.prose-copy a,
.rich-copy a {
  color: var(--color-primary-contrast);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.18em;
}

.hero-grid {
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 28rem),
    var(--color-bg);
}

.media-frame {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
}

.media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.modal-backdrop {
  display: none;
}

.modal-backdrop.is-open {
  display: flex;
}

@media (min-width: 768px) {
  .container-wide {
    width: min(100% - 4rem, 76rem);
  }
}