:root {
      --cream: #f8f3eb;
      --brown: #38251b;
      --coffee: #77513a;
      --gold: #b58b5a;
      --white: #ffffff;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      background: var(--cream);
      color: var(--brown);
      line-height: 1.7;
    }

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

    header {
      background: var(--cream);
      padding: 22px 7%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    .logo {
      font-size: 25px;
      font-weight: bold;
      letter-spacing: 2px;
    }

    .logo span {
      display: block;
      font-size: 11px;
      letter-spacing: 4px;
      text-align: center;
      color: var(--coffee);
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      font-family: Arial, sans-serif;
      font-size: 13px;
    }

    nav a:hover {
      color: var(--gold);
    }

    .hero {
      min-height: 580px;
      background:
        linear-gradient(rgba(32, 20, 13, .65),
                        rgba(32, 20, 13, .65)),
        url("https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1800&q=85");
      background-position: center;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      padding: 80px 20px;
    }

    .hero-content {
      max-width: 780px;
    }

    .eyebrow {
      text-transform: uppercase;
      letter-spacing: 4px;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }

    h1 {
      font-size: clamp(42px, 6vw, 76px);
      line-height: 1.15;
      font-weight: normal;
      margin: 20px 0;
    }

    h2 {
      font-size: clamp(32px, 4vw, 46px);
      font-weight: normal;
      line-height: 1.2;
      margin: 15px 0 25px;
    }

    h3 {
      font-size: 24px;
      margin: 15px 0 5px;
    }

    .button {
      display: inline-block;
      background: var(--gold);
      color: white;
      padding: 14px 28px;
      margin-top: 20px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: background .2s;
    }

    .button:hover {
      background: var(--coffee);
    }

    section {
      padding: 90px 8%;
    }

    .section-heading {
      text-align: center;
      max-width: 650px;
      margin: 0 auto 50px;
    }

    .section-heading p {
      color: var(--coffee);
    }

    .coffee-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 28px;
    }

    .coffee-card {
      background: white;
      overflow: hidden;
    }

    .coffee-card img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      display: block;
    }

    .coffee-info {
      padding: 25px;
    }

    .coffee-info p {
      color: #705f52;
      font-size: 15px;
    }

    .text-link {
      display: inline-block;
      margin-top: 10px;
      border-bottom: 1px solid var(--gold);
      padding-bottom: 5px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .story {
      background: #eae0d2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .story img {
      width: 100%;
      height: 430px;
      object-fit: cover;
    }

    .dark-section {
      background: var(--brown);
      color: white;
      text-align: center;
    }

    .dark-section p {
      max-width: 650px;
      margin: 0 auto 15px;
    }

    .education {
      text-align: center;
    }

    .education p {
      max-width: 680px;
      margin: 0 auto 20px;
    }

    .contact {
      background: #eae0d2;
      text-align: center;
    }

    footer {
      background: #241811;
      color: #eee4d9;
      padding: 45px 8%;
      text-align: center;
    }

    footer p {
      font-family: Arial, sans-serif;
      font-size: 13px;
    }

    footer a {
      text-decoration: underline;
    }

    @media (max-width: 750px) {
      header {
        justify-content: center;
        text-align: center;
      }

      nav {
        justify-content: center;
        gap: 14px;
      }

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

      section {
        padding: 65px 6%;
      }

      .hero {
        min-height: 500px;
      }
    }
  
/* Product details */
.button { background: #77513a; }
.button:hover { background: #38251b; }
a:focus-visible { outline: 3px solid #77513a; outline-offset: 5px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10; padding: .75rem; background: white; }
.skip-link:focus { top: 1rem; }
.product-wrap { max-width: 1280px; margin: auto; padding: 28px 6% 70px; }
.breadcrumb { font: 13px/1.6 Arial, sans-serif; margin: 10px 0 35px; color: #77513a; }
.breadcrumb a { text-decoration: underline; }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(25px,5vw,70px); align-items: start; }
.product-photo { width: 100%; aspect-ratio: 1; object-fit: cover; background: #eae0d2; }
.product-copy h1 { font-size: clamp(36px,4vw,58px); margin: 12px 0 20px; overflow-wrap: anywhere; }
.product-copy .eyebrow { letter-spacing: 2px; }
.product-price { font-size: 27px; margin: 12px 0; }
.product-copy dl { margin: 25px 0; }
.product-copy dl div { padding: 12px 0; border-bottom: 1px solid #ded1bf; }
.product-copy dt { font: bold 11px/1.5 Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #77513a; }
.product-copy dd { margin: 3px 0 0; }
.order-note { font: 14px/1.7 Arial, sans-serif; color: #705f52; }
.product-description { max-width: 780px; padding: 50px 0 10px; }
.related { padding: 55px 0 0; border-top: 1px solid #ded1bf; margin-top: 40px; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.related-links a { text-decoration: underline; }
.coffee-card h3 a:hover { color: #77513a; text-decoration: underline; }
@media (max-width: 750px) { .product-layout { grid-template-columns: 1fr; } .product-photo { max-height: 380px; } .product-wrap { padding-inline: 6%; } }

/* Content and email inquiries */
header nav{max-width:850px;align-items:flex-start;gap:16px}
.shop-navigation{display:flex;flex-direction:column;gap:5px}.shop-sublinks{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:#77513a}
.page-wrap{max-width:1280px;margin:auto;padding:30px 6% 80px}.page-wrap>h1{font-size:clamp(38px,5vw,62px);margin-bottom:35px}
.prose{max-width:800px;font-size:18px;line-height:1.85}.prose a,.collection-navigation a,.promo a{text-decoration:underline}
.page-wrap .prose h2{margin-top:30px}.promo{background:#eae0d2;padding:28px;margin:30px 0 40px}.promo h2{font-size:24px}.promo h3{font-size:20px}
.collection-navigation{display:flex;flex-wrap:wrap;gap:20px;margin:25px 0}.collection-heading{margin-top:65px}
.inquiry-form{max-width:760px;margin-top:30px}.inquiry-form>label,.email-result>label{display:block;margin:22px 0;font:16px/1.6 Arial,sans-serif}
.inquiry-form input:not([type=checkbox]),.inquiry-form select,.inquiry-form textarea{display:block;width:100%;padding:13px;margin-top:8px;border:1px solid #a9927e;border-radius:2px;background:#fff;color:#38251b;font:16px/1.5 Arial,sans-serif;box-sizing:border-box}
.inquiry-form fieldset{border:1px solid #cdbda9;margin:26px 0;padding:18px}.inquiry-form legend{font:16px/1.6 Arial,sans-serif;padding:0 7px}
.inquiry-form .choice{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font:16px/1.5 Arial,sans-serif}.choice input{width:18px;height:18px;margin-top:3px;accent-color:#77513a;flex:none}
button.button{border:0;cursor:pointer}.email-result{background:#eae0d2;padding:25px;margin-top:30px}.email-result[hidden]{display:none}
.inquiry-form :focus-visible{outline:3px solid #77513a;outline-offset:3px}.form-status{font:15px/1.7 Arial,sans-serif}.product-description p{overflow-wrap:anywhere}
@media(max-width:750px){header nav{justify-content:center}.shop-navigation{align-items:center}.page-wrap{padding-inline:6%}.email-result{padding:18px}.promo{padding:20px}}

/* Consistent main menu and accessible coffee dropdown */
header{flex-wrap:nowrap;gap:32px}
header .logo{flex-shrink:0}
header nav{max-width:none;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:clamp(16px,2vw,30px)}
header nav>a,header summary{white-space:nowrap;display:block;padding:12px 0;line-height:1.4}
header .shop-navigation{position:relative;display:block}
header summary{cursor:pointer;list-style:none;font:inherit}
header summary::-webkit-details-marker{display:none}
header summary::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-3px) rotate(45deg);margin-left:9px}
header .shop-navigation[open] summary::after{transform:translateY(0) rotate(225deg)}
header .shop-sublinks{position:absolute;top:100%;left:-18px;min-width:210px;z-index:20;display:flex;flex-direction:column;gap:0;background:var(--cream);border:1px solid #ded1bf;box-shadow:0 10px 22px #38251b20;padding:8px;font:14px/1.5 Arial,sans-serif;color:var(--dark)}
header .shop-sublinks a{padding:12px;white-space:nowrap}
header .shop-sublinks a:hover{background:#eae0d2}
header :focus-visible{outline:2px solid #77513a;outline-offset:4px}
header summary:hover{color:var(--gold)}
@media(max-width:1050px){header{padding:18px 5%;gap:20px}header .logo{font-size:21px}header nav{gap:16px;font-size:12px}}
@media(max-width:850px){header{flex-direction:column;gap:12px}header nav{justify-content:center;flex-wrap:wrap;gap:4px 22px}header nav>a,header summary{padding:9px 0}}
@media(max-width:450px){header nav{gap:2px 18px;font-size:13px}header .shop-sublinks{left:-24px}}