/* ============================================================
   PULP — sparkling fruit drinks
   Design system. Solid colour, heavy grotesk, editorial grid.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* base */
  --cream:#F5F0E5;
  --ink:#181818;
  --grey:#D9D5CC;
  --white:#FFFDFC;

  /* flavour 01 — pink grapefruit + black pepper */
  --gf-1:#FF665B; --gf-2:#FFB7B0; --gf-3:#292727;
  /* flavour 02 — pear + basil */
  --pe-1:#B8E84F; --pe-2:#396044; --pe-3:#EFF3D5;
  /* flavour 03 — blood orange + rosemary */
  --bo-1:#FF6D28; --bo-2:#BA2B32; --bo-3:#49624A;
  /* flavour 04 — mango + chilli */
  --mg-1:#FFBF32; --mg-2:#EF4438; --mg-3:#FFF1C5;
  /* flavour 05 — lemon + elderflower */
  --le-1:#F5E94F; --le-2:#FFFDF2; --le-3:#889A4A;

  /* live theme — swapped by the flavour switcher */
  --acc:#FF665B;
  --acc-soft:#FFB7B0;
  --acc-deep:#292727;
  --acc-on:#181818;

  /* type */
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;

  /* grid */
  --max:1560px;
  --gut:clamp(20px,4vw,64px);
  --col-gap:clamp(16px,1.6vw,28px);

  /* motion */
  --hdr:66px;          /* sticky site header, matches .hdr-in height */
  --ui:180ms;
  --sec:480ms;
  --prod:560ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --snap:cubic-bezier(.34,1.42,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media(max-width:760px){body{font-size:16px}}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--acc);color:var(--white)}

/* ---------- 2. Type ---------- */
.d{
  font-family:var(--display);
  font-weight:800;
  font-stretch:100%;
  line-height:.88;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
.d-xl{font-size:clamp(3.4rem,10vw,10rem)}
.d-l {font-size:clamp(2.6rem,6.6vw,6.4rem)}
.d-m {font-size:clamp(2rem,4.2vw,4rem)}
.d-s {font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:.96}
.lede{font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.45;max-width:36ch}
p{margin:0 0 1em}
.meta{font-size:14px;line-height:1.5;opacity:.72}
.note{font-size:15px;line-height:1.5}

/* the wordmark */
.mark{
  font-family:var(--display);
  font-weight:800;
  font-stretch:100%;
  letter-spacing:-.042em;
  line-height:.8;
  text-transform:lowercase;
  display:inline-block;
}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
@media(max-width:900px){.grid{grid-template-columns:repeat(6,1fr)}}
section{position:relative}
.pad{padding-block:clamp(72px,9vw,150px)}
.pad-s{padding-block:clamp(48px,5vw,84px)}
.rule{height:1px;background:currentColor;opacity:.18;border:0;margin:0}

/* ---------- 4. Buttons ---------- */
.btn{
  --b:var(--ink);--f:var(--white);
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--b);color:var(--f);
  border:2px solid var(--b);
  padding:14px 26px;
  font-weight:650;font-size:16px;letter-spacing:-.01em;
  border-radius:4px;text-decoration:none;cursor:pointer;
  transition:transform var(--ui) var(--snap),background var(--ui),color var(--ui),border-color var(--ui);
}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(0,0)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-lg{padding:18px 34px;font-size:18px}
.btn-ghost{--b:currentColor;background:transparent;color:inherit}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-acc{--b:var(--acc);--f:var(--ink)}
.btn-cream{--b:var(--cream);--f:var(--ink)}
.on-dark .btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

.link{
  text-decoration:none;border-bottom:2px solid currentColor;
  padding-bottom:1px;font-weight:600;
  transition:opacity var(--ui);
}
.link:hover{opacity:.6}

/* ---------- 5. Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--cream);
  border-bottom:1px solid rgba(24,24,24,.12);
  transition:background var(--prod) var(--ease),color var(--prod) var(--ease);
}
.hdr-in{display:flex;align-items:center;gap:clamp(18px,3vw,44px);height:66px;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.hdr .mark{font-size:30px;text-decoration:none;margin-right:auto}
@media(min-width:1000px){.hdr .mark{margin-right:0}}
.nav{display:none;gap:clamp(14px,1.8vw,26px);margin-right:auto}
@media(min-width:1000px){.nav{display:flex}}
.nav a{
  text-decoration:none;font-size:16px;font-weight:550;padding:4px 0;
  border-bottom:2px solid transparent;transition:border-color var(--ui),color var(--ui);
}
.nav a:hover,.nav a[aria-current="page"]{border-color:currentColor}
.hdr-act{display:flex;align-items:center;gap:10px}
.icon-btn{
  background:none;border:2px solid transparent;border-radius:4px;
  padding:7px 12px;cursor:pointer;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color var(--ui);
}
.icon-btn:hover{border-color:currentColor}
.icon-btn:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.cart-count{
  background:var(--ink);color:var(--cream);border-radius:20px;
  min-width:22px;height:22px;display:inline-grid;place-items:center;
  font-size:12.5px;font-weight:700;padding:0 6px;
}
.hdr.inverted{background:var(--ink);color:var(--cream)}
.hdr.inverted .cart-count{background:var(--cream);color:var(--ink)}
.burger{display:inline-flex}
@media(min-width:1000px){.burger{display:none}}

/* mobile drawer */
.mnav{
  position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--cream);
  padding:24px var(--gut);display:flex;flex-direction:column;
  transform:translateY(-101%);transition:transform 420ms var(--ease);
}
.mnav[data-open="true"]{transform:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;height:42px;margin-bottom:28px}
.mnav a{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(2rem,9vw,3.4rem);line-height:1.05;text-decoration:none;letter-spacing:-.03em}
.mnav a:hover{color:var(--acc)}
.mnav-foot{margin-top:auto;display:flex;gap:18px;flex-wrap:wrap;font-size:15px;opacity:.7}

/* ---------- 6. Hero ---------- */
/* Poster layout: one oversized word running off both edges, a cluster
   of cans floating in front of it, the line of copy and the pick
   controls along the bottom. Same structure as the reference, in
   PULP's cream-and-flavour palette rather than its purple.
   --hero-run is the extra scroll the section holds for after the fold
   so the cans can arrive one at a time; set it to 0 for a plain
   one-fold hero. */
.hero{
  background:var(--cream);overflow:clip;position:relative;isolation:isolate;
  --hero-p:0;--hero-drop:0;--hero-run:130svh;
  min-height:calc(100svh - var(--hdr-h,67px) + var(--hero-run));
}
.hero-in{
  position:sticky;top:var(--hdr-h,67px);
  height:calc(100svh - var(--hdr-h,67px));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center;
  padding:clamp(18px,2.4vw,30px) var(--gut) clamp(18px,2.2vw,28px);
  z-index:1;
}

