:root {
  --ivory: #f3efe5;
  --paper: #faf7ef;
  --charcoal: #282520;
  --olive: #5d653d;
  --olive-dark: #444b2d;
  --oak: #b79b73;
  --brass: #9a7a48;
  --line: rgba(40, 37, 32, 0.2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--charcoal); font-family: Garamond, "Adobe Garamond Pro", Georgia, serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--paper); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 94px; padding: .8rem clamp(1.25rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: rgba(250,247,239,.97); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.wordmark { text-decoration: none; text-transform: uppercase; line-height: 1; }
.wordmark span { display: block; font-size: 1.35rem; letter-spacing: .14em; white-space: nowrap; }
.wordmark i, .footer-brand i { font-style: normal; color: var(--olive); }
.wordmark small { display: block; margin-top: .48rem; font-family: Arial,sans-serif; font-size: .58rem; letter-spacing: .24em; color: #686259; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); font-family: Arial,sans-serif; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.desktop-nav > a, .nav-dropdown > summary { padding: .55rem 0; text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; list-style: none; }
.desktop-nav > a:hover, .desktop-nav > a:focus-visible, .nav-dropdown > summary:hover, .nav-dropdown > summary:focus-visible { border-color: var(--olive); }
.nav-dropdown { position: relative; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: "⌄"; margin-left: .35rem; color: var(--olive); font-size: .8rem; }
.dropdown-menu { position: absolute; top: calc(100% + .45rem); left: -.9rem; min-width: 190px; padding: .45rem 0; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 22px #28252016; }
.dropdown-menu a { display: block; padding: .7rem .9rem; text-decoration: none; letter-spacing: .06em; }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: var(--ivory); }
.nav-dropdown:not([open]) .dropdown-menu { display: none; }
.mobile-menu { display: none; position: relative; font-family: Arial,sans-serif; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.mobile-menu > summary { list-style: none; cursor: pointer; padding: .7rem 0 .7rem .7rem; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; right: 0; top: calc(100% + .35rem); width: min(290px, 82vw); display: grid; padding: .5rem 0; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 22px #28252016; }
.mobile-menu nav a { padding: .7rem 1rem; text-decoration: none; }
.mobile-menu nav a:hover, .mobile-menu nav a:focus-visible { background: var(--ivory); }
.mobile-menu:not([open]) nav { display: none; }
.hero { position: relative; min-height: min(720px, calc(100vh - 94px)); overflow: hidden; display: grid; align-items: end; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,24,20,.75) 0%, rgba(25,24,20,.36) 47%, rgba(25,24,20,.05) 100%); }
.hero-copy { position: relative; z-index: 1; width: min(840px, 88vw); padding: clamp(5rem, 12vh, 8rem) clamp(1.25rem, 7vw, 7rem); color: #fffdf6; }
.eyebrow { margin: 0 0 1rem; color: var(--olive); font-family: Arial,sans-serif; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero .eyebrow, .category-hero .eyebrow { color: #eee3c9; }
.hero h1 { margin: .8rem 0 1.7rem; font-size: clamp(2.65rem, 6vw, 5.8rem); line-height: .98; font-weight: 400; letter-spacing: -.025em; }
.text-link { display: inline-block; font-family: Arial,sans-serif; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .35rem; }
.text-link span { margin-left: .45rem; }
.text-link.light { color: #fffdf6; }
.section { padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 7vw, 7rem); }
.section h2 { margin: 0; font-size: clamp(2.25rem, 4.7vw, 4.3rem); line-height: 1.05; font-weight: 400; letter-spacing: -.02em; }
.collections-intro { max-width: 850px; margin: 0 auto 2.8rem; text-align: center; }
.collections-intro > p:last-child { max-width: 650px; margin: 1rem auto 0; color: #5f5a51; }
.collection-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.collection-card { display: block; min-width: 0; background: var(--ivory); text-decoration: none; transition: transform .2s ease; }
.collection-card:hover, .collection-card:focus-visible { transform: translateY(-3px); }
.collection-card > img { display: block; width: 100%; aspect-ratio: 1.35 / 1; object-fit: cover; object-position: center; }
.card-copy { display: grid; gap: .35rem; padding: 1.1rem 1.2rem 1.3rem; }
.card-copy .eyebrow { margin: 0; font-size: .58rem; }
.card-copy strong { font-size: clamp(1.1rem, 1.8vw, 1.55rem); line-height: 1.2; font-weight: 400; }
.card-link { margin-top: .4rem; color: var(--olive-dark); font-family: Arial,sans-serif; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.story { display: grid; grid-template-columns: .35fr 1.3fr 1fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.section-mark { padding-top: .25rem; }
.section-mark img { display: block; width: 3.6rem; height: auto; }
.story-copy { max-width: 34rem; }
.story-copy p { margin: 0 0 1.3rem; }
.story-copy .lead { font-size: 1.4rem; line-height: 1.45; }
.belief { background: var(--olive-dark); color: #f9f5e9; padding: clamp(4.5rem, 8vw, 7rem) 1.25rem; text-align: center; }
.belief-inner { max-width: 1050px; margin: 0 auto; }
.belief .eyebrow { color: #e1d1ae; }
blockquote { margin: 1.5rem auto; font-size: clamp(2.05rem, 5vw, 4.4rem); line-height: 1.12; font-weight: 400; }
.leaf-mark { display: block; margin-top: 1.8rem; }
.leaf-mark img { display: block; width: 4rem; height: auto; margin: 0 auto; filter: sepia(.25) saturate(.7) brightness(1.55); }
.values { background: #e8e0d1; }
.values-title { max-width: 850px; }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 3rem; background: rgba(40,37,32,.18); border: 1px solid rgba(40,37,32,.18); }
.value-grid article { min-height: 180px; padding: clamp(2rem,3vw,3rem); background: #e8e0d1; }
.value-grid h3 { margin: 0 0 .35rem; font-size: 1.5rem; font-weight: 400; }
.value-grid p { margin: 0; color: #5f5a51; }
.founder-note { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(4rem,10vw,12rem); align-items: start; }
.note-rule { width: 100%; height: 1px; background: var(--charcoal); margin-top: 1rem; position: relative; }
.note-rule::after { content: "A NOTE FROM THE FOUNDER"; position: absolute; top: 1rem; left: 0; font-family: Arial,sans-serif; font-size: .62rem; letter-spacing: .18em; }
.note-copy { max-width: 700px; font-size: 1.34rem; line-height: 1.55; }
.note-copy p { margin: 0 0 1.4rem; }
.signature { display: inline-block; margin-top: 1.5rem; color: var(--olive); font-family: "Allura","Snell Roundhand","Apple Chancery","Segoe Script",cursive; font-size: 5.5rem; line-height: 1; letter-spacing: -.1em; transform: rotate(-4deg); transform-origin: left center; }
.find-us { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,8vw,8rem); align-items: center; background: #e8e0d1; }
.find-us h2 { max-width: 650px; }
.find-copy p { max-width: 640px; margin: 0 0 1.5rem; color: #514d44; font-size: 1.18rem; }
.upcoming-event { display: grid; grid-template-columns: minmax(90px,150px) 1fr; gap: 1.25rem; align-items: center; margin: 1.6rem 0; padding: 1.25rem 1.5rem; border-left: 2px solid var(--olive); background: rgba(255,253,246,.62); }
.upcoming-event > img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.upcoming-event .eyebrow { margin: 0 0 .45rem; font-size: .62rem; }
.upcoming-event h3 { margin: 0 0 .4rem; color: var(--olive-dark); font-size: 1.4rem; font-weight: 400; }
.upcoming-event-copy > p:last-of-type { margin: 0 0 1rem; font-size: .95rem; }
.connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem,10vw,11rem); align-items: start; }
.connect-heading > img { display: block; width: 3.4rem; height: auto; margin-bottom: 1.7rem; }
.connect-heading h2 { max-width: 650px; }
.connect-copy > p { max-width: 33rem; margin: 0 0 2rem; font-size: 1.22rem; line-height: 1.5; }
.connect-links { border-top: 1px solid var(--line); }
.connect-links a { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.connect-links span { color: var(--olive); font-family: Arial,sans-serif; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.connect-links strong { font-size: 1.08rem; font-weight: 400; overflow-wrap: anywhere; }
.connect-links a:hover strong, .connect-links a:focus-visible strong { color: var(--olive); }
footer { padding: 3.5rem clamp(1.25rem,7vw,7rem); background: var(--charcoal); color: var(--ivory); text-align: center; }
.footer-brand { font-size: 1.5rem; letter-spacing: .15em; text-transform: uppercase; }
footer p { color: #d8d0c0; font-style: italic; }
footer small { color: #a9a092; font-family: Arial,sans-serif; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; }
.category-hero { position: relative; display: grid; align-items: end; min-height: min(550px, 68vh); overflow: hidden; color: #fffdf6; }
.category-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(25,24,20,.72),rgba(25,24,20,.12)); }
.category-hero-copy { position: relative; z-index: 1; max-width: 850px; padding: clamp(4rem,10vh,7rem) clamp(1.25rem,7vw,7rem); }
.category-hero h1 { margin: 0 0 1rem; font-size: clamp(3rem,7vw,6rem); line-height: .98; font-weight: 400; }
.category-hero p:last-child { max-width: 620px; margin: 0; font-size: 1.2rem; }
.breadcrumb { padding: 1rem clamp(1.25rem,7vw,7rem) 0; color: #686259; font-family: Arial,sans-serif; font-size: .65rem; letter-spacing: .08em; }
.breadcrumb a { text-decoration: none; }
.product-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem,7vw,7rem); align-items: start; }
.product-intro h2, .feature-copy h2 { margin: 0; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.08; font-weight: 400; }
.product-intro p, .feature-copy p { margin: .5rem 0 0; color: #514d44; }
.product-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-top: 2.5rem; }
.product-list-five { grid-template-columns: repeat(5,1fr); }
.table-products { grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,2rem); }
.product-list article { min-width: 0; padding: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.product-list article > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: .8rem; }
.product-list h3 { margin: 0 0 .25rem; color: var(--olive-dark); font-size: 1.35rem; font-weight: 400; }
.product-list p { margin: 0; color: #625d53; font-size: .95rem; }
.pantry-jump-links { display: flex; justify-content: center; gap: clamp(1.5rem,5vw,4rem); padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); font-family: Arial,sans-serif; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.pantry-jump-links a { text-decoration: none; color: var(--olive-dark); border-bottom: 1px solid transparent; }
.pantry-jump-links a:hover, .pantry-jump-links a:focus-visible { border-color: currentColor; }
.product-section { scroll-margin-top: 6rem; }
.salts-section { background: #e8e0d1; }
.feature { display: grid; grid-template-columns: 1fr 1fr; background: #e8e0d1; }
.feature img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.feature-copy { align-self: center; padding: clamp(2.5rem,6vw,6rem); }
.feature-copy .eyebrow { margin-bottom: .6rem; }
.market-cta { padding: clamp(3rem,7vw,6rem) 1.25rem; text-align: center; }
.market-cta h2 { margin: 0 auto .7rem; font-size: clamp(2rem,4vw,3.4rem); font-weight: 400; }
.market-cta p { max-width: 610px; margin: 0 auto 1.3rem; color: #5f5a51; }
.market-cta .text-link { color: var(--olive-dark); }
@media (max-width: 1100px) {
  .product-list-five { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 820px) {
  .site-header { min-height: 78px; padding: .65rem 1.25rem; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .hero { min-height: min(680px, calc(100svh - 78px)); }
  .hero-shade { background: linear-gradient(0deg,rgba(25,24,20,.78),rgba(25,24,20,.06) 78%); }
  .hero-copy { width: 100%; padding-bottom: 3.5rem; }
  .collection-cards, .value-grid { grid-template-columns: 1fr; }
  .product-list { grid-template-columns: repeat(2,1fr); }
  .collection-card { display: grid; grid-template-columns: 42% 1fr; align-items: stretch; }
  .collection-card > img { height: 100%; min-height: 150px; aspect-ratio: auto; }
  .card-copy { align-content: center; padding: 1rem; }
  .story, .founder-note, .connect, .find-us, .product-intro, .feature { grid-template-columns: 1fr; }
  .section-mark { display: none; }
  .story { gap: 2rem; }
  .founder-note { gap: 3rem; }
  .connect, .find-us { gap: 2.5rem; }
  .connect-links a { grid-template-columns: 1fr; gap: .2rem; }
  .feature img { min-height: 270px; max-height: 440px; }
  .category-hero { min-height: 420px; }
}
@media (max-width: 440px) {
  body { font-size: 17px; }
  .wordmark span { font-size: 1.08rem; }
  .hero h1 { font-size: clamp(2.4rem,12vw,3.7rem); }
  .section { padding-top: 4rem; padding-bottom: 4rem; }
  .upcoming-event { grid-template-columns: 90px 1fr; gap: 1rem; padding: 1rem; }
  .upcoming-event h3 { font-size: 1.2rem; }
  .collection-card { grid-template-columns: 38% 1fr; }
  .collection-card > img { min-height: 128px; }
  .card-copy strong { font-size: 1.08rem; }
  .category-hero h1 { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .collection-card { transition: none; } }

/* Recipes & inspiration */
.product-image-link { display: block; }
.product-image-link img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .8rem; }
.product-list .product-recipe-link { margin-top: 1rem; font-size: .6rem; letter-spacing: .08em; }
.feature-image { display: block; }
.feature-copy .text-link { margin-top: 1.5rem; color: var(--olive-dark); }
.recipe-heading { padding-bottom: 2.5rem; }
.recipe-heading h1 { max-width: 1000px; margin: 0 0 1rem; font-size: clamp(2.6rem,6vw,5rem); line-height: 1.05; font-weight: 400; }
.recipe-heading > p:last-child { max-width: 720px; color: #514d44; }
.recipe-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items: start; scroll-margin-top: 6rem; }
.recipe-photo { margin: 0; }
.recipe-photo img { display: block; width: 100%; height: auto; }
.recipe-photo figcaption { margin-top: .75rem; color: #625d53; font-size: .85rem; }
.recipe-copy h2 { margin: 0 0 .75rem; font-size: clamp(2.2rem,4vw,3.5rem); font-weight: 400; line-height: 1.1; }
.recipe-copy h3 { margin: 1.8rem 0 .6rem; color: var(--olive-dark); font-size: 1.3rem; font-weight: 400; }
.recipe-copy ul, .recipe-card ul { padding-left: 1.2rem; }
.recipe-copy ol, .recipe-card ol { padding-left: 1.4rem; }
.recipe-copy li, .recipe-card li { padding-left: .2rem; margin: .45rem 0; }
.companion-recipes { background: #e8e0d1; scroll-margin-top: 6rem; }
.recipe-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.recipe-card { min-width: 0; padding: clamp(1.5rem,3vw,2.5rem); background: var(--ivory, #faf7ef); }
.recipe-card h3 { margin: 0 0 1.3rem; color: var(--olive-dark); font-size: 1.9rem; line-height: 1.15; font-weight: 400; }
.recipe-kitchen-note { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; }
.recipe-kitchen-note p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .recipe-feature, .recipe-card-grid { grid-template-columns: 1fr; } .recipe-photo { max-width: 560px; } }

.recipe-card h2 { margin: 0 0 1.3rem; color: var(--olive-dark); font-size: 1.9rem; line-height: 1.15; font-weight: 400; }
.recipe-card h3.recipe-subheading { margin: 1.8rem 0 .6rem; font-size: 1.3rem; }