/* ============================================================================
   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. Was #FEF5EE warm cream, which is the stock "premium
     consumer" paper every brief of this kind reaches for first, and the
     client called the background boring twice. This is the product's own
     colour world instead: the pale sage-bone you get when you desaturate
     the roasted-edamame green toward paper. It reads fresh and leafy
     rather than vintage-parchment, which is what a healthy snack has to
     read as. 13.79:1 against --ink. */
  /* the two deeper rungs were four percent below --paper, which is under the
     threshold at which a band reads as a band at all: the proof panel and the
     ingredients panel were both painted and neither was visible. They step
     properly now, and they step toward green rather than toward warm cream,
     because the direction this page is travelling is the forest footer and
     because green is the half of the colour world that says food. --paper-3
     stays where it was: its whole job is hover feedback under --ink, and the
     deeper it goes the closer --copper gets to the floor. */
  --paper:#F1F3EA; --paper-2:#E3E9D3; --paper-3:#DAE0CB;

  /* 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(19,41,26,.11); --rule-2:rgba(19,41,26,.22);

  /* type is forest green driven down to reading weight, never black and
     never the warm espresso it used to be. Every value below is measured
     against the ground that actually composites under an 11px label, not
     against the token that names it: the page ground is a warm wash at the
     top and a green one at the foot, and the tinted rows sit translucent on
     top of whichever it is. 13.8 / 7.8 / 6.4 on the bare token, and
     11.8 / 6.7 / 5.5 at the strongest point of the wash. */
  --ink:#13291A; --ink-2:#3D4F40; --ink-3:#4C5C4B;

  /* brand, straight off the mark. --copper keeps its name for every
     selector that already asks for it, but it is no longer brass: brass on
     cream was the other half of the default palette. It is the burnt end of
     the logo orange now, 5.7:1 on the ground, so it can still carry small
     type. --orange stays at full strength for fills, where it is a ground
     rather than a letterform. */
  /* --green was set to 4.75:1 on --paper, which left it failing on every
     band it was ever printed on - 4.38 on the proof panel, 3.93 on a hover
     fill - and the deepened rungs above would have pushed it further under.
     Two hover states and the PDP serving note print in it. Darkened to clear
     4.5:1 on the deepest ground in the system; as a fill, at the sizes it is
     filled at, the change is not visible. */
  --green:#2F6633; --copper:#9E4409; --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:#F1F3EA;

  /* the contrast band flips with everything else: on a pale site the band
     that breaks the page is the deep forest one. --deep-rule is therefore a
     light hairline. */
  --deep:#13291A; --deep-2:#0D1F13; --deep-rule:rgba(241,243,234,.16);

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

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

  /* THE FACES. Fraunces carried the display and it had to go: it is the
     one display serif that shows up in every machine-made layout, and the
     client's note that the fonts are generic and do not represent the
     brand is the same observation. Bricolage Grotesque replaces it - a
     grotesque with real quirk in the a, g and R, a width axis that lets a
     headline tighten as it grows, and an optical-size axis so 120px and
     20px are not the same letterform. It goes properly heavy, which is
     what "bigger, bolder headlines" needs. Hanken Grotesk takes the body:
     humanist, warm, and legible at 15px on a phone, which Schibsted was
     not quite. The mono is demoted to real data only - figures, batch
     codes, nutrition - and is off label duty entirely. */
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken 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(22px,3.8vw,56px);
  /* headlines got substantially bigger, so the pause between sections had
     to grow with them or the page reads as one continuous column of large
     type. Still air rather than rules. */
  --sec-y:clamp(60px,5.8vw,108px);
  --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:#DFE7D1; --paper-2:#D4DEBF; --paper-3:#CCD6B8;
  --rule:rgba(19,41,26,.10); --rule-2:rgba(19,41,26,.20);
  --ink:#13291A; --ink-2:#3A4C3D; --ink-3:#495A48;
  --cream:#DFE7D1; --deep:#13291A; --deep-2:#1D3722;
  --deep-rule:rgba(19,41,26,.13);
  /* --green is deliberately NOT overridden here. It used to be #3A6E3D,
     lighter than the root value, on a ground that is darker than the root
     ground - contrast pointed the wrong way down both axes at once. */
  --copper:#93400A; --orange:#B4600A;
  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. */
/* .sec--forest shares every one of these, because the page closes in two
   sections and they should be one field. See the ladder note at §12. */
.unpack,.sec--forest{
  --paper:#13291A; --paper-2:#0D1F13; --paper-3:#1F3D26;
  --rule:rgba(241,243,234,.13); --rule-2:rgba(241,243,234,.26);
  --ink:#F1F3EA; --ink-2:#C3CDBC; --ink-3:#93A48F;
  --cream:#13291A; --deep:#F1F3EA; --deep-2:#DAE0CB;
  --deep-rule:rgba(241,243,234,.16);
  --copper:#F0A74A; --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);
  /* Brief point 10: the background is boring. It was, and not for the reason
     it looks like. The page already had two background effects - three radial
     washes here and three more blurred blobs on a body pseudo-element drifting
     through a 34s loop - and every one of them sat between eight and thirteen
     percent alpha over a cream. At that strength none of them read as colour.
     What did read was the drift, and soft coloured light sliding around behind
     a page is the most recognisable machine-made look on the web. The client's
     other note was that the design feels AI-generated. It was the same note
     twice, so the drifting layer is gone.

     What is left is two fields, turned up to where they are actually visible,
     and scroll attachment instead of fixed. That one word is most of the
     change: fixed sized them to the viewport, so the identical glow sat behind
     every screen on the way down and the page had no top and no bottom.
     Scrolled, they size to the document and are placed once - so the page
     opens warm under the banner, cools through the shelf, and greens as it
     falls into the forest footer. Paper behaves like that. Ambient light
     does not. The two fields are stacked, not crossed, so neither composites
     over the other and the darkest ground any text meets is a known one. */
  background-image:
    radial-gradient(76% 34% at 14% -2%,rgba(246,160,40,.24),transparent 66%),
    linear-gradient(to bottom,transparent 44%,rgba(65,119,67,.055) 70%,
                              rgba(65,119,67,.14));
  background-repeat:no-repeat;
  background-attachment:scroll;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* THE GRAIN. All that is left over the ground: a 160px tile of fractal
   noise multiplied over the cream so it has tooth instead of reading as flat
   #FFF-adjacent paper. It is the one background effect here that is not a
   gradient, which is exactly why it stays - texture is what a food brand's
   paper has and a glow is not. Fixed and pointer-events:none, so the page
   scrolls under it. Body pseudo-elements paint above the propagated canvas
   background and below every element, which is the slot this needs and costs
   no wrapper markup. It is switched off on phones further down: 160px of
   grain is not legible at that size and a blended full-viewport layer is the
   most expensive thing on the page to scroll. */
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>");
}
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 ---------------------------------------------------------- */
/* THE EYEBROW IS NO LONGER A MONO-CAPS CHIP. Brief point 2 killed the
   rule-over-eyebrow masthead and the rule went, but the chip stayed: 11px
   monospace, uppercase, .16em tracked, copper. That is the single most
   machine-made label on the web and there were thirty of them on this
   site. It is a small sans label now - sentence case, real weight, no
   tracking theatre - and it is removed outright from every home-page
   section, which is where the client was looking. The selector survives
   for the inner pages that genuinely need a panel marker. */
