/** Shopify CDN: Minification failed

Line 1242:0 Unexpected "}"
Line 1458:0 Unexpected "}"

**/
/* ==========================================================================
   HUMDRUM — Los Angeles
   Design System v4.1 "Estate"

   The look of Flamingo Estate, the language of Rose Los Angeles, and only
   Humdrum's own palette, photography and wordmark.

     · warm cream ground, never white
     · body copy in a deep warm brown, never black
     · tiny tracked-caps labels as connective tissue
     · a high-contrast editorial serif carrying every headline
     · photography full-bleed, captions under the pictures
     · no codes, tickers, ledgers or spec sheets

   Instrument Serif (display) · Hanken Grotesk (body and UI)
   ========================================================================== */

/* Fonts are loaded from layout/theme.liquid so they do not block the stylesheet. */

/* Tokens ----------------------------------------------------------------- */
:root {
  color-scheme: light;

  --paper:     #FAF5EA;
  --bone:      #F1EADA;
  --sand:      #E4DAC4;

  --clay:      #8C6A4E;   /* the hero photograph's backdrop */
  --clay-deep: #6B4E36;
  --cocoa:     #3B2716;

  --ink:       #472B18;   /* roasted cocoa: unmistakably brown, never black */
  --umber:     #6F5240;   /* body copy, a shade deeper so it holds against the ink */

  --sol:       #E85411;
  --sol-deep:  #BC3E06;

  --plum: #642034; --indigo: #48519F; --coral: #DE3E24;
  --brick: #93381F; --burnt: #B85218; --mango: #D77607;

  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--umber);
  --hairline:      rgba(39, 22, 8, 0.14);
  --hairline-soft: rgba(39, 22, 8, 0.07);
  --hairline-inv:  rgba(250, 245, 234, 0.24);

  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --fs-label: 0.6875rem;
  --tracking-label: 0.14em;

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;   --s24: 6rem;  --s32: 8rem;

  --r-sm: 3px; --r-md: 8px; --r-pill: 999px;

  --container: 1560px;
  --measure: 60ch;
  --gutter: clamp(1.125rem, 3.5vw, 3.25rem);
  --announce-h: 34px;
  --header-h: 66px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;
  --z-header: 60; --z-modal: 100;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--sol); color: var(--paper); }

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: var(--z-modal);
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s5); border-radius: var(--r-md);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s4); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Type -------------------------------------------------------------------- */
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display em { font-style: italic; }
.d-xl { font-size: clamp(3.25rem, 8.8vw, 8.75rem); line-height: .92; }
.d-lg { font-size: clamp(2.5rem, 5.8vw, 5.25rem); }
.d-md { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.02; }
.d-sm { font-size: clamp(1.625rem, 2.4vw, 2.25rem); line-height: 1.08; }
.serif { font-family: var(--font-display); font-weight: 400; }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.prose p { max-width: var(--measure); color: var(--muted); text-wrap: pretty; }
.prose p + p { margin-top: var(--s5); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--sol); }

/* Layout ------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1080px; }
.wrap--text { max-width: 760px; }
.section { padding-block: clamp(var(--s16), 8vw, var(--s32)); }
.section--tight { padding-block: clamp(var(--s12), 5vw, var(--s20)); }
.section--flush-top { padding-top: 0; }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

.head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s6);
  margin-bottom: clamp(var(--s8), 3.5vw, var(--s12));
}
.head__eyebrow { color: var(--muted); margin-bottom: var(--s4); display: block; }
.head__text { max-width: 48ch; }
.head__text .display { max-width: 20ch; }
.head__aside { max-width: 34ch; color: var(--muted); font-size: .9375rem; }

/* A statement: caps title over prose, the Rose Los Angeles page rhythm. */
.statement { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(var(--s6), 4vw, var(--s16)); align-items: start; }
.statement + .statement { margin-top: clamp(var(--s12), 5vw, var(--s20)); padding-top: clamp(var(--s12), 5vw, var(--s20)); border-top: 1px solid var(--hairline-soft); }
.statement__title { color: var(--ink); padding-top: .3rem; }
.statement__body > * + * { margin-top: var(--s5); }

/* Figures with captions, under the picture, as on a good almanac page. */
.figure { margin: 0; }
.figure img, .figure video, .figure svg { width: 100%; height: auto; border-radius: var(--r-md); }
.figure figcaption {
  margin-top: var(--s3);
  font-size: .8125rem; line-height: 1.5; color: var(--muted);
  max-width: 60ch;
}
.figure--photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s8);
  border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 140ms var(--ease);
}
.btn:active { transform: scale(.985); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--sol-deep); }
.btn--sol { background: var(--sol); color: var(--paper); }
.btn--sol:hover { background: var(--sol-deep); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--inv { border-color: var(--hairline-inv); color: var(--paper); }
.btn--inv:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--block { width: 100%; }

.tlink {
  display: inline-block;
  font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tlink:hover { background-size: 0% 1px; color: var(--sol); }
.tlink--plain { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: inherit; }

/* Announcement + header --------------------------------------------------- */
.announce { background: var(--cocoa); color: var(--paper); height: var(--announce-h); display: grid; place-items: center; overflow: hidden; }
.announce__inner { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label); white-space: nowrap; }
.announce__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sol); flex: none; }

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline-soft);
  transition: border-color var(--dur) var(--ease);
}
.header__bar { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); }
.header__nav { display: flex; align-items: center; gap: var(--s6); }
.header__nav--right { justify-content: flex-end; }
.navlink {
  font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding-block: var(--s3); position: relative; transition: color var(--dur) var(--ease);
}
.navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink[aria-current="page"] { color: var(--sol); }
.brand { display: block; justify-self: center; }
.brand img { height: 21px; width: auto; }
.header .header__burger { display: none; }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--paper);
  padding: var(--s6) var(--gutter) var(--s10);
  display: flex; flex-direction: column;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 240ms;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.drawer__nav { margin-top: var(--s10); display: flex; flex-direction: column; gap: var(--s2); }
.drawer__nav a {
  font-family: var(--font-display); font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1.2;
  border-bottom: 1px solid var(--hairline-soft); padding-block: var(--s3);
}
.drawer__foot { margin-top: auto; padding-top: var(--s8); }

.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background-color var(--dur) var(--ease); }
.icon-btn:hover { background: var(--bone); }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.basket-count {
  font-size: 10px; font-weight: 600; min-width: 17px; height: 17px; padding-inline: 4px;
  border-radius: var(--r-pill); background: var(--sol); color: var(--paper);
  display: grid; place-items: center; margin-left: -6px;
}

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative; background: var(--clay); color: var(--paper);
  min-height: min(90svh, 860px);
  display: grid; align-items: center; overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(59,39,22,.62) 0%, rgba(59,39,22,.38) 34%, rgba(59,39,22,.06) 56%, rgba(59,39,22,0) 72%);
}
.hero__inner { position: relative; padding-block: clamp(var(--s20), 12vh, var(--s32)); max-width: 42ch; }
.hero__eyebrow { color: rgba(250,245,234,.78); display: block; margin-bottom: var(--s5); }
.hero__title { margin-bottom: var(--s6); }
.hero__lede { color: rgba(250,245,234,.88); max-width: 36ch; font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.5; margin-bottom: var(--s8); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Three things ------------------------------------------------------------ */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--s8), 4vw, var(--s16)); }
.trio__item > * + * { margin-top: var(--s4); }
.trio__title { font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.trio__item p { color: var(--muted); text-wrap: pretty; max-width: 40ch; }

/* Product grid ------------------------------------------------------------ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(var(--s6), 2.2vw, var(--s10)) clamp(var(--s4), 1.6vw, var(--s6)); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative; display: block; aspect-ratio: 4 / 5;
  background: var(--bone); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s5);
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 420ms var(--ease), transform 700ms var(--ease); }
.card__media--swap img + img { opacity: 0; }
.card:hover .card__media--swap img:first-child { opacity: 0; }
.card:hover .card__media--swap img + img { opacity: 1; }
.card:hover .card__media img { transform: scale(1.035); }

.card__media--pair, .card__media--six { display: grid; gap: 2px; background: var(--sand); }
.card__media--pair { grid-template-columns: 1fr 1fr; }
.card__media--six { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.card__media--pair img, .card__media--six img { position: static; }
.card:hover .card__media--pair img, .card:hover .card__media--six img { transform: scale(1.02); }

.card__flags { position: absolute; top: var(--s3); left: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); z-index: 2; }
.flag { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; padding: 5px var(--s3); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); }
.flag--sol { background: var(--sol); color: var(--paper); }

.card__quick { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { opacity: 1; transform: none; position: static; margin-bottom: var(--s5); } }
.card__quick .btn { background: var(--paper); color: var(--ink); min-height: 44px; }
.card__quick .btn:hover { background: var(--ink); color: var(--paper); }

.card__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; margin-bottom: var(--s2); }
.card__desc { font-size: .9375rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; margin-bottom: var(--s3); }
.card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.card__price { font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Bands and splits -------------------------------------------------------- */
.band { position: relative; background: var(--cocoa); color: var(--paper); overflow: hidden; }
.band--clay { background: var(--clay-deep); }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; }
.band__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39,22,8,.5), rgba(39,22,8,.7)); }
.band__inner { position: relative; z-index: 1; padding-block: clamp(var(--s20), 13vw, var(--s32)); text-align: center; display: grid; justify-items: center; gap: var(--s6); }
.band__inner .lede { color: rgba(250,245,234,.84); max-width: 52ch; text-align: center; }
.band__eyebrow { color: rgba(250,245,234,.7); }

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(var(--s8), 5vw, var(--s20)); }
.split--flip .split__media { order: 2; }
.split__media { border-radius: var(--r-md); overflow: hidden; background: var(--bone); aspect-ratio: 4 / 5; }
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }
.split__media--square { aspect-ratio: 1; }
.split__body > * + * { margin-top: var(--s5); }
.split__body .label { color: var(--muted); }

/* The sonication drawing -------------------------------------------------- */
.sonic__svg { width: 100%; height: auto; color: var(--ink); }
.sonic__rings .ring { opacity: 0; animation: ringOut 3.6s var(--ease) infinite; }
.sonic__rings .r1 { animation-delay: 0s; } .sonic__rings .r2 { animation-delay: .5s; }
.sonic__rings .r3 { animation-delay: 1s; } .sonic__rings .r4 { animation-delay: 1.5s; }
.sonic__rings .r5 { animation-delay: 2s; }
@keyframes ringOut { 0% { opacity: 0; } 18% { opacity: .9; } 70% { opacity: .9; } 100% { opacity: 0; } }

/* Accordion --------------------------------------------------------------- */
.acc { border-top: 1px solid var(--hairline); }
.acc__item { border-bottom: 1px solid var(--hairline-soft); }
.acc__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  padding: var(--s5) 0; text-align: left; min-height: 56px;
  font-family: var(--font-display); font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.acc__trigger:hover { color: var(--sol); }
.acc__icon { flex: none; width: 15px; height: 15px; position: relative; }
.acc__icon::before, .acc__icon::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform var(--dur) var(--ease); }
.acc__icon::after { transform: rotate(90deg); }
.acc__trigger[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p, .acc__panel ul { color: var(--muted); padding-bottom: var(--s5); max-width: var(--measure); }
.acc__panel li + li { margin-top: var(--s2); }
.acc__panel a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.acc--pdp .acc__trigger { font-size: 1.125rem; }

/* Newsletter -------------------------------------------------------------- */
.signup { background: var(--bone); }
.signup__inner { display: grid; justify-items: center; text-align: center; gap: var(--s6); }
.form-row { display: flex; gap: var(--s2); width: min(100%, 480px); }
.field {
  flex: 1; min-height: 48px; padding: var(--s3) var(--s5);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-family: inherit; font-size: 1rem; color: var(--ink); transition: border-color var(--dur) var(--ease);
}
.field::placeholder { color: var(--umber); opacity: .8; }
.field:focus { border-color: var(--ink); outline: none; }
.field:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.form-note { font-size: .8125rem; color: var(--muted); }
.form-status { font-size: .875rem; min-height: 1.4em; }
.form-status[data-state="ok"] { color: var(--sol-deep); }

/* Footer ------------------------------------------------------------------ */
.footer { background: var(--cocoa); color: rgba(250,245,234,.78); padding-block: clamp(var(--s16), 7vw, var(--s24)) var(--s8); }
.footer a { transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--paper); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(var(--s8), 4vw, var(--s16)); padding-bottom: var(--s16); }
.footer__brand img { height: 26px; width: auto; margin-bottom: var(--s5); }
.footer__brand p { max-width: 30ch; font-size: .9375rem; }
.footer h3 { color: var(--paper); margin-bottom: var(--s5); }
.footer li + li { margin-top: var(--s3); }
.footer li a { font-size: .9375rem; }
.footer__bottom { border-top: 1px solid var(--hairline-inv); padding-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; font-size: .8125rem; }
.footer__legal { max-width: 66ch; color: rgba(250,245,234,.56); font-size: .75rem; line-height: 1.6; }

/* Product page ------------------------------------------------------------ */
.pdp { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(var(--s8), 4vw, var(--s16)); align-items: start; }
.pdp__gallery { display: grid; gap: var(--s3); position: sticky; top: calc(var(--header-h) + var(--s6)); }
.pdp__stage { aspect-ratio: 1 / 1; background: var(--bone); border-radius: var(--r-md); overflow: hidden; position: relative; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__stage.card__media--pair, .pdp__stage.card__media--six { display: grid; gap: 3px; }
.pdp__stage.card__media--pair img { object-position: center 60%; }
.pdp__thumbs { display: flex; gap: var(--s3); flex-wrap: wrap; }
.pdp__thumb { width: 76px; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--bone); border: 1px solid transparent; opacity: .62; transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.pdp__thumb:hover { opacity: 1; }
.pdp__body > * + * { margin-top: var(--s5); }
.pdp__title { margin-bottom: var(--s3); }
.pdp__price { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pdp__price s { color: var(--muted); text-decoration-thickness: 1px; }
.pdp .acc { margin-top: var(--s10); }

.sub { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--s6); border: 1px solid var(--hairline); border-radius: var(--r-md); max-width: 560px; }
.sub__d { color: var(--muted); font-size: .875rem; margin-top: var(--s2); max-width: 40ch; }

.inside { display: grid; gap: var(--s2); }
.inside li a { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.inside li a:hover { border-color: var(--ink); background: var(--bone); }
.inside img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--bone); }
.inside strong { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; }

.note { padding: var(--s5) var(--s6); background: var(--bone); border-radius: var(--r-md); font-size: .875rem; color: var(--muted); border-left: 2px solid var(--sol); }

