/* Terra Green. Deep leaf green and orchard cream, with a fresh lime for what to press. Fraunces
   (soft, a little plump, like fruit) for the words that matter, Instrument Sans for the rest.
   The same bones as CocoZuri's site, with its own flesh: a dark hero, a promise that lights up,
   a full-screen range, this week's list, and a way to open an account. */
:root {
  --field: #56653F;         /* the film's own green: the hero and the About header */
  --field-dk: #3E4A2B;      /* the footer, a shade deeper, its own band after the crate film */
  --leaf-950: #16220C;
  --leaf-900: #1F2E12;
  --leaf-800: #2A3D18;
  --leaf: #435F22;          /* the wordmark's own green */
  --leaf-500: #6B8B34;
  --lime: #C9DD6A;
  --lime-dk: #A9C04A;
  --cream: #F6F1E2;
  --cream-2: #EFE8D2;
  --paper: #FBF8EE;
  --ink: #1F2A14;
  --body: #4E5A43;
  --citrus: #EE8A2A;
  --line: rgba(67, 95, 34, .24);
  --line-soft: rgba(67, 95, 34, .13);
  --on-dark: rgba(246, 241, 226, .78);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: clamp(16px, 4vw, 64px);
  --bar-h: 74px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: hidden; }
body.is-intro { overflow: hidden; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
svg { display: block; width: 100%; height: 100%; }

/* ---------- shared type ---------- */
.kicker { margin: 0 0 12px; font: 600 12px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--lime); }
.kicker-green { color: var(--leaf); }
/* every section title: one size, one pattern (upright ink, the key words in green italic) */
.display { margin: 0; font: 600 clamp(34px, min(4vw, 7.4svh), 58px)/1.05 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 120, "SOFT" 100; color: var(--ink); text-wrap: balance; }
.display em { font-style: italic; font-weight: 500; color: var(--leaf); }
.display-light { color: var(--cream); }
.display-light em { color: var(--lime); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 10px; text-decoration: none; font: 600 14px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-lime { background: var(--lime); color: var(--leaf-900); }
.btn-lime:hover { background: #DCEB8A; }
.btn-ghost { border: 1px solid rgba(246, 241, 226, .45); color: var(--cream); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn-green { background: var(--leaf); color: var(--cream); }
.btn-green:hover { background: var(--leaf-800); }
.btn-line { border: 1px solid var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--leaf); }

/* ---------- welcome ---------- */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--leaf-900); transition: clip-path 1s var(--ease); clip-path: inset(0 0 0 0 round 0); }
.intro img { width: min(340px, 64vw); height: auto; opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease) .15s forwards; }
.intro span { font: 500 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--lime); opacity: 0; animation: rise .7s var(--ease) .45s forwards; }
.intro.is-done { clip-path: inset(0 0 100% 0 round 0 0 48% 48%); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- bar ----------
   At the top, over the film: links left, the wordmark centred, the enquiry right (tablets and
   phones: ⋯ and the wordmark on the left, the enquiry right). Once the page moves on, all of it
   fades except the ⋯, which stays on its own with no background, cream on the dark sections and
   ink over the cream one. */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); color: var(--cream); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar-links { display: flex; gap: 28px; }
