:root {
        --espresso: #211814;
        --roast: #3a2720;
        --copper: #b56f4d;
        --terracotta: #a8583e;
        --cream: #f4eee5;
        --paper: #fbf8f3;
        --charcoal: #282321;
        --muted: #756b64;
        --line: rgba(58, 39, 32, .16);
        --shadow: 0 24px 70px rgba(33, 24, 20, .14);
        --serif: 'Cormorant Garamond', Georgia, serif;
        --sans: 'Manrope', 'Trebuchet MS', sans-serif;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        color: var(--charcoal);
        background: var(--paper);
        font-family: var(--sans);
        line-height: 1.55;
        overflow-x: hidden;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: .035;
        z-index: 20;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
    }

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

    button {
        font: inherit;
    }

    .container {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
    }

    .eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        color: var(--copper);
        text-transform: uppercase;
        letter-spacing: .18em;
        font-size: .68rem;
        font-weight: 800;
    }

    .eyebrow::before {
        content: "";
        width: 28px;
        height: 1px;
        background: currentColor;
    }

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

    h1,
    h2,
    h3 {
        font-family: var(--serif);
        line-height: .92;
        font-weight: 600;
    }

    h2 {
        font-size: clamp(3rem, 6vw, 5.3rem);
        letter-spacing: -.045em;
        margin-bottom: 26px;
    }

    h3 {
        font-size: 2rem;
        letter-spacing: -.025em;
        margin-bottom: 10px;
    }

    .btn {
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        cursor: pointer;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        transition: transform .25s ease, background .25s ease, color .25s ease;
    }

    .btn:hover {
        transform: translateY(-3px);
    }

    .btn-primary {
        color: var(--paper);
        background: var(--terracotta);
        box-shadow: 0 10px 24px rgba(168, 88, 62, .22);
    }

    .btn-primary:hover {
        background: #8f4635;
    }

    .btn-quiet {
        color: var(--espresso);
        border-color: var(--line);
    }

    .btn-quiet:hover {
        background: var(--espresso);
        color: var(--paper);
    }

    .arrow {
        font-size: 1rem;
        transition: transform .25s;
    }

    .btn:hover .arrow {
        transform: translateX(4px);
    }

    .hero {
        min-height: 100svh;
        position: relative;
        color: var(--paper);
        display: flex;
        align-items: flex-end;
        isolation: isolate;
        background: #2b1c17;
    }

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(90deg, rgba(28, 18, 14, .88) 0%, rgba(39, 26, 20, .5) 47%, rgba(31, 23, 18, .28) 100%), linear-gradient(0deg, rgba(20, 14, 12, .86) 0%, transparent 54%), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=2200&q=88') center/cover;
        transform: scale(1.01);
    }

    .hero::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background: radial-gradient(circle at 75% 28%, rgba(181, 111, 77, .15), transparent 35%);
    }

    .nav {
        position: absolute;
        inset: 0 0 auto;
        z-index: 5;
        height: 90px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(244, 238, 229, .16);
    }

    .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(1320px, calc(100% - 56px));
        margin: auto;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 11px;
        font-family: var(--serif);
        font-size: 1.65rem;
        font-weight: 600;
        letter-spacing: -.02em;
    }

    .logo-mark {
        width: 26px;
        height: 26px;
        border: 1px solid currentColor;
        border-radius: 50% 50% 46% 46%;
        position: relative;
        display: grid;
        place-items: center;
    }

    .logo-mark::after {
        content: "";
        width: 9px;
        height: 9px;
        border: 1px solid currentColor;
        border-radius: 50%;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: clamp(18px, 2.4vw, 40px);
        margin-left: auto;
        margin-right: 34px;
    }

    .nav-links a {
        position: relative;
        color: rgba(244, 238, 229, .78);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        transition: color .2s;
    }

    .nav-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 0;
        height: 1px;
        background: var(--copper);
        transition: width .25s;
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--paper);
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
        width: 100%;
    }

    .nav-shop {
        background: var(--paper);
        color: var(--espresso);
        padding: 11px 17px;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .nav-shop:hover {
        background: var(--copper);
        color: var(--paper);
    }

    .menu-toggle {
        display: none;
        background: none;
        border: 0;
        color: var(--paper);
        font-size: 1.5rem;
        cursor: pointer;
    }

    .hero-content {
        padding-bottom: clamp(86px, 14vh, 160px);
        max-width: 760px;
    }

    .hero h1 {
        max-width: 740px;
        font-size: clamp(4.6rem, 10.3vw, 9.5rem);
        letter-spacing: -.065em;
        margin-bottom: 28px;
    }

    .hero h1 em {
        color: #dfb29a;
        font-style: italic;
    }

    .hero-copy {
        display: flex;
        align-items: center;
        gap: 35px;
        max-width: 625px;
    }

    .hero-copy p {
        max-width: 365px;
        color: rgba(244, 238, 229, .76);
        font-size: .93rem;
    }

    .hero-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .hero .btn-quiet {
        color: var(--paper);
        border-color: rgba(244, 238, 229, .34);
    }

    .hero .btn-quiet:hover {
        background: var(--paper);
        color: var(--espresso);
    }

    .scroll-cue {
        position: absolute;
        right: 5.5%;
        bottom: 56px;
        display: flex;
        gap: 14px;
        align-items: center;
        color: rgba(244, 238, 229, .68);
        font-size: .62rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        writing-mode: vertical-rl;
    }

    .scroll-cue::after {
        content: "";
        width: 1px;
        height: 58px;
        background: var(--copper);
        animation: pulse 1.8s ease-in-out infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            transform: scaleY(.55);
            transform-origin: top;
            opacity: .4;
        }

        50% {
            transform: scaleY(1);
            opacity: 1;
        }
    }

    section {
        padding: clamp(86px, 12vw, 168px) 0;
    }

    .intro-grid {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 9vw;
        align-items: end;
    }

    .intro-grid .lead {
        max-width: 520px;
        font-size: 1.08rem;
        color: var(--muted);
    }

    .stat-line {
        display: flex;
        gap: 40px;
        padding-top: 26px;
        margin-top: 35px;
        border-top: 1px solid var(--line);
    }

    .stat strong {
        display: block;
        color: var(--espresso);
        font-family: var(--serif);
        font-size: 2.8rem;
        line-height: 1;
    }

    .stat span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-top: 72px;
    }

    .feature {
        min-height: 270px;
        padding: 30px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .32);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform .35s, background .35s;
    }

    .feature:hover {
        transform: translateY(-7px);
        background: #fffdf9;
        box-shadow: var(--shadow);
    }

    .feature-number {
        color: var(--copper);
        font-size: .72rem;
        letter-spacing: .14em;
        font-weight: 800;
    }

    .feature p {
        color: var(--muted);
        font-size: .89rem;
        max-width: 265px;
    }

    .feature-link {
        color: var(--terracotta);
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .dark-section {
        color: var(--paper);
        background: var(--espresso);
        position: relative;
        overflow: hidden;
    }

    .dark-section::before {
        content: "ROAST / RELAX / REPEAT";
        position: absolute;
        right: -25px;
        top: 95px;
        color: rgba(244, 238, 229, .035);
        font-family: var(--serif);
        font-size: clamp(5rem, 16vw, 14rem);
        line-height: .7;
        white-space: nowrap;
        transform: rotate(90deg);
        transform-origin: right top;
        pointer-events: none;
    }

    .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 55px;
    }

    .section-head h2 {
        margin-bottom: 0;
    }

    .dark-section .eyebrow {
        color: #d0987a;
    }

    .dark-section .btn-quiet {
        color: var(--paper);
        border-color: rgba(244, 238, 229, .28);
    }

    .dark-section .btn-quiet:hover {
        background: var(--paper);
        color: var(--espresso);
    }

    .products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .product {
        color: var(--charcoal);
        background: var(--paper);
    }

    .product-image {
        height: 320px;
        overflow: hidden;
        position: relative;
        background: #8c6249;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s;
        filter: saturate(.78);
    }

    .product:hover .product-image img {
        transform: scale(1.06);
    }

    .origin {
        position: absolute;
        left: 17px;
        top: 17px;
        padding: 7px 10px;
        background: rgba(244, 238, 229, .9);
        font-size: .63rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .bag {
        position: absolute;
        right: 18%;
        bottom: 20px;
        width: 28%;
        height: 64%;
        background: linear-gradient(135deg, #e5d8c3, #a99985);
        box-shadow: 14px 15px 30px rgba(33, 24, 20, .3);
        transform: rotate(4deg);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #3c2c25;
        font-family: var(--serif);
        font-size: 1.1rem;
        line-height: .9;
    }

    .bag::before {
        content: "COFFEE\A SHOP";
        white-space: pre;
        letter-spacing: .12em;
        font-family: var(--sans);
        font-size: .48rem;
        font-weight: 800;
        line-height: 1.5;
    }

    .product-info {
        padding: 22px 22px 25px;
    }

    .product-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: start;
    }

    .product h3 {
        font-size: 1.9rem;
        margin-bottom: 2px;
    }

    .price {
        font-family: var(--serif);
        font-size: 1.45rem;
        white-space: nowrap;
    }

    .profile {
        color: var(--muted);
        font-size: .77rem;
        margin-bottom: 22px;
    }

    .product-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--line);
        padding-top: 16px;
    }

    .roast {
        display: flex;
        gap: 4px;
        align-items: center;
        color: var(--muted);
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .roast i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--copper);
    }

    .roast i.off {
        opacity: .2;
    }

    .cart-btn {
        border: 0;
        background: none;
        color: var(--terracotta);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        cursor: pointer;
        padding: 5px 0;
    }

    .cart-btn:hover {
        color: var(--espresso);
    }

    .atelier {
        background: var(--cream);
    }

    .atelier-grid {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 9vw;
        align-items: center;
    }

    .image-frame {
        position: relative;
        height: 650px;
    }

    .image-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.72);
    }

    .image-frame::after {
        content: "";
        position: absolute;
        inset: 18px -18px -18px 18px;
        border: 1px solid var(--copper);
        z-index: -1;
    }

    .pull-quote {
        margin: 42px 0 35px;
        padding-left: 25px;
        border-left: 2px solid var(--copper);
        color: var(--roast);
        font-family: var(--serif);
        font-style: italic;
        font-size: 2rem;
        line-height: 1.06;
        max-width: 480px;
    }

    .atelier-copy p {
        color: var(--muted);
        max-width: 500px;
    }

    .atelier-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin: 35px 0;
        padding: 22px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .atelier-list span {
        font-size: .73rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .atelier-list small {
        display: block;
        color: var(--muted);
        margin-top: 4px;
        font-size: .74rem;
    }

    .knowledge {
        background: var(--paper);
    }

    .knowledge-grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 22px;
    }

    .knowledge-card {
        min-height: 450px;
        padding: 34px;
        color: var(--paper);
        display: flex;
        flex-direction: column;
        justify-content: end;
        position: relative;
        overflow: hidden;
        background: #3c2921;
    }

    .knowledge-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(25, 17, 14, .86), transparent 70%), url('https://images.unsplash.com/photo-1498804103079-a6351b050096?auto=format&fit=crop&w=1200&q=82') center/cover;
        transition: transform .7s;
    }

    .knowledge-card:hover::before {
        transform: scale(1.05);
    }

    .knowledge-card>* {
        position: relative;
    }

    .knowledge-card h3 {
        font-size: 3.2rem;
        max-width: 450px;
        margin-bottom: 9px;
    }

    .knowledge-card p {
        color: rgba(244, 238, 229, .72);
        max-width: 380px;
        margin-bottom: 0;
    }

    .tip-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--line);
    }

    .tip {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 24px 4px 24px 0;
        border-bottom: 1px solid var(--line);
    }

    .tip h3 {
        font-size: 1.55rem;
        margin: 0;
    }

    .tip span {
        color: var(--copper);
        font-family: var(--serif);
        font-size: 2rem;
    }

    .tip small {
        display: block;
        color: var(--muted);
        margin-top: 5px;
        font-size: .78rem;
    }

    .visit {
        color: var(--paper);
        background: var(--roast);
    }

    .visit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11vw;
        align-items: start;
    }

    .visit h2 {
        max-width: 540px;
    }

    .visit-copy {
        color: rgba(244, 238, 229, .7);
        max-width: 400px;
    }

    .details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px 28px;
        margin-top: 40px;
    }

    .detail {
        border-top: 1px solid rgba(244, 238, 229, .25);
        padding-top: 15px;
    }

    .detail strong {
        display: block;
        margin-bottom: 6px;
        color: #dbab8f;
        font-size: .67rem;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

    .detail p {
        margin: 0;
        font-family: var(--serif);
        font-size: 1.55rem;
        line-height: 1.05;
    }

    .map-card {
        min-height: 435px;
        padding: 28px;
        position: relative;
        background: linear-gradient(rgba(39, 26, 20, .2), rgba(39, 26, 20, .4)), url('https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=1100&q=85') center/cover;
    }

    .map-card::after {
        content: "";
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(244, 238, 229, .5);
        pointer-events: none;
    }

    .map-label {
        position: absolute;
        z-index: 1;
        bottom: 48px;
        left: 48px;
        padding: 14px 17px;
        color: var(--espresso);
        background: var(--paper);
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    footer {
        padding: 58px 0 30px;
        color: rgba(244, 238, 229, .75);
        background: var(--espresso);
        border-top: 1px solid rgba(244, 238, 229, .13);
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 65px;
    }

    footer .logo {
        color: var(--paper);
        margin-bottom: 18px;
    }

    .footer-note {
        max-width: 255px;
        font-size: .78rem;
        line-height: 1.7;
    }

    footer h4 {
        margin: 4px 0 18px;
        color: var(--paper);
        font-size: .68rem;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    footer ul {
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: .8rem;
    }

    footer li {
        margin-bottom: 10px;
    }

    footer a:hover {
        color: #d0987a;
    }

    .socials {
        display: flex;
        gap: 9px;
    }

    .socials a {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244, 238, 229, .25);
        font-size: .68rem;
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding-top: 24px;
        border-top: 1px solid rgba(244, 238, 229, .15);
        font-size: .66rem;
        color: rgba(244, 238, 229, .48);
    }

    .cart-toast {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 30;
        padding: 14px 18px;
        color: var(--paper);
        background: var(--roast);
        box-shadow: var(--shadow);
        font-size: .77rem;
        transform: translateY(130%);
        transition: transform .35s ease;
    }

    .cart-toast.show {
        transform: translateY(0);
    }

    .cart-count {
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        margin-left: 5px;
        color: var(--paper);
        background: var(--terracotta);
        border-radius: 50%;
        font-size: .61rem;
    }

    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .8s ease, transform .8s ease;
    }

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

    @media (max-width: 820px) {
        .container {
            width: min(100% - 36px, 620px);
        }

        .nav {
            height: 74px;
        }

        .nav-inner {
            width: calc(100% - 36px);
        }

        .nav-links {
            position: absolute;
            top: 74px;
            left: 0;
            right: 0;
            display: none;
            padding: 20px 24px 25px;
            flex-direction: column;
            align-items: flex-start;
            gap: 21px;
            background: var(--espresso);
            border-top: 1px solid rgba(244, 238, 229, .12);
        }

        .nav-links.open {
            display: flex;
        }

        .nav-shop {
            display: none;
        }

        .menu-toggle {
            display: block;
        }

        .hero {
            min-height: 760px;
        }

        .hero-content {
            padding-bottom: 78px;
        }

        .hero h1 {
            font-size: clamp(4rem, 18vw, 7rem);
        }

        .hero-copy {
            display: block;
        }

        .hero-copy p {
            margin-bottom: 24px;
        }

        .scroll-cue {
            right: 20px;
            bottom: 30px;
        }

        .intro-grid,
        .atelier-grid,
        .visit-grid,
        .knowledge-grid {
            grid-template-columns: 1fr;
            gap: 55px;
        }

        .feature-grid,
        .products {
            grid-template-columns: 1fr;
        }

        .feature {
            min-height: 220px;
        }

        .product-image {
            height: 360px;
        }

        .image-frame {
            height: 480px;
            margin: 0 18px 0 0;
        }

        .section-head {
            align-items: flex-start;
            flex-direction: column;
            margin-bottom: 35px;
        }

        .dark-section::before {
            display: none;
        }

        .knowledge-card {
            min-height: 440px;
        }

        .map-card {
            min-height: 350px;
        }

        .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 35px 22px;
        }

        .footer-grid> :first-child {
            grid-column: 1/-1;
        }
    }

    @media (max-width: 470px) {
        .hero h1 {
            font-size: 4.25rem;
        }

        h2 {
            font-size: 3.25rem;
        }

        .stat-line {
            gap: 20px;
        }

        .stat strong {
            font-size: 2.2rem;
        }

        .details,
        .atelier-list {
            gap: 20px 14px;
        }

        .detail p {
            font-size: 1.25rem;
        }

        .footer-grid {
            grid-template-columns: 1fr;
        }

        .footer-grid> :first-child {
            grid-column: auto;
        }

        .footer-bottom {
            flex-direction: column;
        }
    }