/* scattered confetti dashes */
.hero-flecks{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-flecks i{
  position:absolute;left:var(--x);top:var(--y);rotate:var(--r);
  width:clamp(14px,1.5vw,22px);height:3px;border-radius:3px;
  background:var(--hero-fleck-c,var(--acc));opacity:.5;
}

/* The hero's own intro. It cannot use the house [data-rev] reveals:
   those fire when an element crosses 90% of the viewport on scroll,
   and nothing inside a sticky hero ever crosses that line — the copy
   would sit at opacity 0 for good. */
[data-hero] [data-intro]{opacity:0;translate:0 16px}
[data-hero][data-ready] [data-intro]{
  opacity:1;translate:none;
  transition:opacity 620ms var(--ease) var(--d,0ms),
             translate 680ms var(--ease) var(--d,0ms);
}
/* The word is centred with translate, so the generic intro rule above
   would overwrite its centring and shunt it off to the right. It gets
   the same motion folded into its own transform instead. */
[data-hero] .hero-word[data-intro]{translate:-50% calc(-50% + 16px)}
[data-hero][data-ready] .hero-word[data-intro]{translate:-50% -50%}

.hero-eyebrow{
  grid-row:1;margin:0;position:relative;z-index:3;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;
}

/* --- the oversized word --- */
.hero-word{
  position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:800;font-stretch:100%;
  /* deliberately wider than the viewport — it is meant to be cropped */
  font-size:clamp(5rem,23vw,19rem);line-height:.8;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--hero-word-c,var(--acc-soft));
  transition:color 520ms var(--ease);
}

/* --- the cans --- */
.hero-stage{
  grid-row:2;position:relative;z-index:2;
  width:100%;height:100%;align-self:stretch;pointer-events:none;
}
canvas.gl{display:block;width:100%;height:100%;position:relative;z-index:2}
.stage-fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
/* no WebGL: the same cans, crossfaded */
/* Hidden until something actually asks for it. The shared rule near
   the bottom of this file only hides a fallback once its scene has
   mounted, which is right for the scenes further down the page — they
   are below the fold and the PNG acts as a poster. In the hero it
   meant the flat can flashed up on every load, before the copy had
   even revealed and before the real can dropped. */
.hero-stage .stage-fallback{opacity:0;transition:opacity 300ms var(--ease)}
.hero-stage[data-fallback] .stage-fallback{opacity:1}
.hero-stage .stage-fallback img{
  grid-area:1/1;height:min(52svh,470px);width:auto;
  opacity:0;transition:opacity 420ms var(--ease);
  filter:drop-shadow(0 30px 40px rgba(24,24,24,.28));
  rotate:-9deg;
}
.hero-stage .stage-fallback img.is-on{opacity:1}

/* --- bottom bar: copy, picker, CTA --- */
.hero-bar{
  grid-row:3;position:relative;z-index:3;
  width:100%;display:grid;align-items:end;gap:clamp(14px,2vw,28px);
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
}
.hero-lede{
  margin:0;max-width:34ch;font-size:clamp(.92rem,1.1vw,1.05rem);
  line-height:1.45;font-weight:500;
}
.hero-step{
  justify-self:center;margin:0;align-self:center;
  font-family:var(--display);font-weight:800;font-size:clamp(1rem,1.5vw,1.3rem);
  letter-spacing:-.02em;color:var(--hero-step-c,var(--acc));display:flex;gap:.3em;align-items:baseline;
}
.hero-step em{font-style:normal;font-size:.7em;opacity:.45;color:var(--ink)}
.btn-pill{
  justify-self:end;display:inline-flex;align-items:center;
  padding:16px 34px;border-radius:999px;text-decoration:none;
  background:var(--acc);color:var(--acc-on);
  font-weight:700;font-size:17px;white-space:nowrap;
  transition:background 320ms var(--ease),scale 240ms var(--ease);
}
.btn-pill:hover{scale:1.04}

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

