:root{
    --bg:#0b0908;
    --panel:#11100d;
    --gold:#c69a4b;
    --text:#e6ddcf;
    --muted:#9c9385;
    --border:#2e261d;
}

body.light{
    --bg:#f4efe7;
    --panel:#ffffff;
    --gold:#8b5e1f;
    --text:#2d241b;
    --muted:#6d6459;
    --border:#d5c8b8;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:
radial-gradient(circle at top, rgba(198,154,75,.12), transparent 35%),
var(--bg);
color:var(--text);
font-family:Inter,sans-serif;
line-height:1.9;
}

.hero{
min-height:65vh;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.25;
filter:brightness(.6);
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
transparent,
var(--bg) 90%
);
}

.hero-content{
position:relative;
z-index:2;
max-width:900px;
padding:20px;
}

.reading-time{
    margin-top:20px;
    color:var(--muted);
    font-size:.9rem;
}

#theme-toggle{
    position:fixed;
    top:20px;
    right:20px;
    z-index:1000;

    background:var(--panel);
    color:var(--text);

    border:1px solid var(--border);
    padding:10px 14px;

    border-radius:999px;
    cursor:pointer;
}

.kicker{
letter-spacing:4px;
color:var(--gold);
font-size:.85rem;
text-transform:uppercase;
}

.hero h1{
font-family:Cinzel,serif;
font-size:5rem;
margin:20px 0;
}

.subtitle{
color:var(--muted);
max-width:700px;
margin:auto;
}

.meta{
margin-top:35px;
color:var(--gold);
font-size:.9rem;
letter-spacing:2px;
}

.article{
max-width:850px;
margin:auto;
padding:100px 30px;
}

.article-header{
text-align:center;
margin-bottom:80px;
}

.divider{
width:120px;
height:1px;
background:var(--gold);
margin:30px auto;
}

.content{
font-size:1.15rem;
color:var(--text);
}

.content p{
margin-bottom:28px;
}

.content p:first-of-type::first-letter{
font-family:Cinzel,serif;
font-size:5rem;
float:left;
line-height:.9;
padding-right:12px;
color:var(--gold);
}

.quote{
margin:60px 0;
padding:30px;
border-left:3px solid var(--gold);
background:var(--panel);
font-style:italic;
color:var(--text);
}

.story-actions{
    margin-top:25px;

    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.story-actions a{
    background:var(--panel);
    border:1px solid var(--border);

    padding:10px 18px;

    border-radius:999px;

    transition:.3s;
}

.story-actions a:hover{
    border-color:var(--gold);
    transform:translateY(-2px);
}

.end{
text-align:center;
margin-top:100px;
}

.end-symbol{
font-size:2rem;
color:var(--gold);
margin-bottom:20px;
}

.navigation{
padding:80px 30px;
border-top:1px solid var(--border);
}

.navigation h2{
font-family:Cinzel,serif;
text-align:center;
margin-bottom:40px;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
max-width:1200px;
margin:auto;
}

.card{
background:var(--panel);
border:1px solid var(--border);
padding:25px;
border-radius:16px;
transition:.3s;
}

.card:hover{
transform:translateY(-4px);
border-color:var(--gold);
}

.card h3{
font-family:Cinzel,serif;
margin-bottom:10px;
}

.card p{
color:var(--muted);
}

a{
text-decoration:none;
color:inherit;
}

footer{
padding:40px;
text-align:center;
border-top:1px solid var(--border);
color:var(--muted);
}

@media(max-width:900px){

.hero h1{
font-size:3rem;
}

.content{
font-size:1rem;
}

}