:root {
  /* Lets height transitions run to and from intrinsic sizes. */
  interpolate-size: allow-keywords;

  --site-max-width: 120rem;
  --container-width: 73.75rem;
  --content-width-reading: 48rem;
  --content-width-s: 34rem;
  --content-width-m: 42rem;
  --content-width-l: 58rem;
  --header-container-width: 77rem;
  --footer-container-width: var(--container-width);
  --viewport-min: 360;
  --viewport-max: 1200;
  --section-padding-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-padding-y: clamp(4rem, 8vw, 7.5rem);
  --header-height: 5.25rem;
  --admin-bar-offset: 0px;

  --font-family-body: "Nunito Sans", system-ui, sans-serif;
  --font-family-heading: "Quicksand", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: var(--font-weight-semibold);

  --color-cream: #fbf6f1;
  --color-cream-deep: #f7efe7;
  --color-blush: #f3e5dd;
  --color-blush-deep: #ecdace;
  --color-card: #ffffff;
  --color-card-warm: #fdfaf6;
  --color-ink: #36302a;
  --color-ink-soft: #5c534a;
  --color-ink-muted: #8a8077;
  --color-gold: #b28c52;
  --color-gold-deep: #997640;
  --color-gold-soft: #c9a977;
  --color-gold-tint: #efe3d0;
  --color-footer: #2e2823;
  --color-surround: #f5ebe0;

  --color-primary-100: var(--color-gold-tint);
  --color-primary-500: var(--color-gold);
  --color-primary-700: var(--color-gold-deep);
  --color-neutral-0: #ffffff;
  --color-neutral-50: var(--color-card-warm);
  --color-neutral-100: var(--color-cream-deep);
  --color-neutral-200: var(--color-blush-deep);
  --color-neutral-500: var(--color-ink-muted);
  --color-neutral-800: var(--color-ink-soft);
  --color-neutral-900: var(--color-ink);

  --color-text: var(--color-ink-soft);
  --color-text-muted: var(--color-ink-muted);
  --color-heading: var(--color-ink);
  --color-surface: var(--color-card);
  --color-surface-alt: var(--color-cream-deep);
  --color-surface-warm: var(--color-card-warm);
  --color-surface-accent-soft: var(--color-gold-tint);
  --color-surface-accent-hover: var(--color-blush);
  --color-border: color-mix(in srgb, var(--color-gold-soft) 48%, transparent);
  --color-link: var(--color-gold-deep);
  --color-link-hover: var(--color-gold);
  --color-selection-bg: var(--color-gold);
  --color-selection-bg-link: var(--color-gold-deep);
  --color-selection-text: #ffffff;
  --site-bg-outer: var(--color-surround);
  --site-bg-inner: var(--color-cream);
  --site-shell-shadow: 0 0 60px -10px color-mix(in srgb, var(--color-gold-deep) 16%, transparent);

  --text-2xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --text-xs: clamp(0.875rem, 0.84rem + 0.16vw, 1rem);
  --text-s: clamp(0.95rem, 0.91rem + 0.17vw, 1.0625rem);
  --text-m: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --text-l: clamp(1.125rem, 1.03rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --heading-1: clamp(2.25rem, 1.7rem + 2.3vw, 3.75rem);
  --heading-2: clamp(1.7rem, 1.45rem + 1.1vw, 2.4rem);
  --heading-3: clamp(1.35rem, 1.15rem + 0.75vw, 1.7rem);
  --heading-4: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --heading-5: 1.125rem;
  --heading-6: 1rem;
  --line-height-body: 1.72;
  --line-height-body-tight: 1.5;
  --line-height-heading: 1.25;
  --line-height-heading-tight: 1.12;

  --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.25vw, 0.625rem);
  --space-s: clamp(0.75rem, 0.6rem + 0.35vw, 1rem);
  --space-m: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
  --space-l: clamp(1.5rem, 1.15rem + 0.9vw, 2rem);
  --space-xl: clamp(2rem, 1.45rem + 1.5vw, 3rem);
  --space-2xl: clamp(3rem, 2rem + 2.8vw, 5rem);
  --space-3xl: clamp(4rem, 2.5rem + 4vw, 7rem);

  --flow-space: var(--space-s);
  --paragraph-space: var(--space-s);
  --heading-space: var(--space-l);
  --list-indent-space: var(--space-m);
  --list-item-space: var(--space-xs);
  --figure-space: var(--space-l);
  --blockquote-space: var(--space-l);
  --content-gap: var(--space-l);
  --grid-gap: var(--space-l);
  --page-stack-space: var(--space-l);
  --page-content-stack-space: var(--space-m);
  --front-page-content-stack-space: 0;

  /* Derived lines, washes, and surfaces. Every alpha value is mixed from a
     palette token so a palette change carries through. */
  --color-white: #ffffff;
  --color-shade: #786042;
  --color-line-hairline: color-mix(in srgb, var(--color-ink) 9%, transparent);
  --color-line-soft: color-mix(in srgb, var(--color-gold) 25%, transparent);
  --color-line-medium: color-mix(in srgb, var(--color-gold) 40%, transparent);
  --color-line-strong: color-mix(in srgb, var(--color-gold) 62%, transparent);
  --color-wash-gold: color-mix(in srgb, var(--color-gold-soft) 20%, transparent);
  --color-wash-blush: color-mix(in srgb, var(--color-blush-deep) 46%, transparent);
  --color-scrim: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --surface-card: linear-gradient(180deg, var(--color-white) 55%, var(--color-card-warm) 100%);
  --surface-panel: linear-gradient(178deg, var(--color-white) 0%, var(--color-card-warm) 100%);
  --surface-accent-panel: linear-gradient(180deg, var(--color-gold-tint) 0%, var(--color-card-warm) 100%);

  /* Motion */
  --duration-fast: 180ms;
  --duration-base: 250ms;
  --duration-card: 300ms;
  --duration-media: 600ms;
  --duration-reveal: 700ms;
  --easing-standard: ease;
  --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Component scale */
  --text-card-title: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  --text-card-body: calc(var(--text-m) * 0.94);
  --text-meta: calc(var(--text-2xs) * 0.86);
  --line-height-meta: 1.4;
  --letter-spacing-meta: 0.1em;
  --letter-spacing-eyebrow: 0.22em;
  --card-padding: clamp(1.35rem, 3vw, 1.75rem);
  --card-media-height: clamp(10.5rem, 17vw, 13.125rem);
  --card-lift: -0.375rem;
  --header-phone-line-gap: 3px;
  --avatar-size-l: 7.5rem;
  --section-heading-avatar: clamp(5rem, 8vw, 6.5rem);
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E");
  --section-overlap: clamp(2.25rem, 5vw, 4rem);
  --wave-height: clamp(2.5rem, 5vw, 5rem);

  --radius-s: 0.625rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-xl: 2.125rem;
  --radius-pill: 999px;
  --border-width-thin: 1px;
  --border-width-accent: 3px;
  --shadow-small: 0 2px 8px color-mix(in srgb, var(--color-gold-deep) 7%, transparent);
  --shadow-soft: 0 14px 40px -18px color-mix(in srgb, var(--color-gold-deep) 30%, transparent);
  --shadow-large: 0 30px 70px -30px color-mix(in srgb, var(--color-ink) 40%, transparent);
  --shadow-card:
    0 1px 2px color-mix(in srgb, var(--color-gold-deep) 6%, transparent),
    0 10px 26px -16px color-mix(in srgb, var(--color-gold-deep) 35%, transparent);
  --shadow-card-hover:
    0 1px 2px color-mix(in srgb, var(--color-gold-deep) 6%, transparent),
    0 26px 46px -22px color-mix(in srgb, var(--color-gold-deep) 45%, transparent);
  --transition-standard: var(--duration-base) var(--easing-standard);
  --translate-interactive-hover: -2px;

  --button-padding-y: 0.9rem;
  --button-padding-x: 1.75rem;
  --button-font-size: 1rem;
  --button-font-weight: 600;
  --button-radius: var(--radius-pill);
  --button-bg: var(--color-gold);
  --button-bg-hover: var(--color-gold-deep);
  --button-text: #ffffff;
  --button-border-width: 1.5px;
  --button-border: var(--button-border-width) solid var(--color-gold);
  --button-border-hover: var(--button-border-width) solid var(--color-gold-deep);
  --button-outline-bg: transparent;
  --button-outline-text: var(--color-gold-deep);
  --button-outline-text-hover: var(--color-gold-deep);
  --object-fit: cover;
  --object-position: 50% 50%;
}

@media (max-width: 40rem) {
  :root {
    --heading-1: clamp(1.9rem, 7.8vw, 2.1rem);
    --wave-height: 1.75rem;
  }
}