:root {

    --cream: #fff5df;

    --paper: #fffaf0;

    --red: #ff6268;

    --red-dark: #e9565e;

    --pink: #ffb7bd;

    --rose: #d9898f;

    --ink: #3c3030;

    --muted: #7c6b67;

    --line: rgba(60,48,48,.16);

    --white: #fffdf8;

    --shadow:
        0 24px 70px rgba(95,45,45,.10);

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

    --sans:
        "Inter",
        Arial,
        sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--cream);

    color: var(--ink);

    font-family: var(--sans);

    line-height: 1.65;

    overflow-x: hidden;
}


img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


a {

    color: inherit;

    text-decoration: none;
}


button,
input {

    font: inherit;
}


section {

    position: relative;
}

.section-pad {

    width:
        min(
            calc(100% - 96px),
            1728px
        );

    margin-inline: auto;
}


.eyebrow {

    font-size: 12px;

    letter-spacing: .18em;

    font-weight: 700;

    text-transform: uppercase;

    margin-left:50px;
}


.section-label {

    display: flex;

    justify-content: space-between;

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

    padding-top: 16px;

    font-size: 26px;

    letter-spacing: .16em;

    font-weight: 500;

    margin-right:100px;

    margin-left:100px;
}


.section-label.light {

    border-color:
        rgba(255,255,255,.35);

    margin-right:100px;

    margin-left:100px;

    color: white;
}


h1,
h2,
h3 {

    line-height: .98;
}


h1,
h2 {

    font-family: var(--serif);

    font-weight: 400;
}


h1 em,
h2 em,
.quote-section em {

    font-family: var(--serif);

    font-style: italic;
}


h3 {

    font-weight: 600;
}


p {

    color: var(--muted);
}

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    padding:
        18px 24px 0;
}


.nav-shell {

    width:
        min(100%, 1728px);

    margin: auto;

    min-height: 108px;

    padding:
        0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(255,250,240,.94);

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

    border-radius:
        0 0 28px 28px;

    box-shadow:
        0 10px 30px
        rgba(50,30,30,.05);

    backdrop-filter:
        blur(14px);
}


.brand {

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand strong {

    font-family: var(--serif);

    font-size: 28px;

    color: var(--red);
}


.brand span {

    font-size: 10px;

    letter-spacing: .08em;

    margin-top: 5px;

    color: var(--muted);
}


.desktop-nav {

    display: flex;

    gap: 38px;

    font-size: 20px;
}


.desktop-nav a {

    transition:
        .25s ease;
}


.desktop-nav a:hover {

    color: var(--red);
}


.mobile-menu {

    display: none;

    position: relative;
}


.mobile-menu summary {

    cursor: pointer;

    list-style: none;

    font-size: 12px;

    letter-spacing: .12em;
}


.mobile-menu summary::-webkit-details-marker {

    display: none;
}

.hero {

    min-height: 860px;

    display: grid;

    grid-template-columns:
        .88fr 1.12fr;

    gap: 70px;

    align-items: center;

    padding-top: 120px;

    padding-bottom: 120px;
}


.hero-copy {

    padding-left: 5vw;
}


.hero h1 {

    font-size:
        clamp(82px, 9.4vw, 178px);

    letter-spacing: -.06em;

    margin:
        22px 0 28px;

    color: var(--red);
}


.hero h1 em {

    color: var(--ink);
}


.hero-intro {

    max-width: 490px;

    font-size: 21px;

    color: var(--ink);

    margin-bottom: 35px;
}


.pill-button {

    display: inline-flex;

    align-items: center;

    gap: 24px;

    padding:
        14px 22px;

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

    border-radius: 999px;

    font-size: 12px;

    letter-spacing: .1em;

    transition:
        .3s ease;
}


.pill-button:hover {

    background: var(--red);

    color: white;

    border-color: var(--red);

    transform:
        translateY(-3px);
}


.hero-visual {

    position: relative;

    min-height: 620px;
}


.hero-photo {

    position: absolute;

    inset:
        0 0 0 5%;

    border-radius:
        42% 12% 12% 42%;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            rgba(255,98,104,.16),
            rgba(255,245,223,.05)
        ),
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234672/image1.webp"
        )
        center / cover;

    filter:
        saturate(.86);
}


