/* ==========================================================================
   INDO NATURA EXPORTER
   ARTICLES.CSS
   PREMIUM GLASS EDITION
   PART 1
   GLOBAL • BACKGROUND • HERO
========================================================================== */


/* ==========================================================================
   VARIABLES
========================================================================== */

:root{

    --emerald:#39FF14;
    --emerald-soft:#5dff67;

    --gold:#BF953F;
    --gold-light:#F6E27A;

    --navy:#07131D;
    --navy2:#0B1C28;
    --navy3:#10293B;

    --white:#ffffff;
    --text:#dce6ea;
    --muted:#8ea1ab;

    --glass:
        rgba(255,255,255,.05);

    --glass2:
        rgba(255,255,255,.02);

    --border:
        rgba(255,255,255,.09);

}


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

.journal-page{

    position:relative;

    overflow:hidden;

    background:

        radial-gradient(
            circle at top left,
            rgba(57,255,20,.08),
            transparent 28%
        ),

        radial-gradient(
            circle at top right,
            rgba(191,149,63,.08),
            transparent 32%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(57,255,20,.04),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #061018 0%,
            #081722 30%,
            #0b1d2b 60%,
            #061018 100%
        );

}


/* ==========================================================================
   FLOATING LIGHTS
========================================================================== */

.journal-page::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-250px;

    top:200px;

    border-radius:50%;

    background:

        rgba(57,255,20,.06);

    filter:blur(120px);

    pointer-events:none;

}


.journal-page::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    top:600px;

    border-radius:50%;

    background:

        rgba(191,149,63,.05);

    filter:blur(120px);

    pointer-events:none;

}


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

.journal-intro{

    position:relative;

    padding:

        90px
        0
        55px;

    z-index:2;

}


/* ==========================================================================
   GLASS HERO BOX
========================================================================== */

.journal-masthead{

    position:relative;

    max-width:1150px;

    margin:auto;

    text-align:center;

    padding:

        70px
        50px;

    border-radius:34px;

    border:1px solid rgba(255,255,255,.09);

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.02)

        );

    backdrop-filter:

        blur(26px);

    -webkit-backdrop-filter:

        blur(26px);

    box-shadow:

        0 30px 90px rgba(0,0,0,.35),

        inset
        0 1px 0
        rgba(255,255,255,.08);

}


/* ==========================================================================
   GOLD LINE
========================================================================== */

.journal-masthead::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:220px;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--gold-light),

            transparent

        );

}


.journal-masthead::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

    border:1px solid

        rgba(191,149,63,.12);

    pointer-events:none;

}


/* ==========================================================================
   KICKER
========================================================================== */

.journal-kicker{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:

        10px
        24px;

    margin-bottom:25px;

    border-radius:50px;

    border:1px solid

        rgba(57,255,20,.25);

    background:

        rgba(57,255,20,.06);

    color:

        var(--emerald);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;

}


.journal-kicker::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:

        var(--emerald);

    box-shadow:

        0 0 15px
        var(--emerald);

}


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

.journal-masthead h1{

    margin:0;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:

        clamp(
            3.5rem,
            7vw,
            6.8rem
        );

    font-weight:700;

    line-height:.95;

    letter-spacing:3px;

    color:#fff;

    text-shadow:

        0 15px 40px
        rgba(0,0,0,.4);

}


.journal-masthead h1 span{

    background:

        linear-gradient(

            90deg,

            #BF953F,

            #FFF1A8,

            #BF953F

        );

    background-size:220%;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    animation:

        goldFlow
        6s linear infinite;

}


@keyframes goldFlow{

    from{

        background-position:0%;

    }

    to{

        background-position:220%;

    }

}


/* ==========================================================================
   DIVIDER
========================================================================== */

.journal-rule{

    width:220px;

    height:2px;

    margin:

        35px auto;

    border-radius:20px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--gold),

            var(--emerald),

            transparent

        );

}


/* ==========================================================================
   DESCRIPTION
========================================================================== */

