/* =========================================================
   ASILI DISCOVERY
   CATEGORY PAGE
   EDITORIAL / DOCUMENTARY UI
   ========================================================= */

:root {
    --asili-green: #35351f;
    --asili-green-deep: #292818;
    --asili-gold: #855e26;
    --asili-gold-light: #a97a38;
    --asili-milk: #e4d6c5;
    --asili-bg: #34321e;
    --asili-paper: #eee4d5;
    --asili-white: #fffaf2;
    --asili-muted: #b9ad9c;
    --asili-line: rgba(228, 214, 197, .22);
    --asili-shadow: rgba(0, 0, 0, .28);
}


/* =========================================================
   PAGE
   ========================================================= */

.category-page {
    background: var(--asili-bg);
    color: var(--asili-milk);
}


/* =========================================================
   HERO
   ========================================================= */

.category-hero {
    position: relative;

    min-height: min(720px, 78vh);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background:
        var(--asili-green);

    color: var(--asili-white);
}


.category-hero__image {
    position: absolute;
    inset: 0;

    z-index: 0;
}


.category-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.category-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(41, 40, 24, .08) 0%,
            rgba(41, 40, 24, .16) 30%,
            rgba(41, 40, 24, .72) 68%,
            rgba(41, 40, 24, .97) 100%
        );
}


.category-hero__content {
    position: relative;

    z-index: 2;

    width: 100%;

    border-bottom:
        5px solid var(--asili-gold);
}


.category-hero__inner {
    width: min(
        1240px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        150px
        0
        58px;
}


.category-hero__rule {
    width: 74px;
    height: 5px;

    margin-bottom: 25px;

    background: var(--asili-gold);
}


.category-kicker {
    display: block;

    margin-bottom: 18px;

    color: var(--asili-milk);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .24em;

    text-transform: uppercase;
}


.category-hero h1 {
    max-width: 1100px;

    margin: 0;

    color: var(--asili-white);

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

    font-size: clamp(
        58px,
        9vw,
        118px
    );

    font-weight: 700;

    line-height: .88;

    letter-spacing: -.055em;
}


.category-hero p {
    max-width: 760px;

    margin: 28px 0 0;

    color:
        rgba(228, 214, 197, .88);

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   CONTENT
   ========================================================= */

.category-content {
    background:
        var(--asili-bg);
}


.category-content > .container {
    width: min(
        1240px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        82px
        0
        110px;
}


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

.latest-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 42px;

    padding-bottom: 25px;

    border-bottom:
        1px solid var(--asili-line);
}


.section-kicker {
    display: block;

    margin-bottom: 9px;

    color: var(--asili-gold-light);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.latest-header h2 {
    max-width: 760px;

    margin: 0;

    color: var(--asili-milk);

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

    font-size: clamp(
        34px,
        5vw,
        58px
    );

    line-height: .98;

    letter-spacing: -.035em;
}


.category-count {
    flex-shrink: 0;

    display: flex;

    align-items: baseline;

    gap: 8px;

    color: var(--asili-muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.category-count strong {
    color: var(--asili-milk);

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

    font-size: 34px;

    line-height: 1;
}


/* =========================================================
   LEAD STORY
   ========================================================= */

.lead-story {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(320px, .8fr);

    min-height: 520px;

    margin-bottom: 30px;

    background:
        var(--asili-green);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .18);
}


.lead-story__media {
    position: relative;

    display: block;

    min-height: 520px;

    overflow: hidden;

    background:
        var(--asili-green-deep);
}


.lead-story__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}


.lead-story:hover
.lead-story__media img {
    transform: scale(1.035);
}


.lead-story__frame {
    position: absolute;

    inset: 18px;

    border:
        1px solid
        rgba(228, 214, 197, .55);

    pointer-events: none;
}


.lead-story__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        58px
        50px;
}


.story-label {
    display: inline-block;

    margin-bottom: 17px;

    color: var(--asili-gold-light);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.lead-story h3 {
    margin: 0;
}


.lead-story h3 a {
    color: var(--asili-milk);

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

    font-size: clamp(
        36px,
        4vw,
        60px
    );

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.04em;

    text-decoration: none;
}


.lead-story h3 a:hover {
    color: var(--asili-white);
}


.lead-story p {
    margin: 24px 0 0;

    color:
        rgba(228, 214, 197, .74);

    font-size: 15px;

    line-height: 1.75;
}


.story-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 28px;

    color: var(--asili-muted);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.story-meta span {
    position: relative;

    padding-left: 16px;
}


.story-meta span::before {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    left: 0;
    top: 50%;

    transform:
        translateY(-50%);

    background:
        var(--asili-gold);
}


/* =========================================================
   SECONDARY STORIES
   ========================================================= */

.secondary-stories {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px;

    margin-bottom: 76px;
}


.secondary-story {
    display: grid;

    grid-template-columns:
        43% 1fr;

    min-height: 245px;

    background:
        var(--asili-green);

    border-top:
        3px solid var(--asili-gold);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.secondary-story:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, .18);
}


.secondary-story__image {
    display: block;

    min-height: 245px;

    overflow: hidden;

    background:
        var(--asili-green-deep);
}


.secondary-story__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease;
}


.secondary-story:hover
.secondary-story__image img {
    transform:
        scale(1.06);
}


.secondary-story__body {
    padding:
        30px 28px;
}


.secondary-story h3 {
    margin: 0;
}


.secondary-story h3 a {
    color: var(--asili-milk);

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

    font-size: 27px;

    line-height: 1.04;

    letter-spacing: -.025em;

    text-decoration: none;
}


.secondary-story h3 a:hover {
    color: var(--asili-white);
}


.secondary-story p {
    margin: 14px 0 0;

    color:
        rgba(228, 214, 197, .66);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   MORE STORIES DIVIDER
   ========================================================= */

.stories-divider {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 34px;
}


.stories-divider::before,
.stories-divider::after {
    content: "";

    height: 1px;

    background:
        var(--asili-line);
}


.stories-divider::before {
    width: 42px;
}


.stories-divider::after {
    flex: 1;
}


.stories-divider span {
    color: var(--asili-gold-light);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* =========================================================
   STORY GRID
   ========================================================= */

.story-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 45px 28px;
}


/* =========================================================
   STANDARD STORY CARD
   ========================================================= */

.story-card {
    min-width: 0;

    overflow: hidden;

    background:
        var(--asili-paper);

    color:
        var(--asili-green);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.story-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, .2);
}


.story-card__image {
    position: relative;

    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        var(--asili-green);
}


.story-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1);
}


