:root {

    --bg: #0b0d0f;

    --surface: #111417;

    --surface-2: #171b1f;

    --line: #262b30;

    --text: #f2f4f5;

    --muted: #929aa2;

    --accent: #d7ff4f;

    --accent-dark: #a9d629;

    --max: 1180px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--bg);

    color:
        var(--text);

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

    line-height: 1.55;
}


a {

    color: inherit;

    text-decoration: none;
}


img {

    display: block;

    max-width: 100%;
}


.wrap {

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

    margin:
        auto;
}


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


.site-header {

    position:
        sticky;

    top: 0;

    z-index: 20;

    background:
        rgba(
            11,
            13,
            15,
            .88
        );

    backdrop-filter:
        blur(14px);

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


.nav {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-weight:
        850;

    letter-spacing:
        -.04em;

    font-size:
        20px;
}


.brand-mark {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--accent);

    color:
        #0b0d0f;

    border-radius:
        9px;

    font-weight:
        900;
}


nav {

    display:
        flex;

    gap:
        22px;

    flex:
        1;
}


nav a {

    color:
        var(--muted);

    font-size:
        14px;

    font-weight:
        700;
}


nav a:hover,
nav a.active {

    color:
        var(--text);
}


.nav-search {

    display:
        flex;

    background:
        var(--surface);

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

    border-radius:
        10px;

    overflow:
        hidden;
}


.nav-search input {

    width:
        190px;

    background:
        none;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    padding:
        10px 12px;
}


.nav-search button {

    border:
        0;

    background:
        none;

    color:
        var(--muted);

    font-size:
        18px;

    padding:
        0 12px;

    cursor:
        pointer;
}


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


.hero {

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

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(
                215,
                255,
                79,
                .08
            ),
            transparent 35%
        );
}


.hero-inner {

    min-height:
        590px;

    display:
        grid;

    grid-template-columns:
        1.5fr .7fr;

    align-items:
        center;

    gap:
        60px;
}


.eyebrow {

    font-size:
        10px;

    letter-spacing:
        .16em;

    font-weight:
        850;

    color:
        var(--accent);

    text-transform:
        uppercase;
}


.hero h1 {

    font-size:
        clamp(
            48px,
            7vw,
            88px
        );

    line-height:
        .98;

    letter-spacing:
        -.065em;

    margin:
        14px 0 25px;
}


.hero h1 span {

    color:
        var(--accent);
}


.hero p {

    font-size:
        18px;

    color:
        var(--muted);

    max-width:
        650px;
}


.hero-search {

    display:
        flex;

    max-width:
        650px;

    margin-top:
        30px;
}


.hero-search input {

    flex:
        1;

    min-width:
        0;

    background:
        #fff;

    color:
        #111;

    border:
        0;

    padding:
        17px 18px;

    border-radius:
        10px 0 0 10px;

    font-size:
        15px;

    outline:
        0;
}


.hero-search button {

    border:
        0;

    background:
        var(--accent);

    color:
        #0b0d0f;

    font-weight:
        850;

    padding:
        0 20px;

    border-radius:
        0 10px 10px 0;

    cursor:
        pointer;
}


.quick-links {

    display:
        flex;

    gap:
        24px;

    margin-top:
        18px;

    font-size:
        13px;

    font-weight:
        700;
}


.quick-links a:first-child {

    color:
        var(--accent);
}


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


.hero-panel {

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

    background:
        linear-gradient(
            145deg,
            var(--surface),
            #0d1012
        );

    padding:
        30px;

    border-radius:
        18px;

    min-height:
        310px;
}


.panel-label {

    font-size:
        10px;

    letter-spacing:
        .16em;

    color:
        var(--muted);
}


.hero-stat {

    font-size:
        30px;

    font-weight:
        800;

    margin-top:
        80px;
}


.hero-stat strong {

    font-size:
        80px;

    line-height:
        1;

    color:
        var(--accent);
}


.hero-lines {

    display:
        grid;

    gap:
        8px;

    margin-top:
        30px;
}


.hero-lines span {

    height:
        2px;

    background:
        var(--line);
}


.hero-lines span:nth-child(2) {

    width:
        72%;
}


.hero-lines span:nth-child(3) {

    width:
        50%;
}


.hero-lines span:nth-child(4) {

    width:
        82%;
}


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


.section {

    padding:
        72px 0;
}


.section-head {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    margin-bottom:
        26px;
}


.section h2 {

    font-size:
        38px;

    line-height:
        1.05;

    letter-spacing:
        -.04em;

    margin:
        7px 0 0;
}


.text-link {

    font-size:
        13px;

    font-weight:
        800;

    color:
        var(--accent);
}


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


.recipe-grid {

    display:
        grid;

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

    gap:
        16px;
}


.recipe-card {

    background:
        var(--surface);

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

    border-radius:
        13px;

    overflow:
        hidden;

    transition:
        .2s transform,
        .2s border-color;
}


.recipe-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #454d54;
}


.recipe-card img {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    filter:
        saturate(.9);
}


.recipe-card-body {

    padding:
        16px;
}


.recipe-card h3 {

    font-size:
        18px;

    line-height:
        1.15;

    margin:
        8px 0;
}


.recipe-card h3 a:hover {

    color:
        var(--accent);
}


.muted {

    color:
        var(--muted);

    font-size:
        12px;
}


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


.tag-grid {

    display:
        grid;

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

    gap:
        10px;
}


