body{
    margin:0;
    font-family:Segoe UI,Arial,sans-serif;
    background:#14191d;
    color:#ece8e2;
    line-height:1.7;
	font-size:17px;
}

blockquote{

    margin:18px 0;

    padding-left:18px;

    border-left:3px solid #6e8298;

    font-style:italic;

}

.hero{
    background:
        linear-gradient(rgba(18,22,26,.82),rgba(18,22,26,.90)),
        url(...);

    background-size:cover;
    background-position:center;

    padding:0;
}

.container{
    max-width:1400px;
    margin:auto;
	padding:18px 26px;px 12px;
}

h1{
    font-size:3.4rem;
    font-weight:300;
    letter-spacing:2px;
	margin:0 0 2px 0;
    line-height:1;
}

.tagline{
    color:#d6cab6;
    font-size:1.1rem;
    margin-bottom:12px;
}

.intro{
    max-width:1000px;
    color:#d8d8d8;
    font-size:1.45rem;
    margin-bottom:16px;
	line-height:1.35;
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:14px 16px;
    backdrop-filter:blur(6px);
}

.card h2{
    margin-top:0;
    color:#f4e4c0;
    font-weight:400;
	margin:0 0 8px 0;
    font-size:1.35rem;
}

.card p{
    font-size:.98rem;
    line-height:1.45;
    margin-bottom:10px;
	margin:0 0 10px 0;
}

.btn{
    display:inline-block;
    margin-top:8px;
    padding:9px 15px;
    text-decoration:none;
    color:#fff;
    background:#5a7288;
    border-radius:8px;
    transition:.2s;
	font-size:.95rem;
}

.btn:hover{
    background:#7690a8;
}

.network{
    margin-top:16px;
}

.network a{
    color:#d8c89f;
    text-decoration:none;
}

.network a:hover{
    text-decoration:underline;
}

.network h2{
    margin:0 0 6px;
}

.network p{
    margin:4px 0;
    font-size:.95rem;
}
.page-title{

    font-size:2.8rem;

    font-weight:300;

    letter-spacing:2px;

    margin:10px 0 4px 0;

    line-height:1;

}


footer{
    margin-top:18px;
    text-align:center;
    color:#a8a8a8;
    font-size:.9rem;
	padding-bottom:10px;
}

/* ---------- NAVBAR ---------- */

.navbar{

    margin:18px 0 26px;

}

.navbar a{

    display:inline-block;

    padding:8px 14px;

    margin-right:8px;
    margin-bottom:8px;

    background:rgba(120,140,165,.18);

    border:1px solid rgba(170,190,210,.18);

    border-radius:8px;

    color:#dce7f2;

    text-decoration:none;

    font-size:.95rem;

    letter-spacing:.5px;

    transition:.20s ease;

}

.navbar a:hover{

    background:rgba(150,180,210,.30);

    border-color:rgba(190,210,230,.40);

    color:#ffffff;

}

/* active page */

.navbar a.active{

    background:#6f89a6;

    color:#ffffff;

    border-color:#9fb7cf;

    font-weight:600;

}

.nav-main{

    margin-bottom:12px;

}

.nav-sub{

    opacity:.92;

}

.nav-sub a{

    font-size:.90rem;

}

.toc-list{
    list-style:none;
    padding-left:0;
}

.toc-list li{
    margin-bottom:12px;
}

.toc-list .btn{
    display:inline-block;
}

.chapter-nav{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.chapter-nav a{
    color:#f0d98a;
    text-decoration:none;
    font-weight:bold;
}

.chapter-nav a:hover{
    color:#ffffff;
    text-decoration:underline;
}

@media(max-width:900px){

h1{
    font-size:2.2rem;
}

.container{
    padding:18px 14px;
}

.grid{
    grid-template-columns:1fr;
}

}