/* GENERATED from site.html by scripts/build-theme.py. Do not edit here: change site.html and run the script. */
/* v8, 25 Sep 2026: the label. Martin found the black and the drips "very Halloween", so the page
   takes the look of the new Wild Remedy jar: its paper, its green ink engraving, its dark green
   type and one pure gold. Colours sampled from Jesse's label renders (23 Sep). */
:root{
  color-scheme:light;
  --bg:#EEEDDD;        /* the label's paper */
  --bg-2:#E4E5D0;      /* the paper a shade into the label's sage, for alternate bands */
  --panel:#D0D4B9;
  --green:#103111;     /* WILD REMEDY */
  --leaf:#34512B;      /* the engraving; small labels on paper (7.5:1) */
  --gold:#E4AB16;      /* HONEY: fills, and type on green (6.9:1) */
  --honey:#A87600;     /* the same gold deep enough for large type on paper (3.4:1) */
  --txt:#103111;
  --mut:#3F5638;
  --dim:#4E6043;
  --on-green:#EEEDDD;
  --line:rgba(16,49,17,.12);
  --line-2:rgba(16,49,17,.3);
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wrap:1280px;
  --gutter:clamp(20px,4.5vw,64px);
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--f);font-weight:400;font-size:17px;line-height:1.65;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
figure,blockquote,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
button{font-family:inherit}
/* the display voice: heavy, condensed, upper case */
h1,h2,h3{font-family:var(--f);font-weight:800;font-variation-settings:"wdth" 70;
  text-transform:uppercase;letter-spacing:.006em;line-height:.92;margin:0;text-wrap:balance}
h3{line-height:.98}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
section[id],article[id],#top,#wild-remedy{scroll-margin-top:var(--top,110px)}
#story{scroll-margin-top:0}   /* "Our story" lands on the start of the drawn story, its first words on screen */
.band{padding-block:clamp(52px,6vw,88px)}
.band-2{background:var(--bg-2)}
.eyebrow{font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--leaf);margin-bottom:22px}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--mut);max-width:54ch;font-weight:500}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font-weight:800;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:18px 34px;border-radius:2px;background:var(--gold);color:var(--green);
  transition:background .24s ease,transform .24s ease,color .24s ease}
.btn:hover{background:#F0BA2E;transform:translateY(-2px)}
.btn-ghost{background:var(--bg);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:var(--bg-2)}
:focus-visible{outline:2px solid var(--leaf);outline-offset:4px}


/* ---------- top ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:90}






/* preview chrome only (not on the real site): on wider screens a chip in the bottom-left corner, so the
   header sits at the very top of the page exactly as it will live; phones keep the top bar */

.hdr{transition:background .4s ease,border-color .4s ease;border-bottom:1px solid transparent;background:var(--bg)}
.hdr.solid{background:rgba(238,237,221,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding-block:16px;position:relative}
.hdr .logo{width:104px;flex:none}
.nav{display:flex;gap:clamp(16px,2.4vw,34px);margin-inline-start:auto;align-items:center}
.nav a{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;position:relative;white-space:nowrap;
  color:var(--txt);transition:color .22s ease}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--gold);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nav a:hover{color:var(--leaf)}
.nav a:hover::after{right:0}
.acts{display:flex;align-items:center;gap:14px;flex:none}
.basket{background:transparent;border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;color:var(--txt);padding:8px 0}
.basket .n{min-width:22px;height:22px;border-radius:11px;background:var(--gold);color:var(--green);display:grid;place-items:center;
  font-size:11px;font-weight:800;padding-inline:6px;font-variant-numeric:tabular-nums}
.burger{display:none;background:transparent;border:0;cursor:pointer;color:var(--txt);padding:12px;margin:-12px}
@media (max-width:980px){
  .burger{display:inline-flex;margin-inline-start:auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;
    background:var(--bg);padding:2px var(--gutter) 14px;box-shadow:0 18px 24px -12px rgba(16,49,17,.18)}
  .hdr.menu-open{background:var(--bg)}
  .nav.open{display:flex}
  .nav a{padding:16px 0;align-self:stretch;font-size:13px}
  .nav a::after{display:none}
}

/* wider screens: the header a little larger */
@media (min-width:761px){
  .hdr .logo{width:116px}
  .nav a,.basket{font-size:13.5px;font-weight:800}
}

/* ---------- hero: the film ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;background:var(--bg)}
.hero-film{position:absolute;left:0;right:0;bottom:0;top:calc(var(--top,110px) - 14px);z-index:0;overflow:hidden;background:var(--green)}
.hero-film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* round 9 (Jesse, 30 Sep): the engraving "worked when we had the drips", so the hero is now a ~20 s
   cinematic film of the Miombo, the villages and the harvest, starting under the header. A soft pool of
   shade keeps the words readable, and the film runs to the bottom with a deeper shade under the jars and
   their names (Felix, 30 Sep: no "hazy white bed") */
.hero-film::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 72% 58% at 50% 30%,rgba(8,20,9,.62) 0%,rgba(8,20,9,.34) 55%,rgba(8,20,9,0) 100%),
    linear-gradient(180deg,rgba(8,20,9,0) 0,rgba(8,20,9,0) 52%,rgba(8,20,9,.38) 74%,rgba(8,20,9,.78) 100%)}