.journal-masthead p{

    max-width:760px;

    margin:auto;

    color:var(--text);

    font-size:1rem;

    line-height:2;

    letter-spacing:.5px;

}


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

.hero-mini{

    display:flex;

    justify-content:center;

    gap:45px;

    flex-wrap:wrap;

    margin-top:45px;

}


.hero-mini div{

    padding:

        15px
        30px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:

        rgba(255,255,255,.03);

    backdrop-filter:blur(12px);

    transition:.35s;

}


.hero-mini div:hover{

    transform:translateY(-6px);

    border-color:

        rgba(57,255,20,.35);

    box-shadow:

        0 15px 35px
        rgba(57,255,20,.10);

}


.hero-mini h4{

    margin:0;

    color:var(--gold);

    font-size:1.6rem;

    font-weight:700;

}


.hero-mini span{

    display:block;

    margin-top:8px;

    color:var(--muted);

    font-size:.72rem;

    letter-spacing:1px;

}
/* ==========================================================================
   PART 2
   FEATURE STORY
========================================================================== */

.journal-feature{

    position:relative;

    padding:40px 0 90px;

    z-index:2;

}


/* ==========================================================================
   FEATURE CONTAINER
========================================================================== */

.feature-story{

    position:relative;

    max-width:1280px;

    margin:auto;

}


/* ==========================================================================
   GLASS FRAME
========================================================================== */

.feature-image{

    position:relative;

    min-height:700px;

    overflow:hidden;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.08);

    background:#061018;

    box-shadow:

        0 35px 90px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.05);

}


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

.feature-image img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform 1.5s ease,

        filter .6s;

}


.feature-story:hover .feature-image img{

    transform:scale(1.06);

    filter:saturate(1.05);

}


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

.feature-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(5,10,15,.10) 0%,
            rgba(5,10,15,.20) 30%,
            rgba(5,10,15,.60) 65%,
            rgba(5,10,15,.95) 100%
        ),

        linear-gradient(
            90deg,
            rgba(57,255,20,.06),
            transparent 40%,
            rgba(191,149,63,.06)
        );

}


/* ==========================================================================
   GOLD BORDER
========================================================================== */

.feature-image::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:

        linear-gradient(
            135deg,
            rgba(57,255,20,.35),
            rgba(255,255,255,.04),
            rgba(191,149,63,.35)
        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}


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

.feature-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:5;

    padding:65px;

}


/* ==========================================================================
   META
========================================================================== */

.article-meta{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}


.article-meta span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:

        10px
        22px;

    border-radius:50px;

    background:

        rgba(57,255,20,.10);

    border:1px solid rgba(57,255,20,.25);

    color:#39FF14;

    font-size:.68rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.article-meta span::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#39FF14;

    box-shadow:

        0 0 12px #39FF14;

}


.article-meta i{

    flex:1;

    height:1px;

    background:

        linear-gradient(
            90deg,
            rgba(191,149,63,.7),
            transparent
        );

}


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

.feature-content h2{

    max-width:900px;

    margin:0 0 22px;

    color:#fff;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:

        clamp(
            3rem,
            6vw,
            5.5rem
        );

    font-weight:700;

    line-height:.95;

    letter-spacing:-1px;

    text-shadow:

        0 15px 45px rgba(0,0,0,.45);

}


/* ==========================================================================
   DESCRIPTION
========================================================================== */

.feature-content p{

    max-width:760px;

    margin:0;

    color:#dbe4e8;

    font-size:1rem;

    line-height:1.9;

}


/* ==========================================================================
   FOOTER
========================================================================== */

.feature-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    max-width:820px;

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.12);

}


.feature-bottom>span{

    color:#9fb0b8;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


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

.feature-bottom a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:

        14px
        28px;

    border-radius:50px;

    background:

        linear-gradient(
            135deg,
            rgba(57,255,20,.16),
            rgba(57,255,20,.05)
        );

    border:1px solid rgba(57,255,20,.28);

    color:#39FF14;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

}


