/* =========================================================
   AURELIA JEWELLERY
   JOURNAL + ARTICLE

   File:
   assets/css/asareh-journal.css
========================================================= */


/* =========================================================
   01. ROOT
========================================================= */

.asareh-blog-page,
.asareh-article-page {

    --asareh-journal-dark:
        #1c130d;

    --asareh-journal-brown:
        #4d3622;

    --asareh-journal-bronze:
        #906f56;

    --asareh-journal-champagne:
        #ccb299;

    --asareh-journal-cream:
        #e7dcd0;

    --asareh-journal-ivory:
        #f7f2ec;

    --asareh-journal-surface:
        #fbf8f4;

    --asareh-journal-border:
        rgba(77, 54, 34, 0.14);

    --asareh-journal-muted:
        rgba(28, 19, 13, 0.56);

    background:
        var(--asareh-journal-ivory);

    color:
        var(--asareh-journal-dark);
}


/* =========================================================
   02. BLOG HERO
========================================================= */

.asareh-journal-hero {

    position:
        relative;

    display:
        flex;

    min-height:
        72vh;

    min-height:
        72svh;

    align-items:
        flex-end;

    overflow:
        hidden;

    background:
        var(--asareh-journal-dark);

    color:
        #fff;
}


.asareh-journal-hero__media {

    position:
        absolute;

    inset:
        0;
}


.asareh-journal-hero__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.asareh-journal-hero__overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 12, 8, 0.94) 0%,
            rgba(18, 12, 8, 0.72) 38%,
            rgba(18, 12, 8, 0.30) 72%,
            rgba(18, 12, 8, 0.18) 100%
        );
}


.asareh-journal-hero__inner {

    position:
        relative;

    z-index:
        2;

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;

    padding:
        190px 0 78px;
}


.asareh-journal-hero
.asareh-breadcrumb {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        28px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        10px;
}


.asareh-journal-hero
.asareh-breadcrumb a {

    color:
        rgba(255, 255, 255, 0.58);
}


.asareh-journal-hero
.asareh-breadcrumb
[aria-current="page"] {

    color:
        var(--asareh-journal-champagne);
}


.asareh-journal-hero
.asareh-eyebrow {

    color:
        var(--asareh-journal-champagne);
}


.asareh-journal-hero__title {

    max-width:
        900px;

    margin:
        18px 0 24px;

    color:
        #fff;

    font-size:
        clamp(52px, 6vw, 88px);

    font-weight:
        400;

    line-height:
        1.15;
}


.asareh-journal-hero__title span {

    display:
        block;

    color:
        var(--asareh-journal-champagne);
}


.asareh-journal-hero__description {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.66);

    font-size:
        12px;

    line-height:
        2.1;
}


/* =========================================================
   03. BLOG MAIN
========================================================= */

.asareh-journal {

    padding:
        105px 0 145px;

    background:
        var(--asareh-journal-ivory);
}


.asareh-journal__inner {

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


/* =========================================================
   04. BLOG TOOLBAR
========================================================= */

.asareh-journal-toolbar {

    display:
        flex;

    margin-bottom:
        48px;

    padding-bottom:
        28px;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    border-bottom:
        1px solid
        var(--asareh-journal-border);
}


.asareh-journal-toolbar__title {

    margin:
        14px 0 0;

    color:
        var(--asareh-journal-dark);

    font-size:
        clamp(34px, 3.5vw, 52px);

    font-weight:
        400;
}


.asareh-journal-toolbar__meta {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--asareh-journal-muted);

    font-size:
        9px;
}


/* =========================================================
   05. BLOG FILTERS
========================================================= */

.asareh-journal-filter {

    display:
        flex;

    gap:
        8px;

    overflow-x:
        auto;

    scrollbar-width:
        none;
}


.asareh-journal-filter::-webkit-scrollbar {

    display:
        none;
}


.asareh-journal-filter__button {

    min-height:
        42px;

    padding:
        0 18px;

    flex:
        0 0 auto;

    color:
        var(--asareh-journal-muted);

    background:
        transparent;

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

    font-size:
        9px;
}


.asareh-journal-filter__button:hover,
.asareh-journal-filter__button.is-active {

    color:
        #fff;

    background:
        var(--asareh-journal-dark);

    border-color:
        var(--asareh-journal-dark);
}


/* =========================================================
   06. FEATURED
========================================================= */