.eyebrow{
  font-family:var(--body);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--copper);
}

/* Bricolage Grotesque is variable on three axes and all three have to be
   driven or every size renders at the same letterform. wdth narrows as the
   type grows so a 120px headline sets tight without needing negative
   tracking to rescue it; opsz is pinned near the top for display and left
   low for sub-heads. */
h1,h2,h3{
  font-family:var(--display);font-weight:700;line-height:1.03;
  letter-spacing:-.018em;
  font-variation-settings:"wdth" 94,"opsz" 48;
}
h1{
  font-weight:800;line-height:.94;letter-spacing:-.035em;
  font-variation-settings:"wdth" 86,"opsz" 96;
}
/* POINT 15. Section headlines were clamp(38px,6.4vw,104px) and read as
   captions next to the reference the client sent. The floor moves to 46
   so a phone gets a real headline rather than a large paragraph. The ceiling
   is 118 and not 132: 132 is reserved for .sec-top--mid, because point 9
   asks for the centred About title to read MUCH bigger than a section
   heading, and it cannot do that while sharing the same ceiling. */
.sec-top h2{
  font-size:clamp(44px,6.8vw,118px);font-weight:800;line-height:.92;
  letter-spacing:-.04em;
  font-variation-settings:"wdth" 84,"opsz" 96;
  text-wrap:balance;
}
.sec-sub{
  margin-top:14px;max-width:46ch;color:var(--ink-2);
  font-size:clamp(15.5px,.55vw + 13.5px,18.5px);line-height:1.6;
}
.deva{font-family:var(--deva);font-weight:400}
/* the mono is for figures and codes now, and nothing else */
.data,.kbd,.big-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.big-num{
  font-size:clamp(34px,3.6vw,52px);line-height:1;font-weight:500;
  letter-spacing:-.075em;
}
/* was 11px mono uppercase. Same job, no costume. */
.wm{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:0;
    text-transform:none;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)}
/* Bricolage has no italic on Google Fonts, so font-style:italic would shear a
   fake one out of the upright. Width and the accent carry the emphasis instead,
   the same device .proof-head h2 i and .rl-h i already use. */
.sec-top h2 i{
  font-style:normal;color:var(--copper);
  font-variation-settings:"wdth" 76,"opsz" 96;
}
/* 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}
/* point 9, the one the client has now asked for twice: this title is the
   biggest type on the page, bigger than the hero. 62 is the phone floor -
   below that it sat on one line and read no larger than the headings above
   it; 170 is the desktop ceiling, a full step clear of .sec-top h2's 118.
   Clamp rather than a media query, so there is no step at any width. */
.sec-top--mid h2{
  font-size:clamp(62px,10.4vw,170px);line-height:.9;letter-spacing:-.045em;
  font-variation-settings:"wdth" 80,"opsz" 96;
}

