:root {
        --ink: #211914;
        --espresso: #2e211b;
        --creme: #fdfbf7;
        --linen: #f4efe9;
        --copper: #c86d51;
        --clay: #a85139;
        --muted: #786b62;
        --line: rgba(33, 25, 20, .13);
        --shadow: 0 22px 60px rgba(48, 29, 20, .13);
        --serif: 'Playfair Display', Georgia, serif;
        --sans: 'DM Sans', Arial, sans-serif
    }

    * {
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth
    }

    body {
        margin: 0;
        background: var(--creme);
        color: var(--ink);
        font-family: var(--sans);
        line-height: 1.6
    }

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

    img {
        display: block;
        width: 100%;
        object-fit: cover
    }

    button,
    input,
    textarea {
        font: inherit
    }

    button {
        cursor: pointer;
        border: 0
    }

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

    .eyebrow {
        color: var(--copper);
        font-size: .72rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-weight: 700
    }

    .serif {
        font-family: var(--serif)
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        transition: .35s;
        padding: 22px 0;
        color: #fff
    }

    .site-header.scrolled {
        background: rgba(33, 25, 20, .93);
        backdrop-filter: blur(14px);
        padding: 13px 0;
        box-shadow: 0 4px 30px rgba(0, 0, 0, .13)
    }

    .nav-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px
    }

    .logo {
        font-family: var(--serif);
        font-size: 1.36rem;
        letter-spacing: .08em;
        font-weight: 600
    }

    .logo small {
        display: block;
        font: 600 .5rem var(--sans);
        letter-spacing: .24em;
        text-transform: uppercase;
        color: #d9b2a3;
        margin-top: -3px
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 30px;
        font-size: .82rem
    }

    .nav-links a {
        opacity: .88;
        transition: .2s
    }

    .nav-links a:hover {
        color: #e7ad98;
        opacity: 1
    }

    .header-cta,
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 3px;
        padding: 12px 18px;
        background: var(--copper);
        color: #fff;
        font-weight: 700;
        font-size: .78rem;
        letter-spacing: .03em;
        transition: .25s
    }

    .header-cta:hover,
    .btn:hover {
        background: #d57c60;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(200, 109, 81, .24)
    }

    .menu-toggle {
        display: none;
        background: transparent;
        color: white;
        font-size: 1.55rem
    }

    .hero {
        min-height: 100vh;
        width: 100%;
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        color: #fff;
        background: linear-gradient(90deg, rgba(18, 11, 8, .86) 0%, rgba(28, 17, 12, .48) 52%, rgba(21, 12, 8, .15) 100%), url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=2200&q=88') center/cover
    }

    .hero:after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .12;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")
    }

    .hero-content {
        position: relative;
        z-index: 1;
        padding: 0 0 12vh;
        max-width: 850px
    }

    .hero h1 {
        font: 600 clamp(3.6rem, 8.3vw, 7.7rem)/.93 var(--serif);
        letter-spacing: -.045em;
        margin: 18px 0 25px
    }

    .hero h1 em {
        color: #e4a28b;
        font-style: normal
    }

    .hero p {
        font-size: 1.04rem;
        max-width: 480px;
        color: #eee5df;
        margin: 0 0 31px
    }

    .hero-meta {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-top: 68px;
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #d4c5bd
    }

    .hero-meta span {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .hero-meta i {
        display: inline-block;
        width: 36px;
        height: 1px;
        background: var(--copper)
    }

    section {
        padding: 125px 0
    }

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

    .section-head h2 {
        font: 600 clamp(2.35rem, 4.3vw, 4rem)/1.05 var(--serif);
        letter-spacing: -.03em;
        margin: 14px 0 0;
        max-width: 600px
    }

    .section-head p {
        max-width: 330px;
        color: var(--muted);
        font-size: .94rem;
        margin: 0
    }

    .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 70px;
        align-items: center
    }

    .image-frame {
        position: relative
    }

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

    .image-frame img {
        position: relative;
        z-index: 1;
        aspect-ratio: 1.08/1;
        max-height: 530px
    }

    .split-copy {
        padding: 13px 0
    }

    .split-copy h3 {
        font: 600 clamp(2rem, 3vw, 3rem)/1.1 var(--serif);
        margin: 17px 0 22px
    }

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

    .rule-list {
        display: grid;
        gap: 15px;
        margin-top: 27px
    }

    .rule {
        display: flex;
        align-items: center;
        gap: 13px;
        font-size: .85rem;
        font-weight: 600
    }

    .icon {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 1px solid var(--copper);
        border-radius: 50%;
        color: var(--copper);
        font-size: .83rem;
        flex: none
    }

    .section-cream {
        background: var(--linen)
    }

    .reverse .image-frame {
        order: 2
    }

    .reverse .split-copy {
        order: 1
    }

    .tag {
        display: inline-block;
        margin-top: 22px;
        padding: 7px 11px;
        border: 1px solid rgba(200, 109, 81, .4);
        color: var(--clay);
        font-size: .71rem;
        letter-spacing: .09em;
        text-transform: uppercase;
        font-weight: 700
    }

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

    .product {
        background: #fff;
        box-shadow: 0 8px 30px rgba(43, 29, 21, .06);
        transition: .3s;
        position: relative
    }

    .product:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow)
    }

    .product img {
        aspect-ratio: 1/1.03
    }

    .product-body {
        padding: 22px 22px 24px
    }

    .product-meta {
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: .74rem;
        margin-bottom: 9px
    }

    .product h3 {
        font: 600 1.55rem var(--serif);
        margin: 0 0 7px
    }

    .notes {
        color: var(--muted);
        font-size: .86rem;
        min-height: 44px
    }

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

    .price {
        font-weight: 700
    }

    .mini-btn {
        color: var(--clay);
        font-weight: 700;
        font-size: .76rem
    }

    .mini-btn:after {
        content: '  →';
        font-size: 1rem
    }

    .featured {
        background: var(--espresso);
        color: #fff
    }

    .featured .notes,
    .featured .product-meta {
        color: #c5b3aa
    }

    .featured .product-bottom {
        border-color: rgba(255, 255, 255, .16)
    }

    .roastery {
        background: var(--espresso);
        color: #fff;
        padding: 0
    }

    .roastery-grid {
        display: grid;
        grid-template-columns: 1.12fr .88fr;
        min-height: 670px
    }

    .roastery img {
        height: 100%;
        min-height: 510px
    }

    .roastery-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 75px clamp(35px, 7vw, 100px)
    }

    .roastery-copy p {
        color: #cdbfb7;
        max-width: 430px;
        margin: 22px 0 31px
    }

    .roastery-copy .eyebrow {
        color: #d78a70
    }

    .roastery-copy h2 {
        font: 600 clamp(2.5rem, 4.6vw, 4.4rem)/1.04 var(--serif);
        margin: 17px 0 0;
        letter-spacing: -.04em
    }

    .roastery-copy .btn {
        align-self: flex-start
    }

    .team-grid,
    .guide-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px
    }

    .person img {
        aspect-ratio: .86/1
    }

    .person figcaption {
        padding: 18px 0
    }

    .person h3 {
        font: 600 1.5rem var(--serif);
        margin: 0 0 2px
    }

    .person p {
        font-size: .8rem;
        color: var(--muted);
        margin: 0
    }

    .person .mini-btn {
        display: inline-block;
        margin-top: 15px
    }

    .guide {
        border-top: 1px solid var(--ink);
        padding-top: 20px;
        transition: .25s
    }

    .guide:hover {
        color: var(--clay);
        border-color: var(--copper)
    }

    .guide-number {
        font-size: .71rem;
        color: var(--copper);
        font-weight: 700
    }

    .guide h3 {
        font: 600 1.65rem/1.15 var(--serif);
        margin: 23px 0 13px
    }

    .guide p {
        color: var(--muted);
        font-size: .87rem;
        margin: 0
    }

    .guide a {
        display: inline-block;
        margin-top: 21px;
        font-size: .76rem;
        font-weight: 700;
        color: var(--clay)
    }

    .contact {
        background: var(--linen)
    }

    .contact-grid {
        display: grid;
        grid-template-columns: .75fr 1.25fr;
        gap: 100px
    }

    .contact h2 {
        font: 600 clamp(2.5rem, 4vw, 4.2rem)/1.05 var(--serif);
        margin: 14px 0 22px;
        letter-spacing: -.035em
    }

    .contact-intro {
        color: var(--muted);
        max-width: 350px
    }

    .contact-list {
        margin-top: 42px;
        display: grid;
        gap: 22px
    }

    .contact-item label {
        display: block;
        text-transform: uppercase;
        letter-spacing: .15em;
        font-size: .65rem;
        color: var(--copper);
        font-weight: 700;
        margin-bottom: 5px
    }

    .contact-item div {
        font-size: .93rem
    }

    .form {
        background: #fff;
        padding: 38px 42px;
        box-shadow: 0 10px 40px rgba(46, 33, 27, .07)
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .field {
        margin-bottom: 22px
    }

    .field label {
        display: block;
        font-size: .75rem;
        font-weight: 700;
        margin-bottom: 8px
    }

    .field input,
    .field textarea {
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
        outline: none;
        background: transparent;
        color: var(--ink);
        resize: vertical
    }

    .field input:focus,
    .field textarea:focus {
        border-color: var(--copper)
    }

    .field textarea {
        min-height: 104px
    }

    .form .btn {
        margin-top: 5px
    }

    .form-message {
        display: none;
        color: var(--clay);
        font-size: .8rem;
        margin: 13px 0 0
    }

    .form-message.show {
        display: block
    }

    footer {
        background: var(--ink);
        color: #fff;
        padding: 50px 0 25px
    }

    .footer-top {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        padding-bottom: 47px;
        border-bottom: 1px solid rgba(255, 255, 255, .15)
    }

    .footer-top p {
        color: #b8aaa2;
        font-size: .8rem;
        max-width: 220px
    }

    .footer-links {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        font-size: .75rem;
        color: #cbbbB3
    }

    .footer-links a:hover {
        color: #e1a18d
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        color: #8f8078;
        font-size: .68rem
    }

    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: .75s ease
    }

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

    @media(max-width:800px) {
        .container {
            width: min(100% - 36px, 600px)
        }

        .site-header {
            padding: 17px 0
        }

        .nav-links {
            display: none;
            position: absolute;
            top: 65px;
            left: 18px;
            right: 18px;
            padding: 22px;
            background: rgba(33, 25, 20, .98);
            flex-direction: column;
            align-items: flex-start;
            gap: 19px;
            border: 1px solid rgba(255, 255, 255, .12)
        }

        .nav-links.open {
            display: flex
        }

        .header-cta {
            display: none
        }

        .menu-toggle {
            display: block
        }

        .hero-content {
            padding-bottom: 9vh
        }

        .hero h1 {
            font-size: clamp(3.6rem, 16vw, 6rem)
        }

        .hero p {
            font-size: .94rem
        }

        .hero-meta {
            margin-top: 50px;
            gap: 15px
        }

        .hero-meta span:last-child {
            display: none
        }

        section {
            padding: 85px 0
        }

        .section-head {
            display: block;
            margin-bottom: 35px
        }

        .section-head p {
            margin-top: 20px
        }

        .split,
        .roastery-grid,
        .contact-grid {
            grid-template-columns: 1fr;
            gap: 42px
        }

        .reverse .image-frame {
            order: 1
        }

        .reverse .split-copy {
            order: 2
        }

        .image-frame img {
            aspect-ratio: 1.18/1
        }

        .products,
        .team-grid,
        .guide-grid {
            grid-template-columns: 1fr
        }

        .product img {
            aspect-ratio: 1.6/1
        }

        .roastery-grid {
            min-height: 0
        }

        .roastery img {
            min-height: 330px;
            max-height: 460px
        }

        .roastery-copy {
            padding: 65px 0 75px
        }

        .contact-grid {
            gap: 45px
        }

        .form {
            padding: 28px 22px
        }

        .form-row {
            grid-template-columns: 1fr
        }

        .footer-top,
        .footer-bottom {
            display: block
        }

        .footer-links {
            margin-top: 25px;
            flex-wrap: wrap;
            gap: 13px 20px
        }

        .footer-bottom {
            margin-top: 20px
        }

        .footer-bottom span {
            display: block;
            margin-top: 7px
        }
    }