/* --- copy swap between flavours --- */
.swap{display:inline-block;will-change:transform,opacity}
.swap[data-out]{animation:swap-out 240ms var(--ease) forwards}
.swap[data-in]{animation:swap-in 420ms var(--ease) both}
@keyframes swap-out{to{opacity:0;transform:translateY(-38%)}}
@keyframes swap-in{from{opacity:0;transform:translateY(44%)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .hero{--hero-run:90svh}
  .hero-word{font-size:clamp(3.6rem,26vw,9rem)}
  .hero-bar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .hero-lede{max-width:32ch}
  .btn-pill{justify-self:center}
}
@media(max-width:560px){
  .hero-lede{font-size:.9rem}
  .btn-pill{padding:14px 26px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero{--hero-run:0px}
  [data-hero] [data-intro]{opacity:1;translate:none;transition:none}
  .swap[data-out],.swap[data-in]{animation:none}
  .btn-pill{transition:none}
}

/* ---------- 7. Ticker ---------- */
.ticker{background:var(--acc);color:var(--ink);padding-block:clamp(16px,2.4vw,30px);overflow:hidden;border-block:2px solid var(--ink)}
.ticker-track{display:flex;width:max-content;animation:slide 44s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-grp{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);padding-right:clamp(18px,2.4vw,40px)}
.ticker span{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(2rem,5.4vw,5rem);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.ticker .plus{opacity:.55}
.ticker img,.ticker svg{height:clamp(34px,4.6vw,74px);width:auto;flex:none}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- 8. Flavour grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
@media(max-width:1080px){.fgrid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
.card{
  grid-column:span 4;position:relative;overflow:hidden;
  padding:26px 26px 22px;min-height:clamp(380px,38vw,520px);
  display:flex;flex-direction:column;
  border-radius:4px;color:var(--ink);text-decoration:none;
  transition:transform var(--ui) var(--ease);
}
@media(max-width:1080px){.card{grid-column:span 3}}
@media(max-width:620px){.card{grid-column:1/-1;min-height:340px}}
.card:nth-child(4),.card:nth-child(5){grid-column:span 6}
@media(max-width:1080px){.card:nth-child(4),.card:nth-child(5){grid-column:span 3}}
@media(max-width:620px){.card:nth-child(4),.card:nth-child(5){grid-column:1/-1}}
.card-can{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  height:72%;width:auto;z-index:1;
  transition:transform var(--prod) var(--snap),filter var(--prod) var(--ease);
  filter:drop-shadow(0 24px 30px rgba(24,24,24,.22));
}
.card:hover .card-can{transform:rotate(-5deg) scale(1.055) translateY(-8px);filter:drop-shadow(0 40px 44px rgba(24,24,24,.3))}
.card-ill{position:absolute;width:38%;z-index:0;opacity:.95;transition:transform var(--prod) var(--ease)}
.card-ill.a{left:-7%;bottom:24%;width:33%}
.card-ill.b{right:-4%;top:8%;width:28%}
.card:hover .card-ill.a{transform:translate(10px,-10px) rotate(-7deg)}
.card:hover .card-ill.b{transform:translate(-8px,10px) rotate(8deg)}
.card-head{position:relative;z-index:2;font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(1.25rem,1.7vw,1.7rem);line-height:.95;letter-spacing:-.025em;max-width:11ch}
.card-foot{position:relative;z-index:2;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.card-foot p{margin:0 0 4px;font-size:15px;max-width:20ch}
.card-price{font-weight:700;font-size:17px}
.card .pill{
  border:2px solid var(--ink);border-radius:4px;padding:9px 16px;
  font-weight:650;font-size:15px;background:transparent;flex:none;white-space:nowrap;
  transition:background var(--ui),color var(--ui);
}
.card:hover .pill{background:var(--ink);color:var(--cream)}

/* ---------- 9. Editorial three columns ---------- */
.uneven{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap) clamp(20px,3vw,50px)}
@media(max-width:900px){.uneven{grid-template-columns:repeat(6,1fr)}}
.u1{grid-column:1/5}
.u2{grid-column:6/9;margin-top:clamp(20px,5vw,90px)}
.u3{grid-column:10/13;margin-top:clamp(10px,2vw,32px)}
@media(max-width:900px){.u1,.u2,.u3{grid-column:1/-1;margin-top:0}}
.uneven h3{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(1.5rem,2.3vw,2.1rem);letter-spacing:-.025em;line-height:.98;margin:18px 0 10px}
.uneven img,.uneven svg{width:clamp(74px,8vw,118px);height:auto}

/* ---------- 10. Ingredient explosion ---------- */
.explode{background:var(--gf-1);color:var(--ink);overflow:hidden}
.explode-in{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);
  align-items:center;min-height:min(92vh,900px);
  /* min-height alone is not breathing room: past it the copy runs
     straight into the top and bottom edges of the band */
  padding-block:clamp(56px,7vw,110px);
}
.explode-copy{grid-column:1/6;z-index:3}
.explode-stage{grid-column:6/13;position:relative;align-self:stretch;min-height:min(78vh,780px)}
@media(max-width:900px){
  .explode-in{grid-template-columns:repeat(6,1fr)}
  .explode-copy{grid-column:1/-1}
  .explode-stage{grid-column:1/-1;min-height:56vh}
}

/* ---------- 11. Fridge ---------- */
.fridge-sec{background:var(--cream)}
.fridge-in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center}
.fridge-stage{grid-column:1/9;position:relative;aspect-ratio:4/3;min-height:0;cursor:pointer}
.fridge-side{grid-column:9/13;align-self:center}
@media(max-width:980px){
  .fridge-in{grid-template-columns:repeat(6,1fr)}
  .fridge-stage{grid-column:1/-1;aspect-ratio:3/3.2;min-height:0}
  .fridge-side{grid-column:1/-1;margin-top:22px}
}
.fridge-stage canvas{border-radius:4px}
.fridge-hint{
  position:absolute;left:16px;bottom:16px;z-index:5;
  background:var(--ink);color:var(--cream);padding:8px 14px;border-radius:3px;
  font-size:14px;font-weight:600;pointer-events:none;
  transition:opacity var(--ui);
}
.fridge-side .swatch{width:26px;height:26px;border-radius:3px;border:2px solid var(--ink);flex:none}
.picked{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.picked[hidden]{display:none}

/* ---------- 12. Flavour switcher ---------- */
.switch{transition:background var(--prod) var(--ease),color var(--prod) var(--ease)}
.tabs{display:flex;flex-direction:column;border-top:2px solid currentColor}
.tab{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:16px;
  padding:clamp(10px,1.4vw,20px) 0;border-bottom:2px solid currentColor;
  font-family:var(--display);font-weight:800;font-stretch:100%;
  font-size:clamp(1.35rem,3.7vw,3.3rem);line-height:1;letter-spacing:-.03em;
  opacity:.34;transition:opacity var(--ui),padding-left var(--ui) var(--ease);
}
.tab:hover{opacity:.7;padding-left:10px}
.tab[aria-selected="true"]{opacity:1}
.tab:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.tab em{font-family:var(--body);font-style:normal;font-size:15px;font-weight:600;opacity:.65;letter-spacing:0}
.switch-panel{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center}
.switch-panel .sp-media{grid-column:1/6;position:relative}
.switch-panel .sp-tabs{grid-column:7/13}
@media(max-width:900px){
  .switch-panel{grid-template-columns:repeat(6,1fr)}
  /* `margin-inline:auto` makes this shrink-to-fit. It used to hold an <img>
     with an intrinsic width; the 3D stage has none, so give it a definite one
     or the whole media column collapses to zero. */
  .switch-panel .sp-media{grid-column:1/-1;width:min(320px,100%);margin-inline:auto}
  .switch-panel .sp-tabs{grid-column:1/-1}
}
.sp-stage{position:relative;aspect-ratio:3/3.9;touch-action:pan-y}
.sp-stage:focus{outline:none}
.sp-stage:focus-visible{outline:3px solid currentColor;outline-offset:6px}
.sp-stage .stage-fallback{display:grid;place-items:center}
.sp-can{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 34px 44px rgba(24,24,24,.28))}
.sp-stage .drag-hint{bottom:2px;font-weight:600}
.sp-copy{min-height:4.2em}

/* ---------- 13. Photography ---------- */
.photos{background:var(--cream)}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,26px)}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(6,1fr)}}
.ph{position:relative;overflow:hidden;background:var(--grey)}
.ph img{width:100%;height:100%;object-fit:cover}
/* The photography carries its own film grain, so no CSS grain on top of it —
   the placeholder plates keep their hatching via .ph[data-missing]. */
.p-big{grid-column:1/8;aspect-ratio:4/3}
.p-tall{grid-column:8/13;aspect-ratio:3/4}
.p-quote{grid-column:1/6;display:flex;align-items:center}
.p-narrow{grid-column:6/8;aspect-ratio:1/2.1}
.p-wide{grid-column:8/13;aspect-ratio:16/10}
@media(max-width:900px){
  .p-big{grid-column:1/-1}
  .p-tall{grid-column:1/4;aspect-ratio:3/4}
  .p-narrow{grid-column:4/7;aspect-ratio:3/4}
  .p-quote{grid-column:1/-1}
  .p-wide{grid-column:1/-1}
}
.pquote{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(1.6rem,3vw,2.8rem);line-height:.95;letter-spacing:-.03em}
.caption{font-size:14px;opacity:.65;margin-top:8px}

/* ---------- 14. Mixer ---------- */
.mixer{background:var(--ink);color:var(--cream);overflow:hidden}
.mixer .btn-ghost{color:var(--cream)}
.mix-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center}
.mix-stage{grid-column:1/7;position:relative;aspect-ratio:5/3.4;min-height:260px}
.mix-ctl{grid-column:7/13}
@media(max-width:980px){
  .mix-grid{grid-template-columns:repeat(6,1fr)}
  .mix-stage{grid-column:1/-1;aspect-ratio:5/4;min-height:0}
  .mix-ctl{grid-column:1/-1}
}
.wheels{display:flex;align-items:center;gap:clamp(10px,2vw,26px);margin-block:26px}
.wheel{flex:1;min-width:0}
.wheel-lbl{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-bottom:8px;font-weight:650}
.wheel-box{border:2px solid var(--cream);border-radius:4px;display:flex;align-items:stretch}
.wheel-box button{
  background:none;border:0;padding:0 14px;cursor:pointer;font-size:20px;line-height:1;
  transition:background var(--ui);
}
.wheel-box button:hover{background:rgba(255,255,255,.14)}
.wheel-box button:focus-visible{outline:3px solid var(--cream);outline-offset:-3px}
.wheel-val{
  flex:1;display:grid;place-items:center;padding:12px 4px;min-width:0;
  font-family:var(--display);font-weight:800;font-stretch:100%;
  /* Sized so the longest value — "Pink grapefruit" — stays on one
     line. At the old 1.9rem it wrapped, which made the fruit box a
     whole line taller than the extra box beside it. */
  font-size:clamp(.95rem,1.5vw,1.35rem);letter-spacing:-.02em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mix-x{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,1.8vw,1.7rem);opacity:.5;padding-top:24px}
