/* Chapter — the reading column itself: the chapter heading stack
   (label, big number, title, divider), the prose body, the staggered
   entrance animation, and the closing end card. */

/* ---- the page ---- */
main { display: flex; justify-content: center; padding: clamp(2rem, 7vh, 5.5rem) clamp(1.1rem, 5vw, 2rem) 9rem; }
article { width: 100%; max-width: var(--measure); }

.chapter-label {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--ember);
  margin-bottom: 1.6rem;
}
.chapter-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.ch-num {
  font-family: var(--display); font-style: italic;
  font-size: clamp(3.4rem, 12vw, 5.6rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px #3a302a;
  margin-bottom: 0.4rem; font-variant-numeric: tabular-nums;
}
h1.ch-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.1rem, 6.5vw, 3.3rem); line-height: 1.08;
  color: var(--ink); letter-spacing: 0.005em; margin-bottom: 1.7rem;
  text-wrap: balance;
}

.divider { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 2.2rem; }
.divider::before, .divider::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.divider i {
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--ember); box-shadow: 0 0 9px var(--ember); flex: none;
}

.prose { font-size: clamp(1.04rem, 2.4vw, 1.22rem); color: var(--ink); }
.prose p { margin: 0 0 1.35em; }
.prose p:first-of-type::first-letter {
  font-family: var(--display); font-size: 3.5em; line-height: 0.74;
  float: left; padding: 0.06em 0.12em 0 0; color: var(--ember);
  font-weight: 600;
}
.prose .loading { color: var(--ash); font-style: italic; }
.prose .retry {
  font: inherit; color: var(--ember); background: none; border: 0;
  border-bottom: 1px solid currentColor; cursor: pointer; padding: 0;
}
.prose em { color: var(--ink-soft); }
.prose strong { color: #f4e9d8; font-weight: 500; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.prose blockquote {
  border-left: 2px solid var(--ember); padding-left: 1.2em;
  color: var(--ink-soft); font-style: italic; margin: 0 0 1.35em;
}

/* staggered reveal */
.reveal > * { opacity: 0; animation: rise .7s cubic-bezier(.2,.65,.3,1) forwards; }
.reveal > .chapter-label { animation-delay: .02s; }
.reveal > .ch-num     { animation-delay: .10s; }
.reveal > .ch-title   { animation-delay: .18s; }
.reveal > .divider    { animation-delay: .26s; }
.reveal > .prose      { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- end card ---- */
.endcard { text-align: center; padding-top: 1rem; }
.endcard .mark { color: var(--ember); font-size: 1.4rem; letter-spacing: 1em; margin-bottom: 1.4rem; }
.endcard h1 { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(2.2rem,7vw,3.4rem); margin-bottom: 1rem; }
.endcard p { color: var(--ink-soft); }