/* ========================================
   News Archive / Single
   ======================================== */

.newsArchive,
.newsSingleOuter {
    position: relative;

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #3a241c 0%,
            #241713 50%,
            #160f0d 100%
        );
}

.newsArchiveInner,
.newsSingleOuter {
    position: relative;

    width: calc(100% - (var(--site-side-band) * 2));
    margin: 0 auto;
}

.newsArchiveInner,
.newsSingle {
    position: relative;

    box-sizing: border-box;

    color: var(--color-ink);

    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(92, 69, 45, 0.04) 45%,
            rgba(46, 30, 20, 0.10) 100%
        ),
        linear-gradient(
            180deg,
            var(--color-paper) 0%,
            var(--color-paper-2) 60%,
            var(--color-paper-3) 100%
        );
}

.newsArchiveInner {
    min-height: 100vh;

    padding:
        88px
        clamp(44px, 7vw, 125px)
        130px;
}

.newsSingle {
    min-height: 100vh;

    padding:
        84px
        clamp(42px, 8vw, 150px)
        110px;
}


/* ========================================
   Archive Header
   ======================================== */

.newsArchiveHeader {
    position: relative;
    z-index: 1;

    max-width: 980px;
    margin: 0 auto 62px;

    text-align: center;
}

.newsArchiveEyebrow,
.newsSingleEyebrow {
    margin: 0 0 10px;

    color: var(--color-gold);

    font-size: 0.7rem;
    letter-spacing: 0.38em;
}

.newsArchiveHeader h1 {
    margin: 0;

    color: var(--color-ink);

    font-size: clamp(2.7rem, 5vw, 4.5rem);
    letter-spacing: 0.08em;
}

.newsArchiveDescription {
    margin: 22px 0 0;

    color: var(--color-ink-soft);

    line-height: 2;
    letter-spacing: 0.08em;
}


/* ========================================
   Archive List
   ======================================== */

.newsList {
    position: relative;
    z-index: 1;

    max-width: 1080px;
    margin: 0 auto;

    border-top:
        1px solid
        rgba(126, 94, 52, 0.30);
}

.newsItem {
    border-bottom:
        1px solid
        rgba(126, 94, 52, 0.30);
}

.newsItemLink {
    display: grid;
    grid-template-columns:
        minmax(145px, 190px)
        1fr
        34px;

    gap: clamp(18px, 3vw, 42px);
    align-items: center;

    padding:
        26px
        14px;

    color: inherit;
    text-decoration: none;

    transition:
        background 0.25s ease,
        padding-left 0.25s ease,
        padding-right 0.25s ease;
}

.newsItemLink:hover {
    padding-left: 22px;
    padding-right: 6px;

    background:
        rgba(155, 123, 73, 0.055);
}

