/*
 * 首页专用补充样式。
 * 文件名带版本号，避免 Cloudflare 将新版 HTML 与旧 styles.css 缓存混用。
 */

.header-inner {
  grid-template-columns: 1fr auto;
}

.entry-art-frame {
  position: absolute;
  top: -8%;
  right: -5%;
  width: 67%;
  height: 112%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 22%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 22%,
    #000 100%
  );
}

.entry-art {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
}

.book-content {
  position: absolute;
  z-index: 2;
  color: rgba(62, 44, 67, 0.72);
  font-family: var(--serif);
  text-align: center;
  transform-style: preserve-3d;
  pointer-events: none;
}

.book-content--left {
  top: 28.4%;
  left: 43.1%;
  width: 24%;
  height: 43%;
  padding: 9.5% 5% 4%;
  clip-path: polygon(
    50% 0,
    78% 21%,
    100% 55%,
    81% 100%,
    34% 82%,
    0 59%,
    20% 25%
  );
  opacity: 0.69;
  transform: perspective(720px) rotateY(18deg) rotateZ(-2.4deg)
    skewY(2.4deg);
  transform-origin: 88% 72%;
}

.book-content--right {
  top: 44%;
  left: 65.2%;
  width: 27%;
  height: 36.5%;
  padding: 7.8% 3.8% 3%;
  clip-path: polygon(4% 0, 94% 12%, 84% 100%, 0 82%);
  opacity: 0.76;
  transform: perspective(760px) rotateY(-12deg) rotateZ(2.4deg)
    skewY(1.2deg);
  transform-origin: 0 88%;
}

.book-content-kicker {
  margin: 0;
  color: rgba(171, 127, 51, 0.82);
  font-size: clamp(0.52rem, 0.64vw, 0.77rem);
  letter-spacing: 0.18em;
}

.book-content-title {
  margin: 12% 0 0;
  font-size: clamp(0.9rem, 1.5vw, 1.75rem);
  letter-spacing: 0.22em;
  line-height: 1.75;
}

.book-content-quote {
  margin: 13% 0 0;
  font-size: clamp(0.72rem, 1.03vw, 1.25rem);
  letter-spacing: 0.08em;
  line-height: 1.85;
}

.site-footer--simple {
  background: var(--paper);
}

.footer-inner--simple {
  min-height: 116px;
  justify-content: flex-start;
}

@media (max-width: 920px) {
  .entry-art-frame {
    right: -24%;
    width: 88%;
  }
}

@media (max-width: 719px) {
  .entry-art-frame {
    top: auto;
    right: -24%;
    bottom: -5%;
    width: 135%;
    height: 52%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 18%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 18%,
      #000 100%
    );
  }

  .entry-art {
    object-position: 66% center;
  }

  .book-content-kicker {
    font-size: 0.47rem;
  }

  .book-content-title {
    font-size: 0.82rem;
  }

  .book-content-quote {
    font-size: 0.6rem;
  }
}