/* ============================================================================
   VEDIC CRUNCH — SPECIMEN SHEET
   A herbarium mounting sheet crossed with a lab report. Paper ground, ruled
   grid, hairline structure, olive-seal green as the text black, and ten
   per-flavour accents sampled straight off the printed packs.
   Sections: TOKENS · RESET · TYPE · LAYOUT · BUTTONS · RAIL · HEADER · MEGA ·
   SIDE · SEARCH · FOOD · HERO · PROOF · SHOP BY · RANGE · INGREDIENTS ·
   VERIFY · REELS · FIND US · ASKS · KNOW · UNPACK · RESPONSIVE · MOTION ·
   PRINT · ADDENDA
   ========================================================================= */

/* --- TOKENS -------------------------------------------------------------- */
:root{
  /* THE GROUND IS THE LOGO'S OWN GROUND. #FEF5EE is 49.2% of the pixels in
     logo (1).avif and it is the colour behind the wordmark, so the mark
     lands on the page with no box round it. The other two are that cream
     stepped down for panels that need to separate from it. */
  --paper:#FEF5EE; --paper-2:#F9EDE1; --paper-3:#F2E3D3;

  /* hairlines survive only inside form fields, pills and the data table.
     Nothing decorative draws a line any more, so these are tuned to read as
     the edge of a container rather than as a rule across the page. */
  --rule:rgba(65,119,67,.13); --rule-2:rgba(65,119,67,.26);

  /* type is the logo green driven down to reading weight, never black: a
     true black on this cream reads as printing, not as a brand. */
  /* --ink-3 and --copper were both tuned to clear AA against --paper on
     its own. They do - 4.74 and 4.64 - but --paper is not what ends up
     behind them. body::before washes the whole page in drifting light,
     the tinted rows that replaced this site's rules are translucent on
     top of it, and the two together take the real ground under an 11px
     label down to about (231,225,210). Measured there, the old pair fell
     to 3.91 and 3.83 - under AA for small text. Re-tuned against the
     ground that actually composites, not the token that names it. */
  --ink:#20301F; --ink-2:#4F6350; --ink-3:#5A6756;

  /* brand, straight off the mark. --copper keeps its name and takes the
     logo orange darkened to 4.6:1 on the cream, because it carries small
     type; --orange stays at full strength for fills, where it is a ground
     rather than a letterform. */
  --green:#417743; --copper:#965007; --gold:var(--copper);
  --orange:#F6A028;

  /* --cream is only ever the colour that sits ON --ink or --deep, so it
     inverts with them and every reversed-out pair keeps working. */
  --cream:#FEF5EE;

  /* the contrast band flips with everything else: on a cream site the band
     that breaks the page is the deep green one. --deep-rule is therefore a
     light hairline. */
  --deep:#1E3320; --deep-2:#16261A; --deep-rule:rgba(254,245,238,.16);

  /* the Date Bites ground, #240C0C, for the one oxblood band */
  --oxblood:#240C0C;

  /* per-flavour, overridden below */
  --accent:#417743;

  /* Fraunces carries the display: its SOFT and WONK axes are the closest a
     typeface gets to the hand-drawn botanicals on the labels, and it stays
     characterful at 110px where a neutral serif goes limp. */
  --display:'Fraunces','Georgia',serif;
  --body:'Schibsted Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --deva:'Hind','Nirmala UI',system-ui,sans-serif;

  --maxw:1400px;
  --gut:clamp(20px,3.8vw,56px);
  /* was clamp(72px,8vw,144px). It was set that high on purpose when the
     dividing rules came off, so that air would do the separating - but
     padding-block pays at both edges, so every join between two sections
     stacked 115px onto 115px and opened a 230px void at 1440. Six of them
     down the page, and they are the emptiest thing on it. Air still
     separates; 150px of it reads as a pause, 230px reads as a hole. */
  --sec-y:clamp(52px,5.2vw,92px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --r:3px;
}

/* accents sampled off the pack label bands and driven back DOWN. They were
   lifted to carry on a dark ground; on cream every one of them has to darken
   or it falls under 4.5:1 against the paper. The butter yellow and the grey
   move furthest, because those two are nearly invisible on a warm cream. */
[data-flavour="himalayan-salt"]{--accent:#B9705C}
[data-flavour="peri-peri"]     {--accent:#C4442C}
[data-flavour="desi-chaat"]    {--accent:#A85B33}
[data-flavour="cheddar-cheese"]{--accent:#9C7409}
[data-flavour="cream-onion"]   {--accent:#5F7F43}
[data-flavour="spanish-tomato"]{--accent:#BF4B3C}
[data-flavour="desi-masala"]   {--accent:#3F65B8}
[data-flavour="achaari-twist"] {--accent:#847212}
[data-flavour="salt-pepper"]   {--accent:#5E6478}
[data-flavour="date-bites"]    {--accent:#8E5A34}

/* The cream content panels of section 3. Every ramp token flips back inside
   them. --cream flips with the rest because it never names a colour, it names
   a role: "the thing that sits on the panel". Keeping that role intact is
   what repairs the twenty-odd descendant rules in p5 and pages without
   editing any of them. The two places that use --cream as a background
   instead - the hotspot tooltip and the social hover - are fixed by hand. */
/* THE CONTRAST PANEL, mid-page. Sand, not green. Three deep bands on a
   cream page reads as a green site with cream gaps, which is the opposite
   of the brief. This is the same ground one step warmer and deeper, so a
   band still separates from the page without changing its temperature. */
.proof,.sec--deep,.inv{
  --paper:#F8EADB; --paper-2:#F2E0CD; --paper-3:#EAD5BD;
  --rule:rgba(32,48,31,.10); --rule-2:rgba(32,48,31,.20);
  --ink:#20301F; --ink-2:#4B5F4C; --ink-3:#5F6D5C;
  --cream:#F8EADB; --deep:#20301F; --deep-2:#2A3D28;
  --deep-rule:rgba(32,48,31,.13);
  --copper:#9C540A; --green:#3B6E3E; --orange:#C4700B;
  background:var(--paper);color:var(--ink);
}

/* THE FOOT. The one deep band on the page, and it is the last thing on it.
   Every token flips, --cream included: it names the foreground that sits on
   an --ink / --deep / --copper fill, so a solid button in here is cream with
   dark type and it needs no rule of its own. What --cream is NOT is the text
   of the panel - that is --ink - and the footer rules that had confused the
   two while every band was dark now ask for --ink. */
.unpack{
  --paper:#1E3320; --paper-2:#16261A; --paper-3:#27412B;
  --rule:rgba(254,245,238,.13); --rule-2:rgba(254,245,238,.26);
  --ink:#FEF5EE; --ink-2:#CFC6B8; --ink-3:#9BA894;
  --cream:#1E3320; --deep:#FEF5EE; --deep-2:#F2E3D3;
  --deep-rule:rgba(254,245,238,.16);
  --copper:#EDA542; --green:#8CC791; --orange:#F6A028;
  --accent:#8CC791;
  background:var(--paper);color:var(--ink);
}

/* --- RESET --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.62;
  color:var(--ink);
  background-color:var(--paper);
  /* four layers, in paint order: a wash of the logo orange top left where
     the eye lands, the logo green low right so the cream does not go flat,
     a third warm pool at the foot of the page, and no grid at all. A ruled
     grid was the largest single source of drawn lines on the page and the
     client asked for none. */
  background-image:
    radial-gradient(118% 74% at 16% -8%,rgba(246,160,40,.13),transparent 60%),
    radial-gradient(92% 66% at 94% 12%,rgba(65,119,67,.09),transparent 58%),
    radial-gradient(80% 50% at 50% 104%,rgba(246,160,40,.08),transparent 62%);
  background-size:auto,auto,auto;
  background-position:0 0;
  background-attachment:fixed,fixed,fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* THE AMBIENT GROUND. Two soft bodies of warm light that drift on a
   34s cycle, and a fine grain over the top so the cream has tooth instead
   of reading as flat #FFF-adjacent paper. Both are fixed and both are
   pointer-events:none, so the page scrolls through the light rather than
   dragging it along. Body pseudo-elements paint above the propagated
   canvas background and below every element, which is exactly the slot
   this needs and costs no wrapper markup. */
body::before{
  content:"";position:fixed;inset:-24%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(34% 30% at 24% 30%,rgba(246,160,40,.20),transparent 66%),
    /* the green blob is the one that darkens rather than warms, so it is
       the one that gets pulled back; the two orange washes are the brand
       light the background was asked for and they stay where they are. */
    radial-gradient(30% 28% at 78% 62%,rgba(65,119,67,.10),transparent 64%),
    radial-gradient(26% 24% at 54% 92%,rgba(246,160,40,.13),transparent 66%);
  filter:blur(26px);
  animation:drift 34s var(--ease-io) infinite alternate;
  will-change:transform;
}
@keyframes drift{
  to{transform:translate3d(3.6%,-2.8%,0) scale(1.09)}
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.30'/></svg>");
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}

h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--cream)}
mark{background:color-mix(in srgb,var(--copper) 26%,transparent);color:inherit;border-radius:1px}

/* --- TYPE SCALE ---------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copper);
}
/* Fraunces is a variable face; opsz has to be driven or every size renders
   at the same optical weight and the big headlines look thin. */
h1,h2,h3{
  font-family:var(--display);font-weight:600;line-height:1.02;
  letter-spacing:-.022em;
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
h1{font-variation-settings:"opsz" 144,"SOFT" 22,"WONK" 1}
.sec-top h2{
  font-size:clamp(38px,6.4vw,104px);font-weight:700;line-height:.96;
  letter-spacing:-.032em;
  font-variation-settings:"opsz" 120,"SOFT" 18,"WONK" 1;
  text-wrap:balance;
}
.sec-sub{
  margin-top:14px;max-width:52ch;color:var(--ink-2);
  font-size:clamp(15px,.5vw + 13px,17.5px);line-height:1.66;
}
.deva{font-family:var(--deva);font-weight:400}
.data,.kbd,.big-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.big-num{
  font-size:clamp(30px,3.2vw,46px);line-height:1;font-weight:500;
  letter-spacing:-.075em;
}
.wm{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* --- LAYOUT -------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* the spine: every section is separated by a hairline, not by a void */
/* sections used to be divided by a rule. They are divided by air now: the
   client asked for no lines anywhere, so the vertical rhythm has to do the
   separating on its own, which is why --sec-y went up rather than the rule
   simply being deleted. */
.sec{padding-block:var(--sec-y)}
.sec--parchment{background:var(--paper-2)}

/* Brief point 2 kills the rule-over-eyebrow masthead. The two-column grid
   existed only to hold that rule, so the whole thing collapses to a stack and
   the headline gets the room it was giving away. */
.sec-top{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
.sec-top .eyebrow{
  display:block;margin-bottom:clamp(10px,1.1vw,16px);border-top:0;padding-top:0;
}
.sec-top .sec-sub{margin-top:clamp(16px,1.6vw,26px)}
/* every section emits .sec-top inside .wrap, which already applies the same
   max-width and gutter - so the heading sat one full --gut inside its own
   content. Scoped to .wrap so the unnested page-header use is untouched. */
.wrap .sec-top{max-width:none;padding-inline:0}
/* centred variant, for the About masthead (point 9) */
.sec-top--mid{text-align:center}
.sec-top--mid .sec-sub{margin-inline:auto}
/* the floor is what a phone gets: at 44px the title stayed on one line and
   read no bigger than the section headings above it. 64 balances it onto two
   lines and still clears a 320px measure. A floor rather than a media query,
   so there is no step at any width. */
.sec-top--mid h2{font-size:clamp(64px,8.2vw,132px);line-height:.94}

.rise{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.is-in{opacity:1;transform:none}

/* --- BUTTONS ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;
  font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.005em;
  border:1px solid transparent;
  transition:background-color .32s var(--ease),color .32s var(--ease),
             border-color .32s var(--ease),transform .32s var(--ease);
}
.btn--solid{background:var(--ink);color:var(--cream)}
.btn--solid:hover{background:var(--green)}
.btn--ghost{border-color:var(--rule-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-3)}
.btn:active{transform:translateY(1px)}

.link-arrow{
  display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);
}
.link-arrow span{transition:transform .34s var(--ease)}
a:hover .link-arrow span,.link-arrow:hover span{transform:translateX(5px)}

/* --- §01 TICKER RAIL ----------------------------------------------------- */
.rail{
  height:36px;overflow:hidden;
  /* warmest strip on the page and the only place the orange runs at full
     strength as a ground. It reads as the top edge of a label rather than as
     a black bar dropped on cream. */
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--orange) 20%,var(--paper-2)) 0%,
    color-mix(in srgb,var(--orange) 10%,var(--paper-2)) 50%,
    color-mix(in srgb,var(--orange) 20%,var(--paper-2)) 100%);
  color:var(--ink-2);
}
.rail-track{position:relative;height:36px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.rail-line{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:10px;padding-inline:var(--gut);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(60%);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
/* main.js swaps is-on in a single tick. Without the delay the outgoing line
   is still on the baseline when the incoming one arrives on it. */
.rail-line.is-on{
  opacity:1;transform:none;
  transition-delay:.32s;
}
.rail-line b{font-weight:500;color:var(--copper)}

/* --- §8a HEADER ---------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:90;
  /* 88% was a nice frosted bar over cream and a muddy grey-green one over
     the deep footer, where it also let the logo’s own opaque cream ground
     show through as a lighter box. At 96% the bar is the page colour
     wherever it happens to be, and the logo has nothing to show against. */
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  backdrop-filter:saturate(1.1) blur(9px);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.hdr-in{
  height:64px;display:flex;align-items:center;gap:clamp(16px,2.4vw,38px);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  transition:height .32s var(--ease);
}
.hdr.is-tight{box-shadow:0 12px 30px -24px rgba(32,48,31,.62)}
.hdr.is-tight .hdr-in{height:52px}

/* The drawn lotus and the set wordmark are gone: this is the real logo
   file. Its own ground is #FEF5EE - the same cream the page is built on -
   so it drops onto the page with no visible box and needs no keying out.
   Keying it out was the alternative and it would have left cream fringes
   on every anti-aliased edge the moment it sat on the deep footer. */
.brandmark{display:flex;align-items:center;flex:none;line-height:0}
.brandmark picture{display:block;line-height:0}
.brandmark img{
  display:block;width:auto;height:clamp(34px,3.1vw,46px);
  transition:transform .5s var(--ease);
}
.brandmark:hover img{transform:rotate(-2.5deg) scale(1.03)}
.hdr.is-tight .brandmark img{height:clamp(30px,2.5vw,36px)}
/* on the deep band the logo keeps its cream ground, so it is given a plate
   to sit on rather than being asked to float on green */
.unpack .brandmark,.inv .brandmark{
  padding:9px 13px;border-radius:14px;background:#FEF5EE;
  box-shadow:0 8px 22px -14px rgba(0,0,0,.6);
}

.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);margin-right:auto}
.nav>a,.nav>button{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:7px 2px;font-size:14.5px;font-weight:500;color:var(--ink-2);
  transition:color .28s var(--ease);
}
/* the hover state used to draw a copper underline. No underlines: it is a
   soft pill of the brand orange behind the word instead, which reads as a
   target rather than as a rule. */
.nav>a::after,.nav>button::after{
  content:"";position:absolute;left:-11px;right:-11px;top:50%;height:2.1em;
  translate:0 -50%;border-radius:999px;background:rgba(246,160,40,.16);
  transform:scale(.86);opacity:0;z-index:-1;
  transition:transform .34s var(--ease),opacity .28s var(--ease);
}
.nav>a:hover,.nav>button:hover,.nav>button[aria-expanded="true"]{color:var(--ink)}
.nav>a:hover::after,.nav>button:hover::after,.nav>button[aria-expanded="true"]::after{transform:scaleX(1)}
.caret{width:9px;height:9px;transition:transform .3s var(--ease);opacity:.7}
.nav>button[aria-expanded="true"] .caret{transform:rotate(180deg)}

.hdr-acts{display:flex;align-items:center;gap:8px;flex:none}
.icb{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-2);transition:background-color .26s var(--ease),color .26s var(--ease);
}
.icb:hover{background:var(--paper-3);color:var(--ink)}
.icb svg{width:18px;height:18px}
.icb--search{
  display:inline-flex;align-items:center;width:auto;height:38px;
  border-radius:999px;padding:0 13px;gap:9px;
  border:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.icb--search:hover{border-color:var(--rule-2);background:var(--paper-2)}
.kbd{
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px;
  font-size:10.5px;line-height:1.5;color:var(--ink-3);
}
.icb--cart{position:relative}
.cart-pip{
  position:absolute;top:6px;right:6px;transform:translate(11px,-11px);
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;background:var(--copper);color:var(--cream);
  font-family:var(--mono);font-size:10px;line-height:1;
}
.burger{display:none;width:40px;height:40px;place-items:center;border-radius:50%}
.burger:hover{background:var(--paper-3)}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);margin:3px 0}

/* --- §8b MEGA MENU ------------------------------------------------------- */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(16,30,19,.42);
  opacity:0;pointer-events:none;transition:opacity .38s var(--ease);
}
.scrim.is-on{opacity:1;pointer-events:auto}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:85;
  background:var(--paper);
  box-shadow:0 26px 50px -30px rgba(32,48,31,.5);
  opacity:0;visibility:hidden;transform:translateY(-9px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega-in{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.15fr;
  gap:clamp(20px,3vw,54px);
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(26px,3vw,42px) var(--gut) clamp(22px,2.6vw,34px);
}
.mega-col{
  opacity:0;transform:translateY(10px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.mega.is-open .mega-col{opacity:1;transform:none}
.mega.is-open .mega-col:nth-child(2){transition-delay:.05s}
.mega.is-open .mega-col:nth-child(3){transition-delay:.1s}
.mega.is-open .mega-col:nth-child(4){transition-delay:.15s}
.mega-col h3{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
  margin-bottom:13px;
}
.mega-col a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:14.5px;color:var(--ink-2);
  transition:color .24s var(--ease),padding-left .28s var(--ease);
}
.mega-col a:hover{color:var(--ink);padding-left:5px}
.mega-col a small{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.mega-col--food{position:relative}
.mega-food{
  position:relative;display:grid;grid-auto-rows:1fr;gap:1px;
  height:100%;min-height:180px;border-radius:var(--r);overflow:hidden;
  background:var(--rule);border:1px solid var(--rule);
}
/* justify-content has to be restated: .mega-col a sets space-between and
   would otherwise push the name to the far edge, away from its own pack. */
.mega-food a{
  position:relative;display:flex;flex-direction:row;align-items:center;
  justify-content:flex-start;gap:13px;
  padding:8px 13px;
  background:color-mix(in srgb,var(--accent) 8%,var(--paper-2));
  transition:background-color .34s var(--ease);
}
/* .mega-col a:hover nudges links right; the tiles are not a link list */
.mega-food a:hover{
  padding-left:13px;background:color-mix(in srgb,var(--accent) 17%,var(--paper-2));
}
/* a near-square slot, because the range is nine tall jars and one wide box:
   a jar-shaped slot contained Date Bites down to half the height of its
   neighbours. */
.mega-food a img{
  flex:none;width:46px;height:48px;object-fit:contain;object-position:50% 100%;
  transition:transform .45s var(--ease);
}
.mega-food a:hover img{transform:translateY(-2px) scale(1.08)}
.mega-food a span{
  font-family:var(--mono);font-size:10.5px;line-height:1.35;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
/* this bar used to be introduced by a copper hairline across its top. The
   bar is its own tint of the ground now - a change of surface does the same
   separating job a rule was doing, without drawing one. */
.mega-base{position:relative;background:var(--paper-3)}
.mega-base-in{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(16px,3vw,54px);flex-wrap:wrap;
  max-width:var(--maxw);margin-inline:auto;
  padding:13px var(--gut) 15px;
}
.mega-base p{
  margin:0;flex:1 1 auto;font-size:13px;line-height:1.55;color:var(--ink-3);
}

/* --- §8c SIDE MENU ------------------------------------------------------- */
.side{
  position:fixed;top:0;right:0;bottom:0;z-index:92;
  width:min(420px,90vw);background:var(--paper);
  box-shadow:-30px 0 70px -40px rgba(32,48,31,.75);
  transform:translateX(102%);visibility:hidden;
  transition:transform .46s var(--ease),visibility .46s;
  display:flex;flex-direction:column;
}
.side.is-open{transform:none;visibility:visible}
/* the header is z-index 90 and holds the mega panel, so the scrim stays
   under it while the mega is open and rises above it for the drawer. */
body:has(.side.is-open) .scrim{z-index:91}
.side-in{display:flex;flex-direction:column;height:100%;overflow:hidden}
.side-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gut);flex:none;
}
.side-body{flex:1;overflow-y:auto;padding:20px var(--gut) 28px}
.side-body>*{
  opacity:0;transform:translateY(12px);
  transition:opacity .44s var(--ease),transform .44s var(--ease);
}
.side.is-open .side-body>*{opacity:1;transform:none}
.side.is-open .side-body>*:nth-child(2){transition-delay:.05s}
.side.is-open .side-body>*:nth-child(3){transition-delay:.1s}
.side.is-open .side-body>*:nth-child(4){transition-delay:.15s}
.side-search{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:12px 14px;margin-bottom:18px;border:1px solid var(--rule);border-radius:999px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
.side-links{display:block}
.side-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;margin-inline:-14px;border-radius:var(--r);
  font-family:var(--display);font-size:21px;
  transition:padding-left .3s var(--ease),background-color .26s var(--ease)}
.side-links a:hover{background:color-mix(in srgb,var(--copper) 9%,transparent)}
.side-links a:hover{padding-left:6px}
.side-rail{
  margin-top:22px;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;
}
.side-rail a{
  display:flex;flex-direction:row;align-items:center;gap:14px;
  padding:11px 14px;background:var(--paper);
  transition:background-color .34s var(--ease);
}
.side-rail a:hover{background:color-mix(in srgb,var(--accent) 12%,var(--paper-2))}
.side-rail a img{
  flex:none;width:42px;height:64px;object-fit:contain;object-position:50% 100%;
  transition:transform .45s var(--ease);
}
.side-rail a:hover img{transform:translateY(-2px) scale(1.08)}
.side-rail span{
  font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.side-verify{
  margin-top:18px;padding:14px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);display:block;
}
.side-verify b{display:block;font-family:var(--display);font-size:17px;margin-bottom:3px}
.side-verify small{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* --- §9 SEARCH ----------------------------------------------------------- */
.srch{
  position:fixed;inset:0;z-index:95;
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.srch.is-open{opacity:1;visibility:visible}
.srch-in{max-width:820px;margin-inline:auto;padding:clamp(20px,5vh,64px) var(--gut) 64px}
/* a field needs to read as a field. A 2px underline is one way and a
   filled well is the other, and only one of them draws a line. */
.srch-field{
  display:flex;align-items:center;gap:13px;
  padding:15px 20px;border-radius:999px;
  background:color-mix(in srgb,var(--paper-3) 74%,transparent);
  transition:background-color .28s var(--ease),box-shadow .28s var(--ease);
}
.srch-field:focus-within{
  background:var(--paper-3);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--copper) 55%,transparent);
}
.srch-field svg{width:20px;height:20px;flex:none;color:var(--ink-3)}
.srch-field input{
  flex:1;min-width:0;border:0;background:none;font-family:var(--display);
  font-size:clamp(22px,3vw,34px);color:var(--ink);
}
.srch-field input::placeholder{color:var(--ink-3);opacity:.7}
.srch-field input:focus{outline:none}
.srch-close{
  flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-3);
}
.srch-close:hover{background:var(--paper-3);color:var(--ink)}
.srch-body{margin-top:22px}
.srch-grp{margin-bottom:26px}
.srch-grp h4{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
  margin-bottom:8px;
}
.sr{
  display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:var(--r);
  transition:background-color .2s var(--ease);
}
.sr:hover,.sr[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 10%,var(--paper-2))}
.sr-thumb{
  flex:none;width:44px;height:52px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb,var(--accent) 12%,var(--paper-2));
}
.sr-thumb img{width:100%;height:100%;object-fit:contain}
.sr-txt{flex:1;min-width:0;display:grid;gap:2px}
.sr-txt b{font-weight:600;font-size:15px}
.sr-txt small{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.sr-price{font-family:var(--mono);font-size:13.5px;color:var(--ink-2)}
.sr-add{
  flex:none;padding:6px 12px;border:1px solid var(--rule-2);border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.sr-add:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.srch-none,.srch-empty{padding:10px 0;color:var(--ink-2)}
.srch-none b{font-family:var(--display);font-size:19px;font-weight:400}
.srch-foot{
  margin-top:24px;padding:13px 15px;border-radius:var(--r);
  background:color-mix(in srgb,var(--copper) 6%,transparent);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);
}

/* ========================================================================
   §01 BANNER — the opening statement
   ------------------------------------------------------------------------
   Sits above the jar hero and takes the h1. The jar hero keeps everything
   it had and demotes to h2.

   .bnr-plate is a SWAPPABLE LAYER. Right now it is drawn in CSS: a warm
   radial lift off the label ground plus a gold botanical wash. When the
   photographed/generated plate arrives it becomes an <img> inside the same
   box and not one other rule in this file has to change. That is the whole
   reason the background is its own element rather than a background on .bnr.
   ======================================================================== */
.bnr{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(540px,84vh,880px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,5.5vh,76px) 0;
}

/* --- the swappable ground ------------------------------------------------ */
.bnr-plate{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* the glow resolves to the ground before the plate ends, so the banner
       does not meet the section below it on a hard horizontal seam. Stated
       as rgba of the ground colour, not transparent, or the fade greys. */
    linear-gradient(to top,var(--paper) 0%,rgba(254,245,238,0) 12%),
    /* the warm lamp, low and centred, the way the labels are lit. On cream
       this is a wash of the logo orange rather than a light source. */
    radial-gradient(120% 78% at 50% 98%,
      rgba(246,160,40,.20) 0%,
      rgba(246,160,40,.09) 36%,
      rgba(254,245,238,0) 70%),
    /* a second, tighter core so the products sit in light rather than on it */
    radial-gradient(56% 42% at 50% 90%,
      rgba(246,160,40,.16) 0%,rgba(254,245,238,0) 74%),
    /* the corners take the logo green, which stops the cream going to paper
       white at the edges and ties the plate to the mark */
    radial-gradient(132% 118% at 50% 26%,
      rgba(254,245,238,0) 40%,rgba(65,119,67,.13) 100%),
    var(--paper);
}
/* when a real plate lands, it goes here and covers the CSS one */
.bnr-plate img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;
}
/* the readability scrim, inverted with the ground. A generated plate will be
   darker than the CSS one in unpredictable places and the headline is dark
   type now, so the scrim lifts the top of the plate towards the cream instead
   of dropping it towards black. Kept on the plate rather than baked into the
   gradient so a photographic plate gets the same protection. */
.bnr-plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(254,245,238,.80) 0%,
    rgba(254,245,238,.52) 34%,
    rgba(254,245,238,.14) 58%,
    rgba(254,245,238,0) 76%);
}

/* --- the words ---------------------------------------------------------- */
.bnr-in{
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.bnr-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--copper);
}
/* the eyebrow used to be flanked by two gold rules. No dashes: the letter
   spacing and the copper carry it on their own. */
.bnr-display{
  margin-top:clamp(18px,2.4vw,32px);
  font-family:var(--display);font-weight:700;
  font-size:clamp(36px,5.9vw,88px);line-height:.95;letter-spacing:-.034em;
  font-variation-settings:"opsz" 144,"SOFT" 20,"WONK" 1;
  /* balanced rather than broken by hand: the sentence is long and the
     breakpoints between 380 and 1600 are all different shapes */
  max-width:20ch;text-wrap:balance;
}
/* the operative phrase, in the copper italic the jar hero already uses for
   its second line - one device, two headlines */
.bnr-display i{font-style:italic;color:var(--copper)}
.bnr-sub{
  margin-top:clamp(15px,1.7vw,22px);
  font-family:var(--mono);font-size:clamp(12px,.34vw + 11px,14px);
  letter-spacing:.055em;line-height:1.85;color:var(--ink-2);
  max-width:62ch;
}
.bnr-sub b{color:var(--ink);font-weight:500}
.bnr-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(18px,2.2vw,30px)}

/* --- the four products -------------------------------------------------- */
.bnr-shelf{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:clamp(22px,2.6vh,42px) auto 0;
  padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:end;gap:clamp(10px,2vw,40px);
}
.bnr-p{display:flex;flex-direction:column;align-items:center;gap:0}
.bnr-p img{
  display:block;width:100%;height:auto;max-height:clamp(180px,27vh,318px);
  object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 20px 26px rgba(60,44,20,.20))
         drop-shadow(0 4px 8px rgba(60,44,20,.10));
}
/* a shallow arc: the outer two settle, the inner two step forward. Reads as
   a group standing on a surface rather than four cut-outs in a row. */
.bnr-p:nth-child(1) img,.bnr-p:nth-child(4) img{
  max-height:clamp(158px,23.5vh,276px);
  transform:translateY(10px);
}
/* the tin is landscape, so it needs its own ceiling or it dwarfs the jars */
.bnr-p--tin img{max-height:clamp(114px,17vh,200px)}

.bnr-cap{
  margin-top:clamp(10px,1.1vw,15px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
  text-align:center;
}
.bnr-cap b{display:block;color:var(--ink-2);font-weight:500;margin-bottom:3px}

/* --- the proof strip ---------------------------------------------------- */
.bnr-proof{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:clamp(24px,3vh,44px) auto 0;
  padding:clamp(15px,1.7vw,21px) var(--gut);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,20px) clamp(8px,1.2vw,18px);
  list-style:none;
}
.bnr-proof li{
  position:relative;
  flex:1 1 auto;padding-inline:clamp(14px,2.6vw,44px);
  padding-block:8px;border-radius:999px;
  background:rgba(65,119,67,.07);
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
  text-align:center;white-space:nowrap;
}
/* the marks used to be divided by vertical ticks. They are separate pills
   now: the gap does the dividing and nothing is drawn. */

/* --- the opening ---------------------------------------------------------
   Everything else on the page fades in when it is scrolled into view, which
   is no use at all to the one section that is already there when the page
   arrives. So the banner does not wait to be seen: it plays once on load.
   The order is the order you would read it in - eyebrow, headline, the
   sentence, the buttons, then the four packs left to right, then the
   marks - and the lamp under the shelf blooms up through the whole of it,
   which is the thing that makes it read as a set being lit rather than as
   eleven elements fading.

   Every delay is a --d on the element itself, so the transition is written
   once. Gated on .js: if script never runs, nothing was ever hidden. */
.js .bnr-eyebrow,.js .bnr-display,.js .bnr-sub,.js .bnr-cta,
.js .bnr-p,.js .bnr-proof li{opacity:0;translate:0 var(--riseY,20px)}
.js .bnr-plate{opacity:0;scale:1.05}

.js .bnr.is-lit .bnr-plate{
  opacity:1;scale:1;
  transition:opacity 1.2s var(--ease),scale 1.6s var(--ease);
}
.js .bnr.is-lit .bnr-eyebrow,.js .bnr.is-lit .bnr-display,
.js .bnr.is-lit .bnr-sub,.js .bnr.is-lit .bnr-cta,
.js .bnr.is-lit .bnr-p,.js .bnr.is-lit .bnr-proof li{
  opacity:1;translate:none;
  transition:opacity .66s var(--ease) var(--d,0s),
             translate .78s cubic-bezier(.16,.84,.28,1) var(--d,0s);
}
.bnr-eyebrow{--d:.05s;--riseY:10px}
.bnr-display{--d:.13s;--riseY:26px}
.bnr-sub{--d:.29s}
.bnr-cta{--d:.39s}
/* the packs come up as a shelf being loaded, left to right */
.bnr-p{--riseY:36px}
.bnr-p:nth-child(1){--d:.44s}
.bnr-p:nth-child(2){--d:.53s}
.bnr-p:nth-child(3){--d:.62s}
.bnr-p:nth-child(4){--d:.71s}
.bnr-proof li{--riseY:12px}
.bnr-proof li:nth-child(1){--d:.82s}
.bnr-proof li:nth-child(2){--d:.88s}
.bnr-proof li:nth-child(3){--d:.94s}
.bnr-proof li:nth-child(4){--d:1s}

@media (prefers-reduced-motion:reduce){
  .js .bnr-eyebrow,.js .bnr-display,.js .bnr-sub,.js .bnr-cta,
  .js .bnr-p,.js .bnr-proof li,.js .bnr-plate{
    opacity:1;translate:none;scale:none;transition:none;
  }
}

/* ------------------------------------------------------------------------
   the banner owns the top of the page, so the jar hero below it loses the
   opening padding it only had because it used to be first
   ------------------------------------------------------------------------ */
.bnr + .hero{padding-block-start:clamp(46px,7vh,92px)}

/* --- narrow -------------------------------------------------------------- */
@media (max-width:900px){
  .bnr{min-height:0;padding-block-start:clamp(40px,6vh,72px)}
  /* 5.9vw of a 390px phone is 23px, so the display spent the whole of
     mobile sitting on its 36px floor - the one width where the headline
     is the only thing on screen was the width where it was smallest.
     The floor moves up and the vw term is steep enough to reach it. */
  .bnr-display{max-width:15ch;font-size:clamp(38px,10.6vw,56px);
    line-height:.97;letter-spacing:-.03em}
  /* and the standfirst comes off the mono. A batch code belongs in a
     typewriter face; a sentence does not, and at 13px over four ragged
     centred lines it was reading as terminal output rather than as the
     first thing the brand says. */
  .bnr-sub{font-family:var(--body);font-size:15.5px;letter-spacing:0;
    line-height:1.62;max-width:30ch}
  .bnr-sub b{font-weight:600}
  .bnr-eyebrow{font-size:10px;letter-spacing:.16em}
  /* two rows of two: four jars across a phone leaves each one 70px wide and
     the labels - which are the entire argument - stop being readable */
  .bnr-shelf{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,4vw,34px) clamp(14px,4vw,30px)}
  /* the arc's smaller ceiling is a class-plus-pseudo selector, so it beats
     .bnr-p img on specificity and a media query adds none. Left alone it
     made the first jar of each row taller than its neighbour. */
  .bnr-p:nth-child(1) img,.bnr-p:nth-child(4) img{
    transform:none;max-height:min(24vh,198px)}
  .bnr-p img{max-height:min(24vh,198px)}
  .bnr-p--tin img{max-height:min(16vh,138px)}
}
@media (max-width:560px){
  .bnr-proof{gap:9px 0}
  .bnr-proof{gap:8px}
  .bnr-proof li{flex:0 1 auto;padding-inline:13px;font-size:10px;letter-spacing:.09em}
}

