.why-page {
  position: relative;
  background:
    radial-gradient(circle at 52% 18%, rgba(232, 226, 207, 0.035), transparent 32rem),
    var(--color-background);
}

.why-page::before,
.why-page::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
}

.why-page::before {
  background:
    radial-gradient(circle at 22% 70%, rgba(209, 201, 178, 0.018), transparent 30rem),
    radial-gradient(circle at 82% 36%, rgba(235, 230, 213, 0.014), transparent 26rem);
}

.why-page::after {
  background-image: url("/assets/grain.svg");
  background-size: 12rem 12rem;
  opacity: 0.022;
  mix-blend-mode: soft-light;
}

.why-sequence {
  position: relative;
  z-index: 1;
  --why-scene-space: clamp(5.5rem, 15svh, 10rem);
}

.why-chapter {
  position: relative;
  display: block;
  padding:
    var(--why-scene-space)
    max(var(--page-gutter), env(safe-area-inset-right))
    var(--why-scene-space)
    max(var(--page-gutter), env(safe-area-inset-left));
}

.why-chapter--opening {
  padding-top: clamp(6.5rem, 13svh, 8.5rem);
}

.why-chapter--closing {
  padding-bottom: clamp(6rem, 12svh, 8rem);
}

.why-chapter__inner {
  width: min(100%, 38rem);
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, min(2.65vw, 4svh), 2.15rem);
  letter-spacing: -0.026em;
  line-height: 1.36;
  text-wrap: balance;
}

.why-thought {
  margin: 0;
  font: inherit;
  font-weight: 400;
}

.why-thought + .why-thought {
  margin-top: 1.05em;
}

.why-scroll-cue {
  position: fixed;
  z-index: 2;
  bottom: max(2.25rem, calc(1rem + env(safe-area-inset-bottom)));
  right: max(var(--page-gutter), env(safe-area-inset-right));
  left: auto;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.46;
  pointer-events: none;
  transform: none;
  animation: why-cue-breathe 4.8s ease-in-out infinite;
  transition: opacity 500ms ease;
}

.why-scroll-cue.is-complete {
  animation: none;
  opacity: 0;
}

@keyframes why-cue-breathe {
  0%,
  100% {
    opacity: 0.38;
  }

  50% {
    opacity: 0.56;
  }
}

.why-enhanced .why-chapter {
  opacity: 0.7;
  filter: blur(0.04rem);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.why-enhanced .why-chapter.is-near {
  opacity: 1;
  filter: blur(0);
}

.why-closing {
  width: 100%;
}

.why-exit {
  width: min(100%, 38rem);
  margin: clamp(2.75rem, 6svh, 4rem) auto 0;
}

.why-home-link {
  color: var(--color-muted);
  font-size: 0.75rem;
  text-decoration-color: transparent;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.why-home-link:hover {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

.why-exit .contact-footer {
  margin-top: clamp(2rem, 4svh, 3rem);
}

@media (max-height: 36rem) and (min-aspect-ratio: 4 / 3) {
  .why-scroll-cue {
    top: calc(3.75rem + env(safe-area-inset-top));
    right: max(var(--page-gutter), env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-enhanced .why-chapter {
    opacity: 1;
    filter: none;
  }

  .why-scroll-cue {
    animation: none;
    opacity: 0.46;
  }

  .why-scroll-cue.is-complete {
    opacity: 0;
  }
}