.verdict{border-left:3px solid var(--acc);padding-left:18px;min-height:5.4em}
.verdict h4{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(1.3rem,2.2vw,2rem);margin:0 0 6px;letter-spacing:-.025em}
.verdict p{margin:0;opacity:.82;max-width:40ch}

/* ---------- 15. Process rail (pinned, scroll-driven) ---------- */
/* Default is an ordinary horizontal scroller, so it still works with no JS.
   JS adds [data-pinned] and a tall height: viewport + however far the track
   has to travel. While you scroll through that, the sticky child stays put
   and the track slides sideways by the same distance. */
.railsec{position:relative}
.rail-scroll{position:relative}

.rail-sticky{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,1.6vw,26px);
  padding-block:clamp(60px,8vw,110px);
}
/* .wrap's `margin:0 auto` is a cross-axis auto margin inside this column
   flex, which cancels the stretch and shrink-to-fits the heading to centre.
   An explicit width puts it back on the grid. */
.rail-sticky > .wrap{width:100%}
.rail-head h2{margin:0}
.rail-head .note{max-width:62ch;margin:10px 0 0}
.rail-view{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail-view::-webkit-scrollbar{display:none}
.rail-track{
  display:flex;gap:clamp(8px,1vw,16px);
  padding-inline:var(--gut);width:max-content;
}

.rail-scroll[data-pinned] .rail-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  box-sizing:border-box;
  /* the site header is sticky at top:0 too, so keep the heading out from under it */
  padding:var(--hdr) 0 clamp(16px,2vw,32px);
  overflow:hidden;
}
.rail-scroll[data-pinned] .rail-view{overflow:hidden}
.rail-scroll[data-pinned] .rail-track{will-change:transform}

.step{width:clamp(230px,26vw,380px);flex:none}
.step-img{height:min(56vh,520px);background:var(--grey);position:relative;overflow:hidden;margin-bottom:14px}
.step-img img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.step h3{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(1.35rem,2vw,1.9rem);letter-spacing:-.03em;margin:0 0 6px;line-height:.95;display:flex;align-items:baseline;gap:10px}
.step-n{font-family:var(--body);font-weight:650;font-size:14px;letter-spacing:0;opacity:.45}
.step p{margin:0;max-width:32ch;font-size:16px}
@media(max-width:620px){
  .step-img{height:min(44vh,360px)}   /* a phone card is narrow, so cap the drop */
}

/* ---------- 16. Can close-up (dark) ---------- */
.macro{background:#0C0C0C;color:var(--cream);overflow:hidden;position:relative}
.macro-stage{position:absolute;inset:0;z-index:0}
.macro-copy{position:relative;z-index:2;min-height:min(64vh,580px);display:flex;align-items:flex-end}
.macro::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#0C0C0C 0 26%,rgba(12,12,12,.82) 38%,rgba(12,12,12,0) 58%);
}

/* ---------- 17. Reviews ---------- */
.reviews{background:var(--acc-soft)}
.rev-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:start}
@media(max-width:900px){.rev-wrap{grid-template-columns:repeat(6,1fr)}}
.rev{padding:20px 22px;font-size:16px;position:relative}
.rev p{margin:0 0 12px}
.rev cite{font-style:normal;font-size:14.5px;opacity:.7}
.rev-receipt{
  grid-column:1/5;background:var(--white);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:14.5px;line-height:1.7;rotate:-1.4deg;
  box-shadow:0 10px 26px rgba(24,24,24,.14);
  -webkit-mask-image:radial-gradient(6px at 6px 100%,transparent 96%,#000 100%) repeat-x bottom/14px 10px,linear-gradient(#000,#000);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  padding-bottom:30px;
}
.rev-bubble{grid-column:5/9;background:var(--ink);color:var(--cream);border-radius:20px 20px 20px 4px;rotate:1deg}
.rev-sticker{
  grid-column:9/13;background:var(--le-1);border:2px solid var(--ink);
  border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;
  justify-content:center;text-align:center;rotate:-6deg;padding:34px;
}
.rev-mail{grid-column:2/7;background:var(--white);border:1px solid rgba(24,24,24,.2);rotate:.6deg;margin-top:10px}
.rev-mail .hd{font-size:13.5px;opacity:.6;border-bottom:1px solid rgba(24,24,24,.16);padding-bottom:8px;margin-bottom:12px}
.rev-social{grid-column:7/12;display:flex;gap:12px;align-items:flex-start;margin-top:10px}
.rev-social .av{width:42px;height:42px;border-radius:50%;background:var(--bo-1);flex:none;display:grid;place-items:center;font-weight:800}
@media(max-width:900px){
  .rev-receipt{grid-column:1/4}.rev-bubble{grid-column:4/7}
  .rev-sticker{grid-column:1/4}.rev-mail{grid-column:4/7}.rev-social{grid-column:1/-1}
}
@media(max-width:620px){.rev-receipt,.rev-bubble,.rev-sticker,.rev-mail,.rev-social{grid-column:1/-1}}

/* ---------- 18. Stockists ---------- */
.stk-form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.field{
  flex:1;min-width:220px;border:2px solid var(--ink);border-radius:4px;
  padding:14px 16px;font:inherit;font-size:16px;background:var(--white);color:var(--ink);
}
.field::placeholder{color:rgba(24,24,24,.45)}
.field:focus{outline:3px solid var(--acc);outline-offset:2px}
.stk-list{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid rgba(24,24,24,.18)}
.stk-list li{
  display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(24,24,24,.18);
}
.stk-list b{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){
  .stk-list li{grid-template-columns:1fr;gap:6px}
  .stk-list .tagx{justify-self:start}
}
.stk-list b{font-size:17px;font-weight:650}
.stk-list .addr{grid-column:1/-1;font-size:15px;opacity:.65;margin-top:-6px}
.tagx{font-size:13.5px;border:1.5px solid currentColor;border-radius:3px;padding:3px 9px;opacity:.75;white-space:nowrap}

/* ---------- 19. Mixed pack ---------- */
.mixpack{position:relative;overflow:hidden;background:var(--ink)}
.mp-bands{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);z-index:0}
.mp-bands i{display:block}
.mp-in{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center;min-height:min(84vh,820px);padding-block:clamp(56px,7vw,110px)}
.mp-copy{grid-column:1/5;background:var(--cream);padding:34px;border-radius:4px}
.mp-stage{grid-column:5/13;position:relative;min-height:min(58vh,560px)}
@media(max-width:900px){
  .mp-in{grid-template-columns:repeat(6,1fr)}
  .mp-copy{grid-column:1/-1;order:2}.mp-stage{grid-column:1/-1;order:1;min-height:42vh}
}

