:root {
  color-scheme: dark;
  --ink: #f0eadc;
  --muted: #b7b7a9;
  --gold: #c8a76a;
  --deep: #101716;
  --glass: rgba(13, 20, 19, 0.78);
  --line: rgba(226, 214, 184, 0.22);
  --parallax-x: 0px;
  --parallax-y: 0px;
  font-family: "Songti SC", "Noto Serif CJK SC", "STSong", serif;
  background: var(--deep);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--deep); color: var(--ink); }
body { overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #e8c884; outline-offset: 4px; }

.image-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #101716; }
.stage-image, .blur-stage { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.stage-image { object-fit: cover; opacity: 0; transform: translate(var(--parallax-x), var(--parallax-y)) scale(1.025); transition: opacity .9s ease, transform 4s ease; }
.stage-image.is-visible { opacity: 1; }
.blur-stage { display: none; background: center / cover no-repeat; filter: blur(30px) brightness(.42); transform: scale(1.12); }
.stage-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,11,10,.72), rgba(6,11,10,.16) 48%, rgba(6,11,10,.3)), linear-gradient(0deg, rgba(6,10,9,.38), transparent 48%, rgba(6,10,9,.2)); }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(22px,4vw,64px); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; letter-spacing: .16em; background: linear-gradient(rgba(6,10,9,.62), transparent); }
.brand { text-decoration: none; font-weight: 700; }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a, .text-button { color: var(--ink); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.narration-button { display: flex; align-items: center; gap: 9px; color: var(--ink); background: rgba(10,16,15,.58); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.sound-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.narration-button.is-playing .sound-dot { animation: pulse 1.8s infinite; }
@keyframes pulse { 60% { box-shadow: 0 0 0 8px rgba(200,167,106,0); } }

.chapter-progress { position: fixed; z-index: 18; right: clamp(22px,4vw,64px); top: 50%; display: grid; justify-items: center; gap: 8px; transform: translateY(-50%); font-family: ui-monospace, monospace; color: var(--gold); }
.chapter-progress span { font-size: 13px; }
.chapter-progress i { display: block; width: 1px; height: 64px; background: linear-gradient(var(--gold), rgba(200,167,106,.16)); }
.chapter-progress strong { color: rgba(240,234,220,.62); font-size: 10px; font-weight: 400; }

.chapter-drawer { position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(430px,92vw); padding: 28px; background: rgba(11,18,17,.97); border-left: 1px solid var(--line); backdrop-filter: blur(24px); transform: translateX(105%); transition: transform .4s cubic-bezier(.22,.8,.2,1); overflow-y: auto; }
.chapter-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.drawer-head div { display: grid; gap: 5px; }
.drawer-head span { font: 10px/1.2 ui-sans-serif,system-ui; letter-spacing: .2em; color: var(--gold); }
.drawer-head strong { font-size: 26px; letter-spacing: .12em; }
.drawer-head button { color: var(--ink); background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; }
.chapter-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 22px 0; background: var(--line); }
.chapter-links a { display: flex; align-items: baseline; gap: 8px; min-height: 52px; padding: 14px 10px; background: #111a18; text-decoration: none; font-size: 13px; }
.chapter-links a:hover { background: #1b2723; }
.chapter-links span { font: 10px/1 ui-monospace,monospace; color: var(--gold); }
.chapter-drawer > p { color: var(--muted); font-size: 13px; line-height: 1.8; }

main { position: relative; z-index: 2; }
.scene-section { position: relative; min-height: 108vh; display: flex; align-items: center; padding: 120px clamp(38px,7vw,110px); }
.hero { min-height: 100svh; align-items: flex-end; }
.hero-copy { width: min(710px,72vw); padding-bottom: 6vh; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.eyebrow { margin: 0 0 22px; font: 11px/1.4 ui-sans-serif,system-ui; letter-spacing: .24em; color: #d5be8d; }
.hero h1 { margin: 0; display: grid; font-weight: 500; font-size: clamp(56px,8vw,122px); line-height: .95; letter-spacing: .08em; }
.hero h1 span:last-child { margin-left: .7em; }
.hero blockquote { margin: 34px 0 14px; padding-left: 18px; border-left: 1px solid var(--gold); font-size: clamp(22px,2.4vw,38px); letter-spacing: .12em; }
.invitation { max-width: 540px; color: #e2dfd4; font-size: 15px; line-height: 2; letter-spacing: .05em; }
.scroll-cue { position: absolute; right: clamp(24px,6vw,88px); bottom: 38px; display: grid; justify-items: center; gap: 10px; text-decoration: none; font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .2em; }
.scroll-cue i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--gold),transparent); }

.chapter-section.copy-right { justify-content: flex-end; }
.chapter-card { width: min(690px,47vw); margin: 7vh 0; padding: clamp(30px,3.6vw,56px); background: var(--glass); border: 1px solid var(--line); box-shadow: 0 28px 100px rgba(0,0,0,.3); backdrop-filter: blur(20px) saturate(.82); }
.chapter-heading { display: flex; align-items: flex-start; gap: 20px; }
.chapter-heading > span { color: var(--gold); font: 56px/.85 Georgia,serif; opacity: .72; }
.chapter-heading p { margin: 0 0 8px; color: var(--gold); font: 9px/1 ui-sans-serif,system-ui; letter-spacing: .2em; }
.chapter-heading h2 { margin: 0; font-weight: 500; font-size: clamp(30px,3vw,49px); line-height: 1.2; letter-spacing: .08em; }
.chapter-focus { margin: 30px 0 26px; padding: 17px 0 17px 20px; border-left: 1px solid var(--gold); color: #f3ead8; font-size: clamp(18px,1.5vw,24px); line-height: 1.65; letter-spacing: .06em; }
.sutra-original { padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sutra-original > span, .plain-reading > span, .keyword-line > span { display: block; margin-bottom: 14px; color: var(--gold); font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .2em; }
.sutra-original p { margin: 0 0 14px; color: #e4dfd2; font-size: 15px; line-height: 2.05; letter-spacing: .025em; white-space: pre-wrap; }
.sutra-original p:last-child { margin-bottom: 0; }
.plain-reading { padding: 26px 0 6px; }
.plain-reading p { margin: 0; color: #e9e2d3; font-size: 15px; line-height: 1.95; }
.plain-reading .deeper-reading { margin-top: 12px; color: #bfc1b6; font-size: 13px; }
.keyword-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(226,214,184,.13); }
.keyword-line > span { width: 100%; margin-bottom: 3px; }
.keyword-line i { padding: 7px 10px; border: 1px solid rgba(200,167,106,.24); color: #d9d3c5; font: normal 11px/1 ui-sans-serif,system-ui; letter-spacing: .08em; }
.next-chapter { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); text-decoration: none; font: 11px/1 ui-sans-serif,system-ui; letter-spacing: .14em; }
.next-chapter b { color: var(--gold); font-size: 18px; font-weight: 400; }

.closing { min-height: 150vh; align-items: flex-end; padding-bottom: 8vh; }
.closing-panel { width: min(1060px,88vw); margin: 0 auto; padding: clamp(30px,5vw,74px); background: rgba(10,16,15,.84); border: 1px solid var(--line); backdrop-filter: blur(20px); }
.closing h2 { margin: 0 0 48px; font-weight: 500; font-size: clamp(38px,5.6vw,78px); line-height: 1.3; }
.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.analysis-grid article { padding: 24px; background: rgba(15,23,21,.96); }
.analysis-grid span { color: var(--gold); font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .16em; }
.analysis-grid p { margin: 12px 0 0; color: #cbc9bf; font-size: 14px; line-height: 1.9; }
.final-gatha { margin: 56px 0; text-align: center; font-size: clamp(24px,3vw,44px); line-height: 1.9; letter-spacing: .12em; }
.page-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.page-links a { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); text-decoration: none; }
.page-links span { color: var(--gold); font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .18em; }
.page-links strong { font-size: 15px; font-weight: 500; }
.source-note { margin: 34px 0 0; color: #96988f; font-size: 11px; line-height: 1.8; }
.narration-status { position: fixed; z-index: 25; left: 50%; bottom: 18px; transform: translateX(-50%); min-height: 18px; padding: 7px 12px; border-radius: 999px; color: #d8d4c9; background: rgba(8,13,12,.76); font: 11px/1.4 ui-sans-serif,system-ui; pointer-events: none; }
.narration-status:empty { display: none; }

@media (max-width: 800px) {
  .site-header { padding: 16px 18px; }
  .site-header nav { gap: 12px; }
  .site-header nav > a { display: none; }
  .chapter-progress { display: none; }
  .image-stage .blur-stage { display: block; }
  .stage-image { inset: 0; width: 100%; height: 100%; object-fit: contain; transform: none; }
  .stage-wash { background: linear-gradient(0deg,rgba(6,10,9,.72),rgba(6,10,9,.05) 68%,rgba(6,10,9,.26)); }
  .scene-section { min-height: 100svh; padding: 72svh 16px 50px; align-items: flex-start; }
  .hero { min-height: 100svh; padding: 100px 16px 52px; align-items: flex-end; }
  .hero-copy { width: 100%; padding-bottom: 9vh; }
  .hero h1 { font-size: clamp(48px,16vw,76px); }
  .hero h1 span:last-child { margin-left: 0; }
  .hero blockquote { font-size: 19px; }
  .invitation { font-size: 13px; max-width: 90%; }
  .scroll-cue { right: 18px; bottom: 20px; }
  .chapter-card { width: 100%; margin: 0; padding: 26px 20px; background: rgba(10,16,15,.88); }
  .chapter-heading > span { font-size: 45px; }
  .chapter-heading h2 { font-size: 30px; }
  .chapter-focus { font-size: 19px; }
  .sutra-original p, .plain-reading p { font-size: 14px; }
  .closing { min-height: 130svh; padding: 72svh 16px 50px; }
  .closing-panel { width: 100%; padding: 28px 18px; }
  .analysis-grid, .page-links { grid-template-columns: 1fr; }
  .final-gatha { font-size: 23px; text-align: left; }
  .narration-status { bottom: 10px; max-width: 88vw; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stage-image { transform: none; }
}