:root {
  --el-artboard: 90rem;
  --el-header-height: clamp(4.6875rem, 6.67vw, 6rem);
  --el-gutter: clamp(3.25rem, 3.6vw, 3.5rem);
  --el-hero-height: clamp(28rem, 38vw, 35rem);
  --el-tiles-height: clamp(10.3125rem, 14.5vw, 13.0625rem);
  --el-craft-height: clamp(17rem, 23.6vw, 21.25rem);
  --el-featured-height: clamp(17.8125rem, 25.4vw, 22.875rem);
  --el-brand-cta-height: clamp(14.625rem, 20.85vw, 23.1875rem);
  --el-brand-copy-width: clamp(24.375rem, 36vw, 42.75rem);
  --el-about-hero-height: clamp(22.8125rem, 32.5vw, 31.25rem);
  --el-about-usps-height: clamp(7.375rem, 10.5vw, 9.375rem);
  --el-about-history-height: clamp(17.0625rem, 24.3vw, 21.875rem);
  --el-about-process-height: clamp(12.8125rem, 18.3vw, 16.4375rem);
  --el-about-materials-height: clamp(13.875rem, 19.8vw, 18.75rem);
  --el-about-bottom-height: clamp(9rem, 12.8vw, 11.5rem);

  --el-paper: #fbf8f2;
  --el-surface: #f4efe6;
  --el-surface-alt: #fbf8f2;
  --el-page-surround: #e7e0d7;
  --el-ink: #17130f;
  --el-muted: #6b6059;
  --el-brown: #5b3420;
  --el-brown-hover: #3d2417;
  --el-cta-beige: #d8b48f;
  --el-cta-beige-hover: #ead0b4;
  --el-on-dark: #fffdf9;
  --el-on-dark-muted: #eadfd5;
  --el-gold: #c99b77;
  --el-hairline: #d8cfc5;
  --el-focus: #8a5a3e;
  --el-success: #326c36;
  --el-error: #8b2e26;
  --el-disabled: #9a918a;
  --el-mask-solid: #000;
  --el-overlay: rgba(16, 9, 6, .72);
  --el-overlay-strong: rgba(16, 9, 6, .94);
  --el-overlay-soft: rgba(16, 9, 6, .34);
  --el-light-overlay: rgba(255, 253, 249, .86);
  --el-swatch-blue: #15486f;
  --el-scrim-hero: linear-gradient(90deg, rgba(20, 12, 8, .98) 0%, rgba(20, 12, 8, .94) 34%, rgba(20, 12, 8, .7) 50%, rgba(20, 12, 8, .18) 72%, rgba(20, 12, 8, .04) 100%);
  --el-scrim-tile: linear-gradient(90deg, rgba(8, 5, 3, .38) 0%, rgba(8, 5, 3, .12) 72%, transparent 100%), linear-gradient(to top, rgba(8, 5, 3, .94) 0%, rgba(8, 5, 3, .62) 43%, rgba(8, 5, 3, .08) 80%);
  --el-scrim-brand: linear-gradient(90deg, rgba(12, 7, 4, .98) 0%, rgba(12, 7, 4, .9) 27%, rgba(12, 7, 4, .35) 56%, rgba(12, 7, 4, .3) 100%), linear-gradient(0deg, rgba(12, 7, 4, .18), rgba(12, 7, 4, .08));
  --el-photo-fade: linear-gradient(90deg, var(--el-surface) 0%, rgba(244, 239, 230, .995) 10%, rgba(244, 239, 230, .96) 24%, rgba(244, 239, 230, .84) 42%, rgba(244, 239, 230, .6) 58%, rgba(244, 239, 230, .32) 73%, rgba(244, 239, 230, .12) 86%, rgba(244, 239, 230, 0) 100%);
  --el-photo-vignette: linear-gradient(90deg, transparent 54%, rgba(12, 7, 4, .26) 100%);
  --el-logo-cutout-shadow: 0 .0625rem 0 rgba(91, 52, 32, .1);
  --el-header-shadow: 0 .5rem 1.5rem rgba(45, 31, 22, .09);
  --el-artboard-shadow: 0 0 2.875rem rgba(43, 29, 20, .18);
  --el-text-shadow: 0 .125rem .9375rem rgba(0, 0, 0, .72);
  --el-text-shadow-strong: 0 .125rem .9375rem rgba(0, 0, 0, .82);

  --el-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --el-font-sans: Arial, Helvetica, sans-serif;
  --el-font-script: "Allura", cursive;
  --el-hero-script-size: clamp(1.8125rem, 1.82vw, 2.1875rem);
  --el-photo-script-size: clamp(1.75rem, 1.9vw, 2.25rem);
  --el-h1: clamp(3.25rem, 4.75vw, 4.4rem);
  --el-h2: clamp(2.375rem, 3.4vw, 3.0625rem);
  --el-h3: clamp(1.5625rem, 2.25vw, 2rem);
  --el-body: clamp(.875rem, 1.25vw, 1.125rem);
  --el-small: clamp(.6875rem, .95vw, .875rem);
  --el-eyebrow: clamp(.625rem, .75vw, .6875rem);
  --el-ls-wordmark: .095em;
  --el-ls-eyebrow: .26em;

  --el-logo-size: 5.875rem;
  --el-logo-cutout-size: 6.375rem;
  --el-logo-cutout-left: -.25rem;
  --el-logo-cutout-shift: -40%;
  --el-icon-size: 2.125rem;
  --el-button-height: clamp(2.6875rem, 3.2vw, 2.875rem);
  --el-button-padding: clamp(1.5rem, 1.8vw, 1.625rem);
  --el-category-gap: .3125rem;
  --el-card-gap: clamp(1.1875rem, 1.75vw, 1.5625rem);
  --el-card-image-height: clamp(8.625rem, 12.3vw, 11.0625rem);
  --el-radius-card: .5625rem;
  --el-shadow-soft: 0 .125rem .3125rem rgba(45, 28, 18, .08), 0 .75rem 1.875rem rgba(45, 28, 18, .06);
  --el-shadow-card: 0 .5rem 2rem rgba(45, 28, 18, .12);
  --el-shadow-dialog: 0 1.5rem 4rem rgba(20, 12, 8, .3);
  --el-carousel-control: 2.125rem;
  --el-photo-fade-width: clamp(8.25rem, 12vw, 15.625rem);
  --el-craft-photo-position: 64% center;
  --el-craft-copy-track: 40.5%;
  --el-craft-features-track: 35.5%;
  --el-craft-photo-track: 24%;
  --el-craft-features-wide-padding-right: 1.375rem;
  --el-motion-fast: 180ms;
  --el-motion-normal: 400ms;
  --el-motion-slow: 720ms;
  --el-motion-stagger: 55ms;
  --el-motion-distance: .875rem;
  --el-ease: cubic-bezier(.2, .72, .2, 1);
  --el-control-height: 3rem;
  --el-touch-target: 2.75rem;
  --el-shop-hero-height: clamp(24rem, 34vw, 31rem);
  --el-shop-card-image: clamp(11rem, 18vw, 17rem);
  --el-content-measure: 72rem;
  --el-radius-pill: 999rem;
  --el-scrim-shop: linear-gradient(90deg, rgba(16, 9, 6, .96) 0%, rgba(16, 9, 6, .83) 38%, rgba(16, 9, 6, .24) 70%, rgba(16, 9, 6, .08) 100%);
  --el-scrim-footer: linear-gradient(90deg, rgba(12, 7, 4, .98) 0%, rgba(12, 7, 4, .84) 34%, rgba(12, 7, 4, .52) 64%, rgba(12, 7, 4, .9) 100%);
  --el-scrim-contact: linear-gradient(90deg, rgba(16, 9, 6, .97) 0%, rgba(16, 9, 6, .85) 40%, rgba(16, 9, 6, .2) 76%);
}

@media (min-width: 90.0625rem) {
  :root {
    --el-craft-copy-track: 32%;
    --el-craft-features-track: 38%;
    --el-craft-photo-track: 30%;
  }
}

@media (max-width: 75rem) and (min-width: 56.3125rem) {
  :root {
    --el-brand-cta-height: 13.625rem;
  }
}

@media (max-width: 56.25rem) {
  :root {
    --el-header-height: 4.25rem;
    --el-hero-height: 35rem;
    --el-gutter: 1.5rem;
    --el-h1: clamp(2.625rem, 9vw, 3.625rem);
    --el-h2: 2.375rem;
    --el-logo-size: 4.125rem;
    --el-card-image-height: 13.75rem;
  }
}

@media (max-width: 40rem) {
  :root {
    --el-hero-height: 37rem;
    --el-gutter: 1.25rem;
    --el-h1: 2.75rem;
    --el-h2: 2.125rem;
    --el-card-image-height: 17.8125rem;
  }
}