/* ---------- 20. Newsletter + footer ---------- */
.news{background:var(--cream)}
.ftr{background:var(--ink);color:var(--cream);padding-top:clamp(56px,7vw,100px);overflow:hidden}
.ftr a{text-decoration:none}
.ftr-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);padding-bottom:clamp(40px,6vw,80px)}
@media(max-width:900px){.ftr-cols{grid-template-columns:repeat(6,1fr)}}
.ftr-col{grid-column:span 3}
@media(max-width:900px){.ftr-col{grid-column:span 3}}
@media(max-width:560px){.ftr-col{grid-column:1/-1}}
.ftr h4{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin:0 0 14px;font-weight:650}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr ul a{font-size:17px;transition:color var(--ui)}
.ftr-col:nth-child(1) ul a:hover{color:var(--gf-1)}
.ftr-col:nth-child(2) ul a:hover{color:var(--pe-1)}
.ftr-col:nth-child(3) ul a:hover{color:var(--mg-1)}
.ftr-col:nth-child(4) ul a:hover{color:var(--le-1)}
.ftr-mark{
  font-family:var(--display);font-weight:800;font-stretch:100%;
  font-size:min(55vw,49rem);line-height:.74;letter-spacing:-.045em;
  text-transform:lowercase;display:block;text-align:center;
  padding:0 0 .07em;margin:clamp(-10px,-1vw,-4px) 0 0;
  background:linear-gradient(97deg,var(--gf-1) 0 20%,var(--pe-1) 20% 40%,var(--bo-1) 40% 60%,var(--mg-1) 60% 80%,var(--le-1) 80% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;
}
.ftr-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:22px;border-top:1px solid rgba(255,255,255,.15);font-size:14.5px;opacity:.6}

/* ---------- 21. Product page ---------- */
.pdp{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
@media(max-width:980px){.pdp{grid-template-columns:repeat(6,1fr)}}
.pdp-media{grid-column:1/8;position:relative;border-radius:4px;overflow:hidden;min-height:min(78vh,760px);display:grid;place-items:center}
.pdp-info{grid-column:8/13;padding-top:12px}
@media(max-width:980px){.pdp-media{grid-column:1/-1;min-height:60vh}.pdp-info{grid-column:1/-1}}
.drag-hint{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:4;font-size:14px;opacity:.6;pointer-events:none;white-space:nowrap}
.opt{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 24px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{
  border:2px solid var(--ink);border-radius:4px;padding:12px 18px;cursor:pointer;
  font-weight:600;font-size:16px;display:flex;flex-direction:column;gap:2px;line-height:1.2;
  transition:background var(--ui),color var(--ui);
}
.opt label small{font-weight:500;opacity:.6;font-size:13.5px}
.opt input:checked + label{background:var(--ink);color:var(--cream)}
.opt input:focus-visible + label{outline:3px solid var(--acc);outline-offset:2px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);margin-top:44px}
@media(max-width:620px){.specs{grid-template-columns:1fr}}
.specs h4{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:0 0 10px;font-weight:650}
.nut{width:100%;border-collapse:collapse;font-size:15.5px}
.nut th,.nut td{text-align:left;padding:7px 0;border-bottom:1px solid rgba(24,24,24,.16)}
.nut td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.qty button{background:none;border:0;padding:10px 15px;cursor:pointer;font-size:18px;line-height:1}
.qty button:hover{background:rgba(24,24,24,.1)}
.qty span{display:grid;place-items:center;min-width:44px;font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- 22. Cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(24,24,24,.42);z-index:110;opacity:0;pointer-events:none;transition:opacity var(--prod)}
.scrim[data-open="true"]{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:120;
  background:var(--cream);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform var(--prod) var(--ease);
  box-shadow:-20px 0 50px rgba(24,24,24,.18);
}
.drawer[data-open="true"]{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(24,24,24,.18)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 22px}
.drawer-foot{padding:20px 22px;border-top:1px solid rgba(24,24,24,.18)}
.ci{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(24,24,24,.14)}
.ci-thumb{height:62px;border-radius:3px;display:grid;place-items:center;overflow:hidden}
.ci-thumb img{height:88%;width:auto}
.ci b{display:block;font-size:15.5px;font-weight:650;line-height:1.25}
.ci .meta{font-size:13.5px}
.ci-x{background:none;border:0;cursor:pointer;font-size:14px;opacity:.55;text-decoration:underline;padding:0}
.ci-x:hover{opacity:1}
.tot{display:flex;justify-content:space-between;font-weight:650;font-size:18px;margin-bottom:14px}
.empty{padding:40px 0;text-align:center;opacity:.6}

/* ---------- 23. Journal ---------- */
.jgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px)}
@media(max-width:900px){.jgrid{grid-template-columns:repeat(6,1fr)}}
.post{grid-column:span 4;text-decoration:none;display:block}
.post:nth-child(1){grid-column:span 8}
.post:nth-child(1) .post-img{aspect-ratio:16/9}
@media(max-width:900px){.post,.post:nth-child(1){grid-column:span 6}}
.post-img{aspect-ratio:4/3;background:var(--grey);overflow:hidden;margin-bottom:14px}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.post:hover .post-img img{transform:scale(1.04)}
.post h3{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:-.025em;line-height:1;margin:0 0 8px}

/* ---------- 24. Reveal motion ---------- */
[data-rev]{will-change:transform,opacity,clip-path}
[data-rev="wipe"]{clip-path:inset(0 100% 0 0)}
[data-rev="wipe"].in{clip-path:inset(0 0 0 0);transition:clip-path 620ms var(--ease)}
[data-rev="wipe"].done,[data-rev="maskUp"].done{clip-path:none}
[data-rev="up"]{opacity:0;transform:translateY(22px)}
[data-rev="up"].in{opacity:1;transform:none;transition:opacity 420ms var(--ease),transform 480ms var(--ease)}
[data-rev="snap"]{opacity:0;transform:scale(.94)}
[data-rev="snap"].in{opacity:1;transform:none;transition:opacity 220ms linear,transform 420ms var(--snap)}
[data-rev="maskUp"]{clip-path:inset(105% 0 0 0)}
[data-rev="maskUp"].in{clip-path:inset(0% 0 0 0);transition:clip-path 700ms var(--ease)}
[data-rev-d="1"].in{transition-delay:70ms}
[data-rev-d="2"].in{transition-delay:140ms}
[data-rev-d="3"].in{transition-delay:210ms}
[data-rev-d="4"].in{transition-delay:280ms}
[data-rev-d="5"].in{transition-delay:350ms}