/* --- FOOD FILL (shared: mega rail, lens tiles, reels, thumbs) ------------ */
.ff{position:absolute;inset:0;pointer-events:none}
.ff img{
  position:absolute;width:42%;
  filter:drop-shadow(0 6px 12px rgba(22,40,26,.22));
  transition:transform 620ms var(--ease);
}
.ff img:nth-child(1){left: 4%;top:12%;width:46%;transform:rotate(-14deg)}
.ff img:nth-child(2){left:47%;top: 2%;width:40%;transform:rotate( 21deg)}
.ff img:nth-child(3){left:26%;top:33%;width:52%;transform:rotate(  6deg)}
.ff img:nth-child(4){left:-3%;top:51%;width:44%;transform:rotate( 32deg)}
.ff img:nth-child(5){left:54%;top:55%;width:47%;transform:rotate(-25deg)}
.ff img:nth-child(6){left:22%;top:72%;width:38%;transform:rotate( 11deg)}

/* --- §02 HERO — THE MOUNTED SPECIMEN ------------------------------------- */
.hero{
  position:relative;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  padding-block:clamp(26px,4vh,54px) clamp(30px,5vh,64px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto auto;
  column-gap:clamp(24px,4vw,76px);
  align-items:center;
}
.hero .wrap{max-width:none;margin:0;padding:0}
.hero-top{grid-column:1;grid-row:1;align-self:end;padding-bottom:clamp(18px,3vh,34px)}
.hero-foot{grid-column:1;grid-row:2;align-self:start}
.stage{grid-column:2;grid-row:1 / 3}

.hero-eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--copper);
  margin-bottom:clamp(16px,2vw,26px);
}
.hero-display{
  font-family:var(--display);font-weight:700;
  font-size:clamp(40px,6.4vw,96px);line-height:.95;letter-spacing:-.033em;
  font-variation-settings:"opsz" 144,"SOFT" 20,"WONK" 1;
}
.hero-display span{display:block}
.hero-display span i{font-style:normal}
.hero-display span:nth-child(2){padding-left:.7em}
.hero-display span:nth-child(2) i{font-style:italic;color:var(--copper)}
.hero-sub{
  margin-top:clamp(16px,2vw,26px);max-width:44ch;
  color:var(--ink-2);font-size:clamp(15px,.5vw + 13px,17.5px);line-height:1.66;
}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-note{
  flex-basis:100%;margin-top:4px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);
}

