.reading-page { background: #04090f; color: #f4eee3; }
.reading-page::before { content: ""; position: fixed; inset: var(--studio-nav-height, 74px) 0 0; background: linear-gradient(#04090f33, #04090f66), url("/assets/images/refinements/unspoken-words-stage.webp") center top / contain no-repeat; pointer-events: none; z-index: -1; }
.reading-main { position: relative; isolation: isolate; max-width: 1000px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px) 60px; }
.reading-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; font-size: .85rem; }
.reading-breadcrumb a, .reading-action { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #afdfff; text-decoration: underline; text-underline-offset: 5px; }
.reading-page a:focus-visible { outline: 3px solid #fff1cb; outline-offset: 4px; }
.reading-eyebrow { font: .72rem/1.7 var(--font-mono); color: #edc891; letter-spacing: .12em; text-transform: uppercase; }
.collection-heading, .writing-card, .collection-more { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; background: #07101aed; border: 1px solid #5483a866; border-radius: 6px; padding: 28px; margin-bottom: 28px; }
.reading-main img { display: block; width: 100%; height: auto; object-fit: contain; }
.reading-main h1 { font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.2; margin: 0 0 20px; overflow-wrap: anywhere; }
.reading-main h2 { font-size: 1.5rem; }
.reading-main p { line-height: 1.8; }
.writing-card { grid-template-columns: 1fr 1.3fr; }
.reading-action { font-size: .9rem; margin-right: 18px; }
.poem-reader { max-width: 700px; margin: 0 auto; background: #07101aed; border: 1px solid #5483a866; border-radius: 6px; padding: clamp(22px, 5vw, 56px); box-shadow: 0 20px 80px #0006; }
.poem-reader header { padding-bottom: 24px; border-bottom: 1px solid #5483a866; margin-bottom: 30px; }
.poem-credit { color: #d1dfed; font-style: italic; }
.poem-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.95; }
.poem-text strong { color: #f7d498; }
.poem-footer { margin-top: 36px; border-top: 1px solid #5483a866; padding-top: 22px; }
@media (max-width: 700px) {
 .collection-heading, .writing-card, .collection-more { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
 .collection-heading img, .collection-more img { max-width: 180px; }
 .reading-main { padding: 18px 14px 40px; }
 .reading-page::before { background-position: center 100px; }
 .midnight-page .studio-nav__scroll { flex-wrap: wrap; overflow-x: visible; }
 .midnight-page .studio-nav a { flex: 1 1 140px; }
}
@media print { .studio-nav, .skip-link, .reading-breadcrumb { display: none; } .reading-page { background: white; color: black; } .reading-page::before { display: none; } .poem-reader { border: 0; box-shadow: none; background: white; padding: 0; } .poem-text strong, .poem-credit { color: black; } }

@media (max-width: 700px) { .midnight-page .studio-nav__scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .midnight-page .studio-nav a { min-width: 0; min-height: 52px; padding: 10px; } .midnight-page .studio-nav a:last-child { grid-column: 1 / -1; } }

.reading-page { isolation: isolate; }

/* Leave the performance space visible beside the text on larger screens. */
.reading-page { position: relative; }
.reading-page::before { background: linear-gradient(#04090f0d, #04090f33), url("/assets/images/refinements/unspoken-words-stage.webp") left top / min(76vw, 1080px) auto no-repeat; }
.reading-main { max-width: 1200px; }
.poem-reader { max-width: 600px; margin-right: 0; background: #07101ae0; padding: clamp(24px, 3vw, 44px); }
@media (max-width: 1000px) {
 .reading-page::before { position: absolute; display: none; }
 .reading-main::before { content: ""; position: absolute; inset: 0 0 auto; height: 100svh; background: linear-gradient(#04090f0d, #04090f33), url("/assets/images/refinements/unspoken-words-stage.webp") center top / 100% auto no-repeat; z-index: -1; pointer-events: none; }
 .poem-reader { margin: clamp(220px, 70vw, 650px) auto 0; background: #07101aeb; }
 .collection-heading { margin-top: clamp(220px, 70vw, 650px); }
}
@media print { .reading-main::before { display: none; } .poem-reader { margin: 0; max-width: none; background: white; } .collection-heading { margin-top: 0; } }