/* Quiz -------------------------------------------------------------------- */
.quiz { min-height: calc(100svh - var(--header-h) - var(--announce-h)); display: grid; align-items: center; }
.quiz__progress { display: flex; gap: var(--s2); margin-bottom: var(--s10); }
.quiz__tick { height: 2px; flex: 1; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.quiz__tick span { display: block; height: 100%; width: 0; background: var(--sol); transition: width 420ms var(--ease); }
.quiz__tick[data-done="true"] span { width: 100%; }
.quiz__step { display: none; }
.quiz__step[data-active="true"] { display: block; animation: stepIn 420ms var(--ease) both; }
.quiz__step h1[tabindex]:focus, .quiz__step h1[tabindex]:focus-visible { outline: none; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quiz__q { margin-bottom: var(--s10); }
.quiz__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); }
.quiz-option {
  text-align: left; padding: var(--s6); min-height: 108px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper);
  display: grid; gap: var(--s2); align-content: start;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 140ms var(--ease);
}
.quiz-option:hover { border-color: var(--ink); background: var(--bone); }
.quiz-option:active { transform: scale(.99); }
.quiz-option[aria-pressed="true"] { border-color: var(--sol); background: var(--bone); }
.quiz-option strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.quiz-option span { font-size: .875rem; color: var(--muted); line-height: 1.5; }
.quiz__nav { margin-top: var(--s10); display: flex; align-items: center; gap: var(--s5); }
.quiz-result { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(var(--s8), 4vw, var(--s16)); align-items: center; }
.quiz-result__media { border-radius: var(--r-md); overflow: hidden; background: var(--bone); aspect-ratio: 4/5; }
.quiz-result__media img { width: 100%; height: 100%; object-fit: cover; }
.quiz-result__body > * + * { margin-top: var(--s5); }

/* Growers list ------------------------------------------------------------ */
.growers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4) var(--s8); border-top: 1px solid var(--hairline); padding-top: var(--s6); }
.growers li { padding-block: var(--s3); border-bottom: 1px solid var(--hairline-soft); }
.growers strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.growers span { font-size: .875rem; color: var(--muted); }

/* Reveal, toast ----------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal[data-seen="true"] { opacity: 1; transform: none; transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: var(--delay, 0ms); }
.toast {
  position: fixed; left: 50%; bottom: var(--s6); transform: translate(-50%, 16px); z-index: var(--z-modal);
  background: var(--ink); color: var(--paper); padding: var(--s4) var(--s6); border-radius: var(--r-pill);
  font-size: .875rem; opacity: 0; visibility: hidden; max-width: calc(100vw - var(--s8)); text-align: center;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.toast[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
}
@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .header__nav { display: none; }
  .header .header__burger { display: grid; }
  .split, .quiz-result, .trio { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media { aspect-ratio: 3 / 2; }
  .statement { grid-template-columns: 1fr; gap: var(--s4); }

  .hero { min-height: 0; display: block; }
  .hero__media { position: relative; z-index: auto; aspect-ratio: 3 / 3.4; }
  .hero__media img { object-position: 62% center; }
  .hero::before { display: none; }
  .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(59,39,22,0) 55%, rgba(59,39,22,.35) 100%); }
  .hero__inner { padding-block: var(--s10) var(--s16); max-width: none; }
}
@media (max-width: 640px) {
  .grid, .grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--s8) var(--s3); }
  .card__desc { display: none; }
  .card__name { font-size: 1.25rem; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s10); }
  .form-row { flex-direction: column; }
  .form-row .btn { width: 100%; }
  .quiz__options { grid-template-columns: 1fr; }
  .sub { grid-template-columns: 1fr; }
  .sub .btn { width: 100%; }
  .announce__more { display: none; }
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .sonic__rings .ring { animation: none; opacity: .85; }
}
/* A split whose media is a drawing rather than a photograph. */
.split__media--free { aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; }

/* Split hero: type on a colour-matched panel, the square photograph whole. */
.hero--split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 0;
  background: linear-gradient(180deg, #734221 0%, #6E4323 72%, #653E20 86%, #B07A40 100%);
}
.hero--split::before { display: none; }
.hero--split .hero__panel {
  display: grid; align-items: center;
  padding: clamp(var(--s12), 6vw, var(--s24)) var(--gutter);
  padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.hero--split .hero__inner { padding-block: 0; max-width: 40ch; }
.hero--split .hero__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 1 / 1; }
.hero--split .hero__media img { object-position: center; }
@media (max-width: 900px) {
  .hero--split { grid-template-columns: 1fr; }
  .hero--split .hero__media { order: 0; aspect-ratio: 1 / 1; }
  .hero--split .hero__media::after { display: none; }
  .hero--split .hero__panel { order: 1; padding: var(--s10) var(--gutter) var(--s16); }
}
/* A band over a photograph that should stay visible. */
.band--photo .band__media::after { background: linear-gradient(180deg, rgba(39,22,8,.32), rgba(39,22,8,.55)); }
.band--photo .band__media img { object-position: 70% center; }

/* Brand pillars: five drawings, five short claims, before the shop. */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s8) clamp(var(--s5), 2.5vw, var(--s10)); }
.pillar svg { width: 76px; height: 76px; color: var(--ink); margin-bottom: var(--s5); }
.pillar__t { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; margin-bottom: var(--s2); text-wrap: balance; }
.pillar p { font-size: .9375rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; max-width: 28ch; }
@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .pillars { grid-template-columns: 1fr; gap: var(--s6); }
  .pillar { display: grid; grid-template-columns: 64px 1fr; gap: var(--s5); align-items: start; }
  .pillar svg { width: 64px; height: 64px; margin: 0; }
}
.split__media--wide { aspect-ratio: 4 / 3; }
.split__media--wide img { object-position: 70% center; }
.band--jars .band__media img { object-position: center 88%; }

/* Shop menu: the six, in order, with Bundle & save at the foot. */
.menu { position: relative; height: var(--header-h); display: flex; align-items: center; }
.menu__panel {
  position: absolute; left: calc(-1 * var(--s5)); top: 100%; z-index: 5;
  min-width: 272px;
  background: var(--paper);
  border: 1px solid var(--hairline-soft); border-top: 0;
  box-shadow: 0 18px 40px rgba(39, 22, 8, .10);
  padding: var(--s3) var(--s5) var(--s4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.menu:hover .menu__panel, .menu:focus-within .menu__panel { opacity: 1; visibility: visible; transform: none; }
.menu__list li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--hairline-soft);
  transition: color var(--dur) var(--ease);
}
.menu__list li a:hover { color: var(--sol); }
.menu__list span { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.menu__list small { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.menu__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s3); padding-top: var(--s3);
  font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label);
  transition: color var(--dur) var(--ease);
}
.menu__foot:hover { color: var(--sol); }
.drawer__sub { padding: var(--s2) 0 var(--s3) var(--s5); display: grid; gap: var(--s1); }
.drawer__sub a { font-family: var(--font-sans); font-size: 1rem; padding-block: var(--s2); border: 0; }

/* About page sub-navigation, sticky under the header. */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--hairline-soft); }
.subnav__list { display: flex; gap: var(--s6); overflow-x: auto; -webkit-overflow-scrolling: touch; height: 52px; align-items: center; }
.subnav__list li { flex: none; }
.subnav .navlink[aria-current="location"] { color: var(--sol); }
.subnav .navlink[aria-current="location"]::after { transform: scaleX(1); }
.statement { scroll-margin-top: calc(var(--header-h) + 52px + var(--s6)); }
#faq { scroll-margin-top: calc(var(--header-h) + 52px); }
.statement__body > .figure, .statement__body > .figure + * { margin-top: var(--s8); }
/* Photographs run the full width of the page between text blocks, as on a
   well-set mission page; only the drawing stays narrower. */
.statement > .figure { grid-column: 1 / -1; margin-top: clamp(var(--s8), 4vw, var(--s12)); }
.statement > .figure--photo img { aspect-ratio: 3 / 2; }
.statement > .figure--diagram { max-width: 760px; }
.statement > .figure + .figure { margin-top: clamp(var(--s6), 3vw, var(--s10)); }
.menu__panel--plain { min-width: 200px; }
.menu__panel--plain .menu__list span { font-size: 1.125rem; }

/* Rotating announcement ---------------------------------------------------- */
.announce[data-rotate] { position: relative; display: block; height: var(--announce-h); }
.announce__item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-inline: var(--gutter);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label);
  white-space: nowrap; text-align: center;
  opacity: 0; transition: opacity 600ms var(--ease);
}
.announce__item[data-active="true"] { opacity: 1; }
a.announce__item:hover { color: #F5A45C; }
@media (max-width: 640px) {
  :root { --announce-h: 44px; }
  .announce__item { white-space: normal; font-size: 10px; line-height: 1.3; letter-spacing: .1em; }
}

/* Stacked hero: the statement centred on the page, the photograph full-bleed
   beneath it. No panel, no seam; the picture is shown as it was taken. */
.hero--stack { display: block; background: var(--paper); color: var(--ink); min-height: 0; }
.hero--stack::before { display: none; }
.hero--stack .hero__panel { text-align: center; padding: clamp(var(--s12), 8vw, var(--s20)) var(--gutter) clamp(var(--s10), 5vw, var(--s16)); }
.hero--stack .hero__inner { margin-inline: auto; max-width: 52ch; padding: 0; }
.hero--stack .hero__eyebrow { color: var(--muted); }
.hero--stack .hero__title { margin-inline: auto; }
.hero--stack .hero__lede { color: var(--muted); margin-inline: auto; }
.hero--stack .hero__actions { justify-content: center; }
.hero--stack .hero__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 2 / 1; }
.hero--stack .hero__media img { object-position: center 58%; }
.hero--stack .hero__media::after { display: none; }
@media (max-width: 900px) {
  .hero--stack .hero__media { aspect-ratio: 1 / 1; }
  .hero--stack .hero__panel { padding: var(--s12) var(--gutter) var(--s10); }
}

/* Bundle pairs: two full photographs, a divider you can drag ---------- */
.pair { position: relative; --x: 50%; margin-bottom: var(--s5); }
.pair > .card__media { margin-bottom: 0; }
/* Two columns whose widths follow the divider; each pouch stays centred in
   its own column, so the resting state is the clean split. */
.card__media--pair { display: grid; grid-template-columns: var(--x) 1fr; gap: 2px; background: var(--sand); }
.card__media--pair img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; min-width: 0; }
.card:hover .card__media--pair img { transform: none; }
.pair__handle {
  position: absolute; top: 0; bottom: 0; left: var(--x);
  width: 44px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; touch-action: none; z-index: 3; border-radius: 4px;
}
.pair__handle::before { content: ''; width: 2px; height: 100%; background: var(--paper); opacity: .9; }
.pair__handle::after {
  content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23271608' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 6px 18px rgba(39,22,8,.28);
  transition: transform 160ms var(--ease);
}
.pair__handle:hover::after, .pair[data-dragging="true"] .pair__handle::after { transform: scale(1.08); }
.pair__handle:focus-visible { outline: 2px solid var(--sol); outline-offset: -2px; }
.pair > .card__media + .pair__handle { bottom: 68px; }          /* leaves the add-to-basket bar clickable */
.pdp__stage.pair { display: block; }
.pdp__stage.pair img { object-position: center; }

/* This month's fruit: six jars, six captions. */
.fruitgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); margin-top: var(--s5); }
.fruitgrid__item { margin: 0; }
.fruitgrid__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--bone); }
.fruitgrid__item figcaption { margin-top: var(--s3); }
.fruitgrid__item strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.2; }
.fruitgrid__item span { font-size: .8125rem; color: var(--muted); }
@media (max-width: 640px) { .fruitgrid { grid-template-columns: repeat(2, 1fr); } }
.statement > .fruitgrid { grid-column: 1 / -1; margin-top: clamp(var(--s6), 3vw, var(--s10)); }
.statement > .fruitgrid + .figure { margin-top: clamp(var(--s10), 5vw, var(--s16)); }

/* The cavitation cycle, animated. Resting state is a complete still: bubble
   mid-size, wall cracked, compounds out; the animations play over it. */
.cav { width: 100%; height: auto; color: var(--ink); }
.cav-wave { animation: cavWave 1.1s linear infinite; }
@keyframes cavWave { to { stroke-dashoffset: -24; } }
.cav-bubble { transform-box: fill-box; transform-origin: center; transform: translate(290px, 190px) scale(.7); animation: cavBubble 7s var(--ease) infinite; }
@keyframes cavBubble {
  0%, 8%   { transform: translate(290px, 190px) scale(.06); }
  40%      { transform: translate(290px, 190px) scale(.92); }
  47%      { transform: translate(290px, 190px) scale(1); }
  51%      { transform: translate(290px, 190px) scale(.12); }
  54%,100% { transform: translate(290px, 190px) scale(.06); }
}
.cav-rays { opacity: 0; animation: cavRays 7s var(--ease) infinite; }
@keyframes cavRays { 0%, 49% { opacity: 0; } 52% { opacity: 1; } 60%, 100% { opacity: 0; } }
.cav-jet { opacity: 0; stroke-dasharray: 170; stroke-dashoffset: 170; animation: cavJet 7s var(--ease) infinite; }
@keyframes cavJet { 0%, 50% { opacity: 0; stroke-dashoffset: 170; } 53% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 68%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.cav-crack { stroke-dashoffset: 0; animation: cavCrack 7s var(--ease) infinite; }
@keyframes cavCrack { 0%, 56% { stroke-dashoffset: 270; } 72%, 97% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 270; } }
.cav-dots circle { transform: translateX(-150px); animation: cavDots 7s var(--ease) infinite; }
.cav-dots circle:nth-child(2) { animation-delay: .25s; } .cav-dots circle:nth-child(3) { animation-delay: .5s; }
.cav-dots circle:nth-child(4) { animation-delay: .15s; } .cav-dots circle:nth-child(5) { animation-delay: .4s; } .cav-dots circle:nth-child(6) { animation-delay: .65s; }
@keyframes cavDots { 0%, 70% { transform: translateX(0); opacity: .55; } 92% { transform: translateX(-150px); opacity: 1; } 100% { transform: translateX(-190px); opacity: 0; } }
.cav-labels text.l1, .cav-labels text.l2, .cav-labels text.l3, .cav-labels text.l4, .cav-labels text.l5 { opacity: .35; animation: 7s var(--ease) infinite; }
.cav-labels .l1 { animation-name: cavL1; } .cav-labels .l2 { animation-name: cavL2; } .cav-labels .l3 { animation-name: cavL3; } .cav-labels .l4 { animation-name: cavL4; } .cav-labels .l5 { animation-name: cavL5; }
@keyframes cavL1 { 0%, 4% { opacity: .35; } 8%, 30% { opacity: 1; } 36%, 100% { opacity: .35; } }
@keyframes cavL2 { 0%, 12% { opacity: .35; } 18%, 44% { opacity: 1; } 50%, 100% { opacity: .35; } }
@keyframes cavL3 { 0%, 46% { opacity: .35; } 50%, 60% { opacity: 1; } 66%, 100% { opacity: .35; } }
@keyframes cavL4 { 0%, 56% { opacity: .35; } 62%, 74% { opacity: 1; } 80%, 100% { opacity: .35; } }
@keyframes cavL5 { 0%, 70% { opacity: .35; } 76%, 94% { opacity: 1; } 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .cav-wave, .cav-bubble, .cav-rays, .cav-jet, .cav-crack, .cav-dots circle, .cav-labels text { animation: none !important; }
  .cav-labels text.l1, .cav-labels text.l2, .cav-labels text.l3, .cav-labels text.l4, .cav-labels text.l5 { opacity: 1; }
}
.figure--jars img { object-position: center 88%; }
.subnav__list { justify-content: center; }