.hero-copy{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;text-align:center;
  padding:calc(var(--top,110px) + 1.5vh) var(--gutter) clamp(14px,2vh,28px)}
.hero .eyebrow{margin-bottom:clamp(12px,2vh,22px);font-size:12px;letter-spacing:.24em;color:var(--gold);background:rgba(8,20,9,.62);padding:7px 12px 6px;border-radius:2px}
.hero h1{font-size:min(clamp(44px,7vw,108px),8.6vh);letter-spacing:.004em;line-height:.88;color:#F6F4E8;text-shadow:0 2px 30px rgba(8,20,9,.55)}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .lede{margin-top:clamp(10px,1.6vh,20px);max-width:96ch;text-wrap:pretty;color:rgba(246,244,232,.94);font-weight:500;font-size:clamp(15px,1.2vw,18px);text-shadow:0 1px 14px rgba(8,20,9,.75)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:clamp(16px,2.4vh,28px)}
.hero-cta .btn{padding:14px 26px;font-size:12px}
.hero .btn-ghost{background:rgba(8,20,9,.18);color:#F6F4E8;box-shadow:inset 0 0 0 1px rgba(246,244,232,.7)}
.hero .btn-ghost:hover{background:rgba(8,20,9,.34)}
.hero .btn:focus-visible{outline-color:#F6F4E8}
/* the shelf: every jar along the bottom, visible on load, each to its own page. Wild Remedy, the new
   range, stands in the middle (Jesse, 30 Sep) and a little bigger than the rest, to stand out (Felix, 2 Oct;
   on 30 Sep he had asked for the same size: the later word wins) */
.shelf{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter) clamp(14px,2.6vh,32px)}
.shelf-row{display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
.prod .soon{color:var(--gold);font-weight:700}
.prod .soon em{font-style:normal}
.prod .soon .short{display:none}
.prod{display:grid;justify-items:center;align-content:end;gap:4px;padding:8px 10px 10px;text-align:center;position:relative}
.prod .pic{height:clamp(110px,24vh,300px);width:100%;position:relative;display:block}
/* one rule for every product, here and in the shop: the visual area of one harvest jar, never taller than
   one (--k: 1 for the jars and bottles, 0.98 for the Wild Remedy jar (2 Oct render, aspect 0.736), 0.68 the twin box, 0.59 the duo) */
.prod img{position:absolute;left:0;right:0;bottom:0;width:100%;height:calc(var(--k,1) * 100%);object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.4));
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.prod:hover img,.prod:focus-visible img{transform:scale(1.1)}
.shelf .prod:focus-visible{outline-color:#F6F4E8}
.prod ins{text-decoration:none}.prod del{opacity:.6;margin-right:5px}
/* the featured jar: taller than its neighbours (--k above 1 grows it upward from the shelf) and free to be wider than its column,
   which on a phone is what limits it */
.prod-feature .pic img{left:-12%;right:-12%;width:124%;max-width:none}
.prod b{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:12px;font-variation-settings:"wdth" 84;color:#F6F4E8}
.prod b,.prod span{text-shadow:0 1px 8px rgba(8,20,9,.7)}
.prod span{font-size:12.5px;color:rgba(246,244,232,.86);font-variant-numeric:tabular-nums}
.prod i{font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;
  opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.prod:hover i{opacity:1;transform:none}
@media (max-width:760px){
  .hero h1{font-size:min(clamp(44px,13vw,76px),8vh)}
  .hero-cta{gap:10px}
  .hero-cta .btn{padding:13px 20px;font-size:11.5px}
  .hero .lede{max-width:40ch}
  .hero .lede{font-size:16px}
  /* the shelf on a phone (Jesse, 2 Oct: "fix the hero page product spacing for mobile"): each column is as wide as its product needs,
     so the jars, the featured jar and the two slim bottles all have about the same space between them, and Wild Remedy no longer
     touches its neighbours (it was wider than its column) */
  .shelf{padding-inline:12px}
  .shelf-row{display:flex;gap:0}
  .shelf-row .prod{flex:1 1 0;min-width:0}
  .shelf-row .prod-feature{flex:1.32 1 0}
  .shelf-row .prod-hot,.shelf-row .prod-smoky{flex:.65 1 0}
  /* Felix, 2 Oct: swap Winter and Smoky on a phone so the row is symmetrical about Wild Remedy: jar, bottle, WILD REMEDY, bottle, jar */
  .shelf-row .prod-summer{order:1}
  .shelf-row .prod-smoky{order:2}
  .shelf-row .prod-feature{order:3}
  .shelf-row .prod-hot{order:4}
  .shelf-row .prod-winter{order:5}
  .prod-feature .pic img{left:0;right:0;width:100%;max-width:100%}
  .prod .pic{height:min(clamp(84px,14vh,150px),22vw)}
  .prod .soon .long{display:none}
  .prod .soon .short{display:inline}
  .prod{padding:10px 2px 12px;gap:4px}
  .prod b{font-size:9.5px;letter-spacing:.03em;padding-inline:5px;min-height:3.45em;display:flex;align-items:flex-end;justify-content:center;line-height:1.15}
  .prod span{font-size:11px}
  .prod i{display:none}
}

/* tablets: a name on two lines must not lift its jar */
@media (min-width:761px) and (max-width:1180px){.prod b{min-height:2.3em;display:flex;align-items:flex-end;justify-content:center;line-height:1.15}
  /* narrow columns: the wide jars hit their width while the slim bottles take the full height, so the height
     follows the width too and the bottles do not tower over the jars */
  .prod .pic{height:min(clamp(110px,24vh,300px),17vw)}}

/* short screens (a 720p laptop): everything in the hero scales down so the shelf still shows on load */
@media (max-height:800px){
  .hero-copy{padding-top:calc(var(--top,110px) + .5vh)}
  .hero h1{font-size:min(clamp(44px,7vw,108px),8vh)}
  .hero .lede{font-size:15px}
  .hero-cta .btn{padding:13px 24px}
  .prod .pic{height:min(17vh,22vw)}
  .prod b{font-size:12px}
}

/* small phones: both buttons on one row, clear of the tree line */
@media (max-width:400px){.hero-cta .btn{padding:13px 15px;font-size:11px;letter-spacing:.14em}}
@media (max-width:360px){.shelf-row .prod b{padding-inline:1px;letter-spacing:0;font-size:9px}}

@media (max-height:520px){
  .hero-copy{padding-top:calc(var(--top,110px) + 4px)}
  .hero .eyebrow{display:none}
  .hero h1{font-size:min(clamp(40px,9vw,120px),15vh)}
  .hero .lede{display:none}
  .hero-cta{margin-top:10px}
  .prod .pic{height:min(12vh,22vw)}
  .prod b{font-size:9px}
  .prod span{font-size:10px}
}

/* awards */
.awards{background:var(--bg-2)}
.awards .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px);padding-block:22px}
.awards div{display:flex;flex-direction:column;gap:4px}
.awards b{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
.awards span{font-size:13px;color:var(--dim)}
@media (max-width:760px){.awards .wrap{grid-template-columns:1fr 1fr;gap:18px 24px}}

/* ---------- the story: ONE continuous line drawing (round 9, Jesse 30 Sep) ----------
   The four videos became one drawn film in the style of Jesse's own illustrations: into the village,
   building the hive, training the family, up into the Miombo, time passing, the harvest, and Mama Buci
   buying the honey. Back and Next move between the beats (Jesse, 1 Oct: scrolling it "can be a bit glitchy",
   "should just put forwards buttons instead"). Next PLAYS the film from one beat to the next and it rests
   there. Every beat also has a still of its own frame laid over the video, so a drawing is on screen
   whatever the video does: the scroll-driven version left a blank gap on an iPhone, where a paused video
   will not load the frame it is asked to seek to. The beats' film seconds are the captions' data-t. */
.tale{position:relative}
.tale-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.tale-film{position:absolute;left:0;right:0;top:calc(var(--top,110px) - 14px);bottom:0;display:flex;align-items:center;justify-content:center}
/* the drawing is sized to its own 16:9 frame and its edges fade into the paper, so no drawn line ever ends
   on a hard cut, whatever the screen's shape. The fade is a gradient laid over the drawing, not a mask:
   a mask on a video is a known way to get a blank on iPhone Safari */
.tale-view{position:relative;flex:none;display:block;width:min(100%,calc((100svh - var(--top,110px) + 14px) * 16 / 9));aspect-ratio:16/9;height:auto;max-height:100%}
.tale-view video,.tale-still,.tale-still img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover}
.tale-still{opacity:0;transition:opacity .2s ease}
.tale-still.on{opacity:1}
.tale-view::after{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0,rgba(238,237,221,0) 6%,rgba(238,237,221,0) 94%,var(--bg) 100%),
    linear-gradient(180deg,var(--bg) 0,rgba(238,237,221,0) 7%,rgba(238,237,221,0) 93%,var(--bg) 100%)}
/* the title card: "Our story" high up in the sky of the first drawing, big (Jesse, 2 Oct: "put the title our story higher up at the
   top and bigger"). Under .tale-on only: without the script it is just a heading above the four beats */
.tale-on .cap-title{position:absolute;left:0;right:0;top:calc(var(--top,110px) + clamp(12px,6.4vh,76px));margin-inline:auto;width:min(100% - 2 * var(--gutter),1200px);pointer-events:none;z-index:1}
.cap-title .k{font-size:clamp(13px,1.35vw,22px);margin-bottom:clamp(8px,1.4vh,18px);text-shadow:0 0 6px rgba(238,237,221,.95),0 0 14px rgba(238,237,221,.9),0 0 24px rgba(238,237,221,.8)}
.tale-on .cap-title h2{font-size:clamp(48px,8.8vw,152px);line-height:.92;margin-bottom:0;text-shadow:0 0 18px rgba(238,237,221,.9),0 0 40px rgba(238,237,221,.8)}
.tale.at-start .tale-caps::before{opacity:0}   /* no words under the buttons on the title card, so no paper pool */
.tale-caps::before{transition:opacity .4s ease}
.tale.at-start .tale-nav::before{content:"";position:absolute;left:-60px;right:-60px;top:-26px;bottom:-26px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(238,237,221,.92) 0%,rgba(238,237,221,.7) 55%,rgba(238,237,221,0) 100%)}
/* the words: centred towards the bottom, big enough to read, a soft pool of paper under them so the
   drawing still shows through (Felix, 30 Sep). One caption is always on screen, so you can see how far
   the story goes (Jesse, the same call) */
.tale-caps{position:absolute;left:0;right:0;bottom:clamp(26px,5.5vh,72px);display:grid;justify-items:center;pointer-events:none}
.tale-caps::before{content:"";position:absolute;left:50%;bottom:-40px;width:min(1200px,130vw);height:calc(100% + 150px);transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 58% at 50% 62%,rgba(238,237,221,.96) 0%,rgba(238,237,221,.86) 46%,rgba(238,237,221,0) 100%)}
.cap{position:relative;width:min(100% - 2 * var(--gutter),860px);text-align:center}
.cap .k{display:block;font-weight:800;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--leaf);margin-bottom:16px;font-variant-numeric:tabular-nums}
.cap .k i{font-style:normal;color:var(--dim)}
.cap :is(h2,h3){font-size:clamp(38px,4.8vw,78px);margin-bottom:16px;color:var(--green)}
.cap p{font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:var(--mut);max-width:44ch;margin-inline:auto;font-weight:500}
.tale-on .cap{grid-area:1/1;align-self:end;opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.tale-on .cap.on{opacity:1;transform:none}
/* Back and Next under the words, with four hexagons that fill as the story goes. Back is faded and disabled on the
   title card but keeps its place, so nothing moves */
.tale-nav{display:none}
.tale-on .tale-nav{grid-area:2/1;position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(16px,2.6vh,28px);pointer-events:auto}
/* two round arrows either side of four hexagons: sage for back, honey for next, drawn arrows, no words */
.tale-btn{flex:none;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--panel);color:var(--green);-webkit-tap-highlight-color:transparent;
  transition:background .24s ease,transform .24s ease,opacity .24s ease}
