*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:17px;line-height:1.8;scroll-behavior:smooth}
body{background-color:#1E1A16;color:#D4C8B4;font-family:'Lora',serif;font-weight:400;overflow-x:hidden}
.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 80px;max-width:900px;margin:0 auto}
.hero-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:4.2rem;color:#E8DCC8;letter-spacing:0.04em;text-transform:uppercase;opacity:0;transition:opacity 500ms}
.hero-title.visible{opacity:1}
.hero-subtitle{font-family:'Lora',serif;font-weight:400;font-size:1.2rem;color:#D4C8B4;margin-top:12px;opacity:0;transition:opacity 400ms}
.hero-subtitle.visible{opacity:1}
.hero-rule{width:0;height:1px;background:#6B5B4E;margin:24px 0;transition:width 600ms ease-out}
.hero-rule.visible{width:200px}
.begin-link{font-family:'Oswald',sans-serif;font-weight:400;font-size:0.9rem;color:#C97B3A;text-decoration:none;letter-spacing:0.06em;text-transform:uppercase;opacity:0;transition:opacity 400ms}
.begin-link.visible{opacity:1}

.chapter{position:relative;padding:120px 80px;max-width:900px;margin:0 auto;clip-path:polygon(0 3%,100% 0,100% 97%,0 100%)}
.chapter-alt{clip-path:polygon(0 0,100% 3%,100% 100%,0 97%)}
.chapter-watermark{position:absolute;top:10%;right:10%;font-family:'Oswald',sans-serif;font-weight:700;font-size:12rem;color:#E8DCC8;opacity:0.06;pointer-events:none;line-height:1}
.chapter-content{position:relative;z-index:1}
.chapter-label{font-family:'Oswald',sans-serif;font-weight:400;font-size:0.75rem;color:#6B5B4E;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:8px}
.chapter-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:2.4rem;color:#E8DCC8;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:24px}
.chapter-body{font-family:'Lora',serif;font-weight:400;font-size:1rem;color:#D4C8B4;line-height:1.8;margin-bottom:16px}
.campfire{background:#252018;border-left:4px solid #C97B3A;padding:20px 24px;margin-top:24px;box-shadow:inset 0 0 60px rgba(201,123,58,0.04)}
.campfire code{font-family:'Source Code Pro',monospace;font-weight:400;font-size:0.82rem;color:#C97B3A;line-height:1.6}

.chapter{opacity:0;transform:translateY(20px);transition:opacity 500ms ease-out,transform 500ms ease-out}
.chapter.visible{opacity:1;transform:translateY(0)}

.trail-marker{display:flex;justify-content:center;padding:32px 0}
.marker-dot{width:24px;height:24px;border-radius:50%;border:2px solid #6B5B4E;position:relative}
.marker-dot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#C97B3A}

.site-footer{max-width:900px;margin:0 auto;padding:40px 80px;border-top:1px solid #3A322A}
.footer-text{font-family:'Lora',serif;font-size:0.75rem;color:#6B5B4E;letter-spacing:0.04em}

@media(max-width:768px){
    .hero{padding:0 24px}
    .hero-title{font-size:2.8rem}
    .chapter{padding:80px 24px;clip-path:none}
    .chapter-alt{clip-path:none}
    .site-footer{padding:40px 24px}
}