/* Coming soon book pages */

.coming-soon-main {
  min-height: 70vh;
}

.coming-soon-hero {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 14%,
      rgba(196, 161, 90, 0.2),
      transparent 30rem
    ),
    linear-gradient(
      145deg,
      var(--ink) 0%,
      var(--ink-deep) 76%
    );

  color: var(--white);
}

.coming-soon-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 58px 58px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 94%
    );
}

.coming-soon-hero__inner {
  position: relative;
  z-index: 1;

  padding-block: 68px 62px;

  text-align: center;
}

.coming-soon-cover {
  position: relative;

  width: min(76vw, 310px);
  margin-inline: auto;
}

.coming-soon-cover::before {
  content: "";

  position: absolute;
  inset: -13px;
  z-index: -1;

  border:
    1px solid rgba(234, 215, 167, 0.38);

  transform: rotate(2deg);
}

.coming-soon-cover img {
  width: 100%;

  border-radius: 3px;

  box-shadow: var(--shadow-deep);
}

.coming-soon-status {
  margin: 40px 0 0;

  color: var(--gold-light);

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.coming-soon-hero h1,
.coming-soon-story h2 {
  font-family:
    "Playfair Display",
    Georgia,
    serif;

  text-wrap: balance;
}

.coming-soon-hero h1 {
  margin: 10px 0 18px;

  font-size:
    clamp(3.35rem, 8vw, 6.2rem);

  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.coming-soon-hero__lead {
  max-width: 650px;
  margin: 0 auto;

  color:
    rgba(255, 255, 255, 0.74);

  font-size:
    clamp(1.02rem, 2vw, 1.24rem);

  line-height: 1.65;
}

.coming-soon-story {
  position: relative;

  padding-block: 76px 94px;

  background:
    radial-gradient(
      circle at 9% 9%,
      rgba(196, 161, 90, 0.12),
      transparent 25rem
    ),
    var(--paper);
}

.coming-soon-story__inner {
  width: min(
    calc(100% - 40px),
    880px
  );
}

.coming-soon-blurb {
  color: var(--ink-soft);

  font-size:
    clamp(1rem, 1.6vw, 1.1rem);
}

.coming-soon-blurb h2 {
  max-width: 750px;
  margin: 13px 0 34px;

  color: var(--ink-deep);

  font-size:
    clamp(2.35rem, 5.6vw, 4.4rem);

  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.coming-soon-blurb p {
  margin: 0 0 20px;
}

.coming-soon-blurb p:not(.eyebrow) {
  max-width: 760px;
}

.coming-soon-blurb__emphasis {
  margin-block: 32px !important;
  padding: 23px 0 23px 27px;

  border-left: 3px solid var(--wine);

  color: var(--ink-deep);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(1.45rem, 3vw, 2rem);

  font-weight: 600;
  line-height: 1.35;
}

.coming-soon-blurb cite {
  color: var(--ink-deep);
  font-style: italic;
  font-weight: 600;
}

.coming-soon-blurb__closing {
  margin-top: 31px !important;

  color: var(--wine-dark);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(1.35rem, 2.7vw, 1.85rem);

  font-weight: 600;
  line-height: 1.42;
}

.coming-soon-notify {
  margin-top: 58px;
  padding:
    clamp(30px, 6vw, 55px);

  border:
    1px solid rgba(23, 32, 42, 0.1);

  border-top: 4px solid var(--wine);
  border-radius: var(--radius-medium);

  background: var(--paper-light);

  box-shadow: var(--shadow-soft);
}

.coming-soon-notify h2 {
  max-width: 670px;
  margin: 12px 0 17px;

  color: var(--ink-deep);

  font-size:
    clamp(2rem, 4.3vw, 3.4rem);

  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.coming-soon-notify > p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;

  color: var(--muted);
}

.coming-soon-form-slot:not(:empty) {
  margin-top: 28px;
}

.coming-soon-back {
  width: fit-content;
  margin: 40px auto 0;

  display: flex;
  align-items: center;

  gap: 9px;

  color: var(--wine-dark);

  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;

  text-decoration: none;
  text-transform: uppercase;
}

.coming-soon-back span {
  transition: transform 180ms ease;
}

.coming-soon-back:hover span {
  transform: translateX(-4px);
}

.coming-soon-back:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .coming-soon-hero__inner {
    padding-block: 52px 50px;
  }

  .coming-soon-cover {
    width: min(68vw, 285px);
  }

  .coming-soon-story {
    padding-block: 58px 72px;
  }

  .coming-soon-story__inner {
    width: min(
      calc(100% - 28px),
      880px
    );
  }
}

@media (max-width: 500px) {
  .coming-soon-cover {
    width: min(70vw, 260px);
  }

  .coming-soon-status {
    margin-top: 34px;
  }

  .coming-soon-notify {
    padding: 27px 22px;

    border-radius: var(--radius-small);
  }

  .coming-soon-back {
    align-items: flex-start;
  }
}

/* Translation and release status */

.translation-status {
  position: relative;
  overflow: hidden;

  padding-block:
    clamp(62px, 9vw, 105px);

  background:
    linear-gradient(
      135deg,
      var(--wine-dark),
      var(--wine)
    );

  color: var(--white);
}

.translation-status::before {
  content: "";

  position: absolute;
  top: -160px;
  right: -140px;

  width: 430px;
  height: 430px;

  border:
    1px solid rgba(234, 215, 167, 0.2);

  border-radius: 50%;

  pointer-events: none;
}

.translation-status__inner {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1fr);

  align-items: center;

  gap:
    clamp(42px, 8vw, 100px);
}

.translation-status .eyebrow {
  color: var(--gold-light);
}

.translation-status h2 {
  max-width: 560px;
  margin: 13px 0 0;

  color: var(--white);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(2.8rem, 6vw, 5.2rem);

  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;

  text-wrap: balance;
}

.translation-status__content {
  color:
    rgba(255, 255, 255, 0.78);

  font-size:
    clamp(1rem, 1.6vw, 1.1rem);
}

.translation-status__content p {
  margin: 0;
}

.translation-status__content p + p {
  margin-top: 22px;
}

.translation-status__hook {
  color: var(--gold-light);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(1.55rem, 3vw, 2.25rem);

  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .translation-status__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .translation-status h2 br {
    display: none;
  }
}