/* Design tokens, taken from the logo: its forest green on ivory, with a
   soft sage (a pale tint of the green), a pale champagne and a deep pine for
   the other sections. The logo's gold is kept for small accents only. */
:root {
  /* Fields: each section sits on one of these */
  --ivory: #F7F3EA;
  --champagne: #EFE3C8;
  --sage: #DCE3D2;
  --green: #2C5139;           /* the logo's wordmark green */
  --pine: #15281C;

  /* The soft backdrop word on each field: one step darker than the field */
  --bd-ivory: #ECE5D6;
  --bd-champagne: #E3D3AF;
  --bd-sage: #CCD6C0;
  --bd-green: #25462F;
  --bd-pine: #1E3627;

  --ink: #1C3326;             /* deep green, used in place of black */
  --ink-soft: #4A5E50;
  --light: #F7F3EA;
  --light-soft: rgba(247, 243, 234, 0.8);
  --gold: #C59A45;            /* the logo's gold: accents only */
  --gold-deep: #8A6725;       /* gold for small text on light grounds */
  --gold-light: #E6CA8C;      /* gold on dark grounds */
  --forest: var(--green);

  /* Names used by the gallery, lightbox and form */
  --sand: var(--champagne);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-light: var(--light);
  --text-light-muted: var(--light-soft);
  --rule: rgba(28, 51, 38, 0.18);
  --rule-light: rgba(247, 243, 234, 0.25);

  /* Type: one family for everything you read, one soft serif for the
     big backdrop words. */
  --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --fs-word: clamp(5rem, 12.5vw, 13rem);
  --fs-display: clamp(2.75rem, 6vw, 6rem);
  --fs-backdrop: clamp(7rem, 24vw, 27rem);
  --fs-statement: clamp(1.4rem, 2vw, 1.9rem);
  --fs-h3: clamp(1.6rem, 2.6vw, 2.6rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* Space */
  --gutter: clamp(1rem, 3.2vw, 3rem);
  --section-y: clamp(6rem, 12vw, 11rem);
  --max: 1480px;
  --nav-h: 84px;
  --radius: 22px;
  --arch: 999px 999px 32px 32px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.35s;
  --t: 0.6s;
  --t-slow: 1s;
}

@media (max-width: 899px) {
  :root { --nav-h: 68px; }
}