.bar-links, .bar-end, .bar-logo { transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear 0s; }
.bar-links a, .bar-link { white-space: nowrap; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: inherit; opacity: .92; transition: color .3s var(--ease), opacity .3s var(--ease); }
.bar-links a:hover, .bar-link:hover { opacity: 1; color: var(--lime); }
.bar-logo { position: absolute; top: 50%; left: 50%; display: block; width: 150px; transform: translate(-50%, -50%); }
.bar-logo img { display: block; width: 100%; height: auto; }
.bar-end { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-left: auto; }
.bar-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 8px; background: var(--lime); color: var(--leaf-900); font: 600 13px/1 var(--sans); text-decoration: none; transition: background .3s var(--ease); }
.bar-cta:hover { background: #DCEB8A; }
.bar-menu { position: absolute; left: calc(var(--gut) - 10px); top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 50%; color: var(--cream); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), color .4s var(--ease), background .3s var(--ease), visibility 0s linear .4s; }
.bar-menu svg { width: 24px; height: 24px; }
.bar-menu .i-dots { fill: currentColor; }
.bar-menu .i-x { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bar-menu[aria-expanded="true"] .i-dots { display: none; }
.bar-menu[aria-expanded="true"] .i-x { display: block; }
.bar-menu:hover { background: rgba(246, 241, 226, .12); }
.bar.on-light .bar-menu { color: var(--ink); filter: none; }
.bar.on-light .bar-menu:hover { background: rgba(31, 42, 20, .08); }
/* scrolled: only the ⋯ */
.bar.float .bar-links, .bar.float .bar-end, .bar.float .bar-logo { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; }
.bar.float .bar-links, .bar.float .bar-end { transform: translateY(-8px); }
.bar.float .bar-menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), color .4s var(--ease), background .3s var(--ease), visibility 0s; }

/* ---------- menu ----------
   A small frosted card that drops from the ⋯: the three sections, the enquiry, and how to reach us. */
.menu { position: fixed; z-index: 49; top: calc(var(--bar-h) - 6px); left: calc(var(--gut) - 10px); width: min(300px, calc(100vw - 2 * var(--gut) + 20px)); padding: 8px; border-radius: 14px; background: rgba(22, 34, 12, .92); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 24px 60px rgba(10, 16, 6, .35), inset 0 0 0 1px rgba(201, 221, 106, .14); color: var(--cream); transform-origin: 22px -6px; opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .22s var(--ease), transform .32s var(--ease); }
.menu[hidden] { display: none; }
.menu.open { opacity: 1; transform: none; }
.menu-links { display: grid; }
.menu-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 8px; text-decoration: none; color: var(--cream); font: 500 20px/1.2 var(--serif); font-variation-settings: "opsz" 60, "SOFT" 100; transition: background .2s var(--ease), color .2s var(--ease); }
.menu-links a span { font: 600 11px/1 var(--sans); letter-spacing: .18em; color: rgba(246, 241, 226, .45); }
.menu-links a:hover, .menu-links a:focus-visible { background: rgba(246, 241, 226, .08); color: var(--lime); }
.menu-foot { display: grid; gap: 12px; margin-top: 6px; padding: 14px 12px 6px; border-top: 1px solid rgba(201, 221, 106, .16); }
.menu-foot .btn { min-height: 44px; font-size: 13.5px; }
.menu-foot p { margin: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--on-dark); }
.menu-foot p a { color: inherit; text-decoration: none; }
.menu-foot p a:hover { color: var(--cream); }

/* ---------- hero ----------
   The produce photograph, with its words in the clear green between the two piles. The page
   under it is the photograph's own green, so nothing shows a seam. */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--field); color: var(--cream); display: grid; place-items: center; }