.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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(19,41,26,.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 was #FEF5EE, the cream this page used to be built
   on, and it has been remapped in the asset itself to the new --paper -
   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:#F1F3EA;
  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(--body);font-weight:500;font-size:13px;
  letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;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(19,41,26,.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(--body);font-size:13px;font-weight:500;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;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(--body);font-weight:500;font-size:13px;line-height:1.35;letter-spacing:.004em;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(19,41,26,.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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;line-height:1.35;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;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(--body);font-size:13px;font-weight:500;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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;
  /* was clamp(540px,84vh,880px). vh is the wrong unit on a phone: iOS
     measures it against the viewport WITHOUT the address bar, so the
     banner was 80-something pixels taller than the screen on load and
     then jumped when the bar collapsed. dvh is the live value. The floor
     is stated in svh so the first paint is never taller than what the
     user can actually see. */
  min-height:clamp(520px,92svh,880px);
  min-height:clamp(520px,92dvh,880px);
  display:grid;align-content:center;
  padding-block:clamp(34px,5vh,72px) 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(241,243,234,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(241,243,234,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(241,243,234,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(241,243,234,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(241,243,234,.80) 0%,
    rgba(241,243,234,.52) 34%,
    rgba(241,243,234,.14) 58%,
    rgba(241,243,234,0) 76%);
}

/* --- the words ---------------------------------------------------------- */
/* CENTRED HERO, OUT. A centred stack over a centred shelf over a centred
   proof strip is three centred things in a row and it is the layout every
   generated landing page arrives in. The words now sit on the left of a
   12-column field and the shelf runs under them, which also happens to be
   the only arrangement that reads well on a 360px screen: left-aligned
   text has one ragged edge instead of two. */
.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:flex-start;text-align:left;
}
.bnr-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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. */
/* POINTS 9 AND 15. Was clamp(36px,5.9vw,88px), which on the reference the
   client sent reads as a sub-head. 40 on the floor so a 360px phone still
   gets a statement, 118 on the ceiling, and the width axis pulls in as it
   grows so the long line sets tight without hand-kerning. */
.bnr-display{
  margin-top:clamp(16px,2.2vw,30px);
  font-family:var(--display);font-weight:800;
  font-size:clamp(40px,8.4vw,118px);line-height:.93;letter-spacing:-.042em;
  font-variation-settings:"wdth" 82,"opsz" 96;
  max-width:17ch;text-wrap:balance;
}
/* EMPHASIS STAYS IN THE FAMILY. This was a copper italic, and Bricolage
   ships no italic on Google Fonts, so the browser would have sheared the
   roman into a fake oblique. Weight plus the brand accent does the same
   job and does not borrow a second typeface to do it. */
.bnr-display i{
  font-style:normal;color:var(--copper);
  font-variation-settings:"wdth" 78,"opsz" 96;
}
/* was the monospace face at 11-14px with line-height 1.85 and 62ch of
   measure. A sentence of body copy set in a monospace is the single
   loudest machine-made signal on a page, and 62ch of it at 12px is not
   readable on a phone. Body face, real reading size, 44ch. */
.bnr-sub{
  margin-top:clamp(14px,1.6vw,20px);
  font-family:var(--body);font-weight:400;
  font-size:clamp(15.5px,.5vw + 14px,19px);
  letter-spacing:0;line-height:1.56;color:var(--ink-2);
  max-width:44ch;
}
.bnr-sub b{color:var(--ink);font-weight:500}
.bnr-cta{display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(20px,2.4vw,32px)}

/* --- 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(9px,1vw,14px);
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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 -------------------------------------------------------------- */
/* Three steps on the one scale the whole stylesheet now uses: 1023 for the
   tablet, 767 for the large phone, 639 for the phone. Nothing here reflows
   at a width no other section reflows at, which was the real cause of the
   page feeling broken between sizes. */
@media (max-width:1023px){
  /* the dvh floor stays - the banner is still the first screen - but the
     ceiling comes off so a short landscape phone is not forced to scroll
     the shelf out of reach. */
  .bnr{min-height:clamp(480px,86dvh,760px);padding-block-start:clamp(32px,5vh,60px)}
  .bnr-display{max-width:14ch;font-size:clamp(46px,8vw,78px);letter-spacing:-.036em}
  .bnr-sub{max-width:38ch;font-size:clamp(16px,1.6vw,18px)}
  .bnr-shelf{gap:clamp(8px,1.6vw,22px)}
  .bnr-p img{max-height:min(26vh,240px)}
  .bnr-p:nth-child(1) img,.bnr-p:nth-child(4) img{max-height:min(23vh,214px)}
  .bnr-p--tin img{max-height:min(17vh,156px)}
}
@media (max-width:767px){
  /* THE GRAIN COMES OFF THE PHONE. A fixed, full-viewport layer in
     mix-blend-mode:multiply forces the whole page into a blend group that
     recomposites on every scroll frame, and it buys nothing here: the tile
     is 160px of noise, which at this width is finer than the screen can
     resolve and finer than any thumb-held page needs. The ground underneath
     it is unchanged, so the colour stays and only the cost leaves. */
  body::after{display:none}
  /* the hero still owns the first screen on a phone, which is what the
     reference sites do, but the floor is svh/dvh and there is no ceiling,
     so it grows for the rail instead of clipping it. */
  .bnr{min-height:88svh;min-height:88dvh;
    padding-block:clamp(26px,5vh,44px) 0}
  /* 8.4vw of a 390px phone is 33px, so the display would otherwise spend
     the whole of mobile sitting on its floor - the one width where the
     headline is the only thing on screen was the width where it was
     smallest. The vw term is steep enough here to actually reach up. */
  .bnr-display{max-width:13ch;font-size:clamp(40px,11.4vw,62px);
    line-height:.95;letter-spacing:-.032em}
  .bnr-sub{max-width:34ch;font-size:16.5px;line-height:1.5}
  .bnr-sub b{font-weight:600}
  .bnr-eyebrow{font-size:12.5px}
  .bnr-cta{width:100%;margin-top:22px}
  /* a 44px minimum target and the full line, because this is the one
     thing on the first screen the thumb is meant to hit */
  .bnr-cta .btn{flex:1 1 auto;justify-content:center;min-height:50px}
}
@media (max-width:639px){
  /* FOUR ACROSS WAS THE WORST THING ON THE PHONE. It left each jar about
     70px wide with its label - which is the entire argument - underneath
     at 10px. Two-up was the previous fix and it cost two full rows of
     vertical space on the one screen that has none to spare. So the shelf
     becomes what a shelf actually is on a phone: a rail you push. Each
     jar gets 58% of the viewport, the next one peeks, and scroll-snap
     stops it on centres so it never parks half way. */
  .bnr-shelf{
    display:grid;grid-auto-flow:column;grid-auto-columns:58%;
    grid-template-columns:none;
    gap:14px;align-items:end;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
    padding-inline:var(--gut);
    margin-top:26px;
    /* the rail bleeds to both screen edges so the peek reads as "there is
       more", not as a cropped grid */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .bnr-shelf::-webkit-scrollbar{display:none}
  .bnr-p{scroll-snap-align:center}
  /* the arc is a class-plus-pseudo selector, so it outranks .bnr-p img on
     specificity and a media query adds none of its own. Left alone it made
     the first and last jar of the rail shorter than the rest. */
  .bnr-p img,.bnr-p:nth-child(1) img,.bnr-p:nth-child(4) img{
    max-height:min(30vh,236px);transform:none}
  .bnr-p--tin img{max-height:min(21vh,166px)}
  .bnr-cap{margin-top:11px;font-size:13.5px}
  .bnr-proof{gap:8px}
  .bnr-proof li{flex:0 1 auto;padding-inline:13px;font-size:13px}
}

/* --- 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(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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:"wdth" 84,"opsz" 96;
}
.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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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 — an index of evidence -------------------------------- *
   Brief point 3 called the four-fact band weak and it was. Four equal cells,
   each a big word over a paragraph, with no heading over the section at all:
   a widget, not an argument. Three of the four values are words rather than
   numbers, which was always the good part - the interesting things about this
   range are a grade, an oil and a count of bases, not a calorie - but four
   columns of equal weight said none of them mattered more than the others.

   It is a split now. The claim holds the left and does not move; the four
   things sit in a divided column beside it, read top to bottom like an index,
   and the citation at the foot of each one is a link to the page where that
   panel is transcribed. Rules between the rows, no cards: the band is one
   thing with four entries, not four objects.                                */
.proof{border-top:0;padding-block:clamp(44px,5vw,92px)}
.proof-wrap{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,76px);align-items:start;
}
/* the claim stays put while the four entries scroll past it */
.proof-head{position:sticky;top:clamp(84px,9vh,118px)}
.proof-head h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,4.6vw,76px);line-height:.94;letter-spacing:-.038em;
  font-variation-settings:"wdth" 84,"opsz" 88;
  text-wrap:balance;
}
/* Bricolage has no italic on Google Fonts, so font-style:italic would shear a
   fake one. Width and the accent carry the emphasis instead, the same device
   the banner headline uses. */
.proof-head h2 i{
  font-style:normal;color:var(--copper);
  font-variation-settings:"wdth" 76,"opsz" 96;
}
.proof-lede{
  margin-top:clamp(14px,1.6vw,24px);max-width:36ch;
  font-size:clamp(14.5px,.32vw + 13.5px,17px);line-height:1.64;color:var(--ink-2);
}
.proof-grid{display:grid}
/* The entry is a definition: the fact is the term, the sentence and its
   citation are the definition of it. The rule belongs to the row above the
   row, so the first entry opens on a line and the last one closes on one. */
.proof-cell{
  display:grid;grid-template-columns:minmax(0,7.4em) minmax(0,1fr);
  gap:clamp(14px,2vw,34px);align-items:baseline;
  padding-block:clamp(20px,2.2vw,32px);
  border-top:1px solid var(--rule);
}
.proof-cell:last-child{border-bottom:1px solid var(--rule)}
.proof-val{
  font-family:var(--display);font-weight:700;
  font-size:clamp(23px,2.1vw,33px);line-height:1;letter-spacing:-.03em;
  font-variation-settings:"wdth" 86,"opsz" 56;
  text-wrap:balance;
}
.proof-say{
  margin:0;max-width:46ch;
  font-size:clamp(14px,.32vw + 13px,16.5px);line-height:1.62;color:var(--ink-2);
}
/* the citation used to be a dead caption telling you to go and look. It is
   the link to the transcription now, so it sits on its own line under the
   sentence it is the receipt for. */
.proof-src{
  display:block;width:fit-content;margin-top:9px;
  font-family:var(--body);font-size:13.5px;font-weight:500;
  letter-spacing:.004em;color:var(--copper);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--copper) 34%,transparent);
  transition:color .24s var(--ease),border-color .24s var(--ease);
}
.proof-src:hover{color:var(--ink);border-bottom-color:var(--ink)}
.proof-src span{display:inline-block;transition:transform .3s var(--ease)}
.proof-src:hover span{transform:translateX(3px)}