/* the stage: a hairline mount circle with the specimen jar on it */
.stage{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(148px,206px);
  align-items:center;gap:clamp(14px,2.2vw,38px);
  min-height:clamp(380px,52vh,600px);
}
/* the mount circle is centred on the jar itself, not on the whole stage */
.jar-turn::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(150%,520px);aspect-ratio:1;z-index:-1;
  transform:translate(-50%,-50%);
  border:1px solid var(--rule);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 8%,transparent),transparent);
}
/* the ghosted shelf jars read as clutter beside the mounted specimen; the
   markup stays so real shelf art can switch it back on */
.stage-wall{display:none}
.wall-jar{position:absolute;opacity:.2;filter:saturate(.5) contrast(.9)}
.wall-jar img{width:100%;height:auto}
.w1{left:-5%;top:3%;width:11%;transform:rotate(-7deg)}
.w2{left:1%;bottom:1%;width:12%;transform:rotate(5deg)}
.w3{left:24%;top:-3%;width:10%;transform:rotate(9deg)}
.w4{right:-2%;bottom:-2%;width:11%;transform:rotate(-5deg);opacity:.6}

.jar-turn{position:relative;justify-self:center;width:min(100%,340px);perspective:1400px}
.jar-3d{
  position:relative;transform-style:preserve-3d;
  transition:transform .95s var(--ease-io);
}
.jar-3d.is-back{transform:rotateY(180deg)}
.jar-3d img{
  width:100%;height:auto;backface-visibility:hidden;
  filter:drop-shadow(0 26px 34px rgba(22,40,26,.24));
}
.jar-3d .back{position:absolute;inset:0;transform:rotateY(180deg)}
/* the scan line reads as a copper rule travelling the specimen, not a gloss */
.jar-spec{
  position:absolute;left:6%;right:6%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--copper),transparent);
  opacity:0;pointer-events:none;
}
.jar-spec.is-run{animation:spec 1.5s var(--ease-io)}
@keyframes spec{
  0%{opacity:0;transform:translateY(4%)}
  18%{opacity:.95}
  82%{opacity:.95}
  100%{opacity:0;transform:translateY(96%)}
}
.jar-flip{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 15px;border:1px solid var(--rule-2);border-radius:999px;
  background:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);
  transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.jar-flip:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.callouts{display:grid;gap:clamp(16px,2.4vh,30px);align-content:center}
.co{
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.co.is-in{opacity:1;transform:none}
.co-line{
  display:block;height:1px;width:100%;background:var(--copper);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .1s;
}
.co.is-in .co-line{transform:scaleX(1)}
.co-val{
  margin-top:9px;font-family:var(--mono);font-weight:500;
  font-size:clamp(21px,2.1vw,30px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.co-lab{margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.co--hit .co-val{position:relative;display:inline-block}
.co--hit .co-val::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.co--hit.is-underscored .co-val::after{transform:scaleX(1)}

/* --- §03 PROOF — four things, and where to check each one ---------------- *
   Not a stat band. Three of the four values are words, not numbers, which is
   the point: the interesting things about this range are a grade, an oil and
   a count of bases. The mono line at the foot of each cell says where on the
   pack the claim above it is printed, so the band argues the brand's thesis
   rather than restating the nutrition panel.                                */
.proof{border-top:0;padding-block:clamp(38px,4.2vw,68px)}
.proof-grid{
  list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(26px,3.2vw,52px);
}
.proof-cell{display:flex;flex-direction:column;align-items:flex-start}
.proof-val{
  font-family:var(--display);font-weight:700;
  font-size:clamp(31px,3.6vw,56px);line-height:.96;letter-spacing:-.032em;
  font-variation-settings:"opsz" 96,"SOFT" 18,"WONK" 1;
  text-wrap:balance;
}
.proof-say{
  margin-top:clamp(12px,1.3vw,20px);max-width:27ch;
  font-size:clamp(14px,.32vw + 13px,16px);line-height:1.62;color:var(--ink-2);
}
/* margin-top:auto floors the citation, so the four sit on one baseline even
   though the sentences above them run to different depths. */
.proof-src{
  margin-top:auto;padding-top:clamp(16px,1.8vw,26px);
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--copper);
}

/* --- §04 SHOP BY --------------------------------------------------------- */
/* this was a rule with a 2px underline sliding along it. The underline was
   the only thing saying which lens is live, so it hands that job to a filled
   pill rather than simply going away. */
.lens-bar{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:clamp(26px,3vw,42px) 0 clamp(20px,2.4vw,32px);
}
.lens-bar button{
  position:relative;padding:10px 17px 11px;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
  transition:color .26s var(--ease),background-color .26s var(--ease);
}
.lens-bar button::after{
  content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  background:var(--ink);transform:scale(.9);opacity:0;
  transition:transform .34s var(--ease),opacity .26s var(--ease);
}
.lens-bar button:hover{color:var(--ink);background:rgba(246,160,40,.14)}
.lens-bar button[aria-selected="true"]{color:var(--paper);background:transparent}
.lens-bar button[aria-selected="true"]::after{transform:none;opacity:1}

.lens-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule)}
.tile{
  display:block;padding:clamp(14px,1.6vw,22px);background:var(--paper);
  transition:background-color .4s var(--ease);
}
.tile:hover{background:color-mix(in srgb,var(--accent) 8%,var(--paper))}
.tile-art{
  position:relative;display:block;aspect-ratio:1;margin-bottom:14px;
  background:color-mix(in srgb,var(--accent) 11%,var(--paper-2));
  border-radius:50%;
}
.tile-ring{
  position:absolute;inset:0;border:1px solid var(--rule-2);border-radius:50%;
  transform:scale(.94);opacity:.75;
  transition:transform .6s var(--ease),opacity .6s var(--ease),border-color .6s var(--ease);
}
.tile:hover .tile-ring{transform:scale(1);opacity:1;border-color:var(--accent)}
.tile-pack{
  position:absolute;left:13%;right:13%;top:10%;bottom:11%;
  transition:transform .6s var(--ease);
}
.tile-pack img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 14px 20px rgba(22,40,26,.22));
}
.tile:hover .tile-pack{transform:translateY(-7px) scale(1.045)}
.tile-name{display:block;font-family:var(--display);font-size:clamp(19px,1.5vw,23px);line-height:1.15}
.tile-meta{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
}

