:root {
  /* color system */
  --c-bg: #f5f1eb;
  --c-surface: #e9e1d6;
  --c-surface-strong: #ddd1c0;
  --c-surface-soft: #f8f5f0;
  --c-surface-paper: #fcf8f3;
  --c-white: #fffdfa;
  --c-ink: #161311;
  --c-ink-soft: #2c2723;
  --c-muted: #5b534c;
  --c-line: rgba(22, 19, 17, 0.085);
  --c-line-strong: rgba(22, 19, 17, 0.145);
  --c-bronze: #8c5e34;
  --c-sand: #c8a983;
  --c-olive: #6c7061;
  --c-forest: #435140;
  --c-moss: #7a866c;
  --c-clay: #9a6a4f;
  --c-available: #526447;
  --c-busy: #85685d;
  --c-overlay: rgba(17, 15, 13, 0.42);
  --c-overlay-strong: rgba(17, 15, 13, 0.6);
  --c-glass: rgba(245, 241, 235, 0.82);
  --c-glass-strong: rgba(245, 241, 235, 0.92);
  --c-glass-edge: rgba(255, 253, 250, 0.38);
  --c-interactive-soft: rgba(22, 19, 17, 0.035);
  --c-interactive-soft-hover: rgba(22, 19, 17, 0.065);
  --c-interactive-soft-pressed: rgba(22, 19, 17, 0.1);
  --c-interactive-light: rgba(255, 255, 255, 0.1);
  --c-interactive-light-hover: rgba(255, 255, 255, 0.17);
  --c-interactive-light-pressed: rgba(255, 255, 255, 0.24);
  --c-focus-ring: rgba(140, 94, 52, 0.62);
  --c-focus-ring-inner: rgba(255, 253, 250, 0.92);
  --c-surface-highlight: rgba(255, 253, 250, 0.72);
  --c-surface-inner-line: rgba(255, 253, 250, 0.44);
  --c-surface-tonal-top: rgba(255, 253, 250, 0.12);
  --c-surface-tonal-bottom: rgba(12, 10, 9, 0.06);

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(3.7rem, 7vw, 7.6rem);
  --fs-h1: clamp(2.9rem, 4.6vw, 4.8rem);
  --fs-h2: clamp(2.05rem, 3.4vw, 3.45rem);
  --fs-h3: clamp(1.4rem, 2.1vw, 1.95rem);
  --fs-lead: clamp(1.06rem, 1.22vw, 1.24rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.95rem;
  --fs-caption: 0.9375rem;
  --fs-meta: 0.74rem;

  --lh-display: 0.98;
  --lh-head: 1.05;
  --lh-tight: 1.24;
  --lh-body: 1.64;
  --lh-copy: 1.68;
  --lh-notes: 1.58;

  --ls-display: -0.032em;
  --ls-head: -0.018em;
  --ls-meta: 0.12em;

  --fw-regular: 400;
  --fw-medium: 500;

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 7rem;
  --space-11: 8.75rem;
  --space-12: 11.25rem;

  /* layout */
  --container: 1240px;
  --nav-h: 5.25rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.66rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-media: var(--radius-lg);

  /* effects */
  --shadow-soft: 0 10px 24px rgba(22, 19, 17, 0.035);
  --shadow-card: 0 14px 30px rgba(22, 19, 17, 0.055);
  --shadow-button-primary: 0 6px 14px rgba(22, 19, 17, 0.12);
  --shadow-button-primary-hover: 0 8px 16px rgba(22, 19, 17, 0.14);
  --shadow-button-primary-pressed: 0 4px 10px rgba(22, 19, 17, 0.12);
  --shadow-surface-hover: 0 12px 24px rgba(22, 19, 17, 0.05);
  --shadow-surface-card: 0 14px 30px rgba(22, 19, 17, 0.06);
  --shadow-header: 0 6px 16px rgba(22, 19, 17, 0.045);
  --shadow-media: 0 14px 32px rgba(22, 19, 17, 0.075);
  --glass-blur: 8px;
  --glass-blur-strong: 10px;
  --ease: cubic-bezier(0.22, 0.7, 0.18, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.2, 0.85, 0.2, 1.08);
  --dur-fast: 180ms;
  --dur-hover: 220ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;
  --dur-enter: 720ms;
  --dur-panel: 460ms;
  --dur-ambient: 16000ms;
  /* Hero Ken Burns; gallery thumbs use same easing, shorter duration (hero leg is long for a large scale delta). */
  --dur-hero-ken-burns: 13500ms;
  --ease-hero-ken-burns: ease-in-out;
  /* ~1/10 hero leg: visible hover zoom while staying in sync if --dur-hero-ken-burns changes */
  --dur-gallery-thumb-zoom: calc(var(--dur-hero-ken-burns) / 10);
}

@media (max-width: 767px) {
  :root {
    --nav-h: 4.5rem;
    --space-10: 5rem;
    --space-11: 6.25rem;
    --space-12: 7rem;
  }
}

html {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  scroll-behavior: smooth;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}