:root {
   --variant-ink: #3c3c3c;
   --variant-ink-deep: #272727;
   --variant-gold: #c3a843;
   --variant-gold-light: #d4b85a;
   --variant-canvas: #f4f0ea;
   --variant-hero: #efe8de;
   --variant-warm: #ebe4d6;
   --variant-ground: #d9cdb8;
   --variant-white: #ffffff;
   --variant-gutter: clamp(1.25rem, 5vw, 5.5rem);
   --variant-section-space: clamp(6rem, 11vw, 10.5rem);
   --variant-section-space-large: clamp(8rem, 15vw, 14rem);
   --variant-reading: 70ch;
   --variant-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.design-preview {
   overflow-x: clip;
   background: var(--variant-canvas);
   color: var(--variant-ink);
}

body.design-preview.variant-nav-open {
   overflow: hidden;
}

body.design-preview main {
   width: 100%;
   max-width: 100%;
   overflow: clip;
}

body.design-preview main section {
   position: relative;
   isolation: isolate;
}

body.design-preview :where(h1, h2, h3) {
   color: var(--variant-ink);
   font-family: "Montserrat", system-ui, sans-serif;
   text-wrap: balance;
}

body.design-preview :where(p, li) {
   text-wrap: pretty;
}

body.design-preview :where(a, button, input):focus-visible {
   outline: 2px solid var(--variant-gold);
   outline-offset: 4px;
}

body.design-preview .header {
   border-bottom: 1px solid rgba(60, 60, 60, 0.06);
}

body.design-preview.page-hero-top .header:not(.header--solid) {
   border-bottom-color: transparent;
}

body.design-preview .site-footer {
   position: relative;
   z-index: 2;
}

body.design-preview .site-footer__nav a,
body.design-preview .site-footer__cookie-btn {
   color: rgba(255, 255, 255, 0.78);
}

body.design-preview .site-footer__copy {
   color: rgba(255, 255, 255, 0.62);
}

body.design-preview [data-split-chars],
body.design-preview [data-split-chars] * {
   backface-visibility: hidden;
}

body.design-preview .variant-motion-line {
   position: fixed;
   inset: var(--header-bar-height) auto 0 clamp(0.7rem, 2vw, 1.6rem);
   width: 1px;
   z-index: 8;
   pointer-events: none;
   background: linear-gradient(
      to bottom,
      var(--variant-gold) 0,
      var(--variant-gold) calc(var(--variant-progress, 0) * 100%),
      rgba(195, 168, 67, 0.16) calc(var(--variant-progress, 0) * 100%),
      rgba(195, 168, 67, 0.16) 100%
   );
   opacity: 0;
   transition: opacity 400ms ease;
}

body.design-preview[data-design-variant="v2"] .variant-motion-line {
   opacity: 1;
}

@media (max-width: 899px) {
   :root {
      --variant-section-space: clamp(4.75rem, 18vw, 7rem);
      --variant-section-space-large: clamp(6rem, 24vw, 9rem);
   }

   body.design-preview .variant-motion-line {
      left: 0.45rem;
   }
}

@media (max-width: 599px) {
   body.design-preview :where(p, li) {
      font-size: max(0.94rem, 15px);
      line-height: 1.68;
   }

   body.design-preview .site-footer__nav a,
   body.design-preview .site-footer__cookie-btn {
      font-size: 0.7rem;
      line-height: 1.55;
   }
}

@media (prefers-reduced-motion: reduce) {
   body.design-preview *,
   body.design-preview *::before,
   body.design-preview *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }

   body.design-preview .variant-motion-line {
      display: none;
   }
}