/* --- §05 THE RANGE — FOUR CROPS, FOUR RUNS ------------------------------- *
   Grouped by the plant it is made from. The grouping is the filter, so there
   is no filter bar; and because size and price are constant inside a crop,
   they are stated once in the run header rather than ten times in the cards.
   What is left on a card is a name, the line that tells it from its siblings,
   and the button.                                                           */
.runs{display:grid;gap:clamp(44px,4.6vw,78px);margin-top:clamp(30px,3.4vw,52px)}

.run-head{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(14px,2.2vw,44px);align-items:end;
  margin-bottom:clamp(20px,2.2vw,34px);
}
.run-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.2vw,50px);line-height:.98;letter-spacing:-.03em;
  font-variation-settings:"opsz" 72,"SOFT" 16,"WONK" 1;
}
.run-spec{
  margin-top:9px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--copper);
}
.run-say{
  max-width:48ch;font-size:clamp(14px,.3vw + 13px,16.5px);line-height:1.62;
  color:var(--ink-2);
}
.run-say i{font-style:italic}
/* Twelve columns so every run fills its row exactly: four flavours span 3
   each, three span 4, two span 6, one spans 12. A shorter run gives each pack
   more room, which is information rather than decoration. */
.run-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.2vw,20px);
}
.run--4 .card{grid-column:span 3}
.run--3 .card{grid-column:span 4}
.run--2 .card{grid-column:span 6}
.run--1 .card{grid-column:span 12}

/* §3 of the product master describes the labels as saturated jewel grounds
   with gold hairlines and cream cartouches. The card is that label: the
   flavour's own accent blooms behind its jar, copper holds the edge. */
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:6px;
  background:
    radial-gradient(94% 58% at 50% 2%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--paper-2)),var(--paper-2) 62%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--copper) 22%,transparent);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--copper) 60%,transparent),
    0 24px 42px -20px rgba(0,0,0,.6);
}
.card-stage{position:relative;display:block;overflow:hidden;aspect-ratio:1 / 1.02}
.card-jar{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;width:82%;height:84%;transition:transform .7s var(--ease);
}
/* the range is not one shape: nine tall jars and one wide 250 g box.
   contain keeps each true, and the bottom object-position stands them
   all on the same shelf line. */
.card-jar img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));
}
.card:hover .card-jar{transform:translate(-50%,-53%) scale(1.035)}
/* the pieces already ship with every flavour — hover only moves them */
.card-pieces{position:absolute;inset:0;pointer-events:none}
.card-pieces img{position:absolute;width:20%;opacity:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transition:opacity .5s var(--ease),transform .7s var(--ease)}
.card-pieces img:nth-child(1){left: 6%;top:14%;transform:translate(14px,10px) rotate(-18deg)}
.card-pieces img:nth-child(2){right: 5%;top: 9%;transform:translate(-14px,12px) rotate(22deg)}
.card-pieces img:nth-child(3){left: 2%;bottom:20%;transform:translate(16px,-8px) rotate(9deg)}
.card-pieces img:nth-child(4){right: 3%;bottom:26%;transform:translate(-16px,-8px) rotate(-26deg)}
.card-pieces img:nth-child(5){left:44%;bottom: 6%;transform:translate(0,-12px) rotate(14deg)}
.card:hover .card-pieces img{opacity:1;transform:none}
.card-facts{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;gap:5px;padding:12px 14px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(4px);
  opacity:0;transform:translateY(102%);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.card:hover .card-facts,.card-stage:focus-visible .card-facts{opacity:1;transform:none}
.cf{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.cf i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cf b{font-family:var(--mono);font-weight:500;color:var(--ink)}

.card-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(14px,1.2vw,19px) clamp(13px,1.1vw,18px) clamp(15px,1.3vw,20px);
}
/* h4 sits outside the h1-h3 display rule, so it carries its own type */
.card-name{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.2vw,21px);line-height:1.14;letter-spacing:-.014em;
  font-variation-settings:"opsz" 32,"SOFT" 12,"WONK" 0;
}
/* the title used to underline on hover. Colour does the same work: the whole
   card is the target anyway, so the underline was never the affordance. */
.card-name a{color:inherit;text-decoration:none;transition:color .24s var(--ease)}
.card:hover .card-name a{color:var(--copper)}
/* margin-top:auto floors the chip, so a two-line name and a one-line name
   still put their spec lines on the same baseline across a run. */
.card-chip{
  margin-top:auto;padding-top:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
/* the printed spec line is the touch stand-in for the hover panel */
.card-data{
  display:none;margin-top:11px;padding:10px 12px;border-radius:var(--r);
  background:color-mix(in srgb,var(--copper) 7%,transparent);
  font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--ink-3);
}
/* --- the action row -----------------------------------------------------
   This was one flat sand strip across the bottom of the card with 11px
   left-aligned mono in it, and it read as the footer cell of a table.
   Two things fix that. The price moves onto the card, because the price is
   the question being asked at exactly this point and it was only stated up
   in the run header. And the strip stops being the button: the row is the
   strip, the button is a pill sitting in it.

   The row is lighter than the card rather than darker - raised paper, the
   same device the answers in the last section use - so it separates from
   the jewel ground above it without a line being drawn. */
.card-act{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:clamp(10px,.9vw,13px) clamp(12px,1.1vw,17px)
          clamp(12px,1vw,15px);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
}
.card-price{display:flex;align-items:baseline;gap:7px;font-family:var(--mono)}
.card-price b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.card-price span{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
/* solid ink, cream label, and the flavour’s own accent on the ring rather
   than in the fill - half the ten accents are mid-tones that cannot carry
   11px cream type at 4.5:1, so they glow round the pill instead of under
   the words. The glyph leans in when you point at it. */
.card-add{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);
  transition:background-color .3s var(--ease),box-shadow .36s var(--ease),
             translate .26s var(--ease);
}
.card-add svg{flex:none;transition:transform .36s var(--ease)}
.card-add:hover{
  background:var(--copper);translate:0 -1px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 30%,transparent);
}
.card-add:hover svg{transform:translateY(-1px) rotate(-7deg)}
.card-add:active{translate:0 1px}
/* where the label lands after the jar has flown into the bag */
.card-add.is-done{
  background:var(--green);translate:none;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 26%,transparent);
}
.card-add.is-done svg{transform:none}
@media (max-width:640px){
  /* at two cards across a phone the row is about 150px wide, so the price
     stacks instead of competing with the pill for the same line */
  .card-act{gap:10px;padding:11px 13px 13px}
  .card-price b{font-size:15px}
  .card-add{padding:10px 14px;letter-spacing:.09em}
}

/* Half a row or wider and the portrait card stops working, so it turns on
   its side: the stage takes the left, the copy sits beside it. The two jowar
   puffs and the one 250 g box of Date Bites are the cards wide enough to
   need it. */
.card--wide{
  display:grid;grid-template-columns:minmax(0,52%) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
}
.card--wide .card-stage{
  grid-column:1;grid-row:1 / 3;aspect-ratio:auto;
  min-height:clamp(240px,22vw,330px);
}
.card--wide .card-jar{width:88%;height:86%}
.card--wide .card-jar img{object-position:50% 50%}
/* the wide cards print the panel in the body instead, so the hover overlay
   and the chip it duplicates both come off */
.card--wide .card-facts,.card--wide .card-chip{display:none}
.card--wide .card-body{
  grid-column:2;grid-row:1;justify-content:center;
  padding-block:clamp(20px,2.2vw,34px);
}
.card--wide .card-name{font-size:clamp(21px,1.7vw,30px)}
.card--wide .card-chip{margin-top:12px}
/* The raised-paper ground is right on a narrow card, where the row has to
   separate itself from the name above it and can cross the whole width to
   do it. On a wide card it crosses half, and a fill that stops in the
   middle of a card is a vertical line - the one thing this page does not
   draw. It comes off. The copy column is already its own region beside the
   bleeding jar, so the price and the press simply close it, aligned to the
   name and the facts above them rather than pushed to opposite edges. */
.card--wide .card-act{
  grid-column:2;grid-row:2;
  justify-content:flex-start;gap:clamp(14px,1.6vw,26px);
  background:none;
  padding:clamp(6px,.7vw,12px) clamp(13px,1.1vw,18px) clamp(18px,2vw,30px);
}
/* the four facts a wide card has the room to print. Same data the narrow
   cards keep under the hover panel, which touch devices never reach. */
.card-list{list-style:none;display:grid;gap:9px;margin-top:clamp(14px,1.4vw,22px)}
.card-list li{display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.card-list b{
  flex:none;min-width:5.4em;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:-.015em;color:var(--ink);
}

/* the full-width run has room for the facts in two columns, and the box can
   be bigger than a jar because it is a 250 g box */
.run--1 .card--wide{grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.run--1 .card--wide .card-stage{min-height:clamp(260px,24vw,360px)}
.run--1 .card-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(18px,2.4vw,40px)}
.run--1 .card--wide .card-body{padding-inline:clamp(24px,3vw,54px)}
.run--1 .card--wide .card-act{padding-inline:clamp(24px,3vw,54px)}

/* --- §06 INGREDIENTS ----------------------------------------------------- *
   Brief point 7: the whole section has to be readable in one view, and the
   fifteen-ingredient panel was running it to 1250px. This is a reference
   table, so it takes a tighter band than a statement section does, and the
   standfirst sits beside the headline instead of under it - the headline keeps
   the size point 15 asked for, it just stops pushing the list down the page. */
.ins.sec{padding-block:clamp(44px,4.4vw,74px)}
/* 1.4fr, not 1.1: at 1.1 the headline broke over two lines and gave back most
   of what moving the standfirst had saved. */
.ins .sec-top{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:0 clamp(24px,3.4vw,58px);align-items:end;
}
.ins .sec-top .eyebrow{grid-column:1;grid-row:1}
.ins .sec-top h2{grid-column:1;grid-row:2}
.ins .sec-top .sec-sub{
  grid-column:2;grid-row:2;margin-top:0;max-width:40ch;padding-bottom:.4em;
  font-size:clamp(14.5px,.34vw + 13.5px,16px);
}
.ins-wrap{
  display:grid;grid-template-columns:minmax(200px,266px) minmax(0,1fr);
  gap:clamp(20px,3vw,54px);
  margin-top:clamp(26px,3vw,44px);
}
/* ten flavours in a column, formerly ruled off from each other with a 2px
   accent bar marking the open one. Both go: the rows are separated by their
   own padding and the open row is a filled block in that flavour's accent,
   which says more than a bar did because it carries the colour. */
.ins-picker{display:grid;align-content:start;gap:2px}
.ins-picker button{
  position:relative;display:block;width:100%;text-align:left;
  padding:13px 16px;border-radius:var(--r);
  font-family:var(--display);font-size:clamp(18px,1.5vw,22px);line-height:1.15;
  color:var(--ink-3);
  transition:color .28s var(--ease),padding-left .3s var(--ease),
             background-color .3s var(--ease);
}
.ins-picker button::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);z-index:-1;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  transform:scale(.97);opacity:0;
  transition:transform .42s var(--ease),opacity .3s var(--ease);
}
.ins-picker button:hover{color:var(--ink-2);padding-left:22px;
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ins-picker button[aria-selected="true"]{color:var(--ink);padding-left:22px}
.ins-picker button[aria-selected="true"]::before{transform:none;opacity:1}
.ins-picker small{
  display:block;margin-top:4px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}

/* all four panels share one cell; `hidden` decides which one shows */
.ins-wrap>.ins-panel{grid-area:1 / 2}
/* Two columns and two rows. The circle never reached the bottom of the left
   column, so the flavours of the same base live in the space it left rather
   than adding height under the list. Brief point 7: the panel has to fit one
   view, and a shopper who has just read a list has to be able to buy it. */
.ins-panel{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  grid-template-rows:auto 1fr;
  gap:clamp(16px,2vw,34px) clamp(20px,2.8vw,48px);
  align-items:start;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.ins-panel.is-in{opacity:1;transform:none}
.ins-art{
  grid-column:1;grid-row:1;
  position:relative;aspect-ratio:1;width:100%;max-width:260px;border-radius:50%;
  border:1px solid var(--rule);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 15%,var(--paper-2)),var(--paper-2));
}
.ins-list{grid-column:2;grid-row:1 / -1}
.ins-count{
  position:absolute;right:-2px;bottom:2px;
  width:clamp(48px,4.5vw,64px);height:clamp(48px,4.5vw,64px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:clamp(18px,1.7vw,24px);
}
.ins-list h3{font-size:clamp(24px,2.4vw,34px)}
.ins-lede{margin-top:10px;color:var(--ink-2);max-width:46ch}
/* the rule sits over every row rather than under it, so a column that starts
   in the middle of a list still starts with one. */
.ing{margin-top:clamp(14px,1.4vw,20px)}
/* two columns, not three: brief point 8 removed the leading dash, so the
   number leads the row itself. */
.ing li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:12px;
  padding:11px 13px;border-radius:var(--r);
  break-inside:avoid;
}
.ing .t{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;font-size:clamp(16px,1.3vw,19px)}
.ing .n{
  font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:.08em;color:var(--ink-3);
}
.ing .deva{font-size:.86em;color:var(--ink-3)}
.ing .p{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:right;
}

/* Fifteen spices ran a screen and a half deep. Past seven the list flows into
   two columns - multicol, not grid, because the numbers have to read down one
   column and then down the next, not across. This block has to sit below the
   plain .ing rules above: it overrides them at the same specificity, so order
   is the only thing deciding it. */