/* ---------- 25. Utilities ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);padding:12px 18px}
.skip:focus{left:12px;top:12px}
.on-dark{background:var(--ink);color:var(--cream)}
.on-acc{background:var(--acc);color:var(--ink)}
.center{text-align:center}
.mb-0{margin-bottom:0}
.stack>*+*{margin-top:var(--s,18px)}
.eyebrow{font-size:15px;font-weight:600;opacity:.6;margin-bottom:14px}
.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:130;
  background:var(--ink);color:var(--cream);padding:13px 20px;border-radius:4px;
  font-size:15.5px;font-weight:600;box-shadow:0 14px 34px rgba(24,24,24,.26);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--ui),transform var(--ui) var(--snap);
}
.toast[data-show="true"]{opacity:1;transform:none}

/* ---------- 26. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .ticker-track{animation:none;transform:none}
  [data-rev]{opacity:1 !important;transform:none !important;clip-path:none !important}
}

/* ---------- 27. WebGL / fallback swap ---------- */
[data-gl="on"] > .stage-fallback{opacity:0;pointer-events:none;transition:opacity 420ms var(--ease)}
.fridge-stage:focus{outline:none}
.fridge-stage:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.fridge-stage[data-hint="open"]{cursor:pointer}
.fridge-stage[data-hint="take"]{cursor:grab}

/* ---------- 28. photo plates, until real photography lands ---------- */
.ph[data-missing],.step-img[data-missing],.post-img[data-missing]{
  background:
    repeating-linear-gradient(135deg,rgba(24,24,24,.05) 0 12px,transparent 12px 24px),
    var(--grey);
  display:grid;place-items:center;
}
.ph[data-missing]::after,.step-img[data-missing]::after,.post-img[data-missing]::after{
  content:"photo · " attr(data-shot);
  position:static;background:none;mix-blend-mode:normal;opacity:.5;
  font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink);
}
.ph[data-missing]::after{position:absolute;inset:auto auto 14px 16px;opacity:.55}

/* ---------- 29. print-quality detail ---------- */
.card{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='90' height='90' filter='url(%23n)' opacity='.5'/></svg>");
  background-blend-mode:multiply;background-size:180px}

[hidden]{display:none !important}

/* ============================================================
   30. Store pages — built only from the tokens above.
   No new colours: cream, ink, white, grey and the five flavours.
   ============================================================ */

/* header extras: same look as the Basket button */
.hdr-act .icon-btn svg{width:18px;height:18px;flex:none}
.hdr-act a.icon-btn{text-decoration:none}
.hdr-act .hide-s{display:none}
@media(min-width:1000px){.hdr-act .hide-s{display:inline-flex}}
@media(max-width:1279px){.hdr-act .ico-txt{display:none}}
@media(min-width:1280px){.hdr-act .icon-btn svg{display:none}}
.mnav-sub{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}
.mnav .mnav-sub a{font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:0;opacity:.75}

/* breadcrumbs + page head */
.crumbs{font-size:14px;opacity:.72;margin:0 0 18px}
.crumbs a{text-decoration:none;border-bottom:1px solid currentColor}
.page-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:end}
.page-head > :first-child{grid-column:1/9}
.page-head > :last-child:not(:first-child){grid-column:9/13}
@media(max-width:900px){.page-head{grid-template-columns:1fr}.page-head > *{grid-column:1/-1 !important}}

/* chips (filters, tags) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:4px;
  padding:7px 13px;font-size:14.5px;font-weight:600;text-decoration:none;background:transparent;cursor:pointer;
  transition:background var(--ui),color var(--ui);
}
.chip:hover,.chip[aria-current="true"]{background:var(--ink);color:var(--cream)}

/* forms */
.lbl{display:block;font-size:14px;font-weight:650;margin:0 0 6px}
.form-stack{display:grid;gap:16px}
.form-stack .field{width:100%;min-width:0}
textarea.field{min-height:150px;resize:vertical}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.pw{position:relative;display:flex}
.pw .field{padding-right:72px}
.pw button{position:absolute;right:8px;top:50%;translate:0 -50%;background:none;border:0;font-weight:650;font-size:14px;cursor:pointer;padding:6px 8px;text-decoration:underline}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ink);margin:2px 0 0;flex:none}
.form-msg{font-size:15px;font-weight:600;margin:0;padding:12px 14px;border-left:3px solid var(--ink);background:var(--white)}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row > *{flex:1;min-width:180px}

/* panels */
.panel{background:var(--white);padding:clamp(22px,2.6vw,36px);border-radius:4px}
.panel-acc{background:var(--acc-soft)}
.auth-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.auth-grid > .panel:first-child{grid-column:1/7}
.auth-grid > .panel:last-child{grid-column:7/13}
@media(max-width:900px){.auth-grid{grid-template-columns:1fr}.auth-grid > .panel{grid-column:1/-1 !important}}
.auth-solo{max-width:560px}
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.split > .s-main{grid-column:1/8}
.split > .s-side{grid-column:9/13}
@media(max-width:980px){.split{grid-template-columns:1fr}.split > *{grid-column:1/-1 !important}}

