.hero { position: relative; padding: clamp(4rem, 9vw, 8.5rem) 0 clamp(4.4rem, 8vw, 7.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 100%; margin: 1.35rem 0 1.45rem; font-size: clamp(2.95rem, 5.8vw, 5.35rem); }
.hero h1 .line { display: block; }
.hero h1 em { display: inline-block; }
.hero-lede { max-width: 35rem; }
.hero-lede strong { color: var(--cream); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-footnote { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 1.55rem; color: var(--cream-muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; }
.hero-footnote span { display: inline-flex; align-items: center; gap: 0.42rem; }
.hero-footnote span::before { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); content: ""; opacity: 0.8; }
.hero-art { position: relative; min-height: clamp(24rem, 47vw, 37rem); perspective: 1500px; }
.hero-glow { position: absolute; inset: 12% 2% 0; border-radius: 50%; background: radial-gradient(circle, rgba(200, 162, 90, 0.2), transparent 65%); filter: blur(24px); }
.hero-desk { position: absolute; inset: auto 2% 0; height: 32%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #2b1f16, #17100b); box-shadow: 0 -1px rgba(200, 162, 90, 0.12); }
.hero-book {
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(74%, 22rem);
  aspect-ratio: 0.71;
  transform: translateX(-50%) rotateY(-12deg) rotateZ(2deg);
  transform-style: preserve-3d;
  filter: drop-shadow(18px 32px 26px rgba(0, 0, 0, 0.55));
}
.hero-book__spine {
  position: absolute;
  top: 0.4%;
  bottom: 0;
  left: -6.5%;
  width: 8%;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, #2a1518, #4a1c22 55%, #2a1518);
  transform: rotateY(-58deg);
  transform-origin: right center;
}
.hero-book__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 162, 90, 0.43);
  border-radius: 3px 8px 8px 3px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 229, 180, 0.13), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 36%),
    repeating-linear-gradient(92deg, transparent 0 7px, rgba(0, 0, 0, 0.07) 8px 9px),
    #4b1a21;
  box-shadow: inset 0 0 0 7px #3b141a, inset 0 0 0 8px rgba(200, 162, 90, 0.33), inset 0 0 60px rgba(0, 0, 0, 0.5);
}
.hero-book__cover::before { content: ""; position: absolute; inset: 1.9rem; border: 1px solid rgba(200, 162, 90, 0.32); }
.hero-book__cover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 8%; width: 1px; background: rgba(255, 225, 170, 0.12); }
.hero-book__label { position: absolute; top: 23%; right: 13%; left: 13%; text-align: center; }
.hero-book__ornament { display: block; margin: 0 auto 1.4rem; color: var(--brass); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.3em; }
.hero-book__title { display: block; color: #d8b978; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.7rem); font-weight: 500; letter-spacing: 0.01em; line-height: 0.9; text-shadow: 0 1px rgba(255, 245, 220, 0.18); }
.hero-book__rule { display: block; width: 3rem; height: 1px; margin: 1.35rem auto; background: var(--brass); opacity: 0.6; }
.hero-book__sub { display: block; color: rgba(228, 197, 131, 0.82); font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; }
.hero-book__ribbon { position: absolute; top: -1px; right: 12%; width: 0.55rem; height: 34%; background: linear-gradient(90deg, #822f39, #a74651 50%, #641f29); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.4)); }
.hero-book__seal { position: absolute; right: 11%; bottom: 12%; display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: 50%; color: #e0bd7d; background: radial-gradient(circle at 36% 28%, #822d33, #50151c 60%, #321015); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.18); font-family: var(--serif); font-size: 1.3rem; }
.hero-note {
  position: absolute;
  right: 0;
  bottom: 5%;
  width: 11.5rem;
  padding: 1.1rem 1.2rem;
  color: #43372b;
  background:
    repeating-linear-gradient(transparent 0 1.45rem, rgba(78, 55, 34, 0.13) 1.46rem 1.48rem),
    linear-gradient(135deg, #f2e7d5, #e6d8c3);
  box-shadow: 4px 9px 18px rgba(0, 0, 0, 0.34);
  font-family: var(--prose);
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.5;
  transform: rotate(-5deg);
}
.hero-note span { display: block; margin-top: 0.65rem; color: #6a5541; font-family: var(--mono); font-size: 0.45rem; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-pen { position: absolute; bottom: 7%; left: 2%; width: 1.05rem; height: 12rem; border-radius: 60% 60% 30% 30%; background: linear-gradient(90deg, #17110c, #4b3424 48%, #21170f); box-shadow: 3px 12px 12px rgba(0, 0, 0, 0.35); transform: rotate(27deg); }
.hero-pen::before { content: ""; position: absolute; top: -0.7rem; left: 0.19rem; width: 0.68rem; height: 1.4rem; background: linear-gradient(90deg, #9b753a, #e1bf7a, #8d672d); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hero-pen::after { content: ""; position: absolute; top: 25%; right: 0; left: 0; height: 1px; background: var(--brass); opacity: 0.55; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 47rem; }
  .hero-art { width: min(100%, 28rem); min-height: 30rem; margin-inline: auto; }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.85rem, 13.5vw, 4.6rem); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-note { right: -0.5rem; bottom: 2%; width: 9.5rem; }
}

@media (max-width: 480px) {
  .hero-art { min-height: 25rem; }
  .hero-book { width: 77%; }
  .hero-pen { height: 9rem; }
  .hero-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}