/* --- §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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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:"wdth" 90,"opsz" 72;
}
.run-spec{
  margin-top:9px;font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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}
/* Every card is the same card, so every card is the same width - four across,
   wrapping, left-aligned. A run of two used to stretch its two cards across
   half a row each and a run of one spread a single card over the full twelve,
   which meant the shelf changed shape four times on the way down and the
   packs were never comparable at a glance. Twelve columns stay because the
   product pages share this grid and set their own span. */
.run-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.2vw,20px);
}
.run-grid>.card{grid-column:span 3}

/* §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)}
.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:"wdth" 96,"opsz" 32;
}
/* 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)}
/* --- 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:12.5px;letter-spacing:.004em;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(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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:639px){
  /* 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}
}

/* --- §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 h2{grid-column:1;grid-row:1}
.ins .sec-top .sec-sub{
  grid-column:2;grid-row:1;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;color:var(--ink-3);
}
.ivb{
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;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}
/* One footnote under all four panels, so it spans the whole wrap and sits
   below whichever panel is open. A rule above it rather than a box: it is an
   aside to the section, and the only thing it needs is to stop looking like
   the last line of the list. */
.ins-foot{
  grid-column:1 / -1;grid-row:2;
  margin-top:clamp(18px,2vw,30px);padding-top:clamp(13px,1.3vw,18px);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  /* it spans both columns now, and 12.5px type across fourteen hundred pixels
     is a measure nobody reads to the end of */
  max-width:84ch;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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:"wdth" 84,"opsz" 96;
  text-wrap:balance;max-width:15ch;
}
/* Bricolage ships no italic here, so font-style:italic would synthesise a
   sheared fake. The emphasis is carried by the family's own width axis and
   the accent instead - same device as .bnr-display i. */
.rl-h i{
  font-style:normal;color:var(--copper);
  font-variation-settings:"wdth" 78,"opsz" 96;
}
.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(19,41,26,.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(19,41,26,.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(241,243,234,.93);color:#13291A;
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.004em;
}

/* 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:#F1F3EA;
}
.rl-cap{
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;color:rgba(241,243,234,.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:#F1F3EA;
  -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:#13291A}

/* --- 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(19,41,26,.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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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);
}
/* No box. The picture already has four hard edges and a radius, so wrapping it
   in a bordered, filled panel was drawing a box inside a box - and the fill was
   what made three article previews read as three pieces of UI. A card earns its
   container when elevation carries hierarchy; nothing here sits above anything
   else, these are three peers. So the pictures sit on the page and the type
   hangs off their left edge, which is how the reference site sets its article
   previews and how a printed contents page sets its own. */
.ask{position:relative;display:flex;flex-direction:column}
/* the whole card is the hit target, so the title is what has to look like a
   link while a pointer is on it. Hover only: a permanently underlined 24px
   display line is noise at this size. */
.ask:hover .ask-body h3{
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--rule-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;
  border-radius:var(--r);
  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}

/* padding-inline:0 - there is no panel to inset the type from any more, so it
   aligns to the picture's own left edge and the column reads as one thing. */
.ask-body{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(15px,1.3vw,21px) 0 0;
}
/* The journal category. Quiet on purpose - it is metadata, so it reads in
   --ink-3 and leaves the arrow at the foot as the only accent in the text
   column. No rule above it: point 2 killed the hairline-over-eyebrow figure
   and a card is not the place to smuggle it back in. */
.ask-k{
  font-family:var(--body);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:clamp(8px,.8vw,12px);
}
.ask-body h3{
  font-size:clamp(19.5px,1.45vw,24px);line-height:1.14;letter-spacing:-.02em;
  font-variation-settings:"wdth" 94,"opsz" 44;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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 */
/* The way out of the section. It was a 12px caption, which for the one link
   that leads to the rest of the journal was too quiet to find. It is the same
   ghost button the social rail ends on, so the two close the same way. */
.ask-foot{margin-top:clamp(26px,2.8vw,44px)}

/* --- §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;
}
/* Six floating cream cards, each with two drop shadows and a 2px lift on
   hover, for six lines of text that open to six paragraphs. Elevation was
   communicating nothing: no answer here sits above another, they are a list.
   So they are a list - hairlines between the rows, the rule belonging to the
   row above so the first opens on a line and the last closes on one, which is
   the same figure the proof band uses at the top of the page. The shadows
   also had to go for a second reason: they were mixed from rgba(19,41,26) to
   sit on cream, and this section is not on cream any more. */
.kn-i{
  border-top:1px solid var(--rule);
  transition:background-color .3s var(--ease);
}
.kn-i:last-child{border-bottom:1px solid var(--rule)}
.kn-i:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.kn-i[open]{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.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}
.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:"wdth" 94,"opsz" 44;
  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: a fixed-height stage in normal
   flow, the --base custom property, and .uj / .uf carrying NO base transform
   (JS writes their transforms outright).

   HISTORY, because it is brief point 6 and it was wrong twice. This band was
   260vh tall with a 100svh sticky pin, and main.js drove the sequence off
   scroll position inside it. Two things followed from that, and they are the
   client's "footer scroll is broken, black screen while scrolling":
     1. while the pin held, scrolling produced no page movement at all, which
        on a near-black section is indistinguishable from a hang;
     2. at progress 0 the stage draws nothing - no ground, no jars, no line -
        so the first screen of it was literally an empty dark rectangle, and
        the footer underneath did not start fading in until 55% of 160vh.
   Widening the phase windows (the 170 -> 260 change) treated the symptom and
   made the scroll tax worse. So the pin is gone. The stage is an ordinary
   block of its own height, the footer sits under it and is always opaque, and
   main.js plays the sequence on its own clock the first time the band comes
   into view. Nobody pays scroll distance to watch it, and there is no state
   in which this section renders empty.                                      */
.unpack{position:relative}
.unpack-pin{position:relative;overflow:clip}
.unpack-stage{position:relative;height:clamp(400px,52vh,600px)}
/* 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(--body);font-weight:500;font-size:13px;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)}
.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(--body);font-size:13px;font-weight:500;letter-spacing:.004em;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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(19,41,26,.10);
}
.mob-bar a,.mob-bar button{
  display:grid;place-items:center;gap:3px;padding:9px 4px 8px;
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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(19,41,26,.05),
             0 12px 26px -20px rgba(19,41,26,.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(19,41,26,.06),
             0 22px 40px -22px rgba(19,41,26,.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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;color:var(--ink-3);
}
.ntab thead th{
  padding:11px clamp(10px,1.1vw,16px);
  background:var(--paper-2);
  font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:.004em;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(19,41,26,.05),
             0 12px 26px -20px rgba(19,41,26,.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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;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:1279px){
  .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:639px){
  .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}
}
/* ==========================================================================
   PRODUCT PAGES
   superyou.in's architecture, our type and our colour. Cat-ed after pages.css
   and before p6.css: every selector below is new and prefixed .pdp-/.pacc-, so
   nothing in p6 can collide with it, and its own media queries are the last
   word on its own classes.
   ========================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- the buy box */
.pdp{padding-block:clamp(18px,2.4vw,34px) clamp(40px,4.6vw,80px)}
.pdp-in{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,3.6vw,68px);align-items:start;
}

/* the image column is the short one, so it is the one that stays. Superyou
   pins their info column because their gallery is a long scrolling list; ours
   is a single square, and pinning the square does the same job for the reader
   - the jar stays in front of you while you read the panel. */
.pdp-media{position:sticky;top:96px}

.pdp-stage{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:calc(var(--r) + 11px);
  background:
    radial-gradient(78% 62% at 50% 6%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--paper-2)),var(--paper-2) 64%);
  box-shadow:0 18px 44px -28px rgba(19,41,26,.42);
}
.pdp-slides{list-style:none;margin:0;padding:0}
.pdp-slide{
  position:absolute;inset:0;display:grid;place-items:center;
  /* the row has to be definite. With an auto row the image's max-height:100%
     is circular, resolves to none, and a 647x1100 pack shot sizes the track
     to 1052px inside a 657px stage. */
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  opacity:0;visibility:hidden;transform:scale(1.025);
  transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s;
}
.pdp-slide.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pdp-jar{
  display:grid;place-items:center;width:100%;height:100%;padding:7%;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
}
/* fill the padded box and letterbox inside it. max-width/max-height would
   have to resolve against a track that is sized by this image, which is the
   circle that put the jar 300px through the floor of the stage. */