.asareh-journal-featured {

    display:
        grid;

    min-height:
        620px;

    margin-bottom:
        90px;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(360px, 0.75fr);

    background:
        var(--asareh-journal-dark);

    color:
        #fff;
}


.asareh-journal-featured__media {

    overflow:
        hidden;
}


.asareh-journal-featured__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.asareh-journal-featured__content {

    display:
        flex;

    padding:
        64px;

    flex-direction:
        column;

    justify-content:
        center;
}


.asareh-journal-featured__category {

    margin-bottom:
        20px;

    color:
        var(--asareh-journal-champagne);

    font-size:
        9px;

    letter-spacing:
        0.12em;
}


.asareh-journal-featured__title {

    margin:
        0 0 24px;

    color:
        #fff;

    font-size:
        clamp(38px, 4vw, 58px);

    font-weight:
        400;

    line-height:
        1.45;
}


.asareh-journal-featured__description {

    margin:
        0 0 28px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size:
        11px;

    line-height:
        2.1;
}


.asareh-journal-featured__meta {

    display:
        flex;

    margin-bottom:
        30px;

    flex-wrap:
        wrap;

    gap:
        8px 18px;

    color:
        rgba(255, 255, 255, 0.44);

    font-size:
        9px;
}


/* =========================================================
   07. BLOG GRID
========================================================= */

.asareh-journal-grid {

    display:
        grid;

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

    gap:
        60px 24px;
}


/* =========================================================
   08. ARTICLE CARD
========================================================= */

.asareh-journal-card {

    min-width:
        0;
}


.asareh-journal-card[hidden] {

    display:
        none;
}


.asareh-journal-card__media {

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        var(--asareh-journal-cream);
}


.asareh-journal-card__media a {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


.asareh-journal-card__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        650ms
        cubic-bezier(.16, 1, .3, 1);
}


.asareh-journal-card__content {

    padding:
        20px 2px 0;
}


.asareh-journal-card__category {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--asareh-journal-bronze);

    font-size:
        8px;

    letter-spacing:
        0.12em;
}


.asareh-journal-card h2,
.asareh-journal-card h3 {

    margin:
        0 0 12px;

    color:
        var(--asareh-journal-dark);

    font-size:
        20px;

    font-weight:
        400;

    line-height:
        1.7;
}


.asareh-journal-card h2 a,
.asareh-journal-card h3 a {

    color:
        inherit;
}


.asareh-journal-card__description {

    margin:
        0 0 16px;

    color:
        var(--asareh-journal-muted);

    font-size:
        10px;

    line-height:
        2;
}


.asareh-journal-card__meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px 16px;

    color:
        var(--asareh-journal-muted);

    font-size:
        8px;
}


/* =========================================================
   09. EMPTY
========================================================= */

.asareh-journal-empty {

    display:
        none;

    padding:
        100px 20px;

    text-align:
        center;

    border-top:
        1px solid
        var(--asareh-journal-border);

    border-bottom:
        1px solid
        var(--asareh-journal-border);
}


.asareh-journal-empty.is-visible {

    display:
        block;
}


.asareh-journal-empty h2 {

    margin:
        0 0 12px;

    font-size:
        30px;

    font-weight:
        400;
}


.asareh-journal-empty p {

    margin:
        0;

    color:
        var(--asareh-journal-muted);

    font-size:
        10px;
}


/* =========================================================
   10. ARTICLE HERO
========================================================= */

.asareh-article-hero {

    padding:
        165px 0 76px;

    background:
        var(--asareh-journal-dark);

    color:
        #fff;
}


.asareh-article-hero__inner {

    width:
        min(1080px, calc(100% - 96px));

    margin:
        0 auto;
}


.asareh-article-hero
.asareh-breadcrumb {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        36px;

    color:
        rgba(255, 255, 255, 0.46);

    font-size:
        9px;
}


.asareh-article-hero
.asareh-breadcrumb a {

    color:
        rgba(255, 255, 255, 0.58);
}


.asareh-article-hero__category {

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--asareh-journal-champagne);

    font-size:
        9px;

    letter-spacing:
        0.12em;
}


.asareh-article-hero__title {

    max-width:
        1000px;

    margin:
        0 0 28px;

    color:
        #fff;

    font-size:
        clamp(46px, 5.5vw, 78px);

    font-weight:
        400;

    line-height:
        1.38;
}


.asareh-article-hero__lead {

    max-width:
        760px;

    margin:
        0 0 30px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size:
        13px;

    line-height:
        2.1;
}


