/*
 * Dejunel — Packaging Engine.
 *
 * One deviation from "verbatim": the bare `.panel` and `.card` selectors are
 * scoped to `.stack` and `.shop`. WordPress does not have this file to itself —
 * WooCommerce's product-tab container also carries the class `panel`, and
 * inherited `height:100svh` from the colour stack. The rendered front page is
 * unchanged, because every `.panel` on it is inside `.stack` and every `.card`
 * inside `.shop`.
 * Extracted verbatim from design-lab/y-packaging-engine.html so the shipped design is
 * byte-for-byte the approved prototype. Anything that had to become dynamic for
 * WordPress is driven by custom properties written by PHP (--n, --c, --c2, --on,
 * --motif, --a) rather than by editing the rules below.
 */
/* ============================================================ 0. TOKENS */
@property --p    { syntax:'<number>'; inherits:true;  initial-value:0; }
@property --pp   { syntax:'<number>'; inherits:true;  initial-value:0; }
@property --wght { syntax:'<number>'; inherits:false; initial-value:600; }
@property --spin { syntax:'<angle>';  inherits:false; initial-value:0deg; }
@property --shine{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

:root{
  --ink:#0B0E17; --paper:#F2ECE0; --bone:#FFFBF2;
  --blue:#1B46E5; --blueD:#0C2ABE; --blueL:#3A63F5;
  --corn:#FFC21A; --brick:#E0431F; --berry:#D01463; --green:#00A05B;
  --orange:#FF6A13; --brown:#8A4620; --violet:#6B2BD9; --lime:#C6F03C;
  --cyan:#12CBE0; --navy:#1E2A5E; --teal:#0E7C8A; --gold:#E39B00;
  --dis:'Oswald','Arial Narrow',sans-serif;
  --ui:'Golos Text',system-ui,'Segoe UI',sans-serif;
  --stage:#1B46E5;
  --gut:clamp(14px,4vw,56px);
  --rule:1px solid color-mix(in oklab, currentColor 22%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--ui); font-size:clamp(15px,1.05vw,17px); line-height:1.55;
  font-weight:450; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--dis); font-weight:600;
  line-height:.95; letter-spacing:-.012em; text-transform:uppercase; }
p{ margin:0; }
::selection{ background:var(--lime); color:var(--ink); }

.wrap{ width:min(1560px,100% - var(--gut)*2); margin-inline:auto; }
.eyebrow{
  font-family:var(--ui); font-size:clamp(10px,.78vw,12px); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; line-height:1.2;
}
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* ============================================================ 1. SCROLL RAIL */
.rail{
  position:fixed; inset:0 0 auto 0; height:4px; z-index:120;
  background:color-mix(in oklab,var(--ink) 70%, transparent); pointer-events:none;
}
.rail i{
  display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--corn),var(--lime) 30%,var(--cyan) 62%,var(--berry));
}

