/* =========================================================
   T&D SET ARTICLE
========================================================= */

.td-set-page {
    margin: 0;
    padding: 0;

    background: #fff4f7;

    color: #171313;
}


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

.td-article-header {
    width: 100%;

    padding:
        32px 24px
        48px;

    background: #fff4f7;

    box-sizing: border-box;
}


.td-article-header-inner {
    width: 100%;

    max-width: 660px;

    margin: 0 auto;
}


.td-article-category {
    margin-bottom: 14px;

    font-size: 14px;

    line-height: 1.4;

    color: #817773;
}


.td-article-header h1 {
    margin: 0 0 24px;

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

    font-size:
        clamp(46px, 5vw, 62px);

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -0.025em;

    color: #171313;
}


.td-article-intro {
    max-width: 650px;

    margin: 0;

    font-size: 17px;

    line-height: 1.65;

    color: #383331;
}


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

.td-hero-image {
    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    overflow: hidden;
}


.td-hero-image img { 
    display: block; 

    width: 100%; 
    height: auto; 

    object-fit: cover;

    transform: scale(1);

    animation: tdHeroZoom 8s ease-in-out infinite;
}


/* =========================================================
   HERO IMAGE - SLOW ZOOM IN / ZOOM OUT
========================================================= */

@keyframes tdHeroZoom {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}


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

.td-article-content {
    width: 100%;

    max-width: 592px;

    margin: 0 auto;

    padding:
        64px 0
        80px;

    box-sizing: border-box;
}


.td-article-content p {
    margin:
        0 0 42px;

    font-size: 18px;

    line-height: 1.55;

    color: #201c1b;
}


.td-article-content h2 {
    margin:
        52px 0
        20px;

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

    font-size: 28px;

    line-height: 1.25;

    font-weight: 400;

    color: #171313;
}


/* =========================================================
   BACK TO DISCOVER
========================================================= */

.td-article-back {
    margin-top: 72px;

    padding-top: 38px;

    border-top:
        1px solid
        rgba(23, 19, 19, 0.12);
}


.td-article-back a {
    display: inline-block;

    color: #756b68;

    text-decoration: none;

    font-size: 14px;

    transition:
        color 0.2s ease;
}


.td-article-back a:hover {
    color: #171313;
}


/* =========================================================
   MORE FROM JOURNAL
   FULL WIDTH
========================================================= */

.td-more-journal {
    width: 100vw;

    max-width: none;

    margin-left: 50%;

    transform: translateX(-50%);

    padding:
        72px 5vw
        100px;

    background: #fbf5ef;

    box-sizing: border-box;
}


.td-more-journal-inner {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   TITLE
========================================================= */

.td-more-journal-inner > h2 {
    margin:
        0 0 32px;

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

    font-size: 27px;

    line-height: 1.2;

    font-weight: 400;

    color: #171313;
}


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

.td-journal-grid {
    width: 100%;

    display: grid;

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

    gap: 32px;
}


/* =========================================================
   CARD
========================================================= */

.td-journal-card {
    width: 100%;

    min-width: 0;
}


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

.td-journal-image {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #eee8e5;
}


.td-journal-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}


.td-journal-image:hover img {
    transform: scale(1.03);
}


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

.td-journal-content {
    padding-top: 14px;
}


.td-journal-category {
    margin-bottom: 8px;

    font-size: 12px;

    line-height: 1.4;

    color: #817773;
}


.td-journal-content h3 {
    margin:
        0 0 10px;

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

    font-size: 19px;

    line-height: 1.3;

    font-weight: 400;

    color: #171313;
}


.td-journal-content p {
    margin:
        0 0 15px;

    font-size: 14px;

    line-height: 1.65;

    color: #625b58;
}


/* =========================================================
   READ STORY
========================================================= */

.td-journal-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #625b58;

    text-decoration: none;

    font-size: 13px;
}


.td-journal-link span {
    transition:
        transform 0.2s ease;
}


.td-journal-link:hover {
    color: #171313;
}


.td-journal-link:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 700px) {

    .td-article-header {
        padding:
            30px
            20px
            42px;
    }


    .td-article-header h1 {
        font-size: 42px;
    }


    .td-article-intro {
        font-size: 16px;
    }


    .td-article-content {
        padding:
            48px
            24px
            70px;
    }


    .td-article-content p {
        font-size: 17px;

        line-height: 1.6;
    }


    .td-article-content h2 {
        font-size: 26px;
    }


    .td-more-journal {
        width: 100%;

        margin-left: 0;

        transform: none;

        padding:
            55px
            20px
            70px;
    }


    .td-journal-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}