.tag-grid.large {

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


.tag-card {

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

    background:
        var(--surface);

    padding:
        20px;

    border-radius:
        10px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;
}


.tag-card:hover {

    border-color:
        var(--accent);
}


.tag-card span {

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================
   CUISINES
========================= */


.pill-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.pill-list a {

    padding:
        11px 15px;

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

    background:
        var(--surface);

    border-radius:
        999px;

    color:
        #d6dadd;

    font-size:
        13px;
}


.pill-list a:hover {

    border-color:
        var(--accent);

    color:
        var(--accent);
}


.pill-list.big {

    display:
        grid;

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


.pill-list.big a {

    border-radius:
        10px;

    display:
        flex;

    justify-content:
        space-between;
}


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


.page-head {

    padding:
        75px 0 20px;
}


.page-head h1 {

    font-size:
        60px;

    line-height:
        1.05;

    letter-spacing:
        -.05em;

    margin:
        8px 0 12px;
}


.page-head p {

    color:
        var(--muted);

    max-width:
        650px;
}


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


.large-search {

    display:
        flex;

    max-width:
        700px;

    margin-top:
        30px;
}


.large-search input {

    flex:
        1;

    padding:
        16px;

    background:
        var(--surface);

    color:
        var(--text);

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

    border-radius:
        9px 0 0 9px;

    outline:
        none;
}


.large-search button {

    border:
        0;

    padding:
        0 25px;

    background:
        var(--accent);

    color:
        #111;

    font-weight:
        800;

    border-radius:
        0 9px 9px 0;

    cursor:
        pointer;
}


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


.empty {

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

    padding:
        60px;

    text-align:
        center;

    color:
        var(--muted);

    border-radius:
        12px;
}


/* =========================
   PAGINATION
========================= */


.pagination {

    display:
        flex;

    gap:
        7px;

    justify-content:
        center;

    margin-top:
        35px;
}


.pagination a {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        8px;

    color:
        var(--muted);
}


.pagination a.current,
.pagination a:hover {

    background:
        var(--accent);

    color:
        #111;

    border-color:
        var(--accent);
}


/* =========================
   RECIPE DETAIL
========================= */


.recipe-detail {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        55px;

    padding-top:
        65px;

    align-items:
        center;
}


.detail-image img {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    border-radius:
        18px;
}


.detail-copy h1 {

    font-size:
        clamp(
            42px,
            6vw,
            74px
        );

    line-height:
        .98;

    letter-spacing:
        -.06em;

    margin:
        14px 0 20px;
}


.detail-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    color:
        var(--muted);

    font-size:
        13px;
}


.detail-actions {

    display:
        flex;

    gap:
        10px;

    margin-top:
        30px;
}


.button {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        44px;

    border:
        0;

    background:
        var(--accent);

    color:
        #0b0d0f;

    padding:
        0 20px;

    border-radius:
        9px;

    font-weight:
        850;
}


.button.ghost {

    background:
        transparent;

    color:
        var(--text);

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


.detail-layout {

    display:
        grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:
        55px;
}


.ingredients-box,
.instructions-box {

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

    padding-top:
        20px;
}


.ingredients-box h2,
.instructions-box h2 {

    font-size:
        30px;

    letter-spacing:
        -.03em;
}


.ingredient-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        11px 0;

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

    font-size:
        14px;
}


.ingredient-row strong {

    color:
        var(--accent);

    font-weight:
        650;

    text-align:
        right;
}


.instructions {

    color:
        #c7ccd0;

    font-size:
        16px;

    line-height:
        1.85;
}


.video {

    display:
        inline-flex;

    margin-top:
        28px;

    background:
        #f21d35;

    padding:
        12px 18px;

    border-radius:
        9px;

    font-weight:
        800;
}


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


.footer {

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

    padding:
        55px 0 20px;

    color:
        var(--muted);
}


.footer-grid {

    display:
        grid;

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

    gap:
        40px;
}


.footer strong {

    display:
        block;

    color:
        var(--text);

    margin-bottom:
        10px;
}


.footer a {

    display:
        block;

    margin:
        5px 0;
}


.copyright {

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

    margin-top:
        35px;

    padding-top:
        18px;

    font-size:
        12px;
}


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


@media (
    max-width: 900px
) {

    .recipe-grid {

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


    .hero-inner {

        grid-template-columns:
            1fr;
    }


    .hero-panel {

        display:
            none;
    }


    .tag-grid {

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


    .tag-grid.large,
    .pill-list.big {

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


    .recipe-detail,
    .detail-layout {

        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 650px
) {

    .wrap {

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


    .nav {

        gap:
            15px;

        flex-wrap:
            wrap;

        padding:
            12px 0;
    }


    nav {

        order:
            3;

        width:
            100%;

        overflow-x:
            auto;

        padding-bottom:
            4px;
    }


    .nav-search {

        margin-left:
            auto;
    }


    .nav-search input {

        width:
            120px;
    }


    .hero-inner {

        min-height:
            510px;
    }


    .hero h1 {

        font-size:
            52px;
    }


    .hero-search {

        flex-direction:
            column;

        gap:
            8px;
    }


    .hero-search input,
    .hero-search button {

        border-radius:
            9px;

        min-height:
            50px;
    }


    .recipe-grid {

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

        gap:
            10px;
    }


    .recipe-card-body {

        padding:
            12px;
    }


    .recipe-card h3 {

        font-size:
            15px;
    }


    .section {

        padding:
            48px 0;
    }


    .section h2 {

        font-size:
            30px;
    }


    .page-head {

        padding-top:
            50px;
    }


    .page-head h1 {

        font-size:
            45px;
    }


    .tag-grid,
    .tag-grid.large,
    .pill-list.big {

        grid-template-columns:
            1fr;
    }


    .footer-grid {

        grid-template-columns:
            1fr;
    }

}