/* =========================================================
   UMAMI ROOTS
   COMPLETE CLEAN STYLE.CSS
   CENTERED • SPACED • HORIZONTAL • EDITORIAL
========================================================= */


/* =========================================================
   1. BRAND
========================================================= */

:root {
    --cream: #fbf5eb;
    --cream-soft: #f4eadb;
    --paper: #fffaf3;

    --ink: #1d1a16;
    --muted: #746c61;

    --sage: #7c8963;
    --sage-dark: #586344;

    --terra: #b75b45;
    --terra-light: #dc8b70;
    --terra-dark: #8f4232;

    --gold: #caa45e;
    --gold-light: #f0cd7c;

    --border: rgba(174, 143, 98, 0.28);

    --shadow:
        0 24px 65px rgba(48, 36, 23, 0.10);

    --shadow-soft:
        0 12px 32px rgba(48, 36, 23, 0.07);

    --site-width: 1560px;
}


/* =========================================================
   2. RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    font-family: "Inter", sans-serif;

    color: var(--ink);

    line-height: 1.65;

    background:

        radial-gradient(
            circle at 0% 15%,
            rgba(183, 91, 69, 0.12),
            transparent 27%
        ),

        radial-gradient(
            circle at 100% 20%,
            rgba(124, 137, 99, 0.10),
            transparent 29%
        ),

        linear-gradient(
            180deg,
            #fbf5eb 0%,
            #f7eddf 50%,
            #fbf5eb 100%
        );
}


/* =========================================================
   3. PAPER TEXTURE
========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.10;

    background-image:

        linear-gradient(
            rgba(88, 99, 68, 0.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(88, 99, 68, 0.045) 1px,
            transparent 1px
        );

    background-size: 46px 46px;
}


/* =========================================================
   4. CULINARY SWIRLS
========================================================= */

body::after {
    content: "";

    position: fixed;

    inset: 72px 0 0;

    z-index: -2;

    pointer-events: none;

    opacity: 1;

    background-image:

        linear-gradient(
            90deg,
            rgba(251,245,235,0) 0%,
            rgba(251,245,235,0) 22%,
            rgba(251,245,235,0.08) 40%,
            rgba(251,245,235,0.25) 57%,
            rgba(251,245,235,0.58) 74%,
            rgba(251,245,235,0.88) 90%,
            rgba(251,245,235,1) 100%
        ),

        radial-gradient(
            ellipse at 20% 62%,
            rgba(220,139,112,0.24),
            transparent 21%
        ),

        radial-gradient(
            ellipse at 29% 69%,
            rgba(240,205,124,0.22),
            transparent 20%
        ),

        radial-gradient(
            ellipse at 38% 74%,
            rgba(124,137,99,0.18),
            transparent 20%
        ),

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='s'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-190 735 C110 455 335 905 655 620 C900 400 1040 280 1330 390 C1500 455 1600 325 1770 160' stroke='%23b75b45' stroke-width='66' opacity='.27' filter='url(%23b)'/%3E%3Cpath d='M-175 780 C160 500 375 920 700 645 C945 430 1090 315 1370 425 C1525 485 1625 370 1770 225' stroke='%23f0cd7c' stroke-width='52' opacity='.28' filter='url(%23b)'/%3E%3Cpath d='M-150 830 C210 545 425 930 745 690 C1000 490 1155 360 1420 455 C1560 505 1650 430 1780 325' stroke='%237c8963' stroke-width='55' opacity='.22' filter='url(%23b)'/%3E%3Cpath d='M-125 670 C185 445 335 810 620 590 C865 405 1055 300 1320 395 C1480 450 1585 325 1740 190' stroke='%23ffffff' stroke-width='10' opacity='.55' filter='url(%23s)'/%3E%3Cpath d='M-145 730 C195 485 365 845 665 620 C920 430 1090 325 1360 415 C1520 470 1620 350 1755 230' stroke='%23dc8b70' stroke-width='11' opacity='.76' filter='url(%23s)'/%3E%3Cpath d='M-115 785 C230 535 415 870 725 660 C975 485 1140 380 1400 455 C1545 500 1640 420 1765 330' stroke='%23f0cd7c' stroke-width='9' opacity='.78' filter='url(%23s)'/%3E%3Cpath d='M-70 825 C260 590 455 880 760 700 C1010 545 1175 420 1430 480 C1560 515 1660 460 1780 365' stroke='%237c8963' stroke-width='9' opacity='.58' filter='url(%23s)'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: center top;

    background-size: cover;
}