.tale-btn svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tale-next{width:60px;height:60px;background:var(--gold)}
.tale-next svg{width:26px;height:26px}
@media (hover:hover){.tale-btn:hover{transform:scale(1.06)}.tale-next:hover{background:#F0BA2E}}
.tale-btn:active{transform:scale(.95)}
.tale-btn:disabled{opacity:.35;cursor:default;transform:none}
.tale-next{box-shadow:0 8px 20px rgba(120,84,0,.38);position:relative}
/* it is the one thing to press (Felix, 2 Oct: "it should be more obvious that I need to press this orange button"): a soft ring
   pulses out of it while it rests, stops while the film plays, and on the title card it is bigger and says what it does */
.tale-on .tale-next:not(:disabled){animation:nudge 2.1s ease-out infinite}
.tale.moving .tale-next{animation:none}
@keyframes nudge{0%{box-shadow:0 8px 20px rgba(120,84,0,.38),0 0 0 0 rgba(228,171,22,.7)}70%,100%{box-shadow:0 8px 20px rgba(120,84,0,.38),0 0 0 24px rgba(228,171,22,0)}}
.tale-hint{display:none;position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  background:var(--green);color:var(--on-green);font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:9px 14px 8px;border-radius:2px;
  animation:hint 1.6s ease-in-out infinite}
.tale-hint::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--green)}
@keyframes hint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.tale.at-start .tale-hint{display:block}
@keyframes hint2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:420px){.tale-hint{left:auto;right:-8px;transform:none;animation-name:hint2}.tale-hint::after{left:auto;right:40px;margin-left:0}}
.tale.at-start .tale-next{width:76px;height:76px}
.tale.at-start .tale-next svg{width:32px;height:32px}
.tale.at-start .tale-dots i{background:rgba(16,49,17,.38)}
@media (prefers-reduced-motion:reduce){.tale.waiting .tale-next::after{animation:none}.tale-on .tale-next:not(:disabled){animation:none;box-shadow:0 8px 20px rgba(120,84,0,.38),0 0 0 6px rgba(228,171,22,.4)}.tale-hint{animation:none}}
.tale-next .ico-again,.tale-next.again .ico-next{display:none}
/* a press that comes before its move has arrived: the button shows a spinning ring until the move plays (Felix, 5 Oct) */
.tale.waiting .tale-next{animation:none}
.tale.waiting .tale-next svg{opacity:.28}
.tale.waiting .tale-next::after{content:"";position:absolute;inset:11px;border-radius:50%;border:3px solid rgba(16,49,17,.25);border-top-color:var(--green);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tale-next.again .ico-again{display:block}
.tale-dots{display:flex;gap:9px}
.tale-dots i{width:13px;height:13px;background:rgba(16,49,17,.2);clip-path:var(--hex);transition:background .12s ease}
.tale-dots i.on{background:var(--honey)}
.tale-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tale-still{transition:none}}
/* without the script: the four beats as plain text */
.tale:not(.tale-on) .tale-stage{position:relative;height:auto}
.tale:not(.tale-on) .tale-film{display:none}
.tale:not(.tale-on) .tale-caps{position:relative;bottom:auto;gap:48px;padding-block:24px 64px}
.tale:not(.tale-on) .tale-caps::before{display:none}
/* portrait tablets and phones: the drawing, then the words straight under it, the pair centred on the screen */
@media (max-aspect-ratio:1/1){
  .tale-on .tale-stage{display:flex;flex-direction:column;justify-content:center;justify-content:safe center;padding-top:calc(var(--top,110px) - 14px);padding-bottom:18px}
  /* the drawing gives way first on a short screen (Safari on an iPhone shows ~390x664), so the words and buttons always fit */
  .tale-on .tale-film{position:relative;top:auto;bottom:auto;height:auto;flex:0 1 56.25vw;min-height:0}
  .tale-on .tale-caps{position:relative;bottom:auto;margin-top:clamp(16px,3vh,40px)}
  .tale-on .cap{align-self:start}                     /* the words hang straight under their drawing; the buttons stay put below */
  .tale-view{width:100%;height:100%;max-height:none}
}
/* phones: the drawing taller than its width allows, cropped at the sides to the people; the caption's own
   01 / 04 and the hexagons say how far along it is */
