/* mujun.study - Colors: #141210, #1E1A16, #E8DCC8, #B8A890, #C0A060, #908070, #40603A, #A03030 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #141210; color: #B8A890; font-family: 'Spectral', serif; font-size: 1rem; line-height: 1.85; display: flex; }

/* Lamp Glow */
.lamp-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 0%, rgba(192,160,96,0.06), transparent 70%); opacity: 0; animation: lampOn 2s ease forwards; }
@keyframes lampOn { to { opacity: 1; } }

/* Progress Bar */
.progress-bar { position: fixed; top: 0; left: 0; width: 2px; height: 0%; background: #C0A060; z-index: 200; transition: height 0.1s linear; }

/* Table of Contents */
#toc { position: fixed; top: 0; left: 0; width: 220px; height: 100vh; background: #1E1A16; border-right: 1px solid rgba(192,160,96,0.1); padding: 2.5rem 1.25rem; z-index: 50; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
.toc-label { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-style: italic; font-size: 0.85rem; color: #C0A060; margin-bottom: 1rem; display: block; }
.toc-item { font-size: 0.85rem; color: #908070; text-decoration: none; padding: 0.35rem 0.5rem; border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s; display: block; }
.toc-item:hover { color: #B8A890; }
.toc-item.active { color: #E8DCC8; border-left-color: #C0A060; }

/* Main Content */
#content { margin-left: 220px; flex: 1; max-width: 960px; padding: 3rem 2rem; position: relative; z-index: 1; }

/* Chapter Header */
.chapter-header { text-align: center; padding: 4rem 0 3rem; }
.chapter-title { font-family: 'Spectral', serif; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.5rem); color: #E8DCC8; letter-spacing: 0.01em; margin-bottom: 0.5rem; }
.chapter-subtitle { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-style: italic; font-size: 1.1rem; color: #C0A060; }

/* Decorative Rule */
.decorative-rule { border: none; height: 0; border-top: 2px solid rgba(192,160,96,0.3); padding-top: 4px; border-bottom: 0.5px solid rgba(192,160,96,0.15); margin: 1.5rem 0; }

/* Section */
.section { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.section.visible { opacity: 1; transform: translateY(0); }

/* Chapter Layout */
.chapter { display: grid; grid-template-columns: 40px 1fr 200px; gap: 0 1.5rem; margin-bottom: 3rem; padding: 2rem 0; }
.section-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-style: italic; font-size: 0.85rem; color: #C0A060; padding-top: 0.25rem; }
.chapter-body { max-width: 680px; }
.section-heading { font-family: 'Spectral', serif; font-weight: 600; font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: #E8DCC8; letter-spacing: 0.01em; margin-bottom: 1.25rem; }
.body-text { margin-bottom: 1rem; }

/* Footnote References */
.fn-ref { font-size: 0.7em; color: #C0A060; vertical-align: super; cursor: default; }

/* Margin Notes */
.margin-notes { padding-top: 0.5rem; }
.footnote { font-size: 0.8rem; line-height: 1.5; font-weight: 300; color: #908070; border-left: 1px solid rgba(192,160,96,0.2); padding: 0.25rem 0 0.25rem 0.75rem; margin-bottom: 1rem; }
.fn-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-style: italic; color: #C0A060; margin-right: 0.25rem; }

/* Citation */
.citation { background: #1E1A16; border-left: 2px solid #C0A060; padding: 1rem 1.5rem; margin: 1.5rem 0; }
.citation p { font-style: italic; color: #E8DCC8; margin-bottom: 0.5rem; }
.citation cite { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.85rem; color: #908070; }

/* Responsive */
@media (max-width: 900px) {
    #toc { display: none; }
    #content { margin-left: 0; }
    .chapter { grid-template-columns: 30px 1fr; }
    .margin-notes { grid-column: 2; border-top: 1px solid rgba(192,160,96,0.1); padding-top: 1rem; margin-top: 0.5rem; }
    .progress-bar { top: 0; left: 0; width: 100%; height: 2px !important; }
}