/* ---------- perspectives: the reading room, v3 ----------
   Calm hero, then chaptered reading: each category title is sticky
   and travels with you while its questions scroll past. */

.px-hero { position: relative; background: var(--ink); margin-top: -78px; overflow: hidden; }
.px-hero-inner { position: relative; z-index: 1; min-height: min(64vh, 620px); display: flex; align-items: flex-end; padding-top: 160px; padding-bottom: 96px; }
.px-hero h1 { font-size: var(--step-4); color: var(--paper); letter-spacing: -0.01em; max-width: 14ch; }
.px-hero h1 em { font-style: italic; color: var(--sage-glow); }
.px-hero .lead { font-size: var(--step-1); line-height: 1.5; color: var(--paper-soft); max-width: 44ch; margin: 26px 0 0; }

/* the quiet signature: noise resolving into signal, drawn once */
.px-signal { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; }
.px-signal svg { width: 100%; height: 100%; display: block; }
.px-signal path { fill: none; stroke: var(--sage-glow); stroke-width: 1.5; opacity: 0.9; }

/* intro line above the chapters */
.px-intro { margin-bottom: var(--s-6); }
.px-intro .px-note { color: var(--text-mid); font-size: 0.9063rem; margin: 0; max-width: 44ch; }

/* chapters: sticky category rail left, questions right */
.px-chapter { border-top: 1px solid var(--line); padding: var(--s-6) 0; display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.px-chapter:last-of-type { border-bottom: 1px solid var(--line); }
.px-chapter-rail { position: sticky; top: 110px; }
.px-ch-n { font-family: var(--serif); font-weight: 300; font-size: 2rem; color: var(--accent); line-height: 1; display: block; margin-bottom: 14px; }
.px-chapter-rail h2 { font-size: var(--step-3); font-weight: 400; margin: 0 0 16px; letter-spacing: -0.005em; max-width: 14ch; }
.px-chapter-rail h2 a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.px-chapter-rail h2 a:hover { color: var(--accent); }
.px-chapter-rail h2 a:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.px-chapter-rail .px-desc { color: var(--text-soft); font-size: 0.9688rem; max-width: 34ch; margin: 0 0 22px; }
.px-chapter-rail .link-quiet { font-size: 0.9063rem; }

/* entries: numbered like a table of contents */
.px-entry {
  position: relative;
  display: grid; grid-template-columns: 84px 1fr 34px; gap: 20px; align-items: baseline;
  padding: 30px 0; text-decoration: none; border-top: 1px solid var(--line);
}
.px-entry:first-of-type { border-top: 0; padding-top: 6px; }
.px-entry::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--sage); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.px-entry:first-of-type::before { display: none; }
.px-entry:hover::before, .px-entry:focus-visible::before { transform: scaleX(1); }
.px-entry:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.px-n { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; color: var(--text-faint); transition: color 0.25s ease; }
.px-n::before { content: "No. "; font-size: 0.8125rem; letter-spacing: 0.08em; }
.px-entry:hover .px-n { color: var(--accent); }
.px-q { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.3; color: var(--text); transition: color 0.25s ease; }
.px-entry:hover .px-q { color: var(--accent); }
.px-meta { display: block; margin-top: 8px; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); }
.px-arrow { color: var(--accent); font-family: var(--sans); font-size: 1.05rem; transform: translateX(-6px); opacity: 0; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; }
.px-entry:hover .px-arrow, .px-entry:focus-visible .px-arrow { transform: translateX(0); opacity: 1; }

/* request band */
.px-request { margin-top: var(--s-7); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.px-request p { font-family: var(--serif); font-weight: 300; font-size: var(--step-2); line-height: 1.3; color: var(--text); margin: 0; max-width: 24ch; }

@media (max-width: 900px) {
  .px-chapter { grid-template-columns: 1fr; gap: var(--s-3); }
  .px-chapter-rail { position: static; }
  .px-chapter-rail .px-desc { max-width: none; }
  .px-entry { grid-template-columns: 64px 1fr; }
  .px-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .px-entry::before, .px-arrow { transition: none; }
}