/* ==========================================================
   CLOUDSNOMAD PREMIUM MAGAZINE DESIGN
   Editorial Travel / Food / Culture Theme
   ========================================================== */


:root {

    --paper: #faf8f3;
    --white: #ffffff;

    --ink: #171717;
    --ink-soft: #525252;
    --ink-light: #737373;

    --line: #e7e2d8;

    --gold: #b88a44;
    --gold-soft: #f4ead8;

    --dark: #151515;

    --radius: 22px;
    --radius-small: 12px;

    --container: 1180px;
    --article: 760px;

    --serif:
        "Playfair Display",
        Georgia,
        serif;

    --sans:
        "Inter",
        system-ui,
        sans-serif;


    --shadow:
        0 20px 60px rgba(0,0,0,.08);

    --shadow-soft:
        0 8px 30px rgba(0,0,0,.06);

    --transition:
        .3s ease;

}



*,
*::before,
*::after {

    box-sizing:border-box;
    margin:0;
    padding:0;

}



html {

    scroll-behavior:smooth;

}



body {

    background:
        var(--paper);

    color:
        var(--ink);

    font-family:
        var(--sans);

    line-height:
        1.75;

}



img {

    max-width:100%;
    display:block;

}



a {

    text-decoration:none;
    color:inherit;

}



.container {

    width:100%;

    max-width:
        var(--container);

    margin:auto;

    padding:
        0 30px;

}




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


.site-header {

    position:sticky;

    top:0;

    z-index:100;

    background:
        rgba(250,248,243,.92);

    backdrop-filter:
        blur(12px);

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

}



.header-inner {

    height:
        78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* Logo remains unchanged visually */

.logo {

    display:flex;

    align-items:center;

    gap:10px;

}



.logo-word {

    font-size:
        1.45rem;

    font-weight:
        800;

    letter-spacing:
        -.04em;

    color:
        var(--ink);

}



.logo-mark {

    border-radius:
        10px;

}



/* Navigation */


.nav-list {

    display:flex;

    gap:8px;

    list-style:none;

}



.nav-list a {

    padding:
        8px 18px;

    border-radius:
        30px;

    font-size:
        .88rem;

    color:
        var(--ink-soft);

    font-weight:
        500;

    transition:
        var(--transition);

}



.nav-list a:hover {

    background:
        var(--gold-soft);

    color:
        var(--ink);

}



/* Mobile menu */


.hamburger {

    display:none;

    background:none;

    border:0;

    cursor:pointer;

}



.hamburger span {

    width:
        25px;

    height:
        2px;

    background:
        var(--ink);

    display:block;

    margin:
        5px 0;

}



.mobile-nav {

    display:none;

    background:
        var(--white);

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

}



.mobile-nav.is-open {

    display:block;

}


.mobile-nav ul {

    list-style:none;

    padding:
        20px;

}



.mobile-nav a {

    display:block;

    padding:
        12px;

    border-radius:
        8px;

}



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


.article-hero {

    padding:
        70px 0 0;

    background:
        var(--paper);

}



.article-hero-inner {

    max-width:
        var(--article);

    margin:auto;

    text-align:center;

}



.article-eyebrow {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-bottom:
        25px;

}



.article-tag {

    padding:
        6px 16px;

    border-radius:
        999px;

    background:
        var(--gold-soft);

    color:
        var(--gold);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}



.article-date {

    font-size:
        .8rem;

    color:
        var(--ink-light);

}



/* Main magazine title */


.article-title {

    font-family:
        var(--serif);

    font-size:
        clamp(2.4rem,5vw,4rem);

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -.035em;

    color:
        var(--ink);

    margin-bottom:
        35px;

}



/* ==========================================================
   AUTHOR BAR
   ========================================================== */


.article-meta-bar {

    display:flex;

    justify-content:center;

    padding-bottom:
        45px;

}



.author-info {

    display:flex;

    align-items:center;

    gap:
        14px;

}



.author-avatar {

    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    background:
        var(--dark);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:
        700;

}



.author-name {

    font-weight:
        700;

}



.author-role {

    font-size:
        .8rem;

    color:
        var(--ink-light);

}

/* ==========================================================
   FEATURE IMAGE - MAGAZINE STYLE
   ========================================================== */


.cover-strip {

    max-width:
        1100px;

    height:
        520px;

    margin:
        0 auto;

    overflow:hidden;

    border-radius:
        28px;

    box-shadow:
        var(--shadow);

    position:relative;

}



.cover-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}