/* ============================================================ 2. HEADER */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:110;
  padding:clamp(10px,1.1vw,18px) 0;
  background:color-mix(in oklab,var(--ink) 74%, transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid color-mix(in oklab,var(--paper) 14%, transparent);
  transition:padding .35s cubic-bezier(.2,.8,.2,1), background .4s;
}
.hd-in{ display:flex; align-items:center; gap:clamp(12px,2vw,40px); }
.mark{ display:flex; align-items:baseline; gap:.4em; margin-right:auto; min-height:44px; }
.hd.small{ padding:6px 0; background:color-mix(in oklab,var(--ink) 92%,transparent); }
.hd.small .mark b{ --wght:700; letter-spacing:-.05em; }
.hd.small .mark .bar{ width:clamp(16px,2vw,34px); }
.mark b{
  font-family:var(--dis); font-size:clamp(21px,2.1vw,30px);
  font-variation-settings:'wght' var(--wght); --wght:620;
  letter-spacing:-.028em; text-transform:uppercase; line-height:1;
  transition:--wght .4s, letter-spacing .4s;
}
.mark .md{
  font-size:9px; font-weight:800; letter-spacing:.18em; padding:.28em .45em;
  background:var(--corn); color:var(--ink); border-radius:2px; translate:0 -.5em;
}
.mark .bar{
  width:clamp(26px,3.4vw,58px); height:6px; align-self:center;
  background:linear-gradient(90deg,var(--blue) 0 25%,var(--corn) 25% 50%,var(--brick) 50% 75%,var(--green) 75%);
  transition:width .4s;
}
.nav{ display:flex; gap:clamp(10px,1.5vw,30px); }
.nav a{
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:12px 2px; position:relative; min-height:44px; display:flex; align-items:center;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:8px; height:2px;
  background:var(--corn); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover::after,.nav a[aria-current]::after{ transform:scaleX(1); }
.lang{
  display:flex; border:1px solid color-mix(in oklab,var(--paper) 34%,transparent);
  border-radius:999px; overflow:hidden;
}
.lang button{
  font:inherit; font-size:12px; font-weight:800; letter-spacing:.1em;
  min-height:38px; min-width:46px; padding:0 4px; border:0; cursor:pointer;
  background:transparent; color:var(--paper); transition:background .25s,color .25s;
}
.lang button[aria-pressed="true"]{ background:var(--paper); color:var(--ink); }
.burger{
  display:none; width:48px; height:44px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0 6px;
}
.burger i{ display:block; height:2px; background:var(--paper); transition:transform .3s,opacity .3s; }
.burger i:nth-child(2){ width:70%; margin-left:auto; }

.sheet{ display:none; }
:root.nav-open .sheet{
  display:grid; position:fixed; inset:0; z-index:109; padding:96px var(--gut) 32px;
  background:var(--ink); align-content:start; gap:2px;
  grid-template-columns:1fr;
}
.sheet a{
  font-family:var(--dis); font-size:clamp(30px,10vw,46px); font-weight:600;
  text-transform:uppercase; line-height:1; padding:.34em .5em; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; color:var(--ink);
}
.sheet a span{ font-family:var(--ui); font-size:11px; font-weight:800; letter-spacing:.16em; opacity:.62; }
.sheet a:nth-child(1){ background:var(--blue); color:var(--bone); }
.sheet a:nth-child(2){ background:var(--corn); }
.sheet a:nth-child(3){ background:var(--brick); color:var(--bone); }
.sheet a:nth-child(4){ background:var(--lime); }

/* ============================================================ 3. HERO */
.hero{
  position:relative; min-height:100svh; isolation:isolate; overflow:clip;
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in oklab,var(--blueL) 68%,transparent), transparent 62%),
    linear-gradient(168deg,var(--blueD),var(--blue) 46%,#0A1E86);
  padding:clamp(96px,12vh,150px) 0 0;
  display:grid; grid-template-columns:minmax(0,1fr); align-content:end;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(85deg,
    color-mix(in oklab,#061A6E 78%,transparent) 0%,
    color-mix(in oklab,#061A6E 44%,transparent) 46%,
    transparent 72%);
}
#cv1{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.tw{
  position:absolute; inset:8% 0 auto 0; z-index:2; pointer-events:none;
  mix-blend-mode:overlay; opacity:.82; display:grid; gap:clamp(0px,.2vw,4px);
}
.tw div{ overflow:hidden; white-space:nowrap; min-width:0; }
.tw span{
  display:inline-block; font-family:var(--dis); font-weight:600;
  font-size:clamp(38px,7vw,104px); line-height:1.08; letter-spacing:-.02em;
  color:var(--bone); padding-right:.4em;
  animation:tw 34s linear infinite;
}
.tw div:nth-child(2) span{ animation-duration:26s; animation-direction:reverse; color:var(--corn); }
.tw div:nth-child(3) span{ animation-duration:44s; }
.tw div:nth-child(4) span{ animation-duration:30s; animation-direction:reverse; }
.tw div:nth-child(5) span{ animation-duration:38s; color:var(--lime); }
@keyframes tw{ to{ transform:translate3d(-50%,0,0); } }

.hero-grid{
  position:relative; z-index:4; display:grid; gap:clamp(20px,3vw,48px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end;
  padding-bottom:clamp(20px,4vh,48px);
}
.h1{ font-size:clamp(62px,13.5vw,206px); line-height:.86; letter-spacing:-.035em; }
.h1 .a{ display:block; color:var(--bone); }
.h1 .b{
  display:block; color:transparent;
  -webkit-text-stroke:clamp(2px,.32vw,5px) var(--corn);
  paint-order:stroke fill;
}
.hero-kick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(12px,2vh,26px); }
.chip{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; background:color-mix(in oklab,var(--bone) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--bone) 34%,transparent); color:var(--bone);
}
.chip.hot{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.lede{
  margin-top:clamp(16px,2.4vh,30px); max-width:46ch;
  font-size:clamp(15px,1.25vw,20px); line-height:1.5; color:color-mix(in oklab,var(--bone) 88%,transparent);
}
.hero-meta{
  margin-top:clamp(16px,2.6vh,32px); display:flex; flex-wrap:wrap;
  gap:clamp(14px,2.4vw,40px); padding-top:14px;
  border-top:1px solid color-mix(in oklab,var(--bone) 30%,transparent);
}
.hero-meta div b{
  display:block; font-family:var(--dis); font-size:clamp(26px,3.4vw,48px);
  font-weight:600; line-height:.9; color:var(--corn);
}
.hero-meta div span{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.hero-pack{
  display:grid; place-items:center; min-height:clamp(300px,46vh,560px);
  transform:translate3d(calc(var(--mx,0)*22px),calc(var(--my,0)*-16px),0);
}

/* hero ticker */
.strip{
  position:relative; z-index:5; overflow:hidden; white-space:nowrap; min-width:0;
  background:var(--ink); border-top:2px solid var(--corn); padding:11px 0;
}
.strip span{ display:inline-block; animation:tw 42s linear infinite; }
.strip b{
  font-family:var(--dis); font-weight:500; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; padding:0 .55em; color:var(--bone);
}
.strip b i{ font-style:normal; color:var(--corn); font-variation-settings:'wght' var(--wght); --wght:600; }
.strip b::after{ content:'◆'; padding-left:1.1em; font-size:8px; color:var(--lime); vertical-align:middle; }

/* ============================================================ 4. THE PACK
   A manufactured product object. No photograph, no placeholder: six faces,
   per-face lighting, an edge highlight, a cast shadow and a typeset label. */
.pk{
  --w:clamp(150px,17vw,232px); --h:calc(var(--w)*1.44); --d:calc(var(--w)*.36);
  --c:var(--blue); --c2:#0A2597; --on:var(--bone);
  width:var(--w); height:var(--h); position:relative;
  perspective:1200px; perspective-origin:50% 42%;
  font-size:calc(var(--w)/15);
}
.pk-b{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx,-7deg)) rotateY(calc(var(--ry,-27deg) + var(--spin)));
  will-change:transform;
}
.pk-b>.f{ position:absolute; left:50%; top:50%; }
.fr,.bk{ width:var(--w); height:var(--h); margin-left:calc(var(--w)/-2); margin-top:calc(var(--h)/-2); }
.fr{ transform:translateZ(calc(var(--d)/2)); }
.bk{ transform:translateZ(calc(var(--d)/-2)) rotateY(180deg); }
.rt,.lf{ width:var(--d); height:var(--h); margin-left:calc(var(--d)/-2); margin-top:calc(var(--h)/-2); }
.rt{ transform:translateX(calc(var(--w)/2)) rotateY(90deg); }
.lf{ transform:translateX(calc(var(--w)/-2)) rotateY(-90deg); }
.tp{
  width:var(--w); height:var(--d); margin-left:calc(var(--w)/-2); margin-top:calc(var(--d)/-2);
  transform:translateY(calc(var(--h)/-2)) rotateX(90deg);
}
.f{
  background:var(--c); overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* faked lighting per face */
.fr{ overflow:visible; transform-style:preserve-3d; box-shadow:inset 0 0 0 1px color-mix(in oklab,#000 26%,transparent); }
.fr::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(104deg,
    color-mix(in oklab,#fff 26%,transparent) 0%,
    color-mix(in oklab,#fff 4%,transparent) 26%,
    color-mix(in oklab,#000 8%,transparent) 62%,
    color-mix(in oklab,#000 26%,transparent) 100%);
  mix-blend-mode:soft-light;
}
.rt{ background:linear-gradient(180deg,color-mix(in oklab,var(--c2) 74%,#000),var(--c2)); }
.rt::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,color-mix(in oklab,#fff 22%,transparent),transparent 55%);
}
.lf{ background:color-mix(in oklab,var(--c2) 60%,#000); }
.tp{ background:linear-gradient(180deg,color-mix(in oklab,var(--c) 62%,#fff),color-mix(in oklab,var(--c) 88%,#fff)); }
.tp::after{
  content:''; position:absolute; inset:14% 8%; border-radius:2px;
  background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--c2) 40%,transparent) 0 2px,transparent 2px 9px);
  opacity:.5;
}
.bk{ background:color-mix(in oklab,var(--c) 78%,#000); }
.bk::after{
  content:''; position:absolute; inset:12% 14%;
  background:repeating-linear-gradient(180deg,color-mix(in oklab,#fff 40%,transparent) 0 3px,transparent 3px 12px);
  opacity:.35;
}
/* cast shadow */
.pk-sh{
  position:absolute; left:6%; right:-6%; bottom:-7%; height:11%;
  background:radial-gradient(closest-side,color-mix(in oklab,#000 62%,transparent),transparent 74%);
  filter:blur(9px); z-index:-1;
}

/* ---- the label: real typesetting on the front face ---- */
.lb{
  position:absolute; inset:0; z-index:2; display:grid; color:var(--on);
  grid-template-rows:auto auto 1fr auto auto; padding:.78em .72em .62em;
}
.l1{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--ui); font-size:.52em; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; padding-bottom:.42em;
  border-bottom:1px solid color-mix(in oklab,currentColor 55%,transparent);
}
.l1 em{ font-style:normal; font-size:.82em; letter-spacing:.1em; opacity:.8; }
.l2{
  margin:.5em 0 .32em; display:inline-flex; align-self:start; align-items:baseline; gap:.22em;
  background:var(--on); color:var(--c2); padding:.1em .34em .16em; border-radius:1px;
  font-family:var(--dis); font-weight:700; font-size:.92em; letter-spacing:-.02em;
  text-transform:uppercase; line-height:1;
}
.l2 i{ font-style:normal; font-weight:300; }
.art{
  position:relative; display:grid; place-items:center; margin:.2em 0 .3em; min-height:0;
  border:1px solid color-mix(in oklab,currentColor 32%,transparent);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in oklab,#fff 20%,transparent), transparent 62%),
    repeating-linear-gradient(-45deg,color-mix(in oklab,#000 12%,transparent) 0 1px,transparent 1px 7px);
}
.art svg{ width:66%; height:auto; color:var(--on); opacity:.96; }
.art::before{
  content:''; position:absolute; inset:.28em; border:1px dashed color-mix(in oklab,currentColor 26%,transparent);
}
.l3{
  font-family:var(--dis); font-weight:600; font-size:1.06em; line-height:.96;
  letter-spacing:-.018em; text-transform:uppercase; margin-bottom:.3em;
  text-wrap:balance;
}
.l4{
  display:flex; align-items:center; justify-content:space-between; gap:.4em;
  font-family:var(--ui); font-size:.5em; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding-top:.44em;
  border-top:1px solid color-mix(in oklab,currentColor 55%,transparent);
}
.wt{ background:var(--on); color:var(--c2); padding:.28em .5em; border-radius:999px; letter-spacing:.06em; }
.seal{
  position:absolute; z-index:3; right:-.42em; top:34%; width:3.5em; height:3.5em;
  transform:translateZ(10px);
  display:grid; place-items:center; text-align:center; rotate:-13deg;
  font-family:var(--ui); font-size:.44em; font-weight:800; letter-spacing:.06em;
  line-height:1.05; text-transform:uppercase; color:var(--ink); background:var(--corn);
  clip-path:polygon(50% 0,62% 9%,76% 5%,83% 18%,97% 22%,96% 37%,100% 50%,96% 63%,97% 78%,83% 82%,76% 95%,62% 91%,50% 100%,38% 91%,24% 95%,17% 82%,3% 78%,4% 63%,0 50%,4% 37%,3% 22%,17% 18%,24% 5%,38% 9%);
  box-shadow:0 4px 14px color-mix(in oklab,#000 40%,transparent);
}

/* idle life so a pack is never a dead object */
@keyframes packIdle{
  0%   { --spin:-9deg; }
  50%  { --spin:9deg; }
  100% { --spin:-9deg; }
}
.pk-hero{ --w:clamp(190px,21vw,300px); }
.pk-hero .pk-b{ animation:packIdle 11s ease-in-out infinite; }
.pk-hero{ filter:drop-shadow(0 40px 60px color-mix(in oklab,#000 55%,transparent)); }

/* ============================================================ 5. THE DRUM */
.drum-sec{ position:relative; height:360vh; background:var(--ink); }
.drum-stage{
  position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate;
  background:
    radial-gradient(120% 78% at 50% 108%, color-mix(in oklab,#000 62%,transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab,var(--stage) 82%,#000) 0%, var(--stage) 58%, color-mix(in oklab,var(--stage) 72%,#000) 100%);
  transition:background .6s cubic-bezier(.4,0,.2,1);
  display:grid; grid-template-rows:auto 1fr auto;
}
.drum-hd{ padding:clamp(78px,10vh,120px) var(--gut) 0; display:flex; justify-content:space-between; gap:20px; align-items:start; }
.drum-hd h2{ font-size:clamp(30px,4.6vw,74px); max-width:12ch; }
.drum-hd .eyebrow{ text-align:right; opacity:.8; max-width:20ch; }
.scene{ position:relative; perspective:1500px; perspective-origin:50% 44%; }
.drum{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d;
  top:46%;
  transform:translate(-50%,-50%) rotateX(-9deg) rotateY(calc(var(--p) * -720deg));
}
.drum .pk{
  --R:clamp(240px,29vw,460px); --w:clamp(112px,12.3vw,174px);
  position:absolute; left:calc(var(--w)/-2); top:calc(var(--h)/-2);
  /* --cw is the wrapped counter-angle: the pack swings toward the camera as the
     drum turns, without ever flipping past its own back. 0deg is a valid default. */
  transform:rotateY(var(--a)) translateZ(var(--R)) rotateY(var(--cw,0deg));
}
.drum .pk-b{ animation:packIdle 9s ease-in-out infinite; }
.drum .pk:nth-child(2n) .pk-b{ animation-duration:13s; animation-direction:reverse; }
.floor{
  position:absolute; left:50%; top:50%; width:min(96vw,1180px); aspect-ratio:1;
  translate:-50% -50%; transform:rotateX(84deg) translateZ(clamp(-190px,-13vw,-110px));
  border-radius:50%;
  background:
    repeating-radial-gradient(circle, color-mix(in oklab,#fff 16%,transparent) 0 1px, transparent 1px 44px),
    radial-gradient(closest-side, color-mix(in oklab,#000 44%,transparent), transparent 78%);
  opacity:.55; pointer-events:none;
}
.hud{
  position:relative; z-index:4;
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:clamp(10px,2vw,28px);
  padding:clamp(40px,9vh,90px) var(--gut) clamp(22px,4vh,44px);
  background:linear-gradient(to top,
    color-mix(in oklab,#04060E 78%,transparent) 0%,
    color-mix(in oklab,#04060E 52%,transparent) 52%, transparent 100%);
}
.hud-idx{
  font-family:var(--dis); font-weight:200; font-size:clamp(46px,8vw,132px); line-height:.8;
  letter-spacing:-.04em; color:color-mix(in oklab,var(--bone) 84%,transparent);
}
.hud-idx b{ font-weight:700; }
.hud-mid{ min-width:0; }
.hud-mid h3{ font-size:clamp(20px,3vw,44px); line-height:.97; }
.hud-mid p{ font-size:13px; margin-top:6px; opacity:.85; max-width:44ch; }
.hud-pr{ text-align:right; }
.hud-pr b{
  display:block; font-family:var(--dis); font-weight:600; font-size:clamp(28px,4.6vw,66px);
  line-height:.86; background:var(--bone); color:var(--ink); padding:.06em .2em;
}
.hud-pr>span{ display:block; margin-top:6px; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.ticks{
  position:absolute; left:50%; bottom:clamp(12px,3vh,34px); translate:-50% 0;
  display:flex; gap:6px; z-index:3;
}
.ticks i{
  display:block; width:clamp(14px,2.4vw,34px); height:3px;
  background:color-mix(in oklab,var(--bone) 34%,transparent); transition:background .3s,transform .3s;
}
.ticks i.on{ background:var(--bone); transform:scaleY(2.4); }

/* ============================================================ 6. STICKY COLOUR STACK */
.stack{ position:relative; background:var(--ink); }
.stack .panel{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--c); color:var(--on);
  transform:scale(calc(1 - .12*var(--pp))) translateY(calc(var(--pp)*-3vh));
  border-radius:calc(var(--pp)*30px);
  filter:brightness(calc(1 - .3*var(--pp)));
  box-shadow:0 -30px 70px color-mix(in oklab,#000 46%,transparent);
  display:grid; grid-template-rows:auto 1fr auto; padding:clamp(74px,9vh,110px) var(--gut) clamp(16px,2.6vh,32px);
  will-change:transform;
}
.stack .panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:var(--motif); background-size:var(--motifSize,120px 120px);
}
/* giant outlined index — packaging-print watermark, fills the panel corner */
.stack .panel::after{
  content:attr(data-i); position:absolute; right:-.05em; top:-.2em; z-index:0;
  font-family:var(--dis); font-weight:700; font-size:min(64vh,44vw); line-height:.78;
  letter-spacing:-.05em; color:transparent; pointer-events:none;
  -webkit-text-stroke:clamp(1.6px,.22vw,5px) var(--on); opacity:.24;
}
.pnl-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; position:relative; }
.pnl-idx{ font-family:var(--dis); font-weight:700; font-size:clamp(40px,7vw,110px); line-height:.8; letter-spacing:-.05em; }
.pnl-idx sup{ font-size:.3em; font-weight:400; letter-spacing:.1em; vertical-align:super; }
.pnl-body{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:end; gap:clamp(16px,3vw,60px); position:relative;
  min-height:0; z-index:1;
}
.pnl-body>div{ min-height:0; }
.pnl-body h2{ font-size:clamp(52px,13vw,124px); line-height:.9; letter-spacing:-.04em; }
.pnl-body h2 em{ font-style:normal; display:block; font-weight:200; }
.pnl-ru{ font-size:clamp(13px,1.1vw,17px); font-weight:600; opacity:.72; margin-top:clamp(15px,2.2vh,30px); letter-spacing:.02em; }
.pnl-txt{ margin-top:clamp(8px,1.5vh,20px); max-width:44ch; font-size:clamp(14px,1.1vw,17px); }
.pnl-list{ margin-top:clamp(10px,1.8vh,22px); display:grid; gap:1px; max-width:640px; }
.pnl-list div{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:.42em 0; border-top:1px solid color-mix(in oklab,currentColor 34%,transparent);
  font-size:clamp(13px,1vw,16px);
}
.pnl-list b{ font-family:var(--dis); font-weight:500; font-size:1.35em; letter-spacing:.01em; text-transform:uppercase; }
.pnl-list span{ font-weight:800; white-space:nowrap; }
.pnl-pack{ display:grid; place-items:center; position:relative; z-index:2; }
.pnl-pack .pk{ --w:clamp(150px,16.5vw,262px); }
.pnl-pack .pk-b{ animation:packIdle 10s ease-in-out infinite; }
.pnl-foot{
  display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,22px); position:relative;
  padding-top:12px; border-top:2px solid currentColor;
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}

/* ============================================================ 7. PRODUCT GRID */
.shop{ background:var(--paper); color:var(--ink); padding:clamp(56px,9vh,130px) 0 clamp(50px,8vh,110px); position:relative; }
.sec-hd{ display:grid; gap:clamp(10px,1.6vw,22px); margin-bottom:clamp(28px,5vh,64px); }
.sec-hd h2{
  font-size:clamp(40px,8.4vw,150px); line-height:.87; letter-spacing:-.04em;
  font-variation-settings:'wght' var(--wght); --wght:600;
}
.sec-hd .lead{ max-width:56ch; font-size:clamp(15px,1.2vw,19px); }
.sec-hd .bar4{ height:10px; display:grid; grid-auto-flow:column; }
.cats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:clamp(24px,4vh,52px); }
.cat{
  display:inline-flex; align-items:center; gap:.5em; min-height:44px; padding:0 14px;
  border:2px solid var(--ink); border-radius:999px; background:transparent;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s,color .25s,transform .25s;
}
.cat i{ width:11px; height:11px; border-radius:50%; background:var(--c); display:block; }
.cat:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.grid{
  display:grid; gap:clamp(12px,1.6vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));
}
.shop .card{
  container-type:inline-size;
  position:relative; background:var(--bone); border:2px solid var(--ink);
  display:grid; grid-template-rows:1fr auto; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.shop .card:hover{ transform:translateY(-6px); box-shadow:10px 14px 0 var(--ink); }
.card-stage{
  position:relative; display:grid; place-items:center; padding:clamp(22px,4vw,40px) 12px clamp(12px,2vw,22px);
  background:
    radial-gradient(120% 80% at 50% 6%, color-mix(in oklab,var(--c) 26%,transparent), transparent 68%),
    linear-gradient(180deg,color-mix(in oklab,var(--c) 12%,var(--bone)),var(--bone));
}
.card-stage .pk{ --w:clamp(132px,14vw,178px); }
.card-info{ padding:clamp(12px,1.6vw,20px); border-top:2px solid var(--ink); display:grid; gap:6px; }
.card-info h3{ font-size:clamp(19px,1.7vw,25px); line-height:.97; text-wrap:balance; }
.card-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.card-row .g{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }
.price{ font-family:var(--dis); font-weight:600; font-size:clamp(21px,2vw,30px); line-height:1; letter-spacing:-.01em; }
.price sub{ font-family:var(--ui); font-size:10px; font-weight:800; letter-spacing:.14em; vertical-align:baseline; bottom:0; margin-left:.28em; }
.card-tag{
  position:absolute; top:0; left:0; z-index:4; padding:6px 10px; background:var(--ink); color:var(--bone);
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.card-note{ font-size:12.5px; line-height:1.4; opacity:.72; }
@container (min-width:300px){
  .card-info{ padding:22px; }
  .card-info h3{ font-size:27px; }
}
.note-bar{
  margin-top:clamp(26px,4vh,52px); padding:clamp(16px,2.4vw,30px);
  border:2px solid var(--ink); display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  background:repeating-linear-gradient(-45deg,transparent 0 8px,color-mix(in oklab,var(--ink) 6%,transparent) 8px 16px);
}
.note-bar div b{ display:block; font-family:var(--dis); font-size:20px; font-weight:600; margin-bottom:4px; }
.note-bar div p{ font-size:13px; opacity:.78; }

/* ============================================================ 8. THE MILL */
.mill{ position:relative; height:230vh; background:var(--ink); }
.mill-stage{
  position:sticky; top:0; height:100svh; overflow:clip; display:grid; grid-template-rows:auto 1fr;
  background:
    linear-gradient(color-mix(in oklab,var(--bone) 5%,transparent) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,color-mix(in oklab,var(--bone) 5%,transparent) 1px,transparent 1px) 0 0/64px 64px,
    radial-gradient(120% 80% at 50% 62%, #131A2C, var(--ink) 68%);
}
#cv2{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.mill-hd{ position:relative; z-index:2; padding:clamp(66px,9vh,110px) var(--gut) 0; }
.mill-hd h2{ font-size:clamp(40px,8vw,140px); line-height:.88; letter-spacing:-.04em; color:var(--bone); }
.mill-hd h2 em{ font-style:normal; color:var(--lime); }
.mill-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:clamp(16px,3vw,50px); flex-wrap:wrap; }
.tele{ display:grid; gap:1px; min-width:min(100%,230px); }
.tele div{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:.5em;
  padding:9px 12px; background:color-mix(in oklab,var(--bone) 8%,transparent);
  border-left:2px solid var(--lime);
}
.tele span{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.tele b{ font-family:var(--dis); font-weight:600; font-size:22px; line-height:1; color:var(--bone); }
.tele i{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.08em; opacity:.6; }
.steps{
  position:relative; z-index:2; align-self:end; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  padding:0 var(--gut) clamp(24px,4vh,56px);
}
.step{
  padding:clamp(14px,2vw,22px); background:color-mix(in oklab,var(--ink) 62%,transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-top:3px solid var(--c);
}
.step b{ display:block; font-family:var(--dis); font-size:clamp(15px,1.4vw,20px); font-weight:600; text-transform:uppercase; margin-bottom:6px; }
.step em{ font-style:normal; font-size:10px; font-weight:800; letter-spacing:.2em; color:var(--c); display:block; margin-bottom:10px; }
.step p{ font-size:12.5px; line-height:1.45; opacity:.8; }

/* ============================================================ 9. STORY / RU */
.story{ background:var(--paper); color:var(--ink); padding:clamp(56px,9vh,130px) 0; }
.story-grid{ display:grid; gap:clamp(24px,4vw,72px); grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); }
.col h3{ font-size:clamp(26px,3vw,44px); margin-bottom:.5em; }
.col .flag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.22em;
  background:var(--ink); color:var(--paper); padding:5px 9px; margin-bottom:14px;
}
.col p+p{ margin-top:1em; }
.col p{ font-size:clamp(14px,1.1vw,17px); line-height:1.62; }
.col .drop::first-letter{
  float:left; font-family:var(--dis); font-weight:700; font-size:3.6em; line-height:.76;
  padding:.06em .12em 0 0; color:var(--blue);
}
.facts{ margin-top:clamp(28px,4vh,56px); display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
.fact{ background:var(--ink); color:var(--paper); padding:clamp(14px,2vw,22px); }
.fact b{ display:block; font-family:var(--dis); font-size:clamp(28px,3.4vw,50px); font-weight:600; line-height:.9; color:var(--corn); }
.fact span{ font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }

/* ============================================================ 10. FOOTER */
.ft{ background:var(--ink); color:var(--paper); padding:clamp(48px,7vh,96px) 0 30px; }
.ft-top{ display:grid; gap:clamp(22px,3vw,56px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.ft h4{ font-size:14px; letter-spacing:.16em; font-family:var(--ui); font-weight:800; margin-bottom:14px; opacity:.6; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ft ul a{ display:flex; align-items:center; min-height:38px; font-size:14.5px; font-weight:600; }
.ft ul a:hover{ color:var(--corn); }
.ft-mark{ font-family:var(--dis); font-size:clamp(58px,15vw,220px); font-weight:600; line-height:.84; letter-spacing:-.045em; margin:clamp(30px,5vh,70px) 0 18px; color:var(--bone); }
.ft-bar{ height:12px; display:grid; grid-auto-flow:column; margin-bottom:20px; }
.ft-legal{ display:flex; flex-wrap:wrap; gap:14px 28px; font-size:11.5px; opacity:.6; }

/* ============================================================ 11. RESPONSIVE */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; align-items:start; }
  .hero-pack{ min-height:clamp(240px,34vh,340px); order:-1; }
  .pnl-body{ grid-template-columns:1fr; align-content:center; }
  .pnl-pack{ position:absolute; right:-4%; bottom:-2%; opacity:.95; }
  .pnl-pack .pk{ --w:clamp(112px,26vw,190px); }
  .drum-hd .eyebrow{ display:none; }
}
@media (max-width:760px){
  .nav,.lang{ display:none; }
  .burger{ display:flex; }
  .hd-in{ gap:10px; }
  .hero{ padding-top:78px; }
  .h1{ font-size:clamp(56px,17vw,110px); }
  .tw span{ font-size:clamp(32px,11vw,64px); }
  .drum-sec{ height:300vh; }
  .drum-hd{ padding-top:clamp(66px,9vh,88px); }
  .drum-hd h2{ font-size:clamp(30px,9vw,46px); }
  .drum .pk{ --R:clamp(150px,42vw,220px); --w:clamp(96px,26vw,132px); }
  .hud{ grid-template-columns:auto 1fr; row-gap:8px; padding-top:clamp(30px,7vh,60px); }
  .hud-idx{ font-size:clamp(40px,13vw,62px); }
  .hud-pr{ grid-column:1/-1; text-align:left; display:flex; align-items:center; gap:12px; }
  .hud-pr b{ display:inline-block; font-size:clamp(24px,7vw,34px); }
  .hud-pr>span{ margin-top:0; }
  .stack .panel{ padding-top:80px; }
  .stack .panel::after{ font-size:min(34vh,52vw); top:-.14em; }
  /* on a phone the next panel covers the bottom first, so anchor content high */
  .pnl-body{ align-items:start; }
  .pnl-body h2{ font-size:clamp(52px,15.5vw,84px); }
  .pnl-top{ margin-bottom:clamp(10px,2vh,22px); }
  .hero::after{ background:linear-gradient(180deg,
      color-mix(in oklab,#061A6E 30%,transparent) 0%,
      color-mix(in oklab,#061A6E 62%,transparent) 46%,
      color-mix(in oklab,#061A6E 78%,transparent) 100%); }
  .tele div{ grid-template-columns:1fr auto auto; padding:7px 10px; }
  .pnl-list div:nth-child(n+4){ display:none; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step:nth-child(n+3){ display:none; }
  .story-grid{ gap:34px; }
}
@media (max-width:420px){
  .grid{ grid-template-columns:1fr; }
  .card-stage .pk{ --w:min(46vw,180px); }
}

/* ============================================================ 12. SCROLL-DRIVEN CSS
   Layered on top of a page that is already finished. Guarded by @supports so a
   browser without animation-timeline simply renders the authored default. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rail i{ animation:railGrow linear forwards; animation-timeline:scroll(root); }
    @keyframes railGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

    .shop .card .pk-b{
      animation:packTurn linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    @keyframes packTurn{
      from{ transform:rotateX(-3deg) rotateY(26deg); }
      to  { transform:rotateX(-13deg) rotateY(-24deg); }
    }
    .shop .card{
      animation:cardRise linear both;
      animation-timeline:view(); animation-range:entry 0% entry 62%;
    }
    @keyframes cardRise{
      from{ transform:translateY(46px) scale(.955); }
      to  { transform:none; }
    }
    .sec-hd h2{
      animation:wghtRun linear both;
      animation-timeline:view(); animation-range:entry 10% cover 62%;
    }
    @keyframes wghtRun{ from{ --wght:220; letter-spacing:.01em; } to{ --wght:640; letter-spacing:-.04em; } }
    .strip b i{ animation:wghtTick linear both; animation-timeline:scroll(root); }
    @keyframes wghtTick{ from{ --wght:300; } to{ --wght:800; } }
    .mill-hd h2{ animation:millSlide linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
    @keyframes millSlide{ from{ transform:translateX(-6vw); } to{ transform:none; } }
    .fact{ animation:factIn linear both; animation-timeline:view(); animation-range:entry 0% entry 80%; }
    @keyframes factIn{ from{ transform:translateY(30px); } to{ transform:none; } }
    .col .drop{ animation:colIn linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
    @keyframes colIn{ from{ transform:translateY(26px); } to{ transform:none; } }
  }
}

/* ============================================================ 13. REDUCED MOTION
   Kill every moving part. The page below is the authored, finished state. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important; transition:none !important; scroll-behavior:auto !important;
  }
  .stack .panel{ transform:none; filter:none; border-radius:0; }
  .shop .card,.shop .card .pk-b,.fact,.col .drop{ transform:none; }
  .rail i{ transform:scaleX(.12); }
}

/* ============================================================ 14. WORDPRESS
   Everything above this line is the approved prototype, unchanged. Everything
   below exists because a CMS supplies things a single HTML file never had to:
   an unknown number of packs and panels, a menu of unknown length, an admin
   bar, and pages that are not the front page. Nothing here restyles the design;
   it only removes the hard-coded counts and adds the parts the prototype had no
   reason to draw. */

/* --- the shelf and the stack no longer assume eight -------------------- */
.drum-sec{ height:calc(var(--n,8) * var(--drum-vh,45) * 1vh); }
.drum{
  transform:translate(-50%,-50%) rotateX(-9deg) rotateY(calc(var(--p) * var(--rev,2) * -360deg));
}

/* --- the mobile sheet colours cycle, whatever the menu length ---------- */
.sheet a:nth-child(4n+1){ background:var(--blue);  color:var(--bone); }
.sheet a:nth-child(4n+2){ background:var(--corn);  color:var(--ink); }
.sheet a:nth-child(4n+3){ background:var(--brick); color:var(--bone); }
.sheet a:nth-child(4n+4){ background:var(--lime);  color:var(--ink); }

/* --- with Polylang the language control is a pair of real links -------- */
.lang a{
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:.1em;
  min-height:38px; min-width:46px; padding:0 4px;
  color:var(--paper); transition:background .25s,color .25s;
}
.lang a[aria-pressed="true"]{ background:var(--paper); color:var(--ink); }

/* --- a product card is clickable when the product has a page ---------- */
.shop .card{ position:relative; }
.card-link{ position:absolute; inset:0; z-index:5; }
.shop .card:has(.card-link:focus-visible){ outline:3px solid var(--blue); outline-offset:3px; }

/* --- the admin bar pushes the fixed chrome down ----------------------- */
body.admin-bar .rail{ top:32px; }
body.admin-bar .hd{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .rail{ top:46px; }
  body.admin-bar .hd{ top:46px; }
}

/* --- the manufactured pack standing in for a missing product photo ---- */
.dj-loop-pack{
  display:grid; place-items:center; padding:26px 12px 16px;
  background:
    radial-gradient(120% 80% at 50% 6%, color-mix(in oklab,var(--c,var(--blue)) 26%,transparent), transparent 68%),
    linear-gradient(180deg,color-mix(in oklab,var(--c,var(--blue)) 12%,var(--bone)),var(--bone));
}
.dj-loop-pack .pk{ --w:clamp(120px,13vw,164px); }

/* --- utilities the prototype had no need for -------------------------- */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed !important; left:12px; top:12px; z-index:200;
  width:auto; height:auto; clip-path:none; margin:0;
  padding:12px 18px; background:var(--corn); color:var(--ink);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}

@media (max-width:760px){
  .drum-sec{ height:calc(var(--n,8) * var(--drum-vh,45) * .8333vh); }
}

/* --- a menu item may contain markup: Polylang's language switcher puts a flag
       image in its title, and the client is entitled to keep it there -------- */
.nav a img,
.sheet a img {
  display:inline-block; width:16px; height:11px;
  margin-right:.45em; vertical-align:baseline;
}
.sheet a img{ width:24px; height:17px; }
.nav a.menu-item-has-children::after{ display:none; }