.variant-a {
  --paper: #f5ede1;
  --paper-deep: #eadbc8;
  --cream: #fff9ef;
  --ink: #29211d;
  --ink-soft: #6b5c52;
  --olive: #2f4939;
  --olive-light: #586b58;
  --wine: #8a3f3b;
  --wine-dark: #6b2e31;
  --brass: #b88f56;
  --brass-light: #e5d0a5;
  --rose: #c98477;
  --line: rgba(41, 33, 29, 0.14);
  --shadow: 0 28px 80px rgba(70, 45, 31, 0.15);
}

.variant-a .site-header {
  background: rgba(245, 237, 225, 0.94);
}

.variant-a .brand__mark--refined {
  width: 57px;
  height: 47px;
  stroke-width: 1.45;
}

.variant-a .brand__wording strong {
  font-size: 27px;
  font-weight: 500;
}

.variant-a .brand__wording small {
  color: var(--olive);
  letter-spacing: 0.17em;
}

.variant-a .brand--footer .brand__wording small {
  color: var(--brass-light);
}

.variant-a .hero__ornament {
  color: rgba(138, 63, 59, 0.025);
}

.variant-a .hero__image-wrap {
  border-color: rgba(255, 249, 239, 0.86);
  box-shadow: 0 30px 85px rgba(70, 45, 31, 0.17);
}

.variant-a .story {
  background:
    radial-gradient(circle at 84% 18%, rgba(184, 143, 86, 0.14), transparent 29%),
    linear-gradient(135deg, #ead6be 0%, #f5e8d7 58%, #eedcc8 100%);
}

.variant-a .story::after {
  border-color: rgba(138, 63, 59, 0.1);
}

.variant-a .story__number {
  border-color: rgba(138, 63, 59, 0.15);
  background: linear-gradient(155deg, rgba(255, 249, 239, 0.94), #fff9ef 68%);
  box-shadow: 0 26px 72px rgba(91, 58, 35, 0.12);
}

.variant-a .prototype-compare + .prototype-compare {
  margin-left: 8px;
}

@media (max-width: 700px) {
  .variant-a .brand__mark--refined {
    width: 49px;
    height: 43px;
  }

  .variant-a .brand__wording strong {
    font-size: 23px;
  }
}

@media (max-width: 390px) {
  .variant-a .brand {
    gap: 9px;
  }

  .variant-a .brand__mark--refined {
    width: 43px;
    height: 40px;
  }

  .variant-a .brand__wording strong {
    font-size: 21px;
  }

  .variant-a .brand__wording small {
    font-size: 7px;
    letter-spacing: 0.12em;
  }
}