/* Place this file next to the three assets. Bind the classes to theme markup. */
:root {
  --ms-paper: #ebe4d6;
  --ms-ink: #1a2119;
  --ms-secondary: #4d5448;
  --ms-rule: #72786b;
  --ms-sage: #b4b89f;
  --ms-forest: #22281f;
  --ms-light-ink: #f4ebdb;
  --ms-orange-line: #d8491a;
  --ms-orange-text: #a3320e;
}

.ms-decor {
  position: relative;
  isolation: isolate;
}

.ms-decor::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  content: "";
}

.ms-decor--light::before {
  background-image: url("contours-light.webp");
  background-position: right bottom;
  background-size: min(30%, 22rem) auto;
  opacity: .42;
}

.ms-decor--sage::before {
  background-image: url("contours-light.webp");
  background-position: right bottom;
  background-size: min(25%, 18rem) auto;
  opacity: .40;
  transform: scaleX(-1);
}

.ms-decor--dark::before {
  background-image: url("contours-dark.webp");
  background-position: 41% center;
  background-size: min(26%, 18rem) auto;
  opacity: .36;
}

.ms-rule {
  border-block-start: 1px solid var(--ms-rule);
}

/* Put on a flex heading or a label with its own text wrapper. */
.ms-orange-stroke {
  display: flex;
  align-items: center;
  gap: clamp(.65rem, 1.8vw, 1.5rem);
}

.ms-orange-stroke::after {
  flex: 0 0 clamp(2rem, 6vw, 4.25rem);
  block-size: 2px;
  background: var(--ms-orange-line);
  content: "";
}

.ms-hero-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .ms-hero-media--masked img {
    mask-image: url("hero-edge-mask.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-mode: alpha;
  }
}

@media (max-width: 47.99rem) {
  .ms-decor--light::before,
  .ms-decor--sage::before {
    background-size: min(36%, 9rem) auto;
    opacity: .23;
  }

  .ms-decor--dark::before {
    background-position: right top;
    background-size: min(29%, 7rem) auto;
    opacity: .24;
  }
}

@media (forced-colors: active), print {
  .ms-decor::before,
  .ms-orange-stroke::after {
    display: none;
  }

  .ms-hero-media--masked img {
    mask-image: none;
  }
}

.ms-hero-kicker {
  display: inline-block;
  padding-block-end: .55rem;
  border-block-end: 2px solid var(--ms-orange-line);
}

/* Add an empty aria-hidden span inside a text link. */
.ms-link-arrow {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 1.9em;
  block-size: .75em;
  margin-inline-start: .45em;
  color: var(--ms-orange-line);
  vertical-align: -.06em;
}

.ms-link-arrow::before,
.ms-link-arrow::after {
  position: absolute;
  inset-block-start: 50%;
  content: "";
}

.ms-link-arrow::before {
  inset-inline: 0 .06em;
  border-block-start: 2px solid;
}

.ms-link-arrow::after {
  inset-inline-end: .11em;
  inline-size: .46em;
  block-size: .46em;
  border-block-start: 2px solid;
  border-inline-end: 2px solid;
  transform: translateY(calc(-50% + 1px)) rotate(45deg);
}

@media (forced-colors: active), print {
  .ms-link-arrow {
    display: none;
  }
}