:root {
  --ink: #173f35;
  --deep: #10342c;
  --cream: #f6f2e7;
  --paper: #fffdf7;
  --ice: #cdeff0;
  --sky: #a9dfe3;
  --orange: #f36f3d;
  --yellow: #f3c84b;
  --leaf: #4b8558;
  --line: rgba(23, 63, 53, 0.2);
  --display: Georgia, "Times New Roman", serif;
  --sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -4rem; padding: .8rem 1rem; background: white; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.announcement { height: 31px; display: flex; justify-content: center; align-items: center; gap: 10px; background: var(--deep); color: white; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 10px; }
.announcement span { color: var(--yellow); }
.site-header { height: 82px; position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw; background: var(--cream); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font-size: 24px; font-weight: 900; letter-spacing: -.05em; }
.brand svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.site-header nav { display: flex; gap: clamp(20px, 3vw, 48px); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.cart-button { justify-self: end; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 12px; cursor: pointer; }
.cart-button strong { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: white; }
.menu-button { display: none; justify-self: end; border: 1px solid var(--ink); background: transparent; padding: 8px 12px; text-transform: uppercase; font-weight: 800; font-size: 11px; }
.hero { min-height: 720px; display: grid; grid-template-columns: 48% 52%; overflow: hidden; background: var(--cream); }
.hero-copy { padding: 8vw 6vw 6vw 8vw; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 20px; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; font-size: 11px; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.055em; line-height: .88; }
h1 { font-size: clamp(72px, 8.3vw, 132px); }
h1 em, h2 em { color: var(--orange); font-weight: 400; }
.hero-intro { max-width: 490px; margin: 32px 0; font-family: var(--display); line-height: 1.45; font-size: 20px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { min-height: 50px; border: 0; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; font-size: 11px; cursor: pointer; }
.button-primary { background: var(--orange); color: white; }
.button-primary:hover { background: #dc5829; }
.button-light { background: var(--cream); color: var(--ink); }
.button-outline { background: transparent; border: 1px solid currentColor; }
.text-link { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; text-decoration: underline; text-underline-offset: 5px; }
.hero-proof { margin-top: 48px; display: flex; gap: 12px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; }
.avatar-stack { display: flex; }
.avatar-stack i { width: 29px; height: 29px; margin-left: -7px; border: 2px solid var(--cream); border-radius: 50%; background: var(--leaf); }
.avatar-stack i:first-child { margin: 0; background: var(--yellow); }
.avatar-stack i:last-child { background: var(--orange); }
.hero-art { position: relative; display: grid; place-items: center; background: var(--ice); overflow: hidden; }
.sun-disc { position: absolute; width: min(43vw, 600px); aspect-ratio: 1; border-radius: 50%; background: #edf9f5; }
.bag-art { position: relative; z-index: 2; width: min(32vw, 430px); height: 545px; background: var(--orange); border: 3px solid var(--ink); clip-path: polygon(4% 0,96% 0,100% 5%,97% 100%,3% 100%,0 5%); transform: rotate(3deg); filter: drop-shadow(18px 22px 0 rgba(23,63,53,.12)); }
.bag-seal { height: 24px; border-bottom: 2px dashed rgba(23,63,53,.5); }
.bag-logo { height: 290px; padding: 38px 35px 20px; display: flex; flex-direction: column; align-items: center; color: var(--cream); text-align: center; }
.bag-logo small { letter-spacing: .18em; font-size: 8px; }
.bag-logo b { margin: 12px 0 20px; font-size: 92px; line-height: .7; letter-spacing: -.09em; }
.bag-logo span { padding-top: 12px; width: 100%; border-top: 1px solid currentColor; letter-spacing: .16em; font-weight: 800; font-size: 9px; }
.bag-window { height: 205px; position: relative; overflow: hidden; background: rgba(231,247,240,.75); border-top: 3px solid var(--ink); }
.veg-dot { position: absolute; width: 75px; height: 55px; left: 20px; top: 28px; border-radius: 50% 40% 50% 30%; border: 2px solid var(--ink); transform: rotate(20deg); }
.veg-dot.orange { background: #f28a37; }.veg-dot.green { left: 120px; top: 20px; width: 70px; height: 70px; background: #478954; border-radius: 50%; }.veg-dot.yellow { left: 225px; top: 38px; background: #efc43e; border-radius: 45%; }.veg-dot.pale { left: 315px; top: 10px; background: #f4edcf; border-radius: 50%; }.veg-dot.green.two { left: 250px; top: 118px; width: 88px; }.veg-dot.orange.two { left: 75px; top: 120px; width: 95px; }
.fresh-stamp { position: absolute; z-index: 3; right: 7%; bottom: 9%; width: 105px; height: 105px; display: grid; place-content: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); text-align: center; font-size: 8px; letter-spacing: .1em; transform: rotate(9deg); }
.fresh-stamp strong { font-size: 15px; }
.orbit { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 8px; letter-spacing: .13em; font-weight: 900; }
.orbit-one { width: 85px; height: 85px; left: 6%; bottom: 16%; background: var(--leaf); }.orbit-two { width: 68px; height: 68px; right: 6%; top: 13%; background: var(--yellow); color: var(--ink); }
.ticker { min-height: 60px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: var(--yellow); border-block: 1px solid var(--ink); }
.ticker div { text-align: center; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; font-size: 10px; border-right: 1px solid rgba(23,63,53,.4); }.ticker div:last-child { border: 0; }.ticker span { margin-right: 10px; }
.section-pad { padding: 110px 6vw; }
.section-heading h2, .steps h2, .journal h2, .story h2, .coming-soon h2 { font-size: clamp(58px, 6.2vw, 98px); }
.split-heading { display: grid; grid-template-columns: 1fr 360px; align-items: end; gap: 30px; }
.split-heading > p { margin: 0 0 8px; font-family: var(--display); font-size: 18px; line-height: 1.5; }
.filter-row { display: flex; margin: 65px 0 28px; border-bottom: 1px solid var(--line); }
.filter { padding: 0 32px 16px 0; margin-right: 28px; border: 0; border-bottom: 3px solid transparent; background: transparent; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 900; cursor: pointer; }.filter span { opacity: .5; margin-left: 5px; }.filter.active { border-color: var(--orange); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.loading { grid-column: 1/-1; padding: 80px; text-align: center; }
.product-card { min-width: 0; border: 1px solid var(--line); background: var(--paper); transition: transform .2s; }.product-card:hover { transform: translateY(-4px); }
.product-art { height: 220px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--card-bg, var(--ice)); border-bottom: 1px solid var(--line); }
.product-art::before { content: ""; width: 130px; height: 130px; border-radius: 50%; background: var(--card-color, var(--leaf)); box-shadow: -35px 35px 0 var(--card-accent, var(--yellow)), 42px 28px 0 color-mix(in srgb, var(--card-color) 75%, white); transform: rotate(-18deg); }
.product-art::after { content: attr(data-letter); position: absolute; color: white; font-family: var(--display); font-size: 72px; font-style: italic; text-transform: uppercase; }
.product-art[data-art="carrot"], .product-art[data-art="pepper"] { --card-bg:#f9d2bd;--card-color:#ed7041;--card-accent:#3f7c50; }
.product-art[data-art="peas"],.product-art[data-art="beans"],.product-art[data-art="spinach"],.product-art[data-art="edamame"],.product-art[data-art="asparagus"] { --card-bg:#d9e8c5;--card-color:#4d8a58;--card-accent:#86ae68; }
.product-art[data-art="corn"] { --card-bg:#f8edb4;--card-color:#e9be35;--card-accent:#68a063; }
.product-art[data-art="broccoli"],.product-art[data-art="artichoke"] { --card-bg:#bcded2;--card-color:#2f7357;--card-accent:#77a465; }
.product-art[data-art="cauliflower"] { --card-bg:#d7e5d5;--card-color:#efe8cf;--card-accent:#59825c; }
.product-art[data-art="avocado"] { --card-bg:#e6e4a8;--card-color:#94ae4f;--card-accent:#e9c66d; }
.premium-pill { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 7px 9px; background: var(--ink); color: white; text-transform: uppercase; letter-spacing: .11em; font-size: 8px; font-weight: 900; }
.product-info { padding: 18px; }
.product-meta { display: flex; justify-content: space-between; gap: 10px; }
.product-meta h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 400; }.product-meta strong { font-size: 13px; }.product-meta strong small { font-weight: 400; opacity: .6; }
.product-note { margin: 5px 0 16px; color: rgba(23,63,53,.65); font-size: 12px; }
.weight-control { min-height: 40px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; background: var(--cream); border: 1px solid var(--line); }
.weight-control button { align-self: stretch; border: 0; background: transparent; cursor: pointer; font-size: 20px; }.weight-control button:hover { background: var(--ice); }.weight-control span { text-align: center; font-weight: 800; font-size: 12px; }.weight-control .add-label { grid-column: 1/-1; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.mix-summary { position: sticky; z-index: 10; bottom: 18px; max-width: 880px; min-height: 78px; margin: 38px auto 0; padding: 12px 12px 12px 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; background: var(--ink); color: white; box-shadow: 0 12px 40px rgba(16,52,44,.25); }
.mix-summary > div { display: flex; align-items: center; gap: 12px; }.mix-summary > div:last-child { justify-content: flex-end; }.mix-summary small { display: block; margin-bottom: 4px; color: var(--sky); letter-spacing: .13em; font-size: 8px; }.mix-summary strong { font-size: 13px; }.summary-snowflake { font-size: 25px; }.mix-summary #mix-price { font-family: var(--display); font-size: 24px; }
.mix-dots { justify-content: center; }.mix-dots i { width: 24px; height: 24px; margin-left: -7px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }.mix-dots i:nth-child(2n) { background: var(--orange); }.mix-dots i:nth-child(3n) { background: var(--leaf); }
.steps { padding: 100px 6vw; display: grid; grid-template-columns: .8fr 2fr; gap: 7vw; background: var(--ice); border-block: 1px solid var(--ink); }
.steps ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); list-style: none; border-left: 1px solid var(--line); }
.steps li { position: relative; padding: 6px 28px; border-right: 1px solid var(--line); }.steps li > span { position: absolute; top: 0; right: 16px; font-size: 10px; font-weight: 900; }.step-icon { height: 110px; display: flex; align-items: center; font-family: var(--display); font-size: 70px; color: var(--orange); }.steps h3 { margin: 18px 0 9px; font-family: var(--display); font-size: 25px; font-weight: 400; }.steps li p { margin: 0; line-height: 1.55; font-size: 13px; }
.premixed { background: var(--paper); }
.premix-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.premix-card { position: relative; overflow: hidden; background: var(--cream); border: 1px solid var(--line); }.premix-card-art { height: 340px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--ice); }.premix-card:nth-child(2) .premix-card-art { background:#cbd9b8; }.premix-card:nth-child(3) .premix-card-art { background:#f5d98c; }
.mini-bag { width: 205px; height: 245px; padding: 35px 20px; display: flex; flex-direction: column; justify-content: space-between; background: var(--orange); border: 2px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,63,53,.14); transform: rotate(-5deg); color: white; text-align: center; clip-path: polygon(4% 0,96% 0,100% 6%,97% 100%,3% 100%,0 6%); }.premix-card:nth-child(2) .mini-bag { background:var(--leaf); transform:rotate(4deg); }.premix-card:nth-child(3) .mini-bag { background:#e9af34; transform:rotate(-2deg); }.mini-bag small { letter-spacing: .12em; font-size: 7px; }.mini-bag b { font-family: var(--display); font-size: 37px; line-height: .9; font-weight: 400; }.mini-bag span { padding-top: 10px; border-top: 1px solid white; font-size: 9px; }
.premix-info { padding: 22px; }.premix-info h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 27px; }.premix-info > p { min-height: 40px; margin: 8px 0 15px; font-size: 13px; line-height: 1.45; }.contents { min-height: 35px; color: rgba(23,63,53,.6); font-size: 10px !important; text-transform: uppercase; letter-spacing: .06em; }.premix-buy { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid var(--line); }.premix-buy strong { font-family: var(--display); font-size: 22px; }.premix-buy button { border: 0; background: var(--ink); color: white; padding: 11px 14px; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; font-size: 9px; cursor: pointer; }
.story { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--ink); color: white; }
.story-image { min-height: 760px; position: relative; overflow: hidden; background: #65895d; }.field-lines { position: absolute; inset: -100px; opacity: .7; background: repeating-linear-gradient(106deg,#8eaa72 0,#8eaa72 16px,#547b55 16px,#547b55 34px,#b6bd73 34px,#b6bd73 50px); transform: perspective(400px) rotateX(12deg); }.story-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,52,44,.1),rgba(16,52,44,.45)); }.location-pin { position:absolute; z-index:2; top:35px; left:35px; padding:10px; border:1px solid white; font-size:9px; letter-spacing:.1em; }.story-caption { position:absolute; z-index:2; left:35px; bottom:35px; display:flex; flex-direction:column; }.story-caption span,.story-caption small { letter-spacing:.13em; text-transform:uppercase; font-size:9px; }.story-caption strong { font-family:var(--display); font-size:58px; font-weight:400; }
.story-copy { padding: 110px 7vw; }.story-copy h2 em { color:var(--yellow); }.story-lede { max-width:500px; margin:38px 0 20px; font-family:var(--display); font-size:24px; line-height:1.35; }.story-copy > p:not(.eyebrow):not(.story-lede) { max-width:500px; color:rgba(255,255,255,.75); line-height:1.7; font-size:14px; }.story-copy .button { margin-top:25px; }.story-copy dl { margin:70px 0 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.25); }.story-copy dl div { padding:22px 12px 0 0; }.story-copy dt { font-family:var(--display); font-size:29px; }.story-copy dd { margin:5px 0 0; color:var(--sky); text-transform:uppercase; letter-spacing:.09em; font-size:8px; }
.journal { background:var(--cream); }.journal-head { display:flex; justify-content:space-between; align-items:end; }.article-grid { margin-top:65px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px; }.article-grid article { background:var(--paper); border:1px solid var(--line); }.article-featured { display:grid; grid-template-columns:1fr 1fr; }.article-art { min-height:390px; position:relative; overflow:hidden; background:var(--orange); }.vitamins-art span { position:absolute; display:grid; place-items:center; width:110px; height:110px; border:1px solid var(--ink); border-radius:50%; background:var(--yellow); font-family:var(--display); font-size:55px; }.vitamins-art span:nth-child(1){left:15%;top:15%}.vitamins-art span:nth-child(2){right:10%;top:35%;background:var(--ice)}.vitamins-art span:nth-child(3){left:25%;bottom:7%;background:var(--leaf);color:white}.vitamins-art b { position:absolute; right:18%; top:10%; font-size:12px; }.article-copy { padding:35px; display:flex; flex-direction:column; align-items:flex-start; }.article-copy h3,.article-grid > article > h3 { margin:0; font-family:var(--display); font-size:31px; line-height:1.05; font-weight:400; }.article-copy > p:not(.eyebrow) { line-height:1.5; font-size:13px; }.article-link { margin-top:auto; text-transform:uppercase; letter-spacing:.09em; font-weight:900; font-size:10px; border-bottom:1px solid currentColor; }.article-grid > article:not(.article-featured) { padding-bottom:25px; }.article-grid > article:not(.article-featured) > p,.article-grid > article:not(.article-featured) > h3,.article-grid > article:not(.article-featured) > a { margin-left:22px; margin-right:22px; }.small-article-art { height:210px; margin-bottom:25px; display:grid; place-items:center; background:var(--sky); }.farm-art { background:repeating-linear-gradient(110deg,#6c8c58 0,#6c8c58 20px,#a6b16b 20px,#a6b16b 40px); }.farm-art span,.waste-art span { display:grid; place-items:center; width:95px; height:95px; background:var(--cream); border-radius:50%; font-family:var(--display); font-size:32px; }.waste-art { background:var(--yellow); }.waste-art span { text-align:center; font-size:21px; }
.coming-soon { min-height:540px; padding:80px 10vw; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:var(--sky); border-top:1px solid var(--ink); }.coming-soon > div:last-child { max-width:500px; }.coming-soon > div > p:not(.eyebrow) { font-family:var(--display); font-size:18px; line-height:1.5; }.fruit-orbit { width:380px; height:380px; position:relative; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-family:var(--display); font-size:65px; font-style:italic; }.fruit-orbit i { position:absolute; width:100px; height:100px; border:2px solid var(--ink); border-radius:50%; background:var(--orange); }.fruit-orbit i:nth-child(1){top:-20px;right:30px}.fruit-orbit i:nth-child(2){bottom:10px;left:-20px;background:#8e5e8f}.fruit-orbit i:nth-child(3){bottom:-5px;right:30px;background:var(--yellow)}
#newsletter-form { margin-top:25px; display:flex; border-bottom:1px solid var(--ink); }.coming-soon input { flex:1; min-width:0; padding:15px 0; border:0; outline:0; background:transparent; }.coming-soon form button { border:0; background:transparent; text-transform:uppercase; font-weight:900; letter-spacing:.09em; font-size:10px; cursor:pointer; }
footer { padding:70px 6vw 25px; display:grid; grid-template-columns:2fr repeat(3,1fr); gap:45px; background:var(--deep); color:white; }.footer-brand p { margin-top:30px; font-family:var(--display); color:var(--sky); font-size:24px; line-height:1.2; }.footer-brand + div,footer > div:not(.footer-brand):not(.footer-bottom) { display:flex; flex-direction:column; gap:13px; font-size:12px; }.footer-brand + div strong,footer > div strong { margin-bottom:10px; color:var(--sky); text-transform:uppercase; letter-spacing:.1em; font-size:9px; }.footer-bottom { grid-column:1/-1; margin-top:35px; padding-top:20px; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.5); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.footer-bottom span:last-child { display:flex; gap:20px; }
.overlay { position:fixed; z-index:40; inset:0; background:rgba(16,52,44,.55); backdrop-filter:blur(3px); }.cart-drawer { position:fixed; z-index:50; top:0; right:0; width:min(460px,100%); height:100dvh; display:flex; flex-direction:column; background:var(--paper); transform:translateX(100%); transition:transform .3s ease; box-shadow:-20px 0 50px rgba(16,52,44,.15); }.cart-drawer.open { transform:none; }.drawer-head { padding:28px; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); }.drawer-head .eyebrow { margin-bottom:8px; }.drawer-head h2 { font-size:47px; }.icon-button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:24px; cursor:pointer; }.cart-items { flex:1; overflow:auto; padding:20px 28px; }.empty-cart { padding:70px 20px; text-align:center; }.empty-cart span { font-size:50px; }.empty-cart h3 { font-family:var(--display); font-size:28px; font-weight:400; }.cart-group { margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }.cart-group-label { display:block; margin-bottom:14px; text-transform:uppercase; letter-spacing:.12em; font-size:9px; font-weight:900; color:var(--leaf); }.cart-line { padding:7px 0; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; font-size:13px; }.cart-line small { color:rgba(23,63,53,.55); }.remove-item { border:0; background:transparent; text-decoration:underline; cursor:pointer; font-size:10px; }.cart-footer { padding:20px 28px 28px; border-top:1px solid var(--line); }.delivery-progress { margin-bottom:20px; text-align:center; text-transform:uppercase; letter-spacing:.07em; font-size:9px; }.delivery-progress i { height:4px; margin-top:8px; display:block; overflow:hidden; background:#dfe3dc; }.delivery-progress b { display:block; height:100%; width:0; background:var(--orange); transition:width .2s; }.total-row { margin-bottom:14px; display:flex; justify-content:space-between; font-family:var(--display); font-size:22px; }.checkout-button { width:100%; }.checkout-button:disabled { opacity:.4; cursor:not-allowed; }.cart-footer > small { display:block; margin-top:10px; text-align:center; color:rgba(23,63,53,.5); font-size:9px; }
dialog { width:min(500px,calc(100% - 30px)); padding:45px; border:0; background:var(--cream); color:var(--ink); box-shadow:0 20px 80px rgba(16,52,44,.3); }dialog::backdrop{background:rgba(16,52,44,.65)}.dialog-close{position:absolute;right:15px;top:15px}.dialog-mark{width:65px;height:65px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);font-size:28px}.dialog-content h2,#dialog-content h2{margin:25px 0 18px;font-size:54px}.dialog-form{display:grid;gap:12px}.dialog-form input{width:100%;padding:14px;border:1px solid var(--line);background:var(--paper)}.dialog-form .button{width:100%;margin-top:8px}.order-reference{padding:14px;background:var(--ice);font-weight:900;letter-spacing:.08em}.order-note{line-height:1.5;font-size:13px}
@media (max-width: 1050px) {
  .site-header { grid-template-columns:1fr auto auto; gap:20px; }.site-header nav { display:none; position:absolute; top:82px; left:0; right:0; padding:30px; flex-direction:column; background:var(--cream); border-bottom:1px solid var(--ink); }.site-header nav.open{display:flex}.menu-button{display:block}.cart-button span{display:none}
  .hero{grid-template-columns:1fr 1fr;min-height:650px}.hero-copy{padding-left:5vw}.bag-art{width:330px;height:490px}.bag-logo{height:260px}.bag-logo b{font-size:78px}.bag-window{height:200px}
  .product-grid{grid-template-columns:repeat(3,1fr)}.steps{grid-template-columns:1fr}.article-grid{grid-template-columns:1fr 1fr}.article-featured{grid-column:1/-1}.coming-soon{padding-inline:5vw}.fruit-orbit{width:320px;height:320px}
}
@media (max-width: 720px) {
  .announcement{font-size:8px}.site-header{height:68px;padding:0 18px}.site-header nav{top:68px}.brand{font-size:21px}.brand svg{width:26px}.hero{display:flex;flex-direction:column;min-height:auto}.hero-copy{padding:70px 22px 55px}.hero-intro{font-size:18px}.hero-proof{margin-top:35px}.hero-art{min-height:520px}.sun-disc{width:470px}.bag-art{width:300px;height:425px}.bag-logo{height:225px;padding-top:30px}.bag-logo b{font-size:70px}.bag-window{height:170px}.fresh-stamp{right:4%;bottom:4%;width:85px;height:85px}.ticker{grid-template-columns:1fr 1fr}.ticker div{padding:14px 4px;border-bottom:1px solid rgba(23,63,53,.4)}
  .section-pad{padding:80px 18px}.split-heading{grid-template-columns:1fr}.split-heading>p{font-size:16px}.filter-row{margin-top:45px;overflow:auto}.filter{white-space:nowrap}.product-grid{grid-template-columns:1fr 1fr;gap:9px}.product-art{height:160px}.product-art::before{width:90px;height:90px}.product-art::after{font-size:52px}.product-info{padding:13px}.product-meta{display:block}.product-meta h3{font-size:19px}.product-meta strong{display:block;margin-top:4px}.product-note{font-size:11px}.mix-summary{bottom:8px;grid-template-columns:1fr auto;padding:10px 10px 10px 14px}.mix-dots{display:none!important}.mix-summary>div:last-child #mix-price{display:none}.mix-summary .button{min-height:42px;padding:0 14px}.summary-snowflake{display:none}
  .steps{padding:75px 18px}.steps ol{grid-template-columns:1fr;border:0}.steps li{padding:25px 10px;border-right:0;border-bottom:1px solid var(--line)}.step-icon{height:70px}.premix-grid{grid-template-columns:1fr}.premix-card-art{height:300px}.story{grid-template-columns:1fr}.story-image{min-height:480px}.story-copy{padding:75px 22px}.story-copy dl{margin-top:45px}.story-copy dt{font-size:23px}.journal-head{align-items:start;gap:20px}.journal-head .text-link{display:none}.article-grid{grid-template-columns:1fr}.article-featured{grid-template-columns:1fr}.article-art{min-height:310px}.article-copy{min-height:340px}.small-article-art{height:250px}.coming-soon{padding:75px 22px;grid-template-columns:1fr;gap:70px;overflow:hidden}.fruit-orbit{width:280px;height:280px;margin:auto}.fruit-orbit i{width:75px;height:75px}footer{grid-template-columns:1fr 1fr;padding:60px 22px 25px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:15px;line-height:1.5}.cart-drawer{width:100%}
}
@media (max-width: 390px) {.product-grid{grid-template-columns:1fr}.product-art{height:200px}.hero-actions{align-items:flex-start;flex-direction:column}.hero h1{font-size:67px}}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} }

/* Field Notes */
.journal-shell { background: var(--paper); }
.journal-masthead { padding: 95px 6vw 70px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; background: var(--ice); border-bottom: 1px solid var(--ink); }
.journal-masthead h1 { font-size: clamp(76px, 10vw, 150px); }
.journal-masthead > p { max-width: 520px; margin: 0 0 12px; font-family: var(--display); font-size: 22px; line-height: 1.45; }
.journal-list { padding: 80px 6vw 110px; }
.journal-list .article-grid { margin-top: 0; }
.article-page { background: var(--paper); }
.article-hero { padding: 75px 8vw 0; text-align: center; background: var(--cream); }
.breadcrumbs { display: flex; justify-content: center; gap: 9px; margin-bottom: 40px; color: rgba(23,63,53,.65); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; }
.article-hero h1 { max-width: 1050px; margin: 0 auto; font-size: clamp(57px, 7.8vw, 112px); line-height: .91; }
.article-standfirst { max-width: 700px; margin: 30px auto; font-family: var(--display); font-size: 22px; line-height: 1.45; }
.byline { padding-bottom: 45px; display: flex; justify-content: center; gap: 20px; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; font-weight: 800; }
.byline span + span { padding-left: 20px; border-left: 1px solid var(--line); }
.article-hero-art { height: min(58vw, 650px); min-height: 360px; position: relative; overflow: hidden; border: 1px solid var(--ink); border-bottom: 0; }
.nutrition-hero { background: var(--orange); }
.nutrition-hero::before { content: "C"; position: absolute; left: 10%; top: 12%; width: 260px; height: 260px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: var(--display); font-size: 150px; }
.nutrition-hero::after { content: "−18°C"; position: absolute; right: 9%; bottom: 10%; color: var(--cream); font-family: var(--display); font-size: clamp(80px, 14vw, 200px); letter-spacing: -.08em; }
.farm-hero { background: repeating-linear-gradient(106deg,#8eaa72 0,#8eaa72 38px,#547b55 38px,#547b55 78px,#c4c174 78px,#c4c174 116px); }
.farm-hero::before { content: "FLEVOLAND · 08:42"; position: absolute; left: 6%; bottom: 8%; padding: 18px; background: var(--cream); border: 2px solid var(--ink); letter-spacing: .14em; font-weight: 900; font-size: 11px; }
.farm-hero::after { content: ""; position: absolute; width: 190px; height: 190px; top: 11%; right: 10%; border-radius: 50%; background: var(--orange); box-shadow: -80px 110px 0 var(--yellow); }
.waste-hero { background: var(--yellow); }
.waste-hero::before { content: "50g"; position: absolute; left: 9%; top: 12%; font-family: var(--display); font-size: clamp(110px, 21vw, 310px); letter-spacing: -.09em; }
.waste-hero::after { content: "ONLY WHAT YOU NEED"; position: absolute; right: 8%; bottom: 12%; width: 160px; height: 160px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--ice); text-align: center; font-weight: 900; letter-spacing: .1em; font-size: 11px; }
.article-layout { max-width: 1160px; margin: 0 auto; padding: 90px 35px 120px; display: grid; grid-template-columns: 210px minmax(0, 680px); justify-content: center; gap: 80px; }
.article-aside { align-self: start; position: sticky; top: 30px; }
.article-aside strong { display: block; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.article-aside a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 14px; }
.article-body { font-family: var(--display); color: #23483f; font-size: 19px; line-height: 1.72; }
.article-body > p:first-child::first-letter { float: left; margin: 7px 9px 0 0; color: var(--orange); font-size: 78px; line-height: .7; }
.article-body h2 { margin: 75px 0 25px; font-size: 50px; line-height: .98; scroll-margin-top: 25px; }
.article-body h3 { margin: 40px 0 10px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .09em; font-size: 12px; }
.article-body blockquote { margin: 55px -65px; padding: 35px 55px; background: var(--ice); border-left: 5px solid var(--orange); font-size: 29px; line-height: 1.35; }
.article-body .fact-box { margin: 45px 0; padding: 28px; background: var(--cream); border: 1px solid var(--line); font-family: var(--sans); font-size: 14px; line-height: 1.6; }
.fact-box strong { display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.article-body .sources { padding-top: 30px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 12px; }
.sources a { text-decoration: underline; }
.article-end { padding: 75px 6vw; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; background: var(--ice); border-block: 1px solid var(--ink); }
.article-end h2 { font-size: clamp(46px, 5vw, 75px); }
.article-end-links { display: flex; gap: 10px; }
@media (max-width: 720px) {
  .journal-masthead { padding: 70px 22px 55px; grid-template-columns: 1fr; gap: 30px; }.journal-masthead h1{font-size:75px}.journal-list{padding:60px 18px 80px}
  .article-hero{padding:55px 18px 0}.breadcrumbs{margin-bottom:30px}.article-standfirst{font-size:19px}.byline{gap:10px;flex-wrap:wrap}.byline span+span{padding-left:10px}.article-hero-art{height:390px}.nutrition-hero::before{width:150px;height:150px;font-size:85px}.farm-hero::after{width:110px;height:110px}.waste-hero::after{width:110px;height:110px;font-size:8px}
  .article-layout{padding:60px 22px 80px;grid-template-columns:1fr;gap:0}.article-aside{display:none}.article-body{font-size:18px}.article-body h2{margin-top:58px;font-size:42px}.article-body blockquote{margin:45px 0;padding:28px;font-size:24px}.article-end{padding:60px 22px;grid-template-columns:1fr}.article-end-links{flex-direction:column}
}