:root{

    --orange:#e85d24;
    --orange-dark:#c94714;
    --orange-soft:#fff0e8;

    --cream:#fbf7f0;
    --paper:#fffdf9;

    --ink:#171513;
    --muted:#766e65;

    --line:#e3dbd1;
    --soft:#f1ebe3;

    --shadow:
        0 18px 55px rgba(32,22,14,.10);

    --max-width:1200px;
}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

    background:var(--cream);

    color:var(--ink);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


body.menu-open{
    overflow:hidden;
}


a{
    color:inherit;
    text-decoration:none;
}


button,
input{
    font:inherit;
}


button{
    cursor:pointer;
}


img{

    display:block;

    width:100%;

    object-fit:cover;
}


.wrap{

    width:min(
        var(--max-width),
        calc(100% - 30px)
    );

    margin:auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{

    height:34px;

    background:#171513;

    color:#eee;

    font-size:11px;
}


.topin{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


.top-accent{

    color:#ff7c43;

    font-weight:800;
}


.socials{

    display:flex;

    gap:14px;

    color:#cfc7bf;
}


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

header{

    position:sticky;

    top:0;

    z-index:50;

    background:
        rgba(255,253,249,.94);

    backdrop-filter:
        blur(16px);

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


.head{

    height:78px;

    display:flex;

    align-items:center;

    gap:28px;
}


.brand{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:235px;
}


.mark{

    width:39px;

    height:39px;

    background:var(--orange);

    border-radius:12px;

    position:relative;

    overflow:hidden;

    flex:none;
}


.mark:before{

    content:"";

    position:absolute;

    width:25px;

    height:25px;

    background:#fff5ed;

    border-radius:50%;

    left:-8px;

    top:7px;
}


.mark:after{

    content:"";

    position:absolute;

    width:15px;

    height:15px;

    border:4px solid #171513;

    border-radius:50%;

    right:-5px;

    bottom:-5px;
}


.brand-name{

    font:
        800 30px/1 Georgia,serif;

    letter-spacing:-1.3px;
}


.brand-name span{

    color:var(--orange);
}


.tagline{

    font-size:10px;

    color:var(--muted);

    margin-top:4px;

    letter-spacing:.1px;
}


/* =========================================================
   SEARCH
========================================================= */

.search{

    height:44px;

    display:flex;

    flex:1;

    max-width:530px;

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

    border-radius:10px;

    background:#fff;

    overflow:hidden;
}


.search input{

    border:0;

    outline:0;

    flex:1;

    min-width:0;

    padding:0 15px;

    color:var(--ink);

    background:transparent;
}


.search button{

    border:0;

    background:var(--orange);

    color:white;

    width:52px;

    font-size:18px;
}


/* =========================================================
   ACTIONS
========================================================= */

.actions{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:4px;
}


.action{

    border:0;

    background:transparent;

    width:40px;

    height:40px;

    border-radius:50%;

    font-size:18px;
}


.action:hover{

    background:var(--orange-soft);

    color:var(--orange);
}


.menu{

    display:none;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navline{

    border-top:
        1px solid #eee7df;
}


.nav{

    height:45px;

    display:flex;

    align-items:center;

    gap:27px;

    overflow:auto;

    white-space:nowrap;

    scrollbar-width:none;
}


.nav::-webkit-scrollbar{
    display:none;
}


.nav a{

    font-size:12px;

    font-weight:800;

    position:relative;

    padding:14px 0;
}


.nav a:hover,
.nav a.active{

    color:var(--orange);
}


.nav a.active:after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    height:3px;

    background:var(--orange);

    border-radius:3px;
}


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

main{

    padding-top:20px;

    padding-bottom:30px;
}


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

.hero{

    display:grid;

    grid-template-columns:
        minmax(0,1.7fr)
        minmax(330px,.95fr);

    gap:15px;
}


.hero-main{

    height:430px;

    border-radius:10px;

    overflow:hidden;

    position:relative;

    background:#222;

    cursor:pointer;

    box-shadow:var(--shadow);
}


.hero-main img{

    height:100%;

    transition:.5s;
}


.hero-main:hover img{

    transform:scale(1.025);
}


.hero-main:after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.88),
            rgba(0,0,0,.05) 68%
        );
}


