/* Palette, type scale, spacing, curves. Light comes from the right, soft and cool. */
:root {
  --panel: #E6E3D9;
  --panel-lit: #EFEDE6;
  --moulding: #CBC6B8;
  --pearl: #F5F2EB;
  --pearl-shade: #B9B4A9;
  --walnut: #6B4529;
  --ink: #2B1F16;
  --green: #23523B;
  --green-deep: #173A2A;
  --focus: #23523B;

  --serif: "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;

  /* heavy, slow: drawers and the camera. settle: things arriving. */
  --ease-heavy: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --gutter: 20px;
  --bar-top: 48px;
  --bar-bottom: 60px;
  --safe: env(safe-area-inset-bottom, 0px);

  --step--1: 0.9375rem;
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --step-3: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --step-4: clamp(2.25rem, 1rem + 4.2vw, 4.75rem);
}
@media (min-width: 900px) {
  :root {
    --gutter: 64px;
    --bar-top: 64px;
    --step-0: 1.25rem;
    --step-1: 1.5rem;
  }
}