/* src/styles/site.css */
/**
* site.css — static rules lifted out of the design-tool runtime.
*
* These were written from JavaScript on every pass even though they never
* varied with anything: `setupMarquee()`'s layout of the credentials strip,
* and the point-count rule that decides how many claims the strip carries.
* They are plain CSS here.
*/
/* the credentials strip is owned entirely by tools/responsive-map.mjs, because
its authored markup carries inline display/flex/gap that a stylesheet rule
here could not override */
/* ── reveal-on-scroll: hidden from the very first paint ─────────────────────
*
* The reveal system used to decide what to hide entirely in JavaScript, which
* only runs after the browser has already parsed and painted the page once.
* That meant every visitor saw the real, fully visible text for a frame or
* two, watched it vanish the instant the script armed it, then watched it
* fade back in — a flash, not an entrance. It read exactly like the "fast,
* jumpy splash" it was reported as.
*
* This stylesheet is render-blocking (a normal in
* ), so it applies before the browser paints a single frame of .
* Setting the hidden state here means there is nothing to flash: content is
* simply born hidden and fades in once, on cue, exactly once.
*
* [data-anim] and [data-anim-unwrapped] are baked into the HTML itself (see
* the reveal-bake pass) as the exact set collectReveals() would otherwise
* compute live in the browser — verified element-for-element against the
* live computation across every page before shipping. [data-reveal] and
* [data-band-in] are the two attributes the design already carried; nothing
* new needed there.
*/
main [data-reveal],
main [data-band-in],
main [data-anim] {
opacity: 0;
transform: translateY(18px);
}
/* a [data-reveal] wrapper the bake decided to unwrap (its children animate
individually instead) must not itself stay hidden underneath them */
main [data-anim-unwrapped] {
opacity: 1;
transform: none;
}
/* content must never depend on JavaScript to become visible */
@media (prefers-reduced-motion: reduce) {
main [data-reveal],
main [data-band-in],
main [data-anim] {
opacity: 1;
transform: none;
}
[data-feat-track] {
animation: none;
}
}
/* ── touch targets ────────────────────────────────────────────────────────
*
* The design already solves this for dense navigation rows: a 44px invisible
* ::before, which gives a comfortable target without moving a single pixel of
* layout. The same technique is extended here to the inline CTAs, footer
* contact details, cart controls and product-card links, which render 14–28px
* tall and are the primary way a phone user moves through the site.
*
* Applied below 1024px and on any coarse-pointer device — an iPad in landscape
* is exactly 1024px wide and is still a thumb. A mouse-driven desktop matches
* neither condition, so the approved desktop is untouched; and because the hit
* area is an invisible ::before, nothing moves even where it does apply.
*/
@media (max-width: 1023.98px), (pointer: coarse) {
[data-ul],
[data-cart-remove],
[data-cart-detail] a,
[data-shop-card] a,
[data-range4] a,
[data-pack4] a,
[data-band-in][href],
[data-footer-contact] a,
[data-header-inner] > a:first-child,
footer a[href^='tel:'],
footer a[href^='mailto:'] {
position: relative;
}
[data-ul]::before,
[data-cart-remove]::before,
[data-cart-detail] a::before,
[data-shop-card] a::before,
[data-range4] a::before,
[data-pack4] a::before,
[data-band-in][href]::before,
[data-footer-contact] a::before,
[data-header-inner] > a:first-child::before,
footer a[href^='tel:']::before,
footer a[href^='mailto:']::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
/* a card-wide link already covers its card; it must not also spawn a bar */
[data-shop-card] a[data-card-link]::before,
[data-range4] article > a::before,
[data-pack4] article > a::before {
display: none;
}
}
/* ── measure at tablet ────────────────────────────────────────────────────
*
* The range bands are a two-column editorial split on desktop, so the copy
* column caps itself at ~497px. Between 720 and 1023px the split collapses to
* one column and the same paragraphs stretch the full content width — ~83
* characters, well past the design system's "body never exceeds 620px / 60ch".
*
* Only paragraphs with no authored max-width are affected; the ones that carry
* their own inline cap keep it. Desktop is outside this range and untouched.
*/
@media (min-width: 720px) and (max-width: 1023.98px) {
[data-band-txt] > p {
max-width: 60ch;
}
}
/* ── measurement guard ────────────────────────────────────────────────────
*
* Elements waiting to reveal sit 18px lower than their final position, and
* that offset counts towards an ancestor's scrollHeight. The layout pass
* measures scrollHeight to decide whether a section fits one viewport, so an
* un-revealed section could push a locked section into "does not fit" and
* change the approved desktop geometry.
*
* layout.js sets this flag for the duration of a measuring pass. It is applied
* and removed inside a single task, so nothing is ever painted in this state.
*/
.byk-measuring [data-hidden] {
transform: none !important;
}
/* ── minimum-order notice on the quantity stepper ─────────────────────── */
[data-qty-note] {
opacity: 0;
transition: opacity 0.24s ease;
}
[data-qty-note][data-show] {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
[data-qty-note] {
transition: none;
}
}
/* ── commerce hand-off pages ──────────────────────────────────────────── */
[data-handoff] {
display: grid;
gap: clamp(24px, 3.4vh, 40px);
max-width: 62ch;
}
[data-handoff-steps] {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(13, 13, 12, 0.12);
}
[data-handoff-steps] li {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: clamp(12px, 2vw, 22px);
align-items: baseline;
padding: clamp(16px, 2.2vh, 24px) 0;
border-bottom: 1px solid rgba(13, 13, 12, 0.12);
}
[data-handoff-steps] li > span:first-child {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
color: rgba(13, 13, 12, 0.45);
font-variant-numeric: tabular-nums;
}
/* src/styles/generated/hover.css */
/* Generated by tools/extract.mjs — do not edit.
* The design references carry hover states in a `style-hover` attribute.
* No browser honours it and the design-tool runtime never implemented it,
* so these authored states never actually rendered. Each pair becomes a
* real base rule plus a :hover/:focus-visible rule here. */
.hv-1{color:rgba(251,250,247,0.76)}
.hv-1:hover,.hv-1:focus-visible{color:#FBFAF7}
[data-nav-trigger][aria-expanded="true"]{color:#FBFAF7}
.hv-2{color:rgba(242,237,228,0.7)}
.hv-2:hover,.hv-2:focus-visible{color:#FBFAF7}
.hv-3{color:rgba(251,250,247,0.7)}
.hv-3:hover,.hv-3:focus-visible{color:#FBFAF7}
.hv-4{background:#FBFAF7;color:#0D0D0C}
.hv-4:hover,.hv-4:focus-visible{background:transparent;color:#FBFAF7}
.hv-5{color:rgba(251,250,247,0.86)}
.hv-5:hover,.hv-5:focus-visible{color:#FBFAF7}
.hv-6{color:#FBFAF7}
.hv-6:hover,.hv-6:focus-visible{color:#C9922A}
.hv-7{color:rgba(251,250,247,0.74)}
.hv-7:hover,.hv-7:focus-visible{color:#FBFAF7}
.hv-8{background:#FBFAF7;color:#091529}
.hv-8:hover,.hv-8:focus-visible{background:#C9922A;color:#091529}
.hv-9{color:rgba(251,250,247,0.86)}
.hv-9:hover,.hv-9:focus-visible{color:#C9922A;border-color:#C9922A}
.hv-10{color:rgba(13,13,12,0.7)}
.hv-10:hover,.hv-10:focus-visible{color:#C9922A;border-color:#C9922A}
.hv-11{color:rgba(13,13,12,0.82)}
.hv-11:hover,.hv-11:focus-visible{color:#C9922A;border-color:#C9922A}
.hv-12{color:rgba(13,13,12,0.82)}
.hv-12:hover,.hv-12:focus-visible{color:#8E2A55;border-color:#8E2A55}
.hv-13{color:rgba(13,13,12,0.82)}
.hv-13:hover,.hv-13:focus-visible{color:#E2701A;border-color:#E2701A}
.hv-14{color:rgba(13,13,12,0.82)}
.hv-14:hover,.hv-14:focus-visible{color:#D4194F;border-color:#D4194F}
.hv-15{color:rgba(13,13,12,0.86)}
.hv-15:hover,.hv-15:focus-visible{color:#C9922A;border-color:#C9922A}
.hv-16:hover,.hv-16:focus-visible{border-color:#0D0D0C}
.hv-17{background:#0D0D0C;color:#FBFAF7}
.hv-17:hover,.hv-17:focus-visible{background:#C9922A;color:#0D0D0C}
.hv-18{color:#0D0D0C}
.hv-18:hover,.hv-18:focus-visible{color:#C9922A}
.hv-19{color:rgba(13,13,12,0.88)}
.hv-19:hover,.hv-19:focus-visible{color:#0D0D0C}
.hv-20{background:#FBFAF7;color:#0D0D0C}
.hv-20:hover,.hv-20:focus-visible{background:#C9922A;color:#0D0D0C}
.hv-21{color:rgba(251,250,247,0.82)}
.hv-21:hover,.hv-21:focus-visible{background:#C9922A;color:#0D0D0C;border-color:#C9922A}
.hv-22{color:#FBFAF7}
.hv-22:hover,.hv-22:focus-visible{color:#0D0D0C;background:#E8C77A}
.hv-23{color:rgba(251,250,247,0.72)}
.hv-23:hover,.hv-23:focus-visible{color:#0D0D0C;background:#E8C77A}
.hv-24{background:#2E5F5B;color:#FBFAF7}
.hv-24:hover,.hv-24:focus-visible{background:#C9922A;color:#0D0D0C}
.hv-25{background:#C9922A;color:#0D0D0C}
.hv-25:hover,.hv-25:focus-visible{background:#0D0D0C;color:#FBFAF7}
.hv-26{background:#7E76A8;color:#0D0D0C}
.hv-26:hover,.hv-26:focus-visible{background:#0D0D0C;color:#FBFAF7}
.hv-27{background:#C97A2B;color:#0D0D0C}
.hv-27:hover,.hv-27:focus-visible{background:#0D0D0C;color:#FBFAF7}
.hv-28{background:#7A3D52;color:#FBFAF7}
.hv-28:hover,.hv-28:focus-visible{background:#0D0D0C;color:#FBFAF7}
.hv-29{background:#2E5F5B;color:#FBFAF7}
.hv-29:hover,.hv-29:focus-visible{background:#0D0D0C;color:#FBFAF7}
.hv-30{background:#0D0D0C;color:#FBFAF7}
.hv-30:hover,.hv-30:focus-visible{background:#C9922A;color:#0D0D0C;border-color:#C9922A}
.hv-31{color:#0D0D0C}
.hv-31:hover,.hv-31:focus-visible{background:#0D0D0C;color:#FBFAF7;border-color:#0D0D0C}
/* src/styles/generated/mobile-overrides.css */
/* Generated by tools/extract.mjs — do not edit.
* The responsive pass replaced these values only below 720px, and only
* when the element already carried a non-zero authored value. */
.mo-1{margin-top:clamp(20px,2.8vh,30px)}
@media (max-width:719px){.mo-1{margin-top:clamp(8px,1.5svh,16px)}}
.mo-2{margin-top:clamp(14px,1.8vh,20px)}
@media (max-width:719px){.mo-2{margin-top:clamp(8px,1.5svh,16px)}}
/* src/styles/generated/responsive.css */
/* Generated by tools/responsive-map.mjs — do not edit by hand.
* Replaces the design-tool `setupResponsive()` pass, which wrote these
* values as inline styles from JavaScript on every resize. */
[data-desktop-nav]{display:none}
[data-header-inner]{grid-template-columns:auto 1fr}
[data-hide-sm]{display:none}
[data-show-sm]{display:flex}
[data-wordmark]{display:none}
[data-hide-tiny]{display:none}
[data-mega-grid]{grid-template-columns:1fr}
[data-page-top]{padding-top:calc(var(--byk-bar,63px) + 22px)}
[data-hero-row]{grid-template-columns:1fr}
[data-hero-eyebrow]{font-size:0.625rem;letter-spacing:0.11em}
[data-hero-desc]{font-size:0.875rem;line-height:1.6}
[data-hero-link]{font-size:0.875rem;letter-spacing:0.02em;padding:10px 0 8px;display:inline-flex;align-items:center}
[data-hero-media]{background-position:50% 38%}
[data-hero-media] video{object-position:50% 38%}
[data-creds]{padding:10px clamp(18px,4vw,72px);font-size:9.5px;letter-spacing:0.13em}
[data-cred-long]{display:none}
[data-cred-short]{display:inline}
[data-creds-band]{overflow:visible}
[data-marquee-track]{transform:none;will-change:auto;flex:1 1 auto;flex-wrap:nowrap;justify-content:space-between;animation:none}
[data-marquee-track] > :first-child{flex:1 1 auto;flex-wrap:nowrap;justify-content:space-between;width:100%;padding-right:0;row-gap:6px;column-gap:0}
[data-marquee-track] > :not(:first-child){display:none}
[data-marquee-track] > :first-child > *{display:block}
[data-marquee-track] > :first-child > :nth-child(n+6){display:none}
[data-band-grid]{min-height:auto;height:auto;grid-template-columns:1fr;grid-template-rows:auto var(--byk-img,46svh)}
[data-band-img]{order:1;height:100%}
[data-band-txt]{order:0;padding-left:20px;padding-right:20px;padding-top:clamp(56px,8vh,80px);padding-bottom:clamp(56px,8vh,80px);gap:clamp(8px,1.1svh,12px);overflow:visible}
[data-band-long]{font-size:14.5px;line-height:1.58}
[data-band-txt] dl{grid-template-columns:repeat(2,minmax(0,auto))}
#why{min-height:auto}
[data-why-split]{grid-template-columns:1fr;min-height:auto;max-height:none}
[data-why-copy]{grid-column:1 / -1;grid-row:1;display:flex;flex-direction:column;
justify-content:center;padding:clamp(24px,3.4svh,38px) 22px}
[data-why-head]{padding:clamp(14px,2.2svh,22px) 22px 0;grid-column:1 / -1;grid-row:1;justify-content:center}
[data-why-listwrap]{padding:0 22px clamp(12px,1.8svh,18px);grid-column:1 / -1;grid-row:2;margin-top:16px}
[data-why-figure]{align-self:stretch;min-height:clamp(240px,66vw,340px);height:auto;aspect-ratio:auto;position:relative;grid-column:1 / -1;grid-row:2}
[data-why-row]{padding:0;border-top:none;column-gap:16px}
[data-why-row] h3{font-size:clamp(0.875rem,2.1svh,1rem);line-height:1.16}
[data-why-sup]{display:block;max-width:30ch;font-size:clamp(0.84375rem,min(1vw,1.45svh),0.9375rem);line-height:1.45}
[data-why-rows]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.9svh,20px) 18px;border-bottom:none}
[data-why-h2]{font-size:clamp(34px,5.4vw,104px);max-width:14ch;margin-top:clamp(10px,1.6svh,16px)}
[data-why-body]{margin:clamp(14px,2vh,20px) 0 0}
[data-bottle-fig]{grid-template-columns:minmax(0,1fr) clamp(104px,30vw,240px) minmax(0,1fr);column-gap:clamp(12px,2.6vw,32px)}
[data-bottle-figure]{order:0;grid-column:auto;min-height:38vh;margin-bottom:0}
[data-fact-col]{display:flex}
[data-fact-cell]{padding-left:0;padding-right:0}
[data-fact-cell="left"]{text-align:right;align-items:flex-end}
[data-fact-cell="right"]{text-align:left;align-items:flex-start}
[data-fact-cell] h3{font-size:1rem;max-width:none}
[data-fact-cell] p{font-size:0.8125rem;max-width:none}
[data-fact-tick]{display:none;width:12px}
[data-fact-cell="left"] [data-fact-tick]{left:auto;right:-13px}
[data-fact-cell="right"] [data-fact-tick]{right:auto;left:-13px}
[data-bottle-head]{grid-template-columns:1fr}
#bottle [data-lead]{justify-self:start;text-align:left;align-self:start}
[data-what-grid]{grid-template-columns:1fr}
[data-what-facts]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-what-figure]{min-height:clamp(320px,60vw,520px)}
[data-compare-head]{grid-template-columns:1fr}
[data-crow-grid]{grid-template-columns:minmax(0,0.64fr) minmax(0,1.12fr) minmax(0,0.92fr) minmax(0,0.92fr)}
#compare, #faq{min-height:auto}
[data-cthead]{display:grid}
[data-clabel]{display:none}
[data-steps]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-steps-rule]{display:none}
[data-steps] > div{border-top:1px solid rgba(13,13,12,0.2)}
[data-day-head]{grid-template-columns:1fr}
/* editorial image/copy split — self-contained so it never inherits the range
band rules, which zero their own padding and rely on JS to put it back */
[data-esplit]{display:grid;grid-template-columns:1fr;align-items:stretch;width:100%}
[data-esplit-copy]{display:flex;flex-direction:column;justify-content:center;
padding:clamp(48px,7vh,104px) clamp(20px,5vw,80px)}
[data-esplit-fig]{position:relative;margin:0;overflow:hidden;min-height:clamp(260px,62vw,420px)}
#meet-the-maker [data-esplit-fig]{aspect-ratio:2 / 3;min-height:0}
[data-esplit-fig] > img,[data-esplit-fig] > video{position:absolute;inset:0;
width:100%;height:100%;object-fit:cover}
/* Marina's second chapter: two numbered columns over a pull quote */
[data-story2]{width:100%;padding:clamp(40px,5.4vh,76px) clamp(20px,5vw,80px)}
[data-story2-grid]{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px)}
[data-story2-grid] > article p{font-size:clamp(0.75rem,3.1vw,0.875rem);line-height:1.6}
[data-story2-grid] > article h3{font-size:clamp(1.0625rem,4.4vw,1.375rem)}
[data-story2-grid] > article{padding-top:0}
[data-story2-grid] > article p{line-height:1.62}
[data-story2-quote]{margin:clamp(26px,3.4vh,44px) 0 0;padding-top:clamp(22px,2.6vh,34px);
border-top:1px solid rgba(13,13,12,0.18);display:grid;grid-template-columns:1fr;
gap:clamp(20px,3vh,32px);align-items:end}
/* three-part section: copy, centred media, copy */
[data-tri]{display:grid;grid-template-columns:1fr;align-items:center;gap:clamp(26px,4vh,44px);
width:100%;padding:clamp(48px,7vh,96px) clamp(20px,5vw,80px)}
/* reviews carousel — one step per press, so the offset is measured in px */
[data-benefits-grid]{grid-template-columns:1fr 1fr;column-gap:clamp(16px,4vw,28px)}
[data-benefits-grid] > article h3{font-size:clamp(0.9375rem,3.9vw,1.25rem)}
[data-benefits-grid] > article p{font-size:clamp(0.8125rem,3.5vw,0.9375rem);line-height:1.58}
[data-benefits-grid] > article{padding-top:clamp(14px,1.8vh,20px);padding-bottom:clamp(14px,1.8vh,20px);padding-right:clamp(12px,3.2vw,20px)}
/* one pour, two crops: the phone gets the landscape cut, desktop the portrait */
[data-media-tall]{display:none}
[data-rev-viewport]{overflow:hidden}
[data-rev-track]{display:flex;gap:clamp(24px,3.4vw,64px);
transition:transform .72s cubic-bezier(.22,.7,.25,1);will-change:transform}
[data-rev-item]{flex:0 0 100%;min-width:0}
[data-rev-btn][disabled]{opacity:.28;cursor:default}
/* the controls row stays on one line at every width: the links shrink with
the viewport rather than wrapping under the arrows */
[data-rev-foot]{flex-wrap:nowrap;gap:clamp(6px,1.8vw,14px)}
[data-rev-links]{gap:clamp(9px,3vw,18px);min-width:0}
[data-rev-links] a{font-size:clamp(0.625rem,3.3vw,0.8125rem);white-space:nowrap;min-height:38px}
[data-rev-btn]{min-width:32px;min-height:38px;flex:0 0 auto}
[data-rev-btn] svg{width:13px;height:9px}
@media (prefers-reduced-motion: reduce){
[data-rev-track]{transition:none}
}
[data-day-scroller]{overflow-x:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0px}
[data-day-card]{flex:1 1 0;width:auto;min-width:0;display:flex;flex-direction:column-reverse;overflow:visible;background:transparent;border-left:none;padding-left:0px;grid-column:span 1}
[data-day-card]:nth-child(2),[data-day-card]:nth-child(3),[data-day-card]:nth-child(5),[data-day-card]:nth-child(6){border-left:1px solid rgba(13,13,12,0.14)}
[data-day-card]:nth-child(4){border-left:none}
[data-day-img]{overflow:hidden;min-height:21vh}
[data-day-card] figcaption{position:static;background:none;display:flex;flex-direction:column;justify-content:flex-start;border-top:none;color:#0D0D0C;padding-top:14px;padding-bottom:14px;padding-left:12px;padding-right:12px}
[data-day-card]:nth-child(1) figcaption,[data-day-card]:nth-child(4) figcaption{padding-left:clamp(20px,5vw,80px)}
[data-day-card]:nth-child(3) figcaption,[data-day-card]:nth-child(6) figcaption{padding-right:clamp(20px,5vw,80px)}
[data-day-card] figcaption > :first-child{color:#0D0D0C;font-size:1rem}
[data-day-card] figcaption > :nth-child(2){color:rgba(13,13,12,0.62);font-size:0.875rem}
[data-choose-head]{grid-template-columns:1fr}
[data-choose-scroller]{overflow-x:visible;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0px}
[data-choose-card]{flex:1 1 0;width:auto;min-width:0;display:flex;flex-direction:column-reverse;overflow:visible;background:transparent;border-left:none;padding-left:0px;grid-column:span 2}
[data-choose-card]:nth-child(n+4){grid-column:span 3}
[data-choose-card]:nth-child(2),[data-choose-card]:nth-child(3),[data-choose-card]:nth-child(5){border-left:1px solid rgba(13,13,12,0.14)}
[data-choose-card]:nth-child(4){border-left:none}
[data-choose-img]{overflow:hidden;min-height:21vh}
[data-choose-card] figcaption{position:static;background:none;display:flex;flex-direction:column;justify-content:flex-start;border-top:none;color:#0D0D0C;padding-top:14px;padding-bottom:14px;padding-left:12px;padding-right:12px}
[data-choose-card]:nth-child(1) figcaption,[data-choose-card]:nth-child(4) figcaption{padding-left:clamp(20px,5vw,80px)}
[data-choose-card]:nth-child(3) figcaption,[data-choose-card]:nth-child(5) figcaption{padding-right:clamp(20px,5vw,80px)}
[data-choose-card] figcaption > :first-child{color:#0D0D0C;font-size:1rem}
[data-choose-card] figcaption > :nth-child(2){color:rgba(13,13,12,0.62);font-size:0.875rem}
[data-ferment-grid]{grid-template-columns:1fr}
[data-ferment-quote]{display:none}
[data-ferment-pad]{padding-top:clamp(54px,7vh,78px);padding-bottom:clamp(54px,7vh,78px)}
#ferment{height:auto;min-height:auto}
#mayo{min-height:auto}
[data-screen-label="Closing"]{min-height:auto}
[data-grains-card]{position:absolute;left:clamp(18px,4vw,32px);right:auto;top:auto;bottom:clamp(18px,4vw,32px);transform:none;max-width:min(86%,320px)}
[data-says]{grid-template-columns:1fr;padding-top:clamp(34px,4.6vh,50px);padding-bottom:clamp(34px,4.6vh,50px)}
[data-delivery]{grid-template-columns:1fr}
[data-delivery-cols]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-journey-rule]{display:none}
[data-delivery-copy]{padding-top:clamp(34px,4.6vh,50px);padding-bottom:clamp(34px,4.6vh,50px)}
[data-delivery-figure]{order:2;min-height:clamp(300px,58vw,520px)}
[data-family-grid]{grid-template-columns:1fr}
[data-family-figure]{align-self:stretch;margin-top:0;order:2;padding:0;width:auto;justify-self:stretch;height:100%;min-height:clamp(300px,58vw,520px)}
[data-family-pad]{padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px);padding-top:clamp(34px,4.6vh,48px);padding-bottom:clamp(34px,4.6vh,48px)}
[data-faq-grid]{grid-template-columns:1fr}
[data-closing-grid]{grid-template-columns:1fr;padding-top:clamp(40px,5.4vh,58px);padding-bottom:clamp(40px,5.4vh,58px)}
[data-closing-aside]{padding-left:0;border-left-width:0}
[data-compare-pad]{padding-top:clamp(36px,5vh,54px);padding-bottom:clamp(36px,5vh,54px)}
[data-bottle-pad]{padding-top:clamp(36px,5vh,54px);padding-bottom:clamp(36px,5vh,54px)}
[data-day-pad]{padding-top:clamp(36px,5vh,54px);padding-bottom:0px}
[data-choose-pad]{padding-top:clamp(36px,5vh,54px);padding-bottom:0px}
[data-story-grid]{grid-template-columns:1fr}
[data-story-aside]{padding-left:0;border-left-width:0;justify-self:start}
[data-404-grid]{grid-template-columns:1fr}
[data-404-fig]{width:100%;order:1;align-self:stretch;min-height:clamp(220px,44vw,340px);height:clamp(220px,44vw,340px);margin-top:0px}
[data-404-copy]{padding:0 clamp(20px,5vw,80px) clamp(34px,5vh,54px)}
[data-shop-grid]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-shop-card]{grid-column:auto}
[data-three]{grid-template-columns:1fr}
[data-ctableX]{display:none}
[data-cstackX]{display:flex}
[data-cell-oursX],[data-coursX]{margin-left:10px;margin-right:10px}
[data-rowheadX]{font-size:0.6875rem}
[data-buy-full]{margin-top:var(--byk-bar,63px);gap:0px;padding:0px;align-items:stretch;grid-template-columns:1fr;height:auto;min-height:max(320px,calc(100svh - var(--byk-bar,63px)))}
[data-buy-fig]{order:-1;width:100%;aspect-ratio:auto;margin-top:0px;height:clamp(240px,56vw,420px);min-height:clamp(240px,56vw,420px)}
[data-buy-copy]{display:flex;flex-direction:column;justify-content:center;overflow:visible;height:auto;row-gap:0px;padding:clamp(22px,3.4vh,32px) clamp(20px,5vw,80px)}
[data-buy-copy] [data-price]{font-size:clamp(1.375rem,4svh,1.75rem)}
[data-buy-note]{display:block;font-size:0.6875rem;letter-spacing:0.1em;color:rgba(13,13,12,0.62);margin-top:clamp(14px,2.2vh,20px);padding-top:0px}
[data-buy-chips]{display:flex;margin-top:clamp(10px,1.6vh,16px)}
[data-buy-copy] h1{font-size:clamp(1.5rem,min(7vw,4.4svh),2.25rem);margin:clamp(8px,1.4svh,14px) 0 0}
[data-buy-copy] h1 + p{font-size:clamp(0.9375rem,2.1svh,1.0625rem);margin:clamp(8px,1.5svh,16px) 0 0}
[data-taste]{grid-template-columns:1fr}
[data-drink]{grid-template-columns:1fr}
[data-ferm]{grid-template-columns:1fr}
[data-taste],[data-drink],[data-ferm]{height:auto;min-height:auto;align-items:stretch}
[data-taste-fig],[data-drink-fig],[data-ferm-fig]{position:relative;height:clamp(240px,56vw,420px);min-height:clamp(240px,56vw,420px);order:1}
[data-taste-copy],[data-drink-copy],[data-ferm-copy]{padding:clamp(34px,5vh,54px) clamp(20px,5vw,80px)}
[data-drink-copy]{align-items:flex-start;padding-left:clamp(20px,5vw,80px)}
[data-band-sec]{height:auto;min-height:auto;overflow:visible}
[data-spec]{grid-template-columns:1fr;height:auto;min-height:auto;align-items:stretch;gap:0px}
[data-spec-l],[data-spec-r]{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vh,44px) clamp(20px,5vw,80px)}
[data-spec-sec]{border-bottom:1px solid rgba(13,13,12,0.16)}
[data-spec-fig]{width:100%;align-self:center;justify-self:center;aspect-ratio:auto;height:clamp(240px,56vw,420px);min-height:clamp(240px,56vw,420px)}
[data-two]{grid-template-columns:1fr;gap:clamp(26px,3.4vw,72px);padding-top:0px;padding-bottom:0px}
[data-two] > :first-child{order:0;padding:0px}
[data-two] > :last-child{order:0;padding:0px}
[data-two-pad]{padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px);padding-top:clamp(34px,4.6vh,50px);padding-bottom:clamp(34px,4.6vh,50px)}
[data-pack4]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-packnext]{grid-template-columns:1fr}
[data-packknow]{grid-template-columns:1fr}
[data-packnext-fig],[data-packknow-fig]{width:100%;order:1;min-height:clamp(240px,56vw,420px);height:clamp(240px,56vw,420px)}
[data-range4]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-range4] article a[href] img{object-position:50% 46%}
[data-chero]{grid-template-columns:1fr;min-height:clamp(400px,56svh,640px)}
[data-chero-copy]{padding-top:calc(var(--byk-bar,63px) + 26px);padding-bottom:26px}
[data-chero-fig]{order:1;margin-top:clamp(6px,1.6vh,14px);min-height:clamp(220px,50vw,340px)}
[data-cgrid]{grid-template-columns:1fr}
[data-inbox]{grid-template-columns:1fr}
[data-needs]{grid-template-columns:1fr}
[data-cform-fig]{min-height:clamp(220px,50vw,360px);order:1}
[data-mapheadgrid]{grid-template-columns:1fr}
[data-bywrite]{grid-template-columns:1fr}
[data-mapwrap]{height:clamp(320px,68vw,400px)}
[data-whero]{grid-template-columns:1fr;min-height:auto;margin-top:0px;margin-bottom:0px}
[data-whero-copy]{padding:clamp(24px,3.4vh,44px) clamp(20px,5vw,80px)}
[data-whero] [data-wfig]{height:clamp(150px,34vw,230px);min-height:0px}
[data-wferm]{grid-template-columns:1fr;padding:0px;width:100%;gap:0px;max-width:none}
[data-wferm-parent]{padding-left:0px;padding-right:0px}
[data-wferm] > *:not([data-wfermfig]){padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
[data-wfermfig]{min-height:0px;order:1}
[data-wtime]{grid-template-columns:1fr}
[data-wtline]{left:4px;right:auto;top:4px;width:1px;height:calc(100% - 8px)}
[data-wtstep]{padding-top:0;padding-left:clamp(24px,7vw,34px)}
[data-wtdot]{top:10px;left:0}
[data-wstatband]{margin-top:0px;padding-top:clamp(30px,4.4vh,48px)}
[data-wstatrow]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-wsplit-copy]{padding-left:clamp(20px,5vw,80px)}
[data-wgrains-copy] p,[data-wferm] p{max-width:none}
[data-wgrains-copy] h2,[data-wferm] h2{max-width:14ch}
[data-wvs]{grid-template-columns:1fr;gap:clamp(24px,3.4vw,72px)}
[data-wprocess]{padding:clamp(22px,3vh,34px) 0}
[data-wprocess] > *{padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
[data-wprocess] > [data-wtfig]{padding-left:0px;padding-right:0px;display:block;max-width:none;width:100%;margin-left:0;margin-right:0;height:218px;min-height:0px}
[data-wvswrap]{padding:clamp(44px,6vh,96px) 0}
[data-wvswrap] > *{padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
[data-wbefore]{grid-template-columns:1fr}
[data-wsplit],[data-wsplit2]{grid-template-columns:1fr}
[data-wgrains],[data-wsplit3]{grid-template-columns:1fr}
[data-wsplit],[data-wgrains],[data-wsplit2],[data-wsplit3]{min-height:auto}
[data-wsplit] > [data-wfig],[data-wgrains] > [data-wfig],[data-wsplit2] > [data-wfig],[data-wsplit3] > [data-wfig]{order:1;min-height:0px}
[data-wdet]{grid-template-columns:1fr}
[data-wsplit2-sec]{padding-top:0px;padding-bottom:0px;margin-top:0px}
[data-wsplit3-sec]{padding-top:0px;padding-bottom:0px;margin-top:-1px}
[data-sect-pad]:not([data-band-pad]):not([data-two-pad]){padding-top:clamp(34px,4.6vh,50px);padding-bottom:clamp(34px,4.6vh,50px)}
[data-footer-top]{grid-template-columns:1fr}
[data-footer-cols]{grid-template-columns:repeat(2,1fr)}
[data-fcol]{text-align:left;align-items:stretch}
[data-fcol="shop"]{order:1}
[data-fcol="company"]{order:2}
[data-fcol="kefir"]{order:3}
[data-fcol="legal"]{order:4}
[data-footer-cta]{grid-column:1 / -1;margin-top:10px;order:5}
[data-footer-cred]{display:none}
[data-footer-cta-note]{display:none}
[data-footer-legal]{justify-content:center}
[data-footer-legal-left]{text-align:center;width:100%;order:2}
[data-footer-legal-right]{text-align:center;width:100%;order:1}
[data-newsletter] button{flex:1 1 100%;justify-content:center;display:flex}
@media (min-width:390px){
[data-wordmark]{display:flex}
}
@media (min-width:400px){
[data-creds]{font-size:10px}
[data-fact-cell] h3{font-size:1.125rem}
[data-day-img]{min-height:25vh}
[data-day-card] figcaption > :first-child{font-size:1.125rem}
[data-day-card] figcaption > :nth-child(2){font-size:0.9375rem}
[data-choose-img]{min-height:25vh}
[data-choose-card] figcaption > :first-child{font-size:1.125rem}
[data-choose-card] figcaption > :nth-child(2){font-size:0.9375rem}
[data-newsletter] button{flex:0 0 auto}
}
@media (min-width:480px){
[data-journey-rule]{display:block}
}
@media (min-width:560px){
[data-steps]{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-steps-rule]{display:block}
[data-steps] > div{border-top:none}
[data-day-card] figcaption{padding-left:14px;padding-right:14px}
[data-choose-card] figcaption{padding-left:14px;padding-right:14px}
}
@media (min-width:720px){
[data-rev-item]{flex:0 0 calc((100% - clamp(24px,3.4vw,64px)) / 2)}
[data-hide-tiny]{display:inline}
[data-hero-eyebrow]{font-size:0.6875rem;letter-spacing:0.13em}
[data-hero-desc]{font-size:0.9375rem}
[data-hero-link]{font-size:0.9375rem;padding:0 0 4px}
[data-hero-media]{background-position:50% 50%}
[data-hero-media] video{object-position:50% 50%}
[data-creds]{font-size:11px;letter-spacing:0.16em}
[data-band-txt]{padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
[data-band-txt] dl{grid-template-columns:repeat(3,minmax(0,auto))}
[data-why-split]{grid-template-columns:minmax(0,0.46fr) minmax(0,0.54fr)}
[data-why-head]{padding:clamp(26px,4svh,54px) clamp(18px,3vw,32px) 0;grid-column:1;justify-content:flex-end}
[data-why-listwrap]{padding:0 clamp(18px,3vw,32px) clamp(26px,4svh,54px);grid-column:1;margin-top:22px}
#why{min-height:100svh}
[data-why-split]{min-height:100svh}
[data-why-copy]{grid-column:1;grid-row:1;padding:clamp(34px,5.4svh,64px) clamp(18px,3vw,32px)}
[data-why-figure]{min-height:100%;grid-column:2;grid-row:1}
[data-why-row]{padding:clamp(4px,1.05svh,18px) 0;border-top:1px solid rgba(13,13,12,0.14);column-gap:20px}
[data-why-row] h3{font-size:1rem}
[data-why-sup]{max-width:42ch}
[data-why-rows]{display:block;grid-template-columns:none;gap:0px;border-bottom:1px solid rgba(13,13,12,0.14)}
[data-why-h2]{font-size:1.5rem;max-width:18ch}
[data-bottle-figure]{min-height:46vh}
[data-fact-tick]{display:block}
[data-crow-grid]{grid-template-columns:minmax(0,0.86fr) minmax(0,1.34fr) minmax(0,1fr) minmax(0,1fr)}
[data-day-img]{min-height:34vh}
[data-choose-img]{min-height:34vh}
[data-ferment-quote]{display:block}
[data-ferment-pad]{padding-top:clamp(72px,9vh,108px);padding-bottom:clamp(72px,9vh,108px)}
#mayo{min-height:76svh}
[data-says]{padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(44px,6vh,72px)}
[data-delivery-copy]{padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(44px,6vh,72px)}
[data-family-pad]{padding-top:clamp(44px,6vh,64px);padding-bottom:clamp(44px,6vh,64px)}
[data-closing-grid]{padding-top:clamp(52px,7vh,80px);padding-bottom:clamp(52px,7vh,80px)}
[data-compare-pad]{padding-top:clamp(48px,6.4vh,76px);padding-bottom:clamp(48px,6.4vh,76px)}
[data-bottle-pad]{padding-top:clamp(48px,6.4vh,76px);padding-bottom:clamp(48px,6.4vh,76px)}
[data-day-pad]{padding-top:clamp(48px,6.4vh,76px)}
[data-choose-pad]{padding-top:clamp(48px,6.4vh,76px)}
[data-404-grid]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-404-fig]{min-height:max(420px,calc(100svh - var(--byk-bar,63px)));height:max(420px,calc(100svh - var(--byk-bar,63px)));margin-top:-22px}
[data-404-copy]{padding:0 clamp(20px,5vw,80px) clamp(56px,8vh,110px)}
[data-three]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-ctableX]{display:block}
[data-cstackX]{display:none}
[data-rowheadX]{font-size:0.75rem}
[data-buy-full]{grid-template-columns:minmax(0,0.48fr) minmax(0,0.52fr);grid-template-rows:auto}
[data-buy-fig]{height:100%;min-height:max(320px,calc(100svh - var(--byk-bar,63px)))}
[data-buy-copy]{padding:clamp(34px,5.4svh,88px) clamp(20px,5vw,80px)}
[data-buy-copy] [data-price]{font-size:1.375rem}
[data-buy-note]{font-size:0.6875rem;letter-spacing:0.14em}
[data-buy-copy] h1{font-size:clamp(1.875rem,3.6vw,2.5rem);margin:clamp(18px,2.4vh,26px) 0 0}
[data-buy-copy] h1 + p{font-size:clamp(1.125rem,1.5vw,1.375rem);margin:clamp(18px,2.2vh,28px) 0 0}
[data-two-pad]{padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(44px,6vh,72px)}
[data-chero]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr);min-height:clamp(460px,60svh,780px)}
[data-chero-fig]{margin-top:var(--byk-bar,63px);min-height:calc(100% - var(--byk-bar,63px))}
[data-inbox]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-needs]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-mapwrap]{height:48svh}
[data-whero]{grid-template-columns:minmax(0,0.52fr) minmax(0,0.48fr);min-height:calc(100svh - var(--byk-bar,63px));margin-top:var(--byk-bar,63px)}
[data-whero-copy]{padding:clamp(24px,3.4vh,52px) clamp(20px,5vw,80px)}
[data-whero] [data-wfig]{height:calc(100svh - var(--byk-bar,63px))}
[data-wferm]{grid-template-columns:minmax(0,0.46fr) minmax(0,0.54fr)}
[data-wfermfig]{order:-1}
[data-wtime]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-wtline]{left:0;right:0;top:0;width:auto;height:1px}
[data-wtstep]{padding-top:clamp(22px,2.8vh,32px);padding-left:0}
[data-wtdot]{top:-4px}
[data-wstatband]{padding-top:clamp(40px,6vh,86px)}
[data-wstatrow]{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-wgrains-copy] p,[data-wferm] p{max-width:58ch}
[data-wgrains-copy] h2,[data-wferm] h2{max-width:20ch}
[data-wvs]{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,88px)}
[data-wprocess]{padding:clamp(26px,3.4vh,44px) 0}
[data-wprocess] > [data-wtfig]{height:294px}
[data-wsplit],[data-wsplit2]{grid-template-columns:minmax(0,0.46fr) minmax(0,0.54fr)}
[data-wgrains],[data-wsplit3]{grid-template-columns:minmax(0,0.54fr) minmax(0,0.46fr)}
[data-wsplit],[data-wgrains],[data-wsplit2],[data-wsplit3]{min-height:clamp(420px,54svh,700px)}
[data-wsplit] > [data-wfig],[data-wsplit2] > [data-wfig]{order:-1}
[data-sect-pad]:not([data-band-pad]):not([data-two-pad]){padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(44px,6vh,72px)}
[data-footer-cols]{grid-template-columns:repeat(4,1fr)}
[data-fcol="shop"]{order:0}
[data-fcol="company"]{order:0}
[data-fcol="kefir"]{order:0}
[data-fcol="legal"]{order:0}
[data-footer-cta]{order:0}
[data-footer-cred]{display:flex}
[data-footer-cta-note]{display:block}
[data-footer-legal]{justify-content:space-between}
[data-footer-legal-left]{text-align:left;width:auto;order:0}
[data-footer-legal-right]{text-align:right;width:auto;order:0}
}
@media (min-width:1024px){
[data-desktop-nav]{display:flex}
[data-esplit]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr);min-height:100svh}
[data-esplit][data-fig-left]{grid-template-columns:minmax(0,0.45fr) minmax(0,0.55fr)}
[data-esplit][data-fig-left] > [data-esplit-fig]{order:0}
[data-esplit][data-fig-left] > [data-esplit-copy]{order:1}
[data-esplit-fig]{min-height:0}
#meet-the-maker [data-esplit-fig]{aspect-ratio:auto}
/* the newly added editorial sections hold one screen each. min-height, not
height, so unexpectedly long copy grows the section instead of losing it */
[data-full]{min-height:100svh;display:grid;grid-template-rows:minmax(min-content,1fr)}
[data-full] > [data-esplit]{min-height:0}
[data-full] [data-esplit-copy]{padding-top:clamp(36px,5vh,76px);padding-bottom:clamp(36px,5vh,76px)}
[data-fullpad]{display:flex;flex-direction:column;justify-content:center}
/* the portrait video sets this section's height, so the centre column is kept
narrow to stop it running past a screen */
[data-tri]{grid-template-columns:minmax(0,1fr) minmax(0,0.62fr) minmax(0,1fr);
align-items:center;gap:clamp(28px,3.4vw,64px);
padding-top:clamp(40px,5.6vh,80px);padding-bottom:clamp(40px,5.6vh,80px)}
[data-story2-grid]{grid-template-columns:1fr 1fr;gap:clamp(34px,4.4vw,88px)}
[data-story2-grid] > article p{font-size:clamp(0.9375rem,1vw,1.0625rem);line-height:1.62}
[data-story2-grid] > article h3{font-size:clamp(1.375rem,2vw,1.875rem)}
/* six across needs a smaller measure or each column reads as a sliver */
[data-benefits-grid]{grid-template-columns:repeat(6,minmax(0,1fr))}
[data-benefits-grid] > article{padding-right:clamp(12px,1.3vw,20px)}
[data-benefits-grid] > article h3{font-size:clamp(0.9375rem,1.12vw,1.1875rem)}
[data-benefits-grid] > article p{font-size:clamp(0.8125rem,0.9vw,0.9375rem);line-height:1.58}
[data-media-wide]{display:none}
[data-media-tall]{display:block}
[data-story2-quote]{grid-template-columns:1fr 1fr;gap:clamp(34px,4.4vw,88px)}
/* the foundation row fills its screen so the images meet the next section
on a hairline, matching the dividers between the cards themselves */
[data-full] [data-day-pad]{justify-content:flex-start}
[data-full] [data-day-scroller]{flex:1;min-height:0}
[data-full] [data-day-card]{height:auto;align-self:stretch}
[data-full] [data-day-img]{flex:1;min-height:0}
[data-rev-item]{flex:0 0 calc((100% - 2 * clamp(24px,3.4vw,64px)) / 3)}
[data-rev-foot]{gap:clamp(16px,2vw,32px)}
[data-rev-links]{gap:clamp(16px,2.4vw,34px)}
[data-rev-links] a{font-size:0.875rem;min-height:44px}
[data-rev-btn]{min-width:44px;min-height:44px}
[data-rev-btn] svg{width:16px;height:11px}
[data-rev-btn="prev"]{margin-left:-10px}
[data-rev-btn="next"]{margin-right:-10px}
[data-header-inner]{grid-template-columns:1fr auto 1fr}
[data-hide-sm]{display:inline-flex}
[data-show-sm]{display:none}
[data-mega-grid]{grid-template-columns:minmax(0,1.24fr) minmax(0,1fr) minmax(0,0.86fr) minmax(0,0.86fr)}
[data-page-top]{padding-top:calc(var(--byk-bar,63px) + 34px)}
[data-hero-row]{grid-template-columns:1fr auto}
[data-cred-long]{display:inline}
[data-cred-short]{display:none}
[data-marquee-track] > :first-child > :nth-child(-n+9){display:block}
[data-marquee-track] > :first-child > :nth-child(n+10){display:none}
[data-band-grid]{min-height:100svh;grid-template-rows:none}
[data-band-grid][data-img-side="right"]{grid-template-columns:0.45fr 0.55fr}
[data-band-grid][data-img-side="left"]{grid-template-columns:0.55fr 0.45fr}
[data-band-grid][data-img-side="right"] [data-band-img]{order:2}
[data-band-grid][data-img-side="left"] [data-band-img]{order:0}
[data-band-txt]{padding-top:0px;padding-bottom:0px;gap:0px;overflow:hidden}
[data-band-long]{font-size:clamp(15px,1.05vw,16.5px);line-height:1.72}
[data-why-split]{grid-template-columns:minmax(0,0.4fr) minmax(0,0.6fr)}
[data-why-copy]{padding:clamp(40px,6svh,88px) clamp(20px,5vw,80px)}
[data-why-head]{padding:clamp(20px,3.2svh,80px) clamp(20px,5vw,80px) 0}
[data-why-listwrap]{padding:0 clamp(20px,5vw,80px) clamp(20px,3.2svh,80px);margin-top:clamp(28px,3.6vh,44px)}
[data-why-row]{column-gap:clamp(22px,2vw,34px)}
[data-why-row] h3{font-size:clamp(0.9375rem,min(1.5vw,2.5svh),1.5rem);line-height:1.12}
[data-why-h2]{font-size:clamp(2rem,min(5vw,7.4svh),4.5rem);margin-top:clamp(10px,1.9svh,22px);max-width:12ch}
[data-why-body]{margin-top:clamp(18px,2.4vh,30px)}
[data-bottle-fig]{grid-template-columns:minmax(0,1fr) clamp(280px,30vw,440px) minmax(0,1fr);column-gap:clamp(28px,3.4vw,64px)}
[data-bottle-figure]{min-height:clamp(400px,50vh,580px)}
[data-fact-cell] h3{font-size:clamp(1.3125rem,1.85vw,1.9375rem);max-width:14ch}
[data-fact-cell] p{font-size:0.875rem;max-width:26ch}
[data-fact-tick]{width:clamp(22px,2.4vw,44px)}
[data-fact-cell="left"] [data-fact-tick]{right:calc(-1*clamp(26px,3vw,58px))}
[data-fact-cell="right"] [data-fact-tick]{left:calc(-1*clamp(26px,3vw,58px))}
[data-bottle-head]{grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr)}
#bottle [data-lead]{align-self:end}
[data-what-grid]{grid-template-columns:minmax(0,0.56fr) minmax(0,0.44fr)}
[data-what-figure]{min-height:clamp(300px,44vw,900px)}
[data-compare-head]{grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr)}
#compare, #faq{min-height:100svh}
[data-day-head]{grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr)}
[data-day-scroller]{grid-template-columns:repeat(6,minmax(0,1fr))}
[data-day-card]{grid-column:auto}
[data-day-card]:not(:first-child){border-left:1px solid rgba(13,13,12,0.14);padding-left:2px}
[data-day-img]{min-height:clamp(210px,21vw,322px)}
[data-day-card] figcaption{padding-top:16px;padding-bottom:16px}
[data-day-card]:nth-child(1) figcaption{padding-left:14px}
[data-day-card]:nth-child(1) figcaption{padding-left:clamp(20px,5vw,80px)}
[data-day-card]:nth-child(6) figcaption{padding-right:14px}
[data-day-card]:nth-child(6) figcaption{padding-right:clamp(20px,5vw,80px)}
[data-day-card] figcaption > :first-child{font-size:1.375rem}
[data-day-card] figcaption > :nth-child(2){font-size:1.0625rem}
[data-choose-head]{grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr)}
[data-choose-scroller]{grid-template-columns:repeat(5,minmax(0,1fr))}
[data-choose-card]{grid-column:auto}
[data-choose-card]:nth-child(n+4){grid-column:auto}
[data-choose-card]:nth-child(4){border-left:1px solid rgba(13,13,12,0.14)}
[data-choose-card]:not(:first-child){border-left:1px solid rgba(13,13,12,0.14);padding-left:2px}
[data-choose-img]{min-height:clamp(210px,21vw,322px)}
[data-choose-card] figcaption{padding-top:16px;padding-bottom:16px}
[data-choose-card]:nth-child(1) figcaption,[data-choose-card]:nth-child(4) figcaption{padding-left:14px}
[data-choose-card]:nth-child(1) figcaption{padding-left:clamp(20px,5vw,80px)}
[data-choose-card]:nth-child(3) figcaption,[data-choose-card]:nth-child(5) figcaption{padding-right:14px}
[data-choose-card]:nth-child(5) figcaption{padding-right:clamp(20px,5vw,80px)}
[data-choose-card] figcaption > :first-child{font-size:1.375rem}
[data-choose-card] figcaption > :nth-child(2){font-size:1.0625rem}
[data-ferment-grid]{grid-template-columns:1fr 0.8fr}
[data-ferment-pad]{padding-top:clamp(92px,13.5vh,180px);padding-bottom:clamp(92px,13.5vh,180px)}
#ferment{min-height:100svh}
#mayo{min-height:100svh}
/* opt-in: only the homepage closing block is composed to fill a viewport.
On the story pages it is a short sign-off, and the lock left ~460px of
dead space above the footer. */
[data-screen-label="Closing"][data-closing-full]{min-height:100svh}
[data-grains-card]{left:clamp(24px,3vw,48px);bottom:clamp(24px,3vw,48px);max-width:min(78%,360px)}
[data-says]{grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);padding-top:clamp(60px,8.4vh,116px);padding-bottom:clamp(30px,4.2vh,58px)}
[data-delivery]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-delivery-copy]{padding-top:clamp(60px,8.4vh,116px);padding-bottom:clamp(30px,4.2vh,58px)}
[data-delivery-figure]{order:0;min-height:clamp(340px,46vw,720px)}
[data-family-grid]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-family-figure]{order:0;min-height:0}
[data-family-pad]{padding-top:clamp(56px,8vh,110px);padding-bottom:clamp(56px,8vh,110px)}
[data-faq-grid]{grid-template-columns:0.7fr 1.3fr}
[data-closing-grid]{grid-template-columns:1.15fr 0.85fr;padding-top:clamp(56px,9vw,140px);padding-bottom:clamp(56px,9vw,140px)}
[data-closing-aside]{padding-left:clamp(0px,2vw,32px);border-left-width:1px}
[data-compare-pad]{padding-top:clamp(48px,6.4vh,86px);padding-bottom:clamp(26px,3.4vh,46px)}
[data-bottle-pad]{padding-top:clamp(76px,11vh,150px);padding-bottom:clamp(40px,5.4vh,72px)}
[data-day-pad]{padding-top:clamp(60px,8.4vh,116px)}
[data-choose-pad]{padding-top:clamp(60px,8.4vh,116px)}
[data-story-grid]{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr)}
[data-story-aside]{padding-left:clamp(0px,2vw,30px);border-left-width:1px;justify-self:end}
[data-404-fig]{margin-top:-34px}
[data-shop-grid]{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-cell-oursX],[data-coursX]{margin-left:clamp(12px,1.6vw,26px);margin-right:clamp(12px,1.6vw,26px)}
[data-buy-copy] [data-price]{font-size:clamp(1.625rem,2.2vw,2.125rem)}
[data-buy-copy] h1{font-size:clamp(2.25rem,5vw,4.5rem)}
[data-taste]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-drink]{grid-template-columns:minmax(0,0.45fr) minmax(0,0.55fr)}
[data-ferm]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-taste],[data-drink],[data-ferm]{height:clamp(420px,52svh,720px);min-height:clamp(420px,52svh,720px)}
[data-taste-fig],[data-drink-fig],[data-ferm-fig]{height:auto;min-height:clamp(420px,52svh,720px)}
[data-drink-fig]{order:-1}
[data-taste-copy],[data-drink-copy],[data-ferm-copy]{padding:clamp(44px,6svh,84px) clamp(20px,5vw,80px)}
[data-band-sec]{height:clamp(420px,52svh,720px);min-height:clamp(420px,52svh,720px);overflow:hidden}
[data-spec]{grid-template-columns:minmax(0,0.275fr) minmax(0,0.45fr) minmax(0,0.275fr);height:clamp(420px,52svh,720px);min-height:clamp(420px,52svh,720px)}
[data-spec-l],[data-spec-r]{padding:clamp(44px,6svh,84px) clamp(20px,5vw,80px)}
[data-spec-sec]{border-bottom:none}
[data-spec-fig]{height:auto;min-height:clamp(420px,52svh,720px)}
[data-two]{grid-template-columns:minmax(0,0.48fr) minmax(0,0.52fr);gap:0px;padding-top:clamp(48px,7vh,110px);padding-bottom:clamp(48px,7vh,110px)}
[data-two] > :first-child{order:-1;padding:0 clamp(28px,3.4vw,60px) 0 clamp(20px,5vw,80px)}
[data-two] > :last-child{padding:0 clamp(20px,5vw,80px) 0 clamp(20px,5vw,80px)}
[data-two-pad]{padding:0px}
[data-pack4]{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-packnext]{grid-template-columns:minmax(0,0.45fr) minmax(0,0.55fr)}
[data-packknow]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-packnext-fig],[data-packknow-fig]{min-height:clamp(420px,52svh,720px);height:clamp(420px,52svh,720px)}
[data-packnext-fig]{order:-1}
[data-range4]{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-chero-copy]{padding-top:calc(var(--byk-bar,63px) + 40px);padding-bottom:40px}
[data-cgrid]{grid-template-columns:minmax(0,0.55fr) minmax(0,0.45fr)}
[data-cform-fig]{min-height:100%}
[data-mapheadgrid]{grid-template-columns:minmax(0,1fr) minmax(0,0.9fr)}
[data-bywrite]{grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr)}
[data-mapwrap]{height:clamp(460px,58svh,700px)}
[data-wbefore]{grid-template-columns:minmax(0,0.38fr) minmax(0,0.62fr)}
[data-wdet]{grid-template-columns:minmax(0,0.24fr) minmax(0,0.76fr)}
[data-sect-pad]:not([data-band-pad]):not([data-two-pad]){padding-top:clamp(48px,7vh,110px);padding-bottom:clamp(48px,7vh,110px)}
[data-footer-top]{grid-template-columns:1.1fr 0.9fr}
[data-footer-cols]{grid-template-columns:repeat(4,1fr) auto}
[data-footer-cta]{grid-column:auto;margin-top:0}
}
@media (min-width:1280px){
[data-creds]{padding:15px clamp(18px,4vw,72px)}
[data-marquee-track] > :first-child > :nth-child(-n+13){display:block}
[data-marquee-track] > :first-child > :nth-child(n+14){display:none}
}