:root {
  --page-gutter: clamp(72px, 4vw, 100px);
  --header-pad: 28px;

  --header-title-size: 26px;
  --nav-gap: 36px;
  --nav-font: 14px;
  --hero-top: 70px;
  --hero-bottom: 64px;
  --hero-title-size: clamp(74px, 5vw, 94px);
  --hero-description-font: 20px;
  --eyebrow-font: 12px;
  --section-pad: 88px;
  --section-title-size: 52px;
  --posts-columns: minmax(0, 1fr) 340px;
  --content-gap: 52px;
  --post-padding: 30px 20px 33px;
  --post-title-size: 35px;
  --projects-columns: repeat(3, minmax(0, 1fr));
  --project-card-height: 260px;
  --project-top-space: 60px;
  --footer-symbol-width: clamp(390px, 27vw, 500px);
  --footer-feature-gap: clamp(54px, 6vw, 100px);
  --footer-feature-padding: 64px;
  --footer-title-size: 48px;
  --footer-description-size: 17px;
  --footer-meta-size: 11px;
  --footer-details-gap: 16px;
  --contact-title-size: 54px;
}