/* product cards with tools (category, saved) */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
@media(max-width:1180px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cgrid{grid-template-columns:1fr}}
.cgrid > .card{grid-column:auto;min-height:clamp(380px,34vw,480px)}
.pcard-link{text-decoration:none}
.pcard-link::after{content:"";position:absolute;inset:0;z-index:1}
.pcard .card-foot,.pcard-tools{z-index:3}
.pcard-tools{position:relative;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.pcard .pcard-tools:empty{display:none}
.tool{
  display:inline-flex;align-items:center;gap:6px;background:var(--cream);border:2px solid var(--ink);border-radius:4px;
  padding:5px 10px;font-size:13.5px;font-weight:650;cursor:pointer;transition:background var(--ui),color var(--ui);
}
.tool:hover,.tool[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.tool[aria-pressed="true"] svg path{fill:currentColor}
.pcard .pill{cursor:pointer;font:inherit;font-weight:650;font-size:15px;color:inherit}
.pcard .pill[aria-disabled="true"]{opacity:.5;cursor:default}

/* category page */
.cat-band{padding-block:clamp(48px,5vw,84px);transition:background var(--prod) var(--ease),color var(--prod) var(--ease)}
.cat-layout{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.fside{grid-column:1/4;position:sticky;top:calc(var(--hdr) + 20px)}
.cat-main{grid-column:4/13}
@media(max-width:980px){.cat-layout{grid-template-columns:1fr}.fside,.cat-main{grid-column:1/-1;position:static}}
.fside h4{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:0 0 10px;font-weight:650}
.fgroup{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid rgba(24,24,24,.18)}
.fside .flist{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.fside .flist a{text-decoration:none;font-weight:600;display:block;padding:5px 0;border-left:3px solid transparent;padding-left:10px;transition:border-color var(--ui)}
.fside .flist a:hover,.fside .flist a[aria-current="true"]{border-color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--ink)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.toolbar select{min-width:200px;flex:none;padding:10px 40px 10px 14px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid rgba(24,24,24,.16);vertical-align:top}
.tbl thead th,.tbl thead td{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;font-weight:650}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.status{display:inline-block;font-size:13.5px;font-weight:650;border-radius:3px;padding:3px 9px;border:1.5px solid var(--ink)}
.status.s0{background:var(--le-1)}.status.s1{background:var(--mg-1)}.status.s2{background:var(--gf-2)}.status.s3{background:var(--pe-1)}
.cmp{min-width:720px;table-layout:fixed}
.cmp thead th{text-transform:none;letter-spacing:-.01em;opacity:1;font-size:16px}
.cmp tbody th{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;font-weight:650;width:150px}
.cmp-can{height:190px;border-radius:4px;display:grid;place-items:center;margin-bottom:10px}
.cmp-can img{height:176px;width:auto;max-width:none;filter:drop-shadow(0 14px 18px rgba(24,24,24,.22))}
.cmp-name{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1;letter-spacing:-.02em;text-decoration:none;margin-bottom:6px}

/* account */
.acct{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.acct-nav{grid-column:1/4;display:grid;gap:2px;position:sticky;top:calc(var(--hdr) + 20px)}
.acct-main{grid-column:4/13}
@media(max-width:980px){.acct{grid-template-columns:1fr}.acct-nav,.acct-main{grid-column:1/-1;position:static}.acct-nav{display:flex;flex-wrap:wrap;gap:8px}}
.acct-nav a,.acct-nav button{all:unset;box-sizing:border-box;cursor:pointer;font-weight:600;padding:10px 14px;border-radius:4px;border:2px solid transparent}
.acct-nav a:hover,.acct-nav button:hover{border-color:var(--ink)}
.acct-nav a[aria-current="page"]{background:var(--ink);color:var(--cream)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin:26px 0 34px}
@media(max-width:620px){.stats{grid-template-columns:1fr}}
.stat{padding:22px;border-radius:4px;text-decoration:none;display:block;transition:transform var(--ui) var(--snap)}
.stat:hover{transform:translate(-2px,-2px)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.9;letter-spacing:-.03em}

/* coupons */
.cpns{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.cpn{display:grid;grid-template-columns:minmax(200px,3fr) 7fr;background:var(--white);border-radius:4px;position:relative;overflow:hidden}
.cpn-l{background:var(--acc);padding:26px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-right:2px dashed var(--ink)}
.cpn:nth-child(2) .cpn-l{background:var(--pe-1)}
.cpn:nth-child(3) .cpn-l{background:var(--mg-1)}
.cpn-code{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.02em;line-height:1}
.cpn-r{padding:26px}
.cpn-r .note{margin:8px 0 16px;max-width:52ch}
.cpn-act{display:flex;gap:10px;flex-wrap:wrap}
.cpn.is-dead{opacity:.55}
.cpn.is-dead .cpn-l{background:var(--grey)}
.cpn.is-dead .cpn-code{text-decoration:line-through}
@media(max-width:620px){.cpn{grid-template-columns:1fr}.cpn-l{border-right:0;border-bottom:2px dashed var(--ink)}}

/* basket coupon + badges */
.coupon-box{margin:18px 0;padding-top:18px;border-top:1px solid rgba(24,24,24,.18)}
.coupon-box form{display:flex;gap:8px}
.coupon-box .field{min-width:0;padding:11px 14px;text-transform:uppercase}
.coupon-box .btn{padding:11px 16px}
[data-coupon-msg]{font-size:14px;margin:8px 0 0;font-weight:600}
[data-coupon-msg][data-ok="false"]{opacity:.7}
.sumrow{display:flex;justify-content:space-between;font-size:15.5px;padding-bottom:8px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.badges span{font-size:12.5px;font-weight:700;border:1.5px solid rgba(24,24,24,.35);border-radius:3px;padding:4px 8px;letter-spacing:.02em}

/* tracking timeline */
.tline{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:t}
.tline li{border-top:6px solid var(--grey);padding-top:14px;display:flex;flex-direction:column;gap:2px}
.tline li.done{border-color:var(--ink)}
.tline li.now{border-color:var(--acc)}
.tline li.now b::after{content:" ← now";font-weight:600;opacity:.6;font-size:14px}
@media(max-width:620px){.tline{grid-template-columns:1fr}.tline li{border-top:0;border-left:6px solid var(--grey);padding:4px 0 4px 14px}.tline li.done{border-color:var(--ink)}.tline li.now{border-color:var(--acc)}}

/* journal: article */
.article{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.article > .a-main{grid-column:1/9}
.article > .a-side{grid-column:10/13}
@media(max-width:980px){.article{grid-template-columns:1fr}.article > *{grid-column:1/-1 !important;position:static !important}}
.a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14.5px;margin:22px 0 28px}
.a-meta a{font-weight:650}
.a-hero{aspect-ratio:16/9;overflow:hidden;background:var(--grey);margin-bottom:clamp(28px,3vw,44px)}
.a-hero img{width:100%;height:100%;object-fit:cover}
.prose{font-size:18px;line-height:1.65;max-width:66ch}
.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.025em;line-height:1;margin:1.6em 0 .5em}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--acc);font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.08;letter-spacing:-.02em}
.prose p{margin:0 0 1.05em}
.a-tags{margin:30px 0}
.bio{display:flex;gap:20px;align-items:flex-start;padding:26px;background:var(--white);border-radius:4px;margin:30px 0}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);border-block:1px solid rgba(24,24,24,.18);padding-block:20px;margin:30px 0}
.pnav a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.pnav b{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.05;letter-spacing:-.02em}
.avatar{width:44px;height:44px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font-weight:800;font-size:15px;font-family:var(--display)}
.avatar.sm{width:36px;height:36px;font-size:14px}
.avatar.lg{width:72px;height:72px;font-size:24px}
.avatar.xl{width:clamp(110px,12vw,170px);height:clamp(110px,12vw,170px);font-size:clamp(2.4rem,4vw,3.6rem)}
.clist{list-style:none;padding:0;margin:18px 0 30px;display:grid;gap:18px}
.clist li{display:flex;gap:14px;align-items:flex-start}
.side-block{margin-bottom:34px}
.side-block h4{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:0 0 14px;font-weight:650}
.mini{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.mini a{display:grid;grid-template-columns:70px 1fr;gap:12px;text-decoration:none;align-items:center}
.mini b{display:block;font-size:15px;line-height:1.25;font-weight:650}
.mp-img{display:block;height:56px;overflow:hidden}
.mp-img img{width:100%;height:100%;object-fit:cover}
.clist-cats{list-style:none;padding:0;margin:0}
.clist-cats li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(24,24,24,.16)}
.clist-cats a{text-decoration:none;font-weight:600}
.au-head{display:flex;gap:clamp(20px,3vw,44px);align-items:center;flex-wrap:wrap}
.au-mini{display:flex;gap:12px;align-items:center;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(24,24,24,.16)}
.au-mini b{display:block}

/* search */
.sbar{display:flex;gap:10px;max-width:760px}
.sbar .field{font-size:18px;padding:16px 18px}
.sr-grp{margin-top:34px}
.sr-h{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:650;margin:0 0 6px;opacity:.8}
.sr-row{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(24,24,24,.16);text-decoration:none}
.sr-row:hover b{text-decoration:underline}
.sr-row b{display:block;font-size:17px;font-weight:650}
.sr-row .meta{display:block;max-width:80ch}
.sr-thumb{height:64px;border-radius:3px;display:grid;place-items:center;overflow:hidden}
.sr-thumb img{height:56px;width:auto}
.sr-q{background:var(--ink);color:var(--cream);font-family:var(--display);font-weight:800;font-size:1.6rem}

/* FAQ accordion */
.faq{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,1.9vw,1.65rem);letter-spacing:-.02em;line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6em;line-height:.6;transition:transform var(--ui) var(--ease);flex:none}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
.faq p{margin:0 0 22px;max-width:62ch}
.faq-group{margin-bottom:clamp(40px,5vw,70px)}
.faq-group > h2{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:0}

/* contact */
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--col-gap)}
@media(max-width:620px){.ccards{grid-template-columns:1fr}}
.ccard{padding:22px;border-radius:4px}
.ccard h3{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 6px}
.ccard a{font-weight:650}

