/* A paper notebook opens into the homepage's field of connected clues. */
.blog-notes-hero {
  isolation: isolate;
  min-height: 580px;
  display: grid;
  align-items: center;
}

.blog-notes-hero::before {
  content: none;
}

.blog-notes-hero .blog-hero-inner {
  max-width: var(--container);
}

.blog-notes-hero .lead {
  max-width: 580px;
  text-wrap: pretty;
}

.blog-notes-hero .hero-background {
  /* Keep artwork anchored to the content, including on ultrawide displays. */
  inset: 0 max(0px, calc((100% - var(--container)) / 2 - 80px)) 0 auto;
  width: min(100%, 1050px);
}

.blog-notes-hero .hero-background::after {
  background: linear-gradient(270deg, var(--paper), transparent 12%),
    linear-gradient(90deg, rgba(251, 249, 245, 0.98), rgba(251, 249, 245, 0.92) 34%, rgba(251, 249, 245, 0.48) 54%, rgba(251, 249, 245, 0.04) 76%),
    linear-gradient(0deg, var(--paper), transparent 16%);
}

@media (max-width: 980px) {
  .blog-notes-hero {
    padding-bottom: 310px;
  }

  .blog-notes-hero .hero-background {
    inset: auto 0 0 auto;
    width: 140%;
    height: 340px;
  }

  .blog-notes-hero .hero-background::after {
    background: linear-gradient(180deg, var(--paper), rgba(251, 249, 245, 0.06) 28%, rgba(251, 249, 245, 0.04) 80%, var(--paper));
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-notes-hero .hero-background-image {
    transition: none;
  }
}