:root { color-scheme: dark; --gold: #c6a36c; --ink: #050403; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: #ded7cc; font-family: Georgia, serif; }
a { color: inherit; text-decoration: none; }
header { position: absolute; z-index: 2; top: 0; display: flex; width: 100%; padding: 1.6rem 3vw; align-items: center; justify-content: space-between; font-family: "Cinzel", serif; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.brand { color: var(--gold); }
.story-hero { position: relative; display: grid; min-height: 85svh; overflow: hidden; align-items: end; padding: 8vw; }
.story-hero::after { position: absolute; inset: 0; background: linear-gradient(0deg, #050403 2%, transparent 60%), linear-gradient(90deg, rgba(0,0,0,.65), transparent); content: ""; }
.story-hero img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.story-hero div { position: relative; z-index: 1; }
.story-hero p { color: var(--gold); font-family: "Cinzel", serif; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; }
.story-hero h1 { max-width: 900px; margin: .8rem 0; color: #d6c2a0; font-size: clamp(3rem, 8vw, 8rem); font-weight: 400; line-height: .92; }
article { max-width: 720px; margin: 0 auto; padding: 8rem 2rem 12rem; color: #aaa197; font-size: 1.05rem; line-height: 1.9; }
article .lead { color: #ddd2c2; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.55; }
article blockquote { margin: 2.5rem 0; padding-left: 1.5rem; border-left: 1px solid var(--gold); color: #d3bd98; font-size: 1.25rem; font-style: italic; }
article .awakening { margin-top: 3rem; color: var(--gold); font-size: 1.5rem; font-style: italic; }
article a { display: inline-block; margin-top: 3rem; border-bottom: 1px solid var(--gold); color: var(--gold); font-family: "Cinzel", serif; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }