@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/books-jakarta.17c8121ba28a.woff2") format('woff2');
}

/* dark green banner picked in Slack; the phone art is cut from that mockup on the same #022f2e */
.landing-books-banner {
  position: relative;
  display: flex;
  align-items: center;
  height: 210px;
  margin-bottom: 16px;
  padding-left: 64px;
  overflow: hidden;
  /* the hero's corners: 32 Figma px of a 1344 frame that shrinks with the page but never grows */
  --radius: calc(32 * min(1px, (min(100vw, var(--page)) - 2 * var(--gutter)) / 1344));
  border-radius: var(--radius);
  background: #022f2e;
  color: #fff;
  font-family: 'Plus Jakarta Sans', var(--font-sans);
}

.landing-books-banner-copy {
  flex: 1;
  min-width: 0;
}

.landing-books-banner-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ff6900;
  font: 700 13px/26px 'Plus Jakarta Sans', var(--font-sans);
  text-transform: uppercase;
}

.landing .landing-books-banner h2 {
  font: 600 32px/40px 'Plus Jakarta Sans', var(--font-sans);
  letter-spacing: -0.02em;
}

.landing-books-banner h2 em {
  color: #ff8904;
  font-style: normal;
}

.landing-books-banner p {
  margin-top: 4px;
  font-size: 20px;
  line-height: 28px;
}

.landing-books-banner-link {
  margin-left: 4px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* stretch the link's click area over the whole banner */
.landing-books-banner-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.landing-books-banner:hover .landing-books-banner-link {
  color: #ff8904;
}

.landing-books-banner-art {
  flex-shrink: 0;
  align-self: flex-end;
  width: 400px;
  margin-right: 86px;
}

.landing-books-banner-close {
  position: absolute;
  z-index: 1;
  /* keep the X out of the curve when the corners grow past 32px */
  top: max(16px, var(--radius) - 24px);
  right: max(16px, var(--radius) - 24px);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
}

.landing-books-banner-close:hover {
  background: rgb(255 255 255 / 12%);
}

@media (max-width: 1280px) {
  .landing-books-banner {
    padding-left: 48px;
  }

  .landing .landing-books-banner h2 {
    font-size: 26px;
    line-height: 34px;
  }

  .landing-books-banner p {
    font-size: 17px;
    line-height: 25px;
  }

  .landing-books-banner-art {
    margin-right: 40px;
  }
}

@media (max-width: 1000px) {
  .landing-books-banner-art {
    width: 300px;
    margin-right: 24px;
  }
}

/* too narrow for side by side: the art goes under the copy, still cut off by the bottom edge */
@media (max-width: 860px) {
  .landing-books-banner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 32px 64px 0 40px;
  }

  .landing-books-banner-art {
    align-self: center;
    width: min(100%, 400px);
    height: auto;
    /* right padding is 24px wider than the left (room for the X), so center on the banner, not the content box */
    margin: 24px -24px 0 0;
  }
}

@media (max-width: 680px) {
  /* same width and corners as .landing-hero in new-landing.css */
  .landing-books-banner {
    max-width: 480px;
    margin: 0 auto 16px;
    padding: 20px 48px 0 24px;
    --radius: calc(32 * min(480px, 100vw - 2 * var(--gutter)) / 393);
  }

  .landing-books-banner-badge {
    margin-bottom: 10px;
  }

  .landing .landing-books-banner h2 {
    font-size: 21px;
    line-height: 28px;
  }

  .landing-books-banner p {
    font-size: 15px;
    line-height: 22px;
  }

  .landing-books-banner-close {
    top: max(8px, var(--radius) - 24px);
    right: max(8px, var(--radius) - 24px);
  }
}

@media (max-width: 528px) {
  .landing-books-banner {
    max-width: none;
    margin-inline: calc(12px - var(--gutter));
    /* the hero is edge to edge here, so its corners follow the viewport */
    --radius: calc(32 * 100vw / 393);
  }
}