.story-card:hover
.story-card__image img {
    transform:
        scale(1.055);
}


.story-card__body {
    padding:
        25px 26px 27px;
}


.story-card__type {
    display: block;

    margin-bottom: 10px;

    color: var(--asili-gold);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.story-card__title {
    margin: 0;
}


.story-card__title a {
    color: var(--asili-green);

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

    font-size: 29px;

    line-height: 1.04;

    letter-spacing: -.025em;

    text-decoration: none;
}


.story-card__title a:hover {
    color: var(--asili-gold);
}


.story-card__excerpt {
    margin: 14px 0 0;

    color:
        rgba(53, 53, 31, .72);

    font-size: 13px;

    line-height: 1.65;
}


.story-card__meta {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 19px;

    color:
        rgba(53, 53, 31, .58);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.story-card__meta span {
    position: relative;

    padding-left: 13px;
}


.story-card__meta span::before {
    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    left: 0;
    top: 50%;

    transform:
        translateY(-50%);

    background:
        var(--asili-gold);
}


/* =========================================================
   IMAGE FALLBACK
   ========================================================= */

.story-image-fallback {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--asili-green),
            var(--asili-green-deep)
        );

    color:
        rgba(228, 214, 197, .72);

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

    font-size: 26px;

    letter-spacing: .2em;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-state {
    padding:
        100px 30px;

    text-align: center;

    background:
        var(--asili-green);

    border-top:
        4px solid var(--asili-gold);
}


.empty-state__mark {
    margin-bottom: 18px;

    color:
        var(--asili-gold-light);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .3em;
}


.empty-state h2 {
    margin: 0;

    color: var(--asili-milk);

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

    font-size: 46px;
}


.empty-state p {
    max-width: 520px;

    margin:
        15px auto 30px;

    color:
        rgba(228, 214, 197, .7);

    line-height: 1.7;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn-primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        0 24px;

    background:
        var(--asili-gold);

    color:
        var(--asili-white);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}


.btn-primary:hover {
    background:
        var(--asili-gold-light);

    color:
        var(--asili-white);

    transform:
        translateY(-2px);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 75px;

    padding-top: 25px;

    border-top:
        1px solid var(--asili-line);
}


.pagination__numbers {
    display: flex;

    gap: 6px;
}


.pagination__number,
.pagination__previous,
.pagination__next {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    padding:
        0 13px;

    background:
        transparent;

    color:
        var(--asili-milk);

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

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .08em;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.pagination__number:hover,
.pagination__previous:hover,
.pagination__next:hover {
    background:
        var(--asili-gold);

    border-color:
        var(--asili-gold);

    color:
        var(--asili-white);
}


.pagination__number.is-active {
    background:
        var(--asili-milk);

    border-color:
        var(--asili-milk);

    color:
        var(--asili-green);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

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


    .lead-story__media {
        min-height: 460px;
    }


    .lead-story__content {
        padding:
            45px;
    }


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

}


/* =========================================================
   TABLET / SMALL
   ========================================================= */

@media (max-width: 850px) {

    .story-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .category-hero {
        min-height: 580px;
    }

}


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

@media (max-width: 600px) {

    .category-hero {
        min-height: 500px;
    }


    .category-hero__inner,
    .category-content > .container {
        width:
            calc(100% - 30px);
    }


    .category-hero__inner {
        padding:
            120px
            0
            42px;
    }


    .category-hero h1 {
        font-size:
            clamp(50px, 17vw, 78px);
    }


    .category-hero p {
        font-size: 15px;
    }


    .category-content > .container {
        padding:
            55px
            0
            75px;
    }


    .latest-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 15px;
    }


    .latest-header h2 {
        font-size: 38px;
    }


    .category-count {
        padding-top: 5px;
    }


    .lead-story {
        margin-bottom: 24px;
    }


    .lead-story__media {
        min-height:
            330px;
    }


    .lead-story__frame {
        inset: 12px;
    }


    .lead-story__content {
        padding:
            34px 25px 38px;
    }


    .lead-story h3 a {
        font-size: 38px;
    }


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


    .secondary-story__image {
        min-height:
            230px;
    }


    .secondary-story__body {
        padding:
            25px;
    }


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

        gap: 28px;
    }


    .story-card__title a {
        font-size: 28px;
    }


    .pagination {
        flex-wrap: wrap;

        justify-content:
            center;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .lead-story,
    .lead-story__media img,
    .secondary-story,
    .secondary-story__image img,
    .story-card,
    .story-card__image img,
    .btn-primary {
        transition: none;
    }

}