/* =========================================================
   ECOARC-STUDIO — Journal
   ========================================================= */

.journal-page {
    --journal-ink: #171717;
    --journal-muted: #737373;
    --journal-line: #dcdcdc;
    --journal-paper: #f7f7f5;
    --journal-white: #ffffff;
    --journal-dark: #171717;

    width: 100%;
    min-width: 0;
    overflow: hidden;

    background: var(--journal-paper);
    color: var(--journal-ink);

    direction: ltr;
    text-align: left;
}

.journal-container {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.journal-page a {
    color: inherit;
    text-decoration: none;
}

.journal-page img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.journal-page h1,
.journal-page h2,
.journal-page h3,
.journal-page p {
    margin-block-start: 0;
}

.journal-page h1,
.journal-page h2,
.journal-page h3,
.journal-page p {
    overflow-wrap: break-word;
}


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

.journal-hero {
    padding-block: 150px 110px;
    border-block-end: 1px solid var(--journal-line);
}

.journal-hero-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr);
    column-gap: 80px;
    align-items: start;
}

.journal-hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding-block-start: 10px;

    color: var(--journal-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-hero-count {
    font-variant-numeric: tabular-nums;
}

.journal-hero-content {
    max-width: 1000px;
}

.journal-hero-title {
    max-width: 950px;
    margin-block-end: 38px;

    font-size: clamp(52px, 7vw, 108px);
    line-height: 0.94;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.journal-hero-description {
    max-width: 620px;
    margin-block-end: 0;

    color: var(--journal-muted);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
}


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

.journal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-block-end: 18px;

    border-block-end: 1px solid var(--journal-line);

    color: var(--journal-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-section-count {
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   FEATURED ARTICLE
   ========================================================= */

.journal-featured {
    padding-block: 100px 120px;
}

.journal-featured-card {
    margin-block-start: 28px;
}

.journal-featured-link {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    min-width: 0;
}

.journal-featured-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;

    background: #e9e9e7;
}

.journal-featured-image img {
    height: 100%;
    object-fit: cover;

    transition:
        transform 700ms cubic-bezier(0.2, 0.65, 0.25, 1);
}

.journal-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;

    padding: 42px 0 42px 52px;
}

.journal-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;

    color: var(--journal-muted);
    font-size: 10px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.journal-featured-title {
    max-width: 650px;
    margin-block: 70px 24px;

    font-size: clamp(38px, 4.5vw, 68px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.journal-featured-excerpt {
    max-width: 560px;
    margin-block-end: 40px;

    color: var(--journal-muted);
    font-size: 16px;
    line-height: 1.7;
}

.journal-read-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.journal-read-link span:last-child {
    font-size: 16px;

    transition:
        transform 300ms ease;
}

.journal-featured-link:hover .journal-featured-image img {
    transform: scale(1.035);
}

.journal-featured-link:hover .journal-read-link span:last-child {
    transform: translate(3px, -3px);
}


/* =========================================================
   ARTICLE LIST
   ========================================================= */

.journal-list-section {
    padding-block: 0 130px;
}

.journal-list {
    border-block-end: 1px solid var(--journal-line);
}

.journal-article {
    border-block-end: 1px solid var(--journal-line);
}

.journal-article:last-child {
    border-block-end: 0;
}

.journal-article-link {
    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        minmax(260px, 0.42fr)
        34px;

    grid-template-areas:
        "number content image arrow";

    column-gap: 32px;
    align-items: center;

    min-width: 0;

    padding-block: 30px;

    transition:
        opacity 250ms ease;
}

.journal-article-number {
    grid-area: number;

    align-self: start;

    padding-block-start: 5px;

    color: var(--journal-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.journal-article-content {
    grid-area: content;
    min-width: 0;
}

.journal-article-content .journal-article-meta {
    margin-block-end: 18px;
}

.journal-article-title {
    margin-block-end: 12px;

    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.journal-article-excerpt {
    max-width: 620px;
    margin-block-end: 0;

    color: var(--journal-muted);
    font-size: 14px;
    line-height: 1.65;
}

.journal-article-image {
    grid-area: image;

    aspect-ratio: 4 / 3;
    overflow: hidden;

    background: #e9e9e7;
}

.journal-article-image img {
    height: 100%;
    object-fit: cover;

    transition:
        transform 600ms cubic-bezier(0.2, 0.65, 0.25, 1);
}

.journal-article-arrow {
    grid-area: arrow;

    justify-self: end;

    font-size: 18px;

    transition:
        transform 300ms ease;
}

.journal-article-link:hover .journal-article-image img {
    transform: scale(1.04);
}

.journal-article-link:hover .journal-article-arrow {
    transform: translate(3px, -3px);
}


/* =========================================================
   STATEMENT
   ========================================================= */

.journal-statement {
    padding-block: 150px;

    background: var(--journal-dark);
    color: var(--journal-white);
}

.journal-statement-label {
    display: block;

    margin-block-end: 70px;

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

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-statement-text {
    max-width: 1050px;
    margin-block-end: 0;

    font-size: clamp(34px, 5vw, 72px);
    line-height: 1.02;
    font-weight: 400;
    letter-spacing: -0.045em;
}


/* =========================================================
   CONTACT
   ========================================================= */

.journal-contact {
    padding-block: 110px 130px;
}

.journal-contact-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;

    padding-block-end: 28px;

    border-block-end: 1px solid var(--journal-line);
}

.journal-contact-content {
    min-width: 0;
}

.journal-contact-content .journal-section-label {
    display: block;

    margin-block-end: 28px;

    color: var(--journal-muted);

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-contact-title {
    margin-block-end: 0;

    font-size: clamp(38px, 5vw, 72px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.journal-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    flex: 0 0 auto;

    padding-block: 12px;

    font-size: 13px;
    font-weight: 500;

    border-block-end: 1px solid currentColor;

    transition:
        opacity 200ms ease;
}

.journal-contact-link span:last-child {
    font-size: 17px;

    transition:
        transform 300ms ease;
}

.journal-contact-link:hover {
    opacity: 0.65;
}

.journal-contact-link:hover span:last-child {
    transform: translate(3px, -3px);
}


/* =========================================================
   RTL / LTR
   ========================================================= */

[dir="ltr"] .journal-page {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .journal-page {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .journal-hero-title,
[dir="rtl"] .journal-featured-title,
[dir="rtl"] .journal-article-title,
[dir="rtl"] .journal-statement-text,
[dir="rtl"] .journal-contact-title {
    letter-spacing: 0;
}

[dir="rtl"] .journal-featured-content {
    padding-inline: 52px 0;
}

[dir="rtl"] .journal-article-arrow {
    justify-self: start;
}

[dir="rtl"] .journal-read-link span:last-child,
[dir="rtl"] .journal-contact-link span:last-child {
    transform: scaleX(-1);
}

[dir="rtl"] .journal-featured-link:hover .journal-read-link span:last-child,
[dir="rtl"] .journal-contact-link:hover span:last-child {
    transform: scaleX(-1) translate(3px, -3px);
}


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

@media (max-width: 991.98px) {

    .journal-container {
        width: min(100% - 48px, 1320px);
    }

    .journal-hero {
        padding-block: 125px 90px;
    }

    .journal-hero-grid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .journal-hero-meta {
        max-width: 100%;
    }

    .journal-hero-title {
        font-size: clamp(48px, 9vw, 82px);
    }

    .journal-featured {
        padding-block: 80px 100px;
    }

    .journal-featured-link {
        grid-template-columns: 1fr;
    }

    .journal-featured-image {
        aspect-ratio: 16 / 9;
    }

    .journal-featured-content {
        padding: 35px 0 0;
    }

    [dir="rtl"] .journal-featured-content {
        padding-inline: 0;
    }

    .journal-featured-title {
        margin-block: 45px 22px;
    }

    .journal-article-link {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            minmax(210px, 0.4fr)
            28px;

        column-gap: 22px;
    }

    .journal-statement {
        padding-block: 110px;
    }

    .journal-contact {
        padding-block: 90px 110px;
    }

    .journal-contact-inner {
        align-items: flex-start;
    }

}


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

@media (max-width: 767.98px) {

    .journal-container {
        width: min(100% - 32px, 1320px);
    }

    .journal-hero {
        padding-block: 110px 70px;
    }

    .journal-hero-grid {
        row-gap: 38px;
    }

    .journal-hero-meta {
        font-size: 10px;
    }

    .journal-hero-title {
        margin-block-end: 28px;

        font-size: clamp(43px, 13vw, 64px);
        line-height: 0.97;
    }

    .journal-hero-description {
        max-width: 100%;

        font-size: 15px;
        line-height: 1.65;
    }


    /* Featured */

    .journal-featured {
        padding-block: 65px 80px;
    }

    .journal-section-header {
        font-size: 9px;
    }

    .journal-featured-card {
        margin-block-start: 20px;
    }

    .journal-featured-image {
        aspect-ratio: 4 / 3;
    }

    .journal-featured-content {
        padding-block-start: 26px;
    }

    .journal-article-meta {
        gap: 6px 15px;

        font-size: 9px;
    }

    .journal-featured-title {
        margin-block: 35px 18px;

        font-size: clamp(34px, 10vw, 48px);
        line-height: 1;
    }

    .journal-featured-excerpt {
        margin-block-end: 28px;

        font-size: 14px;
        line-height: 1.65;
    }


    /* Article list */

    .journal-list-section {
        padding-block-end: 85px;
    }

    .journal-list {
        margin-block-start: 0;
    }

    .journal-article-link {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            26px;

        grid-template-areas:
            "number content arrow"
            ". image image";

        column-gap: 14px;
        row-gap: 22px;

        padding-block: 28px;
    }

    .journal-article-number {
        font-size: 10px;
    }

    .journal-article-content .journal-article-meta {
        margin-block-end: 13px;
    }

    .journal-article-title {
        margin-block-end: 10px;

        font-size: clamp(25px, 8vw, 36px);
        line-height: 1.03;
    }

    .journal-article-excerpt {
        font-size: 13px;
        line-height: 1.6;
    }

    .journal-article-image {
        aspect-ratio: 16 / 10;
    }

    .journal-article-arrow {
        align-self: start;

        font-size: 16px;
    }


    /* Statement */

    .journal-statement {
        padding-block: 85px;
    }

    .journal-statement-label {
        margin-block-end: 45px;

        font-size: 9px;
    }

    .journal-statement-text {
        font-size: clamp(32px, 9.5vw, 48px);
        line-height: 1.04;
    }


    /* Contact */

    .journal-contact {
        padding-block: 75px 90px;
    }

    .journal-contact-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 45px;
    }

    .journal-contact-content .journal-section-label {
        margin-block-end: 22px;
    }

    .journal-contact-title {
        font-size: clamp(36px, 10vw, 52px);
    }

    .journal-contact-link {
        font-size: 12px;
    }

}


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

@media (max-width: 420px) {

    .journal-container {
        width: calc(100% - 28px);
    }

    .journal-hero {
        padding-block: 100px 60px;
    }

    .journal-hero-title {
        font-size: 42px;
    }

    .journal-featured-title {
        font-size: 34px;
    }

    .journal-article-link {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            22px;

        column-gap: 10px;
    }

    .journal-article-title {
        font-size: 25px;
    }

    .journal-article-excerpt {
        font-size: 12px;
    }

}


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

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

    .journal-page *,
    .journal-page *::before,
    .journal-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}