.hero-visual::after {

    content: "";

    position: absolute;

    inset:
        10% 5% 10% 10%;

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

    border-radius:
        38% 12% 12% 38%;

    pointer-events: none;
}


.hero-stamp {

    position: absolute;

    left: -5%;

    top: 12%;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background: var(--red);

    color: white;

    display: grid;

    place-items: center;

    text-align: center;

    box-shadow:
        var(--shadow);

    transform:
        rotate(-9deg);
}


.hero-stamp span {

    font-family: var(--serif);

    font-size: 54px;

    line-height: 1;
}


.hero-stamp small {

    font-size: 9px;

    letter-spacing: .18em;
}


.hero-caption {

    position: absolute;

    right: -2%;

    bottom: 8%;

    width: 270px;

    padding:
        18px 20px;

    background:
        rgba(255,250,240,.93);

    border-radius: 22px;

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


.hero-caption span {

    font-size: 11px;

    color: var(--red);

    font-weight: 700;
}


.hero-caption p {

    font-size: 12px;

    margin-top: 7px;
}


.hero-marquee {

    position: absolute;

    bottom: 22px;

    left: 0;

    width: 100vw;

    transform:
        translateX(-3vw);

    overflow: hidden;

    white-space: nowrap;

    color:
        rgba(255,98,104,.22);

    font-family:
        var(--serif);

    font-size:
        clamp(36px,4vw,74px);

    line-height: 1;
}

.intro {

    padding-top: 150px;

    padding-bottom: 170px;
}


.intro-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12vw;

    padding:
        85px 7vw 0;
}


.intro h2 {

    font-size:
        clamp(65px,7vw,120px);

    letter-spacing:
        -.05em;
}


.intro-grid > div {

    padding-top: 15px;

    max-width: 610px;
}


.intro .lead {

    font-size: 25px;

    color: var(--ink);

    margin-bottom: 24px;
}

.glance {

    padding-top: 110px;

    padding-bottom: 120px;

    color: white;

    background: var(--red);

    border-radius:
        100px 100px 0 0;
}


.stats-grid {

    display: grid;

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

    margin-top: 80px;
}