.hero-photo { position: absolute; inset: 0; z-index: -1; }
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: opacity .35s ease; transform: scale(var(--zoom, 1)); transform-origin: 50% 100%; will-change: transform; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(34% 42% at 50% 46%, rgba(31, 46, 18, .34), transparent 72%), linear-gradient(180deg, rgba(31, 46, 18, .45), transparent 22%); }
.hero-copy { position: relative; z-index: 2; width: min(980px, calc(100% - 2 * var(--gut))); text-align: center; padding-top: var(--bar-h); margin-top: -16svh; }
.hero-copy .kicker { color: #E4F0A8; }
.hero-seam { opacity: 0; pointer-events: none; }
.hero-seam.on { opacity: 1; transition: none; }
.hero-seam.off { opacity: 0; transition: opacity .9s ease; }
.hero-title { margin: 0 auto 18px; max-width: 24ch; font: 600 clamp(40px, min(5vw, 9svh), 76px)/.98 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 144, "SOFT" 100; text-wrap: balance; text-shadow: 0 2px 24px rgba(22, 34, 12, .25); }
.hero-title em { font-style: italic; font-weight: 500; color: var(--lime); }
.hero-title .nw { white-space: nowrap; }
.hero-lede { margin: 0 auto 26px; max-width: 38ch; text-wrap: balance; font-size: clamp(15px, 1.15vw, 18px); color: rgba(246, 241, 226, .92); text-shadow: 0 1px 12px rgba(22, 34, 12, .3); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-ghost { background: rgba(31, 46, 18, .34); }
/* the list of names now runs as a band under the photograph */
.ticker { position: relative; z-index: 2; overflow: hidden; background: var(--leaf-900); border-top: 1px solid rgba(201, 221, 106, .14); }
.ticker-track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker-track span { display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px; font: 500 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; }
.ticker-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes bob { 0%, 100% { transform: translateY(-8px) rotate(-4deg); } 50% { transform: translateY(10px) rotate(4deg); } }

/* ---------- promise ---------- */
.story { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 180px) var(--gut) clamp(80px, 8vw, 120px); background: linear-gradient(180deg, var(--cream), var(--paper)); }
.story-in { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; text-align: center; }
.story-text { margin: 22px auto 0; max-width: 46ch; font: 400 clamp(18px, 1.6vw, 23px)/1.6 var(--serif); font-variation-settings: "opsz" 40, "SOFT" 50; color: var(--ink); }
.story-text .w { opacity: .16; transition: opacity .25s linear; }
.story-text .w.lit { opacity: 1; }
.story-float { position: absolute; z-index: 1; width: clamp(90px, 12vw, 180px); aspect-ratio: 1; pointer-events: none; will-change: transform; }
.story-float > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 24px rgba(31, 46, 18, .22)); animation: bob 8s ease-in-out infinite; }
.s2 > img { animation-delay: -2s; } .s3 > img { animation-delay: -4s; animation-duration: 9s; } .s4 > img { animation-delay: -6s; animation-duration: 7s; }
.s1 { left: 5%; top: 14%; }
.s2 { right: 6%; top: 18%; width: clamp(80px, 10vw, 150px); }
.s3 { left: 8%; bottom: 12%; width: clamp(80px, 10vw, 150px); }
.s4 { right: 9%; bottom: 16%; }

/* ---------- range ---------- */
/* the range: the whole screen takes a rich colour from the fruit in the centre (--bg, set from the
   fruit's tint and deepened until cream text reads on it), and Prev · Ask · Next in one row beneath. */
