/* The artwork scrolls with the introduction; its mask dissolves into either theme. */
.home-directory { width: 100%; }
.home-directory > .directory-section { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }
.home-directory > .directory-intro {
  position: relative;
  isolation: isolate;
  max-width: none;
  padding-inline: max(1rem, calc((100% - 1160px) / 2));
}
.home-directory .directory-intro > h1 { max-width: 680px; letter-spacing: -.025em; }
.home-directory .directory-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url("images/appian-way-overcast.jpg") right center / cover no-repeat;
  opacity: .48;
  /* Ease into the sky gradually, avoiding a visible seam where the fade ends. */
  mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 4%) 3%, rgb(0 0 0 / 16%) 6%, rgb(0 0 0 / 32%) 9%, rgb(0 0 0 / 50%) 12%, rgb(0 0 0 / 68%) 15%, rgb(0 0 0 / 84%) 18%, rgb(0 0 0 / 96%) 21%, black 24%, black 55%, transparent 100%), linear-gradient(to right, transparent 45%, black 85%);
  mask-composite: intersect;
}
:root[data-theme="dark"] .home-directory .directory-intro::before { opacity: .9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .home-directory .directory-intro::before { opacity: .9; }
}
@media (max-width: 900px) {
  .home-directory .directory-intro::before {
    background-position: 75% center;
    mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 4%) 3%, rgb(0 0 0 / 16%) 6%, rgb(0 0 0 / 32%) 9%, rgb(0 0 0 / 50%) 12%, rgb(0 0 0 / 68%) 15%, rgb(0 0 0 / 84%) 18%, rgb(0 0 0 / 96%) 21%, black 24%, black 50%, transparent 100%), linear-gradient(to right, transparent, black);
    opacity: .22;
  }
  :root[data-theme="dark"] .home-directory .directory-intro::before { opacity: .25; }
}
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .home-directory .directory-intro::before { opacity: .25; }
}