.asareh-article-hero__meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px 22px;

    color:
        rgba(255, 255, 255, 0.46);

    font-size:
        9px;
}


/* =========================================================
   11. ARTICLE COVER
========================================================= */

.asareh-article-cover {

    width:
        min(1440px, calc(100% - 96px));

    margin:
        70px auto 0;

    aspect-ratio:
        16 / 8;

    overflow:
        hidden;

    background:
        var(--asareh-journal-cream);
}


.asareh-article-cover img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   12. ARTICLE BODY
========================================================= */

.asareh-article {

    padding:
        100px 0 140px;

    background:
        var(--asareh-journal-surface);
}


.asareh-article__layout {

    display:
        grid;

    width:
        min(1200px, calc(100% - 96px));

    margin:
        0 auto;

    grid-template-columns:
        190px
        minmax(0, 760px);

    gap:
        70px;

    justify-content:
        center;

    align-items:
        start;
}


/* =========================================================
   13. SHARE
========================================================= */

.asareh-article-share {

    position:
        sticky;

    top:
        130px;
}


.asareh-article-share__label {

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--asareh-journal-muted);

    font-size:
        8px;
}


.asareh-article-share__actions {

    display:
        grid;

    gap:
        8px;
}


.asareh-article-share__button {

    min-height:
        44px;

    padding:
        0 14px;

    color:
        var(--asareh-journal-muted);

    background:
        transparent;

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

    font-size:
        9px;

    text-align:
        right;
}


.asareh-article-share__button:hover {

    color:
        #fff;

    background:
        var(--asareh-journal-dark);

    border-color:
        var(--asareh-journal-dark);
}


.asareh-article-share__message {

    display:
        block;

    min-height:
        24px;

    margin-top:
        9px;

    color:
        var(--asareh-journal-bronze);

    font-size:
        8px;
}


/* =========================================================
   14. ARTICLE TYPOGRAPHY
========================================================= */

.asareh-article-content {

    min-width:
        0;
}


.asareh-article-content > p {

    margin:
        0 0 28px;

    color:
        rgba(28, 19, 13, 0.72);

    font-size:
        14px;

    line-height:
        2.35;
}


.asareh-article-content > p:first-child {

    color:
        var(--asareh-journal-dark);

    font-size:
        17px;

    line-height:
        2.2;
}


.asareh-article-content h2 {

    margin:
        70px 0 26px;

    color:
        var(--asareh-journal-dark);

    font-size:
        clamp(30px, 3vw, 42px);

    font-weight:
        400;

    line-height:
        1.6;
}


.asareh-article-content h3 {

    margin:
        48px 0 20px;

    color:
        var(--asareh-journal-dark);

    font-size:
        24px;

    font-weight:
        400;
}


.asareh-article-content ul {

    margin:
        0 0 30px;

    padding:
        0 22px 0 0;

    color:
        rgba(28, 19, 13, 0.70);
}


.asareh-article-content li {

    margin-bottom:
        10px;

    font-size:
        13px;

    line-height:
        2;
}


.asareh-article-content blockquote {

    margin:
        58px 0;

    padding:
        38px 44px;

    color:
        var(--asareh-journal-dark);

    background:
        var(--asareh-journal-cream);

    border-right:
        3px solid
        var(--asareh-journal-bronze);

    font-size:
        clamp(24px, 3vw, 34px);

    line-height:
        1.9;
}


.asareh-article-content figure {

    margin:
        60px 0;
}


.asareh-article-content figure img {

    width:
        100%;

    display:
        block;
}


.asareh-article-content figcaption {

    margin-top:
        12px;

    color:
        var(--asareh-journal-muted);

    font-size:
        8px;
}


/* =========================================================
   15. ARTICLE FOOTER
========================================================= */

.asareh-article-footer {

    margin-top:
        70px;

    padding-top:
        30px;

    border-top:
        1px solid
        var(--asareh-journal-border);
}


.asareh-article-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.asareh-article-tag {

    padding:
        8px 12px;

    color:
        var(--asareh-journal-muted);

    background:
        transparent;

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

    font-size:
        8px;
}


/* =========================================================
   16. RELATED
========================================================= */

.asareh-journal-related {

    padding:
        110px 0 130px;

    background:
        var(--asareh-journal-ivory);
}