/* One cell under sound: the microscope view. Loops every 6s; still when
   motion is reduced (bubbles mid, cracks drawn, compounds out). */
.lens { width: 100%; height: auto; color: var(--ink); }
.lens-rings .ring { transform-box: fill-box; transform-origin: center; transform: scale(2.4); opacity: .35; animation: lensRing 3.6s linear infinite; }
.lens-rings .r2 { animation-delay: 1.2s; } .lens-rings .r3 { animation-delay: 2.4s; }
@keyframes lensRing { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(5.2); opacity: 0; } }
.lens-bubble { transform-box: fill-box; transform-origin: center; transform: scale(.7); animation: lensBubble 6s var(--ease) infinite; }
.lens-rays { opacity: 0; animation: lensRays 6s var(--ease) infinite; }
.lens-crack { stroke-dashoffset: 0; animation: lensCrack 6s var(--ease) infinite; }
.lens-out { transform: translateY(-80px); opacity: .9; animation: lensOut 6s var(--ease) infinite; }
.lens .s1 { animation-delay: .55s; } .lens .s2 { animation-delay: 1.1s; } .lens .s3 { animation-delay: 1.65s; } .lens .s4 { animation-delay: 2.2s; }
@keyframes lensBubble { 0%, 6% { transform: scale(.08); } 24% { transform: scale(.95); } 30% { transform: scale(1); } 33% { transform: scale(.12); } 36%, 100% { transform: scale(.08); } }
@keyframes lensRays { 0%, 31% { opacity: 0; } 34% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes lensCrack { 0%, 33% { stroke-dashoffset: 40; } 42%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 40; } }
@keyframes lensOut { 0%, 40% { transform: translateY(0); opacity: 0; } 46% { opacity: .9; } 72% { transform: translateY(-80px); opacity: .9; } 84%, 100% { transform: translateY(-110px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lens-rings .ring, .lens-bubble, .lens-rays, .lens-crack, .lens-out { animation: none !important; }
}
.statement > .figure--diagram { max-width: 900px; }
.announce__item { pointer-events: none; visibility: hidden; }
.announce__item[data-active="true"] { pointer-events: auto; visibility: visible; }
.figure--video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--bone); }

/* Footnotes ----------------------------------------------------------------- */
.fn { color: var(--sol); font-weight: 600; text-decoration: none; padding-left: 1px; vertical-align: super; font-size: .75em; line-height: 0; }
.fn:hover { color: var(--sol-deep); }
.footnote { font-size: .8125rem; line-height: 1.6; color: var(--muted); max-width: 72ch; text-wrap: pretty; scroll-margin-top: calc(var(--header-h) + var(--s8)); }
.footnote__mark { color: var(--sol); font-weight: 600; margin-right: .25em; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.head--center { justify-content: center; text-align: center; }
.head--center .head__text, .head--center .head__text .display { margin-inline: auto; max-width: 24ch; }
#chaga { scroll-margin-top: var(--s8); }
.head--center .head__text, .head--center .head__text .display { max-width: 36ch; }
.head--center .head__text { max-width: 60rem; }
.head--center .head__text .display { max-width: none; }
.acc__item { scroll-margin-top: calc(var(--header-h) + var(--s8)); }

/* The name, as a dictionary entry, then the turn. */
.lexicon { display: grid; justify-items: center; }
.lexicon__word { letter-spacing: -.01em; }
.lexicon__dot { color: var(--sol); margin-inline: .04em; }
.lexicon__meta { color: var(--muted); margin-top: var(--s3); }
.lexicon__def { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.3; color: var(--muted); margin-top: var(--s3); max-width: 40ch; text-wrap: balance; }
.lexicon__turn { margin-top: var(--s8); }
.lexicon__sub { color: var(--muted); margin-top: var(--s2); }
.lexicon__def s { text-decoration: line-through; text-decoration-color: var(--sol); text-decoration-thickness: 2px; text-underline-offset: 0; }
.lexicon__turn { margin-top: var(--s6); line-height: .95; }
.lexicon__sub { margin-top: var(--s4); }

/* Pillars as a scroll piece: the name pins, the five arrive one by one. */
.ps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s10), 6vw, var(--s24)); align-items: start; }
.ps__pin { position: sticky; top: calc(var(--header-h) + var(--s12)); }
.lexicon--left { justify-items: start; text-align: left; }
.lexicon--left .lexicon__def { max-width: 30ch; }
.ps__counter { margin-top: var(--s10); color: var(--muted); font-variant-numeric: tabular-nums; }
.ps__counter [data-ps-current] { color: var(--sol); }
.ps__list { border-top: 1px solid var(--hairline-soft); }
.ps__item {
  min-height: 62vh; display: grid; align-content: center; gap: var(--s3);
  padding-block: var(--s12); border-bottom: 1px solid var(--hairline-soft);
  opacity: .22; transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.ps__item[data-seen="true"] { opacity: 1; transform: none; }
.ps__item svg { width: 104px; height: 104px; color: var(--ink); margin-bottom: var(--s4); }
.ps__item svg path, .ps__item svg rect { stroke-dasharray: 520; stroke-dashoffset: 520; }
.ps__item[data-seen="true"] svg path, .ps__item[data-seen="true"] svg rect { animation: psDraw 1.6s var(--ease) forwards; }
.ps__item svg g[fill="currentColor"] circle { opacity: 0; transition: opacity 400ms var(--ease) 1.1s; }
.ps__item[data-seen="true"] svg g[fill="currentColor"] circle { opacity: 1; }
@keyframes psDraw { to { stroke-dashoffset: 0; } }
.ps__n { color: var(--sol); }
.ps__item h3 { max-width: 14ch; }
.ps__item p { color: var(--muted); max-width: 40ch; font-size: 1.0625rem; text-wrap: pretty; }
@media (max-width: 900px) {
  .ps { grid-template-columns: 1fr; }
  .ps__pin { position: static; }
  .ps__counter { display: none; }
  .ps__item { min-height: 0; padding-block: var(--s8); }
}
@media (prefers-reduced-motion: reduce) {
  .ps__item { opacity: 1; transform: none; }
  .ps__item svg path, .ps__item svg rect { stroke-dashoffset: 0; animation: none; }
  .ps__item svg g[fill="currentColor"] circle { opacity: 1; }
}

/* Pillars as a scroll stage: the section is several screens tall, the stage
   pins, and each pillar pops in as its share of the scroll arrives. */
.ps-scrub { position: relative; height: calc(100vh + var(--steps, 5) * 85vh); }
.ps-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--paper); }
.ps-stage__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--s10), 6vw, var(--s24)); align-items: center; }
.ps-lex .lexicon__def s { text-decoration: none; position: relative; }
.ps-lex .lexicon__def s::after { content: ''; position: absolute; left: -.05em; right: -.05em; top: 54%; height: 2px; background: var(--sol); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease) 200ms; }
.ps-lex .lexicon__turn { opacity: 0; transform: translateY(18px) scale(.92); transition: opacity 600ms var(--ease) 700ms, transform 800ms cubic-bezier(.34,1.56,.64,1) 700ms; }
.ps-lex .lexicon__sub { opacity: 0; transition: opacity 600ms var(--ease) 1100ms; }
.ps-stage[data-live="true"] .lexicon__def s::after { transform: scaleX(1) rotate(-1.2deg); }
.ps-stage[data-live="true"] .lexicon__turn { opacity: 1; transform: none; }
.ps-stage[data-live="true"] .lexicon__sub { opacity: 1; }
.ps-hint { margin-top: var(--s10); color: var(--muted); transition: opacity 400ms var(--ease); }
.ps-hint__arrow { display: inline-block; animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.ps-stage[data-progress-started="true"] .ps-hint { opacity: 0; }

.ps-view { position: relative; height: min(72vh, 720px); }
.ps-layer {
  position: absolute; inset: 0 0 var(--s12) 0;
  display: grid; align-content: center; justify-items: start; gap: var(--s3);
  opacity: 0; transform: translateY(48px) scale(.8); pointer-events: none;
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.ps-layer[data-active="true"] {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 500ms var(--ease), transform 900ms cubic-bezier(.34,1.56,.64,1);
}
.ps-layer svg { width: clamp(180px, 24vw, 340px); height: auto; color: var(--ink); margin-bottom: var(--s5); will-change: transform; }
.ps-layer svg path, .ps-layer svg rect { stroke-dasharray: 520; stroke-dashoffset: 520; }
.ps-layer[data-active="true"] svg path, .ps-layer[data-active="true"] svg rect { animation: psDraw 1.5s var(--ease) forwards; }
.ps-layer svg g[fill="currentColor"] circle { opacity: 0; transition: opacity 400ms var(--ease) 1s; }
.ps-layer[data-active="true"] svg g[fill="currentColor"] circle { opacity: 1; }
@keyframes psDraw { to { stroke-dashoffset: 0; } }
.ps-layer__n { color: var(--sol); font-variant-numeric: tabular-nums; }
.ps-layer h3 { max-width: 14ch; }
.ps-layer p { color: var(--muted); max-width: 40ch; font-size: 1.0625rem; text-wrap: pretty; }
.ps-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); }
.ps-rail__fill { display: block; height: 100%; width: 0; background: var(--sol); transition: width 120ms linear; }

@media (max-width: 900px) {
  .ps-stage__grid { grid-template-columns: 1fr; gap: var(--s6); align-content: center; }
  .ps-lex .lexicon__word { font-size: 1.75rem; }
  .ps-lex .lexicon__turn { font-size: clamp(2rem, 9vw, 2.75rem); }
  .ps-lex .lexicon__sub { font-size: 1.125rem; }
  .ps-lex .lexicon__def { font-size: 1rem; }
  .ps-hint { display: none; }
  .ps-view { height: 46svh; }
  .ps-layer svg { width: 96px; margin-bottom: var(--s3); }
  .ps-layer h3 { font-size: 1.5rem; }
  .ps-layer p { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-layer { transition: none; }
  .ps-layer svg path, .ps-layer svg rect { stroke-dashoffset: 0; animation: none; }
  .ps-layer svg g[fill="currentColor"] circle { opacity: 1; }
  .ps-lex .lexicon__turn, .ps-lex .lexicon__sub { opacity: 1; transform: none; }
  .ps-lex .lexicon__def s::after { transform: scaleX(1); }
}
.ps-layer svg { width: clamp(220px, 30vw, 420px); }
.ps-layer svg path, .ps-layer svg rect, .ps-layer svg circle { stroke-dasharray: 700; stroke-dashoffset: 700; }
.ps-layer[data-active="true"] svg path, .ps-layer[data-active="true"] svg rect, .ps-layer[data-active="true"] svg circle { animation: psDraw 1.8s var(--ease) forwards; }
.ps-layer svg g[fill="currentColor"] circle { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
@media (max-width: 900px) { .ps-layer svg { width: 140px; } }
/* Scroll-driven stage: JS sets opacity, transform and stroke-dashoffset; CSS only frames it. */
.ps-scrub { height: calc(100vh + var(--steps, 5) * var(--step-len, 85vh)); }
.ps-layer, .ps-layer[data-active="true"] { transition: opacity 120ms linear; transform-origin: left center; }
.ps-layer svg path, .ps-layer svg rect, .ps-layer svg circle { animation: none !important; }
.ps-layer[data-active="true"] svg path, .ps-layer[data-active="true"] svg rect, .ps-layer[data-active="true"] svg circle { animation: none !important; }
.ps-layer svg { transition: none; }
.ps-layer svg g[fill="currentColor"] circle { opacity: 1; transition: none; }
.ps-stage__grid { grid-template-columns: 1.05fr 0.95fr; }
.ps-lex .lexicon { transform-origin: left center; will-change: transform; }
.ps-lex .lexicon__turn { line-height: .92; }
.ps-lex .lexicon__sub { margin-top: var(--s4); }

/* The scratch through the definition: a hand-drawn double stroke, on by default,
   animated in when the stage takes over. */
.ps-lex .lexicon__def s::after {
  top: 30%; height: .55em; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none' fill='none' stroke='%23E85411' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2 11 C 40 6, 80 15, 120 10 S 200 5, 238 11'/%3E%3Cpath d='M4 8 C 60 12, 110 3, 160 9 S 220 14, 236 7' opacity='.7'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
  transform: scaleX(1) rotate(-1.2deg); transform-origin: left center;
  transition: transform 700ms var(--ease) 100ms;
}
.ps-stage[data-live="false"] .lexicon__def s::after { transform: scaleX(0) rotate(-1.2deg); }
.ps-lex .lexicon__def { color: var(--muted); }
.ps-lex .lexicon__def s { color: var(--muted); }

/* The six as a scroll stage ------------------------------------------------ */
.cs-stage { background: var(--paper); }
.cs-head { text-align: center; display: grid; justify-items: center; gap: var(--s2); padding-top: var(--s6); }
.cs-view { height: min(76vh, 760px); margin-top: var(--s6); }
.ps-layer--chew { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(var(--s8), 5vw, var(--s20)); align-items: center; justify-items: stretch; transform-origin: center; }
.cs__media { position: relative; aspect-ratio: 4 / 5; max-height: 62vh; width: auto; margin-inline: auto; border-radius: var(--r-md); overflow: hidden; background: var(--bone); will-change: transform; }
.cs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs__jar { opacity: 0; }
.cs__body { display: grid; gap: var(--s4); justify-items: start; }
.cs__n { color: var(--sol); font-variant-numeric: tabular-nums; }
.cs__fruit { color: var(--muted); }
.cs__actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s2); }
.cs__body h3 { max-width: 12ch; }
@media (max-width: 900px) {
  .cs-view { height: 82svh; }
  .ps-layer--chew { grid-template-columns: 1fr; gap: var(--s4); align-content: center; }
  .cs__media { max-height: 38svh; }
  .cs__body h3 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .cs__body .lede { font-size: 1rem; }
  .cs__actions .tlink { display: none; }
}
.cs__media { width: min(100%, calc(62vh * 0.8)); max-height: none; margin-inline: 0; justify-self: center; }
@media (max-width: 900px) { .cs__media { width: min(100%, calc(38svh * 0.8)); } }

/* Scratch every line of the definition, however it wraps: the stroke is the
   text's own background, cloned per line fragment. */
.ps-lex .lexicon__def s::after { display: none; }
.ps-lex .lexicon__def s {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .06em; margin-inline: -.06em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none' fill='none' stroke='%23E85411' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2 11 C 40 6, 80 15, 120 10 S 200 5, 238 11'/%3E%3Cpath d='M4 8 C 60 12, 110 3, 160 9 S 220 14, 236 7' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 48%;
  background-size: 100% .55em;
  transition: background-size 800ms var(--ease) 100ms;
}
.ps-stage[data-live="false"] .lexicon__def s { background-size: 0% .55em; }
.ps-lex .lexicon__sub { margin-top: clamp(var(--s8), 3vw, var(--s12)); }
.ps-lex .lexicon__turn { margin-top: var(--s8); }