.stats-grid article {

    min-height: 260px;

    padding: 28px;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.stats-grid article:last-child {

    border-right:
        1px solid
        rgba(255,255,255,.38);
}


.stats-grid strong {

    font-family: var(--serif);

    font-size:
        clamp(70px,8vw,130px);

    font-weight: 400;

    line-height: .8;
}


.stats-grid span {

    font-size: 13px;

    color:
        rgba(255,255,255,.82);
}

.area {

    padding-top: 150px;

    padding-bottom: 160px;
}


.section-heading {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10vw;

    align-items: end;
}


.section-heading h2 {

    font-size:
        clamp(65px,7vw,125px);

    margin-top: 20px;

    letter-spacing:
        -.055em;
}


.section-heading > p {

    max-width: 520px;

    font-size: 18px;
}


.section-heading.centered {

    text-align: center;

    display: block;
}


.section-heading.centered > p {

    margin:
        25px auto 0;
}


.map-card {

    margin-top: 85px;

    display: grid;

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

    min-height: 700px;

    background: #ff858a;

    border-radius: 58px;

    overflow: hidden;

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


.map-copy {

    padding: 70px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.number {

    font-size: 11px;

    letter-spacing: .14em;

    font-weight: 700;
}


.map-copy h3 {

    font-family: var(--serif);

    font-size: 58px;

    font-weight: 400;

    line-height: 1.03;

    color: white;
}


.map-copy p {

    max-width: 380px;

    color:
        rgba(255,255,255,.85);
}


.map-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.map-tags span {

    padding:
        7px 11px;

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

    border-radius: 999px;

    font-size: 9px;

    color: white;

    letter-spacing: .12em;
}


.map-image {

    margin: 28px;

    position: relative;

    background:
        var(--cream);

    border-radius: 42px;

    overflow: hidden;

    display: grid;

    place-items: center;
}


.map-image img {

    width: 86%;

    height: 86%;

    object-fit: contain;

    mix-blend-mode: multiply;
}


.map-note {

    position: absolute;

    right: 24px;

    top: 24px;

    font-size: 10px;

    letter-spacing: .16em;

    color: var(--red);
}

.flavors {

    padding-top: 120px;

    padding-bottom: 170px;
}


.food-grid {

    margin-top: 80px;

    display: grid;

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

    gap: 18px;
}


.food-card {

    background:
        var(--paper);

    border-radius: 28px;

    overflow: hidden;

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

    transition:
        .35s ease;
}


.food-card:hover {

    transform:
        translateY(-8px);

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


.food-card-large {

    grid-row: span 2;
}


.food-photo {

    height: 340px;

    overflow: hidden;
}


.food-card-large .food-photo {

    height: 520px;
}


.food-photo img {

    transition:
        transform .7s ease;
}


.food-card:hover
.food-photo img {

    transform:
        scale(1.06);
}


.food-info {

    padding:
        25px 26px 30px;
}


.food-info span {

    font-size: 10px;

    letter-spacing: .16em;

    color: var(--red);

    font-weight: 700;
}


.food-info h3 {

    font-family: var(--serif);

    font-size: 38px;

    font-weight: 400;

    margin:
        13px 0 12px;
}


.food-info p {

    font-size: 13px;
}


.text-card {

    background: var(--red);

    color: white;

    display: flex;

    align-items: flex-end;

    min-height: 330px;
}


.text-card .food-info p {

    color:
        rgba(255,255,255,.84);
}


.text-card .food-info span {

    color: white;
}


.remote-photo {

    background-size: cover;

    background-position: center;
}


.ingredients-photo {

    background-image:
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234678/img2.webp"
        );
}


.people-photo {

    background-image:
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234674/img3.webp"
        );
}

.ingredients {

    min-height: 850px;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 7vw;

    align-items: center;

    background:
        var(--ink);

    color: white;

    border-radius: 100px;

    padding-top: 120px;

    padding-bottom: 120px;
}


.ingredients-copy h2 {

    font-size:
        clamp(70px,7vw,125px);

    margin:
        25px 0;

    margin-left:50px;
}


.ingredients-copy > p:last-child {

    max-width: 500px;

    color:
        rgba(255,255,255,.68);

    font-size: 16px;

    margin-left:50px;
}


.ingredient-wheel {

    width:
        min(680px,80vw);

    aspect-ratio: 1;

    position: relative;

    margin: auto;

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

    border-radius: 50%;
}


.ingredient-wheel::before,
.ingredient-wheel::after {

    content: "";

    position: absolute;

    inset: 12%;

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

    border-radius: 50%;
}


.ingredient-wheel::after {

    inset: 30%;
}


.ingredient-center {

    position: absolute;

    inset: 38%;

    border-radius: 50%;

    background: var(--red);

    display: grid;

    place-items: center;

    align-content: center;

    text-align: center;

    font-family: var(--serif);

    font-size: 55px;

    line-height: .85;
}


.ingredient-center small {

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: .2em;

    margin-top: 8px;
}


.ingredient-item {

    position: absolute;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: var(--cream);

    color: var(--ink);

    display: grid;

    place-items: center;

    align-content: center;

    text-align: center;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.18);

    transition:
        .3s ease;
}


.ingredient-item:hover {

    transform:
        scale(1.08);
}


.ingredient-item b {

    font-size: 11px;

    letter-spacing: .12em;
}


.ingredient-item span {

    font-family: var(--serif);

    font-size: 35px;

    color: var(--red);
}


.item-1 {

    top: 3%;

    left: 50%;

    transform:
        translateX(-50%);
}


.item-2 {

    right: 5%;

    top: 28%;
}


.item-3 {

    right: 15%;

    bottom: 8%;
}


.item-4 {

    left: 15%;

    bottom: 8%;
}


.item-5 {

    left: 5%;

    top: 28%;
}

.process {

    padding-top: 170px;

    padding-bottom: 180px;
}


.process-line {

    margin-top: 100px;

    display: grid;

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

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


.process-line article {

    padding:
        30px 22px 0;

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

    min-height: 260px;
}


.process-line article:first-child {

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


.process-line span {

    font-size: 11px;

    color: var(--red);

    font-weight: 700;
}


.process-line h3 {

    font-family: var(--serif);

    font-size: 34px;

    font-weight: 400;

    margin:
        45px 0 15px;
}


.process-line p {

    font-size: 12px;
}

.people {

    min-height: 800px;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    background:
        #f4dfc9;

    border-radius: 80px;

    overflow: hidden;
}


.people-image {

    min-height: 700px;

    background-image:
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234672/img4.webp"
        );
}


.people-copy {

    padding:
        90px 7vw;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.people-copy h2 {

    font-size:
        clamp(75px,7vw,125px);

    margin:
        25px 0;
}


.people-copy .lead {

    color: var(--ink);

    font-size: 21px;

    max-width: 480px;
}


.mini-story {

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 20px;

    padding:
        22px 0;

    border-top:
        1px solid
        rgba(60,48,48,.18);

    margin-top: 25px;
}


.mini-story span {

    font-size: 10px;

    color: var(--red);

    font-weight: 700;
}


.mini-story p {

    font-size: 13px;
}

.culture {

    padding-top: 150px;

    padding-bottom: 160px;
}


.culture-grid {

    margin-top: 80px;

    display: grid;

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

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


.culture-grid article {

    min-height: 290px;

    padding: 30px;

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


.culture-grid article:nth-child(odd) {

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


.culture-grid span {

    font-size: 11px;

    color: var(--red);

    font-weight: 700;
}


.culture-grid h3 {

    font-family: var(--serif);

    font-size: 58px;

    font-weight: 400;

    margin:
        55px 0 15px;
}


.culture-grid p {

    max-width: 430px;

    font-size: 14px;
}

.quote-section {

    min-height: 720px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        var(--red);

    color: white;

    border-radius:
        100px 100px 0 0;
}


.quote-section p {

    font-family: var(--serif);

    color: white;

    font-size:
        clamp(70px,9vw,160px);

    line-height: .92;

    letter-spacing:
        -.055em;

    max-width: 1100px;

    margin-left:100px;
}


.quote-section span {

    margin-top: 55px;

    font-size: 10px;

    letter-spacing: .2em;

    margin-left:100px;
}

.journal {

    padding-top: 150px;

    padding-bottom: 170px;
}


.journal-grid {

    margin-top: 85px;

    display: grid;

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

    gap: 22px;
}


.journal-grid article {

    position: relative;
}


.journal-number {

    position: absolute;

    z-index: 2;

    top: 18px;

    left: 18px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background:
        var(--red);

    color: white;

    display: grid;

    place-items: center;

    font-size: 11px;
}


.journal-photo {

    height: 410px;

    border-radius: 30px;

    margin-bottom: 28px;
}


.journal-1 {

    background-image:
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234678/img2.webp"
        );
}


.journal-2 {

    background-image:
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234672/image1.webp"
        );
}


.journal-3 {

    background-image:
        url(
            "https://res.cloudinary.com/o462sdoh/image/upload/v1790234674/img3.webp"
        );
}


.journal-grid small {

    font-size: 9px;

    letter-spacing: .15em;

    color: var(--red);

    font-weight: 700;
}


.journal-grid h3 {

    font-family: var(--serif);

    font-size: 34px;

    font-weight: 400;

    margin:
        12px 0;
}


.journal-grid p {

    font-size: 13px;

    margin-bottom: 20px;
}


.journal-grid a {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;
}

.subscribe {

    padding-top: 100px;

    padding-bottom: 100px;

    background:
        var(--rose);

    border-radius:
        80px 80px 0 0;

    color: white;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 8vw;

    align-items: center;
}


.subscribe h2 {

    font-size:
        clamp(60px,6vw,105px);

    margin-top: 25px;

    color: white;

    margin-left:100px;
}


.subscribe h2 em {

    color: #ffe8dd;
}


.subscribe .eyebrow {

    color: white;

    margin-left:100px;
}


.subscribe-form {

    display: grid;

    gap: 22px;
}


.subscribe-form label {

    font-size: 10px;

    letter-spacing: .12em;

    color: white;

    margin-right:300px;
}


.subscribe-form input {

    width: 100%;

    margin-top: 8px;

    padding:
        17px 20px;

    border: 0;

    outline: 0;

    border-radius: 999px;

    background: white;

    color: var(--ink);

    width:400px;

    margin-right:100px;
}


.subscribe-form button {

    width: max-content;

    padding:
        12px 24px;

    border: 0;

    border-radius: 999px;

    background: white;

    color: var(--red-dark);

    cursor: pointer;

    transition:
        .25s ease;
}


.subscribe-form button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(60,48,48,.16);
}

.site-footer {

    background:
        var(--pink);

    color: white;

    overflow: hidden;

    padding:
        45px 48px 0;
}


.footer-top {

    max-width: 1728px;

    margin: auto;

    display: grid;

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

    align-items: start;

    gap: 30px;

    position: relative;

    z-index: 2;
}


.footer-top strong {

    font-family: var(--serif);

    font-size: 34px;
}


.footer-top p {

    color:
        rgba(255,255,255,.8);

    font-size: 11px;
}


.footer-links {

    display: flex;

    gap: 25px;

    font-size: 11px;

    justify-content: center;
}


.copyright {

    text-align: right;
}


.footer-word {

    font-family: var(--sans);

    font-size:
        clamp(150px,24vw,470px);

    font-weight: 700;

    letter-spacing: -.09em;

    line-height: .68;

    color:
        rgba(255,255,255,.48);

    white-space: nowrap;

    transform:
        translateX(-1%);

    margin-top: 110px;
}

@media (max-width:1100px) {


    .section-pad {

        width:
            min(
                calc(100% - 56px),
                1728px
            );
    }

    .hero {

        grid-template-columns:
            1fr 1fr;

        gap: 35px;
    }


    .hero-copy {

        padding-left: 2vw;
    }


    .hero h1 {

        font-size:
            clamp(70px,10vw,125px);
    }


    .hero-visual {

        min-height: 520px;
    }

    .stats-grid {

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


    .stats-grid article:nth-child(3) {

        border-left: 0;

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


    .stats-grid article:nth-child(4) {

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

    .map-card {

        grid-template-columns: 1fr;
    }


    .map-copy {

        min-height: 420px;
    }

    .food-grid {

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


    .food-card-large {

        grid-row: auto;

        grid-column:
            span 2;
    }


    .food-card-large .food-photo {

        height: 450px;
    }

    .ingredients {

        grid-template-columns: 1fr;
    }

    .process-line {

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


    .process-line article:nth-child(4) {

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

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


    .process-line article:nth-child(5) {

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

    .people {

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


    .people-image {

        min-height: 620px;
    }

    .subscribe {

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

}

@media (max-width:700px) {


    .section-pad {

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

    .site-header {

        padding:
            10px 8px 0;
    }


    .nav-shell {

        min-height: 62px;

        padding:
            0 18px;

        border-radius:
            0 0 20px 20px;
    }


    .brand strong {

        font-size: 22px;
    }


    .brand span {

        font-size: 8px;
    }


    .desktop-nav {

        display: none;
    }


    .mobile-menu {

        display: block;
    }


    .mobile-menu-list {

        position: absolute;

        right: 0;

        top: 36px;

        width: 180px;

        padding: 12px;

        background:
            var(--paper);

        border-radius: 18px;

        box-shadow:
            var(--shadow);

        display: grid;

        gap: 2px;
    }


    .mobile-menu-list a {

        padding: 10px;

        border-radius: 10px;

        font-size: 12px;
    }


    .mobile-menu-list a:hover {

        background:
            var(--pink);
    }

    .hero {

        min-height: auto;

        display: block;

        padding-top: 95px;

        padding-bottom: 90px;
    }


    .hero-copy {

        padding-left: 0;
    }


    .hero h1 {

        font-size:
            clamp(64px,20vw,105px);

        margin:
            18px 0 22px;
    }


    .hero-intro {

        font-size: 17px;

        max-width: 330px;
    }


    .hero-visual {

        min-height: 470px;

        margin-top: 55px;
    }


    .hero-photo {

        inset: 0;

        border-radius:
            42% 10% 10% 42%;
    }


    .hero-stamp {

        left: -4%;

        top: 8%;

        width: 100px;

        height: 100px;
    }


    .hero-stamp span {

        font-size: 38px;
    }


    .hero-stamp small {

        font-size: 7px;
    }


    .hero-caption {

        right: -2%;

        bottom: 4%;

        width: 190px;

        padding: 14px;

        border-radius: 16px;
    }


    .hero-caption p {

        font-size: 10px;
    }


    .hero-marquee {

        bottom: 10px;

        font-size: 36px;
    }

    .intro {

        padding-top: 90px;

        padding-bottom: 100px;
    }


    .intro-grid {

        grid-template-columns: 1fr;

        gap: 40px;

        padding:
            55px 0 0;
    }


    .intro h2 {

        font-size: 66px;
    }


    .intro .lead {

        font-size: 20px;
    }

    .glance {

        padding-top: 75px;

        padding-bottom: 80px;

        border-radius:
            50px 50px 0 0;
    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;

        margin-top: 50px;
    }


    .stats-grid article {

        min-height: 190px;

        padding: 18px;
    }


    .stats-grid article:nth-child(odd) {

        border-left:
            1px solid
            rgba(255,255,255,.38);
    }


    .stats-grid article:nth-child(3) {

        border-left:
            1px solid
            rgba(255,255,255,.38);
    }


    .stats-grid strong {

        font-size: 70px;
    }


    .stats-grid span {

        font-size: 10px;
    }

    .area,
    .flavors,
    .culture,
    .journal {

        padding-top: 90px;

        padding-bottom: 100px;
    }


    .section-heading {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .section-heading h2 {

        font-size: 66px;
    }


    .section-heading > p {

        font-size: 15px;
    }

    .map-card {

        margin-top: 50px;

        border-radius: 32px;
    }


    .map-copy {

        padding: 35px;

        min-height: 390px;
    }


    .map-copy h3 {

        font-size: 48px;
    }


    .map-image {

        min-height: 360px;

        margin: 14px;

        border-radius: 24px;
    }


    .map-image img {

        width: 92%;

        height: 92%;
    }

    .food-grid {

        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 55px;
    }


    .food-card-large {

        grid-column: auto;
    }


    .food-card-large .food-photo,
    .food-photo {

        height: 300px;
    }


    .food-info h3 {

        font-size: 34px;
    }


    .text-card {

        min-height: 270px;
    }

    .ingredients {

        width: 100%;

        border-radius: 50px;

        display: block;

        padding:
            80px 24px;
    }


    .ingredients-copy h2 {

        font-size: 66px;
    }


    .ingredient-wheel {

        margin-top: 65px;

        width: 100%;
    }


    .ingredient-item {

        width: 90px;

        height: 90px;
    }


    .ingredient-item b {

        font-size: 8px;
    }


    .ingredient-item span {

        font-size: 27px;
    }


    .ingredient-center {

        inset: 34%;

        font-size: 42px;
    }

    .process {

        padding-top: 100px;

        padding-bottom: 100px;
    }


    .process-line {

        grid-template-columns: 1fr;

        margin-top: 55px;
    }


    .process-line article,
    .process-line article:first-child,
    .process-line article:nth-child(4),
    .process-line article:nth-child(5) {

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

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

        border-top: 0;

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

        min-height: 180px;
    }


    .process-line article h3 {

        margin:
            30px 0 10px;

        font-size: 31px;
    }

    .people {

        width: 100%;

        grid-template-columns: 1fr;

        border-radius: 45px;
    }


    .people-image {

        min-height: 400px;
    }


    .people-copy {

        padding:
            60px 28px;
    }


    .people-copy h2 {

        font-size: 70px;
    }

    .culture-grid {

        grid-template-columns: 1fr;

        margin-top: 55px;
    }


    .culture-grid article,
    .culture-grid article:nth-child(odd) {

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

        min-height: 230px;
    }


    .culture-grid h3 {

        font-size: 48px;

        margin:
            35px 0 12px;
    }

    .quote-section {

        min-height: 520px;

        border-radius:
            50px 50px 0 0;
    }


    .quote-section p {

        font-size: 64px;
    }

    .journal-grid {

        grid-template-columns: 1fr;

        margin-top: 55px;

        gap: 55px;
    }


    .journal-photo {

        height: 330px;
    }


    .journal-grid h3 {

        font-size: 32px;
    }

    .subscribe {

        width: 100%;

        border-radius:
            50px 50px 0 0;

        grid-template-columns: 1fr;

        padding:
            70px 24px;

        gap: 50px;
    }


    .subscribe h2 {

        font-size: 62px;
    }


    .subscribe-form {

        gap: 18px;
    }

    .site-footer {

        padding:
            35px 20px 0;
    }


    .footer-top {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .footer-links {

        justify-content: flex-start;

        flex-wrap: wrap;
    }


    .copyright {

        text-align: left;
    }


    .footer-word {

        font-size: 38vw;

        margin-top: 90px;
    }

}

@media (max-width:390px) {

    .hero h1 {

        font-size: 62px;
    }


    .hero-visual {

        min-height: 400px;
    }


    .hero-stamp {

        width: 82px;

        height: 82px;
    }


    .hero-caption {

        width: 170px;
    }


    .intro h2,
    .section-heading h2,
    .ingredients-copy h2 {

        font-size: 56px;
    }


    .quote-section p {

        font-size: 53px;
    }


    .subscribe h2 {

        font-size: 53px;
    }


    .ingredient-item {

        width: 76px;

        height: 76px;
    }


    .ingredient-center {

        inset: 31%;

        font-size: 34px;
    }

}



@media screen and (max-width:1024px){


    /* 页面整体宽度 */

    main > section{

        width:calc(100% - 80px);

    }


    .container{

        width:90%;

    }



    .nav{

        width:90%;

    }



    .nav-links{

        gap:20px;

        font-size:11px;

    }





    .hero h1{

        font-size:90px;

    }



    .section-title h2,
    .intro h2,
    .kitchen-copy h2,
    .people-copy h2{

        font-size:70px;

    }




    .intro-inner,
    .kitchen-inner,
    .flavor-wheel-layout{


        gap:40px;

    }




    .flavors-grid{

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

    }



    .journal-grid{

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

    }





    .flavor-wheel-section{

        padding:60px 40px;

    }


    .flavor-node{

        width:100px;

        height:100px;

    }


    .flavor-center{

        width:130px;

        height:130px;

    }




    .subscribe-form{

        width:90%;

    }


}




@media screen and (max-width:768px){


    /* 防止横向滚动 */

    html,
    body{

        overflow-x:hidden;

    }




    main > section{

        width:
        calc(100% - 32px);

    }



    .container{

        width:
        calc(100% - 30px);

    }





    .nav{

        min-height:65px;

        width:
        calc(100% - 30px);

    }



    /* 隐藏PC导航 */

    .nav-links{

        display:none;

    }



    /* 如果有手机菜单 */

    .mobile-menu{

        display:block;

    }





    .hero{

        min-height:auto;

        padding:
        60px 20px;

        display:flex;

        flex-direction:column;

    }



    .hero h1{

        font-size:

        clamp(48px,12vw,65px);

        line-height:.95;

    }



    .hero p{

        font-size:15px;

        line-height:1.8;

    }



    .hero-image{

        position:relative;

        width:100%;

        height:300px;

        margin-top:40px;

    }





    .intro-inner,
    .kitchen-inner,
    .flavor-wheel-layout{


        display:flex;

        flex-direction:column;

        gap:35px;


    }






    .section-title h2,
    .intro h2,
    .kitchen-copy h2,
    .people-copy h2{


        font-size:

        clamp(45px,10vw,60px);


        line-height:.95;

    }




  


    .flavors-inner{

        width:
        calc(100% - 20px);

    }



    .flavors-header h2{


        font-size:

        clamp(50px,12vw,65px);

    }



    .flavors-header p{


        font-size:17px;

        line-height:1.7;


    }





    .flavors-grid{

        grid-template-columns:

        1fr;

        gap:25px;

    }



    .food-card{

        width:100%;

    }




    img{

        max-width:100%;

        height:auto;

    }



    .map-wrapper img,
    .map-image{


        min-height:260px;

        border-radius:16px;

    }





    .flavor-wheel-section{


        width:
        calc(100% - 20px);


        padding:

        50px 20px;


        border-radius:30px;


    }



    .flavor-wheel-copy{


        padding:0 10px;


    }



    .flavor-wheel-copy h2{


        font-size:

        clamp(45px,12vw,65px);


    }



    .flavor-wheel{


        width:

        90vw;


        height:

        90vw;


        margin:auto;


    }



    .flavor-center{


        width:100px;

        height:100px;


    }



    .flavor-node{


        width:75px;

        height:75px;


    }



    .flavor-node strong{


        font-size:18px;


    }





    .quote-section{


        width:

        calc(100% - 20px);


        padding:

        50px 25px;


        border-radius:20px;


    }



    .quote-inner{


        padding:0 5px;

    }



    .quote-section p,
    .quote-section blockquote{


        font-size:

        clamp(38px,10vw,55px);


        line-height:.95;


    }




    .journal-grid{


        grid-template-columns:

        1fr;


    }



    .journal-header{


        display:block;


    }



    .journal-header p{


        margin-top:25px;


    }




    .culture-grid{


        grid-template-columns:

        1fr;


    }



    .culture-card{


        min-height:350px;


    }





    .subscribe-section{


        width:

        calc(100% - 20px);


        padding:

        55px 25px;


        border-radius:20px;


    }



    .subscribe-section h2{


        font-size:

        clamp(40px,10vw,60px);


    }



    .subscribe-form{


        width:100%;


        margin-top:40px;


    }



    .subscribe-form input{


        width:100%;


        height:55px;


        padding-left:20px;


    }



    .subscribe-form button{


        width:100%;


        height:52px;


    }





    .site-footer{


        width:

        calc(100% - 40px);


        flex-direction:column;


        gap:30px;


    }


}



@media screen and (max-width:480px){



    .hero h1{


        font-size:45px;


    }



    .section-title h2,
    .intro h2,
    .kitchen-copy h2,
    .people-copy h2{


        font-size:42px;


    }




    .food-content h3{


        font-size:24px;


    }




    .flavor-node{


        width:65px;

        height:65px;


    }



    .flavor-node small{


        font-size:7px;


    }



    .flavor-center{


        width:85px;

        height:85px;


    }




    .quote-section p,
    .quote-section blockquote{


        font-size:38px;


    }



    .subscribe-section h2{


        font-size:42px;


    }



}