/* =========================================================
   5. BASIC ELEMENTS
========================================================= */

img {
    display: block;

    width: 100%;
    max-width: 100%;
}

a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   6. TYPOGRAPHY
========================================================= */

h1,
h2,
h3 {
    margin-top: 0;

    color: var(--ink);

    font-family: "Playfair Display", serif;

    line-height: 1.04;
}

h1 {
    margin-bottom: 16px;

    font-size:
        clamp(2.2rem, 3vw, 3.45rem);

    letter-spacing:
        -0.035em;
}

h2 {
    margin-bottom: 15px;

    font-size:
        clamp(2rem, 2.8vw, 3.15rem);

    letter-spacing:
        -0.035em;
}

h3 {
    margin-bottom: 10px;

    font-size: 1.55rem;
}

p {
    margin-top: 0;
    margin-bottom: 15px;

    font-size: 17px;
}

.eyebrow {
    margin-bottom: 11px;

    color: var(--sage-dark);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


/* =========================================================
   7. HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 82px;

    padding:
        15px max(6vw, calc((100vw - var(--site-width)) / 2));

    background:
        rgba(251,245,235,0.95);

    border-bottom:
        1px solid rgba(88,99,68,0.10);

    backdrop-filter:
        blur(16px);
}

.logo {
    font-family:
        "Playfair Display", serif;

    font-size: 30px;

    font-weight: 600;

    letter-spacing:
        -0.045em;
}

.logo::after {
    content: "";

    display: block;

    width: 39px;

    height: 2px;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            var(--terra),
            var(--gold)
        );
}

.nav-menu {
    display: flex;

    align-items: center;

    gap: 26px;

    font-size: 14px;

    font-weight: 700;
}

.nav-menu a {
    position: relative;
}

.nav-menu a:not(.nav-button)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;
    height: 2px;

    background:
        var(--terra);

    transition:
        width 0.2s ease;
}

.nav-menu a:not(.nav-button):hover::after {
    width: 100%;
}

.nav-button {
    padding:
        11px 21px;

    border-radius:
        999px;

    background:
        var(--ink);

    color:
        white;

    box-shadow:
        0 10px 26px rgba(29,26,22,0.13);
}

.menu-toggle {
    display: none;

    border: 0;

    background: transparent;

    font-size: 30px;

    cursor: pointer;
}


/* =========================================================
   8. HOME HERO

   Properly centered.
   No touching browser edges.
========================================================= */

/* =========================================================
   HOME HERO
   OPEN HORIZONTAL LAYOUT — NO OUTER BUBBLE
========================================================= */

.home-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px;

    align-items: center;

    gap: 60px;

    width:
        min(var(--site-width), calc(100% - 12vw));

    margin:
        48px auto 34px;

    padding:
        34px 60px;

    /* NO BUBBLE */
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

/* LEFT TEXT */

.home-hero-text {
    width: 100%;

    max-width: 980px;
}

.home-hero h1 {
    max-width: 920px;

    margin-bottom: 17px;

    font-size:
        clamp(2.3rem, 3.25vw, 3.7rem);

    line-height:
        1.03;

    letter-spacing:
        -0.04em;
}

.home-intro {
    max-width: 900px;

    margin: 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.75;
}


/* RIGHT BUTTON AREA */

.home-hero-actions {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: center;

    gap: 12px;

    width: 100%;
}


/* =========================================================
   9. HOME VISUAL STRIP
========================================================= */

.home-visual {
    position: relative;

    width:
        min(var(--site-width), calc(100% - 12vw));

    height: 250px;

    margin:
        0 auto 32px;

    overflow: hidden;

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

    border-radius:
        25px;

    background:

        radial-gradient(
            circle at 25% 48%,
            rgba(220,139,112,0.21),
            transparent 25%
        ),

        radial-gradient(
            circle at 52% 68%,
            rgba(240,205,124,0.17),
            transparent 27%
        ),

        radial-gradient(
            circle at 78% 42%,
            rgba(124,137,99,0.14),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            rgba(255,250,243,0.92),
            rgba(235,220,198,0.76)
        );

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


/* Prevent missing photo from making the area ugly */

.home-visual {
    color: transparent;

    font-size: 0;
}

.home-visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    font-size: 0;

    color: transparent;
}


/* =========================================================
   10. BUTTONS
========================================================= */

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 45px;

    padding:
        11px 20px;

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

    border-radius:
        999px;

    font-size: 14px;

    font-weight: 800;

    text-align: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.button:hover {
    transform:
        translateY(-2px);

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

.button.primary {
    background:
        var(--ink);

    color:
        white;
}

.button.secondary {
    background:
        rgba(255,250,243,0.90);

    color:
        var(--ink);
}


/* =========================================================
   11. INNER PAGE HERO

   Same container alignment as Home.
========================================================= */

.page-hero {
    position: relative;

    width:
        min(var(--site-width), calc(100% - 12vw));

    margin:
        38px auto 10px;

    padding:
        40px 0;
}

.page-hero h1 {
    max-width: 760px;

    margin-bottom: 15px;

    font-size:
        clamp(2.2rem, 3vw, 3.45rem);
}

.page-hero p {
    max-width: 680px;

    color: var(--muted);

    line-height: 1.75;
}


/* =========================================================
   12. STANDARD SECTIONS
========================================================= */

.services-section,
.featured-recipes,
.cards-section,
.process-section,
.booking-section,
.recipe-filter-section {
    position: relative;

    width:
        min(var(--site-width), calc(100% - 12vw));

    margin:
        0 auto;

    padding:
        55px 0;
}

.section-heading {
    max-width: 800px;

    margin-bottom: 26px;
}


/* =========================================================
   13. PANELS
========================================================= */

.intro-section,
.text-section,
.form-section,
.newsletter-section {
    width:
        min(var(--site-width), calc(100% - 12vw));

    margin-left:
        auto;

    margin-right:
        auto;

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

    border-radius:
        26px;

    background:
        rgba(255,250,243,0.87);

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

    backdrop-filter:
        blur(5px);
}

.intro-section,
.text-section {
    margin-top: 28px;

    margin-bottom: 28px;

    padding:
        44px 40px;
}

.intro-section p:last-child,
.text-section p:last-child {
    max-width: 900px;

    color: var(--muted);

    font-size: 18px;
}

.form-section {
    margin-top: 28px;

    margin-bottom: 70px;

    padding:
        34px;
}

.newsletter-section {
    margin-top: 38px;

    margin-bottom: 80px;

    padding:
        48px 34px;

    text-align: center;
}


/* =========================================================
   14. CARDS
========================================================= */

.cards {
    display: grid;

    gap: 20px;
}

.three-column {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.card {
    position: relative;

    overflow: hidden;

    padding:
        28px;

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

    border-radius:
        23px;

    background:
        rgba(255,250,243,0.92);

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

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px rgba(48,36,23,0.10);
}

.card p {
    color:
        var(--muted);
}

.card a {
    display: inline-block;

    margin-top: 7px;

    color:
        var(--terra-dark);

    font-weight: 800;

    text-decoration: underline;

    text-underline-offset: 4px;
}


/* =========================================================
   15. RECIPES
========================================================= */

.recipe-scroll {
    display: flex;

    gap: 22px;

    overflow-x: auto;

    padding-bottom: 12px;
}

.recipe-card {
    min-width: 315px;
}

.recipe-card img {
    height: 350px;

    margin-bottom: 14px;

    object-fit: cover;

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

    border-radius:
        21px;

    background:
        var(--paper);

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

.recipe-card p {
    color:
        var(--muted);
}

.recipe-grid {
    display: grid;

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

    gap: 22px;
}

.recipe-grid .recipe-card {
    min-width: 0;
}


/* =========================================================
   16. RECIPE FILTER
========================================================= */

.search-input {
    width: 100%;

    padding:
        14px 16px;

    margin-bottom: 15px;

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

    border-radius:
        12px;

    background:
        rgba(255,250,243,0.92);

    font-family:
        inherit;

    font-size: 15px;
}

.filter-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}

.filter-buttons button {
    padding:
        8px 15px;

    border:
        1px solid rgba(88,99,68,0.20);

    border-radius:
        999px;

    background:
        rgba(255,250,243,0.90);

    font-size: 14px;

    cursor: pointer;
}


/* =========================================================
   17. ABOUT / SPLIT SECTIONS
========================================================= */

.about-preview,
.split-section,
.contact-layout {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 48px;

    width:
        min(var(--site-width), calc(100% - 12vw));

    margin:
        35px auto;

    padding:
        45px;

    border:
        1px solid rgba(177,145,99,0.22);

    border-radius:
        27px;

    background:
        rgba(255,250,243,0.68);
}

.about-image,
.about-preview > div:first-child,
.split-section > div:first-child {
    overflow: hidden;

    min-height: 390px;

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

    border-radius:
        22px;

    background:
        var(--cream-soft);

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

.about-preview img,
.split-section img {
    height: 390px;

    object-fit: cover;
}


/* =========================================================
   18. PROCESS
========================================================= */

.process-list {
    display: grid;

    gap: 15px;

    max-width: 1000px;
}

.process-item {
    display: grid;

    grid-template-columns:
        50px 1fr;

    gap: 16px;

    padding:
        22px;

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

    border-radius:
        20px;

    background:
        rgba(255,250,243,0.90);

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

.process-item span {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--terra),
            var(--terra-dark)
        );

    color: white;

    font-weight: 800;
}

.process-item p {
    color:
        var(--muted);
}


/* =========================================================
   19. CTA
========================================================= */

.cta-section {
    width:
        min(var(--site-width), calc(100% - 12vw));

    margin:
        55px auto;

    padding:
        55px 40px;

    border-radius:
        27px;

    background:
        linear-gradient(
            135deg,
            var(--sage-dark),
            var(--ink)
        );

    color:
        white;

    text-align:
        center;

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

.cta-section h2,
.cta-section p,
.cta-section .eyebrow {
    color:
        white;
}

.cta-section p {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;
}

.cta-section .button.primary {
    background:
        white;

    border-color:
        white;

    color:
        var(--ink);
}


/* =========================================================
   20. BOOKING
========================================================= */

.booking-section {
    display: grid;

    gap: 16px;
}

.booking-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding:
        26px;

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

    border-radius:
        22px;

    background:
        rgba(255,250,243,0.91);

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

.booking-card p {
    color:
        var(--muted);
}


/* =========================================================
   21. CONTACT / FORMS
========================================================= */

.contact-layout {
    align-items: start;
}

.contact-info {
    padding: 15px;
}

.contact-info a {
    color:
        var(--terra-dark);

    font-weight: 800;
}

.contact-form {
    display: grid;

    gap: 11px;
}

.contact-form label {
    font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.newsletter-form input {
    width: 100%;

    padding:
        13px 14px;

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

    border-radius:
        11px;

    background:
        white;

    font-family:
        inherit;

    font-size: 15px;
}

.contact-form button,
.newsletter-form button {
    padding:
        13px 18px;

    border: 0;

    border-radius:
        11px;

    background:
        var(--terra);

    color:
        white;

    font-weight: 800;

    cursor: pointer;
}

.newsletter-form {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 10px;

    max-width: 600px;

    margin:
        20px auto 0;
}


/* =========================================================
   22. FOOTER
========================================================= */

.site-footer {
    margin-top: 70px;

    padding:
        48px max(6vw, calc((100vw - var(--site-width)) / 2));

    background:
        var(--ink);

    color:
        white;
}

.site-footer h2 {
    color: white;

    font-size: 32px;
}

.site-footer p {
    color:
        rgba(255,255,255,0.75);
}

.copyright {
    margin-top: 20px;

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

    font-size: 12px;
}


/* =========================================================
   23. ANIMATION
========================================================= */

.fade-in {
    opacity: 0;

    transform:
        translateY(16px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.fade-in.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 1100px) {

    .home-hero {
        grid-template-columns:
            minmax(0, 1fr)
            190px;

        gap: 35px;

        padding:
            38px 40px;
    }

    .three-column,
    .recipe-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .about-preview,
    .split-section,
    .contact-layout {
        gap: 30px;

        padding: 32px;
    }
}


/* =========================================================
   25. MOBILE
========================================================= */

@media (max-width: 900px) {

    .menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;

        position: absolute;

        top: 78px;
        left: 0;

        width: 100%;

        padding:
            24px 6%;

        flex-direction: column;

        align-items: flex-start;

        background:
            rgba(251,245,235,0.98);

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

    .nav-menu.active {
        display: flex;
    }


    .home-hero {
        grid-template-columns:
            1fr;

        gap: 26px;

        width:
            calc(100% - 10vw);

        margin-top: 28px;

        padding:
            35px 30px;
    }


    .home-hero-actions {
        flex-direction: row;

        flex-wrap: wrap;

        width: auto;
    }


    .home-visual,
    .page-hero,
    .services-section,
    .featured-recipes,
    .cards-section,
    .process-section,
    .booking-section,
    .recipe-filter-section,
    .intro-section,
    .text-section,
    .form-section,
    .newsletter-section,
    .about-preview,
    .split-section,
    .contact-layout,
    .cta-section {
        width:
            calc(100% - 10vw);
    }


    .three-column,
    .recipe-grid,
    .about-preview,
    .split-section,
    .contact-layout {
        grid-template-columns:
            1fr;
    }


    .about-preview,
    .split-section,
    .contact-layout {
        padding: 28px;
    }


    .home-visual {
        height: 220px;
    }


    .about-image,
    .about-preview > div:first-child,
    .split-section > div:first-child,
    .about-preview img,
    .split-section img {
        min-height: 340px;

        height: 340px;
    }


    .newsletter-form {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   26. PHONE
========================================================= */

@media (max-width: 600px) {

    .site-header {
        min-height: 70px;

        padding:
            13px 5%;
    }

    .logo {
        font-size: 26px;
    }


    .home-hero {
        width:
            calc(100% - 8vw);

        margin:
            20px auto 18px;

        padding:
            28px 22px;

        border-radius:
            21px;
    }


    .home-hero h1,
    .page-hero h1 {
        font-size:
            clamp(2rem, 8vw, 2.65rem);
    }


    .home-hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .home-visual,
    .page-hero,
    .services-section,
    .featured-recipes,
    .cards-section,
    .process-section,
    .booking-section,
    .recipe-filter-section,
    .intro-section,
    .text-section,
    .form-section,
    .newsletter-section,
    .about-preview,
    .split-section,
    .contact-layout,
    .cta-section {
        width:
            calc(100% - 8vw);
    }


    .home-visual {
        height: 190px;

        border-radius:
            19px;
    }


    .three-column,
    .recipe-grid {
        grid-template-columns:
            1fr;
    }


    .intro-section,
    .text-section,
    .form-section,
    .newsletter-section {
        padding:
            28px 21px;
    }


    .about-preview,
    .split-section,
    .contact-layout {
        padding:
            21px;
    }


    .about-image,
    .about-preview > div:first-child,
    .split-section > div:first-child,
    .about-preview img,
    .split-section img {
        min-height:
            300px;

        height:
            300px;
    }


    .card,
    .booking-card,
    .process-item {
        padding:
            20px;
    }


    .cta-section {
        padding:
            38px 22px;
    }


    p {
        font-size: 16px;
    }
}