.feature-bottom a span{

    transition:.35s;

}


.feature-bottom a:hover{

    color:#07131D;

    background:#39FF14;

    box-shadow:

        0 15px 35px rgba(57,255,20,.30);

}


.feature-bottom a:hover span{

    transform:translateX(8px);

}


/* ==========================================================================
   PREMIUM BADGE
========================================================================== */

.feature-badge{

    position:absolute;

    top:35px;

    right:35px;

    z-index:8;

    padding:

        12px
        24px;

    border-radius:50px;

    background:

        linear-gradient(
            135deg,
            rgba(191,149,63,.18),
            rgba(191,149,63,.08)
        );

    border:1px solid rgba(191,149,63,.28);

    color:#F6E27A;

    font-size:.65rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    backdrop-filter:blur(18px);

}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media(max-width:992px){

    .feature-image{

        min-height:560px;

    }

    .feature-content{

        padding:45px;

    }

}


@media(max-width:768px){

    .feature-image{

        min-height:500px;

        border-radius:22px;

    }

    .feature-content{

        padding:28px;

    }

    .feature-content h2{

        font-size:2.7rem;

    }

    .feature-bottom{

        flex-direction:column;

        align-items:flex-start;

    }

}


@media(max-width:576px){

    .feature-image{

        min-height:460px;

    }

    .feature-content{

        padding:22px;

    }

    .feature-content h2{

        font-size:2.15rem;

    }

    .feature-content p{

        font-size:.82rem;

    }

}
/* ==========================================================================
   PART 3
   EDITORIAL SECTION
========================================================================== */

.journal-editorial{

    position:relative;

    padding:90px 0;

    z-index:2;

}


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

.editorial-grid{

    display:grid;

    grid-template-columns:
        minmax(340px,.95fr)
        minmax(420px,1.05fr);

    gap:65px;

    max-width:1280px;

    margin:auto;

}


/* ==========================================================================
   SECTION LABEL
========================================================================== */

.section-label{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:30px;

    color:var(--gold);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

}


.section-label span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    border:1px solid rgba(191,149,63,.30);

    background:

        rgba(191,149,63,.08);

    color:var(--gold);

    font-size:.75rem;

    box-shadow:

        0 0 20px rgba(191,149,63,.12);

}


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

.editor-card{

    overflow:hidden;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.08);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    box-shadow:

        0 25px 70px rgba(0,0,0,.30),

        inset 0 1px 0 rgba(255,255,255,.06);

    transition:.45s;

}


.editor-card:hover{

    transform:

        translateY(-8px);

    border-color:

        rgba(57,255,20,.25);

    box-shadow:

        0 35px 80px rgba(0,0,0,.35),

        0 0 30px rgba(57,255,20,.08);

}


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

.editor-image{

    position:relative;

    display:block;

    height:330px;

    overflow:hidden;

}


.editor-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform 1.2s ease;

}


.editor-card:hover .editor-image img{

    transform:scale(1.08);

}


.editor-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            transparent,

            rgba(5,15,20,.25),

            rgba(5,15,20,.75)

        );

}


/* ==========================================================================
   INFO
========================================================================== */

.editor-info{

    padding:34px;

}


/* ==========================================================================
   CATEGORY
========================================================================== */

.article-category{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:

        8px
        18px;

    margin-bottom:18px;

    border-radius:40px;

    background:

        rgba(57,255,20,.08);

    border:1px solid rgba(57,255,20,.22);

    color:var(--emerald);

    font-size:.62rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.article-category::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--emerald);

    box-shadow:

        0 0 12px var(--emerald);

}


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

.editor-info h3{

    margin:0 0 18px;

    color:#ffffff;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:2rem;

    line-height:1.2;

}


/* ==========================================================================
   TEXT
========================================================================== */

.editor-info p{

    margin:0;

    color:var(--muted);

    font-size:.90rem;

    line-height:1.9;

}


/* ==========================================================================
   FOOTER
========================================================================== */