.asareh-journal-related__inner {

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


.asareh-journal-related__header {

    display:
        flex;

    margin-bottom:
        42px;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;
}


.asareh-journal-related__header h2 {

    margin:
        14px 0 0;

    font-size:
        clamp(34px, 3.5vw, 50px);

    font-weight:
        400;
}


/* =========================================================
   17. HOVER
========================================================= */

@media (hover: hover) {

    .asareh-journal-card:hover
    .asareh-journal-card__media img {

        transform:
            scale(1.045);
    }

}


/* =========================================================
   18. TABLET
========================================================= */

@media (
    min-width: 769px
) and (
    max-width: 1024px
) {

    .asareh-journal-hero__inner,
    .asareh-journal__inner,
    .asareh-article-cover,
    .asareh-article-hero__inner,
    .asareh-article__layout,
    .asareh-journal-related__inner {

        width:
            calc(100% - 48px);
    }


    .asareh-journal-featured {

        grid-template-columns:
            1fr 0.9fr;
    }


    .asareh-journal-featured__content {

        padding:
            42px;
    }


    .asareh-journal-grid {

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


    .asareh-article__layout {

        grid-template-columns:
            150px
            minmax(0, 1fr);

        gap:
            40px;
    }

}


/* =========================================================
   19. MOBILE
========================================================= */

@media (max-width: 768px) {

    .asareh-journal-hero {

        min-height:
            68vh;

        min-height:
            68dvh;
    }


    .asareh-journal-hero__inner {

        width:
            100%;

        padding:
            calc(
                118px +
                env(safe-area-inset-top)
            )
            18px
            54px;
    }


    .asareh-journal-hero__title {

        font-size:
            clamp(42px, 12vw, 58px);
    }


    .asareh-journal {

        padding:
            70px 0 105px;
    }


    .asareh-journal__inner {

        width:
            100%;

        padding:
            0 14px;
    }


    .asareh-journal-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .asareh-journal-filter {

        width:
            100%;
    }


    .asareh-journal-featured {

        display:
            flex;

        min-height:
            auto;

        margin-bottom:
            64px;

        flex-direction:
            column;
    }


    .asareh-journal-featured__media {

        aspect-ratio:
            4 / 3;
    }


    .asareh-journal-featured__content {

        padding:
            34px 22px 38px;
    }


    .asareh-journal-featured__title {

        font-size:
            32px;
    }


    .asareh-journal-grid {

        grid-template-columns:
            1fr;

        gap:
            54px;
    }


    /* Article */

    .asareh-article-hero {

        padding:
            calc(
                110px +
                env(safe-area-inset-top)
            )
            0
            54px;
    }


    .asareh-article-hero__inner {

        width:
            100%;

        padding:
            0 18px;
    }


    .asareh-article-hero__title {

        font-size:
            clamp(38px, 10.5vw, 54px);
    }


    .asareh-article-cover {

        width:
            calc(100% - 28px);

        margin-top:
            36px;

        aspect-ratio:
            4 / 3;
    }


    .asareh-article {

        padding:
            68px 0 96px;
    }


    .asareh-article__layout {

        display:
            flex;

        width:
            100%;

        padding:
            0 18px;

        flex-direction:
            column;

        gap:
            38px;
    }


    .asareh-article-share {

        position:
            static;

        width:
            100%;
    }


    .asareh-article-share__actions {

        display:
            flex;

        gap:
            8px;

        overflow-x:
            auto;
    }


    .asareh-article-share__button {

        min-width:
            max-content;

        flex:
            0 0 auto;
    }


    .asareh-article-content > p {

        font-size:
            13px;
    }


    .asareh-article-content > p:first-child {

        font-size:
            15px;
    }


    .asareh-article-content blockquote {

        margin:
            44px 0;

        padding:
            28px 22px;

        font-size:
            23px;
    }


    .asareh-journal-related {

        padding:
            82px 0 100px;
    }


    .asareh-journal-related__inner {

        width:
            100%;

        padding:
            0 14px;
    }


    .asareh-journal-related__header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =========================================================
   20. REDUCED MOTION
========================================================= */

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

    .asareh-journal-card__media img {

        transition:
            none !important;
    }

}


/* =========================================================
   21. PRINT
========================================================= */

@media print {

    .asareh-header,
    .asareh-footer,
    .asareh-app-nav,
    .asareh-journal-hero,
    .asareh-article-share,
    .asareh-journal-related {

        display:
            none !important;
    }


    .asareh-article {

        padding:
            0;
    }


    .asareh-article__layout {

        display:
            block;

        width:
            100%;
    }

}