/* Soft image fade */

.cover-strip::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 35%
        );

}



/* ==========================================================
   ARTICLE LAYOUT
   ========================================================== */


.article-layout {

    display:flex;

    justify-content:center;

    padding:
        90px 0;

}



.article-layout article {

    width:
        100%;

    max-width:
        var(--article);

}



.article-content {

    background:
        transparent;

}



/* ==========================================================
   ARTICLE TYPOGRAPHY
   ========================================================== */


.article-content p {

    font-size:
        1.12rem;

    line-height:
        1.95;

    color:
        #333333;

    margin-bottom:
        30px;

}



/* Editorial opening letter */


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

    font-family:
        var(--serif);

    font-size:
        5.2rem;

    line-height:
        .8;

    float:left;

    padding-right:
        10px;

    color:
        var(--gold);

}



/* Headings */


.article-content h2 {

    font-family:
        var(--serif);

    font-size:
        2rem;

    line-height:
        1.25;

    margin:
        65px 0 22px;

    letter-spacing:
        -.025em;

    color:
        var(--ink);

}



.article-content h3 {

    font-family:
        var(--serif);

    font-size:
        1.45rem;

    margin:
        45px 0 18px;

}



/* ==========================================================
   PREMIUM QUOTE STYLE
   ========================================================== */


.article-content blockquote {

    margin:
        55px 0;

    padding:
        45px;

    text-align:center;

    background:
        var(--white);

    border-radius:
        var(--radius);

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

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

    position:relative;

}



.article-content blockquote::before {

    content:"“";

    position:absolute;

    top:-35px;

    left:50%;

    transform:
        translateX(-50%);

    font-family:
        var(--serif);

    font-size:
        6rem;

    color:
        var(--gold);

}



.article-content blockquote p {

    font-family:
        var(--serif);

    font-size:
        1.45rem;

    line-height:
        1.6;

    font-style:
        italic;

    color:
        var(--ink);

}



.article-content blockquote cite {

    display:block;

    margin-top:
        20px;

    color:
        var(--ink-light);

    font-size:
        .85rem;

}



/* ==========================================================
   LIST DESIGN
   ========================================================== */


.article-content ul,
.article-content ol {

    margin:
        35px 0;

    padding-left:
        25px;

}



.article-content li {

    padding-left:
        8px;

    margin-bottom:
        14px;

    color:
        #444;

    font-size:
        1.05rem;

}



.article-content li::marker {

    color:
        var(--gold);

    font-weight:
        700;

}



/* ==========================================================
   MAGAZINE CALLOUT CARD
   ========================================================== */


.article-content .callout {

    margin:
        45px 0;

    padding:
        35px;

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #ffffff
        );

    border:
        1px solid #ead9bb;

    border-radius:
        var(--radius);

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

    color:
        #444;

}



.article-content .callout strong {

    display:block;

    color:
        var(--gold);

    font-size:
        .7rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    margin-bottom:
        12px;

}



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


.article-divider {

    text-align:center;

    margin:
        70px 0;

    color:
        var(--gold);

    letter-spacing:
        .7em;

}



/* ==========================================================
   AUTHOR PROFILE CARD
   ========================================================== */


.author-card {

    margin-top:
        70px;

    padding:
        35px;

    display:flex;

    gap:
        25px;

    align-items:center;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

}