.article-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:30px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.08);

}


.article-footer span{

    color:#90a3ad;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:1px;

}


.article-footer a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:

        12px
        24px;

    border-radius:50px;

    background:

        linear-gradient(
            135deg,
            rgba(191,149,63,.18),
            rgba(191,149,63,.06)
        );

    border:1px solid rgba(191,149,63,.25);

    color:var(--gold);

    font-size:.70rem;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:.35s;

}


.article-footer a:hover{

    background:var(--gold);

    color:#07131D;

    box-shadow:

        0 15px 35px rgba(191,149,63,.35);

}


/* ==========================================================================
   LATEST STORIES
========================================================================== */

.latest-stories{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/* ==========================================================================
   STORY ROW
========================================================================== */

.story-row{

    display:grid;

    grid-template-columns:150px 1fr;

    gap:22px;

    padding:18px;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.07);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(16px);

    transition:.35s;

}


.story-row:hover{

    transform:translateY(-5px);

    border-color:

        rgba(57,255,20,.25);

    box-shadow:

        0 18px 45px rgba(0,0,0,.25);

}


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

.story-image{

    width:150px;

    height:110px;

    overflow:hidden;

    border-radius:16px;

}


.story-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}


.story-row:hover .story-image img{

    transform:scale(1.08);

}


/* ==========================================================================
   STORY INFO
========================================================================== */

.story-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.story-info h3{

    margin:0 0 12px;

    color:#ffffff;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:1.2rem;

    line-height:1.4;

    transition:.3s;

}


.story-row:hover .story-info h3{

    color:var(--gold);

}


.story-meta{

    color:#8da0aa;

    font-size:.65rem;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.story-meta span{

    color:var(--emerald);

    margin:0 8px;

}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media(max-width:992px){

    .editorial-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

}


@media(max-width:768px){

    .story-row{

        grid-template-columns:110px 1fr;

    }

    .story-image{

        width:110px;

        height:85px;

    }

    .editor-info{

        padding:25px;

    }

}


@media(max-width:576px){

    .story-row{

        grid-template-columns:95px 1fr;

        gap:14px;

    }

    .story-image{

        width:95px;

        height:72px;

    }

    .story-info h3{

        font-size:.95rem;

    }

    .editor-info h3{

        font-size:1.6rem;

    }

}
/* ==========================================================================
   PART 4
   TRADE JOURNAL
   MAGAZINE GRID
========================================================================== */

.journal-section{

    position:relative;

    padding:95px 0;

    border-top:1px solid rgba(255,255,255,.05);

    z-index:2;

}


/* ==========================================================================
   SECTION HEADING
========================================================================== */

.journal-section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:60px;

    max-width:1280px;

    margin:0 auto 55px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(255,255,255,.08);

}


.journal-section-heading>div>span{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--gold);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

}


.journal-section-heading>div>span::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--emerald);

    box-shadow:

        0 0 15px var(--emerald);

}


.journal-section-heading h2{

    margin-top:12px;

    color:#ffffff;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:3.4rem;

    line-height:1.1;

}


.journal-section-heading h2 strong{

    color:var(--gold);

}


.journal-section-heading p{

    max-width:470px;

    color:var(--muted);

    font-size:.90rem;

    line-height:1.9;

}


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

.trade-grid{

    display:grid;

    grid-template-columns:

        1.4fr

        1fr

        1fr;

    gap:28px;

    max-width:1280px;

    margin:auto;

}


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

.magazine-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    border:1px solid rgba(255,255,255,.08);

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.02)

        );

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.28);

    transition:.45s;

}


.magazine-card:hover{

    transform:

        translateY(-10px);

    border-color:

        rgba(57,255,20,.22);

    box-shadow:

        0 35px 70px rgba(0,0,0,.35),

        0 0 25px rgba(57,255,20,.08);

}


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

.magazine-image{

    position:relative;

    overflow:hidden;

    height:270px;

}


.magazine-card.large