.hero-placeholder{

    width:100%;

    height:100%;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            135deg,
            #30241f,
            #e85d24
        );

    color:#fff;

    font:
        800 55px Georgia,serif;
}


.hero-copy{

    position:absolute;

    z-index:2;

    left:29px;

    right:28px;

    bottom:26px;

    color:#fff;
}


.pill{

    display:inline-block;

    background:var(--orange);

    color:white;

    border-radius:4px;

    padding:5px 9px;

    font-size:9px;

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.hero h1{

    font:
        700 clamp(31px,4vw,52px)/1.02
        Georgia,serif;

    letter-spacing:-1.5px;

    margin:11px 0 9px;

    max-width:800px;
}


.meta{

    font-size:11px;

    color:#837a71;
}


.hero .meta{

    color:#d7d0c9;
}


/* =========================================================
   SIDE STORIES
========================================================= */

.side{

    display:grid;

    gap:15px;
}


.side-card{

    background:#fff;

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

    border-radius:9px;

    padding:9px;

    display:grid;

    grid-template-columns:
        142px 1fr;

    gap:13px;

    cursor:pointer;

    transition:.22s;
}


.side-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);
}


.side-card img{

    height:123px;

    border-radius:6px;
}


.side-placeholder{

    height:123px;

    border-radius:6px;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            135deg,
            #f3c1a8,
            #e85d24
        );

    color:white;

    font:
        800 28px Georgia,serif;
}


.side-card small,
.cat{

    font-size:9px;

    color:var(--orange);

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.side-card h3{

    font:
        700 18px/1.15
        Georgia,serif;

    margin:7px 0 10px;
}


.empty-side{

    cursor:default;
}


.empty-side:hover{

    transform:none;

    box-shadow:none;
}


/* =========================================================
   SECTIONS
========================================================= */

.section{

    margin-top:30px;
}


.section-head{

    display:flex;

    align-items:end;

    justify-content:space-between;

    border-bottom:
        2px solid var(--ink);

    padding-bottom:10px;

    margin-bottom:17px;
}


.section-head h2{

    font:
        700 29px/1
        Georgia,serif;

    margin:0;

    border-left:
        5px solid var(--orange);

    padding-left:10px;
}


.viewall{

    font-size:11px;

    font-weight:900;

    color:var(--orange);
}


/* =========================================================
   TRENDING BAR
========================================================= */

.trending-box{

    background:#181614;

    color:#fff;

    border-radius:9px;

    padding:13px 15px;

    display:flex;

    gap:14px;

    align-items:center;

    overflow:hidden;
}


.trending-label{

    color:#ff7740;

    font-size:10px;

    font-weight:950;

    text-transform:uppercase;

    white-space:nowrap;
}


.ticker{

    white-space:nowrap;

    overflow:hidden;

    color:#ddd5ce;

    font-size:12px;

    flex:1;
}


.ticker span{

    margin-right:30px;
}


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

.grid{

    display:grid;

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

    gap:19px;
}


.card{

    background:#fff;

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

    border-radius:9px;

    overflow:hidden;

    transition:.22s;

    cursor:pointer;
}


.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);
}


.card-img{

    height:190px;

    overflow:hidden;

    position:relative;

    background:#ddd;
}


.card-img img{

    height:100%;

    transition:.4s;
}


.card:hover .card-img img{

    transform:scale(1.04);
}


.card-img .badge{

    position:absolute;

    left:10px;

    bottom:10px;

    background:var(--orange);

    color:#fff;

    border-radius:4px;

    padding:5px 8px;

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;
}


.card-placeholder{

    width:100%;

    height:100%;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            135deg,
            #f5d2c1,
            #e85d24
        );

    color:#fff;

    font:
        800 30px Georgia,serif;
}