.ing--wide{columns:2;column-gap:clamp(22px,2.6vw,46px)}
/* the role stays on the ingredient's own line - stacking it read fine but cost
   26px a row, which is what put the last four spices under the fold */
.ing--wide li{padding:10px 0;gap:10px}
/* ordinary inline flow, not a wrapping flex line. On a flex line the number
   and the name are separate items, so a name that will not fit beside its
   number moves down and leaves the number behind; set inline, the name wraps
   under itself and the number stays in front of it where it belongs. */
.ing--wide .t{
  display:block;
  font-size:clamp(15px,1.08vw,16.5px);line-height:1.32;
}
.ing--wide .n{margin-right:7px;font-size:10px;letter-spacing:.07em}
/* the roast note is a second fact about the bean, not more of its name */
.ing--wide .t small{display:block;margin-top:1px;font-size:.76em}
.ing--wide .p{
  white-space:nowrap;font-size:9.5px;letter-spacing:.07em;
}
/* Read the list, then buy that jar - or the one beside it. Every flavour of
   the base is here with its own price and its own button, because by this
   point in the page a shopper is not choosing between crops any more. The
   flavour whose list is on screen is marked rather than dropped: it is the
   likeliest of the four to be bought. */
.ins-buy{grid-column:1;grid-row:2;align-self:start;margin-top:clamp(16px,1.8vw,26px)}
.ins-buy-lab{
  margin-bottom:8px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--copper);
}
.ivar{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--r);
  transition:padding-left .3s var(--ease),background-color .3s var(--ease);
}
.ivar[aria-current="true"]{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.ivar[aria-current="true"],.ivar:hover{padding-left:18px}
.ivar:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ivar b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.2;letter-spacing:-.012em;
  color:var(--ink);
}
.ivar i{
  display:block;margin-top:3px;font-style:normal;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.ivb{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--copper);
  white-space:nowrap;
}
.ivar:hover .ivb{color:var(--green)}

/* a dotted underline is still an underline. The tint says "there is more
   here" without drawing anything. */
.gloss{
  position:relative;cursor:help;
  padding:.05em .3em;margin-inline:-.3em;border-radius:3px;
  background:color-mix(in srgb,var(--copper) 12%,transparent);
}
.gloss::after{
  content:attr(data-tip);
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:4;
  width:max-content;max-width:260px;
  padding:8px 11px;border-radius:var(--r);
  background:var(--ink);color:var(--cream);
  font-family:var(--body);font-size:12px;line-height:1.45;letter-spacing:0;
  text-transform:none;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.gloss:hover::after,.gloss:focus-visible::after{opacity:1;transform:none}
.ins-foot{
  margin-top:clamp(12px,1.2vw,17px);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-size:12.5px;line-height:1.55;color:var(--ink-3);
}

/* --- §07 VERIFY — THE BATCH READER --------------------------------------- */
.batch-wrap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  margin-top:clamp(26px,3vw,44px);
}
.batch-card{
  background:var(--paper);padding:clamp(20px,2.4vw,34px);
  display:flex;flex-direction:column;gap:16px;
}
.batch-hint{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.batch-input{display:flex;gap:10px}
.batch-input input{
  width:clamp(62px,7vw,86px);aspect-ratio:1;
  border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper-2);color:var(--ink);
  font-family:var(--mono);font-size:clamp(28px,3.4vw,44px);text-align:center;
  text-transform:uppercase;
  transition:border-color .26s var(--ease),background-color .26s var(--ease);
}
.batch-input input:focus{outline:none;border-color:var(--copper);background:var(--paper)}
.batch-egs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.batch-egs .chip,.city-row .chip{
  padding:6px 13px;border:1px solid var(--rule);border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
  transition:background-color .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.batch-egs .chip:hover,.city-row .chip:hover{border-color:var(--rule-2);color:var(--ink-2)}
.city-row .chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.batch-card[data-out]{justify-content:center;background:var(--paper-2)}
.batch-idle{display:grid;gap:12px;justify-items:start;color:var(--ink-3)}
.batch-idle svg{width:34px;height:34px;opacity:.6}
.batch-card dl{display:grid;gap:2px}
.batch-card .batch-row{
  display:grid;grid-template-columns:minmax(90px,124px) minmax(0,1fr);
  gap:14px;padding:11px 12px;border-radius:var(--r);
}
.batch-card dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.batch-card dd{margin:0}
.batch-card .data{font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--ink)}
[data-out].is-scan .data{animation:scan .7s var(--ease) both}
@keyframes scan{
  from{opacity:0;filter:blur(3px);transform:translateY(4px)}
  to{opacity:1;filter:none;transform:none}
}
[data-out].is-scan .batch-row:nth-child(2) .data{animation-delay:.08s}
[data-out].is-scan .batch-row:nth-child(3) .data{animation-delay:.16s}
.batch-note{
  margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--ink-3);
}
.batch-note .link-arrow{display:flex;width:max-content;margin-top:11px}

/* --- §08 REELS — the portrait rail ------------------------------------- */
/* A reel is not a square. It is 9:16, it is one at a time, and you move
   through it with a thumb - so this is a snap track that bleeds off both
   edges rather than a grid of six thumbnails. Three consequences follow:

   - the dock is ALWAYS visible, not revealed on hover. Half the traffic has
     no pointer, and a caption a phone can never see is a caption that does
     not exist.
   - the card nearest the middle lifts. That is the only emphasis in here;
     dimming the neighbours was the other option and on a desktop where five
     cards are in view at once it just makes four fifths of the section look
     broken.
   - there is no play button. These are stills until site/video/manifest.json
     names a clip. A play glyph that does nothing is a lie, so the control
     that exists - .reel-mute - is the one main.js only creates once a real
     video has been wired.                                                  */
.rl{padding-block:var(--sec-y);overflow:hidden}
.rl-top{display:flex;flex-direction:column;align-items:center;text-align:center}
.rl-h{
  margin-top:clamp(12px,1.4vw,18px);
  font-size:clamp(40px,7.6vw,108px);line-height:.9;letter-spacing:-.042em;
  font-variation-settings:"opsz" 144,"SOFT" 22,"WONK" 1;
  text-wrap:balance;max-width:15ch;
}
.rl-h i{font-style:italic;color:var(--copper)}
.rl-top .sec-sub{margin-top:clamp(12px,1.3vw,18px);max-width:44ch}

.rl-stage{position:relative;margin-top:clamp(26px,3.2vw,52px)}

/* the track is full-bleed, but the FIRST card still lines up with the wrap -
   otherwise the section starts at a different left edge from every other one
   on the page. max() collapses to the gutter the moment the viewport is
   narrower than the measure, so no media query is needed for it. */
.rl-rail{
  display:flex;gap:clamp(12px,1.3vw,20px);
  margin:0;padding:16px 0 8px;list-style:none;
  overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:max(var(--gut),(100vw - var(--maxw)) / 2 + var(--gut));
  scroll-padding-inline:max(var(--gut),(100vw - var(--maxw)) / 2 + var(--gut));
}
.rl-rail::-webkit-scrollbar{display:none}

.rl-c{
  position:relative;flex:0 0 auto;isolation:isolate;
  width:clamp(212px,20.5vw,292px);aspect-ratio:9 / 16;
  border-radius:calc(var(--r) + 12px);overflow:hidden;
  scroll-snap-align:center;
  /* warm dark, tinted by the flavour. The old tile mixed the accent into
     --deep, which is the green; six of those on a page whose brief is
     "overall i dont want green" is a green section by another name. */
  background:
    radial-gradient(122% 88% at 26% 6%,
      color-mix(in srgb,var(--accent) 44%,#2C2119),
      color-mix(in srgb,var(--accent) 13%,#191310) 92%);
  box-shadow:0 18px 38px -26px rgba(32,48,31,.75);
  transition:box-shadow .45s var(--ease),translate .45s var(--ease);
}
.rl-c.is-mid{
  translate:0 -10px;
  box-shadow:0 34px 58px -26px rgba(32,48,31,.9);
}

/* --- the art ------------------------------------------------------------- */
.rl-art{position:absolute;inset:0;z-index:0;display:block;
  animation:ken 20s var(--ease-io) infinite alternate;
  transition:scale .8s var(--ease)}
.rl-c:hover .rl-art{scale:1.06}
@keyframes ken{to{transform:scale(1.09) translate3d(-2%,-2%,0)}}
.rl-c video{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover}

/* a jar is a whole object, stood on the floor of the card */
.reel--pack .rl-art{padding:13% 13% 9%}
.reel--pack .rl-art img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 22px 30px rgba(12,8,4,.5));
}
/* .ff scatters six 170px cut-outs across a SQUARE. Stretched to 9:16 the
   pieces drift to the corners and the middle empties, so the scatter keeps
   its square and is centred in the taller card instead. scale/translate are
   used rather than transform because .ff img already owns transform. */
.reel--food .ff{
  top:50%;bottom:auto;height:auto;aspect-ratio:1;
  translate:0 -50%;scale:1.14;
}

.rl-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,7,4,.88) 0%,rgba(10,7,4,.46) 30%,rgba(10,7,4,0) 64%);
}
.rl-tag{
  position:absolute;z-index:2;left:12px;top:12px;
  padding:6px 11px;border-radius:999px;
  background:rgba(254,245,238,.93);color:#20301F;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
}

/* the dock is the link, and it covers the whole card - the caption sits at
   the bottom but the target is 9:16 of thumb */
.rl-dock{
  position:absolute;z-index:2;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  padding:16px 15px 18px;color:#FEF5EE;
}
.rl-cap{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(254,245,238,.74);line-height:1.45;
}
.rl-nm{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rl-nm b{
  font-family:var(--display);font-weight:600;
  font-size:clamp(16px,1.15vw,19.5px);line-height:1.18;letter-spacing:-.014em;
}
.rl-nm i{font-style:normal;flex:none;transition:transform .36s var(--ease)}
.rl-c:hover .rl-nm i{transform:translateX(6px)}
.rl-dock:focus-visible{outline:2px solid #F6A028;outline-offset:-4px;
  border-radius:inherit}

/* --- video, only once a clip is actually wired --------------------------- */
.reel.is-live .rl-shade{
  background:linear-gradient(to top,
    rgba(10,7,4,.88) 0%,rgba(10,7,4,.4) 34%,rgba(10,7,4,0) 62%),
    linear-gradient(to bottom,rgba(10,7,4,.5),transparent 34%);
}
.reel-mute{
  position:absolute;z-index:4;right:11px;top:11px;
  width:36px;height:36px;border-radius:999px;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(10,7,4,.5);color:#FEF5EE;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .26s var(--ease),color .26s var(--ease);
}
.reel-mute svg{width:17px;height:17px}
.reel-mute:hover{background:rgba(10,7,4,.78)}
.reel-mute.is-on{background:var(--orange);color:#20301F}

/* --- the controls -------------------------------------------------------- */
.rl-arw{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:52px;aspect-ratio:1;border-radius:999px;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);color:var(--ink);
  box-shadow:0 14px 32px -14px rgba(32,48,31,.6);
  transition:background-color .26s var(--ease),color .26s var(--ease),
             opacity .26s var(--ease),scale .26s var(--ease);
}
.rl-arw .caret{width:17px;height:17px;opacity:1}
.rl-arw--p{left:clamp(10px,2vw,30px)}
.rl-arw--n{right:clamp(10px,2vw,30px)}
.rl-arw--p .caret{transform:rotate(90deg)}
.rl-arw--n .caret{transform:rotate(-90deg)}
.rl-arw:hover{background:var(--copper);color:var(--paper);scale:1.08}
.rl-arw[disabled]{opacity:0;pointer-events:none}

.rl-foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:18px;margin-top:clamp(16px,1.8vw,26px);
}
.rl-dots{display:flex;align-items:center;gap:7px}
.rl-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 22%,transparent);
  transition:width .36s var(--ease),background-color .3s var(--ease);
}
.rl-dot.is-on{width:28px;background:var(--copper)}
.rl-foot .btn{display:inline-flex;align-items:center;gap:9px}
.rl-foot .btn svg{width:17px;height:17px}


/* --- §10 FIND US --------------------------------------------------------- */
.find-count{
  margin-top:14px;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:var(--ink-3);
}
/* --- §10b THE ONLINE BAND ------------------------------------------------ *
   Point 12. A light strip carrying the places that stock it, evenly spaced,
   with nothing drawn between them. Light because the band is a different kind
   of object from the section around it - and because a supplied logo file
   will have been drawn for a white ground.

   Flex, not a five-column grid: five marks do not divide into three at tablet
   width, and a wrapped row that centres itself looks composed at any width
   where a ragged grid row does not. It also means the band needs almost no
   breakpoints of its own.                                                  */
.shops{
  margin-top:clamp(26px,3vw,42px);
  padding:clamp(19px,1.9vw,27px) clamp(18px,2.4vw,40px);
  border-radius:var(--r);
  background:var(--deep);
}
.shops-lead{
  text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 50%,transparent);
}
.shop-row{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:clamp(16px,2.4vw,40px) clamp(14px,1.6vw,26px);
  margin-top:clamp(14px,1.5vw,21px);
}
/* the marks divide the strip rather than huddling in the middle of it - on
   a logo band the spacing between the marks is the design. Capped, so that a
   wrapped last row of two does not stretch each one over half the page. */
.shop{
  flex:1 1 130px;max-width:248px;
  display:grid;justify-items:center;gap:7px;text-align:center;
}
/* the wordmark that stands in until a real file lands. One size, one weight,
   tight tracking - what makes a row read as marks rather than as a list is
   that every item is set identically. */
.shop-mark{
  display:block;
  font-size:clamp(15px,1.3vw,19px);font-weight:650;
  line-height:1.14;letter-spacing:-.022em;text-wrap:balance;
  color:var(--cream);
}
/* a real mark is sized by height, so five different aspect ratios still sit
   on one optical line instead of five different ones */
.shop-logo{
  display:block;width:auto;height:clamp(19px,1.9vw,26px);
  max-width:100%;object-fit:contain;
}
.shop small{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 44%,transparent);
}

/* Not a sixth marketplace. This is the shop, it is the only thing in the
   group that goes anywhere, and it sits on the page ground rather than in
   the band so the difference is visible before the words are read. */