@media (max-width:760px) and (max-aspect-ratio:1/1){
  .tale-on .tale-film{flex-basis:min(54svh,92vw)}
  .tale-view{aspect-ratio:auto}
  .tale-view::after{background:linear-gradient(180deg,var(--bg) 0,rgba(238,237,221,0) 7%,rgba(238,237,221,0) 93%,var(--bg) 100%)}
  .tale-caps::before{height:calc(100% + 90px)}
  .cap :is(h2,h3){font-size:clamp(30px,8.6vw,40px);margin-bottom:12px}
  .cap p{font-size:16.5px}
  .tale-on .tale-nav{gap:16px;margin-top:14px}
  .tale-btn{width:48px;height:48px}.tale-next{width:56px;height:56px}
}
@media (max-aspect-ratio:1/1) and (max-height:620px){.tale-on .cap .k{display:none}.tale-on .tale-caps{margin-top:12px}
  .tale-on .tale-nav{margin-top:10px}.tale-btn{width:44px;height:44px}.tale-next{width:52px;height:52px}.tale-next svg{width:24px;height:24px}}
/* short landscape screens (a 720p laptop): smaller words, the drawing to the top, so the words cover less of it */
@media (min-aspect-ratio:1/1) and (max-height:820px){
  .tale-film{align-items:flex-start}
  .cap .k{margin-bottom:10px}
  .cap :is(h2,h3){font-size:clamp(30px,3.4vw,50px);margin-bottom:10px}
  .cap p{font-size:16px;max-width:52ch}
  .tale-caps{bottom:clamp(40px,6.5vh,56px)}
  .tale-on .tale-nav{margin-top:12px}
  .tale-btn{width:46px;height:46px}.tale-next{width:52px;height:52px}
}
/* the title card at the top on the other screens: smaller on a short laptop, big but fitting on a phone, small on a phone on its side */
@media (min-aspect-ratio:1/1) and (max-height:820px){.tale-on .cap-title h2{font-size:clamp(42px,7.2vw,102px)}}
@media (max-width:760px) and (max-aspect-ratio:1/1){.tale-on .cap-title h2{font-size:clamp(42px,13.2vw,68px)}.cap-title .k{font-size:12px}}
/* a phone on its side: the heading only on screen; the sentence stays for screen readers */
@media (max-height:500px) and (min-aspect-ratio:1/1){
  .tale-on .cap-title h2{font-size:clamp(28px,7.2vh,42px)}.cap-title .k{font-size:11px;margin-bottom:4px}
  .tale-hint{display:none!important}
  .cap p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cap :is(h2,h3){font-size:26px;margin-bottom:0}.tale-caps{bottom:16px}
  .tale-on .tale-nav{margin-top:10px}
  .tale-btn{width:44px;height:44px}.tale-next{width:48px;height:48px}}