.pdp-jar img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 26px 38px rgba(19,41,26,.24));
}

/* the loose pieces, arranged rather than piled. Two different arrangements so
   slide three and slide four are not the same photograph twice. */
.pdp-scatter{position:absolute;inset:0}
.pdp-scatter .ff{position:absolute;inset:0;display:block}
.pdp-scatter .ff img{
  position:absolute;width:30%;height:auto;
  filter:drop-shadow(0 12px 20px rgba(19,41,26,.2));
}
.pdp-scatter--a .ff img:nth-child(1){left:6%;top:9%;width:40%;transform:rotate(-11deg)}
.pdp-scatter--a .ff img:nth-child(2){right:7%;top:15%;width:33%;transform:rotate(9deg)}
.pdp-scatter--a .ff img:nth-child(3){left:30%;top:36%;width:44%;transform:rotate(3deg)}
.pdp-scatter--a .ff img:nth-child(4){left:9%;bottom:11%;width:31%;transform:rotate(14deg)}
.pdp-scatter--a .ff img:nth-child(5){right:11%;bottom:8%;width:36%;transform:rotate(-7deg)}
.pdp-scatter--b .ff img:nth-child(1){left:14%;top:20%;width:46%;transform:rotate(6deg)}
.pdp-scatter--b .ff img:nth-child(2){right:9%;top:11%;width:38%;transform:rotate(-13deg)}
.pdp-scatter--b .ff img:nth-child(3){left:8%;bottom:13%;width:39%;transform:rotate(-4deg)}
.pdp-scatter--b .ff img:nth-child(4){right:12%;bottom:16%;width:43%;transform:rotate(11deg)}

/* the fifth slide is the panel, set large. It is the only slide that is type
   rather than a photograph, and it is the one the argument rests on. */
.pdp-figs{
  display:grid;align-content:center;gap:clamp(14px,2vw,26px);
  width:100%;height:100%;padding:clamp(24px,4vw,52px);
}
.pdp-figs-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,30px)}
.pdp-figs-in span{display:block}
.pdp-figs-in b{
  display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(21px,2.6vw,34px);font-weight:500;line-height:1;color:var(--ink);
}
.pdp-figs-in i{
  display:block;margin-top:7px;font-style:normal;font-size:12.5px;
  line-height:1.35;color:var(--ink-3);
}
.pdp-figs-note{font-size:11.5px;line-height:1.45;color:var(--ink-3);max-width:34ch}

.pdp-arw{
  position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink);
  box-shadow:0 6px 18px -8px rgba(19,41,26,.45);
  opacity:0;transition:opacity .3s var(--ease),background .3s var(--ease);
}
.pdp-arw .caret{width:20px;height:20px}
.pdp-arw--p{left:12px}
.pdp-arw--p .caret{transform:rotate(90deg)}
.pdp-arw--n{right:12px}
.pdp-arw--n .caret{transform:rotate(-90deg)}
.pdp-stage:hover .pdp-arw,.pdp-arw:focus-visible{opacity:1}
.pdp-arw:hover{background:var(--paper)}
.pdp-count{
  position:absolute;right:12px;bottom:12px;margin:0;display:flex;gap:5px;
  padding:6px 11px;border-radius:999px;font-size:11px;letter-spacing:.06em;
  background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink-2);
}
.pdp-count b{font-weight:500;color:var(--ink)}

.pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:11px}
.pdp-th{
  position:relative;aspect-ratio:1;padding:9px;border:0;cursor:pointer;
  border-radius:9px;background:var(--paper-3);overflow:hidden;
  display:grid;place-items:center;grid-template-rows:minmax(0,1fr);
  box-shadow:inset 0 0 0 1.5px transparent;
  transition:box-shadow .28s var(--ease),background .28s var(--ease);
}
.pdp-th img{width:100%;height:100%;object-fit:contain}
.pdp-th-fig{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.01em;
}
.pdp-th:hover{background:var(--paper-3)}
.pdp-th.is-on{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* --------------------------------------------------------- the info column */
.pdp-info-in{display:grid;gap:0}
.pdp-info .crumbs{margin-bottom:clamp(12px,1.4vw,20px)}
.pdp-title{
  margin:9px 0 0;font-size:clamp(33px,4vw,56px);line-height:1.01;
  letter-spacing:-.015em;
}
.pdp-price{display:flex;align-items:baseline;gap:13px;margin-top:clamp(14px,1.6vw,22px)}
.pdp-price b{font-size:clamp(25px,2.4vw,33px);font-weight:500;color:var(--ink)}
.pdp-size{font-size:13px;color:var(--ink-3)}
.pdp-tax{margin:5px 0 0;font-size:12px;color:var(--ink-3)}
.pdp-lede{
  margin:clamp(18px,2vw,28px) 0 0;font-size:clamp(15px,1.1vw,16.5px);
  line-height:1.62;color:var(--ink-2);max-width:46ch;
}
.pdp-lede b{font-weight:600;color:var(--ink)}
.pdp-flav{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:46ch}

.pdp-chips{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
  margin:clamp(20px,2.2vw,30px) 0 0;
}
.pdp-chips>div{background:var(--paper-2);border-radius:10px;padding:14px 16px}
.pdp-chips dt{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;
  font-weight:500;color:var(--ink);line-height:1;
}
.pdp-chips dd{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--ink-3)}