.shop-direct{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px clamp(16px,2vw,30px);flex-wrap:wrap;
  margin-top:clamp(13px,1.4vw,19px);
  padding:clamp(15px,1.5vw,21px) clamp(16px,1.8vw,26px);
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.shop-direct:hover{border-color:var(--rule-2);background:var(--paper-3)}
.shop-direct b{
  display:block;font-size:clamp(16px,1.35vw,19px);font-weight:600;
  letter-spacing:-.016em;
}
.shop-direct small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
/* the same pill as Follow in the Instagram band: one object, one job */
.shop-direct .go{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;
  transition:background-color .28s var(--ease);
}
.shop-direct:hover .go{background:var(--green)}
.shop-direct .go i{font-style:normal;transition:transform .32s var(--ease)}
.shop-direct:hover .go i{transform:translateX(4px)}

.city-row{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(24px,2.8vw,38px) 0 0}
/* Two lists side by side, not a table. They used to carry a rule over every
   row; that was the last surviving line device and it goes with the rest.
   The rows separate on their own padding and a faint alternating warmth,
   which also survives a filtered list better - a striped run re-stripes
   itself when rows drop out, where a ruled one leaves gaps. */
.stores{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,3.4vw,64px);
  margin-top:clamp(18px,2vw,26px);
}
/* no hover tint: .store is a div, clicking it does nothing, and a row that
   lights up under the cursor says otherwise */
.store{
  display:grid;grid-template-columns:118px minmax(0,1fr) auto;
  align-items:center;gap:16px;
  padding:clamp(13px,1.3vw,17px) 12px;border-radius:var(--r);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.store:nth-of-type(4n+1),.store:nth-of-type(4n+2){
  background:color-mix(in srgb,var(--copper) 5%,transparent)}
.store.is-out{opacity:0;transform:translateY(8px)}
.store .city{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.store .nm{display:block;font-size:15px;font-weight:600;line-height:1.3}
.store .ad{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.store .go{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-3);white-space:nowrap;
}

/* --- §11 ASKS ------------------------------------------------------------ */
/* Three articles, three columns - the two-column grid left the last one
   stranded on a row of its own. Picture, title, the answer, then the way in. */
.asks{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,34px);margin-top:clamp(30px,3.4vw,52px);
}
.ask{
  position:relative;display:flex;flex-direction:column;
  overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);
  transition:border-color .34s var(--ease),background-color .34s var(--ease);
}
.ask:hover{border-color:var(--rule-2);background:color-mix(in srgb,var(--accent) 7%,var(--paper-2))}

/* the picture. A 4:3 frame is the shape a blog preview is read in, and the
   ground is light because the food was cut out on white - on the deep green
   the pieces had nothing to sit against. The tint is the flavour's own
   accent, so each card arrives in the colour of the jar it is about. */
.ask-art{
  position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;
  background:
    radial-gradient(96% 76% at 50% 8%,
      color-mix(in srgb,var(--accent) 30%,var(--deep)),
      color-mix(in srgb,var(--accent) 9%,var(--deep)) 76%);
  /* no rule between picture and text - cream against deep green is already
     the hardest edge on the page, and point 2 wants one line fewer */
}
/* .ff arranges six pieces at six different sizes and angles; the old 38%
   overrode every one of them and flattened the arrangement into equal dots. */
/* .ff is composed to fill a tile edge to edge. In a 4:3 picture frame that
   reads as one blurred close-up: the pieces overlap, and none of the ground
   they are meant to sit on is left. Scaling the whole arrangement pulls every
   piece toward the middle and down to size in one move, so the composition
   survives and the flavour tint comes back around it. */
.ask-art .ff{transform:scale(.66)}
.ask-art .ff img{
  filter:drop-shadow(0 10px 20px rgba(22,40,26,.22));
  /* the base rule only transitions transform, so scale would snap */
  transition:transform 620ms var(--ease),scale 620ms var(--ease);
}
/* scale, not transform: transform would overwrite each piece's rotation and
   snap the whole still life square on hover. */
.ask:hover .ask-art .ff img{scale:1.045}

.ask-body{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(17px,1.5vw,25px) clamp(17px,1.5vw,25px) clamp(15px,1.3vw,21px);
}
.ask-body h3{
  font-size:clamp(19.5px,1.45vw,24px);line-height:1.14;letter-spacing:-.02em;
  font-variation-settings:"opsz" 40,"SOFT" 16,"WONK" 1;
  text-wrap:balance;
  /* one question runs to two lines and the other two do not, which started
     their answers on different lines across the row. Two lines of room for
     all three lines the answers up. */
  min-height:2.28em;
}
/* the whole card is the link; the heading anchor is the one that carries it */
.ask-body h3 a::after{content:"";position:absolute;inset:0}
.ask-body p{margin-top:10px;color:var(--ink-2);font-size:14.5px;line-height:1.62}
/* margin-top:auto pins this to the foot so all three line up whatever the
   answer above it costs */
.ask-go{
  margin-top:auto;padding-top:clamp(14px,1.4vw,20px);
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.ask-go i{font-style:normal;transition:transform .34s var(--ease)}
.ask:hover .ask-go i{transform:translateX(5px)}
/* .hero-note is a 4px caption in the hero; under a row of cards it needs to
   look like the way out of the section, not a stray line touching them */
.asks + .hero-note{margin-top:clamp(26px,2.8vw,44px);font-size:12px}

/* --- §12 KNOW — the reference wall --------------------------------------- *
   The title is centred and at headline size, and the six answers are closed
   until they are asked for. <details>/<summary>, not a button and a div:
   it is closed with no CSS, it is operable with no script, find-in-page
   opens it, and the .acc handler that would otherwise have been reused is
   scoped inside the side drawer and would never have run out here. The JS
   in main.js only adds the height transition on top of all that.         */
.kn-list{
  max-width:min(100%,940px);margin:clamp(30px,3.6vw,56px) auto 0;
  display:flex;flex-direction:column;gap:8px;
}
.kn-i{
  border-radius:calc(var(--r) + 11px);
  background:#FFFCF7;
  box-shadow:0 1px 2px rgba(32,48,31,.05),
             0 12px 26px -20px rgba(32,48,31,.55);
  transition:background-color .3s var(--ease),
             box-shadow .4s var(--ease),
             translate .4s var(--ease);
}
.kn-i:hover{
  translate:0 -2px;
  box-shadow:0 3px 6px rgba(32,48,31,.06),
             0 22px 40px -22px rgba(32,48,31,.6);
}
.kn-i[open]{
  background:#FFFDFA;
  box-shadow:0 4px 9px rgba(32,48,31,.06),
             0 30px 56px -26px rgba(32,48,31,.62);
}
.kn-btn{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(16px,1.6vw,23px) clamp(17px,1.9vw,28px);
  cursor:pointer;list-style:none;text-align:left;
}
.kn-btn::-webkit-details-marker{display:none}
.kn-btn::marker{content:""}
.kn-btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px;
  border-radius:calc(var(--r) + 9px)}
.kn-t{
  font-family:var(--display);font-weight:600;
  font-size:clamp(18.5px,1.65vw,26px);line-height:1.2;letter-spacing:-.019em;
  font-variation-settings:"opsz" 40,"SOFT" 14,"WONK" 1;
  text-wrap:balance;
}
.kn-sign{
  flex:none;display:grid;place-items:center;
  width:clamp(32px,2.7vw,40px);aspect-ratio:1;border-radius:999px;
  background:color-mix(in srgb,var(--copper) 12%,transparent);
  color:var(--copper);
  transition:transform .44s var(--ease),background-color .3s var(--ease),
             color .3s var(--ease);
}
.kn-sign .caret{width:15px;height:15px;opacity:1}
.kn-i[open] .kn-sign{
  transform:rotate(180deg);background:var(--copper);color:var(--paper);
}
/* the panel is the animated box, so it owns the clip and nothing inside it
   carries a margin that could escape the measured height */
.kn-panel{overflow:hidden}
.kn-panel>div{padding:0 clamp(17px,1.9vw,28px) clamp(20px,2.2vw,28px)}
.kn-panel p{
  max-width:64ch;color:var(--ink-2);
  font-size:clamp(15px,.3vw + 14.2px,16.5px);line-height:1.74;
}
.kn-panel p a{
  color:var(--copper);font-weight:500;
  padding:.05em .28em;margin-inline:-.28em;border-radius:3px;
  transition:color .24s var(--ease),background-color .24s var(--ease);
}
.kn-panel p a:hover{background:rgba(246,160,40,.2);color:var(--ink)}


/* --- §8c SIDE-MENU ACCORDION — the shop group inside the drawer ---------- *
   The button already carries an svg.caret, so this rotates that rather than
   printing a second glyph. main.js writes grid-template-rows inline.        */
/* the accordion used to be a stack of ruled rows. It is a stack of cards
   now - each one its own surface, separated by a gap. */
.acc{
  border-radius:calc(var(--r) + 7px);
  background:color-mix(in srgb,var(--paper-2) 74%,transparent);
  transition:background-color .3s var(--ease);
}
.acc + .acc{margin-top:8px}
.acc:hover{background:var(--paper-2)}
.acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;padding:13px 0;
  font-family:var(--display);font-size:21px;line-height:1.25;
  transition:color .26s var(--ease);
}
.acc-btn:hover{color:var(--green)}
.acc-btn .caret{width:14px;height:14px;flex:none;opacity:.6}
.acc-btn[aria-expanded="true"] .caret{transform:rotate(180deg);opacity:1}
.acc-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease);
}
.acc-btn[aria-expanded="true"]+.acc-panel{grid-template-rows:1fr}
.acc-panel>*{overflow:hidden}
.acc-panel a{
  display:block;padding:9px 14px;border-radius:var(--r);
  font-size:14.5px;color:var(--ink-2);
  transition:color .24s var(--ease),background-color .24s var(--ease),
             padding-left .26s var(--ease);
}
.acc-panel a:hover{
  color:var(--ink);padding-left:20px;
  background:color-mix(in srgb,var(--copper) 9%,transparent);
}
.acc-panel>div>a:last-child{margin-bottom:14px}
.acc-panel p{padding-bottom:18px;color:var(--ink-2);font-size:14.5px;max-width:56ch}

/* --- §13 UNPACKING — the second dark band, and the footer ---------------- *
   Geometry here is a contract with main.js: 220vh of scroll, a sticky pin,
   --base / --footOp custom properties, and .uj / .uf carrying NO base
   transform (JS writes their transforms outright).                          */
/* 220vh against a 100svh pin meant roughly a full viewport of ground went
   past nearly empty before the footer began arriving. That empty screen is
   the bug in brief point 6. */
/* 260, not 170. The sequence used to be over by 64% of the scroll, so 109vh
   did the work and 61vh was a dead hold - it went past faster than it could
   be read. Every phase window in main.js widened with this, so the run now
   ends at 88%: roughly 229vh of animation and a shorter hold than before. */
.unpack{position:relative;height:260vh}
.unpack-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;
}
.unpack-stage{position:relative}
/* this was a drawn baseline - a 1px copper rule the jars stood on, wiping in
   from the left. It is a pool of light on the floor instead: same "there is
   ground here" reading, same left-to-right wipe, no line. */
.unpack-base{
  position:absolute;left:var(--gut);right:var(--gut);top:56%;height:16%;
  background:radial-gradient(60% 100% at 50% 0%,
    rgba(246,160,40,.20),rgba(246,160,40,.06) 52%,transparent 78%);
  transform:scaleX(var(--base,0));transform-origin:left;
  filter:blur(2px);
}
.unpack-jars{position:absolute;inset:0}
.uj{position:absolute;bottom:38%;width:11%;height:30%;transform-origin:50% 92%}
.uj img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.42));
}
.unpack-food{position:absolute;inset:0}
.uf{position:absolute;left:0;top:0;width:42px}
.unpack-line{
  position:absolute;left:0;right:0;top:30%;text-align:center;
  padding-inline:var(--gut);
  font-family:var(--display);font-size:clamp(26px,3.6vw,50px);line-height:1.1;
  letter-spacing:-.02em;
}
.unpack-line span{opacity:0;transition:opacity .4s var(--ease)}
.unpack-line span.on{opacity:1}
.unpack-line em{font-style:normal;color:var(--orange);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

.unpack-hits{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.unpack-hits.on{opacity:1;pointer-events:auto}
.uh{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(84px,9vw,140px);height:clamp(84px,9vw,140px);border-radius:50%;
  border:1px solid transparent;
  transition:border-color .34s var(--ease),background-color .34s var(--ease);
}
.uh:hover,.uh:focus-visible{
  border-color:var(--deep-rule);
  background:color-mix(in srgb,var(--accent) 18%,transparent);
}
.uh-lab{
  position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  width:max-content;max-width:220px;padding:8px 12px;border-radius:var(--r);
  background:var(--ink);color:var(--paper);text-align:left;
  opacity:0;transition:opacity .28s var(--ease);pointer-events:none;
}
.uh:hover .uh-lab,.uh:focus-visible .uh-lab{opacity:1}
.uh-lab b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.uh-lab small{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.uh-lab small i{font-style:normal;color:var(--copper)}

.unpack-foot{position:relative;z-index:5;padding-top:clamp(40px,7vh,90px);opacity:1}
.js .unpack-foot{
  opacity:var(--footOp,0);
  transform:translateY(calc((1 - var(--footOp,0)) * 22px));
}
.foot-cols{
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);
  gap:clamp(20px,3vw,52px);
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut) clamp(26px,3vw,44px);
}
.foot-brand .brandmark{margin-bottom:18px;width:max-content}
.foot-brand .wm{color:var(--ink);font-size:12px}
.foot-brand .wm em{font-style:normal;color:var(--orange)}
.foot-brand p{
  font-size:13.5px;line-height:1.6;max-width:34ch;
  color:color-mix(in srgb,var(--ink) 66%,transparent);
}
.foot-social{display:flex;gap:8px;margin-top:16px}
.foot-social a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--deep-rule);color:var(--ink);
  transition:background-color .28s var(--ease),color .28s var(--ease);
}
.foot-social a:hover{background:var(--ink);color:var(--paper)}
.foot-cols h3{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 54%,transparent);
  margin-bottom:12px;
}
.foot-cols li{margin-bottom:2px}
.foot-cols li a{
  display:inline-block;padding:4px 0;font-size:13.5px;
  color:color-mix(in srgb,var(--ink) 78%,transparent);
  transition:color .24s var(--ease),transform .28s var(--ease);
}
.foot-cols li a:hover{color:var(--ink);transform:translateX(3px)}
.foot-legal{
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.4vw,40px);
  align-items:baseline;
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(16px,2vw,26px) var(--gut) clamp(24px,3vh,40px);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:color-mix(in srgb,var(--ink) 52%,transparent);
}
.foot-legal a:hover{color:var(--ink)}
.foot-legal .lic{margin-right:auto}
.foot-legal .lic b{font-weight:500;color:color-mix(in srgb,var(--ink) 78%,transparent)}