/* the numbers, small and quiet, along the bottom of the story */
.figures{padding-block:clamp(36px,4.4vw,60px)}
.figures .row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,48px)}
.fig b{display:block;font-weight:700;font-variation-settings:"wdth" 84;font-size:clamp(28px,3vw,44px);line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:10px;font-size:12.5px;color:var(--mut);line-height:1.5;max-width:18ch}
@media (max-width:760px){.figures .row{grid-template-columns:1fr 1fr;gap:28px 20px}}

/* ---------- shop ---------- */
.shop-head{margin-bottom:clamp(28px,3.4vw,44px)}
/* the six on sale: three and three (Felix, 2 Oct; was four and two). Wild Remedy, the new range, has a line of its own above them,
   a little bigger, so it stands out (Felix, 2 Oct; on 30 Sep he had asked for it to be a normal tile: the later word
   wins). Not on sale yet: "Coming soon", no price, no basket button */
.grid{--cg:clamp(14px,2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,3vw,44px) var(--cg)}
.grid .item{flex:0 0 calc((100% - 2 * var(--cg)) / 3);min-width:0}
.item .soon{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}
#wild-remedy.rv{transform:none}   /* the hero links here: measure the tile where it rests */
.grid .item-new{flex-basis:100%;display:grid;grid-template-columns:minmax(0,300px) minmax(0,360px);justify-content:center;align-items:center;
  column-gap:clamp(28px,5vw,72px);margin-bottom:clamp(8px,1.6vw,22px)}
