/* ── 22. Chapter title that rolls ────────────────────── */
.s22 { height: 620px; background: var(--gray-20); color: var(--gray-850); }
.ch-sc { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ch-sc::-webkit-scrollbar { display: none; }
.ch-a { max-width: 640px; margin: 0 auto; padding: 110px 28px 200px; }
.ch-a > h3 { margin: 0; font-size: clamp(40px, 6.6cqw, 72px); line-height: .95; letter-spacing: -0.022em; font-weight: 550; }
.ch-s { padding-top: 70px; }
.ch-k { margin: 0; font-size: 13px; font-weight: 550; letter-spacing: 0em; color: var(--aqua-550); }
.ch-s h4 { margin: 6px 0 0; font-size: 32px; letter-spacing: -0.022em; font-weight: 550; }
.ch-s p { margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: var(--gray-700); }
.ch-img { height: 260px; border-radius: 8px; margin-top: 26px; }
.ch-h { position: absolute; left: 0; right: 0; top: 0; height: 60px; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 0 clamp(18px, 4cqw, 40px); background: color-mix(in srgb, var(--gray-20) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 1px 0 color-mix(in srgb, var(--gray-900) 6%, transparent); }
.ch-lg { font-size: 17px; font-weight: 550; letter-spacing: -0.022em; }
.ch-tk { display: flex; align-items: center; gap: 8px; margin: 0 auto; font-size: 15px; font-weight: 550; height: 22px; }
.ch-num { position: relative; height: 22px; overflow: hidden; width: 1.1ch; font-variant-numeric: tabular-nums; color: var(--aqua-550); }
.ch-strip { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.2,.9,.25,1); }
.ch-strip span { height: 22px; line-height: 22px; }
.ch-sl { color: var(--gray-200); font-weight: 400; }
.ch-title { position: relative; height: 22px; overflow: hidden; min-width: 120px; }
.ch-w { position: absolute; left: 0; top: 0; white-space: pre; line-height: 22px; }
.ch-w span { display: inline-block; transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .4s ease; }
.ch-min { font-size: 13px; color: var(--gray-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--aqua-550); }
.ch-dots { position: absolute; left: 50%; bottom: 6px; display: none; }
@container (max-width: 700px) { .ch-lg { display: none; } .ch-tk { margin-left: 0; } }