.author-card-avatar {

    width:
        75px;

    height:
        75px;

    border-radius:
        50%;

    background:
        var(--dark);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:
        1.6rem;

    font-weight:
        700;

}



.author-card-name {

    font-family:
        var(--serif);

    font-size:
        1.3rem;

}



.author-card-title {

    margin-top:
        6px;

    color:
        var(--gold);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        .7rem;

}

/* ==========================================================
   ARTICLE FOOTER AREA
   ========================================================== */


.article-footer {

    margin-top:
        80px;

    padding-top:
        40px;

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

}



/* Tags */


.article-tags {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:
        10px;

    margin-bottom:
        35px;

}



.tags-label,
.share-label {

    font-size:
        .7rem;

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-weight:
        700;

    color:
        var(--ink-light);

}



.tag-pill {

    background:
        var(--white);

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

    padding:
        7px 16px;

    border-radius:
        999px;

    font-size:
        .8rem;

    color:
        var(--ink-soft);

    transition:
        .25s ease;

}



.tag-pill:hover {

    border-color:
        var(--gold);

    color:
        var(--gold);

}



/* Sharing buttons */


.share-bar {

    display:flex;

    align-items:center;

    gap:
        12px;

}



.share-btn {

    display:flex;

    align-items:center;

    gap:
        8px;

    padding:
        10px 20px;

    border-radius:
        999px;

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

    background:
        white;

    cursor:pointer;

    font-weight:
        600;

    font-size:
        .85rem;

    transition:
        .25s ease;

}



.share-btn:hover {

    transform:
        translateY(-2px);

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

}



.share-btn.copied {

    color:
        #15803d;

    border-color:
        #86efac;

}



/* ==========================================================
   OPTIONAL MAGAZINE SIDEBAR
   ========================================================== */


.article-sidebar {

    position:
        sticky;

    top:
        100px;

}



.sidebar-block {

    background:
        var(--white);

    padding:
        25px;

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

    border-radius:
        var(--radius-small);

    margin-bottom:
        20px;

}



.sidebar-title {

    display:flex;

    align-items:center;

    gap:
       10px;

    color:
        var(--gold);

    font-size:
        .7rem;

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-weight:
        700;

    margin-bottom:
        18px;

}



.toc-list {

    display:flex;

    flex-direction:
        column;

    gap:
        8px;

}



.toc-list a {

    padding:
        8px 10px;

    font-size:
        .85rem;

    color:
        var(--ink-soft);

    border-left:
        2px solid transparent;

}



.toc-list a:hover,
.toc-list a.active {

    color:
        var(--gold);

    border-left-color:
        var(--gold);

}



/* ==========================================================
   RELATED STORIES
   ========================================================== */


.related-mini {

    display:flex;

    flex-direction:
        column;

    gap:
        18px;

}



.related-mini-item {

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

    padding-bottom:
        18px;

}



.related-mini-item:last-child {

    border-bottom:
        none;

}



.related-mini-tag {

    color:
        var(--gold);

    font-size:
        .65rem;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}



.related-mini-title {

    font-family:
        var(--serif);

    font-size:
        1rem;

    line-height:
        1.4;

    margin-top:
        5px;

}



.related-mini-date {

    color:
        var(--ink-light);

    font-size:
        .75rem;

}



/* ==========================================================
   MORE STORIES SECTION
   ========================================================== */


.more-posts {

    padding:
        80px 0;

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

}



.section-label {

    display:flex;

    align-items:center;

    gap:
        20px;

    font-size:
        .7rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    color:
        var(--gold);

    font-weight:
        700;

    margin-bottom:
        35px;

}



.section-label::after {

    content:"";

    height:
        1px;

    background:
        var(--line);

    flex:1;

}



.more-grid {

    display:grid;

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

    gap:
        25px;

}



.more-card {

    background:
        white;

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

    border-radius:
        var(--radius);

    overflow:hidden;

    transition:
        .3s ease;

}



