/* ==================================================
   WAYFINDERTESTAMENT CODEX
================================================== */

:root {

    --bg: #35240f;
    --bg-alt: #463018;

    --surface: #fffdf7;
    --surface-alt: #f6f0dc;

    --gold: #d3a028;
    --gold-bright: #efc04d;

    --text: #251c12;
    --text-soft: #5e4d3a;

    --border: #c8a457;

    --content-width: 1200px;
    --reading-width: 900px;
}

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

body {

    background: var(--bg);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    line-height: 1.75;
}

/* ==================================================
   HEADER
================================================== */

header {

    background: #24180a;

    border-bottom: 2px solid var(--gold);

    position: sticky;

    top: 0;

    z-index: 100;
}

.topbar {

    max-width: var(--content-width);

    margin: auto;

    padding: 1rem 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.topbar a {

    color: solid var(--gold);

    text-decoration: none;

}

.logo {

    color: var(--gold-bright);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.4rem;

    letter-spacing: 0.08em;
}

.navigation {

    display: flex;

    align-items: center;

    gap: 1rem;
}

.navigation a {

    color: #f5ead0;

    text-decoration: none;

    transition: 0.15s;
}

.navigation a:hover {

    color: var(--gold-bright);
}

/* ==================================================
   SHARED PAGE CONTAINER
================================================== */

.page-container {

    max-width: var(--content-width);

    margin: 3rem auto;

    background: var(--surface);

    border: 2px solid var(--border);

    padding: 2.5rem;
}

/* ==================================================
   NEWS INDEX PAGE
================================================== */

.news-header {

    margin-bottom: 3rem;
}

.news-header h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--gold);

    font-size: 3rem;

    font-weight: normal;

    margin-bottom: 0.5rem;
}

.news-header p {

    color: var(--text-soft);
}

.section-title {

    display: flex;

    align-items: center;

    gap: 1rem;

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 0.12em;

    margin-bottom: 1.5rem;
}

.section-title::after {

    content: "";

    flex: 1;

    height: 1px;

    background: var(--border);
}

.news-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;
}

.news-item {

    background: var(--surface-alt);

    border: 1px solid var(--border);

    padding: 1.5rem;

    transition: 0.15s;
}

.news-item:hover {

    border-color: var(--gold);

    transform: translateY(-2px);
}

.news-meta {

    color: var(--gold);

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 0.5rem;
}

.news-item h2 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: normal;

    margin-bottom: 0.5rem;
}

.news-item a {

    color: var(--text);

    text-decoration: none;
}

.news-item a:hover {

    color: var(--gold);
}

/* ==================================================
   ARTICLE / TEXT PAGE
================================================== */

.article-page {

    max-width: var(--reading-width);

    margin: 4rem auto;

    background: var(--surface);

    border: 2px solid var(--border);

    padding: 4rem;
}

.article-category {

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 0.15em;

    margin-bottom: 0.5rem;
}

.article-title {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 3rem;

    font-weight: normal;

    margin-bottom: 0.5rem;
}

.article-date {

    color: var(--text-soft);

    margin-bottom: 3rem;
}

.article-content p {

    margin-bottom: 1.5rem;
}

.article-content blockquote {

    border-left: 3px solid var(--gold);

    padding-left: 1rem;

    margin: 2rem 0;

    color: var(--border);

    font-style: normal;
}

/* ==================================================
   DECORATIVE ELEMENTS
================================================== */

.codex-mark {

    color: var(--gold);

    font-size: 2rem;

    text-align: center;

    margin: 2rem 0;
}

.divider {

    height: 1px;

    background: var(--border);

    margin: 2rem 0;
}

/* ==================================================
   FOOTER
================================================== */

footer {

    text-align: center;

    color: #d8c39c;

    padding: 2rem;

    margin-top: 3rem;
}

footer .symbol {

    color: var(--gold);

    margin-bottom: 0.5rem;

    font-size: 1.3rem;
}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 850px) {

    .topbar {

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;
    }

    .page-container,
    .article-page {

        padding: 1.5rem;
    }

    .article-title,
    .news-header h1 {

        font-size: 2rem;
    }
}