/* The six as full-screen spreads ----------------------------------------- */
.cs-spreads { background: var(--paper); }
.cs-head--intro { text-align: center; display: grid; justify-items: center; gap: var(--s3); padding-block: clamp(var(--s16), 10vh, var(--s32)) var(--s6); }
.cs-head--intro .display { max-width: 22ch; }
.spread { min-height: 100svh; display: grid; align-items: center; border-top: 1px solid var(--hairline-soft); }
.spread__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--s8), 6vw, var(--s24)); align-items: center; padding-block: var(--s16); }
.spread--flip .spread__media { order: 2; }
.spread__media { position: relative; aspect-ratio: 4 / 5; width: min(100%, calc(74vh * 0.8)); justify-self: center; border-radius: var(--r-md); overflow: hidden; background: var(--bone); will-change: transform; }
.spread__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spread__body { display: grid; gap: var(--s4); justify-items: start; }
.spread__body h3 { max-width: 10ch; }
.spread__body .lede { max-width: 34ch; }
@media (max-width: 900px) {
  .spread { min-height: 0; }
  .spread__grid { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s12); }
  .spread--flip .spread__media { order: 0; }
  .spread__media { width: min(100%, calc(52svh * 0.8)); }
  .spread__body h3 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .cs__actions .tlink { display: none; }
}
/* One chew per row, natural height, big. */
.spread { min-height: 0; }
.spread__grid { padding-block: clamp(var(--s12), 7vh, var(--s24)); grid-template-columns: 1fr 1fr; }
.spread__media { width: min(100%, calc(62vh * 0.8)); }
.spread__body h3 { font-size: clamp(2.75rem, 6vw, 5.5rem); }
.cs-head--intro { padding-block: clamp(var(--s16), 10vh, var(--s24)) var(--s4); }

/* Two across, bigger: the standard card at gallery scale. */
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: clamp(var(--s10), 4vw, var(--s16)) clamp(var(--s6), 3vw, var(--s12)); }
.grid--big .card__name { font-size: clamp(1.75rem, 2.4vw, 2.5rem); margin-bottom: var(--s3); }
.grid--big .card__desc { font-size: 1.0625rem; max-width: 46ch; }
.grid--big .card__media { margin-bottom: var(--s6); }
.grid--big .card__price { font-size: 1.125rem; }
@media (max-width: 640px) { .grid--2 { grid-template-columns: 1fr; } .grid--big .card__desc { display: block; } }
.ps-mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* Anchor targets sit under the sticky header unless they reserve its height. */
#the-six,
#bundles,
#subscribe,
#stay { scroll-margin-top: var(--header-h); }

/* The stage's final step: the six, arriving one by one. */
.ps-layer--six { display: grid; align-content: center; gap: var(--s6); justify-items: stretch; }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.mini { display: grid; gap: var(--s2); opacity: 0; transform-origin: center; will-change: transform, opacity; }
.mini__tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--bone); }
.mini__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms var(--ease); }
.mini__tile img + img { opacity: 0; }
.mini:hover .mini__tile img + img { opacity: 1; }
.mini__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; color: var(--ink); }
.mini__meta { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.minis__foot { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.lexicon__sub--six { display: none; }
.ps-stage[data-final="true"] .lexicon__sub--pillars { display: none; }
.ps-stage[data-final="true"] .lexicon__sub--six { display: block; }
@media (max-width: 900px) {
  .minis { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .mini__name { font-size: .9375rem; }
  .mini__meta { display: none; }
  .minis__foot .tlink { display: none; }
}

/* Final step takes the whole stage: the pinned column slides away, the six fill it. */
.ps-stage__grid { transition: grid-template-columns 600ms var(--ease), gap 600ms var(--ease); }
.ps-lex { min-width: 0; overflow: hidden; transition: opacity 350ms var(--ease); }
.ps-stage[data-final="true"] .ps-stage__grid { grid-template-columns: 0fr 1fr; gap: 0; }
.ps-stage[data-final="true"] .ps-lex { opacity: 0; pointer-events: none; }
.ps-stage[data-final="true"] .ps-view { height: min(84vh, 840px); }
.ps-layer--six { inset: 0 0 var(--s8) 0; gap: var(--s5); align-content: center; }
.minis__head { display: grid; gap: var(--s2); }
.minis__head h3 { max-width: none; }
.minis { grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s5); }
.mini__tile { aspect-ratio: 3 / 2; }
.mini__tile img { object-position: center 48%; }
.mini__name { font-size: 1.5rem; }
@media (max-width: 900px) {
  .ps-stage[data-final="true"] .ps-stage__grid { grid-template-columns: 1fr; }
  .ps-stage[data-final="true"] .ps-view { height: 82svh; }
  .minis { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .mini__tile { aspect-ratio: 4 / 5; }
  .mini__name { font-size: 1rem; }
  .minis__head h3 { font-size: 1.5rem; }
}
/* Fit the final frame on one screen. */
.ps-stage[data-final="true"] .ps-view { height: min(80vh, 780px); }
.ps-layer--six { gap: var(--s4); inset: 0; }
.minis { gap: var(--s4) var(--s5); }
.mini { gap: var(--s1); }
.mini__tile { aspect-ratio: 2 / 1; }
.mini__tile img { object-position: center 52%; }
.mini__name { font-size: 1.25rem; }
.minis__head { gap: var(--s1); }
.minis__head h3 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
@media (max-width: 900px) { .mini__tile { aspect-ratio: 4 / 5; } .mini__tile img { object-position: center; } }

/* Pillars, at rest: the bigger drawings in a row; each one inks itself again
   and lifts when hovered. The scratch through the definition is always on. */
.lexicon .lexicon__def s {
  text-decoration: none; color: var(--muted);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .06em; margin-inline: -.06em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none' fill='none' stroke='%23E85411' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2 11 C 40 6, 80 15, 120 10 S 200 5, 238 11'/%3E%3Cpath d='M4 8 C 60 12, 110 3, 160 9 S 220 14, 236 7' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 48%; background-size: 100% .55em;
}
.head--center .lexicon { justify-items: center; }
.head--center .lexicon .lexicon__def { text-align: center; max-width: 34ch; }
.lexicon__turn { margin-top: var(--s6); }
.lexicon__sub { margin-top: var(--s4); }
.pillars--drawn { margin-top: clamp(var(--s12), 5vw, var(--s20)); }
.pillars--drawn .pillar { display: block; transition: transform 320ms var(--ease); }
.pillars--drawn .pillar svg { width: 136px; height: 136px; margin-bottom: var(--s5); color: var(--ink); transition: transform 420ms cubic-bezier(.34,1.56,.64,1); }
.pillars--drawn .pillar svg path, .pillars--drawn .pillar svg rect, .pillars--drawn .pillar svg circle { stroke-dasharray: 700; stroke-dashoffset: 0; animation: none; }
.pillars--drawn .pillar svg g[fill="currentColor"] circle { stroke-dasharray: none; }
.pillars--drawn .pillar:hover svg { transform: translateY(-8px) scale(1.06) rotate(-1.5deg); }
.pillars--drawn .pillar:hover svg path, .pillars--drawn .pillar:hover svg rect, .pillars--drawn .pillar:hover svg circle:not([fill]) { animation: pillarInk 1.3s var(--ease) both; }
@keyframes pillarInk { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.pillars--drawn .pillar__t { font-size: 1.5rem; }
@media (max-width: 1080px) { .pillars--drawn { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .pillars--drawn { grid-template-columns: 1fr; }
  .pillars--drawn .pillar { display: grid; grid-template-columns: 88px 1fr; gap: var(--s5); align-items: start; }
  .pillars--drawn .pillar svg { width: 88px; height: 88px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .pillars--drawn .pillar:hover svg, .pillars--drawn .pillar:hover svg path { transform: none; animation: none; } }
/* Big cards: the dissolve is scroll-driven, so hover no longer swaps the image. */
.grid--big .card__media--swap img { transition: none; }
.grid--big .card:hover .card__media--swap img:first-child { opacity: inherit; }
.grid--big .card:hover .card__media--swap img + img { opacity: inherit; }
.grid--big .card:hover .card__media img { transform: none; }
.grid--big .card__media { will-change: transform; }

/* The six, as a conversation ---------------------------------------------- */
.cs-flow { position: relative; height: calc(100vh + var(--steps, 6) * var(--step-len, 90vh)); }
.cs-head--row { display: flex; align-items: baseline; gap: var(--s5); padding-top: var(--s5); flex-wrap: wrap; }
.cs-head--row .display { margin: 0; }
.cs-view { height: min(74vh, 740px); margin-top: var(--s5); }
.ps-layer--chew { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(var(--s8), 5vw, var(--s20)); align-items: center; justify-items: stretch; transform: none; }
.ps-layer--chew .cs__media, .ps-layer--chew .cs__body { will-change: transform, opacity; }
.cs__media { width: min(100%, calc(62vh * 0.8)); justify-self: center; }
@media (max-width: 900px) {
  .cs-view { height: 80svh; }
  .cs-head--row { flex-direction: column; gap: var(--s1); }
  .ps-layer--chew { grid-template-columns: 1fr; gap: var(--s4); align-content: center; }
  .cs__media { width: min(100%, calc(38svh * 0.8)); }
}

/* Free-scrolling spreads: one chew per screen, photo left, no pin. */
.spread { min-height: 100svh; display: grid; align-items: center; border-top: 0; }
.spread + .spread { border-top: 1px solid var(--hairline-soft); }
.spread__grid { grid-template-columns: 0.85fr 1.15fr; padding-block: clamp(var(--s12), 6vh, var(--s20)); }
.spread--flip .spread__media { order: 0; }
.spread__media { width: min(100%, calc(66vh * 0.8)); will-change: transform; }
.spread__body { will-change: transform, opacity; }
.cs-head--intro { padding-block: clamp(var(--s16), 10vh, var(--s24)) var(--s8); }
@media (max-width: 900px) {
  .spread { min-height: 92svh; }
  .spread__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .spread__media { width: min(100%, calc(44svh * 0.8)); }
}
/* Title card before the six. */
.cs-title { min-height: 72svh; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--s5); padding-block: var(--s16); }
.cs-title .display { max-width: 14ch; }
@media (max-width: 900px) { .cs-title { min-height: 56svh; } }
/* Shorter frames: one chew per scroll, the next always arriving. */
.spread { min-height: 70svh; }
.spread__grid { padding-block: clamp(var(--s10), 5vh, var(--s16)); }
.spread__media { width: min(100%, calc(54vh * 0.8)); }
.cs-title { min-height: 46svh; padding-block: var(--s12); }
@media (max-width: 900px) { .spread { min-height: 0; } .cs-title { min-height: 40svh; } }
.cs-title { gap: var(--s3); }
.cs-title__word { font-size: clamp(4rem, 12vw, 12rem); line-height: .9; max-width: none; }
.cs-title__sub { color: var(--muted); max-width: 20ch; }
/* Title card: sit higher, a touch smaller, sub-line on one line. */
.cs-title { align-content: start; padding-block: clamp(var(--s10), 6vh, var(--s16)) var(--s8); min-height: 42svh; gap: var(--s4); }
.cs-title__word { font-size: clamp(3.5rem, 10vw, 10rem); }
.cs-title__sub { max-width: none; }
.cs-title .cs-title__sub { max-width: none; white-space: nowrap; }
@media (max-width: 640px) { .cs-title .cs-title__sub { white-space: normal; } }
/* Title card: the word steps back, the sentence steps forward. */
.cs-title__word { font-size: clamp(2.5rem, 6.5vw, 6.5rem); color: var(--muted); }
.cs-title .cs-title__sub { font-size: clamp(2.25rem, 5.4vw, 5.25rem); line-height: 1; color: var(--ink); white-space: normal; max-width: 18ch; }
.cs-title { gap: var(--s5); }
/* The proof sits directly beneath the pillars. */
#pillars { padding-bottom: var(--s8); }
.cs-title { min-height: 0; padding-top: var(--s4); padding-bottom: clamp(var(--s10), 6vh, var(--s16)); }

/* Title card: the sentence runs the width; "The proof." stands in the margin. */
.cs-title { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--s6), 3vw, var(--s12)); align-items: end; justify-items: start; text-align: left; }
.cs-title__word {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(1.75rem, 3.2vw, 3.25rem); line-height: 1; color: var(--muted);
  padding-inline-end: .15em; margin: 0;
}
.cs-title .cs-title__sub { font-size: clamp(3rem, 8.8vw, 8.75rem); line-height: .92; letter-spacing: -.015em; max-width: none; color: var(--ink); text-wrap: balance; }
@media (max-width: 640px) {
  .cs-title { grid-template-columns: 1fr; align-items: start; gap: var(--s3); }
  .cs-title__word { writing-mode: horizontal-tb; transform: none; font-size: 1.5rem; }
  .cs-title .cs-title__sub { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

/* Closing bookend after the six: a poster line, no photograph. */
.cs-ask { background: var(--bone); }
.cs-title--ask { min-height: 0; padding-block: clamp(var(--s16), 12vh, var(--s32)); align-items: end; }
.cs-ask__body { display: grid; justify-items: start; gap: var(--s6); }
.cs-ask__body .lede { max-width: 40ch; }
.cs-ask .cs-title__sub { max-width: 12ch; }

/* The chapter-mark + poster line, as a system across the home page. */
.cs-title__body { display: grid; justify-items: start; gap: var(--s5); }
.cs-title--section { min-height: 0; padding-block: 0; margin-bottom: clamp(var(--s10), 5vw, var(--s16)); align-items: end; }
.cs-title--section .cs-title__sub { font-size: clamp(2.5rem, 6.6vw, 6.5rem); max-width: 16ch; }
.cs-title--section .cs-title__word { font-size: clamp(1.5rem, 2.6vw, 2.5rem); }
.cs-title--section .lede { max-width: 48ch; }
.signup .cs-title--section { margin-bottom: 0; }
@media (max-width: 640px) {
  .cs-title--section .cs-title__sub { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* The companion: a mouse in the margin, whole gummy at the top of the six,
   a bite taken by the bottom. */
.cs-title:has(.cs-critter) { grid-template-columns: auto 1fr auto; }
.cs-critter { width: clamp(120px, 15vw, 210px); height: auto; color: var(--ink); justify-self: end; align-self: end; animation: critterBob 3.6s var(--ease) infinite; --ground: var(--paper); }
.cs-critter .bite { fill: var(--ground); }
.cs-ask .cs-critter { --ground: var(--bone); }
@keyframes critterBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 900px) { .cs-critter { width: 96px; } }
@media (max-width: 640px) { .cs-title:has(.cs-critter) { grid-template-columns: 1fr; } .cs-critter { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .cs-critter { animation: none; } }

/* ── chapters alternate sides; the mouse tells a story ───────────────────── */
.cs-title--r { grid-template-columns: 1fr auto; justify-items: end; text-align: right; }
.cs-title--r .cs-title__word { order: 3; transform: none; padding-inline: .15em 0; }
.cs-title--r .cs-title__body, .cs-title--r .cs-ask__body, .cs-title--r > .cs-title__sub { order: 2; justify-items: end; }
.cs-title--r .lede { text-align: right; }
.cs-title--r:has(.cs-critter) { grid-template-columns: auto 1fr auto; }
.cs-title--r .cs-critter { order: 1; justify-self: start; }
.cs-ask .cs-critter, #bundles .cs-critter, .signup .cs-critter { --ground: var(--bone); }
.cs-title--section .cs-critter { width: clamp(110px, 12vw, 170px); }
@media (max-width: 640px) {
  .cs-title--r { text-align: left; justify-items: start; }
  .cs-title--r .cs-title__word { order: 0; }
  .cs-title--r .cs-title__body, .cs-title--r .cs-ask__body { justify-items: start; }
  .cs-title--r .lede { text-align: left; }
  .cs-title--r .cs-critter { order: 4; }
}

#pillars { padding-top: clamp(var(--s8), 3.5vw, var(--s12)); }
#pillars { padding-bottom: clamp(var(--s12), 5vw, var(--s20)); }

/* ── photo break after "Or ask." ─────────────────────────────────────────── */
.photo-break { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 16px); padding: clamp(8px, 1vw, 16px); background: var(--bone); }
.photo-break__item { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; }
.photo-break__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .photo-break { grid-template-columns: 1fr; } .photo-break__item { aspect-ratio: 4 / 3; } }

/* ── the farm: a wider photo in the split ── */
.split__media--wide { aspect-ratio: 4 / 3; }


/* signup: centered again, the sleeping mouse signs off */
.signup .signup__inner { display: grid; }
.signup__inner .cs-critter { width: 110px; margin-top: var(--s4); }

/* ── section chapters at the same scale as The proof / Or ask ───────────── */
.cs-title--section .cs-title__sub { font-size: clamp(2.75rem, 8.4vw, 8.5rem); max-width: 13ch; line-height: .92; }
.cs-title--section .cs-title__word { font-size: clamp(1.75rem, 3.2vw, 3.25rem); }
.cs-ask .cs-title__sub { max-width: 13ch; }
@media (max-width: 640px) { .cs-title--section .cs-title__sub { font-size: clamp(2.25rem, 10.5vw, 3.25rem); } }
.signup__inner .cs-critter { justify-self: center; }

/* ── pairs, one per scroll like the six ─────────────────────────────────── */
.spread--pair .spread__grid { grid-template-columns: 1.05fr .95fr; }
.spread--pair .spread__media { aspect-ratio: 3 / 2; width: min(100%, calc(50vh * 1.5)); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--paper); }
.spread--pair .spread__media--six { grid-template-columns: repeat(3, 1fr); }
.pw__cell { position: relative; overflow: hidden; }
.spread--pair .spread__body h3 { max-width: 12ch; font-size: clamp(2.5rem, 5vw, 4.75rem); }
.spread--pair .flag { justify-self: start; }
.spread--pair .pdp__price s { margin-inline-start: .35em; font-size: .8em; }
@media (max-width: 900px) { .spread--pair .spread__grid { grid-template-columns: 1fr; } .spread--pair .spread__media { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pw__cell .cs__jar { display: none; } }

/* the name: closer in weight — headline a touch smaller, the line under it much bigger */
.head--center .lexicon__turn { font-size: clamp(3rem, 7.2vw, 6.75rem); }
.head--center .lexicon__sub { font-size: clamp(2rem, 5.1vw, 4.75rem); line-height: 1.02; margin-top: var(--s3); color: var(--umber); }


/* ── bundle cards on the shop page: the six-card style, two pouches in the tile, jars on hover ── */
.card__media--pw { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--paper); aspect-ratio: 3 / 2; }
.card__media--pw6 { grid-template-columns: repeat(3, 1fr); }
.card__media--pw .pw__cell { position: relative; overflow: hidden; }
.card__media--pw .pw__cell img + img { opacity: 0; }
.card:hover .card__media--pw .pw__cell img:first-child { opacity: 0; }
.card:hover .card__media--pw .pw__cell img + img { opacity: 1; }

/* ── chapter sentences run across the page, not boxed to one side ───────── */
.cs-title--section .cs-title__sub, .cs-ask .cs-title__sub { max-width: none; }
/* short chapter sentences get more size */
.cs-title .cs-title__sub--short { font-size: clamp(3.25rem, 10.8vw, 11rem); }
@media (max-width: 640px) { .cs-title .cs-title__sub--short { font-size: clamp(2.75rem, 13vw, 4rem); } }
.photo-break img[src*="hero-three-jars"] { object-position: 50% 45%; }

/* ── photo bands: two photos side by side, a strip of cream between ── */
.photo-break { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.5vw, 24px); align-items: stretch; padding: clamp(12px, 1.5vw, 24px); background: var(--bone); overflow: visible; }
.photo-break__item { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; rotate: 0deg; translate: 0 0; width: auto; justify-self: stretch; }
.photo-break__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-break__item:first-child, .photo-break__item:last-child { width: auto; margin: 0; position: static; }
@media (max-width: 640px) { .photo-break { grid-template-columns: 1fr; } .photo-break__item { aspect-ratio: 4 / 3; } }
}

/* ── the band: three across, wider than the mouse was ── */
.cs-title .cs-critter.cs-band { width: clamp(250px, 30vw, 430px); }
.cs-title--section .cs-critter.cs-band { width: clamp(240px, 27vw, 400px); }
.signup__inner .cs-band { width: min(100%, 400px); }
@media (max-width: 900px) { .cs-title .cs-critter.cs-band, .cs-title--section .cs-critter.cs-band { width: 220px; } }

/* "Not sure which chew / is yours?" — the long line first */
.cs-title .cs-title__sub--ask { text-wrap: initial; font-size: clamp(2.75rem, 8.4vw, 8.5rem); }
.cs-title__sub--ask .nowrap { white-space: nowrap; }
.cs-ask .cs-critter.cs-band { width: clamp(220px, 24vw, 340px); }
@media (max-width: 640px) { .cs-title__sub--ask .nowrap { white-space: normal; } .cs-title__sub--ask br { display: none; } }

/* ── the name, on one line: word · pronunciation · adjective · struck definition ── */
.lexicon__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: var(--s5); row-gap: var(--s2); margin: 0; }
.lexicon--line .lexicon__word { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; }
.lexicon--line .lexicon__meta { margin: 0; }
.head--center .lexicon--line .lexicon__def { margin: 0; max-width: none; text-align: left; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.lexicon--line .lexicon__turn { margin-top: var(--s5); }

/* the answer to the definition: italic, underlined by hand in the same orange as the strike */
.lexicon__answer { font-style: italic; padding-bottom: .08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none' fill='none' stroke='%23E85411' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 8 C 50 3, 90 12, 130 7 S 205 4, 237 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .14em; }

/* a breath between the answer and the line under it */
.lexicon--line .lexicon__sub { margin-top: clamp(var(--s16), 7vw, var(--s32)); color: var(--ink); }

/* ── spreads alternate: photo left, then right, then left… (six and pairs) ── */
.spread:nth-of-type(even) .spread__media { order: 2; }
.spread:nth-of-type(even) .spread__grid { grid-template-columns: 1.15fr .85fr; }
.spread--pair:nth-of-type(even) .spread__grid { grid-template-columns: .95fr 1.05fr; }
@media (max-width: 900px) { .spread:nth-of-type(even) .spread__media { order: 0; } .spread:nth-of-type(even) .spread__grid, .spread--pair:nth-of-type(even) .spread__grid { grid-template-columns: 1fr; } }

/* ── the name, at the end: one line, then the answer ── */
.pillars__title { max-width: 14ch; margin-inline: auto; text-align: center; }
.name-break { padding-block: clamp(var(--s16), 9vw, var(--s32)); border-top: 1px solid var(--hairline-soft); }
.lexicon--end { display: grid; justify-items: center; text-align: center; }
.lexicon--end .lexicon__turn { margin-top: var(--s5); }
.reveal[data-seen="true"] .lexicon--end s { animation: scratchIn 640ms var(--ease) 360ms both; }
@keyframes scratchIn { from { background-size: 0% .55em; } to { background-size: 100% .55em; } }
@media (prefers-reduced-motion: reduce) { .reveal[data-seen="true"] .lexicon--end s { animation: none; } }
/* copy sits beside the photo on every row: after it when the photo is left, before it when the photo is right */
.spread__grid { align-items: center; }
.spread__body { justify-self: start; width: min(100%, 36rem); max-width: none; }
.spread:nth-of-type(even) .spread__body { justify-self: end; }
@media (max-width: 900px) { .spread:nth-of-type(even) .spread__body { justify-self: start; } }
.lexicon--end .lexicon__def { text-align: center; max-width: 34ch; }
.lexicon--end .lexicon__turn { margin-top: var(--s8); }

/* ── more air between the hero, the pillars, and the six ── */
#pillars { padding-top: clamp(var(--s12), 6.5vw, var(--s24)); padding-bottom: clamp(var(--s16), 7.5vw, var(--s32)); }
.cs-spreads .cs-title { padding-top: clamp(var(--s8), 4vw, var(--s16)); }
.name-break { border-bottom: 1px solid var(--hairline-soft); }

/* ── a smaller sign-off ── */
.signup.section { padding-block: clamp(var(--s10), 5vw, var(--s16)); }
.signup__inner { gap: var(--s4); }
.signup__inner h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.signup__inner .lede { max-width: 36ch; }
.signup__inner .cs-band { width: min(100%, 250px); margin-top: var(--s2); }

/* ── Or ask: the question and button left, the gummy close-up right ── */
.cs-title--ask { padding-bottom: clamp(var(--s8), 4vw, var(--s12)); }
.cs-ask { padding-bottom: clamp(var(--s12), 6vw, var(--s24)); }
.split--ask { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s8), 5vw, var(--s20)); align-items: center; }
.split--ask .split__body { display: grid; justify-items: start; gap: var(--s6); max-width: 40ch; }
.split__media--ask { aspect-ratio: 5 / 4; justify-self: end; width: min(100%, 640px); }
@media (max-width: 900px) { .split--ask { grid-template-columns: 1fr; } .split__media--ask { justify-self: stretch; width: 100%; } }
.signup.section { padding-block: clamp(var(--s8), 3.5vw, var(--s12)); }
.signup__inner { gap: var(--s3); }
.signup__inner h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); }
.signup__inner .lede { font-size: 1rem; }
.signup__inner .cs-band { width: min(100%, 200px); margin-top: 0; }