/* the only real variant axis on this range: the flavours inside a family.
   15b says every family is a single-variant product, so there is no size
   selector to build - and every button here is a page that exists. */
.pdp-var{margin-top:clamp(22px,2.4vw,32px)}
.pdp-var-lab{
  margin:0 0 10px;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;color:var(--ink-3);
}
.pdp-var-lab span{text-transform:none;letter-spacing:0;opacity:.72}
.pdp-var-lab span::before{content:"·";margin:0 7px}
.pdp-var-row{display:flex;flex-wrap:wrap;gap:8px}
.pdp-vb{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border-radius:999px;background:var(--paper-2);color:var(--ink-2);
  font-size:13px;line-height:1;text-decoration:none;
  transition:background .26s var(--ease),color .26s var(--ease);
}
.pdp-vb::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
  flex:0 0 auto;
}
a.pdp-vb:hover{background:var(--paper-3);color:var(--ink)}
.pdp-vb.is-on{background:var(--ink);color:var(--cream)}

.pdp-buy{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  margin-top:clamp(20px,2.2vw,30px);
}
.pdp-qty{
  display:flex;align-items:center;gap:2px;height:56px;padding:0 5px;
  border-radius:999px;background:var(--paper-2);
}
.pdp-qty button{
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:none;color:var(--ink-2);font-size:17px;line-height:1;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.pdp-qty button:hover{background:var(--paper-3);color:var(--ink)}
.pdp-qty button[disabled]{opacity:.34;cursor:default}
.pdp-qty output{
  min-width:26px;text-align:center;font-size:15px;font-weight:500;color:var(--ink);
}
.pdp-add{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:56px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--ink);color:var(--cream);
  font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.005em;
  transition:background .3s var(--ease),transform .18s var(--ease);
}
.pdp-add:hover{background:var(--green)}
.pdp-add:active{transform:translateY(1px)}
.pdp-add.is-done{background:var(--green)}
.pdp-add-p{font-weight:500;opacity:.86;font-variant-numeric:tabular-nums}
.pdp-incart{
  margin:10px 0 0;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;color:var(--green);
}

.pdp-reassure{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0;display:grid;gap:7px}
.pdp-reassure li{
  position:relative;padding-left:17px;font-size:12.5px;line-height:1.5;color:var(--ink-3);
}
.pdp-reassure li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 72%,var(--ink-3));
}

/* the accordion. Tinted rows with a gap, not rules - the whole site gave up
   its hairlines and this is the replacement device. */
.pdp-acc{display:grid;gap:6px;margin-top:clamp(22px,2.4vw,32px)}
.pacc{background:var(--paper-2);border-radius:10px;overflow:hidden}
.pacc-h{margin:0;font-family:var(--body);font-size:inherit;font-weight:400}
.pacc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:15px 17px;border:0;cursor:pointer;background:none;
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink);
  text-align:left;letter-spacing:.005em;
}
.pacc-btn .caret{
  width:18px;height:18px;flex:0 0 auto;color:var(--ink-3);
  transition:transform .34s var(--ease);
}
.pacc-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.pacc-panel{display:grid;grid-template-rows:1fr}
.js .pacc-panel{grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.pacc-panel>div{overflow:hidden}
.pacc-panel p{margin:0 0 12px;padding:0 17px;font-size:13px;line-height:1.62;color:var(--ink-2)}
.pacc-panel p:last-child{margin-bottom:16px}
.pdp-panel{font-size:12px;line-height:1.72;letter-spacing:-.005em}

/* ------------------------------------------------------- the rest of the shelf */
.pdp-also{padding-block:clamp(38px,4vw,68px)}
.pdp-also-row{margin-top:clamp(22px,2.4vw,34px)}
.pdp-also-row>.card{grid-column:span 3}

/* ---------------------------------------------------------------- the strips */
.pdp-strip{padding-block:clamp(52px,6vw,104px);background:var(--deep);color:var(--cream)}
.pdp-strip--deep{
  background:
    radial-gradient(64% 120% at 12% 0%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 68%),
    var(--deep);
}
.pdp-strip:not(.pdp-strip--deep){
  background:
    radial-gradient(70% 130% at 88% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
    var(--paper-3);
  color:var(--ink);
}
.pdp-strip-l{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(31px,4.6vw,68px);line-height:1.02;letter-spacing:-.018em;
  max-width:15ch;
}
.pdp-strip-s{margin:16px 0 0;font-size:14px;line-height:1.55;max-width:34ch;opacity:.74}
/* the sentence sat alone across a full-bleed band and left the right half
   of it empty. superyou put photography there. The line already names
   something we own a picture of, so that is what goes in: the printed
   panel beside the claim printed on it, the loose pieces beside the line
   about eating them. */
.pdp-strip>.wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.76fr);
  gap:clamp(24px,4vw,72px);align-items:center;
}
.pdp-strip-l{max-width:none}
.pdp-strip-art{
  position:relative;aspect-ratio:1;width:min(100%,400px);justify-self:end;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
}
/* the ground under the art, so a cut-out with a soft edge has something
   to sit on rather than floating on the band */
.pdp-strip-art::before{
  content:"";position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent 76%);
}
.pdp-strip-art--pack img{
  position:relative;width:100%;height:100%;object-fit:contain;
  transform:rotate(-5deg);
  filter:drop-shadow(0 26px 40px rgba(12,22,12,.42));
}
.pdp-strip-art--ff .ff img{filter:drop-shadow(0 10px 18px rgba(12,22,12,.34))}


/* -------------------------------------------------- the certification row */
.pdp-cert{padding-block:clamp(30px,3.4vw,52px);background:var(--paper-2)}
.pdp-cert-row{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,26px);
}
.pdp-cert-row li{display:grid;gap:6px;align-content:start}
.pdp-cert-row b{
  font-variant-numeric:tabular-nums;font-size:clamp(14px,1.3vw,18px);font-weight:500;
  line-height:1.1;color:var(--ink);
}
.pdp-cert-row span{font-size:11.5px;line-height:1.4;color:var(--ink-3)}

