/* Decorative atmosphere is intentionally isolated from the content layout. */

.positioning,
.route-finder,
.method,
.geo-lab,
.field-notes,
.about,
.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.positioning::before,
.geo-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.positioning::before {
  opacity: 0.54;
  background-image:
    linear-gradient(rgba(18, 18, 17, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 17, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 88% 84%, rgba(18, 18, 17, 0.13), transparent 0 14%);
  background-size: 56px 56px, 56px 56px, auto;
}

.positioning > *,
.route-finder > :not(.art-layer),
.method > *,
.geo-lab > :not(.art-layer),
.field-notes > :not(.art-layer),
.about > :not(.art-layer),
.contact > :not(.art-layer) {
  position: relative;
  z-index: 1;
}

.art-layer {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

.service-stack,
.service-detail-grid {
  position: relative;
  isolation: isolate;
}

.service-detail > * {
  position: relative;
  z-index: 2;
}

.service-story .chapter-ink-transition {
  z-index: 1;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 220px;
  opacity: 0.18;
  background-image: url("./assets/art/ink-transition-horizontal.png");
  background-position: center bottom;
  background-size: cover;
  filter: grayscale(1) contrast(1.12);
  transform: none;
}

.method {
  background-image: linear-gradient(rgba(18, 18, 17, 0.035) 1px, transparent 1px);
  background-size: 100% 76px;
}

.geo-lab::before {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(18, 18, 17, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 17, 0.04) 1px, transparent 1px);
  background-size: 54px 54px;
}

.geo-ink-edge {
  top: -10%;
  right: -14%;
  bottom: -12%;
  width: min(54vw, 780px);
  opacity: 0.16;
  background-image: url("./assets/art/ink-transition-horizontal.png");
  background-position: right center;
  background-size: auto 100%;
  filter: grayscale(1) contrast(1.3);
}

.archive-ink-field {
  top: -7%;
  bottom: -7%;
  width: min(44vw, 600px);
  opacity: 0.24;
  background-image: url("./assets/art/ink-archive-vertical.png");
  background-position: left center;
  background-size: auto 100%;
}

.field-notes .archive-ink-field {
  right: -9%;
}

.about .archive-ink-field {
  left: -13%;
  opacity: 0.2;
}

.contact {
  background: #49443d;
}

.contact-ink-field {
  top: clamp(140px, 18vh, 220px);
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.62;
  background-color: #49443d;
  background-image:
    linear-gradient(
      180deg,
      rgba(73, 68, 61, 0.86) 0%,
      rgba(73, 68, 61, 0.62) 24%,
      rgba(73, 68, 61, 0.24) 54%,
      rgba(73, 68, 61, 0.06) 100%
    ),
    url("./assets/art/ink-contact-field.png");
  background-position: center top;
  background-size: cover;
  filter: grayscale(1) contrast(0.82) brightness(1.3);
}

.contact-main,
.contact-aside {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.26);
}

@media (max-width: 720px) {
  .positioning::before {
    background-size: 42px 42px, 42px 42px, auto;
  }

  .service-story .chapter-ink-transition {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: clamp(150px, 44vw, 190px);
    opacity: 1;
    background-color: var(--paper);
    background-size: cover;
    background-position: center;
  }

  .method {
    background-size: 100% 64px;
  }

  .geo-ink-edge {
    right: -40%;
    width: 116vw;
    opacity: 0.12;
  }

  .archive-ink-field {
    width: 110vw;
    opacity: 0.18;
    background-size: 100% auto;
  }

  .field-notes .archive-ink-field {
    right: -52%;
  }

  .about .archive-ink-field {
    left: -56%;
  }

  .contact-ink-field {
    top: 112px;
    background-position: 62% top;
    background-size: auto 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-story .chapter-ink-transition {
    transform: none;
  }

}