/* the still-image stand-in the responsive and reduced-motion blocks turn on */
.unpack-static{display:none;position:relative;overflow:hidden}
.unpack-static .uf{position:absolute}
.unpack-static h2{
  position:absolute;left:0;right:0;top:38%;text-align:center;padding-inline:var(--gut);
  font-family:var(--display);font-size:clamp(24px,5.4vw,40px);line-height:1.1;
}

/* --- MOBILE BAR ---------------------------------------------------------- */
.mob-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  grid-template-columns:repeat(3,1fr);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(10px);box-shadow:0 -12px 30px rgba(32,48,31,.10);
}
.mob-bar a,.mob-bar button{
  display:grid;place-items:center;gap:3px;padding:9px 4px 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);
}
.mob-bar svg{width:18px;height:18px}

/* ===========================================================================
   CATEGORY PAGES — WHERE TO BUY · NUTRITION
   Same specimen sheet, but a document rather than a shop window: a masthead
   with the figures the page is about, then ruled evidence.
   ======================================================================== */

/* --- the second dark band, reused by both pages -------------------------- */
.sec--deep{border-top:0}
/* three overrides used to live here whose only job was to lift type off a
   dark band. The band is sand now, the base rules are already right, and
   the overrides would have painted cream on cream. Only the arrow still
   needs one: raw logo orange is 2.1:1 on this ground and cannot carry a
   word, so it takes the darkened copper that the rest of the page uses. */
.sec--deep .link-arrow{color:var(--copper)}

/* --- PAGE MASTHEAD ------------------------------------------------------- */
/* the bottom padding used to come from the box round the figures. Without
   it the last caption lands on the rule that opens the next section, and the
   masthead reads as that section header rather than as the page title. */
.ph{
  padding-block:clamp(30px,5vw,74px) clamp(34px,4.4vw,66px);
  background:
    linear-gradient(color-mix(in srgb,var(--paper-2) 70%,transparent),transparent);
}
.crumbs{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
}
.crumbs a{color:var(--ink-3);transition:color .26s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs b{font-weight:400;color:var(--ink-2)}

.ph .eyebrow{
  display:block;width:max-content;margin-top:clamp(22px,3vw,40px);
  padding:8px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--copper) 13%,transparent);
}
.ph-display{
  margin-top:clamp(14px,1.6vw,22px);
  font-family:var(--display);font-weight:400;
  font-size:clamp(36px,5.4vw,76px);line-height:1;letter-spacing:-.026em;
  /* 19ch was narrower than the longer of the two authored lines, so the
     where-to-buy title wrapped and stranded one word directly above the
     hard break that was already dividing the sentence. Balanced as well,
     the way every other display title on the site is, so the widths in
     between split evenly instead of dropping the last word. */
  max-width:21ch;text-wrap:balance;
}
.ph-lede{
  margin-top:clamp(18px,2vw,28px);max-width:62ch;
  color:var(--ink-2);font-size:clamp(15.5px,.55vw + 13px,18.5px);line-height:1.62;
}

/* the figures the page is actually about. Four numbers under a lede is the
   proof band's job, and the proof band does it on a gap - so this does too,
   at a smaller size, because a masthead figure ranks under a page heading. */
.ph-figs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,2.8vw,48px);
  margin-top:clamp(28px,3.4vw,50px);
}
.ph-figs dt{
  font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(21px,2.1vw,30px);line-height:1;letter-spacing:-.02em;
}
.ph-figs dd{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3);max-width:20ch}

/* --- WAIT-TIME LANES ----------------------------------------------------- */
/* the marker is the wait itself, because that is the thing being sorted on */
.lane{
  display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);
  gap:0 clamp(18px,3vw,54px);
  padding-top:clamp(26px,3vw,42px);margin-top:clamp(26px,3vw,42px);
}
.lane-when span{
  display:inline-block;padding:7px 13px;
  border:1px solid var(--rule-2);border-radius:999px;
  background:var(--paper);
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  letter-spacing:.05em;color:var(--ink-2);white-space:nowrap;
}
.lane-body h3{font-size:clamp(23px,2.2vw,32px)}
.lane-body>p{margin-top:11px;max-width:56ch;color:var(--ink-2);line-height:1.64}
/* The lane carries the same band of marks as the home page, so one logo
   file dropped into site/img/retail lands on both pages at once. The one
   difference is alignment: the home band centres because it spans the page,
   but a lane is a left-set column of prose and a centred row under a
   left-set paragraph reads as a separate column. */
/* the strip stops where the marks stop, so its length says how many places
   the lane covers instead of leaving cream to the end of the column */
.lane .shops{
  width:fit-content;max-width:100%;
  margin-top:clamp(18px,2vw,26px);
  padding:clamp(16px,1.6vw,22px) clamp(20px,2.2vw,32px);
}
.shops--lane .shop-row{
  justify-content:flex-start;margin-top:0;
  gap:clamp(16px,2.2vw,30px) clamp(28px,4.4vw,72px);
}
/* natural width, not an equal share: two marks in the quick-commerce lane
   should sit next to each other, not divide the strip in half */
.shops--lane .shop{
  flex:0 0 auto;max-width:none;justify-items:start;text-align:left;
}
.lane .shop-direct{margin-top:clamp(11px,1.2vw,16px)}
.lane .city-row{margin-top:clamp(20px,2.4vw,30px)}

/* --- ORDERING DIRECT ----------------------------------------------------- */
.ship{margin-top:clamp(28px,3.4vw,46px)}
.ship-row{
  display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  gap:8px clamp(18px,3vw,54px);align-items:baseline;
  padding:clamp(13px,1.5vw,18px) 13px;border-radius:var(--r);
}
.ship-row:nth-of-type(odd){background:color-mix(in srgb,var(--copper) 5%,transparent)}
.ship-row dt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.ship-row dd{margin:0;max-width:62ch;color:var(--ink-2)}
.ship-row dd b{color:var(--ink);font-weight:600}

.note-block{
  margin-top:clamp(26px,3vw,42px);padding:clamp(20px,2.4vw,32px);
  border-radius:calc(var(--r) + 8px);
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--copper) 13%,transparent) 0%,
      color-mix(in srgb,var(--copper) 0%,transparent) 34%),
    var(--paper-2);
}
.note-block h3{font-size:clamp(20px,1.8vw,26px)}
.note-block p{margin-top:12px;max-width:70ch;color:var(--ink-2)}
.note-block p b{color:var(--ink);font-weight:600}
.note-block .hero-note{margin-top:18px;max-width:none}
.note-block .hero-note a{margin-left:6px}

/* --- TWO-UP CARDS -------------------------------------------------------- */
/* These two were a hairline box with a hairline down the middle of it,
   which survived the pass that took the lines off the site only because
   they were drawn in --deep-rule on a band that was dark at the time.
   The divider was a separator, so it goes; the box was standing in for
   two cards, so it becomes two cards - raised paper and a soft shadow,
   the same device the questions at the foot of the home page use. */
.two-up{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(13px,1.5vw,20px);
  margin-top:clamp(28px,3.4vw,46px);
}
.upcard{
  display:block;padding:clamp(22px,2.6vw,36px);
  border-radius:calc(var(--r) + 11px);
  background:#FFFCF7;
  box-shadow:0 1px 2px rgba(32,48,31,.05),
             0 12px 26px -20px rgba(32,48,31,.55);
  transition:background-color .34s var(--ease),
             box-shadow .4s var(--ease),
             translate .4s var(--ease);
}
.upcard:hover{
  background:#FFFDFA;translate:0 -2px;
  box-shadow:0 3px 6px rgba(32,48,31,.06),
             0 22px 40px -22px rgba(32,48,31,.6);
}
.upcard h3{font-size:clamp(22px,2vw,29px)}
.upcard h3 span{transition:transform .34s var(--ease);display:inline-block}
.upcard:hover h3 span{transform:translateX(6px)}
.upcard p{
  margin-top:12px;max-width:44ch;line-height:1.62;
  color:var(--ink-2);
}

/* --- COVERAGE LEDGER ----------------------------------------------------- */
/* two of ten packs have a full panel here; the list refuses to hide that */
/* an <ol>, so it arrives with the browser's 40px marker indent and its
   rows begin further left than the heading above them. The markers are
   already gone - every row is its own grid - so the indent does nothing
   but break the column edge. */
.cov{
  margin-top:clamp(28px,3.4vw,46px);
  padding:0;list-style:none;
}
.cov-i{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;
  align-items:baseline;gap:16px;
  padding:12px 14px;border-radius:var(--r);
}
.cov-i:nth-of-type(odd){background:color-mix(in srgb,var(--copper) 5%,transparent)}
.cov-n{
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-3);
}
.cov-p{font-size:15.5px;color:var(--ink-3)}
.cov-s{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
/* .cov-i sets no border-style, so the copper edge this named never
   painted - a leftover from the pass that took the lines off. The bold
   name and the copper status already carry the distinction. */
.cov-i[data-full]{background:var(--paper-2)}
.cov-i[data-full] .cov-p{color:var(--ink);font-weight:600}
.cov-i[data-full] .cov-s{color:var(--copper)}

/* --- NUTRITION TABLES ---------------------------------------------------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sec-top + .tscroll{margin-top:clamp(26px,3vw,40px)}
.ntab{
  width:100%;min-width:560px;border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.ntab--one{min-width:0;max-width:560px}
.ntab caption{
  text-align:left;padding-bottom:11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.ntab thead th{
  padding:11px clamp(10px,1.1vw,16px);
  background:var(--paper-2);
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  text-align:right;white-space:nowrap;
}
.ntab thead th:first-child{text-align:left}
.ntab tbody th{
  padding:11px clamp(10px,1.1vw,16px);text-align:left;
  font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ink);
}
.ntab tbody td{
  padding:11px clamp(10px,1.1vw,16px);text-align:right;
  font-family:var(--mono);font-size:13.5px;color:var(--ink-2);white-space:nowrap;
}
.ntab tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--copper) 4.5%,transparent)}
.ntab tbody tr:hover{background:color-mix(in srgb,var(--copper) 5%,transparent)}
/* an indented row is a component of the row above it */
.ntab tbody tr.sub th{
  padding-left:calc(clamp(10px,1.1vw,16px) + 20px);position:relative;
  font-weight:400;color:var(--ink-2);
}
.ntab tbody tr.sub th::before{
  content:"";position:absolute;left:clamp(10px,1.1vw,16px);top:50%;
  width:11px;height:1px;background:var(--rule-2);
}
.ntab tbody tr.sub td{color:var(--ink-3)}
.ntab--part tbody th{font-weight:600}
.ntab--part tbody th a{
  color:var(--copper);
  transition:background-color .24s var(--ease);
  padding:.05em .28em;margin-inline:-.28em;border-radius:3px;
}
.ntab--part tbody th a:hover{background:rgba(246,160,40,.18)}
.ntab--part thead th{text-align:left}
.ntab--part tbody td{text-align:left;white-space:normal;font-size:12.5px;line-height:1.5}
.ntab--part tbody td:first-of-type{white-space:nowrap}

.panelwrap{
  display:grid;grid-template-columns:minmax(190px,272px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:start;
  margin-top:clamp(28px,3.4vw,46px);
}
/* The jar photograph sat in a hairline box with a hairline circle drawn
   behind it. The box was redundant: the plate is already a lighter ground
   than the sand band it sits on, which is the whole raised-paper device
   the rest of the site uses to say "container" without drawing one - so
   it takes the shadow it was missing rather than the border. The circle
   was decoration, and decoration drawn as a line is the one thing this
   page does not do; it becomes the warm glow it was always imitating. */
.panelart{
  position:relative;display:grid;place-items:center;
  padding:clamp(16px,2vw,28px);
  border-radius:calc(var(--r) + 11px);
  background:#FFFCF7;
  box-shadow:0 1px 2px rgba(32,48,31,.05),
             0 12px 26px -20px rgba(32,48,31,.55);
}
.panelart::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(96%,300px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--copper) 14%,transparent) 0%,
    color-mix(in srgb,var(--copper) 6%,transparent) 54%,
    transparent 72%);
}
.panel-jar{position:relative;width:100%;filter:drop-shadow(0 18px 26px rgba(22,40,26,.2))}

.ing-line{
  display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);
  gap:0 clamp(18px,3vw,54px);align-items:start;
  margin-top:clamp(24px,2.8vw,38px);padding-top:clamp(18px,2vw,26px);
}
.ing-line .eyebrow{padding-top:4px}
.ing-line p{max-width:78ch;color:var(--ink-2);line-height:1.68}

/* --- THE ROW-OFFSET CORRECTION — the page's argument --------------------- */
.offset{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,3.4vw,56px);align-items:start;
  margin-top:clamp(30px,3.6vw,50px);
}
/* the table used to be reversed out on the dark band: cream head, cream
   row labels, a darker fill on hover. On sand every one of those is the
   wrong way round, and the light table already reads correctly, so the
   band stops overriding it entirely. */
.ntab--off thead th,
.ntab--off tbody td{text-align:left}
.ntab--off .was{
  color:var(--ink-3);
  text-decoration:line-through;text-decoration-thickness:1px;
}
.ntab--off .is{color:var(--orange)}

.proofs{align-self:start}
.pf{
  margin-top:10px;padding:13px 15px;border-radius:var(--r);
  background:color-mix(in srgb,var(--copper) 7%,transparent);
}
.pf b{
  display:block;font-family:var(--body);font-size:14.5px;font-weight:600;
  color:var(--ink);
}
.pf p{
  margin-top:7px;font-size:14px;line-height:1.62;
  color:var(--ink-2);
}
.proofs .hero-note{margin-top:20px;max-width:44ch;line-height:1.6}

