/* Only the textured background is masked. Links, menus and focus stay intact. */
.theme-scroll .scroll-header,
.theme-scroll .scroll-preferences {
  font-family: Georgia, "Times New Roman", serif;
}

/* The shared header overlays the hero; inner pages reserve room for both rows. */
.theme-scroll.scroll-subpage main {
  padding-top: 112px;
}

.theme-scroll .scroll-header {
  --header-ink-end: 84px;
  isolation: isolate;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.theme-scroll .scroll-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -35px -2px -27px;
  pointer-events: none;
  background:
    linear-gradient(100deg, #11130e38, transparent 35%, #11100c24),
    #1b1b19 url(images/ranking-art.webp) center / 350% auto;
  /* Separate end caps retain their brush detail at every desktop width. */
  -webkit-mask-image: url(images/header-ink-left.svg), linear-gradient(#000, #000), url(images/header-ink-right.svg);
  mask-image: url(images/header-ink-left.svg), linear-gradient(#000, #000), url(images/header-ink-right.svg);
  -webkit-mask-size: var(--header-ink-end) 100%, calc(100% - var(--header-ink-end) * 2 + 4px) 100%, var(--header-ink-end) 100%;
  mask-size: var(--header-ink-end) 100%, calc(100% - var(--header-ink-end) * 2 + 4px) 100%, var(--header-ink-end) 100%;
  -webkit-mask-position: left center, center, right center;
  mask-position: left center, center, right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.theme-scroll .scroll-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 36px;
  right: 61px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ad8a5166 4%, #b99b68 12%, #ad8a51 84%, #92744588 96%, transparent);
}

.theme-scroll .scroll-header .scroll-navigation.is-open {
  z-index: 2;
}

@media (max-width: 1250px) and (min-width: 851px) {
  .theme-scroll .scroll-header {
    --header-ink-end: 64px;
  }
  .theme-scroll .scroll-header::before {
    inset-inline: -26px -37px;
  }
  .theme-scroll .scroll-header::after {
    left: 22px;
    right: 36px;
  }
}

@media (max-width: 850px) {
  .theme-scroll .scroll-header {
    --header-ink-end: 24px;
  }
  .theme-scroll .scroll-header::before {
    inset: 0 -8px -2px;
  }
  .theme-scroll .scroll-header::after {
    inset-inline: 15px;
    background: linear-gradient(90deg, transparent, #ad8a5170 12%, #ad8a5170 88%, transparent);
  }
}