* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Spectral', serif; background: #F5DEB3; color: #3D2B1F; line-height: 1.85; font-size: 17px; }
h1, h2 { font-family: 'Caveat', cursive; color: #2B1810; }

.chapter { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; position: relative; }
.hero-chapter { background: #F5DEB3; }

.frame { position: relative; width: 400px; max-width: 90%; text-align: center; padding: 48px 32px; }
.frame-border { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-line { fill: none; stroke: #2B1810; stroke-width: 2; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: drawFrame 2s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes drawFrame { to { stroke-dashoffset: 0; } }

.chronicle-title { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.chronicle-sub { font-family: 'Caveat', cursive; font-size: 18px; color: #5C3D2E; }

.candle { position: absolute; right: 15%; top: 20%; display: flex; flex-direction: column; align-items: center; }
.candle::after { content: ''; width: 8px; height: 40px; background: linear-gradient(180deg, #E8A030, #A0785A); border-radius: 2px; }
.flame { width: 12px; height: 20px; background: radial-gradient(ellipse at 50% 80%, #E8A030 0%, #D4600A 50%, transparent 100%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: flicker 0.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(232, 160, 48, 0.6)); }
@keyframes flicker { 0% { transform: scaleX(1) scaleY(1); opacity: 1; } 50% { transform: scaleX(0.9) scaleY(1.1); opacity: 0.85; } 100% { transform: scaleX(1.05) scaleY(0.95); opacity: 1; } }

.chapter-divider { padding: 0 24px; max-width: 800px; margin: 0 auto; }
.chapter-divider svg { width: 100%; height: 20px; }
.wavy-line { fill: none; stroke: #5C3D2E; stroke-width: 1.5; }

.chapter-content { max-width: 560px; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.chapter-content.visible { opacity: 1; transform: translateY(0); }

.chapter-num { font-family: 'Caveat', cursive; font-size: 16px; color: #8B6B4A; letter-spacing: 3px; text-transform: uppercase; display: block; margin-bottom: 8px; }
.chapter-content h2 { font-size: 36px; margin-bottom: 16px; }
.chapter-content p { margin-bottom: 16px; }
.annotation { font-family: 'Caveat', cursive; font-size: 18px; color: #A0785A; font-style: italic; border-left: 2px solid #E8A030; padding-left: 16px; display: inline-block; text-align: left; }

.site-footer { text-align: center; padding: 48px 24px; font-family: 'Caveat', cursive; font-size: 20px; color: #8B6B4A; border-top: 1px solid #A0785A; }

/* Palette: #1A0F09 #5C3D2E #D4600A */
@media (max-width: 600px) { .chronicle-title { font-size: 30px; } .frame { padding: 32px 20px; } .candle { right: 5%; } }