/* the odd last store used to stretch across both columns so the box did not
   end on a hole. There is no box now, and a full-width row among half-width
   rows only opened a gap between the address and the stock count. */


/* --- A NOTE IN PROSE ------------------------------------------------------ */
/* .hero-note is mono because it carries a batch code and a measure. A whole
   sentence set the same way reads as machine output, so prose that qualifies
   what is above it gets the body face and a ground to sit in. It used to
   hang off a 2px rule; the rule is now the fill. */
.pnote{
  margin-top:clamp(18px,2vw,26px);max-width:66ch;
  padding:clamp(13px,1.3vw,17px) clamp(15px,1.5vw,20px);
  border-radius:var(--r);
  background:color-mix(in srgb,var(--copper) 6%,transparent);
  font-size:14px;line-height:1.62;color:var(--ink-2);
}
.pnote b{color:var(--ink);font-weight:600}
.pnote a.link-arrow{display:flex;margin-top:12px}
/* .pnote had a reversed-out copy on the dark band too. Same story. */

/* --- FRONT ROUNDEL AGAINST BACK PANEL ------------------------------------ */
/* three figures, in the order the arithmetic runs: what the badge claims,
   what the jar weighs, what the panel actually says. The copper rule marks
   the one this site publishes. */
.vs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.2vw,58px);
  margin-top:clamp(28px,3.4vw,46px);
}
.vs-i{
  display:flex;flex-direction:column;gap:clamp(9px,1vw,13px);
  padding-top:clamp(15px,1.6vw,21px);
}
/* the published figure is marked rather than boxed: a copper tick over its
   label, longer than the grey ones either side, which is the same 1px copper
   mark the claims block uses further down this page */
/* these were two dashes of different lengths, long meaning "this is the one
   that wins". A filled dot that grows and takes the copper says the same
   thing without a dash on the page. */
.vs-i::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--rule-2);transition:all .3s var(--ease)}
.vs-i[data-win]::before{width:11px;height:11px;background:var(--copper)}
.vs-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.vs-i[data-win] .vs-k{color:var(--copper)}
.vs b{
  font-family:var(--display);font-weight:400;line-height:.94;
  font-size:clamp(36px,3.8vw,54px);letter-spacing:-.015em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.vs-i[data-win] b{color:var(--ink)}
.vs-w{font-size:14px;line-height:1.58;color:var(--ink-2);max-width:30ch}

/* --- CLAIMS WE DO NOT MAKE ----------------------------------------------- */
.dcs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,54px) clamp(32px,4.4vw,80px);
  margin-top:clamp(28px,3.4vw,46px);
}
.dc h3{
  position:relative;padding-left:26px;font-size:clamp(19px,1.6vw,24px);
  color:var(--ink-3);
}
/* struck through, because the point of the block is that we do not say it */
.dc h3::before{
  content:"";position:absolute;left:0;top:.62em;width:16px;height:1px;
  background:var(--copper);
}
.dc p{margin-top:11px;max-width:46ch;color:var(--ink-2);line-height:1.64}

/* --- PAGE RESPONSIVE ----------------------------------------------------- */
@media (max-width:1180px){
  .ph-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offset{grid-template-columns:minmax(0,1fr)}
  .panelwrap{grid-template-columns:minmax(158px,208px) minmax(0,1fr)}
}
@media (max-width:1023px){
  .vs{grid-template-columns:minmax(0,1fr)}
  .lane,.ing-line{grid-template-columns:minmax(0,1fr);gap:14px}
  .lane-when{margin-bottom:2px}
  .ship-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .panelwrap{grid-template-columns:minmax(0,1fr)}
  .panelart{order:2;max-width:320px}
  .two-up{grid-template-columns:minmax(0,1fr)}
  .dcs{grid-template-columns:minmax(0,1fr)}
  .cov-i{grid-template-columns:52px minmax(0,1fr);row-gap:4px}
  .cov-s{grid-column:2}
}
@media (max-width:680px){
  .ph-figs{grid-template-columns:minmax(0,1fr)}
  .ph-display{max-width:none}
  /* the title re-wraps to the narrow measure instead of keeping a break
     authored for a wide one. Both .ph-display strings carry a space before
     their <br> so the sentences do not run together once it is hidden -
     that space is load-bearing, do not tidy it away. */
  .ph-display br{display:none}
}

/* --- ADDENDA ------------------------------------------------------------- */
.skip{
  position:fixed;left:var(--gut);top:10px;z-index:120;
  padding:10px 16px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  transform:translateY(-160%);transition:transform .3s var(--ease);
}
.skip:focus-visible{transform:none}

.tile{transition:opacity 380ms var(--ease),transform 380ms var(--ease),background-color .4s var(--ease)}
.tile:nth-child(2){transition-delay:30ms}
.tile:nth-child(3){transition-delay:60ms}
.tile:nth-child(4){transition-delay:90ms}
.tile:nth-child(5){transition-delay:120ms}
.tile.is-out{opacity:0;transform:translateY(14px)}

/* --- NO-JS FALLBACKS ----------------------------------------------------- */
html:not(.js) .icb--search,
html:not(.js) .burger,
html:not(.js) .jar-flip{display:none}
html:not(.js) .lens-bar,
html:not(.js) .city-row{display:none}
html:not(.js) .unpack-base{transform:none}
html:not(.js) .unpack-line span{opacity:1}
html:not(.js) .rise{opacity:1;transform:none}
html:not(.js) .co,
html:not(.js) .mega-col,
html:not(.js) .side-body>*{opacity:1;transform:none}
html:not(.js) .co-line{transform:scaleX(1)}
html:not(.js) .ins-panel{opacity:1;transform:none}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1180px){
  .mega-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-col--food{display:none}
  .lens-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .callouts{grid-template-columns:none}
  .stage{grid-template-columns:minmax(0,1fr) minmax(140px,178px)}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1 / -1}
}

@media (max-width:1023px){
  .nav,.icb--account{display:none}
  .burger{display:grid}
  .mob-bar{display:grid}
  body{padding-bottom:58px}

  /* the search control spelled out the word SEARCH and offered a "/"
     keyboard shortcut to a device with no keyboard, and the pill cost
     135px of a 350px bar. That is why the wordmark had nothing left to
     sit in and the whole header read as cramped. Search already holds a
     permanent slot in the bottom bar, so up here it goes back to being an
     icon and hands the room it was hoarding to the logo. */
  .icb--search{
    width:40px;height:40px;padding:0;gap:0;border:0;border-radius:50%;
  }
  .icb--search>span{display:none}
  /* the spacer that pushes the actions to the right edge is nav's
     margin-right:auto, and nav is display:none up here - so with the
     search pill collapsed the actions stopped being wide enough to
     reach the edge on their own and bunched in the middle. The auto
     margin moves to the group that is actually still in the bar. */
  .hdr-acts{margin-left:auto}
  .brandmark img{height:42px}
  .hdr.is-tight .brandmark img{height:34px}

  .hero{grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,3vh,34px)}
  .hero-top,.hero-foot{grid-column:1}
  .hero-top{grid-row:1;padding-bottom:0}
  .stage{grid-column:1;grid-row:2;min-height:clamp(320px,46vh,460px)}
  .hero-foot{grid-row:3}
  .stage{grid-template-columns:minmax(0,1fr);gap:18px}
  .callouts{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .w1,.w4{display:none}
  .jar-flip{display:none}

  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .run--4 .card{grid-column:span 6}
  .run--2 .card,.run--1 .card{grid-column:span 12}
  .run-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px}
  .ins-wrap,.batch-wrap{grid-template-columns:minmax(0,1fr)}
  /* three across will not fit, and stacking three tall picture cards buries
     the section. It becomes what it is on a phone: a rail, with the next
     card cut by the edge so a thumb knows to push. */
  .asks{
    grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:min(78vw,330px);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-left:2px;
    padding-bottom:6px;
  }
  .ask{scroll-snap-align:start}
  /* the standfirst goes back under the headline once the column is one wide */
  .ins .sec-top{grid-template-columns:minmax(0,1fr)}
  .ins .sec-top .sec-sub{
    grid-column:1;grid-row:3;padding-bottom:0;margin-top:clamp(16px,1.6vw,26px);
    max-width:52ch;
  }
  .ins-wrap>.ins-panel{grid-area:auto}
  .ins-picker{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;
              -webkit-overflow-scrolling:touch}
  /* rail size, not list size: at the desktop size one name filled the row and
     the rail read as a heading. Small enough that the next name is always cut
     by the edge, which is what tells a thumb there is more along here. */
  /* width:auto, or the desktop width:100% keeps every tab a full rail wide
     and only one is ever on screen */
  .ins-picker button{flex:0 0 auto;width:auto;scroll-snap-align:start;
                     padding:11px 16px;white-space:nowrap;
                     font-size:14.5px;letter-spacing:-.008em}
  .ins-picker button:hover,
  .ins-picker button[aria-selected="true"]{padding-left:16px}
  .ins-picker small{display:none}
  .know-cols{grid-template-columns:minmax(0,1fr)}
  .know-cols>section:first-child,.know-cols>section:last-child{
    grid-template-columns:minmax(0,1fr);gap:0;
  }
  .know-cols>section:first-child p,.know-cols>section:last-child p{
    margin-top:11px;max-width:58ch;
  }
  .stores{grid-template-columns:minmax(0,1fr)}
  .store{grid-template-columns:minmax(0,1fr) auto}
  .store .city{grid-column:1 / -1}

  .lens-grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:45%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .tile{scroll-snap-align:start}
  /* the arrows are a pointer convenience. A thumb already has the gesture,
     and two 52px discs sitting over a 74vw card cover the picture. */
  .rl-arw{display:none}
  .rl-c{width:min(74vw,300px)}

  /* the pinned sequence is replaced by a still — main.js reads this */
  .unpack{height:auto}
  .unpack-pin{position:static;height:auto;display:block}
  .unpack-stage{display:none}
  .unpack-static{display:block;height:62vw;max-height:400px}
}

@media (max-width:680px){
  /* the rail is a 36px crossfade with overflow hidden, so a line that wraps
     loses its second half rather than growing. Two of the three lines run
     past 350px of usable width at this size. Rather than shrink the type
     and throw away the tracking that makes the strip read as a label, the
     lines drop the words that carry no fact: the New flag and the word
     Corporate. Every figure - and the link - survives. */
  .rail-x{display:none}
  .proof-grid{grid-template-columns:minmax(0,1fr)}
  .run-grid>.card{grid-column:span 12}
  .card--wide,.run--1 .card--wide{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
  }
  .card--wide .card-stage{grid-column:1;grid-row:1;aspect-ratio:1 / 1.02;min-height:0}
  .card--wide .card-jar{width:82%;height:84%}
  .card--wide .card-jar img{object-position:50% 100%}
  .card--wide .card-body,.run--1 .card--wide .card-body{
    grid-column:1;grid-row:2;justify-content:flex-start;
    padding-inline:clamp(13px,1.1vw,18px);
  }
  /* stacked, the wide card is one column again, so the row goes back to
     being the full-width foot it is everywhere else: ground restored,
     price out to one edge and the pill to the other. */
  .card--wide .card-act,.run--1 .card--wide .card-act{
    grid-column:1;grid-row:3;justify-content:space-between;
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    padding:11px 13px 13px;
  }
  .run--1 .card-list{grid-template-columns:minmax(0,1fr)}
  .lens-grid{grid-auto-columns:72%}
  /* the band is already a centred wrap; it only needs less air and a
     narrower column so two marks fit a phone row */
  .shops{padding:clamp(18px,4.4vw,24px) 12px}
  .shop{max-width:136px}
  /* read the list, then buy it: the flavours drop below the list on a phone */
  .ins-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .ins-art{grid-column:1;grid-row:1;max-width:230px;margin-inline:auto}
  .ins-list{grid-column:1;grid-row:2}
  .ins-buy{grid-column:1;grid-row:3;margin-top:4px}
  .ing--wide{columns:1}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .batch-card .batch-row{grid-template-columns:minmax(0,1fr)}
  .sec-top{grid-template-columns:minmax(0,1fr);gap:12px}
  .callouts{grid-template-columns:minmax(0,1fr)}
  .hero-display span:nth-child(2){padding-left:0}
  /* a touch taller than 4:3 - on a narrow card the pieces need the room */
  .ask-art{aspect-ratio:5 / 4}
  .rl-foot{justify-content:center;gap:14px}
  .kn-t{font-size:clamp(17px,4.2vw,21px)}
}

@media (hover:none),(pointer:coarse){
  .card-pieces,.card-facts{display:none}
  .card-data{display:block}
  /* the wide cards already print their four facts in the body */
  .card--wide .card-data{display:none}
  .card-add{position:static;transform:none}
}

/* --- REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .unpack{height:auto}
  .unpack-pin{position:static;height:auto;display:block}
  .unpack-stage{display:none}
  .unpack-static{display:block;height:46vh}
  .jar-3d{transform:none!important}
  .jar-3d .back{opacity:0;transform:none}
  .jar-3d.is-back .front{opacity:0}
  .jar-3d.is-back .back{opacity:1}
  .rl-art{animation:none}
  .kn-panel{height:auto!important}
  .rise,.co,.mega-col,.side-body>*,.ins-panel{opacity:1!important;transform:none!important}
  .draw,.co-line{transform:scaleX(1)!important}
  .js .unpack-foot{opacity:1;transform:none}
}

/* --- PRINT --------------------------------------------------------------- */
@media print{
  .rail,.hdr,.mega,.side,.srch,.scrim,.mob-bar,.skip,.rl-stage,.rl-foot,
  .unpack-stage{display:none!important}
  .kn-panel{height:auto!important;overflow:visible}
  body{background:#fff;color:#000}
  .sec{padding-block:18pt}
  .unpack{height:auto;background:#fff;color:#000}
  .unpack-pin{position:static;height:auto}
  .card{break-inside:avoid}
  a[href^="/"]::after{content:" (vediccrunch.com" attr(href) ")";font-size:9pt;color:#555}
}

/* keep last: filters and tab panels are driven by the hidden attribute */
[hidden]{display:none!important}