:root {
  --marian-blue: #1d70b8;
  --paper: #f3f2f1;
  --ink: #0b0c0c;
  --muted: #505a5f;
  --radius: 4px;
  --shadow: none;
  --max: 1120px;
  --header-h: 72px;
  --footer-h: 140px;

  --wl-paper: var(--paper);
  --wl-ink: var(--ink);
  --wl-muted: var(--muted);
  --wl-rule: rgba(0, 0, 0, 0.12);
  --wl-primary: var(--marian-blue);
  --wl-primary-hover: #155a96;
  --wl-primary-soft: rgba(29, 112, 184, 0.16);
  --wl-accent: var(--marian-blue);
  --wl-accent-soft: rgba(29, 112, 184, 0.12);
  --wl-radius: var(--radius);
  --wl-shadow: var(--shadow);

  --paper-2: var(--paper);
  --teal: var(--marian-blue);
  --teal-2: #0f4c82;
  --gold: #9bb7d1;
  --line: var(--wl-rule);
  --navy-rgb: 29 112 184;
  --brass-rgb: 155 183 209;
  --paper-noise: none;
  --radius-sm: 12px;
  --card-opacity: 0.85;
  --hero-bg-opacity: 0.3;
  --brand-blue: var(--wl-primary);
  --brand-green: var(--wl-accent);
}

html,
body {
  height: 100%;
}

main {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding: 2.5rem 0 calc(3rem + var(--footer-h));
}

@media (max-width: 720px) {
  :root {
    --header-h: 104px;
    --footer-h: 180px;
  }
}