.range { --bg: #3F6A1E; position: relative; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; background-color: var(--bg); color: var(--cream); transition: background-color .9s var(--ease); scroll-margin-top: 0; isolation: isolate; }
.range::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 34% at 50% 50%, rgba(255, 255, 255, .2), transparent 72%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .22)); }
.range-top { position: relative; z-index: 5; display: grid; justify-items: center; text-align: center; padding: calc(var(--bar-h) + clamp(10px, 2.4svh, 26px)) var(--gut) 0; }
.range .kicker { color: rgba(246, 241, 226, .82); }
.range .display { color: var(--cream); }
.range .display em { color: var(--cream); }
.tabs { position: relative; width: min(1100px, 100%); margin-top: clamp(10px, 2svh, 22px); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-row { position: relative; display: flex; gap: clamp(20px, 2.4vw, 34px); width: max-content; margin: 0 auto; padding: 0 12px; border-bottom: 1px solid rgba(246, 241, 226, .24); }
.tab { position: relative; padding: 14px 0 12px; white-space: nowrap; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 241, 226, .66); transition: color .3s var(--ease); }
.tab:hover, .tab[aria-selected="true"] { color: var(--cream); }
.tab sup { font-size: 9px; letter-spacing: 0; margin-left: 3px; color: rgba(246, 241, 226, .6); vertical-align: 5px; }
.tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--cream); transition: transform .5s var(--ease), width .5s var(--ease); }
.chain-wrap { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; max-height: min(560px, 58svh); container-type: size; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.chain-wrap.dragging { cursor: grabbing; }
.chain { position: absolute; inset: 0; }
.link { --box: min(24vw, 84cqh, 330px); position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--box); height: var(--box); transform: translate(-50%, -50%); will-change: transform, opacity; }
.link > div { width: 100%; height: 100%; animation: bob 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
/* only the fruit in front floats; the ones to the sides hold still, so their blur is drawn once, not every frame */
.link.far > div { animation-play-state: paused; }
.link.photo { width: calc(var(--box) * 1.3); }
.link.photo img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .28)); }
.info { position: relative; z-index: 5; width: min(600px, calc(100% - 2 * var(--gut))); margin: 0 auto; padding-bottom: clamp(18px, 4svh, 40px); text-align: center; }
.info-count { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px; font: 600 13px/1 var(--sans); letter-spacing: .2em; color: rgba(246, 241, 226, .8); font-variant-numeric: tabular-nums; }
.info-sep { width: 34px; height: 1px; background: rgba(246, 241, 226, .3); position: relative; overflow: hidden; }
.info-sep::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.info-name { margin: 0 0 10px; font: 600 clamp(28px, 2.6vw, 40px)/1.05 var(--serif); font-variation-settings: "opsz" 96, "SOFT" 100; letter-spacing: -.015em; color: var(--cream); }
.info-meta { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 8px; font: 600 13.5px/1 var(--sans); letter-spacing: .03em; }
.chip-soft { background: rgba(246, 241, 226, .16); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(246, 241, 226, .22); }
.chip.status { background: var(--cream); color: var(--ink); }
.chip.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5E9A2E; }
.chip.status[data-s="out"]::before { background: #9A9582; }
.chip.status[data-s="hold"]::before { background: var(--citrus); }
.info-note { margin: 0 auto 18px; max-width: 46ch; font: italic 400 17px/1.45 var(--serif); color: rgba(246, 241, 226, .9); min-height: 1.45em; }
/* Prev · Ask · Next */
.info-ctl { display: flex; justify-content: center; align-items: center; gap: 10px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 10px; font: 600 14px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; text-decoration: none; color: var(--cream); background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(246, 241, 226, .22); transition: background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); }
.ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctl:hover { background: rgba(0, 0, 0, .32); }
.ctl:active { transform: scale(.97); }
.ctl-ask { padding: 0 26px; background: var(--cream); color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.ctl-ask:hover { background: #fff; }
.ask-short { display: none; }

/* ---------- range: the A / B switch ----------
   A tiny two-button switch in the section's top-right corner: A, the full-colour carousel; B, the
   shelf of cards. It takes the section's own text colour. */
.range-view { position: absolute; z-index: 20; top: 18px; right: var(--gut); display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.range-view button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; font: 600 11px/1 var(--sans); letter-spacing: .06em; color: inherit; opacity: .6; transition: opacity .2s var(--ease), background .2s var(--ease); }
.range-view button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.range-view button:hover { opacity: .9; }
.range-view button[aria-pressed="true"] { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }

/* ---------- range B: a shelf of cards ----------
   The professional one: the page's paper, the title left and the families right, a row of product
   cards (a warm tile with the photograph, the family, the name, the pack, a round button that asks
   for this week's price) that scrolls sideways, and a progress line and arrows beneath. */
.shelf { display: none; }
.range.is-b { height: auto; min-height: 0; display: block; padding: clamp(96px, 10vw, 136px) var(--gut) clamp(64px, 7vw, 96px); background: var(--paper); color: var(--ink); }
.range.is-b::before, .range.is-b > .range-top, .range.is-b > .chain-wrap, .range.is-b > .info { display: none; }
.range.is-b .shelf { display: block; max-width: 1180px; margin: 0 auto; }
.range.is-b .kicker { display: block; color: var(--leaf); }
.range.is-b .display { font-size: clamp(34px, min(4vw, 7.4svh), 58px); color: var(--ink); }
.range.is-b .display em { color: var(--leaf); }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(24px, 3vw, 36px); }
.shelf-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.shelf-tabs::-webkit-scrollbar { display: none; }
.shelf-tabs-row { display: flex; gap: 22px; width: max-content; }
.shelf-tab { position: relative; padding: 8px 0; white-space: nowrap; font: 500 14px/1 var(--sans); color: var(--body); transition: color .2s var(--ease); }
.shelf-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.shelf-tab:hover { color: var(--ink); }
.shelf-tab[aria-selected="true"] { color: var(--ink); }
.shelf-tab[aria-selected="true"]::after { transform: none; }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; padding-bottom: 4px; }
.shelf-row::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; display: grid; gap: 14px; }
.card-tile { position: relative; aspect-ratio: 1 / 1.02; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #EFEBE1; }
.card-tile img { width: 80%; height: 72%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(31, 42, 20, .16)); transition: transform .5s var(--ease); }
.card:hover .card-tile img { transform: scale(1.05); }
.card-badge { position: absolute; top: 12px; left: 12px; padding: 5px 9px; border-radius: 6px; font: 600 11px/1 var(--sans); letter-spacing: .02em; color: #fff; background: #9A9582; }
.card-badge[data-s="hold"] { background: var(--citrus); }
.card-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px; }
.card-fam { margin: 0 0 4px; font: 500 12px/1 var(--sans); color: var(--body); }
.card-name { margin: 0 0 4px; font: 600 16px/1.25 var(--sans); color: var(--ink); }
.card-pack { margin: 0; font: 400 14px/1.35 var(--sans); color: var(--body); }
.card-ask { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--leaf-900); color: var(--cream); transition: background .25s var(--ease), transform .25s var(--ease); }
.card-ask svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.card-ask:hover { background: var(--leaf); transform: scale(1.06); }
.shelf-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(24px, 3vw, 36px); }
.shelf-track { position: relative; width: min(160px, 40%); height: 2px; overflow: hidden; background: var(--line); }
.shelf-track span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .3s var(--ease); }
.shelf-arrows { display: flex; gap: 8px; }
.shelf-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.shelf-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.shelf-arrow:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.shelf-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 1000px) {
  .shelf-head { flex-direction: column; align-items: stretch; }
  .shelf-tabs { margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .shelf-row { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
}
@media (max-width: 760px) {
  .shelf-row { grid-auto-columns: 72%; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 4px; scroll-padding: 0 var(--gut); }
  .range-view { top: 12px; }
}

/* ---------- trade ----------
   Our own film, held on screen (sticky) for a little over a screen of scrolling, with a short
   passage over it. As the page moves, the film dims (--dim, set by the script) and the words light
   up one by one, as in About. The passage sits in the middle, set left. */
.trade { position: relative; height: 260vh; height: 260svh; background: #0E130A; color: var(--cream); }
.trade-stage { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate; display: grid; place-items: center; padding: var(--bar-h) var(--gut) 24px; }
.trade-film { position: absolute; inset: 0; z-index: -2; }
.trade-film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 51% 45%; }
.trade-dim { --dim: .3; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 80% at 50% 50%, rgba(10, 14, 7, calc(var(--dim) * .92)), rgba(10, 14, 7, calc(.25 + var(--dim) * .75))); }
.trade-copy { width: min(900px, 100%); will-change: opacity, transform; }
.trade .kicker { color: var(--lime); margin: 0 0 22px; }
.trade-text { font: 400 clamp(26px, min(3vw, 5.2svh), 44px)/1.32 var(--serif); letter-spacing: -.012em; font-variation-settings: "opsz" 72, "SOFT" 60; color: var(--cream); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.trade-text p { margin: 0 0 .7em; }
.trade-text p:last-child { margin: 0; }
.trade-text em { font-style: italic; color: var(--lime); }
.trade-text .w { opacity: .28; transition: opacity .25s linear; }
.trade-text .w.lit { opacity: 1; }
.trade-link { display: inline-flex; align-items: center; gap: .35em; color: var(--lime); text-decoration: none; font-style: italic; border-bottom: 1px solid rgba(201, 221, 106, .5); padding-bottom: 2px; transition: border-color .3s var(--ease), gap .3s var(--ease); }
.trade-link::after { content: "→"; font-style: normal; transition: transform .3s var(--ease); }
.trade-link:hover { border-color: var(--lime); }
.trade-link:hover::after { transform: translateX(4px); }
@media (max-width: 760px) {
  .trade { height: 220vh; height: 220svh; }
  .trade-text { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.36; }
  /* upright: the film drawn wide enough that the whole wordmark fits the width, fading into the
     dark above and below */
  .trade-film video { position: absolute; left: 50%; top: 50%; width: 270vw; height: auto; transform: translate(-51%, -45%); object-fit: fill; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
}

/* ---------- pages other than home ----------
   The About page, for now a band of the brand's deep green with its title and the two ways to
   start trading; it will be written out next. */
.page-head { min-height: 62svh; display: grid; place-items: center; padding: calc(var(--bar-h) + clamp(48px, 8vw, 96px)) var(--gut) clamp(56px, 8vw, 96px); background: radial-gradient(60% 50% at 50% 0%, rgba(246, 241, 226, .10), transparent 70%), var(--field); color: var(--cream); text-align: center; }
.page-head-in { display: grid; justify-items: center; gap: 28px; }
.page-head .kicker { margin: 0 0 -16px; }
.page-head .display { color: var(--cream); font-size: clamp(40px, min(6vw, 10svh), 80px); }
.page-head .display em { color: var(--lime); }

/* ---------- footer ---------- */
.foot { background: var(--field-dk); color: rgba(246, 241, 226, .9); padding: clamp(56px, 7vw, 88px) var(--gut) 28px; }
.foot-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 64px); padding-bottom: 44px; border-bottom: 1px solid rgba(201, 221, 106, .16); }
.foot-brand img { width: 170px; height: auto; display: block; }
.foot-brand p { margin: 16px 0 0; max-width: 28ch; font: italic 400 18px/1.4 var(--serif); color: var(--lime); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h3 { margin: 4px 0 6px; font: 600 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--lime); }
.foot-col a, .foot-col p { margin: 0; font-size: 14.5px; line-height: 1.6; text-decoration: none; color: rgba(246, 241, 226, .9); }
.foot-col a:hover { color: var(--cream); }
.foot-base { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 22px; font-size: 12.5px; color: rgba(246, 241, 226, .72); }
.foot-base p { margin: 0; }

/* ---------- tablets and phones ---------- */
/* upright screens: the photograph's two piles sit at the foot, one either side, and the words
   take the green above them */
@media (max-aspect-ratio: 5/4) {
  /* the film sits at the foot and fades up into the page's own green */
  .hero-film { top: auto; bottom: 0; height: 54%; object-position: 50% 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
  .hero-photo::after { background: radial-gradient(60% 40% at 50% 38%, rgba(31, 46, 18, .3), transparent 72%); }
  .hero-copy { margin-top: -30svh; }
}
@media (max-width: 1000px) {
  .bar-links, .bar-end .bar-link { display: none; }
  /* tablets and phones: no room for the links, so ⋯ and the wordmark sit on the left from the start */
  .bar .bar-menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), color .4s var(--ease), background .3s var(--ease), visibility 0s; }
  .bar .bar-logo { left: calc(var(--gut) + 42px); transform: translate(0, -50%); width: 124px; }
  .link { --box: min(36vw, 84cqh, 320px); }
}
@media (max-width: 760px) {
  :root { --bar-h: 64px; }
  .hide-sm { display: none; }
  .bar .bar-logo { width: 110px; left: calc(var(--gut) + 38px); }
  .bar-menu { left: calc(var(--gut) - 11px); }
  .menu { left: calc(var(--gut) - 11px); }
  /* the note keeps two lines of room, so the buttons below never jump as you swipe */
  .info-note { min-height: calc(2 * 1.45em); display: flex; align-items: center; justify-content: center; }
  /* phones: a shorter strip of film (less cropped, so the hand moves less) that holds still, and
     the words centred between the bar and the fruit (the film's top is mostly faded wall) */
  .hero-film { height: 42%; transform: none; }
  .hero-copy { margin-top: -33svh; }
  .hero-copy .kicker { letter-spacing: .18em; font-size: 11px; }
        /* phones: the four fruit float fully in view, a pair above the title and a pair below the text */
  .story { padding-top: 220px; padding-bottom: 200px; }
  .story-float { width: 92px; }
  .s1 { left: 9%; top: 100px; } .s2 { right: 9%; top: 88px; left: auto; } .s3 { left: 12%; bottom: 58px; top: auto; } .s4 { right: 11%; bottom: 70px; top: auto; left: auto; }
  .link { --box: min(56vw, 84cqh, 300px); }
  .ctl { min-height: 48px; padding: 0 16px; }
  .ctl-ask { padding: 0 20px; }
  .info-note { font-size: 16px; }
  .tabs { width: calc(100% + 2 * var(--gut)); }
  .tabs-row { padding: 0 var(--gut); }
  .trade-cta .btn { flex: 1 1 auto; }
  /* the footer on phones: the wordmark, then Explore beside Find us, then Say hello across the
     width with its links in the same two columns, so every line starts on one of two edges */
  .foot { padding-top: 48px; }
  .foot-in { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-bottom: 32px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand img { width: 150px; }
  .foot-brand p { margin-top: 12px; font-size: 17px; }
  .foot-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; align-items: start; }
  .foot-col:last-child h3 { grid-column: 1 / -1; }
  .foot-col a, .foot-col p { font-size: 14px; overflow-wrap: anywhere; }
  .foot-base { flex-direction: column; gap: 4px; padding-top: 18px; }
}
/* ---------- the range on every screen ----------
   It is exactly one screen tall (100dvh: the screen as it is now, whether the phone's browser bars
   are showing or not) and never taller, so on shorter screens it tightens in steps: first the small
   print, then the title, so the fruit keeps its room and Prev · Ask · Next always fit. */