.grid .item-new .tile{aspect-ratio:1/1.05}
.grid .item-new .tile img{bottom:0;height:calc(var(--k,1) * 100%);width:100%}
.grid .item-new .txt{padding:0;flex:none}
.grid .item-new h3{font-size:clamp(26px,2.6vw,40px)}
.grid .item-new .note{font-size:clamp(15px,1.3vw,18px);max-width:34ch;flex:none}
.grid .item-new .buy{margin-top:20px}
.grid .item-new:hover,.grid .item-new:hover .tile img{transform:none}   /* not a link: no lift */
.shop-head h2{font-size:clamp(30px,3.6vw,54px)}
.item{display:flex;flex-direction:column;transition:transform .3s ease}
.item:hover{transform:translateY(-4px)}
.item .tile{aspect-ratio:4/3;position:relative;display:block}
.item .tile img{position:absolute;left:0;right:0;bottom:5%;width:100%;height:calc(var(--k,1) * 80%);object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 14px 14px rgba(16,49,17,.22));transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.item:hover .tile img{transform:translateY(-6px) scale(1.04)}
.item .flag{position:absolute;top:4px;left:4px;font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}
.item .txt{padding:18px 4px 8px;display:flex;flex-direction:column;flex:1}
.item h3{font-size:19px}
.item .note{font-size:14px;color:var(--mut);line-height:1.5;margin-top:6px;flex:1}
.item .buy{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.item .price{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.item .acts2{display:flex;align-items:center;gap:16px}
.item .add,.item .view{background:transparent;border:0;padding:0 0 3px;cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leaf);border-bottom:1px solid transparent;transition:border-color .24s ease,opacity .24s ease}
.item .view{color:var(--mut)}
.item .add:hover{border-bottom-color:var(--leaf)}
.item .view:hover{color:var(--txt);border-bottom-color:var(--txt)}
.item .add.done{opacity:.5}
.item .add,.item .view,.item .soon{white-space:nowrap}
/* narrower screens: three to a row, the price above its buttons so nothing collides */
@media (max-width:900px){
  .grid .item{flex-basis:calc((100% - 2 * var(--cg)) / 3)}
  .grid .item-new{flex-basis:100%;grid-template-columns:minmax(0,240px) minmax(0,300px)}
  .item .buy{flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px}
  .item .acts2{gap:18px}
}
/* phones: two to a row */
@media (max-width:640px){
  .grid .item{flex-basis:calc((100% - var(--cg)) / 2)}
  .grid .item-new{flex-basis:100%;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:6px}
  .grid .item-new .tile{width:min(54%,210px)}
  .grid .item-new .txt{align-items:center}
  .grid .item-new .note{margin-inline:auto}
  .grid .item-new .buy{justify-content:center;align-items:center}
  .item .txt{padding:12px 0 6px}
  .item h3{font-size:16px}
  .item .note{font-size:12.5px;margin-top:6px}
  .item .price{font-size:16px}
  .item .add,.item .view{font-size:11px;padding:8px 0 6px;min-height:32px}
  .item .flag{font-size:9px}
  .shop-head h2{font-size:clamp(28px,8vw,36px)}
}

/* ---------- honey for change: the one deep green band, the label's green with its gold ---------- */
#change{--txt:var(--on-green);--mut:rgba(238,237,221,.8);--dim:rgba(238,237,221,.64);--leaf:var(--gold);
  background:var(--green);color:var(--txt)}
