/* Harbour Morning: palette, type, spacing, curves, shadows. One sun, upper left. */
:root {
  --sea-900: #0E3550;
  --sea-700: #1B5E86;
  --sea-300: #9FD0E6;
  --sea-100: #E3F1F6;
  --sun-500: #F2BE3A;
  --sun-100: #FDF1C7;
  --terra-600: #A84B29;
  --terra-700: #8E3E20;
  --terra-400: #D9774F;
  --white: #FFFFFF;
  --page: #F7FAFA;
  --muted: #41617A;
  --shadow: rgba(14, 53, 80, 0.16);

  --font-sans: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --font-hand: "La Belle Aurore", "Segoe Script", cursive;

  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 6rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-lede: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-note: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.875rem;
  --fs-hand: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  --fs-hand-xl: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --fs-sum: clamp(1.75rem, 1.3rem + 2vw, 3rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(16px, 4vw, 72px);
  --header-h: 56px;
  --section-gap: 96px;

  /* Lane curves. Settle overshoots a little, like a card landing on a table. */
  --ease-settle: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-turn: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);

  --card-shadow: 0 1px 1px rgba(14, 53, 80, 0.08), 6px 10px 24px var(--shadow);
  --card-shadow-tight: 0 1px 1px rgba(14, 53, 80, 0.12), 2px 3px 6px var(--shadow);
  --paper: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)), url("../img/card-stock.webp") #fff;
}
@media (min-width: 900px) {
  :root { --header-h: 72px; --section-gap: 160px; }
}