/* --------------------------------------------------- read it from the pack */
.pdp-voice-row{
  display:flex;gap:14px;margin-top:clamp(26px,3vw,44px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pdp-voice-row::-webkit-scrollbar{display:none}
.pdp-vc{
  flex:0 0 clamp(240px,26vw,320px);scroll-snap-align:start;
  background:var(--paper-2);border-radius:12px;padding:clamp(20px,2vw,28px);
  display:grid;align-content:space-between;gap:20px;min-height:190px;
}
.pdp-vc p{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(17px,1.5vw,21px);line-height:1.22;color:var(--ink);
  letter-spacing:-.01em;
}
.pdp-vc footer{
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;color:var(--ink-3);
}

/* --------------------------------------------------------- the advantage row */
.pdp-adv-row{
  list-style:none;margin:clamp(26px,3vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  counter-reset:adv;
}
.pdp-adv-row li{
  background:var(--paper);border-radius:12px;padding:clamp(20px,2vw,26px);
  display:grid;align-content:start;gap:9px;
  box-shadow:0 14px 30px -24px rgba(19,41,26,.5);
}
.pdp-adv-row b{
  font-variant-numeric:tabular-nums;font-size:clamp(19px,1.9vw,26px);font-weight:500;
  line-height:1;color:var(--ink);
}
.pdp-adv-row span{font-size:12.5px;line-height:1.45;color:var(--ink-3)}

/* ------------------------------------------------------------- the marquee */
.pdp-marq{overflow:hidden;background:var(--ink);color:var(--cream);padding-block:15px}
.pdp-marq-t{display:flex;width:max-content;animation:pdpmarq 38s linear infinite}
.pdp-marq-g{display:flex;align-items:center;gap:26px;padding-right:26px}
.pdp-marq-g span{
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  white-space:nowrap;
}
.pdp-marq-g i{font-style:normal;font-size:10px;opacity:.5;color:var(--orange)}
@keyframes pdpmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----------------------------------------------------------------- the FAQ */
.pdp-faq-list{display:grid;gap:6px;margin-top:clamp(24px,2.6vw,38px);max-width:78ch}
.pdp-q{background:var(--paper-2);border-radius:10px;overflow:hidden}
.pdp-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:600;color:var(--ink);
}
.pdp-q summary::-webkit-details-marker{display:none}
.pdp-q summary .caret{
  width:18px;height:18px;flex:0 0 auto;color:var(--ink-3);
  transition:transform .34s var(--ease);
}
.pdp-q[open] summary .caret{transform:rotate(180deg)}
.pdp-a p{margin:0;padding:0 20px 19px;font-size:13.5px;line-height:1.66;color:var(--ink-2);max-width:70ch}
.pdp-a a{color:var(--copper)}

/* ------------------------------------------------------- know more about X */
.pdp-know-body{max-width:70ch;margin:clamp(24px,3vw,42px) auto 0}
.pdp-know-body h3{
  margin:clamp(26px,2.6vw,38px) 0 10px;font-size:clamp(20px,1.8vw,26px);
  line-height:1.12;letter-spacing:-.012em;
}
.pdp-know-body h3:first-child{margin-top:0}
.pdp-know-body p{margin:0 0 12px;font-size:14.5px;line-height:1.72;color:var(--ink-2)}

/* ------------------------------------------------------------------ mobile */
@media (max-width:1023px){
  .pdp-also-row>.card{grid-column:span 6}
  .pdp-cert-row{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .pdp-adv-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  /* stacked, the art reads as a second beat under the line rather than a
     column beside it, so it comes down to a band the width of the text */
  .pdp-strip>.wrap{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,34px)}
  .pdp-strip-art{justify-self:start;width:min(74%,300px)}
  .pdp-in{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,38px)}
  .pdp-media{position:static}
  .pdp-info .crumbs{margin-bottom:14px}
  .pdp-arw{opacity:1;width:38px;height:38px}
}
@media (max-width:639px){
  .pdp{padding-block:14px clamp(32px,6vw,52px)}
  .pdp-thumbs{grid-template-columns:repeat(5,1fr);gap:7px}
  .pdp-th{padding:6px;border-radius:7px}
  .pdp-cert-row{grid-template-columns:repeat(2,1fr)}
  .pdp-adv-row{grid-template-columns:1fr 1fr}
  .pdp-adv-row li:last-child{grid-column:1/-1}
  .pdp-figs-in{grid-template-columns:1fr 1fr;gap:14px}
  /* the price is the widest thing in the row and the button is the thing
     being pressed, so on a phone the stepper gives the button the full line
     rather than sharing it. */
  .pdp-buy{grid-template-columns:minmax(0,1fr);gap:9px}
  .pdp-qty{justify-content:space-between;height:50px}
  .pdp-add{height:52px}
  .pdp-voice-row{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .pdp-vc{flex-basis:76vw}
}

@media (prefers-reduced-motion:reduce){
  .pdp-marq-t{animation:none}
  .pdp-marq{overflow-x:auto}
  .pdp-slide{transition:opacity .01s}
}

/* --------------------------------------------------------------- without js */
/* the file says the page is complete with main.js removed, and that has to
   hold here too: the slider becomes the stacked list it already is on a
   phone, and every panel is simply open. */
html:not(.js) .pdp-stage{aspect-ratio:auto}
html:not(.js) .pdp-slides{display:grid;gap:10px}
html:not(.js) .pdp-slide{
  position:relative;aspect-ratio:1;opacity:1;visibility:visible;transform:none;
}
html:not(.js) .pdp-arw,
html:not(.js) .pdp-count,
html:not(.js) .pdp-thumbs{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(--body);font-weight:500;font-size:13px;letter-spacing:.004em;
  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:1279px){
  .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}

  /* the split closes up: the claim sits over its own index */
  .proof-wrap{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,34px)}
  .proof-head{position:static}

  .run-grid>.card{grid-column:span 6}
  .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-inline:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* A rail has to reach both edges of the screen or it is not a rail. Inside
       the wrap this was a scroll box inset by a gutter on both sides, so the
       card meant to be cut by the edge of the phone was cut by a margin
       instead and the swipe had no invitation. Cancel the wrap's gutter with a
       negative margin and pay it straight back as padding: the rail scrolls
       edge to edge while the first card still lines up with every other left
       edge on the page. Below this breakpoint the viewport is narrower than
       --maxw, so the wrap's inline padding is exactly --gut and this cancels
       to zero. Same figure .rl-rail uses, reached a different way because that
       one is not inside a wrap and this one is. */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    padding-bottom:6px;
  }
  .asks::-webkit-scrollbar{display:none}
  .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;
    /* the two pieces this was missing, which .rl-rail and .asks both have: no
       native bar under four tabs, and a swipe that runs out at the end of the
       rail rather than dragging the page sideways with it. */
    overscroll-behavior-inline:contain;scrollbar-width:none;
    /* and it reaches both edges of the screen. It sits in a .wrap, so it was
       inset by a gutter at each end and the fourth tab was cut by a margin
       instead of by the phone - which is the thing that tells a thumb to
       swipe. Cancel the wrap's gutter, pay it back as padding: below 1024 the
       viewport is narrower than --maxw, so the wrap's inline padding is
       exactly --gut and this cancels to zero. Same figure as .asks. */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);scroll-padding-inline:var(--gut);
  }
  .ins-picker::-webkit-scrollbar{display:none}
  /* 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;
    overscroll-behavior-inline:contain;scrollbar-width:none;
    scroll-padding-inline:0;
  }
  .lens-grid::-webkit-scrollbar{display:none}
  .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 sequence is replaced by a still - main.js reads this */
  .unpack-stage{display:none}
  .unpack-static{display:block;height:62vw;max-height:400px}
}