.magazine-image{

    height:360px;

}


.magazine-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform 1.2s ease,

        filter .5s;

}


.magazine-card:hover

.magazine-image img{

    transform:scale(1.08);

    filter:saturate(1.05);

}


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

.magazine-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            transparent,

            rgba(7,19,29,.15),

            rgba(7,19,29,.65)

        );

}


/* ==========================================================================
   BODY
========================================================================== */

.magazine-card-body{

    padding:30px;

}


/* ==========================================================================
   CATEGORY
========================================================================== */

.magazine-category{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:

        8px

        18px;

    margin-bottom:18px;

    border-radius:50px;

    background:

        rgba(57,255,20,.08);

    border:1px solid rgba(57,255,20,.20);

    color:var(--emerald);

    font-size:.62rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.magazine-category::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--emerald);

}


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

.magazine-card-body h3{

    margin:0 0 18px;

    color:#ffffff;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:1.65rem;

    line-height:1.3;

}


.magazine-card.large

.magazine-card-body h3{

    font-size:2.2rem;

}


/* ==========================================================================
   TEXT
========================================================================== */

.magazine-card-body p{

    color:var(--muted);

    font-size:.86rem;

    line-height:1.9;

    margin-bottom:24px;

}


/* ==========================================================================
   FOOTER
========================================================================== */

.magazine-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.08);

}


.magazine-date{

    color:#93a5ad;

    font-size:.68rem;

    letter-spacing:1px;

}


.magazine-date strong{

    color:var(--gold);

}


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

.read-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:

        12px

        22px;

    border-radius:50px;

    background:

        linear-gradient(

            135deg,

            rgba(191,149,63,.16),

            rgba(191,149,63,.06)

        );

    border:1px solid rgba(191,149,63,.25);

    color:var(--gold);

    font-size:.68rem;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:.35s;

}


.read-link span{

    transition:.35s;

}


.read-link:hover{

    background:var(--gold);

    color:#07131D;

    box-shadow:

        0 15px 30px rgba(191,149,63,.35);

}


.read-link:hover span{

    transform:translateX(8px);

}


/* ==========================================================================
   FEATURE BADGE
========================================================================== */

.feature-tag{

    position:absolute;

    top:22px;

    left:22px;

    z-index:5;

    padding:

        10px

        20px;

    border-radius:40px;

    background:

        rgba(7,19,29,.55);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.08);

    color:#ffffff;

    font-size:.60rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media(max-width:992px){

    .trade-grid{

        grid-template-columns:

            1fr

            1fr;

    }

    .magazine-card.large{

        grid-column:1/-1;

    }

}


@media(max-width:768px){

    .journal-section-heading{

        display:block;

    }

    .journal-section-heading p{

        margin-top:18px;

    }

    .trade-grid{

        grid-template-columns:1fr;

    }

    .magazine-card.large{

        grid-column:auto;

    }

    .magazine-image,

    .magazine-card.large .magazine-image{

        height:260px;

    }

}


@media(max-width:576px){

    .journal-section{

        padding:70px 0;

    }

    .journal-section-heading h2{

        font-size:2.3rem;

    }

    .magazine-card-body{

        padding:22px;

    }

    .magazine-card.large

    .magazine-card-body h3{

        font-size:1.7rem;

    }

}
/* ==========================================================================
   PART 5
   GREEN LEGACY
   LUXURY GLASS
========================================================================== */

.green-journal{

    position:relative;

    padding:100px 0;

    z-index:2;

}


/* ==========================================================================
   SECTION BACKGROUND
========================================================================== */

.green-journal::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at left,
            rgba(57,255,20,.06),
            transparent 40%
        ),

        radial-gradient(
            circle at right,
            rgba(191,149,63,.05),
            transparent 38%
        );

    pointer-events:none;

}


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