.cardbody{

    padding:15px;
}


.card h3{

    font:
        700 20px/1.15
        Georgia,serif;

    margin:7px 0;
}


.excerpt{

    font-size:12px;

    color:var(--muted);

    line-height:1.5;
}


.card .meta{

    margin-top:11px;
}


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

.empty{

    padding:45px 20px;

    text-align:center;

    background:#fff;

    border:
        1px dashed #d6cdc3;

    border-radius:9px;

    color:var(--muted);
}


.empty strong{

    display:block;

    margin-bottom:8px;

    color:var(--ink);

    font:
        700 25px Georgia,serif;
}


/* =========================================================
   TRENDING STORIES
========================================================= */

.trendgrid{

    display:grid;

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

    gap:19px;
}


.trendcard{

    background:#fff;

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

    border-radius:9px;

    overflow:hidden;

    cursor:pointer;

    transition:.22s;
}


.trendcard:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);
}


.trendimage{

    height:155px;

    position:relative;

    background:#ddd;
}


.trendimage img{

    height:100%;
}


.trend-placeholder{

    height:100%;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            135deg,
            #e85d24,
            #f4b18e
        );

    color:white;

    font:
        800 28px Georgia,serif;
}


.rank{

    position:absolute;

    top:9px;

    left:9px;

    z-index:2;

    background:var(--orange);

    color:#fff;

    border-radius:4px;

    padding:6px 9px;

    font-size:12px;

    font-weight:950;
}


.trendbody{

    padding:13px;
}


.trendbody h3{

    font:
        700 18px/1.16
        Georgia,serif;

    margin:0 0 8px;
}


/* =========================================================
   CATEGORIES
========================================================= */

.categories{

    display:grid;

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

    gap:9px;
}


.category{

    background:#fff;

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

    border-radius:8px;

    padding:14px 5px;

    text-align:center;

    font-size:10px;

    font-weight:850;

    transition:.2s;
}


.category:hover{

    border-color:var(--orange);

    transform:translateY(-2px);

    color:var(--orange);
}