/* ── sonication drawing: bigger, and alive ── */
#sound .split { grid-template-columns: 1.35fr 1fr; }
#sound .split__media--free { width: 100%; }
.sonic__svg { width: 100%; height: auto; overflow: visible; }
.sonic__horn { transform-box: fill-box; transform-origin: 50% 0; animation: hornBuzz .14s linear infinite; }
@keyframes hornBuzz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.4px); } }
.sonic__shroom { transform-box: fill-box; transform-origin: 50% 60%; animation: shroomSway 4.4s ease-in-out infinite; }
.sonic__shroom--2 { animation-delay: -2.2s; }
@keyframes shroomSway { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
.sonic__bubble { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bubbleUp 3.4s ease-in infinite; }
.sonic__bubble.b2 { animation-delay: .6s; } .sonic__bubble.b3 { animation-delay: 1.3s; } .sonic__bubble.b4 { animation-delay: 1.9s; } .sonic__bubble.b5 { animation-delay: 2.5s; } .sonic__bubble.b6 { animation-delay: 3s; }
@keyframes bubbleUp { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: .9; } 78% { opacity: .9; } 100% { transform: translateY(-170px) scale(1.5); opacity: 0; } }
.sonic__pop { transform-box: fill-box; transform-origin: center; animation: popPulse 1.8s ease-out infinite; }
@keyframes popPulse { 0% { transform: scale(.45); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.sonic__out { transform-box: fill-box; transform-origin: center; animation: driftOut 3s ease-out infinite; }
.sonic__out.o2 { animation-delay: .7s; } .sonic__out.o3 { animation-delay: 1.4s; } .sonic__out.o4 { animation-delay: 2.1s; }
@keyframes driftOut { 0% { transform: translate(-30px, -16px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(16px, 8px); opacity: 0; } }
@media (max-width: 900px) { #sound .split { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sonic__horn, .sonic__shroom, .sonic__bubble, .sonic__pop, .sonic__out { animation: none !important; opacity: 1; } }

/* ── the name and the sign-up share one section ── */
.signup.section { padding-block: clamp(var(--s12), 6vw, var(--s24)) clamp(var(--s10), 4vw, var(--s16)); }
.signup__inner .lexicon--end { margin-bottom: clamp(var(--s10), 5vw, var(--s16)); }
.signup__inner .lexicon--end .lexicon__word { color: var(--ink); }

/* ── sonication drawing: taller, with a little color ── */
#sound .split { grid-template-columns: 1.7fr 1fr; align-items: center; }
.sonic__water { fill: var(--sand); opacity: .55; }
.sonic__rings { stroke: var(--sol); }
.sonic__pop { stroke: var(--sol); }
.sonic__out { fill: var(--sol); }
.sonic__shroom { fill: var(--paper); }
.sonic__bubble { stroke: var(--umber); }
/* Or ask: the gummy pulled in toward the middle */
.split--ask { grid-template-columns: 1fr 1.15fr; }
.split__media--ask { justify-self: center; width: min(100%, 600px); }
/* sonication: bigger still, and closer under the headline */
#sound .cs-title--section { margin-bottom: clamp(var(--s4), 2vw, var(--s8)); }
#sound .split { grid-template-columns: 2.1fr 1fr; gap: clamp(var(--s6), 3vw, var(--s12)); }
#sound .split__media--free { width: 106%; margin-left: -3%; }
#sound .split__media--free figcaption { margin-left: 3%; }
@media (max-width: 900px) { #sound .split__media--free { width: 100%; margin-left: 0; } }
/* sonication: a touch narrower so the copy breathes */
#sound .split { grid-template-columns: 1.55fr 1fr; gap: clamp(var(--s8), 4vw, var(--s16)); }
#sound .split__media--free { width: 100%; margin-left: 0; }
#sound .split__body .prose { max-width: 44ch; }
/* less air between The method and The fruit */
#sound.section { padding-bottom: clamp(var(--s6), 2.5vw, var(--s10)); }
#fruit.section { padding-top: clamp(var(--s10), 4vw, var(--s16)); }
/* the definition as one line across the page */
.lexicon--end .lexicon__line { width: 100%; justify-content: center; column-gap: clamp(var(--s5), 2.5vw, var(--s10)); }
.lexicon--end.lexicon--line .lexicon__word { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.lexicon--end.lexicon--line .lexicon__def { font-size: clamp(1.25rem, 1.8vw, 1.75rem); max-width: none; }
.lexicon--end.lexicon--line .lexicon__turn { margin-top: var(--s6); }
#sound .split { grid-template-columns: 1.25fr 1fr; }
#sound .split__body .prose { max-width: 52ch; }

/* The sideways chapter mark is bottom-aligned with the rest of the header
   (align-items: end), so its top sat wherever that block happened to end —
   157px into the method, 231px into the farm, whose headline runs to three
   lines. Anchor the mark itself to the top so every section opens its name
   at the same height; the headline and drawing keep their own alignment. */
.cs-title__word { align-self: start; }

/* ── Section grounds — the single source of truth ──────────────────────
   Two tones alternating down the page. Each chapter head ("The proof." and
   "Pairs.") shares its first card's ground and is separated from it by a
   hairline instead of a tone change, so the head and the card it introduces
   read as one block while every other boundary is a change of tone.

   Counting a head and its first card as one step, the run is:
     pillars L · proof+1 D · 2 L · 3 D · quiz L · 4 D · 5 L · 6 D ·
     method L · fruit D · pairs+1 L · 2 D · 3 L · 4 D · farm L · signup D

   Three earlier generations of these rules were re-sequenced as the page order
   changed and had drifted into adjacent same-tone pairs; this block replaces
   all of them. Keep it as the only place they are set. */
#pillars              { background: var(--paper); }   /* L */
#the-six.cs-spreads   { background: var(--bone);  }   /* D — head + chew 1 */
.cs-ask               { background: var(--paper); }   /* L — the question */
#the-six-b.cs-spreads { background: var(--bone);  }   /* D */
#sound                { background: var(--paper); }   /* L */
#fruit                { background: var(--bone);  }   /* D */
#bundles              { background: var(--paper); }   /* L — head + pair 1 */
#farm                 { background: var(--paper); }   /* L */
.signup               { background: var(--bone);  }   /* D */

/* …and the alternation carries on between the individual products. The first
   card of each run matches its head; the hairline below marks the join.
   nth-of-type restarts in the second half of the six, which lands correctly:
   4 and 6 darker, 5 lighter. */
.cs-spreads .spread:nth-of-type(odd)      { background: var(--bone);  }
.cs-spreads .spread:nth-of-type(even)     { background: var(--paper); }

/* The join between a chapter head and the first card it introduces. Same
   hairline weight as the rules under the last card of each run. */
.cs-spreads .cs-title + .spread,
#bundles .wrap + .spread--pair { border-top: 1px solid var(--hairline-soft); }
/* Best Sellers takes the lighter ground so it reads as one block with the
   "Better together" header above it, exactly as Flow State does with "The
   proof". Merging those two removes one step from the alternation, which
   flips everything below: the farm is now lighter and Cultivate & save
   darker. That is arithmetic, not preference — a strict two-tone run cannot
   merge a pair without inverting its tail. */
#bundles .spread--pair:nth-of-type(odd)   { background: var(--paper); }
#bundles .spread--pair:nth-of-type(even)  { background: var(--bone);  }
#the-six .spread__media { background: var(--sand); }
/* the last section: less air above, bigger type */
#bundles.section { padding-bottom: clamp(var(--s8), 3vw, var(--s12)); }
.signup.section { padding-top: clamp(var(--s8), 3.5vw, var(--s12)); }
.signup__inner .lexicon--end { margin-bottom: clamp(var(--s6), 3vw, var(--s10)); }
.lexicon--end.lexicon--line .lexicon__word { font-size: clamp(2rem, 3.2vw, 3rem); }
.lexicon--end.lexicon--line .lexicon__meta { font-size: .8rem; }
.lexicon--end.lexicon--line .lexicon__def { font-size: clamp(1.5rem, 2.3vw, 2.25rem); }
.signup__inner h2 { font-size: clamp(2.5rem, 5.6vw, 5.25rem); }
.signup__inner .lede { font-size: 1.125rem; max-width: 40ch; }

/* ── Or ask: centered, a breather between the left/right chapters ── */
.cs-ask { padding-block: clamp(var(--s16), 8vw, var(--s32)); }
.ask-center { display: grid; justify-items: center; text-align: center; gap: var(--s5); }
.ask-center__title { max-width: 13ch; font-size: clamp(2.75rem, 7.4vw, 7rem); line-height: .95; letter-spacing: -.015em; text-wrap: balance; }
.ask-center .lede { max-width: 40ch; }
.ask-center .btn { margin-top: var(--s2); }
.ask-center__media { margin: clamp(var(--s8), 4vw, var(--s16)) 0 0; width: min(100%, 680px); aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-md); background: var(--sand); }
.ask-center__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

/* ── Or ask back as a chapter after the six; grounds re-sequenced ── */
.cs-ask { padding-top: 0; padding-bottom: clamp(var(--s12), 6vw, var(--s24)); }

#bundles .spread--pair .spread__media { background: var(--paper); }
#sound.section { padding-bottom: clamp(var(--s10), 4vw, var(--s16)); }
#fruit.section { padding-top: clamp(var(--s12), 6vw, var(--s24)); }   /* matches .section after the 2026-09-14 trim */
/* Or ask: the copy centered in its half */
.split--ask .split__body { justify-self: center; justify-items: center; text-align: center; }
/* Or ask: the longer line wants a wider measure */
.split--ask .split__body { max-width: 34rem; }
.split--ask .cs-ask__body .lede { max-width: 52ch; }
/* a breath between the definition and the sign-up */
.signup__inner .lexicon--end { margin-bottom: clamp(var(--s12), 6vw, var(--s20)); }

}

/* ── shop hero: the whole shelf, with the jars beside it ── */
.shop-hero { padding-bottom: 0; }
.shop-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--s8), 5vw, var(--s20)); align-items: center; padding-block: clamp(2rem, 5vw, 4rem) clamp(var(--s10), 5vw, var(--s16)); }
.shop-hero__text { display: grid; justify-items: start; gap: var(--s5); max-width: 34rem; }
.shop-hero__text .lede { max-width: 46ch; margin: 0; }
.shop-hero__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--sand); }
.shop-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 900px) { .shop-hero__grid { grid-template-columns: 1fr; } .shop-hero__photo { aspect-ratio: 3 / 2; } }
/* ingredients, then a clear break before what is never in them */
.acc__panel .acc__never { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--hairline-soft); }
.acc__panel .acc__never .label { display: block; color: var(--sol); margin-bottom: var(--s2); }

