.poetry-world { background: radial-gradient(circle at 75% 12%, #65335577, transparent 38%), #100b13; }
.poetry-opening { display: grid; grid-template-columns: minmax(260px, .67fr) minmax(0, 1.33fr); align-items: start; gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(1.5rem, 3vw, 3rem) 5vw 5rem; }
.poetry-opening .poetry-head { display: block; padding: clamp(1rem, 2vw, 2rem) 0; background: none; position: sticky; top: 7rem; }
.poetry-opening .poetry-head::after { content: none; }
.poetry-head .eyebrow { margin-bottom: 1rem; }
.poetry-opening .poetry-head h1 { font-size: clamp(3rem, 5.7vw, 6.5rem); line-height: .98; max-width: 8ch; text-wrap: balance; }
.poetry-opening .poetry-head > div { max-width: 36ch; }
.poetry-opening .poetry-head .lede { font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: #f1d6dc; margin-top: 1.8rem; }
.poetry-opening .poetry-head p:not(.lede):not(.eyebrow) { color: #d4bfc7; font-size: 1rem; }
.poetry-opening .poetry-reader { padding: 0; background: transparent; min-width: 0; scroll-margin-top: 7rem; }
.poetry-opening .reader-toolbar { margin: 0 0 1rem; align-items: center; }
.poetry-opening .reader-toolbar label { font-size: 1.45rem; }
.poetry-opening .reader-toolbar select { max-width: 20rem; }
.poetry-opening .reader-toolbar p { font-size: .78rem; opacity: .86; }
.poetry-opening .poem-stack { perspective: 1400px; max-width: none; }
.poetry-opening .poem-page { min-height: clamp(420px, 42vw, 520px); padding: clamp(2rem, 3.8vw, 3.6rem); border-radius: 3px 20px 20px 3px; background: linear-gradient(90deg, transparent 38px, #e89cac40 38px, #e89cac40 39px, transparent 39px), linear-gradient(140deg, #4b1a35, #1c0f21 70%); box-shadow: 4px 6px 0 #d9b47448, 17px 23px 42px #0008; transform-origin: left center; backface-visibility: hidden; }
.poetry-opening .poem-page h2 { max-width: 85%; margin-bottom: 1.1rem; }
.poetry-opening .poem-meta { margin-bottom: 1.15rem; }
.poetry-opening .poem-signature { margin-top: 1.2rem; }
.poetry-opening .poem-lines { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.52; overflow-wrap: anywhere; }
.poetry-opening .poem-lines span { display: block; }
.poetry-opening .reader-navigation { max-width: none; margin: 1.4rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.poetry-opening .reader-navigation button { border-radius: 30px; border-color: #d9b47499; padding: .55rem .9rem; transition: background .2s, transform .2s; }
.poetry-opening .reader-navigation button:hover { transform: translateY(-2px); }
.poetry-opening .reader-navigation p { margin-right: auto; align-self: center; white-space: nowrap; }
#poem-timer { color: #e7c99c; font-size: .78rem; align-self: center; min-width: 8rem; text-align: right; }
.page-progress { height: 3px; background: #f4d4c026; overflow: hidden; border-radius: 3px; }
.page-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #df7599, #f1d29a); }
.poem-page.page-departing { position: relative; z-index: 2; animation: page-out .58s ease-in both; }
.poem-page.page-departing.to-right { transform-origin: right center; animation-name: page-out-reverse; }
.poem-page.page-arriving { position: absolute; inset: 0; width: 100%; z-index: 1; animation: page-in .58s ease-out both; }
.poem-page.page-arriving.from-left { transform-origin: right center; animation-name: page-in-reverse; }
@keyframes page-out { to { opacity: 0; transform: translateX(-18%) rotateY(-16deg); filter: brightness(.65); } }
@keyframes page-in { from { opacity: .55; transform: translateX(16%) rotateY(14deg); filter: brightness(.7); } to { opacity: 1; transform: none; filter: none; } }
@keyframes page-out-reverse { to { opacity: 0; transform: translateX(18%) rotateY(16deg); filter: brightness(.65); } }
@keyframes page-in-reverse { from { opacity: .55; transform: translateX(-16%) rotateY(-14deg); filter: brightness(.7); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 900px) {
  .poetry-opening { display: block; padding: 1rem 5vw 4rem; }
  .poetry-opening .poetry-head { position: static; padding: .5rem 0 1rem; }
  .poetry-opening .poetry-head h1 { font-size: clamp(2.6rem, 9vw, 4rem); max-width: none; }
  .poetry-opening .poetry-head > div { max-width: none; }
  .poetry-opening .poetry-head .lede { margin-top: .5rem; }
  .poetry-opening .poetry-head p:not(.lede):not(.eyebrow) { font-size: .88rem; line-height: 1.35; margin-top: .4rem; }
  .poetry-opening .reader-toolbar p { display: none; }
  .poetry-opening .poem-page { min-height: 420px; padding: 1.8rem 1.4rem; }
}
@media (max-width: 560px) {
  .poetry-opening .poetry-head h1 { font-size: clamp(2.35rem, 10vw, 3.5rem); }
  .poetry-opening .poetry-head .eyebrow { margin-bottom: .35rem; }
  .poetry-opening .reader-toolbar { gap: .4rem; margin-bottom: .8rem; }
  .poetry-opening .reader-toolbar select { width: 100%; max-width: none; }
  .poetry-opening .poem-page { min-height: 400px; }
  .poetry-opening .reader-navigation { justify-content: space-between; }
  .poetry-opening .reader-navigation p { order: -1; width: 100%; }
  #poem-timer { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .poem-page.page-arriving, .poem-page.page-departing { animation: none; }
  .page-progress span { transition: none; }
}