.green-feature{

    position:relative;

    display:grid;

    grid-template-columns:

        1.15fr

        .85fr;

    overflow:hidden;

    max-width:1280px;

    margin:auto;

    border-radius:34px;

    border:1px solid rgba(57,255,20,.15);

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.025)

        );

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    box-shadow:

        0 35px 90px rgba(0,0,0,.35);

}


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

.green-image{

    position:relative;

    overflow:hidden;

    min-height:560px;

}


.green-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform 1.4s ease,

        filter .5s;

}


.green-feature:hover

.green-image img{

    transform:scale(1.08);

    filter:saturate(1.05);

}


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

.green-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent 55%,

            rgba(7,19,29,.45)

        ),

        linear-gradient(

            180deg,

            rgba(7,19,29,.10),

            rgba(7,19,29,.55)

        );

}


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

.green-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:65px;

}


/* ==========================================================================
   BADGE
========================================================================== */

.green-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    align-self:flex-start;

    margin-bottom:22px;

    padding:

        10px

        22px;

    border-radius:50px;

    border:1px solid rgba(57,255,20,.22);

    background:

        rgba(57,255,20,.08);

    color:#39FF14;

    font-size:.65rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.green-label::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#39FF14;

    box-shadow:

        0 0 14px #39FF14;

}


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

.green-content h2{

    margin:0 0 22px;

    color:#ffffff;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size:3.4rem;

    line-height:1.08;

}


.green-content h2 strong{

    background:

        linear-gradient(

            90deg,

            #39FF14,

            #ffffff,

            #39FF14

        );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}


/* ==========================================================================
   TEXT
========================================================================== */

.green-content p{

    margin:0 0 18px;

    color:#bfcdd3;

    font-size:.92rem;

    line-height:1.95;

}


/* ==========================================================================
   STATISTICS
========================================================================== */

.green-stats{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}


.green-stat{

    padding:22px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:

        rgba(255,255,255,.04);

    backdrop-filter:blur(16px);

    transition:.35s;

}


.green-stat:hover{

    transform:translateY(-6px);

    border-color:rgba(57,255,20,.28);

    box-shadow:

        0 18px 35px rgba(57,255,20,.10);

}


.green-stat h3{

    margin:0;

    color:#BF953F;

    font-size:2rem;

    font-weight:700;

}


.green-stat span{

    display:block;

    margin-top:10px;

    color:#91a2aa;

    font-size:.72rem;

    line-height:1.6;

}


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

.green-read{

    display:inline-flex;

    align-items:center;

    gap:12px;

    align-self:flex-start;

    margin-top:35px;

    padding:

        15px

        30px;

    border-radius:50px;

    border:1px solid rgba(57,255,20,.25);

    background:

        linear-gradient(

            135deg,

            rgba(57,255,20,.12),

            rgba(57,255,20,.04)

        );

    color:#39FF14;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

}


.green-read span{

    transition:.35s;

}


.green-read:hover{

    background:#39FF14;

    color:#061018;

    box-shadow:

        0 18px 40px rgba(57,255,20,.28);

}


.green-read:hover span{

    transform:translateX(8px);

}


/* ==========================================================================
   FLOATING GLOW
========================================================================== */

.green-feature::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-150px;

    right:-150px;

    border-radius:50%;

    background:rgba(57,255,20,.08);

    filter:blur(100px);

    pointer-events:none;

}


.green-feature::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    bottom:-120px;

    left:-120px;

    border-radius:50%;

    background:rgba(191,149,63,.07);

    filter:blur(90px);

    pointer-events:none;

}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media(max-width:992px){

    .green-feature{

        grid-template-columns:1fr;

    }

    .green-image{

        min-height:420px;

    }

}


@media(max-width:768px){

    .green-content{

        padding:35px 28px;

    }

    .green-content h2{

        font-size:2.5rem;

    }

    .green-stats{

        grid-template-columns:1fr;

    }

}


@media(max-width:576px){

    .green-image{

        min-height:300px;

    }

    .green-content{

        padding:26px 20px;

    }

    .green-content h2{

        font-size:2rem;

    }

    .green-content p{

        font-size:.82rem;

    }

}
/* =====================================================================
   PART 6
   PREMIUM RESPONSIVE
   GLASS EFFECT
   FINAL TOUCH
===================================================================== */