.newsItemMeta {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.newsItemMeta time {
    color: var(--color-gold);

    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.newsItemCategory {
    color: var(--color-ink-soft);

    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

.newsItemBody h2 {
    margin: 0;

    color: var(--color-ink);

    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.05em;
}

.newsItemExcerpt {
    margin: 8px 0 0;

    color: var(--color-ink-soft);

    font-size: 0.88rem;
    line-height: 1.8;
}

.newsItemArrow {
    color: var(--color-gold);

    font-size: 1rem;

    transition:
        transform 0.25s ease;
}

.newsItemLink:hover .newsItemArrow {
    transform: translateX(5px);
}


/* ========================================
   Pagination / Empty
   ======================================== */

.newsPagination {
    position: relative;
    z-index: 1;

    max-width: 1080px;
    margin: 54px auto 0;
}

.newsPagination .nav-links {
    display: flex;
    justify-content: center;

    gap: 10px;
}

.newsPagination a,
.newsPagination .current {
    display: grid;
    place-items: center;

    min-width: 38px;
    min-height: 38px;

    padding: 4px 8px;

    box-sizing: border-box;

    color: var(--color-ink);
    text-decoration: none;

    border:
        1px solid
        rgba(155, 123, 73, 0.30);
}

.newsPagination .current {
    color: var(--color-text);
    background: var(--color-library-dark-2);
}

.newsEmpty {
    position: relative;
    z-index: 1;

    padding: 70px 20px;

    text-align: center;
    color: var(--color-ink-soft);
}


/* ========================================
   Single Header
   ======================================== */

.newsSingleHeader,
.newsSingleHero,
.newsSingleContent,
.newsSingleNav {
    position: relative;
    z-index: 1;
}

.newsSingleHeader {
    max-width: 900px;
    margin: 0 auto 54px;

    text-align: left;
}

.newsSingleMeta {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 22px;

    margin-bottom: 22px;

    color: var(--color-gold);

    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.newsSingleCategory {
    color: var(--color-ink-soft);
}

.newsSingleHeader h1 {
    margin: 0;

    color: var(--color-ink);

    font-size: clamp(2rem, 4vw, 3.65rem);
    line-height: 1.45;
    letter-spacing: 0.06em;
}

.newsSingleHero {
    max-width: 980px;
    margin: 0 auto 54px;

    padding: 10px;

    box-sizing: border-box;

    border:
        1px solid
        var(--color-gold-line);

    background:
        rgba(29, 21, 18, 0.92);
}

.newsSingleHero img {
    display: block;

    width: 100%;
    height: auto;
}


/* ========================================
   Single Content
   ======================================== */

.newsSingleContent {
    max-width: 820px;
    margin: 0 auto;

    color: var(--color-ink);

    font-size: 1rem;
    line-height: 2.05;
    letter-spacing: 0.035em;
}

.newsSingleContent > *:first-child {
    margin-top: 0;
}

.newsSingleContent h2,
.newsSingleContent h3,
.newsSingleContent h4 {
    color: var(--color-ink);

    line-height: 1.55;
}

.newsSingleContent h2 {
    margin: 2.5em 0 0.8em;

    padding-left: 18px;

    border-left:
        2px solid
        var(--color-gold);
}

.newsSingleContent a {
    color: #76562f;
    text-underline-offset: 0.18em;
}

.newsSingleContent img {
    max-width: 100%;
    height: auto;
}

.newsSingleContent blockquote {
    margin: 2em 0;

    padding:
        18px
        24px;

    color: var(--color-ink-soft);

    border-left:
        2px solid
        rgba(155, 123, 73, 0.60);

    background:
        rgba(255, 255, 255, 0.14);
}


/* ========================================
   Single Navigation
   ======================================== */

.newsSingleNav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;
    gap: 24px;

    max-width: 900px;

    margin: 90px auto 0;
    padding-top: 28px;

    border-top:
        1px solid
        rgba(126, 94, 52, 0.30);
}

.newsSingleNav a {
    color: var(--color-ink-soft);
    text-decoration: none;

    transition: color 0.25s ease;
}

.newsSingleNav a:hover {
    color: var(--color-gold);
}

.newsSingleNext {
    text-align: right;
}

.newsSingleArchiveLink {
    color: var(--color-gold) !important;

    font-size: 0.82rem;
    letter-spacing: 0.08em;
}


/* ========================================
   Responsive
   ======================================== */

@media screen and (max-width: 1000px) {

    .newsArchiveInner,
    .newsSingleOuter {
        width: calc(100% - 80px);
    }

    .newsItemLink {
        grid-template-columns:
            minmax(130px, 160px)
            1fr
            28px;
    }
}


@media screen and (max-width: 700px) {

    .newsArchiveInner,
    .newsSingleOuter {
        width: calc(100% - 32px);
    }

    .newsArchiveInner,
    .newsSingle {
        padding:
            58px
            22px
            78px;
    }

    .newsItemLink {
        grid-template-columns: 1fr 22px;

        gap: 12px 18px;
    }

    .newsItemMeta {
        grid-column: 1 / -1;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .newsItemBody {
        grid-column: 1;
    }

    .newsItemArrow {
        grid-column: 2;
        align-self: center;
    }

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

    .newsSingleArchiveLink {
        grid-column: 1 / -1;
        grid-row: 1;

        text-align: center;
    }

    .newsSinglePrev {
        grid-column: 1;
        grid-row: 2;
    }

    .newsSingleNext {
        grid-column: 2;
        grid-row: 2;
    }
}