/* ── bundle pages: the first photo shows both pouches, side by side ── */
.pdp__stage.card__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--sand); }
.pdp__stage.card__media--six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--sand); }
.pdp__stage.card__media--pair img, .pdp__stage.card__media--six img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* hero copy nudged in from the left edge, toward the middle */
.hero .hero__inner { margin-left: clamp(0px, 7vw, 150px); }
@media (max-width: 900px) { .hero .hero__inner { margin-left: 0; } }


/* ── the band: loose contour-line drawing, thin crayon weight ── */
.cs-band { overflow: visible; }
.cs-band path, .cs-band circle { fill: none; stroke: currentColor; paint-order: normal; }
.cs-band .fl { fill: currentColor; stroke: none; }
.cs-band .ac { stroke: var(--sol); }
.cs-band .lb { stroke-width: 2.2; }
.cs-band .hz { stroke-width: 1.6; opacity: .75; }
.cs-title .cs-critter.cs-band { width: clamp(250px, 30vw, 440px); }
.cs-title--section .cs-critter.cs-band { width: clamp(240px, 27vw, 400px); }
.signup__inner .cs-band { width: min(100%, 260px); }

/* ── the band, drawn: white paper knocked out by multiply, sits beside the chapter ── */
.cs-title:has(.cs-band-art) { grid-template-columns: auto 1fr auto; }
.cs-band-art { margin: 0; justify-self: end; align-self: end; width: clamp(260px, 32vw, 500px); }
.cs-band-art img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .cs-title:has(.cs-band-art) { grid-template-columns: 1fr; }
  .cs-band-art { width: 260px; justify-self: start; }
}

/* ── the bird, hovering out to the side of the pillars heading ── */
.pillars__wrap { position: relative; }
.pillars__bird { position: absolute; left: 2%; top: -6px; width: clamp(70px, 8vw, 120px); margin: 0; z-index: 1; }
.pillars__bird img { display: block; width: 100%; height: auto; animation: birdHover 4.6s var(--ease) infinite; }
@keyframes birdHover { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@media (max-width: 1100px) { .pillars__bird { left: 0; width: 82px; } }
@media (max-width: 640px) { .pillars__bird { position: static; width: 76px; margin: 0 auto var(--s4); } }
@media (prefers-reduced-motion: reduce) { .pillars__bird img { animation: none; } }

/* ── little vignettes of the band through the page ── */
.spread__art { margin: var(--s6) 0 0; width: clamp(150px, 17vw, 260px); justify-self: end; }
.spread:nth-of-type(even) .spread__art { justify-self: start; }
.spread__art img { display: block; width: 100%; height: auto; }
.cs-title.cs-title--art { grid-template-columns: auto 1fr auto; }
.sound__art { margin: 0; width: clamp(150px, 16vw, 250px); order: 1; align-self: end; justify-self: start; }
.sound__art img { display: block; width: 100%; height: auto; }
.spread__art--wide { width: clamp(210px, 24vw, 360px); }
@media (max-width: 900px) { .spread__art, .sound__art { width: 150px; justify-self: start; } }
/* vignettes tucked into chapter cards */
.chapter__art { margin: 0; width: clamp(120px, 13vw, 200px); align-self: end; justify-self: start; order: 1; }
.chapter__art img { display: block; width: 100%; height: auto; }
.cs-title--r .chapter__art { order: 0; }
@media (max-width: 900px) { .chapter__art { width: 120px; } }


/* ── the marching trio: over to the left and a touch bigger ── */
.cs-band-art { justify-self: start; width: clamp(300px, 40vw, 600px); }
.cs-title:has(.cs-band-art) { grid-template-columns: auto auto 1fr; }
@media (max-width: 900px) { .cs-band-art { width: 260px; } }

/* ── the pondering bear, further left ── */
.cs-ask .chapter__art { justify-self: start; margin-left: clamp(0px, 4vw, 80px); }

/* ── the bird and cherry, dropped down into the section's white space ── */
#fruit .chapter__art { align-self: end; margin-top: 0; margin-bottom: calc(-1 * clamp(var(--s6), 3vw, var(--s12))); margin-left: clamp(var(--s6), 6vw, var(--s20)); }

/* ── the farm vignette runs a little wider ── */
.chapter__art--wide { width: clamp(150px, 17vw, 260px); }

/* ── the two of them saluting either side of Cultivate & save ── */
.signup--art { position: relative; overflow: hidden; }
.signup__salute { position: absolute; bottom: 0; margin: 0; width: clamp(90px, 11vw, 170px); }
.signup__salute--l { left: clamp(8px, 5vw, 90px); }
.signup__salute--r { right: clamp(8px, 5vw, 90px); width: clamp(80px, 10vw, 152px); }
.signup__salute img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .signup__salute { display: none; } }

.footer__bottom { position: relative; }


/* ── the five pillars, drawn ── */
.pillars--drawn .pillar__art { display: block; height: clamp(92px, 9vw, 132px); width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; margin-bottom: var(--s5); transition: transform 420ms var(--ease); }
.pillars--drawn .pillar:hover .pillar__art { transform: translateY(-6px) scale(1.04) rotate(-1deg); }
@media (max-width: 640px) { .pillars--drawn .pillar__art { height: 84px; margin: 0; object-position: center; } }
@media (prefers-reduced-motion: reduce) { .pillars--drawn .pillar:hover .pillar__art { transform: none; } }


/* chapter vignettes ride with the heading, not the bottom of a tall card */
.cs-title--section .chapter__art { align-self: end; margin-bottom: clamp(var(--s6), 3vw, var(--s12)); }
#bundles .chapter__art { align-self: center; margin-bottom: 0; width: clamp(150px, 17vw, 250px); }

#bundles .chapter__art { order: 3; justify-self: end; align-self: center; }

/* A rail wrapper is inert on wide screens — `display: contents` removes the
   box entirely, so the desktop layouts above are untouched by it. */
.m-rail { display: contents; }
.m-dots { display: none; }