/* --- 768 down: the ingredient panel stacks ------------------------------
   Between 640 and 1023 the wrap was already one column but the panel was
   still art-left / list-right, so the list held about .65 of the width: on a
   744px tablet that is two ingredient columns of two hundred pixels, and
   "Indian Bay Leaves" does not fit two hundred pixels beside a role note.
   Stacking the panel hands the list the full width, so the two columns are
   three hundred and fifty each and the fifteen-item list still reads. The
   phone block below then takes over where stacking alone is not enough. */
@media (max-width:767px){
  .ins-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .ins-art{grid-column:1;grid-row:1;max-width:210px;margin-inline:auto}
  .ins-list{grid-column:1;grid-row:2}
  .ins-buy{grid-column:1;grid-row:3;margin-top:4px}
  /* the panels auto-place once the wrap is one column, so row 2 belongs to
     whichever panel is open and the footnote cannot be pinned to it. It is
     last in the source, so letting it place itself puts it under the panel. */
  .ins-foot{grid-row:auto}
}

@media (max-width:639px){
  /* --- the rhythm between sections -------------------------------------
     --sec-y is clamp(60px,5.8vw,108px), and 5.8vw of a 390px phone is 23,
     so every section on a phone sits on the 60px floor - which means 120px
     of air between any two of them, and eight sections paying it, and 960
     pixels of a phone page that is nothing but gap. That floor was set for
     the viewport where 5.8vw stops being enough, around 1035px, and it is
     too big a pause this far down: the thing it was growing to balance was
     the display type, and the display type here is half the size it is on
     a desktop. 44 top and bottom, so two sections are still separated by
     88px - a tenth of the screen, which reads as deliberate air rather
     than as a missing rule. Stated as a clamp that reaches 60 again by the
     time the viewport is 640 wide, so it meets the base value exactly at
     the breakpoint instead of stepping. */
  :root{--sec-y:clamp(44px,11vw,60px)}

  /* 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}
  /* a 7.4em term column leaves 9 words a line for the sentence, so the
     entry stacks: fact, sentence, receipt. */
  .proof-cell{grid-template-columns:minmax(0,1fr);gap:7px}
  /* Two across, not one. Ten cards one-per-row is nine screens of scrolling
     to read a shelf, and the card has nothing on it now that needs a full
     phone width to be legible. */
  .run-grid{gap:10px}
  .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-list{grid-row:1}
  .ins-buy{grid-row:2}
  /* The tinted circle of loose pieces goes. It is decorative - the pieces are
     the same scatter the journal cards use - and at 230px plus its gap it was
     a quarter of a phone screen spent on decoration in a panel the brief says
     has to fit one view. The number it carried is not lost with it: the list
     is numbered, so its last ordinal IS the count. */
  .ins-art{display:none}
  /* Two columns of a fifteen-row list on a 390px screen is worse than one, so
     the desktop fix comes off here - and that rule alone was the overflow the
     brief is about: fifteen rows at forty pixels, six hundred deep.

     The twelve whole spices set as one inline run instead. Every name, every
     number, the printed order: what goes is the 9.5px role note, and only on
     a phone. It is flavour commentary rather than anything off the panel, it
     is the least legible type in the section at this size, and keeping it is
     the single thing that forces one row per ingredient. The first three
     items are not spices and keep their full rows with their roles - those
     are the bean, the coating and the oil, which is what a shopper turning
     the jar around is actually checking. */
  .ing--wide{columns:1}
  .ing--wide .sp{display:inline;padding:0}
  .ing--wide .sp .t{display:inline;font-size:14.5px}
  .ing--wide .sp .n{font-size:9.5px}
  .ing--wide .sp .p{display:none}
  /* a middot between them, because an inline run of names with no separator
     reads as one long name. Not after the last. */
  .ing--wide .sp .t::after{content:" · ";color:var(--rule-2)}
  .ing--wide .sp:last-child .t::after{content:none}
  .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){
  /* the hover-only pieces and fact panel this block used to switch off are
     gone from the card entirely, so there is nothing left to swap in */
  .card-add{position:static;transform:none}

  /* --- thumb-sized hit areas -------------------------------------------
     A thumb is the same width on a 1366px touchscreen as on a 390px phone,
     and a mouse is the same point in a 390px window on a desktop, so this
     belongs to the pointer and not to a width breakpoint. Everything below
     is a hit area, not a size: where the drawn size is a composition
     decision - a 36px disc of dark glass over a video, a 40px circle in a
     header that has a tight height - the drawn size stays and an invisible
     box is laid over it. Nothing here moves a pixel of layout.

     Audited and already clear: the flavour rail tabs at 47, the buttons at
     49, the three in the bottom bar at 54, the variant buttons, the reel
     dock. Those needed nothing. */

  /* the only control inside a reel card, sitting in its corner over the
     picture. 36px is right for how much of the frame it is allowed to
     cover; 46 is right for the thumb going for it. */
  .reel-mute::after{content:"";position:absolute;inset:-5px}

  /* header icon buttons. The gap between them is 8px, so the pitch is 48
     and a 48px box is exactly flush with its neighbour - no overlap, and
     no gap left between two adjacent targets for a tap to fall into. */
  .icb{position:relative}
  .icb::after{content:"";position:absolute;inset:-4px;border-radius:50%}

  /* same arithmetic in the footer: 34px discs, 8px apart, so 42 wide is
     the pitch. Taller than wide because there is nothing above or below
     them to take a tap by mistake. */
  .foot-social a{position:relative}
  .foot-social a::after{content:"";position:absolute;inset:-5px -4px}

  /* the rail's position dots. They are indicators first - aria-hidden,
     out of the tab order, and the rail answers a swipe - but they are
     real buttons and a thumb will go for them, so they get the slop they
     can have. Vertical only: at 8px wide on a 15px pitch, a box wide
     enough to matter would cover its neighbours, and a near-miss would
     then scroll to the wrong card rather than to none. 13px up and down
     stays inside the foot row, so it cannot steal a tap from a card. */
  .rl-dot{position:relative}
  .rl-dot::after{content:"";position:absolute;inset:-13px -3px}

  /* 42px, from 13px type and eleven of padding. The two pixels come out
     of the padding box rather than off a pseudo-element because these
     tabs sit in a wrapping row with room to grow, and because the filled
     pill that marks the live one is drawn on the padding box - an
     invisible box here would put the hit area outside the pill. */
  .lens-bar button{min-height:44px;display:inline-flex;align-items:center}

  /* The footer link lists were 30px rows separated by a 2px margin: the
     row is fine on its own, the 2px is the problem, because two adjacent
     targets with a dead strip between them is where a tap lands on
     neither. The margin goes into the padding, which makes the rows
     contiguous and 40px each, and the gap between the two columns on a
     phone does the horizontal separating. */
  .foot-cols li{margin-bottom:0}
  .foot-cols li a{padding:9px 0}

  /* and the policy row at the very bottom. These are inline text links,
     which is the one case the target-size rules exempt, so this is only
     to stop four of them wrapping into rows 10px apart. */
  .foot-legal a{display:inline-block;padding-block:5px}
}

/* --- 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-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}
}

/* --- 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{background:#fff;color:#000}
  .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}