.poster-signature .site-header { background: oklch(0.985 0.008 80 / .94); }

.hero { position: relative; min-height: calc(100svh - 4.8rem); display: grid; align-items: center; overflow: clip; padding-block: clamp(4rem, 8vw, 7rem); background: var(--cream); }
.hero::after { content: 'Betrayal'; position: absolute; right: -1rem; bottom: -3rem; color: oklch(0.55 0.22 27 / .045); font: 400 clamp(9rem, 22vw, 21rem)/1 var(--display); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(3rem, 10vw, 9rem); }
.hero-book { width: min(31vw, 23rem); margin-inline: auto; }
.hero-copy { max-width: 40rem; }
.hero-copy .eyebrow { color: var(--red); }
.hero h1 { margin: 0; font: 400 clamp(4.8rem, 9vw, 8.5rem)/.8 var(--display); letter-spacing: -.055em; text-wrap: balance; }
.hero h1 span { display: block; margin-top: .28em; color: var(--red); font-family: var(--script); font-size: .67em; line-height: .86; letter-spacing: 0; }
.hero .book-subtitle { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero .book-description { max-width: 36rem; margin: 2rem 0 1.6rem; font-size: clamp(1.05rem, 1.5vw, 1.18rem); }

.about { background: var(--ink); color: var(--cream); }
.about-grid { display: grid; grid-template-columns: .7fr .85fr 1.25fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.about .eyebrow { color: var(--aqua); }
.about-photo { position: relative; }
.about-photo::before { content: ''; position: absolute; inset: -.8rem .8rem .8rem -.8rem; border: 1px solid var(--red); border-radius: 50%; }
.about-photo img { position: relative; border-radius: 50%; }
.bio { margin: 0; color: oklch(0.9 0.015 80); }

.book { position: relative; overflow: clip; background: var(--cream); }
.book::after { content: 'Betrayal'; position: absolute; z-index: 0; right: -1rem; bottom: -3rem; color: oklch(0.55 0.22 27 / .055); font: 400 clamp(8rem, 21vw, 20rem)/1 var(--display); pointer-events: none; }
.book-subtitle { max-width: 27ch; margin: 1.5rem 0 .2rem; font: italic 400 clamp(1.45rem, 3vw, 2.2rem)/1.25 var(--display); }
.byline { margin: 0 0 2rem; color: var(--muted); }
.book-description { margin-bottom: 1.5rem; }
.book-story { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); }
.story-heading { position: sticky; top: 7rem; align-self: start; }
.story-heading .eyebrow { color: var(--red); }
.story-heading h2 { max-width: 19ch; margin: 0; font: 400 clamp(2.1rem, 4.5vw, 4rem)/1.05 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.story-highlight { padding: .02em .12em .08em; background-image: linear-gradient(var(--aqua), var(--aqua)); background-repeat: no-repeat; background-position: left 60%; background-size: 100% 88%; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .story-highlight { background-size: 0% 88%; transition: background-size 1.1s var(--ease-out); }
.js .book-story[data-visible] .story-highlight { background-size: 100% 88%; }
.js .book-story[data-visible] .story-highlight:nth-of-type(2) { transition-delay: .35s; }
.story-copy { max-width: 65ch; }
.story-copy p { margin: 0; color: oklch(0.29 0.025 35); font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.82; }
.story-copy p + p { margin-top: 1.7rem; }

.order-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; }
.order-action { max-width: 32rem; }
.order-action p { margin: 0 0 1.5rem; font-size: 1.2rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr .9fr; gap: 2rem; }
  .hero-book { width: min(35vw, 20rem); }
  .about-grid { grid-template-columns: .7fr 1fr; }
  .about-heading { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .hero { min-height: auto; padding-block: 3.5rem 5rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-book { order: -1; }
  .hero h1 { font-size: clamp(4rem, 20vw, 6rem); }
  .hero-book { width: min(66vw, 18rem); }
  .about-grid { grid-template-columns: 1fr; }
  .about-heading { grid-column: auto; }
  .about-photo { width: min(78vw, 22rem); }
  .book-story, .order-grid { grid-template-columns: 1fr; }
  .book-story { gap: 2rem; }
  .story-heading { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .js .book-story[data-visible] .story-highlight { transition-delay: 0s; }
}