/* legal / single page */
.legal{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.legal-toc{grid-column:1/4;position:sticky;top:calc(var(--hdr) + 20px);display:grid;gap:2px;font-size:15px}
.legal-toc a{text-decoration:none;padding:6px 0 6px 12px;border-left:3px solid rgba(24,24,24,.14)}
.legal-toc a[aria-current]{border-color:var(--ink);font-weight:650}
.legal-body{grid-column:5/13}
@media(max-width:980px){.legal{grid-template-columns:1fr}.legal-toc{display:none}.legal-body{grid-column:1/-1}}
.legal-body h2{scroll-margin-top:calc(var(--hdr) + 20px)}
.legal-body ul{padding-left:1.2em;margin:0 0 1.05em}
.legal-body li{margin-bottom:.4em}

/* thank you */
.thanks-band{background:var(--pe-1);padding:clamp(28px,3vw,44px);border-radius:4px;display:grid;grid-template-columns:repeat(4,auto);gap:16px 40px;justify-content:start;margin:26px 0 34px}
@media(max-width:760px){.thanks-band{grid-template-columns:1fr 1fr}}
.thanks-band b{display:block;font-size:19px}
.olines{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px;font-size:15.5px}
.olines li{display:flex;justify-content:space-between;gap:14px}

/* 404 + coming soon */
.e404{min-height:calc(100svh - var(--hdr) - 1px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center;padding-block:clamp(40px,5vw,80px)}
.e404-copy{grid-column:1/7;position:relative;z-index:2}
.e404-art{grid-column:7/13;position:relative;display:grid;place-items:center;min-height:420px}
.e404-num{font-family:var(--display);font-weight:800;font-size:clamp(7rem,22vw,20rem);line-height:.8;letter-spacing:-.05em;color:var(--acc-soft);position:absolute;inset:auto 0;text-align:center;z-index:0;user-select:none}
.e404-art img.can{position:relative;z-index:1;height:min(56vh,460px);width:auto;rotate:-24deg;filter:drop-shadow(0 30px 40px rgba(24,24,24,.26))}
.e404-art img.ill{position:absolute;width:26%;z-index:2}
@media(max-width:900px){.e404{grid-template-columns:1fr}.e404-copy,.e404-art{grid-column:1/-1}.e404-art{min-height:320px;order:-1}}
.soon{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:24px var(--gut);background:var(--pe-1);overflow:hidden;position:relative}
.soon-top{display:flex;justify-content:space-between;align-items:center}
.soon-mid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center;max-width:var(--max);width:100%;margin:0 auto}
.soon-copy{grid-column:1/8;position:relative;z-index:2}
.soon-art{grid-column:8/13;position:relative;display:grid;place-items:center;min-height:380px}
.soon-art img{position:absolute}
@media(max-width:900px){.soon-mid{grid-template-columns:1fr}.soon-copy,.soon-art{grid-column:1/-1}.soon-art{min-height:260px;order:-1}}
.cd{display:flex;gap:clamp(10px,2vw,24px);margin:28px 0}
.cd div{background:var(--ink);color:var(--cream);border-radius:4px;padding:14px 16px;min-width:clamp(72px,8vw,110px);text-align:center}
.cd b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,3.8rem);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cd span{font-size:13px;opacity:.7;text-transform:uppercase;letter-spacing:.08em}
.mystery{width:min(300px,70%);aspect-ratio:1/1.9;border:3px dashed var(--ink);border-radius:40px 40px 30px 30px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(5rem,10vw,9rem);rotate:8deg;position:relative;z-index:1}

/* leaving popup */
.pop{position:fixed;inset:0;z-index:140;background:rgba(24,24,24,.5);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--prod) var(--ease)}
.pop[data-open="true"]{opacity:1;pointer-events:auto}
.pop-card{background:var(--cream);border-radius:4px;width:min(860px,100%);max-height:calc(100svh - 40px);overflow:auto;display:grid;grid-template-columns:5fr 7fr;position:relative;transform:translateY(18px) scale(.98);transition:transform var(--prod) var(--snap)}
.pop[data-open="true"] .pop-card{transform:none}
.pop-art{background:var(--mg-1);display:grid;place-items:center;position:relative;min-height:320px;overflow:hidden}
.pop-art img{height:78%;width:auto;max-height:340px;rotate:-10deg;filter:drop-shadow(0 24px 30px rgba(24,24,24,.26))}
.pop-art .pop-ill{position:absolute;right:6%;top:8%;width:30%;height:auto;rotate:12deg;filter:none}
.pop-copy{padding:clamp(26px,3.4vw,46px)}
.pop-x{position:absolute;top:10px;right:10px;z-index:2}
.pop-no{background:none;border:0;padding:0;margin-top:18px;font-size:14px;opacity:.6;text-decoration:underline;cursor:pointer}
.pop-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pop-code span{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.01em;border:2px dashed var(--ink);padding:6px 16px;border-radius:4px}
@media(max-width:700px){.pop-card{grid-template-columns:1fr}.pop-art{min-height:170px}.pop-art img{height:150px}}
/* grid children with tables or long words must be allowed to shrink */
.acct-main,.acct-nav,.s-main,.s-side,.cat-main,.fside,.a-main,.a-side,.legal-body,.auth-grid > *,.page-head > *{min-width:0}
@media(max-width:980px){
  .fside{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--col-gap)}
  .fside .fgroup:first-child{grid-column:1/-1}
  .fside .flist{display:flex;flex-wrap:wrap;gap:6px}
  .fside .flist a{border:2px solid var(--ink);border-radius:4px;padding:6px 12px;font-size:14.5px}
  .fside .flist a[aria-current="true"]{background:var(--ink);color:var(--cream)}
  .fside .fgroup{margin-bottom:16px;padding-bottom:16px}
  .fside [data-cat-reset]{grid-column:1/-1;justify-self:start}
}
/* store cards: the can takes its own row between title and text, so the
   description, price and tools can never run into it */
.pcard .card-can{position:relative;left:auto;top:auto;translate:none;height:clamp(280px,24vw,340px);width:auto;margin:-14px auto -34px;align-self:center}
.pcard .card-ill.a{bottom:auto;top:34%}