/* ==========================================================================
   MOBILE — a design, not a squeeze.                        added 2026-09-09

   Everything above this line was composed for a wide screen. On a phone it
   produced an 18-screen page: the chapter headers stayed multi-column, so a
   41px headline rendered inside a 90px track with the character drawing
   holding 260px beside it; every display clamp bottomed out near 50px, so
   the hero and a mid-page section head came out the same size; and each of
   the ten products owned a full viewport.

   This layer re-composes those sections rather than collapsing them. Read it
   as the mobile design: it is deliberately one block, in page order.
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Type -------------------------------------------------------------
     The clamps above have desktop floors. Give the scale a floor that suits
     a 390px screen, and restore the gap between a hero and a section head. */
  .d-xl { font-size: clamp(2.125rem, 9.2vw, 2.625rem); line-height: 1.03; }
  .d-lg { font-size: clamp(1.75rem, 7.4vw, 2.125rem); line-height: 1.06; }
  .d-md { font-size: clamp(1.375rem, 5.6vw, 1.75rem); line-height: 1.1; }
  .d-sm { font-size: clamp(1.125rem, 4.6vw, 1.3125rem); line-height: 1.15; }
  .lede { font-size: 1rem; line-height: 1.55; }
  /* Adjacent sections were stacking 48 + 48 of padding and the chapter
     header then added 32 more on top — 128px of nothing at every seam. */
  .section { padding-block: var(--s8); }

  /* --- Hero --------------------------------------------------------------
     The photograph is 1.7:1 and the jar fills 60% of its height and, at a
     phone's width, 65% of the frame — so in a full-bleed portrait hero the
     jar cannot clear the copy without cropping most of it away, and there
     is no vertical pan room to lift it (cover scales to the height).

     So the photograph keeps a taller block of its own — which crops it far
     LESS than a full-bleed portrait does — and its lower edge fades into
     the clay it was shot against, so there is no seam and no second
     section. The jar sits whole, large, in clear air above the copy. */
  .hero { min-height: 0; display: block; background: var(--clay); }
  .hero::before { display: none; }
  .hero__media {
    position: relative; inset: auto; z-index: auto; aspect-ratio: 9 / 10;
    /* The source has ~18% of empty backdrop above the pompoms and there is
       no vertical pan room (cover is height-driven here), so clip it off the
       top instead of zooming — the jar keeps its size. .hero clips it. */
    margin-top: -48px;   /* split the difference on the brown above the jar */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  }
  .hero__media::after { display: none; }
  .hero__media img { object-position: 78% 38%; transform: none; }
  /* The headline lifts out of the flow and sits in the empty backdrop to
     the LEFT of the jar and above the fingers — the one part of the frame
     with nothing in it. The lede and buttons then rise to meet the fade,
     which is what lets the whole hero sit on one screen. */
  .hero__title {
    position: absolute; z-index: 2; margin: 0;
    line-height: .92;                 /* match the desktop slogan's leading */
    left: var(--gutter); top: clamp(126px, 36vw, 176px);
    width: min(48%, 190px);
  }
  /* static, so the absolutely-positioned headline resolves against .hero
     (the photo's box) rather than this block below it */
  .hero__inner { position: static; padding-block: 0 var(--s8);
    margin-top: calc(-1 * var(--s10)); max-width: none; }
  /* full-opacity paper — at 88% it picked up brown from the photograph
     behind it and read as two different colours down the paragraph */
  .hero__lede { font-size: 1rem; max-width: 300px; margin: -52px 0 var(--s5);
    color: var(--paper); text-wrap: initial; }
  /* Every line the same paper white — no opacity anywhere. */
  .hero__lede, .hero__lede * { color: var(--paper); opacity: 1; }
  /* the first line reads as a lead-in to the rest */
  .hero__lede-lead { font-weight: 600; letter-spacing: .005em; }
  /* .hero__media is positioned and .hero__inner is not, so the photograph
     paints ON TOP of the copy — and since the paragraph is pulled up under
     the photo's fading edge, that translucent edge was tinting its first
     lines brown. Lift the copy above it. */
  .hero__lede, .hero__actions { position: relative; z-index: 1; }
  /* An invisible float shortens ONLY the first line, so it tucks under the
     fingers while the lines beneath it run the full width. */
  /* width is absolute, not a percentage, so line one always has room for
     the whole phrase "Premium mushroom gummies" however the measure moves */
  .hero__lede::before { content: ""; float: right; width: calc(100% - 216px); height: 1.05em; }
  .hero__actions { gap: var(--s3); }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* --- Pillars ----------------------------------------------------------- */
  /* 48px above and 64px below the pillars was more air than the section
     needs once the rail is only 217px tall. */
  #pillars { padding-top: var(--s6); padding-bottom: var(--s4); }
  #pillars .head { margin-bottom: var(--s5); }

  /* one line, at the largest size that holds it at 390px */
  .pillars__title { font-size: clamp(1.5rem, 7.2vw, 1.75rem); line-height: 1.08;
    letter-spacing: -.02em; }
  .pillars--drawn .pillar { display: block; }
  /* art 96 + gap 16 + text 102 filled the 214px item exactly, so the extra
     height comes out of the gap and the leading rather than the rail. */
  .pillars--drawn .pillar__art { height: 122px; width: auto; max-width: 100%;
    margin: 0 0 var(--s2); object-fit: contain; object-position: left bottom; }
  .pillars--drawn .pillar__t { font-size: 1.1875rem; line-height: 1.18; margin-bottom: var(--s1); }
  .pillars--drawn .pillar p { font-size: .875rem; line-height: 1.45; max-width: none; }

  /* --- Chapter headers --------------------------------------------------
     One column of copy with the drawing beside it. The chapter word stops
     being display type and becomes the eyebrow it always behaved like; the
     sentence gets the full width. The two- and three-column grids above are
     set by two-class and :has() selectors, so match their specificity. */
  .cs-title,
  .cs-title.cs-title--art,
  .cs-title:has(.cs-band-art),
  .cs-title:has(.cs-critter),
  .cs-title.cs-title--r,
  .cs-title.cs-title--section,
  .cs-title.cs-title--ask {
    grid-template-columns: 1fr 82px;
    justify-items: start; text-align: left; align-content: start;
    align-items: center;
    min-height: 0; column-gap: var(--s4); row-gap: var(--s2);
    padding-block: 0;
    margin-bottom: var(--s3);
  }
  .cs-title .cs-title__word,
  .cs-title--section .cs-title__word,
  .cs-title--r .cs-title__word,
  .cs-title h2.cs-title__word {
    font-family: var(--font-sans); font-size: .6875rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
    color: var(--muted); max-width: none; writing-mode: horizontal-tb;
    transform: none; rotate: none;
    grid-column: 1; grid-row: 1; align-self: end;
  }
  /* Chapter headlines were 29px — exactly the same as an SKU name, so they
     did not read as headings. Now ~34px, a clear step above. The block does
     not grow: its height was set by the 88px drawing, not the type, so the
     drawing comes down to 68px and the extra line height fits in the slack. */
  .cs-title .cs-title__sub,
  .cs-title .cs-title__sub--ask,
  .cs-title .cs-title__sub--short {
    font-size: clamp(1.875rem, 8.7vw, 2.375rem); line-height: 1.04;
    letter-spacing: -.015em; color: var(--ink);
    max-width: 18ch; white-space: normal;
  }
  .cs-title > .cs-title__sub,
  .cs-title__body,
  .cs-ask__body { grid-column: 1; grid-row: 2; align-self: start; }
  .cs-title__body { gap: var(--s4); justify-items: start; }
  .cs-title .nowrap { white-space: normal; }
  .chapter__art,
  .chapter__art--wide,
  .cs-band-art,
  .sound__art,
  #bundles .chapter__art,
  #fruit .chapter__art {
    order: 0; grid-column: 2; grid-row: 1 / span 2;
    width: 82px; justify-self: end; align-self: center; margin: 0;
  }

  /* The fruit header mirrors, so the chapter marks keep the same left/right
     rhythm the chews established rather than all sitting on one side. */
  #fruit .cs-title { grid-template-columns: 82px 1fr; }
  #fruit .cs-title .cs-title__word,
  #fruit .cs-title .cs-title__body,
  #fruit .cs-title > .cs-title__sub {
    grid-column: 2; justify-self: end; justify-items: end; text-align: right;
  }
  #fruit .cs-title .cs-title__sub { max-width: 18ch; }
  #fruit .split__body { justify-items: end; text-align: right; }
  #fruit .split__body .prose p { margin-left: auto; }
  #fruit .chapter__art {
    grid-column: 1; grid-row: 1 / span 2;
    justify-self: start; margin: 0 0 0 -14px;
  }
  #farm .cs-title { grid-template-columns: 150px 1fr; }
  #farm .cs-title .cs-title__word,
  #farm .cs-title .cs-title__body,
  #farm .cs-title > .cs-title__sub {
    grid-column: 2; justify-self: end; justify-items: end; text-align: right;
  }
  #farm .chapter__art { width: 150px; grid-column: 1; grid-row: 1 / span 2;
    justify-self: start; margin: 0 0 0 -16px; }

  /* Too many drawings in a row: the quiz and the method headers drop theirs
     so the ones that remain carry more weight. */
  #find .chapter__art, #sound .sound__art { display: none; }
  #find .cs-title, #sound .cs-title { grid-template-columns: 1fr; }

  /* the marching band opens the whole run, so it gets to be big — the
     headline takes a third line, which costs the block only ~6px */
  /* 170px is the ceiling: the headline still sets in three lines and the
     block stays 135px. At 180 it tips to four lines and costs 35px. */
  /* 170px is the ceiling — the headline still sets in three lines and the
     block stays 135px. At 186 it tips to four lines and costs 35px. */
  /* 170px column + the full 18px gutter = 188px of drawing, the most that
     leaves the headline its three lines. Below a 168px text column it tips
     to four and the block grows 35px. */
  #the-six .cs-title { grid-template-columns: 1fr 182px; align-items: stretch; }
  #the-six .cs-title .cs-title__sub { font-size: 1.9375rem; }
  #the-six .cs-band-art { width: 200px; grid-column: 2; grid-row: 1 / span 2;
    justify-self: end; align-self: center; margin: 0 -18px 0 0; }

  /* --- Pillars rail -----------------------------------------------------
     The five pillars are one still screen you swipe across. Each stops at
     86% of the viewport so the next peeks in — that peek plus the dots is
     what says it moves. The six and the pairs are deliberately NOT rails:
     they scroll with the page, one card at a time. */
  .pillars--drawn {
    display: flex; gap: var(--s4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter));
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pillars--drawn::-webkit-scrollbar { display: none; }
  .pillars--drawn > * { flex: 0 0 86%; scroll-snap-align: center; min-width: 0; }

  .m-dots { display: flex; gap: 2px; justify-content: center; margin-top: var(--s3); }
  .m-dot { width: 34px; height: 34px; display: grid; place-items: center;
    background: none; border: 0; padding: 0; cursor: pointer; }
  .m-dot::before { content: ''; width: 6px; height: 6px; border-radius: 99px;
    background: var(--sand); transition: width .22s var(--ease), background .22s var(--ease); }
  .m-dot[aria-current="true"]::before { width: 20px; background: var(--sol); }

  /* --- The six, and the four pairs, as cards ----------------------------
     Was: one product per viewport, ten viewports for ten products. Now a
     card each — photograph, name, the line, the fruit, price and add. */
  .cs-spreads .spread,
  .spread { min-height: 0; border-top: 0; }
  .spread + .spread { border-top: 1px solid var(--hairline-soft); }
  /* Life Force and Cloud Nine close their sections, so there is no
     following .spread to draw the rule — give them their own. */
  .cs-spreads .spread:last-of-type { border-bottom: 1px solid var(--hairline-soft); }
  .spread__grid,
  .spread--pair .spread__grid {
    grid-template-columns: 1fr; gap: var(--s4);
    padding-block: var(--s6) var(--s4);
  }
  .spread__media { width: 100%; aspect-ratio: 3 / 2; justify-self: stretch; }
  .spread--pair .spread__media { width: 100%; aspect-ratio: 2 / 1; }
  .spread__body,
  .spread:nth-of-type(even) .spread__body { width: 100%; max-width: none;
    justify-self: start; gap: var(--s3); }
  .spread__body h3,
  .spread--pair .spread__body h3 {
    font-size: clamp(1.625rem, 7.4vw, 2.125rem); line-height: 1.04;
    max-width: 16ch;
  }
  .spread__body .lede { max-width: none; }
  .cs__fruit { font-size: .6875rem; line-height: 1.45; }
  /* --- The six are browse-only on a phone -------------------------------
     Price, Add to basket and See-the-chew came to 85px on every card — 510px
     across the six — and six orange bars in four screens is most of why the
     run read as a catalogue. The buying happens on the product page and on
     Shop (which the hero now points at); here the whole card is the link. */
  .cs-spreads .spread__grid { position: relative; }
  /* The scroll driver eases these sideways on desktop; on a phone that drift
     is unwanted, and `will-change: transform` also makes .spread__body a
     containing block, which would trap the full-card link inside the copy. */
  .cs-spreads .spread__media,
  .cs-spreads .spread__body { transform: none !important; will-change: auto; }
  /* display: contents — the element generates no box at all, so it adds
     neither a grid row nor its gap. The link inside is absolutely
     positioned against .spread__grid, so it is unaffected. */
  .cs-spreads .cs__actions { display: contents; }
  .cs-spreads .cs__actions .pdp__price,
  .cs-spreads .cs__actions .btn { display: none; }
  .cs-spreads .cs__actions .tlink {
    position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: 3; display: block;
    justify-self: stretch; align-self: stretch;   /* start would shrink it to
                                                     its zero-width text */
    margin: 0; padding: 0; font-size: 0; line-height: 0;
    background: none; border: 0;
  }
  .cs-spreads .cs__actions .tlink::after { content: none; }

  /* --- The copy alternates sides -----------------------------------------
     All six blocks hard against the left edge was the flattest part of the
     run. The copy now steps right, left, right… — and because the quiz sits
     between chew 3 and chew 4 with its copy on the left, chew 4 starts on
     the RIGHT again so it contrasts with it. Both halves therefore run the
     same rule: 1R 2L 3R | 4R 5L 6R. */
  /* .cs-spreads is not a .section, so it never got the mobile section
     padding and its header sat flush on the seam above. */
  .cs-spreads { padding-top: var(--s5); }
  #the-six-b { padding-top: 0; }
  /* The alternation is carried by text-align and justify-items, not by a
     block offset, so the body can run the full width — which gives the copy
     214px AND lets the drawing sit right out at the gutter. */
  .cs-spreads .spread__body { width: 100%;
    align-content: start; gap: var(--s2); }
  /* Reserving lines inside .lede / .cs__fruit padded the ELEMENT, so a card
     whose note runs three lines ended its text 15px higher than First
     Response's four-line note — same box, different visible gap. Pin the
     first and last rows instead and let the slack fall between them, so the
     gap under the last line of copy is the same on every card. */
  .cs-spreads .spread__body { align-content: space-between; min-height: 178px; }
  .cs-spreads .cs__fruit { line-height: 1.35; }
  .cs-spreads .spread:nth-of-type(odd) .spread__body {
    justify-self: end; justify-items: end; text-align: right;
  }
  .cs-spreads .spread:nth-of-type(even) .spread__body {
    justify-self: start; justify-items: start; text-align: left;
  }
  /* the drawing rides on the outer edge, so it mirrors with the block */
  .cs-spreads .spread:nth-of-type(odd) .spread__body {
    grid-template-columns: 148px 1fr;
  }
  .cs-spreads .spread:nth-of-type(odd) .spread__body > * { grid-column: 2; }
  /* even cards were auto-placing their children while odd cards had explicit
     columns, which produced a different row structure and a 16px difference */
  .cs-spreads .spread:nth-of-type(even) .spread__body > * { grid-column: 1; }
  .cs-spreads .spread:nth-of-type(even) .spread__art { grid-column: 2; }
  .cs-spreads .spread:nth-of-type(odd) .spread__art {
    grid-column: 1; justify-self: start;
  }

  /* Sized by height, not width: these four aspect ratios run 0.69 to 1.79,
     so a single width gave heights from 77px to 201px against the chews'
     74-124px. */
  /* The pair cards are smaller than the chew cards (410px vs 488, photos
     177 vs 236), so a drawing of the same absolute height reads far heavier
     here. Matched by PROPORTION instead: ~0.22 of the card, which also puts
     them level with the pairs header drawing. */
  /* Explicit widths, not height + width:auto — these images are lazy, and
     an auto-width figure has no intrinsic size before its image loads, so
     the drawings rendered at ZERO width. Each width gives a 92px height. */
  #bundles .spread__art { height: auto; }
  #pair-best-sellers-bundle .spread__art { width: 80px; }   /* pair-best.png 0.87 */
  #pair-productivity-bundle .spread__art,
  #pair-productivity-bundle-1 .spread__art { width: 165px; }   /* pair-productivity.png 1.79 */
  #pair-anxiety-support-bundle .spread__art { width: 63px; }   /* band-zen.png 0.69 */
  #pair-immunity-bundle .spread__art,
  #pair-immunity-bundle-1 .spread__art { width: 94px; }   /* pair-immunity.png 1.02 */

  /* the pairs alternate like the chews, Best Sellers starting on the right */
  #bundles .spread--pair:nth-of-type(odd) .spread__body {
    justify-self: end; justify-items: end; text-align: right;
  }
  #bundles .spread--pair:nth-of-type(even) .spread__body {
    justify-self: start; justify-items: start; text-align: left;
  }
  #bundles .spread--pair:nth-of-type(odd) .spread__body {
    grid-template-columns: 124px 1fr;
  }
  #bundles .spread--pair:nth-of-type(odd) .spread__body > * { grid-column: 2; }
  #bundles .spread--pair:nth-of-type(odd) .spread__art {
    grid-column: 1; justify-self: start; margin: 0 0 0 -14px;
  }
  #bundles .spread--pair .cs__actions { justify-items: inherit; }

  /* The pairs were the only cards left carrying price + Add to basket, which
     made them read as a different site rather than as emphasis. They now
     behave exactly like the six: the whole card is the link. */
  #bundles .spread__grid { position: relative; }
  #bundles .spread--pair .spread__body { align-content: space-between; min-height: 190px; gap: var(--s2); }
  #bundles .spread--pair .spread__art { grid-row: 1 / span 3; }
  #pair-best-sellers-bundle .spread__art { grid-row: 1 / span 4; }
  /* same for the pairs: the number line wraps to two and the name to two */
  #bundles .spread--pair .cs__n { min-height: 2.8em; }
  #bundles .spread--pair .spread__body h3 { min-height: 2.08em; }
  #bundles .spread--pair .lede { min-height: 3.1em; }
  #bundles .spread--pair .cs__actions { display: contents; }
  #bundles .spread--pair .cs__actions .pdp__price,
  #bundles .spread--pair .cs__actions .btn { display: none; }
  #bundles .spread--pair .cs__actions .tlink {
    /* the pair grids keep their .wrap gutter, so reach across it to the
       card's real edges (the six have their padding removed instead) */
    position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: 3; display: block;
    justify-self: stretch; align-self: stretch;
    margin: 0; padding: 0; font-size: 0; line-height: 0; background: none;
  }
  #bundles .spread--pair .cs__actions .tlink::after { content: none; }
  #bundles .spread--pair .spread__media,
  #bundles .spread--pair .spread__body { transform: none !important; will-change: auto; }

  /* the pairs keep their buy controls — they are the offer, not a browse */
  .cs__actions { display: grid; grid-template-columns: auto 1fr;
    gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s2); width: 100%; }
  .cs__actions .btn { justify-content: center; width: 100%; white-space: nowrap; }
  .spread--pair .cs__actions { grid-template-columns: 1fr; }
  .cs__actions .tlink { display: inline-block; grid-column: 1 / -1;
    justify-self: start; margin-top: var(--s1); }
  /* The drawing moves into a column beside the copy rather than taking a
     row of its own, which was costing ~100px on every one of the ten cards. */
  .spread__body { grid-template-columns: 1fr 148px; column-gap: var(--s4); }
  .spread__body > * { grid-column: 1; }
  /* The drawing was 91px tall in a 191px column — a third of its space. It
     now fills that height and spills into the card's outer margin (the body
     is 306px in a 354px card), so it gets bigger without squeezing the copy
     or making the card taller. */
  /* the drawing scoots out into the page gutter — 14 of the 18px available,
     so it never reaches the viewport edge and never touches the copy */
  /* Aspect ratios run 0.97 (Flow State, nearly square) to 2.20 (Balancing
     Act, wide and short), so one width gave heights from 62px to 143px.
     Each is set on its own; the cap is 162px (148px column + the 14px it
     scoots into the gutter). */
  #spread-flow-state     .spread__art { width: 120px; }   /* 0.97 -> 124h */
  #spread-balancing-act  .spread__art { width: 162px; }   /* 2.20 ->  74h */
  #spread-life-force     .spread__art { width: 140px; }   /* 1.24 -> 113h */
  #spread-first-response .spread__art { width: 194px; }   /* 2.00 ->  97h */
  #spread-first-response .spread__body { grid-template-columns: 180px 1fr; }
  #spread-immune-revival .spread__art { width: 148px; }   /* 1.58 ->  94h */
  #spread-cloud-nine     .spread__art { width: 148px; }   /* 1.33 -> 111h */

  /* The span must match the real row count. `1 / -1` resolves against the
     EXPLICIT grid, which has no rows here, so the drawing took row 1 alone
     and forced it to its own height (+90px a card). Chews always have four
     text rows; pairs have three, except Best Sellers which carries a flag. */
  .spread__art,
  .spread__art--wide { grid-column: 2; grid-row: 1 / span 4; width: 138px;
    justify-self: end; align-self: center; margin: 0 -14px 0 0; }
  .cs-spreads .spread:nth-of-type(odd) .spread__art {
    justify-self: start; margin: 0 0 0 -14px; }
  /* these three sit in from the edge rather than out at it */
  #spread-life-force     .spread__art,
  #spread-first-response .spread__art,
  #spread-cloud-nine     .spread__art { margin-left: 4px; }


  /* #fruit.section carries its own generous top padding for desktop */

  /* --- Vertical rhythm ---------------------------------------------------
     Seams between sections measured 8px to 64px. Normalised to ~46px
     between distinct sections and ~24px where a section continues a run
     (the quiz interrupting the six). The method keeps a deliberately
     tighter seam under Cloud Nine, but 8px was an over-correction. */
  #bundles.section { padding-bottom: var(--s3); }        /* 64 -> 46 */
  #sound.section { padding-bottom: var(--s8); }          /* 27 -> 19 under the link */
  /* the last seam, brought into the 36-38 band the others now sit in */
  #farm.section { padding-bottom: var(--s6); }
  #stay.section, #stay.signup { padding-top: var(--s4); }
  /* every chapter-headed section opens on the same 24px, so the farm no
     longer sits lower than the fruit and the method (which were themselves
     24 and 28 — not matching each other either) */
  #sound.section, #fruit.section, #farm.section, #bundles.section { padding-top: var(--s6); }
  #find.cs-ask { padding-block: var(--s6); }             /* 18/30 -> 24/24 */

  /* --- Two-column splits ------------------------------------------------
     .split has no mobile collapse anywhere above, so the method, the quiz
     invitation, the fruit and the farm all kept 1fr 1fr at 375px and ran
     their prose in a 145px column beside a half-empty figure. */
  .split { grid-template-columns: 1fr; gap: var(--s6); align-items: start; }
  /* #sound .split is set by an ID four times during desktop tuning, which
     quietly outranked the 900px collapse that was already there. */
  #sound .split { grid-template-columns: 1fr; gap: var(--s6); }
  #sound .split__media--free { width: 100%; margin-left: 0; }
  #sound .split__body .prose { max-width: none; }
  .split--flip .split__media,
  .split--ask .split__media { order: 0; }
  .split__media { aspect-ratio: 4 / 3; }
  .split__media--free { aspect-ratio: auto; }
  .split__body > * + * { margin-top: var(--s4); }
  .prose p { max-width: none; }
  .prose p + p { margin-top: var(--s4); }
  .cs-ask__body { gap: var(--s4); }
  .cs-ask__body .lede { max-width: none; }
  .cs-ask .cs-title__sub { max-width: 20ch; }
  .cs-ask .btn { width: 100%; justify-content: center; }

  /* --- Header -----------------------------------------------------------
     `.header__nav { display: none }` at 900px hides BOTH navs, which takes
     the basket with it — and the drawer has no basket either, so on a phone
     there is no route to the cart at all. Bring back the icon, not the text
     links: the grid is burger | wordmark | basket. */
  .header .header__nav--right { display: flex; align-items: center; gap: var(--s2); }
  .header .header__nav--right .navlink { display: none; }

  /* --- Touch targets ----------------------------------------------------
     .tlink renders at 21px and .fn at 14px — well under the 44px minimum a
     thumb needs. Expand the hit area with a pseudo-element so the underline
     and the type stay exactly where they are. */
  /* Standalone navigation links only. Links inline in a paragraph are
     deliberately left alone — WCAG exempts them, and a 44px box on an
     inline link overlays the lines above and below it. */
  .tlink, .fn, .brand, .card__name a,
  nav[aria-label="Breadcrumb"] a { position: relative; }
  .card__name a { display: inline-block; }
  .tlink::after, .fn::after, .brand::after, .card__name a::after,
  nav[aria-label="Breadcrumb"] a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
  .footer a, .drawer a { padding-block: var(--s3); }
  /* four stacked blocks made the footer 1,098px; the three link lists go
     two-up with the brand across the top. */
  /* A real 2x2. The cells were shrink-wrapping to their content
     (justify-items: center), so four blocks centred on four different axes
     and nothing lined up. Stretched to their tracks, with hairlines, they
     read as quadrants. */
  .footer__grid {
    /* minmax(0,1fr) or the long email address forces column 2 wider */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
    justify-items: stretch; align-items: stretch; text-align: center;
  }
  /* 16px of cell padding left 145px for a 155px email address; 8px leaves
     161px, so it sets on one line without shrinking the type. */
  .footer__grid > * { padding: var(--s6) var(--s2); margin: 0; }
  .footer__grid > *:nth-child(1),
  .footer__grid > *:nth-child(3) { border-right: 1px solid rgba(250,245,234,.16); }
  .footer__grid > *:nth-child(1),
  .footer__grid > *:nth-child(2) { border-bottom: 1px solid rgba(250,245,234,.16); }
  .footer__brand img { margin-inline: auto; width: 128px; height: auto; }
  .footer__brand p { margin-top: var(--s3); }
  .footer__grid h3 { margin-bottom: var(--s2); }
  /* hello@humdrumla.com was 155px in a 177px cell at 15px and broke as
     "…humdrumla.co / m". Sized to fit instead; the wrap stays as a guard. */
  .footer__grid a { display: block; padding-block: 12px; overflow-wrap: anywhere; }
  .footer__brand p { font-size: .8125rem; line-height: 1.5; }
  .footer__grid .label { font-size: .625rem; }

  .footer__grid { align-items: start; }
  /* .navlink::after is the animated underline — don't hijack it. The row is
     already 52px, so just let the links fill it. */
  .subnav__list { height: 52px; }
  .subnav .navlink { display: flex; align-items: center; align-self: stretch; }

  /* --- Sign-up ----------------------------------------------------------
     The two saluting characters were hidden below 900px. Bring them back at
     a size that flanks the form instead of fighting it. */
  /* The salutes are anchored to the section's foot; without room of their
     own they sat on top of the sign-up button and would swallow taps. */
  .signup__inner { padding-bottom: var(--s14, 3.5rem); }
  .signup__salute { display: block; width: 62px; z-index: 0; pointer-events: none; }
  .signup__salute--l { left: 2px; }
  .signup__salute--r { right: 2px; width: 52px; }
  .signup__inner { position: relative; z-index: 1; }
  .signup .lexicon__line { gap: var(--s1); }
}