.change-head{max-width:720px;margin-bottom:clamp(30px,3.6vw,48px)}
.change-head h2{font-size:clamp(38px,5.2vw,84px)}
.change-head .lede{margin-top:24px}
.change-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(34px,6vw,88px);align-items:center}
.map{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1000/1072}
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pin{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;width:26px;height:26px;display:grid;place-items:center}
.pin i{width:8px;height:8px;border-radius:50%;background:#6F805D;box-shadow:0 0 0 2.5px var(--green);transition:transform .28s ease,background .28s ease}
.pin:hover i{transform:scale(1.25)}
.pin:focus-visible{outline-color:var(--green)}
.pin[aria-pressed="true"] i{background:var(--green);box-shadow:0 0 0 2.5px var(--gold),0 0 0 4px var(--green)}
.pin span{position:absolute;top:50%;transform:translateY(-50%);font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  color:var(--on-green);background:rgba(16,49,17,.92);padding:6px 9px;border-radius:2px;box-shadow:0 2px 10px rgba(8,20,9,.3);transition:color .25s ease,background .25s ease}
.pin.left span{right:100%;margin-right:var(--lead,20px)}
.pin.right span{left:100%;margin-left:var(--lead,20px)}
.pin[aria-pressed="true"] span{color:var(--green);background:var(--gold)}
.tabs{display:flex;gap:30px;margin-bottom:32px}
.tab{background:transparent;border:0;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:0 0 14px;position:relative;transition:color .24s ease}
.tab[aria-selected="true"]{color:var(--gold)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background .24s ease}
.tab[aria-selected="true"]::after{background:var(--gold)}
.panel h3{font-size:clamp(26px,3vw,40px);margin-bottom:18px}
.panel>p{color:var(--mut);max-width:52ch}
.panel ul{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.panel li{padding-left:24px;position:relative;color:var(--mut);font-size:16px;line-height:1.6}
.panel li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:10.4px;background:var(--gold);clip-path:var(--hex)}
.panel[hidden]{display:none}
.nums{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin:30px 0 8px}
.nums div{display:flex;flex-direction:column}
.nums b{font-weight:800;font-variation-settings:"wdth" 70;font-size:clamp(32px,3.6vw,48px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.nums span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:11px;line-height:1.6}
@media (max-width:900px){.change-grid{grid-template-columns:1fr}}
@media (max-width:760px){
  .pin.left span,.pin.right span{left:50%;right:auto;top:auto;bottom:100%;transform:translateX(-50%);margin:0 0 12px 0}
}

/* ---------- people ----------
   round 9 (30 Sep): "looks too old", so the hexagon frames and the centred quotes went. Big portraits,
   the names in the display voice, the words under them; on phones the three sit in a row you swipe */
.people-head{margin-bottom:clamp(30px,3.8vw,52px)}
.people-head h2{font-size:clamp(38px,5.2vw,84px)}
.people-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.person .ph{aspect-ratio:4/5;overflow:hidden;background:var(--panel);border-radius:2px}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03);
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.person:hover .ph img{transform:scale(1.035)}
.person figcaption{padding-top:clamp(18px,1.8vw,26px)}
.person .role{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf)}
.person h3{font-size:clamp(30px,2.9vw,46px);margin-top:10px}
.person blockquote{margin-top:14px;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--mut);max-width:34ch;font-weight:500}
@media (max-width:760px){
  .people-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,320px);gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .people-row::-webkit-scrollbar{display:none}
  .person{scroll-snap-align:start}
  .person h3{font-size:30px}
}