@media (max-height: 760px) {
  .range-top { padding-top: calc(var(--bar-h) + 4px); }
  .range .kicker { display: none; }
  .range .display { font-size: clamp(28px, 6svh, 44px); }
  .tabs { margin-top: 6px; }
  .tab { padding: 11px 0 10px; }
  .chain-wrap { max-height: none; }
  .info { padding-bottom: 14px; }
  .info-count { margin-bottom: 6px; }
  .info-name { margin-bottom: 8px; font-size: clamp(24px, 4.4svh, 34px); }
  .info-meta { margin-bottom: 12px; }
  .info-note { display: none; }
  .ctl { min-height: 44px; }
}
@media (max-height: 600px) {
  .range .display { font-size: clamp(24px, 5.4svh, 32px); }
  .info-count { display: none; }
  .info-name { font-size: 22px; margin-bottom: 6px; }
  .info-meta { margin-bottom: 10px; }
  .chip { min-height: 28px; font-size: 12.5px; }
  .ctl { min-height: 42px; }
}
/* phones turned sideways: the fruit on the left, everything else stacked on the right */
@media (max-height: 520px) and (orientation: landscape) {
  .range { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; padding: 0 var(--gut) 0 0; }
  .range-top { grid-column: 2; grid-row: 1; padding: calc(var(--bar-h) - 8px) 0 0; justify-items: start; text-align: left; }
  .range .display { font-size: clamp(22px, 7svh, 30px); }
  .tabs { width: 100%; margin-top: 4px; }
  .tabs-row { margin: 0; padding: 0; }
  .tab { padding: 9px 0 8px; font-size: 11px; }
  .chain-wrap { grid-column: 1; grid-row: 1 / span 2; max-height: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .info { grid-column: 2; grid-row: 2; align-self: center; width: 100%; margin: 0; padding: 0 0 12px; text-align: left; }
  .info-meta, .info-ctl, .info-count { justify-content: flex-start; }
  .info-name { font-size: 22px; }
  .ctl { min-height: 40px; padding: 0 14px; }
  .ctl-ask { padding: 0 16px; }
  .ask-long { display: none; }
  .ask-short { display: inline; }
  .link { --box: min(30vw, 66cqh, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .story-text .w { opacity: 1; }
  .trade-text .w { opacity: 1; }
}
@media (max-width: 420px) {
  .ask-long { display: none; }
  .ask-short { display: inline; }
}