:root{--cream:#f5f0e6;--paper:#fbf8f1;--ink:#1d291e;--green:#294d35;--sage:#9cab82;--orange:#d77542;--gold:#e1a835;--line:#d8d3c6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}.announcement{background:var(--ink);color:#fff;text-align:center;padding:9px;font-size:12px;letter-spacing:.08em}.announcement span{color:var(--gold);padding:0 12px}.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);background:rgba(251,248,241,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:Fraunces,serif;font-size:21px;text-decoration:none}.logo span{width:34px;height:34px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-style:italic}.main-nav{display:flex;gap:34px}.main-nav a,footer a{color:inherit;text-decoration:none;font-size:14px}.main-nav a:hover{color:var(--orange)}button,.button{font:inherit}.cart-button{border:0;background:transparent;cursor:pointer;font-weight:600}.cart-button span{display:inline-grid;place-items:center;background:var(--orange);color:white;width:22px;height:22px;border-radius:50%;font-size:11px;margin-left:6px}.menu-button{display:none;border:0;background:none;font-size:23px}.hero{min-height:690px;display:grid;grid-template-columns:1.02fr .98fr;background:var(--cream);overflow:hidden}.hero-copy{padding:95px 7vw;align-self:center}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:11px;font-weight:700;color:var(--orange);margin:0 0 18px}.hero h1{font:600 clamp(55px,7vw,94px)/.92 Fraunces,serif;letter-spacing:-.05em;margin:0}.hero h1 em{color:var(--green);font-weight:500}.hero-text{font-size:17px;line-height:1.65;max-width:490px;color:#536052;margin:28px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:38px;padding:15px 22px;border:0;text-decoration:none;font-weight:600;cursor:pointer}.primary{background:var(--green);color:white}.button:hover{filter:brightness(1.12)}.trust-row{display:flex;gap:22px;font-size:12px;margin-top:42px;color:#5b685b}.hero-art{position:relative;background:var(--sage);min-height:600px;overflow:hidden}.sun{position:absolute;width:470px;height:470px;border-radius:50%;background:#d8c996;left:50%;top:48%;transform:translate(-50%,-50%)}.jar,.bag{position:absolute;bottom:80px;z-index:2;box-shadow:0 28px 45px #293a2538;display:flex;flex-direction:column;align-items:center;justify-content:center}.jar b,.bag b{font:600 34px Fraunces}.jar small,.bag small{text-align:center;font-weight:700;font-size:10px;letter-spacing:.15em;margin-top:10px}.honey-jar{height:335px;width:175px;background:linear-gradient(90deg,#d58d14,#f5c145 60%,#be700b);border-radius:20px 20px 35px 35px;left:14%;transform:rotate(-5deg)}.lid{position:absolute;top:-32px;width:150px;height:42px;background:#242b22;border-radius:7px}.rusk-bag{width:200px;height:380px;background:#eee3cb;left:42%;bottom:60px;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);transform:rotate(2deg)}.biltong-bag{width:170px;height:310px;background:var(--orange);right:4%;bottom:74px;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);transform:rotate(7deg)}.leaf{position:absolute;width:70px;height:180px;border:13px solid var(--green);border-radius:100%;opacity:.45}.leaf-one{right:-25px;top:20px;transform:rotate(-35deg)}.leaf-two{left:-30px;bottom:30px;transform:rotate(30deg)}.intro{padding:105px 5vw}.intro>h2,.story h2,.newsletter h2{font:600 clamp(38px,5vw,62px)/1.05 Fraunces;margin:0}.filters{display:flex;gap:9px;justify-content:flex-end;margin:-42px 0 45px}.filter{border:1px solid var(--line);border-radius:50px;background:transparent;padding:10px 17px;cursor:pointer}.filter.active,.filter:hover{background:var(--ink);color:white}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product-card{transition:.3s}.product-card.hidden{display:none}.product-visual{height:340px;position:relative;display:grid;place-items:center;overflow:hidden}.product-visual:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:#ffffff55}.product-visual .pack{position:relative;width:125px;height:210px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 20px 25px #27302538;border-radius:5px;transition:.3s}.product-card:hover .pack{transform:translateY(-8px) rotate(2deg)}.pack b{font:600 24px Fraunces}.pack small{text-align:center;font-weight:bold;font-size:9px;letter-spacing:.13em;margin-top:9px}.product-meta{padding-top:16px;display:grid;grid-template-columns:1fr auto}.product-meta h3{margin:0;font:600 21px Fraunces}.product-meta p{margin:6px 0 0;color:#73776f;font-size:13px}.product-meta strong{font-size:15px}.add-button{grid-column:1/3;margin-top:14px;border:1px solid var(--ink);background:transparent;padding:11px;cursor:pointer;font-weight:600}.add-button:hover{background:var(--ink);color:white}.story{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:white}.story-art{min-height:590px;background:#8a5f10;position:relative;display:grid;place-items:center;overflow:hidden}.honey-drop{width:270px;height:350px;background:#f7e6c0;border-radius:55% 45% 58% 42% / 65% 50% 50% 35%;display:grid;place-items:center;box-shadow:inset -20px -20px 30px #ae651e44}.story-stamp{position:absolute;top:50px;left:50px;width:100px;height:100px;border:1px solid #ffffff8c;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.12em;transform:rotate(-9deg)}.story-copy{padding:10vw;align-self:center}.story-copy .eyebrow{color:#e9b04b}.story-copy p:not(.eyebrow){color:#d1dacd;line-height:1.8}.text-link{color:white;text-decoration:none;border-bottom:1px solid #ffffff66;padding-bottom:7px;display:inline-block;margin-top:15px}.values{display:grid;grid-template-columns:repeat(3,1fr);padding:90px 6vw;gap:60px}.values>div{border-top:1px solid var(--line);padding-top:25px}.values span{color:var(--orange);font-size:11px}.values h3{font:600 25px Fraunces;margin:15px 0 10px}.values p{color:#697067;line-height:1.6;font-size:14px}.newsletter{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:50px;background:#e8dfcf;padding:75px 8vw}.newsletter>div>p:last-child{color:#62695f}.newsletter form{display:flex}.newsletter input{flex:1;padding:16px;border:0;border-bottom:1px solid var(--ink);background:transparent;outline:none}.dark{background:var(--ink);color:white}footer{background:#182419;color:#e9ecdf;padding:60px 6vw 30px;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}footer .logo{color:white}footer>p{text-align:right;font:28px Fraunces;margin:0}footer>div{display:flex;gap:25px}footer small{text-align:right;color:#9aa599}.cart-drawer{position:fixed;right:0;top:0;width:min(430px,100%);height:100vh;background:var(--paper);z-index:40;transform:translateX(100%);transition:.35s;display:flex;flex-direction:column}.cart-drawer.open{transform:none}.overlay{position:fixed;inset:0;background:#10191099;z-index:30;opacity:0;pointer-events:none;transition:.3s}.overlay.open{opacity:1;pointer-events:auto}.cart-head{display:flex;justify-content:space-between;align-items:center;padding:25px 28px;border-bottom:1px solid var(--line)}.cart-head h2{font:32px Fraunces;margin:0}.cart-head button{border:0;background:none;font-size:35px;cursor:pointer}.cart-items{padding:15px 28px;overflow:auto;flex:1}.empty-message{color:#777}.cart-item{display:grid;grid-template-columns:60px 1fr auto;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);align-items:center}.cart-swatch{width:60px;height:70px}.cart-item h4{margin:0 0 7px}.cart-item button{border:0;background:none;text-decoration:underline;color:#777;padding:0;cursor:pointer}.cart-footer{padding:25px 28px;border-top:1px solid var(--line)}.cart-footer>div{display:flex;justify-content:space-between;font-size:18px;margin-bottom:20px}.checkout{width:100%}.cart-footer small{display:block;text-align:center;margin-top:12px;color:#777}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,100px);background:var(--ink);color:white;padding:13px 22px;z-index:50;transition:.3s}.toast.show{transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-art{min-height:520px}.hero-copy{padding:75px 7vw}.filters{justify-content:flex-start;margin:30px 0}.story{grid-template-columns:1fr}.values{gap:25px}.newsletter{grid-template-columns:1fr}.main-nav{display:none}.menu-button{display:block;order:2}.site-header .logo{order:1}.cart-button{order:3}.main-nav.open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;background:var(--paper);padding:25px 5vw;border-bottom:1px solid var(--line)}}@media(max-width:580px){.announcement{font-size:10px}.hero-copy{padding:60px 6vw}.hero{min-height:auto}.hero-art{min-height:430px}.sun{width:330px;height:330px}.honey-jar{left:7%;width:120px;height:240px}.lid{width:105px}.rusk-bag{left:35%;width:145px;height:285px}.biltong-bag{width:115px;height:220px}.jar b,.bag b{font-size:22px}.trust-row{flex-direction:column;gap:8px}.intro{padding:75px 5vw}.product-grid{grid-template-columns:1fr}.product-visual{height:320px}.values{grid-template-columns:1fr;padding:65px 6vw}.newsletter{padding:60px 6vw}.newsletter form{flex-direction:column;gap:15px}.newsletter input{min-height:52px}.story-art{min-height:430px}.story-copy{padding:70px 7vw}footer{grid-template-columns:1fr}footer>p,footer small{text-align:left}}

/* Header wordmark.
   The supplied artwork is dark green on a light ground, so it is used only on
   the light header. The footer sits on #182419, where a dark-green mark would
   be invisible, so it keeps the white text lockup. */
.site-header .logo img{display:block;height:40px;width:auto}
@media(max-width:580px){.site-header .logo img{height:32px}}

/* The story blob carries the wordmark in place of the italic R it used to hold. */
.honey-logo{display:block;width:180px;height:auto}
@media(max-width:580px){.honey-logo{width:150px}}