/* ---------- newsletter ---------- */
.signup{background:var(--gold);color:var(--green)}
.signup .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(48px,6vw,80px)}
.signup h2{font-size:clamp(40px,5.6vw,92px)}
.signup p{margin-top:16px;max-width:38ch;font-weight:500}
.signup form{display:flex;align-items:center;gap:14px;border-bottom:2px solid rgba(16,49,17,.7);padding-bottom:6px;transition:border-color .24s ease}
.signup form:focus-within{border-bottom-color:var(--green)}
.signup input{flex:1;min-width:0;border:0;background:transparent;padding:12px 2px;font-family:var(--f);font-weight:500;font-size:17px;color:var(--green)}
.signup input::placeholder{color:rgba(16,49,17,.8)}
.signup input:focus{outline:0}
.signup button{background:transparent;border:0;cursor:pointer;font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);padding:12px 0;transition:opacity .24s ease}
.signup button:hover{opacity:.7}
.signup .note{margin-top:16px;font-size:12.5px;color:rgba(16,49,17,.86)}
@media (max-width:820px){.signup .wrap{grid-template-columns:1fr;gap:30px}}

/* ---------- footer ---------- */
.foot{--txt:var(--on-green);--mut:rgba(238,237,221,.76);--dim:rgba(238,237,221,.6);--leaf:var(--gold);
  padding-block:clamp(56px,6.5vw,84px) 30px;font-size:15px;background:var(--green);color:var(--txt)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,52px)}
.foot .logo{width:124px;margin-bottom:20px}
.foot h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800;margin:0 0 18px}
.foot ul{display:flex;flex-direction:column;gap:10px}
.foot a{color:var(--mut);transition:color .22s ease}
.foot a:hover{color:var(--txt)}
.foot .blurb{color:var(--mut);max-width:30ch;line-height:1.7}
.legal{margin-top:clamp(38px,4.6vw,62px);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12px;color:var(--dim)}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.fgrid{grid-template-columns:1fr}}

   /* a phone on its side: it would cover the shelf */

/* ---------- entrance + reveal ---------- (only hidden while the script is working: the head adds .js and takes it off again if the
   script has not started within 4 s, so a script that fails never leaves the page blank) */
.js .lift{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0s)}
body.ready .lift{opacity:1;transform:none}
.js .shelf{opacity:0;transform:translateY(30px);transition:opacity 1.3s cubic-bezier(.2,.7,.3,1) .5s,transform 1.3s cubic-bezier(.2,.7,.3,1) .5s}
body.ready .shelf{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- the intro: the logo, then the curtain lifts onto the film ---------- */
.intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;overflow:hidden;place-items:center;transform:translateY(0);
  transition:transform .82s cubic-bezier(.76,0,.24,1)}
html.intro-on .intro{display:grid}
html.intro-out .intro{transform:translateY(-100%);pointer-events:none}
html.intro-instant .intro,html.intro-instant .intro-core{transition:none}
.intro-core{position:relative;z-index:2;display:grid;justify-items:center;padding-inline:24px;transition:transform .82s cubic-bezier(.76,0,.24,1),opacity .42s ease}
html.intro-out .intro-core{transform:translateY(-34px);opacity:0}
.intro-mark{width:min(292px,54vw);opacity:0;transform:translateY(16px) scale(.985);
  animation:i-mark .85s cubic-bezier(.2,.7,.3,1) .08s forwards}
@keyframes i-mark{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rv,.lift,.shelf,.js .rv,.js .lift,.js .shelf{opacity:1;transform:none;transition:none}
  
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}