@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

:root,
[data-bs-theme="light"] {
  --brand-olive: #5e6840;
  --brand-olive-soft: #8a846c;
  --brand-cream: #f3ebd4;
  --brand-ink: #5a6474;
  --brand-font: "Futura", "Futura PT", "Futura Std", "Century Gothic", "Jost", sans-serif;
  --bs-primary: var(--brand-olive);
  --bs-primary-rgb: 94, 104, 64;
  --bs-link-color: var(--brand-olive);
  --bs-link-color-rgb: 94, 104, 64;
  --bs-link-hover-color: #4c5634;
  --bs-link-hover-color-rgb: 76, 86, 52;
  --bs-soft-primary: var(--brand-cream);
  --bs-pale-primary: #e7e0cc;
  --bs-bullet-soft-primary: #ddd4bc;
  --bs-border-soft-primary: #d9d0b6;
  --bs-border-subtle-primary: #d9d0b6;
  --bs-heading-color: var(--brand-olive);
  --bs-body-color: var(--brand-ink);
  --bs-body-color-rgb: 90, 100, 116;
  --bs-font-sans-serif: var(--brand-font);
  --bs-body-font-family: var(--brand-font);
}

body,
button,
input,
select,
textarea,
.btn,
.navbar,
.nav-link,
.dropdown-item,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.post-title,
.counter,
.lead {
  font-family: var(--brand-font) !important;
}

body {
  background-color: #fffcf8;
  color: var(--brand-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--brand-olive);
  font-weight: 500;
  letter-spacing: 0.01em;
  word-spacing: normal;
}

.display-1 { font-size: calc(1.385rem + 1.62vw); line-height: 1.15; }
.display-2 { font-size: calc(1.365rem + 1.38vw); line-height: 1.15; }
.display-3 { font-size: calc(1.355rem + 1.26vw); line-height: 1.15; }
.display-4 { font-size: calc(1.325rem + 0.9vw); line-height: 1.2; }
.display-5 { font-size: calc(1.305rem + 0.66vw); line-height: 1.2; }
.display-6 { font-size: calc(1.285rem + 0.42vw); line-height: 1.25; }

@media (min-width: 1200px) {
  .display-1 { font-size: 2.7rem; }
  .display-2 { font-size: 2.4rem; }
  .display-3 { font-size: 2.3rem; }
  .display-4 { font-size: 2rem; }
  .display-5 { font-size: 1.8rem; }
  .display-6 { font-size: 1.6rem; }
}

.brand-header {
  position: relative;
  background: var(--brand-cream);
  z-index: 20;
  padding-bottom: 1.75rem !important;
}

.brand-brush {
  position: absolute;
  top: 0;
  width: min(38vw, 460px);
  height: 150px;
  pointer-events: none;
  z-index: 0;
  background: url("../img/brand-brush.svg") left top / contain no-repeat;
}

.brand-brush--right {
  right: 0;
  left: auto;
  transform: scaleX(-1);
  transform-origin: center;
}

.brand-brush--left {
  left: 0;
}

.brand-header .navbar,
.brand-header .container {
  position: relative;
  z-index: 2;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.brand-lockup img {
  height: 84px;
  width: auto;
  max-width: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  color: var(--brand-olive);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-place {
  margin-top: 0.2rem;
  color: var(--brand-olive-soft);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.brand-header .social a {
  color: var(--brand-olive) !important;
}

.brand-header .navbar-nav .nav-link {
  color: #3c4250;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.brand-header .navbar-other .nav-link {
  color: var(--brand-olive);
}

.brand-hero {
  background: linear-gradient(180deg, #f3ebd4 0%, #f6f0e2 38%, #fffcf8 100%);
}

@media (min-width: 992px) {
  .brand-header {
    padding-bottom: 2.75rem !important;
  }

  .brand-hero {
    margin-top: 0 !important;
  }

  .brand-hero .mt-lg-n10 {
    margin-top: 1.5rem !important;
  }
}

footer.bg-soft-primary {
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  footer.bg-soft-primary {
    padding-top: 4.5rem;
  }
}

.brand-rotator {
  color: var(--brand-olive) !important;
  font-weight: 500 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
  .brand-header .navbar {
    background: transparent !important;
    box-shadow: none;
  }

  .brand-lockup img { height: 62px; }
  .brand-name { font-size: 0.92rem; letter-spacing: 0.1em; }
  .brand-place { font-size: 0.82rem; }
  .brand-brush { height: 88px; width: 48vw; }
}