.emoji{

    display:block;

    font-size:22px;

    margin-bottom:7px;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter{

    margin:32px 0;

    background:
        linear-gradient(
            110deg,
            #e85d24,
            #f57938
        );

    border-radius:10px;

    color:#fff;

    padding:25px 27px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;
}


.newsletter h2{

    font:
        700 28px/1.05
        Georgia,serif;

    margin:0;
}


.newsletter p{

    font-size:12px;

    margin:5px 0 0;

    color:#ffe8dc;
}


.subscribe{

    display:flex;

    background:#fff;

    border-radius:7px;

    padding:4px;

    min-width:410px;
}


.subscribe input{

    border:0;

    outline:0;

    flex:1;

    min-width:0;

    padding:10px;

    background:transparent;
}


.subscribe button{

    border:0;

    background:#181614;

    color:#fff;

    border-radius:5px;

    padding:0 17px;

    font-weight:850;
}


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

footer{

    background:#181614;

    color:#fff;

    padding:42px 0 20px;

    margin-top:30px;
}


.foot{

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:40px;
}


.footer-brand{

    min-width:0;
}


.foot p,
.foot a{

    font-size:12px;

    color:#aaa39b;

    line-height:1.8;
}


.foot a:hover{

    color:#ff7841;
}


.foot h4{

    font-size:12px;

    margin:0 0 8px;
}


.copy{

    border-top:
        1px solid #39342f;

    margin-top:27px;

    padding-top:15px;

    display:flex;

    justify-content:space-between;

    color:#77716a;

    font-size:11px;
}


/* =========================================================
   TOAST
========================================================= */

.toast{

    position:fixed;

    z-index:200;

    bottom:20px;

    left:50%;

    transform:
        translate(-50%,80px);

    background:#181614;

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    font-size:12px;

    transition:.25s;

    pointer-events:none;
}


.toast.show{

    transform:
        translate(-50%,0);
}


/* =========================================================
   SEARCH HIGHLIGHT / HIDDEN
========================================================= */

.card.search-hidden{

    display:none;
}


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

@media(max-width:900px){

    .head{

        height:68px;

        gap:10px;
    }


    .brand{

        min-width:auto;
    }


    .tagline{

        display:none;
    }


    .brand-name{

        font-size:23px;
    }


    .mark{

        width:32px;

        height:32px;
    }


    .actions .action:nth-child(1),
    .actions .action:nth-child(2),
    .actions .action:nth-child(3){

        display:none;
    }


    .menu{

        display:block;
    }


    .hero{

        grid-template-columns:1fr;
    }


    .side{

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


    .grid{

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


    .trendgrid{

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


    .categories{

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


    .newsletter{

        flex-direction:column;

        align-items:stretch;
    }


    .subscribe{

        min-width:0;
    }


    .foot{

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


    .nav{

        gap:20px;
    }

}


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

@media(max-width:560px){

    .wrap{

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


    .topbar{

        height:30px;
    }


    .socials{

        display:none;
    }


    .topin{

        justify-content:center;
    }


    .head{

        flex-wrap:wrap;

        height:auto;

        min-height:64px;

        padding:8px 0;
    }


    .brand{

        flex:1;
    }


    .search{

        order:4;

        flex-basis:100%;

        max-width:none;

        display:none;

        margin-top:5px;
    }


    .search.mobile-visible{

        display:flex;
    }


    .hero-main{

        height:350px;
    }


    .hero-copy{

        left:19px;

        right:17px;

        bottom:20px;
    }


    .hero h1{

        font-size:31px;
    }


    .side{

        grid-template-columns:1fr;
    }


    .side-card{

        grid-template-columns:
            115px 1fr;
    }


    .side-card img,
    .side-placeholder{

        height:104px;
    }


    .side-card h3{

        font-size:16px;
    }


    .section-head{

        align-items:center;
    }


    .section-head h2{

        font-size:25px;
    }


    .viewall{

        display:none;
    }


    .grid,
    .trendgrid{

        grid-template-columns:1fr;
    }


    .card-img{

        height:205px;
    }


    .categories{

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


    .newsletter{

        padding:20px;
    }


    .newsletter h2{

        font-size:25px;
    }


    .subscribe{

        flex-direction:column;

        gap:4px;
    }


    .subscribe button{

        height:42px;
    }


    .foot{

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


    .copy{

        flex-direction:column;

        gap:5px;
    }


    .nav{

        height:42px;

        gap:20px;
    }


    .nav a{

        padding:13px 0;
    }

}
@media(max-width:900px){

    .nav.mobile-open{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        padding:12px 0;
        overflow:visible;
        white-space:normal;
    }

}
/* =====================================================
   MOBILE HAMBURGER MENU
===================================================== */

@media (max-width: 900px) {

    .menu {
        display: flex !important;

        align-items: center;

        justify-content: center;

        width: 40px;

        height: 40px;

        border: 0;

        background: transparent;

        color: var(--ink);

        border-radius: 50%;

        font-size: 20px;

        cursor: pointer;
    }


    .nav.mobile-open {

        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        height: auto;

        max-height: calc(100vh - 110px);

        overflow-y: auto;

        padding: 8px 0 14px;

        gap: 0;

        background: var(--cream);

    }


    .nav.mobile-open a {

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 46px;

        padding: 12px 8px;

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

        font-size: 13px;

        font-weight: 800;

        color: var(--ink);
    }


    .nav.mobile-open a:hover,
    .nav.mobile-open a.active {

        color: var(--orange);

        background: var(--orange-soft);

        border-radius: 7px;
    }


    .nav.mobile-open a::after {

        display: none;
    }


    body.menu-open {

        overflow: hidden;
    }

}


@media (max-width: 560px) {

    .nav.mobile-open {

        max-height: calc(100vh - 95px);

    }

}