/* =====================================================================
   LARGE DESKTOP
===================================================================== */

@media (min-width:1600px){

    .container{
        max-width:1450px;
    }

    .feature-image{
        min-height:720px;
    }

    .feature-content{
        padding:70px;
    }

    .journal-masthead h1{
        font-size:7.2rem;
    }

}


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

@media (max-width:992px){

    .editorial-grid,
    .trade-grid,
    .notes-grid{

        grid-template-columns:1fr;

    }

    .green-feature{

        grid-template-columns:1fr;

    }

    .green-image{

        min-height:360px;

    }

    .feature-content{

        padding:35px;

    }

    .feature-content h2{

        font-size:3rem;

    }

}


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

@media (max-width:768px){

    .journal-intro{

        padding:45px 0 20px;

    }

    .journal-masthead h1{

        font-size:3rem;

        letter-spacing:2px;

    }

    .journal-masthead p{

        font-size:.78rem;

    }

    .feature-image{

        min-height:520px;

    }

    .feature-content{

        padding:24px;

    }

    .feature-content h2{

        font-size:2.4rem;

    }

    .feature-content p{

        font-size:.82rem;

    }

    .feature-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .story-row{

        grid-template-columns:100px 1fr;

    }

    .story-image{

        width:100px;

        height:82px;

    }

    .journal-section-heading{

        display:block;

    }

    .journal-section-heading h2{

        font-size:2.2rem;

        margin-bottom:15px;

    }

    .journal-section-heading p{

        max-width:100%;

    }

}


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

@media (max-width:576px){

    .journal-masthead h1{

        font-size:2.35rem;

    }

    .journal-kicker{

        letter-spacing:2px;

    }

    .feature-content{

        padding:18px;

    }

    .feature-content h2{

        font-size:1.9rem;

    }

    .feature-content p{

        font-size:.75rem;

        line-height:1.7;

    }

    .editor-info{

        padding:20px;

    }

    .editor-info h3{

        font-size:1.3rem;

    }

    .magazine-card-body{

        padding:20px;

    }

    .magazine-card-body h3{

        font-size:1.35rem;

    }

    .green-content{

        padding:24px 20px;

    }

    .green-content h2{

        font-size:2rem;

    }

    .notes-heading h2{

        font-size:1.8rem;

    }

}


/* =====================================================================
   PREMIUM SCROLLBAR
===================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#06151d;

}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #39FF14,
            #BF953F
        );

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            #53ff39,
            #d7b05d
        );

}


/* =====================================================================
   TEXT SELECTION
===================================================================== */

::selection{

    background:#39FF14;

    color:#07131d;

}


/* =====================================================================
   SMOOTH TRANSITION
===================================================================== */

*{

    transition:

        background .35s ease,

        border-color .35s ease,

        color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}


/* =====================================================================
   PREMIUM GLASS HOVER
===================================================================== */

.editor-card:hover,
.magazine-card:hover,
.note-card:hover{

    box-shadow:

        0 25px 70px rgba(0,0,0,.45),

        0 0 30px rgba(57,255,20,.12),

        inset 0 1px 0 rgba(255,255,255,.10);

}


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

.feature-image img,
.editor-image img,
.story-image img,
.magazine-image img,
.green-image img{

    transition:

        transform .9s ease,

        filter .6s ease;

}

.feature-story:hover img,
.editor-card:hover img,
.story-row:hover img,
.magazine-card:hover img,
.green-feature:hover img{

    filter:

        brightness(1.05)

        saturate(1.08);

}


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

.read-link,
.green-read{

    position:relative;

    overflow:hidden;

}

.read-link::before,
.green-read::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transition:.8s;

}

.read-link:hover::before,
.green-read:hover::before{

    left:120%;

}


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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* =====================================================================
   END OF FILE
===================================================================== */