/* Shopify add-to-cart -----------------------------------------------------
   The storefront wraps every Add to basket button in a <form>. .cs__actions
   switches to display:contents on mobile and hides .btn outright, so a form
   box in between would hold open an empty grid row. Taking the form out of
   the layout entirely leaves the button parented to .cs__actions exactly as
   it is on the static build. */
.spread__form,
.band__form,
.card__quick-form { display: contents; }

/* Cart --------------------------------------------------------------------
   The static build never had a basket, so these are the only classes the
   Shopify port adds. They are built from the same tokens as everything else. */
.cart__list { display: grid; gap: 0; margin-top: var(--s8); }
.cart__row {
  display: grid; align-items: start; gap: var(--s5);
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  padding-block: var(--s6); border-bottom: 1px solid var(--hairline-soft);
}
.cart__media { display: block; aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
.cart__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart__body .card__name { margin: 0; }
.cart__qty { display: grid; gap: var(--s2); justify-items: start; width: 92px; }
.cart__qty .field { width: 100%; text-align: center; }
.cart__foot { margin-top: var(--s8); display: grid; justify-items: start; gap: var(--s1); }
@media (max-width: 767px) {
  .cart__row { grid-template-columns: 72px minmax(0, 1fr); row-gap: var(--s3); }
  .cart__qty { grid-column: 2; }
  .cart__row > .card__price { grid-column: 2; justify-self: start; }
}

/* Desktop refinements, 2026-09-14 --------------------------------------------
   Desktop had never had a proper pass; these came out of the first real look
   at it, alongside the Shopify port. */

@media (min-width: 768px) {

  /* 1. Make the alternation read. The copy box already mirrors exactly, but
     .spread__body is a grid with justify-items:start, so every line was pinned
     to the box's left edge. On the right-hand cards that left the text
     starting near the middle of the page and the mirror was invisible. */
  .cs-spreads .spread:nth-of-type(odd) .spread__body,
  #bundles .spread--pair:nth-of-type(odd) .spread__body {
    justify-items: end;
    text-align: right;
  }
  .cs-spreads .spread:nth-of-type(odd) .cs__actions,
  #bundles .spread--pair:nth-of-type(odd) .cs__actions { justify-content: flex-end; }

  /* 2. Flow State's drawing is the tallest of the six and sat closest to the
     section's bottom edge. Lift it to match the others. */
  #spread-flow-state .spread__art { margin-bottom: 26px; }

  /* 3. The pillar drawings vary in width and were pinned left in their columns,
     leaving a ragged gap after the last one. Centring each over its own column
     evens the row without centring the text. */
  .pillars--drawn .pillar__art { margin-inline: auto; }

  /* 4. The product photograph was capped by viewport height rather than by its
     column, so it sat small with the column half empty. */
  .cs-spreads .spread__media { width: min(100%, calc(66vh * 0.8)); }
}

/* Desktop pass 2, 2026-09-14 -------------------------------------------------
   Second round from Will's walk through the live preview. */

@media (min-width: 768px) {

  /* 1. Section padding was 8vw, which is 115px at 1440 and reads as a lot of
     empty ground above and below the method, fruit and farm blocks — and above
     and below the grids on the shop page, which use the same rule. */
  .section { padding-block: clamp(var(--s12), 6vw, var(--s24)); }

  /* 2. The chapter drawings were three different widths: 13vw for most, 16vw
     for the method, 17vw for the wide ones. One width for all of them, matching
     what the wide variant already was. The six-chews header keeps its own much
     larger size, which was deliberate. */
  .chapter__art,
  .chapter__art--wide,
  .sound__art { width: clamp(150px, 17vw, 260px); }

  /* 3. A pair's two jars were 328px each against 475px for a single chew's
     photograph, so the pairs run read as a smaller section. Give the media
     column more of the grid and let it fill what it is given. */
  .spread--pair .spread__grid { grid-template-columns: 1.2fr .8fr; }
  .spread--pair:nth-of-type(even) .spread__grid { grid-template-columns: .8fr 1.2fr; }
  .spread--pair .spread__media { width: min(100%, calc(66vh * 1.7)); }
}

/* The "Or ask" photograph is 5/4 by default. A landscape shot would lose a
   third of its width to the crop, so the section can restate its own shape. */
.split__media--ask[data-shape="wide"]    { aspect-ratio: 16 / 9; }
.split__media--ask[data-shape="square"]  { aspect-ratio: 1 / 1; }
.split__media--ask[data-shape="tall"]    { aspect-ratio: 4 / 5; }

/* The shop hero and the subscription split were both built around portrait
   photographs. A landscape shot in a 4/5 or 4/5 box loses most of its width to
   the crop, so each can restate its shape alongside the image it carries. */
.shop-hero__photo[data-shape="wide"]  { aspect-ratio: 3 / 2; }
.shop-hero__photo[data-shape="wide"] img { object-position: 50% 50%; }
.split__media[data-shape="wide"]      { aspect-ratio: 3 / 2; }
.split__media[data-shape="square"]    { aspect-ratio: 1 / 1; }

/* A statement's photograph is 3/2 by default; these let a portrait or square
   shot keep its own proportions instead of being cropped to a landscape band. */
.statement > .figure--photo[data-shape="tall"] img   { aspect-ratio: 5 / 7; }
.statement > .figure--photo[data-shape="square"] img { aspect-ratio: 1 / 1; }
.figure--photo[data-shape="tall"]   { max-width: 34rem; }

/* The subscription block gained a frequency selector, so its left column is a
   stack now rather than a single line. */
.sub__body { display: grid; gap: var(--s3); justify-items: start; }
.sub__freq { width: 100%; max-width: 20rem; font-size: .875rem; padding-block: var(--s2); }
.sub__body .sub__d { margin-top: 0; }
@media (max-width: 560px) { .sub__freq { max-width: none; } }