.more-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}



.more-card-thumb {

    height:
        170px;

    background:
        #eee8dc;

}



.more-card-title {

    font-family:
        var(--serif);

    font-size:
        1.15rem;

    padding:
        20px 20px 5px;

}



.more-card-excerpt {

    padding:
        0 20px;

    color:
        var(--ink-soft);

    font-size:
        .9rem;

}



.more-card-date {

    display:block;

    padding:
        20px;

    color:
        var(--ink-light);

    font-size:
        .75rem;

}

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


.site-footer {

    background:
        #111111;

    color:
        #b7b7b7;

    padding:
        70px 0 35px;

    margin-top:
        80px;

}



.footer-inner {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:
        50px;

    padding-bottom:
        45px;

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

}



.footer-brand .logo-word {

    background:
        linear-gradient(
            135deg,
            #d6b36a,
            #f5df9b
        );

background-clip:text;
    color:transparent;

}



.footer-brand p {

    max-width:
        340px;

    margin-top:
        18px;

    line-height:
        1.8;

    color:
        #888;

}



.social-links {

    display:flex;

    gap:
        12px;

}



.social-link {

    width:
        42px;

    height:
        42px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border-radius:
        50%;

    color:
        #ccc;

    transition:
        .25s ease;

}



.social-link:hover {

    background:
        #d6b36a;

    color:
        #111;

    border-color:
        #d6b36a;

}



.footer-bottom {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:
        30px;

    font-size:
        .8rem;

}



.footer-nav {

    display:flex;

    gap:
        25px;

}



.footer-nav a:hover {

    color:
        white;

}



/* ==========================================================
   SMOOTH INTERACTIONS
   ========================================================== */


a,
button {

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;

}



img {

    transition:
        transform .5s ease;

}



.more-card:hover img {

    transform:
        scale(1.05);

}



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


@media(max-width:1100px){


    .article-layout {

        display:block;

    }


    .article-sidebar {

        display:none;

    }


    .article-content {

        max-width:
            760px;

        margin:auto;

    }


    .cover-strip {

        margin-inline:
            25px;

    }


}



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


@media(max-width:900px){


    .main-nav {

        display:none;

    }


    .hamburger {

        display:flex;

    }


    .article-hero {

        padding-top:
            3rem;

    }


    .article-title {

        font-size:
            2rem;

        line-height:
            1.2;

    }


    .cover-strip {

        height:
            300px;

        border-radius:
            18px;

    }


}



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


@media(max-width:600px){


    .container {

        padding-inline:
            18px;

    }



    .article-hero {

        padding-bottom:
            0;

    }



    .article-eyebrow {

        flex-wrap:
            wrap;

    }



    .article-content p {

        font-size:
            1rem;

        line-height:
            1.8;

    }



    .article-content h2 {

        font-size:
            1.55rem;

        margin-top:
            45px;

    }



    .article-content blockquote {

        padding:
            30px 20px;

    }



    .article-content blockquote p {

        font-size:
            1.15rem;

    }



    .author-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            25px;

    }



    .more-grid {

        grid-template-columns:
            1fr;

    }



    .footer-inner {

        flex-direction:
            column;

    }



    .footer-bottom {

        flex-direction:
            column;

        gap:
            20px;

        text-align:center;

    }



    .footer-nav {

        flex-wrap:
            wrap;

        justify-content:center;

    }



    .share-bar {

        flex-wrap:
            wrap;

    }



}



/* ==========================================================
   LARGE SCREEN PREMIUM SPACING
   ========================================================== */


@media(min-width:1400px){


    .article-title {

        font-size:
            3.2rem;

    }



    .cover-strip {

        height:
            600px;

    }



    .article-content p {

        font-size:
            1.18rem;

    }


}



/* ==========================================================
   ACCESSIBILITY
   ========================================================== */


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


    *,
    *::before,
    *::after {

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }


}