/** Shopify CDN: Minification failed

Line 559:0 Unexpected "}"

**/
/* TUJ base and components.
   Every value here comes from tokens.css via var(). If you are about to type a
   hex code or a duration in this file, put it in tokens.css instead. */

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-read);
  font-size:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:104px;            /* clears the sticky player */
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
/* The display face is a condensed cut already (Trade Gothic Next SR Condensed);
   nothing here may try to stretch it. */
/* hidden always wins over a display set by a class (the game's name field slipped through without this) */
[hidden]{display:none !important}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}

/* The pompeblêd replaces the arrow. Pointer devices only, and text fields keep a
   caret so typing never feels broken. */
@media (hover:hover) and (pointer:fine){
  body{cursor:var(--cur)}
  a,button,summary,[role="button"],.track,.prod,.ep-body a{cursor:var(--cur-hot)}
  input,textarea,select{cursor:text}
}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.mono{
  font-family:var(--f-mono);font-size:var(--meta);
  text-transform:uppercase;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;
}
.skip:focus{left:var(--pad)}

/* ---- the pompeblêd, used as a system shape ---- */
.leaf{display:block;fill:currentColor;overflow:visible;height:auto;flex:none}
/* <symbol> clips to its own viewport by default, and the leaf's viewBox hugs
   its path exactly, so any stroke, shadow or scale would be shaved off. */
#leaf,#play{overflow:visible}

/* ============================================================
   Announcement + header
   ============================================================ */
.bar{
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:.6rem var(--pad);text-align:center;
}
.bar p{margin:0}
.bar .leaf{width:11px;flex:none;color:var(--red)}

.header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--paper);
  border-bottom:var(--rule,1px) solid transparent;
  transition:border-color var(--d-s),background var(--d-s);
}
.header.is-stuck{border-color:var(--line-soft)}
.header .wrap{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding-block:.9rem;
}
/* the SVG already carries the wordmark, so no text beside it */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{width:clamp(64px,6vw,78px);height:auto}
.nav{display:flex;gap:clamp(.9rem,2vw,1.8rem);margin-left:auto;align-items:center}
.header .cart{margin-left:-.3rem}
.nav a{
  text-decoration:none;font-family:var(--f-mono);font-size:var(--meta);
  text-transform:uppercase;letter-spacing:.08em;padding:.35rem 0;
  position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-s) var(--e-snap);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.lang{display:flex;gap:.3rem;font-family:var(--f-mono);font-size:var(--meta);align-items:center}
.lang button{
  background:none;border:0;padding:.3rem .4rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border-radius:4px;
  transition:color var(--d-s),background var(--d-s);
}
.lang button:hover{color:var(--blue)}
.lang button[aria-pressed="true"]{color:var(--on-red);background:var(--red)}
.header .cart{
  position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;
  color:var(--ink);text-decoration:none;
}
.cart-icon{width:28px;height:28px}
.header .cart:hover{color:var(--red)}
.cart-count{
  position:absolute;top:3px;right:0;min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  background:var(--red);color:var(--on-red);border-radius:999px;
  display:grid;place-items:center;font:700 .66rem/1 var(--f-mono);
}
.burger{display:none;background:none;border:0;padding:.4rem;color:var(--ink)}


/* ============================================================
   Full-screen menu. The only navigation below 900px, so it carries
   everything the header drops: nav, language, platforms.
   ============================================================ */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--red);color:var(--on-red);
  display:grid;align-content:center;gap:clamp(1.5rem,5vh,3rem);
  padding:calc(var(--pad) + 3.5rem) var(--pad) calc(var(--pad) + var(--player-h, 0px) + env(safe-area-inset-bottom));
  /* scrolls up and down only: the .mark leaf hangs off the right edge on
     purpose, and overflow-y alone would let iOS pan sideways to it */
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--d-m) var(--e-expo),transform var(--d-m) var(--e-expo),
             visibility 0s linear var(--d-m);
}
.menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu .mark{
  /* fixed, not absolute: then it is not part of the menu's scroll area at all */
  position:fixed;right:-18%;bottom:-14%;width:min(78vw,520px);
  color:var(--on-red);opacity:.09;pointer-events:none;
}
.menu-close{
  position:absolute;top:1rem;right:var(--pad);
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:1.5px solid rgb(255 255 255 / .5);border-radius:999px;
  color:var(--on-red);
}
.menu-nav{display:grid;gap:.1rem;position:relative}
.menu-nav a{
  text-decoration:none;font-family:var(--f-display);font-weight:700;
  font-stretch:85%;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(2rem,1.2rem + 5vw,3.2rem);line-height:1.1;
  display:flex;align-items:center;gap:.7rem;
  opacity:0;transform:translateY(14px);
}
/* Each link rises out of its own line, one after another in order (--i is set
   in header.liquid, so every link, Kontakt included, gets its place). */
.menu-nav a{overflow:hidden;opacity:1;transform:none}
.menu-nav a span{display:block;transform:translateY(105%);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.menu.open .menu-nav a span{transform:none;opacity:1;transition-delay:calc(80ms + var(--i,1) * 70ms)}
.menu-foot{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.menu.open .menu-foot{opacity:1;transform:none;transition-delay:520ms}
.menu-nav a .leaf{width:0;opacity:0;transition:width var(--d-s),opacity var(--d-s)}
.menu-nav a:hover .leaf,.menu-nav a:focus-visible .leaf{width:22px;opacity:1}
.menu-foot{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;position:relative;
  border-top:1px solid rgb(255 255 255 / .3);padding-top:clamp(1.2rem,4vh,2rem);
}
.menu-foot .lbl{opacity:.75;margin-right:.2rem}
.menu-lang{display:flex;gap:.3rem;margin-left:auto}
.menu-lang button{
  background:none;border:1px solid rgb(255 255 255 / .45);border-radius:999px;
  color:var(--on-red);font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  min-width:44px;min-height:38px;padding:.3rem .7rem;
}
.menu-lang button[aria-pressed="true"]{background:var(--on-red);color:var(--red)}
body.menu-open{overflow:hidden}
@media (max-width:560px){
  .menu-lang{margin-left:0;width:100%}
}

/* ============================================================
   Hero, full-bleed pompeblêd red
   ============================================================ */
.hero{
  background:var(--red);color:var(--on-red);
  position:relative;overflow:hidden;
}
/* oversized watermark leaf, bleeding off the right edge */
.hero .mark{
  position:absolute;right:-12%;top:50%;transform:translateY(-50%);
  width:min(62vw,780px);color:var(--on-red);opacity:.08;pointer-events:none;
}
.hero .wrap{padding-block:clamp(3rem,7vw,6rem)}
.hero-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);position:relative}
.hero-eyebrow{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  color:var(--on-red);opacity:.85;
}
.hero-eyebrow .dot{
  width:8px;height:8px;border-radius:999px;background:var(--on-red);
  animation:pulse 2.4s var(--e-expo) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.hero-num{
  display:flex;align-items:flex-start;gap:.6rem;
  font-family:var(--f-display);font-weight:700;line-height:.78;
  font-size:var(--display-xl);letter-spacing:-.04em;
}
.hero-num sup{
  font-size:.2em;letter-spacing:.06em;font-family:var(--f-mono);
  font-weight:500;padding-top:.5em;opacity:.8;
}
.hero h1{font-size:var(--display-l);max-width:16ch}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  color:var(--on-red);opacity:.9;
}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.09em;border:1px solid rgb(255 255 255 / .45);
  border-radius:999px;padding:.3rem .7rem;white-space:nowrap;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* buttons */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bg);
  border-radius:999px;padding:.85rem 1.4rem;text-decoration:none;
  font-family:var(--f-mono);font-size:var(--meta);text-transform:uppercase;
  letter-spacing:.09em;position:relative;overflow:hidden;isolation:isolate;
  min-height:44px;transition:color var(--d-s) var(--e-snap);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--red);transform:translateY(101%);
  transition:transform var(--d-m) var(--e-circ);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--on-red)}
.btn .leaf{width:14px;flex:none}
.btn--on-red{--bg:var(--on-red);--fg:var(--red)}
.btn--on-red::before{background:var(--ink)}
.btn--on-red:hover,.btn--on-red:focus-visible{color:var(--paper)}
.btn--ghost{--bg:transparent;--fg:currentColor;border-color:currentColor}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--paper)}
.hero .btn--ghost{border-color:rgb(255 255 255 / .5)}
.hero .btn--ghost::before{background:var(--on-red)}
.hero .btn--ghost:hover,.hero .btn--ghost:focus-visible{color:var(--red)}

.platforms{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  border-top:1px solid rgb(255 255 255 / .28);padding-top:1.3rem;
}
.platforms .lbl{opacity:.75;margin-right:.3rem}
.plat{
  font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.09em;text-decoration:none;border-radius:999px;
  border:1px solid rgb(255 255 255 / .4);padding:.5rem .9rem;
  min-height:38px;display:inline-flex;align-items:center;
  transition:background var(--d-s),color var(--d-s);
}
.plat:hover,.plat:focus-visible{background:var(--on-red);color:var(--red)}

/* ============================================================
   Sections
   ============================================================ */
section{scroll-margin-top:80px}
.sec{padding-block:var(--gap-section)}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.8rem);
}
.sec-head h2{font-size:var(--h2)}
.sec-head .mono{color:var(--muted)}

/* Manifesto */
.manifesto{
  border-top:3px solid var(--line);border-bottom:3px solid var(--line);
}
.manifesto blockquote{
  margin:0;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;line-height:.98;letter-spacing:-.02em;
  font-size:clamp(1.8rem,.9rem + 4.4vw,4.2rem);max-width:22ch;
}
.manifesto blockquote em{color:var(--red);font-style:normal}

/* ============================================================
   Fêste ûnderdielen, pinned.
   One line. The pompeblêd rides it as you scroll and each segment fades in as
   the leaf arrives. Native scroll: sticky stage, progress read from the
   bounding rect, wheel never captured. Pin is dropped below 860px.
   ============================================================ */
.scrolly{position:relative}
.scrolly.on{height:300vh}
.scrolly .pin{padding-block:var(--gap-section)}
.scrolly.on .pin{
  position:sticky;top:0;min-height:100vh;
  display:grid;align-content:center;
}
.strip-head{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  color:var(--muted);margin-bottom:clamp(1.6rem,5vh,3rem);
}
.strip-head .leaf{width:13px;color:var(--red)}
.strip-head .count{margin-left:auto;font-variant-numeric:tabular-nums}

.strip-rail{position:relative;height:3px;background:var(--line)}
.strip-rail .trail{
  position:absolute;inset:0;background:var(--red);
  transform-origin:left;transform:scaleX(0);
}
.strip-rail .tick{
  position:absolute;top:50%;width:7px;height:7px;border-radius:999px;
  background:var(--line);transform:translate(-50%,-50%);
}
.strip-rail .marker{
  position:absolute;top:50%;left:0;width:38px;
  transform:translate(-50%,-50%);color:var(--red);z-index:2;
  filter:drop-shadow(0 4px 10px rgb(230 15 30 / .35));
}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:1.6rem}
.step{padding-right:1.6rem}
.step .n{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--muted);display:block;margin-bottom:.8rem;
}
.step h3{font-size:clamp(.95rem,.85rem + .35vw,1.15rem);margin-bottom:.5rem;transition:color var(--d-m)}
.step p{margin:0;font-size:.92rem;color:var(--muted);max-width:28ch}
.scrolly.on .step{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--e-expo),transform .55s var(--e-expo);
}
.scrolly.on .step.is-in{opacity:1;transform:none}
.scrolly.on .step.is-now h3{color:var(--red)}

/* ============================================================
   Episode index
   ============================================================ */
.eps{list-style:none;margin:0;padding:0}
.ep{
  position:relative;border-top:3px solid var(--line);
  display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:clamp(1rem,2.5vw,2.5rem);
  padding-block:clamp(1.3rem,2.6vw,2.4rem);
  isolation:isolate;
}
.ep::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;
  left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);
  background:var(--red-soft);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-m) var(--e-snap);
}
.ep:hover::before{transform:scaleX(1)}
.ep-num{
  font-family:var(--f-display);font-weight:700;line-height:.8;
  font-size:clamp(2.2rem,1rem + 4vw,4.5rem);letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:2.4ch;transition:color var(--d-s);
}
.ep:hover .ep-num{color:var(--red)}
.ep-body{min-width:0}
.ep-body h3{
  font-size:var(--h3);max-width:28ch;
  transition:transform var(--d-m) var(--e-snap);
}
.ep:hover .ep-body h3{transform:translateX(8px)}
.ep-body a{text-decoration:none}
.ep-body a::after{content:"";position:absolute;inset:0;z-index:1}
.ep-sub{
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;
  color:var(--muted);margin-top:.6rem;
}
.ep-sub .chip{border-color:var(--line-soft);color:var(--muted)}
/* At rest the leaf is drawn, not filled, so the shape reads as a shape instead of
   a blob with a wedge cut out of it. It fills in only on hover and while playing. */
.ep-play{
  position:relative;z-index:2;
  width:58px;height:58px;flex:none;border:0;background:none;padding:0;
  display:grid;place-items:center;color:var(--ink);
  transition:transform var(--d-m) var(--e-snap),color var(--d-s);
}
.ep-play .leaf{
  width:58px;
  fill:none;stroke:currentColor;stroke-width:3.5;stroke-linejoin:round;
  transition:fill var(--d-s) var(--e-snap);
}
.ep-play .tri{
  position:absolute;width:26px;height:26px;color:currentColor;
  margin-left:1px;margin-top:3px;   /* the leaf's mass sits below its box centre */
}
.ep-play:hover{transform:scale(1.06)}
.ep:hover .ep-play{color:var(--red)}
.ep:hover .ep-play .leaf{fill:currentColor}
.ep:hover .ep-play .tri{color:var(--paper)}
.ep[aria-current="true"] .ep-play{color:var(--red)}
.ep[aria-current="true"] .ep-play .leaf{fill:currentColor}
.ep[aria-current="true"] .ep-play .tri{color:var(--paper)}
.ep[aria-current="true"] .ep-num{color:var(--red)}

/* equaliser shown on the playing row */
.eq{display:none;gap:2px;align-items:flex-end;height:22px}
.ep[aria-current="true"] .eq{display:flex}
.ep[aria-current="true"] .ep-num span{display:none}
.eq i{width:3px;background:var(--red);animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}
.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:5px}50%{height:22px}}

/* cursor-following cover, masked into the leaf */
.ep-hover{
  position:fixed;top:0;left:0;width:300px;z-index:40;
  pointer-events:none;opacity:0;transform:scale(.82);
  transition:opacity var(--d-s) var(--e-expo),transform var(--d-s) var(--e-expo);
  will-change:transform;
}
.ep-hover.on{opacity:1;transform:scale(1)}
.ep-hover-inner{
  background:var(--red);color:var(--on-red);border-radius:18px;
  padding:1.1rem 1.2rem;box-shadow:var(--shadow-card);rotate:-3deg;
}
.ep-hover-inner .leaf{width:30px;margin-bottom:.6rem}
.ep-hover-inner p{
  margin:0;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;line-height:1;font-size:1.05rem;
}
.ep-hover-inner .mono{opacity:.8;margin-top:.5rem;display:block}

.eps-foot{
  border-top:3px solid var(--line);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
}

/* ============================================================
   Mop fan de wike
   ============================================================ */
.mop{
  background:var(--red);color:var(--on-red);border-radius:28px;
  padding:clamp(1.8rem,5vw,4rem);position:relative;overflow:hidden;
}
.mop .mark{
  position:absolute;right:-6%;bottom:-32%;width:min(46vw,420px);
  opacity:.1;pointer-events:none;color:var(--on-red);
}
.mop-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;opacity:.85}
.mop-head .leaf{width:14px}
.mop q{
  display:block;quotes:none;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;line-height:1;letter-spacing:-.02em;
  font-size:clamp(1.5rem,.8rem + 3.4vw,3.2rem);max-width:20ch;
}
.mop-punch{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-m) var(--e-expo);
  margin-top:1.2rem;
}
.mop-punch > div{overflow:hidden}
.mop[data-open="true"] .mop-punch{grid-template-rows:1fr}
.mop-punch p{
  margin:0;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;line-height:1;font-size:clamp(1.3rem,.7rem + 2.6vw,2.6rem);
  border-top:2px solid rgb(255 255 255 / .4);padding-top:1.2rem;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--d-m) var(--e-expo) 80ms,transform var(--d-m) var(--e-expo) 80ms;
}
.mop[data-open="true"] .mop-punch p{opacity:1;transform:none}
.mop-actions{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.8rem;
  position:relative;
}

/* ============================================================
   Winkel
   ============================================================ */
.rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(1rem,2vw,1.8rem);
}
.prod{text-decoration:none;display:flex;flex-direction:column;gap:.9rem}
.prod-img{
  background:var(--surface);border-radius:14px;overflow:hidden;
  aspect-ratio:1;position:relative;
}
.prod-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-l) var(--e-expo);
}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-add{
  position:absolute;left:.7rem;right:.7rem;bottom:.7rem;
  background:var(--ink);color:var(--paper);border:0;border-radius:999px;
  padding:.7rem;font-family:var(--f-mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.09em;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--d-s),transform var(--d-s) var(--e-snap);
}
.prod:hover .prod-add,.prod:focus-within .prod-add{opacity:1;transform:none}
.prod h3{font-size:1rem}
.prod .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.prod .price{font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.prod .swatches{display:flex;gap:.3rem;margin-top:.4rem}
.prod .swatches i{
  width:13px;height:13px;border-radius:999px;display:block;
  border:1px solid var(--line-soft);
}

/* ============================================================
   Oer ús, variation A: headline, wide duo photo, the story in two columns,
   then the hosts as matching cards. No initials: the names carry it.
   ============================================================ */
.about-kick{display:flex;align-items:center;gap:.5rem;color:var(--red-deep);
  font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .8rem}
.about-kick .leaf{width:16px;color:var(--red)}
.about-h{font-size:clamp(2.4rem,1.2rem + 4.4vw,4.8rem);max-width:15ch;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.duo-photo{
  aspect-ratio:16/9;border-radius:22px;
  background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);
  display:grid;place-content:center;justify-items:center;text-align:center;gap:.8rem;
  position:relative;overflow:hidden;
}
.duo-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo-photo .leaf{width:64px;color:var(--line-soft)}
.duo-photo .mono{color:var(--ink);letter-spacing:.1em;text-transform:uppercase;font-size:var(--meta)}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,5vw,4rem);margin-top:clamp(1.8rem,4vw,3rem)}
.about-col .eyebrow{color:var(--red-deep);margin-bottom:.8rem;font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase}
.about-col h3{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);max-width:20ch;margin-bottom:1rem}
.about-col p{margin:0 0 1rem;color:var(--ink-soft);max-width:60ch}
.about-col p:last-child{margin-bottom:0}
.about-col strong{color:var(--red-deep);font-weight:700}

.hosts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.4rem);margin-top:clamp(2rem,5vw,3.5rem)}
.host{background:var(--card);border-radius:22px;padding:clamp(1.2rem,2.5vw,1.8rem)}
.host h3{font-size:var(--h3);margin-bottom:.3rem}
.host .role{color:var(--red-deep);font-size:var(--meta);text-transform:uppercase;letter-spacing:.09em}
.host p{color:var(--ink-soft);max-width:48ch;margin:.8rem 0 0}
.host p a{color:var(--ink);text-underline-offset:3px}

@media (max-width:860px){
  .about-cols{grid-template-columns:1fr}
  .about-col + .about-col{border-top:3px solid var(--line);padding-top:1.4rem}
  .hosts{grid-template-columns:1fr}
}
}

/* ============================================================
   Community + footer
   ============================================================ */
.signup{border-top:3px solid var(--line)}
.signup-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,5vw,4rem);align-items:start}
.signup-intro{padding-top:clamp(0rem,3vw,2.5rem)}
.signup-intro h2{font-size:clamp(2.6rem,1.4rem + 4vw,4.4rem)}
.signup-intro p{color:var(--muted);max-width:36ch;margin:.8rem 0 0;font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.55}

/* the chat with Sjoerd and Marc, signup.js */
.chat{position:relative;background:var(--surface);border-radius:28px;padding:clamp(1rem,2.5vw,1.6rem);
  display:flex;flex-direction:column;gap:.65rem;min-height:clamp(320px,40vw,420px)}
.chat .b{max-width:85%;padding:.75rem 1rem;border-radius:20px;line-height:1.45;animation:chatPop .35s var(--e-snap) both}
.chat .them{align-self:flex-start;background:var(--card);border-bottom-left-radius:6px}
.chat .them b{display:block;font:600 .68rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep);margin-bottom:.15rem}
.chat .them + .them{animation-delay:.15s}
.chat .me{align-self:flex-end;background:var(--red);color:var(--on-red);border-bottom-right-radius:6px}
.chat .ticks{margin-left:.5rem;font-size:.75rem;opacity:.6;letter-spacing:-.25em;transition:opacity .4s}
.chat .ticks.read{opacity:1}
@keyframes chatPop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.chat-restart{position:absolute;top:.7rem;right:.7rem;width:36px;height:36px;border-radius:999px;border:0;
  background:var(--card);color:var(--muted);display:grid;place-items:center;cursor:var(--cur-hot,pointer);
  transition:color var(--d-s),transform var(--d-s)}
.chat-restart svg{width:18px;height:18px}
.chat-restart:hover,.chat-restart:focus-visible{color:var(--red);transform:rotate(-40deg)}
.chat .typing{align-self:flex-start;background:var(--card);border-radius:20px;border-bottom-left-radius:6px;padding:.9rem 1rem;display:flex;gap:5px;animation:chatPop .3s both}
.chat .typing i{width:7px;height:7px;border-radius:9px;background:var(--muted);animation:typeDot 1s infinite}
.chat .typing i:nth-child(2){animation-delay:.15s}.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes typeDot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chat .chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;animation:chatPop .35s both}
.chat .chip{border:1.5px solid var(--red);color:var(--red-deep);background:var(--card);border-radius:999px;padding:.7rem 1rem;min-height:44px;
  font:600 .74rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:var(--cur-hot,pointer);
  display:inline-flex;align-items:center;gap:.5rem;transition:background var(--d-s),color var(--d-s),transform var(--d-s)}
.chat .chip .leaf{width:15px;color:var(--red)}
.chat .chip:hover,.chat .chip:focus-visible{background:var(--red);color:var(--on-red)}
.chat .chip:hover .leaf,.chat .chip:focus-visible .leaf{color:var(--on-red)}
.chat .chip.wa{border-color:var(--whatsapp);color:var(--whatsapp-deep)}
.chat .chip.wa .wa-mark{color:var(--whatsapp)}
.chat .chip.wa:hover,.chat .chip.wa:focus-visible{background:var(--whatsapp);color:var(--ink)}
.chat .chip.wa:hover .wa-mark,.chat .chip.wa:focus-visible .wa-mark{color:var(--card)}
/* the speech bubble inside the mark is drawn white; inverted, it has to turn green or the mark goes blank */
.chat .chip.wa:hover .wa-mark path,.chat .chip.wa:focus-visible .wa-mark path{stroke:var(--whatsapp)}
.chat .chip.pressed{animation:chipPress .2s}
@keyframes chipPress{50%{transform:scale(.94)}}
.wa-mark{width:20px;height:20px;flex:none}
.chat .reply{align-self:flex-end;width:88%;display:flex;gap:6px;padding:6px;background:var(--red);border-radius:22px;border-bottom-right-radius:6px;
  transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .3s;animation:chatPop .35s both;margin:0}
.chat .reply input{flex:1;min-width:0;min-height:46px;border:0;background:var(--card);border-radius:16px;padding:0 .9rem;font:1rem var(--f-read);color:var(--ink)}
.chat .reply input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.chat .send{width:46px;min-height:46px;border:0;border-radius:999px;background:var(--ink);display:grid;place-items:center;cursor:var(--cur-hot,pointer);transition:transform var(--d-s)}
.chat .send:hover{transform:scale(1.08)}
.chat .send .leaf{width:22px;color:var(--red)}
.chat .reply.flying{transform:translateY(-14px) scale(.96);opacity:0}
.chat .reply.shake{animation:chatShake .4s}
@keyframes chatShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.chat-err{align-self:flex-end;font:.7rem var(--f-mono);letter-spacing:.05em;color:var(--red-deep)}
.chat-walink{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;background:var(--whatsapp);color:var(--ink);border-radius:999px;
  padding:.5rem .9rem;font:600 .7rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.chat-walink .wa-mark{color:var(--card);width:18px;height:18px}
.chat-walink .wa-mark path{stroke:var(--whatsapp)}
.chat-done{align-self:center;display:flex;align-items:center;gap:.5rem;margin-top:.3rem;font:600 .7rem var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);animation:chatPop .4s both}
.chat-done .leaf{width:15px;color:var(--red);animation:leafBeat 1s 2}
@keyframes leafBeat{0%,100%{transform:none}30%{transform:scale(1.4)}60%{transform:scale(.95)}}
/* no-JS: the plain form and link, which signup.js replaces */
.chat-fallback{display:grid;gap:.6rem;margin-top:auto}
.chat-fallback .reply{width:100%}
.chat-wa{align-self:end;font:600 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--whatsapp-deep)}
@media (max-width:860px){
  .signup-grid{grid-template-columns:1fr}
}

.made{display:inline-flex;align-items:center;gap:.4rem}
.made .leaf{width:12px;color:var(--red)}

/* Footer, "ink band": dark, so it reads with the player as one base. */
.footer{background:var(--ink);color:var(--paper);padding-block:clamp(2.2rem,5vw,3.4rem) 1.6rem}
.footer-top{display:grid;gap:2rem}
.footer-brand{display:flex;gap:1rem;align-items:center}
.footer-brand img{width:clamp(74px,7vw,92px);height:auto;flex:none}
.footer-brand p{margin:0;max-width:28ch;line-height:1.45;color:rgb(244 239 231 / .8)}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-cols a{text-decoration:none;color:var(--paper);transition:color var(--d-s)}
.footer-cols a:hover,.footer-cols a:focus-visible{color:var(--red)}
.footer-about{grid-column:span 2}
.footer-about ul{grid-template-columns:1fr 1fr;column-gap:1rem}
.footer .listen-lbl{color:rgb(244 239 231 / .75);opacity:1}
.footer-legal{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  color:rgb(244 239 231 / .65);margin-top:2rem;padding-top:1.2rem;
  border-top:1px solid rgb(244 239 231 / .16);font-size:var(--meta);
}
.footer-legal a{color:inherit;text-decoration:none}
.footer-legal a:hover{color:var(--paper)}
.footer-legal .made{margin-left:auto}
.footer-captcha{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.7rem 0 0;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgb(244 239 231 / .65)}
.footer-captcha a{color:inherit;text-decoration:none}
.footer-captcha a:hover{color:var(--paper)}
.footer-seller{color:rgb(244 239 231 / .65);margin:1.5rem 0 0}
@media (min-width:900px){
  .footer-top{grid-template-columns:1.1fr 1.7fr auto;gap:3rem;align-items:start}
  .footer-brand{flex-direction:column;align-items:flex-start}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
  .footer-about{grid-column:auto}
  .footer-about ul{grid-template-columns:1fr}
  .footer .listen-row{grid-template-columns:1fr;width:15rem}
}

/* ============================================================
   Sticky player, above the wipe, always
   ============================================================ */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-player);
  background:var(--ink);color:var(--paper);
  box-shadow:var(--shadow-player);
  padding-bottom:env(safe-area-inset-bottom);
}
.player-bar{
  display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.3rem);
  padding:.75rem var(--pad);max-width:var(--max);margin-inline:auto;
}
.pbtn{
  background:none;border:0;padding:0;display:grid;place-items:center;
  color:var(--paper);opacity:.75;transition:opacity var(--d-s),transform var(--d-s);
  min-width:38px;min-height:38px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.04em;
}
.pbtn:hover{opacity:1;transform:scale(1.08)}
.pbtn--main{
  position:relative;color:var(--red);opacity:1;width:46px;height:46px;flex:none;
}
.pbtn--main .leaf{width:46px}
.pbtn--main .glyph{position:absolute;color:var(--ink);display:grid;place-items:center;margin-top:3px}
.pbtn--main .tri{width:24px;height:24px;margin-left:1px}
.pbtn--main .pause{display:none;gap:3px}
.pbtn--main .pause i{width:4px;height:14px;background:currentColor;display:block;border-radius:2px}
.player[data-playing="true"] .pbtn--main .tri{display:none}
.player[data-playing="true"] .pbtn--main .pause{display:flex}

.player-now{flex:1;min-width:0}
.player-now .t{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:.92rem;line-height:1.05;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.player-now .mono{color:var(--paper);opacity:.6;margin-top:.15rem;display:block}
.player-scrub{
  flex:2 1 160px;display:flex;align-items:center;gap:.7rem;min-width:0;
}
.track{
  flex:1;height:4px;background:rgb(242 235 225 / .22);border-radius:999px;
  position:relative;cursor:pointer;min-width:60px;
}
.track .prog{position:absolute;inset:0 auto 0 0;width:18%;background:var(--red);border-radius:999px}
.track .knob{
  position:absolute;top:50%;left:18%;width:11px;height:11px;border-radius:999px;
  background:var(--red);transform:translate(-50%,-50%) scale(0);
  transition:transform var(--d-s) var(--e-snap);
}
.track:hover .knob,.player[data-playing="true"] .knob{transform:translate(-50%,-50%) scale(1)}
.player-time{font-family:var(--f-mono);font-size:.68rem;opacity:.65;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   Page wipe
   ============================================================ */
.wipe{
  position:fixed;inset:0;z-index:var(--z-wipe);background:var(--red);
  transform:translateX(-100%);pointer-events:none;
  display:grid;place-items:center;
}
/* Driven by Swup's classes on <html>. Slides in from the left while the old
   page leaves, holds while the new one is swapped in, exits to the right, then
   snaps back off-screen with no transition once the visit ends. */
.wipe{transform:translateX(-101%)}
.wipe-logo{width:min(42vw,220px);opacity:0;transform:scale(.88);
  transition:opacity var(--d-m) var(--e-expo),transform var(--d-m) var(--e-expo)}
.wipe-logo svg{display:block;width:100%;height:auto;overflow:visible}
.wipe-logo path[fill="#E60F1E"]{fill:var(--on-red)}
.wipe-logo path[fill="#fff"]{fill:var(--red)}
html.is-changing .wipe{transition:transform var(--d-l) var(--e-circ)}
html.is-leaving .wipe,html.is-rendering.is-animating .wipe{transform:translateX(0)}
html.is-rendering:not(.is-animating) .wipe{transform:translateX(101%)}
html.is-leaving .wipe-logo,html.is-rendering.is-animating .wipe-logo{opacity:1;transform:none}
@keyframes markIn{0%{opacity:0;transform:scale(.88)}60%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .nav{display:none}
  .lang{display:none}             /* lives in the menu at this width */
  /* menu left, logo centred, cart right */
  .header .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;padding-block:.6rem}
  .burger{display:grid;grid-column:1;grid-row:1;justify-self:start;margin-left:-.4rem;min-width:44px;min-height:44px;place-items:center}
  .brand{grid-column:2;grid-row:1}
  .header .cart{grid-column:3;grid-row:1;justify-self:end;margin-right:-.5rem}
}

/* The pinned strip becomes a plain stacked list. Pinning a phone screen is a trap. */
@media (max-width:860px){
  .scrolly.on{height:auto}
  .scrolly.on .pin{position:static;min-height:0}
  .scrolly.on .step{opacity:1;transform:none;transition:none}
  .strip-rail{display:none}
  .strip-head{margin-bottom:1.2rem}
  .strip-head .count{display:none}
  .steps{grid-template-columns:1fr;gap:0;margin-top:0}
  .step{padding:1.3rem 0;border-top:3px solid var(--line)}
  .step p{max-width:42ch}
}
@media (max-width:720px){
  .ep{grid-template-columns:auto 1fr auto;gap:.8rem 1rem}
  .ep-sub{flex-wrap:nowrap;white-space:nowrap}
  .ep-hover{display:none}
  .player-now .mono{display:none}
  .player-scrub{display:none}
  .made{display:inline-flex;align-items:center;gap:.4rem}
.made .leaf{width:12px;color:var(--red)}
}
@media (max-width:420px){
  .hero-num sup{font-size:.26em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ep-hover{display:none}
}

/* ============================================================
   Theme additions. Everything below exists because the Liquid port
   introduced markup the static prototype did not have.
   ============================================================ */

/* The player is hidden until something is played, so the body only needs to
   clear it once it is actually there. */
body{padding-bottom:0}
body.has-player{padding-bottom:104px}


/* Seller identification. Hidden entirely until an entity exists, rather than
   printing empty labels. */

/* Shopify's localization form wraps the language buttons. */
.lang form,.menu-lang form{display:contents}
.lang [role="group"]{display:flex;gap:.3rem}

/* The duo photo becomes a real image once one is uploaded. */

/* Rich text from theme settings. */

/* The quick-add form must not break the product card's layout. */
.prod-img form{display:contents}

@media (max-width:720px){
  body.has-player{padding-bottom:92px}
}

/* ============================================================
   Episode page, archive, generic page. Phase 2.
   ============================================================ */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.episode{padding-block:clamp(2rem,6vw,4.5rem) var(--gap-section)}
.ep-back{display:inline-block;color:var(--muted);text-decoration:none;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.ep-back:hover{color:var(--red)}
.ep-mast{display:grid;gap:1.2rem;border-bottom:3px solid var(--line);padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.ep-mast .hero-num{color:var(--red)}
.ep-mast h1{font-size:var(--display-l);max-width:18ch}
.ep-mast .hero-meta,.ep-mast .chip{color:var(--muted);opacity:1}
.ep-mast .chip{border-color:var(--line-soft)}

.ep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-block:1.6rem}
.ep-actions .btn{margin-right:.8rem}
.ep-open{color:var(--muted);margin-right:.2rem}
.plat--ink{border-color:var(--line-soft);color:var(--ink)}
.plat--ink:hover,.plat--ink:focus-visible{background:var(--ink);color:var(--paper)}

.ep-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  gap:clamp(2rem,6vw,5rem);margin-top:clamp(1rem,3vw,2rem);
}
.ep-notes h2,.ep-chapters h2{font-size:var(--meta);color:var(--muted);margin-bottom:1.2rem;
  font-family:var(--f-mono);font-weight:500;letter-spacing:.1em}
.ep-notes{font-size:1.0625rem;line-height:1.7;max-width:65ch}
.ep-notes p{margin:0 0 1.15em}
.ep-chapters ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.ep-chapters button{width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:var(--cur-hot,pointer);
  display:flex;gap:.9rem;align-items:baseline;text-decoration:none;
  padding:.75rem 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;
}
.ep-chapters button .mono{color:var(--red);min-width:3.6ch}
.ep-chapters button:hover{color:var(--red)}

.ep-pager{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  margin-top:var(--gap-section);border-top:3px solid var(--line);padding-top:1.6rem;
}
.ep-pager a{text-decoration:none;display:grid;gap:.4rem}
.ep-pager a .mono{color:var(--muted)}
.ep-pager a strong{font-family:var(--f-display);font-stretch:85%;text-transform:uppercase;
  font-size:var(--h3);line-height:1;letter-spacing:-.01em}
.ep-pager a:hover strong{color:var(--red)}
.ep-pager .next{text-align:right}

.archive-h,.page-h{font-size:var(--h1, var(--display-l))}
.archive-tools{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-bottom:1.5rem}
#ep-search{
  flex:1 1 260px;min-width:0;background:transparent;color:var(--ink);
  border:0;border-bottom:2px solid var(--line-soft);padding:.7rem .2rem;
  font-family:var(--f-mono);font-size:.9rem;
}
#ep-search:focus{outline:none;border-bottom-color:var(--blue)}
.chip--btn{background:none;color:var(--muted);border-color:var(--line-soft);min-height:34px}
.chip--btn[aria-pressed="true"]{background:var(--red);color:var(--on-red);border-color:var(--red)}
.archive-empty{color:var(--muted);padding-block:2rem}
.eps .ep[hidden]{display:none}

.rte{max-width:65ch;font-size:1.0625rem;line-height:1.7;margin-top:1.5rem}
.rte h2,.rte h3{margin:2em 0 .6em}
.rte a{color:var(--ink);text-underline-offset:3px}
.rte a:hover{color:var(--red)}

@media (max-width:860px){
  .ep-layout{grid-template-columns:1fr}
  .ep-pager{grid-template-columns:1fr}
  .ep-pager .next{text-align:left}
}

/* ============================================================
   Shop: product, collection, cart, search, 404. Phase 3.
   ============================================================ */
.pdp{padding-top:clamp(2rem,5vw,4rem)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.pdp-main{background:var(--surface);border-radius:var(--radius-card,16px);overflow:hidden;aspect-ratio:1}
.pdp-main img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.pdp-thumb{width:72px;height:72px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--surface)}
.pdp-thumb:hover,.pdp-thumb:focus-visible{border-color:var(--red)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-info{position:sticky;top:110px;display:grid;gap:1.2rem}
.pdp-info h1{font-size:var(--h2)}
.pdp-price{display:flex;align-items:baseline;gap:.8rem;margin:0;font-family:var(--f-display);font-stretch:85%;font-weight:700;font-size:1.6rem}
.pdp-tax{color:var(--muted);font-family:var(--f-mono);font-weight:400;font-size:var(--meta)}
.pdp-form{display:grid;gap:1.1rem}
.pdp-opt{border:0;margin:0;padding:0}
.pdp-opt legend{color:var(--muted);margin-bottom:.6rem}
.pdp-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.pdp-pill{position:relative}
.pdp-pill input{position:absolute;opacity:0;inset:0;margin:0}
.pdp-pill span{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;
  padding:.5rem 1rem;border:1.5px solid var(--line-soft);border-radius:999px;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;
}
.pdp-pill input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pdp-pill input:focus-visible + span{outline:3px solid var(--red);outline-offset:3px}
.pdp-buy{display:flex;gap:.7rem;align-items:center}
.pdp-qty{width:5rem;min-height:44px;padding:.5rem .8rem;border:1.5px solid var(--line-soft);border-radius:999px;
  background:transparent;color:var(--ink);font-family:var(--f-mono);text-align:center}
.pdp-buy .btn{flex:1;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.pdp-desc{margin-top:0}
.pdp-acc{border-top:1px solid var(--line-soft)}
.pdp-acc details{border-bottom:1px solid var(--line-soft)}
.pdp-acc summary{
  list-style:none;cursor:var(--cur-hot,pointer);padding:1rem 0;display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:var(--meta);text-transform:uppercase;letter-spacing:.1em;
}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdp-acc summary::after{content:"+";font-size:1.1rem;line-height:1}
.pdp-acc details[open] summary::after{content:"\2212"}
.pdp-acc .rte{margin:0 0 1rem;font-size:.95rem}

.pager{display:flex;justify-content:center;gap:1.5rem;align-items:center;margin-top:2.5rem;color:var(--muted)}
.pager a{color:var(--ink)}
.coll-list{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--line-soft)}
.coll-list a{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--line-soft);
  text-decoration:none;font-family:var(--f-display);font-stretch:85%;font-weight:700;text-transform:uppercase;font-size:1.2rem}
.coll-list a:hover{color:var(--red)}
.coll-list .mono{color:var(--muted)}

.cart-lines{list-style:none;margin:1.5rem 0 0;padding:0;border-top:3px solid var(--line)}
.cart-line{display:grid;grid-template-columns:96px 1fr auto auto;gap:1.2rem;align-items:center;
  padding-block:1.2rem;border-bottom:1px solid var(--line-soft)}
.cart-img{display:block;width:96px;aspect-ratio:1;background:var(--surface);border-radius:12px;overflow:hidden}
.cart-img img{width:100%;height:100%;object-fit:cover}
.cart-info{display:grid;gap:.2rem}
.cart-info a{text-decoration:none}
.cart-info .mono{color:var(--muted)}
.cart-qty{display:grid;gap:.4rem;justify-items:center}
.cart-qty input{width:4.5rem;min-height:40px;text-align:center;border:1.5px solid var(--line-soft);border-radius:999px;
  background:transparent;color:var(--ink);font-family:var(--f-mono)}
.cart-remove{color:var(--muted);font-size:.7rem}
.cart-remove:hover{color:var(--red)}
.cart-line-total{min-width:6ch;text-align:right}
.cart-foot{display:grid;justify-items:end;gap:.8rem;margin-top:1.8rem}
.cart-sub{display:flex;gap:1.2rem;align-items:baseline}
.cart-sub strong{font-family:var(--f-display);font-stretch:85%;font-size:1.8rem}
.cart-tax{color:var(--muted);margin:0}
.cart-actions{display:flex;gap:.7rem;flex-wrap:wrap}

.search-h{color:var(--muted);margin:2rem 0 1rem;font-weight:500}

.notfound{text-align:left}
.notfound .nf-leaf{width:clamp(64px,10vw,110px);color:var(--red);margin-bottom:1.2rem}
.notfound h1{font-size:var(--display-l)}
.nf-sub{color:var(--muted);font-size:1.15rem;margin:.8rem 0 2rem}
.notfound .mop{margin-bottom:1.6rem}
.nf-actions{margin-top:1rem}

@media (max-width:860px){
  .pdp-grid{grid-template-columns:1fr}
  .pdp-info{position:static}
  .cart-line{grid-template-columns:72px 1fr;grid-template-areas:"img info" "img qty" "img total"}
  .cart-img{width:72px;grid-area:img}
  .cart-info{grid-area:info}
  .cart-qty{grid-area:qty;justify-items:start;grid-auto-flow:column;align-items:center}
  .cart-line-total{grid-area:total;text-align:left}
  .cart-foot{justify-items:stretch}
}

/* ============================================================
   Moppen, contact, sponsor. Phase 3.
   ============================================================ */
.moppen-intro{font-size:1.15rem;max-width:52ch;color:var(--muted);margin:0 0 1.6rem}
.moppen-year{font-size:var(--h2);margin:clamp(2.5rem,6vw,4rem) 0 1.2rem;border-top:3px solid var(--line);padding-top:1.2rem}
.moppen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem}
.mop-card{background:var(--surface);border-radius:16px;padding:1.2rem 1.3rem;transition:background var(--d-s)}
.mop-card summary{list-style:none;cursor:var(--cur-hot,pointer);font-weight:600;line-height:1.4}
.mop-card summary::-webkit-details-marker{display:none}
.mop-card p{margin:.8rem 0 0;color:var(--red);font-family:var(--f-display);font-stretch:85%;font-weight:700;
  text-transform:uppercase;font-size:1.1rem;line-height:1.1}
.mop-card[open]{background:var(--red-soft)}
.mop-card.is-picked{outline:3px solid var(--red);outline-offset:3px}


.sponsor-pitch{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.5;max-width:46ch;margin:1rem 0 2rem}
.sponsor-formats{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--line);margin-bottom:2.5rem}
.sponsor-formats .step{padding:1.4rem 1.6rem 0 0}
@media (max-width:860px){
  .sponsor-formats{grid-template-columns:1fr}
  .sponsor-formats .step{padding-right:0;padding-bottom:1.2rem;border-bottom:1px solid var(--line-soft)}
}

#main:focus{outline:none}

/* ============================================================
   Player: always present. Chapters are ticks on the scrubber only.
   ============================================================ */
.player{position:fixed}
.player-open{color:var(--paper);opacity:.6;text-decoration:none;white-space:nowrap;
  display:inline-block;margin-top:.2rem}
.player-open:hover{opacity:1}

.track-chaps{position:absolute;inset:0;pointer-events:none;z-index:1}
.track-chaps i{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:1px;
  background:rgb(242 235 225 / .55);transform:translateX(-1px)}

/* Phone: one row of play, skip, title. The scrubber becomes a 3px line along
   the top edge (DESIGN.md 8b), with a taller invisible hit area so a thumb can
   still seek. */
@media (max-width:720px){
  .player-bar{gap:.55rem;padding:.8rem var(--pad) .65rem}
  .player-scrub{display:block;position:absolute;top:0;left:0;right:0}
  .player-scrub .player-time{display:none}
  .track{height:3px;border-radius:0;min-width:0}
  .track::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-12px}
  .track .prog{border-radius:0}
  .track .knob{width:9px;height:9px}
  .track-chaps i{top:0;bottom:0}
  .pbtn{min-width:40px;min-height:44px;font-size:.66rem}
  .player-now .t{font-size:.86rem}
  .player-now .mono.player-open{display:inline-block;font-size:.66rem}
  body.has-player{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){
  #back15{display:none}
}

/* ---- Accessibility pass (Lighthouse). White on #E60F1E is 4.78:1 at FULL
   opacity, only just over AA, so nothing on red may fade it. Small red text on
   paper fails AA, so it uses the deeper red. */
.hero-eyebrow,.hero-meta,.hero-num sup,.platforms .lbl{opacity:1}
.ep-mast .hero-num sup{color:var(--ink)}
.ep-chapters button .mono{color:var(--red-deep)}
.footer-cols h2{font-size:.8rem;letter-spacing:.04em;margin-bottom:.9rem;color:rgb(244 239 231 / .65);
  font-family:var(--f-mono);font-weight:500;text-transform:uppercase}
.strip-head h2{display:contents;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.mop-head{opacity:1}
.host .role{color:var(--red-deep)}
.sponsor-body{max-width:62ch;margin-bottom:2.2rem}
.sponsor-body p{margin:0 0 1.1rem;line-height:1.65}
.sponsor-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin:0}
.sponsor-cta .mono{color:var(--muted);user-select:all}

/* ============================================================
   Hero, variation A: one decision above the fold.
   ============================================================ */
.hero .wrap{padding-block:clamp(2rem,5vw,3.6rem)}
.hero-grid{gap:clamp(1rem,2.4vw,1.6rem)}
.hero h1{font-size:clamp(3.1rem,1.6rem + 4.6vw,5.3rem);max-width:16ch;line-height:.95}
.hero-meta{gap:.5rem .9rem}
.hero-actions{gap:.8rem 2rem;margin-top:clamp(.4rem,1.5vw,1rem)}
.hero-all{color:var(--on-red);text-decoration:underline;text-underline-offset:5px;
  text-transform:uppercase;letter-spacing:.08em;font-size:var(--meta)}
.hero-all:hover{text-decoration-thickness:2px}
/* Phone: the red fills the screen between header and player, and the button
   sits at its bottom, full width, so it is on screen without scrolling. */
@media (max-width:720px){
  .hero{display:flex}
  .hero .wrap{display:flex;width:100%;padding-block:1.8rem 1.4rem}
  .hero-grid{flex:1;display:flex;flex-direction:column;gap:1rem}
  .hero-actions{margin-top:auto;flex-direction:column;align-items:stretch;gap:1.1rem;padding-top:1.4rem}
  .hero-actions .btn{justify-content:center;min-height:62px;font-size:1rem}
  .hero-all{text-align:center}
  .hero .mark{width:85%;right:-30%;top:auto;bottom:-10%;transform:none}
}

/* ============================================================
   Listen on: Spotify and Apple Podcasts, two equal buttons with marks.
   ============================================================ */
.listen{display:grid;gap:.7rem;width:100%}
.listen-lbl{font-size:var(--meta);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.listen-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;max-width:30rem}
.listen-btn{
  display:flex;align-items:center;gap:.55rem;min-height:52px;padding:.5rem .9rem .5rem .5rem;
  border-radius:999px;background:var(--on-red);color:var(--ink);text-decoration:none;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  transition:transform var(--d-s) var(--e-snap);
}
.listen-btn:hover,.listen-btn:focus-visible{transform:translateY(-2px)}
.listen-mark{width:32px;height:32px;flex:none}
.menu-foot{display:grid;gap:1.2rem}
.menu-foot .menu-lang{margin-left:0}
@media (max-width:400px){
  .listen-btn{font-size:.68rem;letter-spacing:0;gap:.45rem;padding-right:.75rem}
  .listen-mark{width:28px;height:28px}
}

/* Long Frisian compounds ("feilichheidsrisikogebieten") are wider than a phone
   at display size. They must wrap, never widen the page: hyphenate where the
   browser knows the language, otherwise break anywhere. */
h1,h2,h3,.hero h1,.ep-mast h1,.archive-h{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
/* Belt and braces: nothing may scroll the page sideways (DESIGN.md 8b). */
html,body{overflow-x:clip}
.meta-join{white-space:nowrap}
.meta-join span{margin-right:.9rem}
.ep-sub,.hero-meta{column-gap:.6rem}
.meta-join span{margin-right:.45rem}

/* The hero fills the screen between header and player, at every width.
   ui.js measures both; these fallbacks are close enough for the first paint. */
:root{--hdr-h:108px;--player-h:72px}
@media (max-width:900px){:root{--hdr-h:78px}}
.hero{min-height:calc(100svh - var(--hdr-h) - var(--player-h));display:flex;align-items:center}
.hero > .wrap{width:100%}
@media (max-width:720px){.hero{align-items:stretch}}
/* The footer is last on every page, so it carries the room the fixed player
   covers. Padding on the body would show a strip of paper between the two. */
body.has-player{padding-bottom:0}
.footer{padding-bottom:calc(2.4rem + var(--player-h) + env(safe-area-inset-bottom, 0px))}

/* Hero: the title opens the episode; two text links sit beside the button. */
.hero-title{color:inherit;text-decoration:none}
/* Clickable, but never underlined: it made the hero busy (Marc, 2026-10-19). */
.hero-title:hover,.hero-title:focus-visible{text-decoration:none}
.hero-links{display:flex;gap:1.6rem;flex-wrap:wrap}
@media (max-width:720px){.hero-links{justify-content:center}}
@media (prefers-reduced-motion:reduce){.menu.open .menu-nav a span,.menu.open .menu-foot{transition-delay:0s}}
/* Phone hero: split the free space evenly above the text block and above the
   button, so the text sits centred between the top of the red and the button. */
@media (max-width:720px){
  .hero-grid > .hero-eyebrow{margin-top:auto}
  .hero-actions{padding-top:1.6rem}
}

/* Episode masthead, variation A: label, title, date and length, one button,
   the apps as two round logo buttons. */
.ep-mast{gap:.9rem}
.ep-kicker{margin:0;color:var(--red-deep);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase}
.ep-mast h1{font-size:clamp(2.4rem,1.2rem + 4.4vw,4.8rem);max-width:17ch}
.ep-mast .ep-actions{padding-block:.8rem 0;gap:1rem 1.4rem}
.ep-mast .ep-actions .btn{margin-right:0}
.ep-also{display:inline-flex;align-items:center;gap:.6rem}
.ep-also .mono{color:var(--muted);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase}
.ep-app{width:46px;height:46px;border-radius:999px;background:var(--card);border:1px solid var(--line-soft);
  display:grid;place-items:center;transition:transform var(--d-s) var(--e-snap),border-color var(--d-s)}
.ep-app:hover,.ep-app:focus-visible{transform:translateY(-2px);border-color:var(--ink)}
.ep-app-mark{width:28px;height:28px}

/* Sticky header. The header sits inside Shopify's section wrapper, which is
   exactly as tall as the header, so sticky on .header alone never sticks. The
   wrapper is what has to stick. */
.shopify-section-group-header-group{position:sticky;top:0;z-index:var(--z-header)}
/* Anything else that sticks sits below the header, not under it. */
.scrolly.on .pin{top:var(--hdr-h);min-height:calc(100vh - var(--hdr-h))}
.pdp-info{top:calc(var(--hdr-h) + 1.5rem)}
[id]{scroll-margin-top:calc(var(--hdr-h) + 1rem)}
/* Episode title: two lines on desktop rather than three short ones, and the
   lines balanced so neither is a stub. */
.ep-mast h1{text-wrap:balance}
@media (min-width:900px){.ep-mast h1{max-width:26ch}}
/* Phone: copyright and Makke troch Friezen don't fit on one line, so stack them,
   both left-aligned with the rest of the footer, instead of one wrapping to the right. */
@media (max-width:720px){
  .footer-legal{flex-direction:column;align-items:flex-start;gap:.5rem}
  .footer-legal .made{margin-left:0}
}

/* Scrubbing: a taller invisible grab area at every width, no page scroll while a
   finger drags along the line, and a thicker line with the knob out while dragging. */
.track{touch-action:none}
.track::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.player.is-scrubbing .track{height:6px}
.player.is-scrubbing .track .knob{transform:translate(-50%,-50%) scale(1.3)}
.player.is-scrubbing .track .prog,.player.is-scrubbing .track .knob{transition:none}
@media (max-width:720px){
  .track::before{top:-10px;bottom:-14px}
  .player.is-scrubbing .track{height:5px}
}

/* ============================================================
   Contact: a letter to the jongens. One ruled grid: --rule is both the line
   height of everything written on the paper and the spacing of its lines.
   --nudge lifts the printed rule so text sits just above it, like handwriting
   on lined paper (descenders may cross it, as they would with a pen).
   ============================================================ */
.letter-page{--rule:2.1rem;--nudge:.42rem;--line-ink:rgb(16 25 43 / .12)}
.letter-wrap{max-width:46rem}
.letter-kick{display:flex;align-items:center;gap:.5rem;color:var(--red-deep);font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .8rem}
.letter-kick .leaf{width:16px;color:var(--red)}
.letter-h{font-size:clamp(2.6rem,1.4rem + 4vw,4.6rem);max-width:14ch;margin-bottom:clamp(1.4rem,3vw,2rem);text-wrap:balance}
.letter{
  position:relative;background-color:var(--card);border-radius:6px;
  padding:calc(var(--rule) * 1.5) clamp(1.2rem,4vw,3rem) calc(var(--rule) * .5);
  box-shadow:0 30px 60px -30px rgb(16 25 43 / .45);
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--rule) - 1px),var(--line-ink) calc(var(--rule) - 1px) var(--rule));
  background-position:0 calc(var(--rule) * 1.5 - var(--nudge));
}
/* everything on the paper is exactly one or more rules tall */
.letter-line,.letter-body{
  display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;
  line-height:var(--rule);color:var(--ink-soft);
}
.letter-line{height:var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.letter-hand,.letter-dear{font-family:var(--f-read);font-style:italic;font-size:1.15rem}
.letter-dear{color:var(--ink)}
.letter-sig{font-size:1.4rem;color:var(--ink)}
.letter-mail{font-size:1rem}
.letter-body{
  height:calc(var(--rule) * 7);resize:none;overflow-y:auto;
  /* its own lines, which scroll with the text */
  background-color:var(--card);
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--rule) - 1px),var(--line-ink) calc(var(--rule) - 1px) var(--rule));
  background-position:0 calc(var(--nudge) * -1);background-attachment:local;
}
.letter ::placeholder{color:var(--muted);opacity:.85;font-style:italic}
/* No box or dotted line around the field you are writing in: the caret shows
   where you are, and the hint text fades so the focused line still reads as active. */
.letter-line:focus,.letter-body:focus{outline:none}
.letter-line:focus::placeholder,.letter-body:focus::placeholder{opacity:.4}
.letter-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:var(--rule) calc(clamp(1.2rem,4vw,3rem) * -1) calc(var(--rule) * -.5);
  padding:calc(var(--rule) * .75) clamp(1.2rem,4vw,3rem);background:var(--card);border-radius:0 0 6px 6px;
}
.letter-stamp{width:64px;height:76px;border:2px dotted var(--red);border-radius:6px;display:grid;place-items:center;align-content:center;gap:2px;transform:rotate(-6deg);flex:none;position:relative}
.letter-stamp .leaf{width:32px;color:var(--red)}
.letter-stamp b{font:700 .62rem var(--f-mono);letter-spacing:.12em;color:var(--red)}
/* sent: the stamp gets a postmark pressed over it */
.letter-stamp i{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border:2px solid var(--blue);border-radius:999px;
  display:grid;place-items:center;font:700 .6rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-style:normal;
  transform:rotate(-18deg);animation:postmark .5s .3s cubic-bezier(.3,1.6,.5,1) both;background:rgb(255 255 255 / .35)}
@keyframes postmark{from{opacity:0;transform:rotate(-18deg) scale(1.8)}to{opacity:.9;transform:rotate(-18deg) scale(1)}}
.letter-sent .letter-dear{font-family:var(--f-display);font-style:normal;font-weight:700;text-transform:uppercase;font-size:1.6rem;color:var(--red)}
.letter-err{margin:0 0 var(--rule);padding:.6rem .9rem;border-radius:10px;background:var(--red);color:var(--on-red);font-size:.95rem;line-height:1.4}
.letter-alt{margin:1.4rem .2rem 0;color:var(--muted)}
.letter-alt a{color:var(--ink);text-underline-offset:3px}
@media (max-width:720px){
  .letter-page{--rule:2rem}
  .letter-hand,.letter-dear{font-size:1.05rem}
  .letter-sig{font-size:1.25rem}
  .letter-mail{font-size:.95rem}
  .letter-foot .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.letter-stamp i{animation:none;opacity:.9}}
/* Sent state: sentences may wrap, line by line, still one rule per line. */
.letter-sent .letter-line{height:auto;white-space:normal;overflow:visible}
.letter-sent .letter-dear{font-size:1.3rem;line-height:var(--rule)}
.letter-stamp.is-postmarked{margin:0 1.4rem 0 .6rem}

/* Contact fits on one screen: one-line heading, a letter that starts at four
   lines and grows as you write (ui.js), a compact foot. */
.sec.letter-page{padding-block:clamp(1.2rem,3vw,2.4rem) clamp(2rem,5vw,3.5rem)}
.letter-h{font-size:clamp(2.1rem,1.3rem + 2.4vw,3.6rem);max-width:none;margin-bottom:clamp(.9rem,2vw,1.3rem)}
.letter-kick{margin-bottom:.4rem}
.letter{padding-top:var(--rule);background-position:0 calc(var(--rule) - var(--nudge))}
.letter-body{height:calc(var(--rule) * 4)}
.letter-foot{margin-top:calc(var(--rule) * .5);padding-block:calc(var(--rule) * .5)}
.letter-stamp{width:54px;height:64px}
.letter-stamp .leaf{width:26px}
/* The message area's own rules run edge to edge like the paper's: the field
   reaches into the paper's side padding and pads its text back in. */
.letter{--padx:clamp(1.2rem,4vw,3rem);padding-inline:var(--padx)}
.letter-body{width:calc(100% + var(--padx) * 2);margin-inline:calc(var(--padx) * -1);padding-inline:var(--padx);box-sizing:border-box}

/* ============================================================
   Easter eggs (assets/eggs.js). All sit above the player, never block it,
   and are still under reduced motion.
   ============================================================ */
.egg-toast{
  position:fixed;left:50%;bottom:calc(var(--player-h) + 1rem);z-index:calc(var(--z-menu) + 10);
  display:flex;align-items:center;gap:.6rem;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);border-radius:999px;padding:.75rem 1.2rem .75rem .9rem;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em;white-space:nowrap;
  box-shadow:var(--shadow-card);animation:eggIn .45s cubic-bezier(.2,1.4,.4,1) both;
}
.egg-toast .leaf{width:22px;color:var(--red)}
.egg-toast.out{opacity:0;transform:translate(-50%,10px);transition:opacity .35s,transform .35s}
@keyframes eggIn{from{opacity:0;transform:translate(-50%,16px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
.egg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:calc(var(--z-menu) + 5);pointer-events:none}
.footer-brand img{transition:transform .15s}
.footer-brand img.egg-bump{animation:eggBump .25s}
@keyframes eggBump{50%{transform:scale(1.08) rotate(-4deg)}}

/* 2. the joke card */
.egg-mop{
  position:fixed;right:max(1rem,var(--pad));bottom:calc(var(--player-h) + 1rem);z-index:calc(var(--z-menu) + 10);
  width:min(24rem,calc(100vw - 2rem));background:var(--red);color:var(--on-red);border-radius:24px;padding:1.2rem 1.3rem 1.1rem;
  box-shadow:var(--shadow-card);animation:mopIn .5s cubic-bezier(.2,1.2,.4,1) both;
}
.egg-mop.out{opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
@keyframes mopIn{from{opacity:0;transform:translateY(40px) rotate(3deg)}to{opacity:1;transform:none}}
.egg-mop-k{display:flex;align-items:center;gap:.5rem;font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .6rem;opacity:.9}
.egg-mop-k .leaf{width:15px;color:var(--on-red)}
.egg-mop q{display:block;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;line-height:1.05;quotes:none}
.egg-mop-p{font-family:var(--f-read);font-style:italic;font-size:1.25rem;margin:.6rem 0 0;animation:eggIn2 .35s both}
@keyframes eggIn2{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.egg-mop-a{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}
.egg-x{background:none;border:1.5px solid rgb(255 255 255 / .5);color:var(--on-red);width:40px;height:40px;border-radius:999px;font-size:1.3rem;line-height:1;cursor:pointer;margin-left:auto}


/* 3. the Elfstedentocht skater, gliding along the top of the player */
.egg-skater{position:fixed;left:0;bottom:calc(var(--player-h) - 8px);width:120px;height:90px;z-index:calc(var(--z-player) + 1);
  pointer-events:none;animation:skate 6.5s linear forwards}
.egg-skater-body{transform-origin:44px 52px;animation:stride .65s ease-in-out infinite alternate}
@keyframes skate{from{transform:translateX(-100px)}to{transform:translateX(calc(100vw + 20px))}}
@keyframes stride{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* 4. the empty cart sighs */
@keyframes wobble{15%{transform:rotate(-14deg)}30%{transform:rotate(11deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}

/* ============================================================
   404: the Elfstedentocht game (assets/elfsteden.js)
   ============================================================ */
.elf{margin-top:clamp(2rem,5vw,3.5rem);border-top:3px solid var(--line);padding-top:clamp(1.2rem,3vw,2rem)}
.elf-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.elf-h{font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);margin:0}
.elf-canvas{display:block;width:100%;height:clamp(200px,28vw,280px);border-radius:18px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-soft);touch-action:none;cursor:pointer}
.elf.is-running .elf-canvas{box-shadow:inset 0 0 0 2px var(--ink)}
.elf-bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:.7rem}
.elf-msg{margin:0;color:var(--ink-soft)}
.elf-hud{margin:0;color:var(--red-deep);font-size:var(--meta);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.elf-name{margin-top:1rem;display:grid;gap:.4rem}
.elf-name label{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.elf-name div{display:flex;gap:.5rem;flex-wrap:wrap}
.elf-name input{flex:1 1 12rem;min-height:48px;border:1.5px solid var(--line-soft);border-radius:999px;padding:0 1rem;font:1rem var(--f-read);background:var(--card)}
.elf-board-h{margin:1.6rem 0 .5rem;font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.elf-board{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft);max-width:32rem}
.elf-board li{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
.elf-board .n,.elf-board .km{font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.elf-board .km{color:var(--ink)}
.elf-board li.is-new{background:var(--red-soft)}
.elf-board .elf-empty{display:block;color:var(--muted)}

.elf-name[hidden]{display:none}
.elf-name{max-width:32rem}

.elf-page .elf{margin-top:0;border-top:0;padding-top:0}
.elf-page .elf-h{font-size:clamp(2.4rem,1.2rem + 4vw,4.4rem)}
.elf-best{margin:1rem 0 0;color:var(--ink);font-size:var(--meta);letter-spacing:.08em;text-transform:uppercase}

/* The game key. A keyboard key strip where there is a fine pointer; big Springe
   and Dûke buttons on touch screens, where there are no keys to press. */
.elf-goal{margin:0 0 .8rem;color:var(--ink-soft);max-width:60ch}
.elf-keys{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 .9rem;color:var(--muted);font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase}
.elf-key{display:inline-flex;align-items:center;gap:.4rem}
.elf-keys kbd{display:inline-grid;place-items:center;min-width:2.1rem;height:2rem;padding:0 .55rem;border:1.5px solid var(--line);border-bottom-width:3px;
  border-radius:8px;background:var(--card);color:var(--ink);font:600 .8rem var(--f-mono);letter-spacing:.04em;text-transform:none}
.elf-pad{display:none;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}
.elf-padbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:72px;border:0;border-radius:18px;
  background:var(--ink);color:var(--paper);font:700 1.1rem var(--f-display);text-transform:uppercase;letter-spacing:.02em;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.elf-padbtn span{font-size:1.4rem;line-height:1}
.elf-padbtn small{font:400 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.elf-padbtn[data-act="jump"]{background:var(--red);color:var(--on-red)}
.elf-padbtn.is-down{transform:scale(.97);filter:brightness(.92)}
@media (hover:none),(pointer:coarse){
  .elf-keys{display:none}
  .elf-pad{display:grid}
}

/* A phone held sideways: the ice fills the height between header and player,
   Springe under the left thumb, Dûke under the right. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .elf-play{display:grid;grid-template-columns:minmax(76px,12vw) 1fr minmax(76px,12vw);gap:.6rem;align-items:stretch}
  .elf-pad{display:contents}
  .elf-padbtn[data-act="jump"]{grid-column:1;grid-row:1}
  .elf-stage{grid-column:2;grid-row:1;min-width:0}
  .elf-padbtn[data-act="duck"]{grid-column:3;grid-row:1}
  .elf-padbtn{min-height:0;padding:.4rem}
  .elf-canvas{height:clamp(140px,calc(100svh - var(--hdr-h) - var(--player-h) - 1.5rem),280px)}
}

/* The play button lives on the ice, like the hero's; hidden while riding. */
.elf-stage{position:relative}
.elf-go{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  border:0;border-radius:18px;background:rgb(244 239 231 / .55);cursor:pointer;color:var(--ink);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);transition:opacity .25s}
.elf-go-leaf{position:relative;width:clamp(76px,9vw,104px);color:var(--red);transition:transform .25s var(--e-snap)}
.elf-go-leaf .leaf{width:100%;filter:drop-shadow(0 10px 18px rgb(230 15 30 / .35))}
.elf-go-tri{position:absolute;left:50%;top:52%;width:38%;height:38%;transform:translate(-44%,-50%);color:var(--on-red)}
.elf-go:hover .elf-go-leaf,.elf-go:focus-visible .elf-go-leaf{transform:scale(1.07)}
.elf-go-label{font:700 1.15rem var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.elf.is-running .elf-go{opacity:0;pointer-events:none}
/* The ice scrolls the page like anything else until a run is on. */
.elf-canvas{touch-action:pan-y}
.elf.is-running .elf-canvas{touch-action:none}
.elf-skip{background:none;border:0;padding:0 .4rem;color:var(--muted);font:600 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px}
.elf-name label{color:var(--ink)}
/* Phone: heading, goal, ice and the two buttons on one screen. */
@media (max-width:720px){
  .elf-page.sec{padding-block:1rem 2rem}
  .elf-page .elf-h{font-size:2.1rem}
  .elf-top{margin-bottom:.5rem}
  .elf-goal{font-size:.95rem;line-height:1.45;margin-bottom:.6rem}
  .elf-canvas{height:210px}
  .elf-padbtn{min-height:64px}
}

/* The letter's P.S.: a pompeblêd switch on its own ruled line. */
.letter-ps{display:flex;align-items:center;gap:.8rem;cursor:pointer;overflow:visible}
.letter-ps .letter-hand{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.letter-ps b{font-style:normal;font-family:var(--f-display);color:var(--red);letter-spacing:.02em}
.ps-toggle{position:absolute;opacity:0;width:1px;height:1px}
.ps-switch{position:relative;flex:none;width:52px;height:28px;border-radius:999px;background:var(--line-soft);transition:background .25s}
.ps-knob{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  box-shadow:0 1px 3px rgb(16 25 43 / .3);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.ps-knob .leaf{width:14px;color:var(--line-soft);transition:color .25s,transform .3s}
.ps-toggle:checked + .ps-switch{background:var(--red)}
.ps-toggle:checked + .ps-switch .ps-knob{transform:translateX(24px)}
.ps-toggle:checked + .ps-switch .ps-knob .leaf{color:var(--red);transform:rotate(-12deg) scale(1.15)}
.ps-toggle:focus-visible + .ps-switch{outline:2px solid var(--ink);outline-offset:2px}

/* ============================================================
   De Ûnnoazele Soundboard (assets/soundboard.js), "the radio"
   ============================================================ */
.sb{padding-block:clamp(1.5rem,4vw,3.5rem) clamp(3rem,6vw,5rem)}
.sb-grid{display:grid;gap:clamp(1.4rem,4vw,3.5rem);grid-template-columns:.8fr 1.2fr;align-items:start}
.sb-intro{position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
.sb-kick{display:flex;align-items:center;gap:.5rem;color:var(--red-deep);font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .6rem}
.sb-kick .leaf{width:16px;color:var(--red)}
.sb-h{font-size:clamp(2.6rem,1.4rem + 4vw,5rem);margin:0}
.sb-sub{color:var(--muted);margin:.8rem 0 1.4rem;max-width:36ch;line-height:1.55}
.sb-dice{display:flex;align-items:center;gap:1rem;width:100%;max-width:26rem;border:0;border-radius:22px;background:var(--red);color:var(--on-red);
  padding:1rem 1.2rem;cursor:pointer;text-align:left;transition:transform .15s}
.sb-dice:hover{transform:translateY(-2px)}
.sb-dice-leaf{position:relative;width:58px;flex:none;color:var(--on-red)}
.sb-dice-leaf .leaf{width:58px}
.sb-dice-leaf span{position:absolute;inset:0;display:grid;place-items:center;font:700 1.5rem var(--f-display);color:var(--red);padding-top:.2rem}
.sb-dice b{display:block;font:700 1.6rem var(--f-display);text-transform:uppercase;line-height:1}
.sb-dice small{font-size:.72rem;letter-spacing:.06em;opacity:.85}
.sb-dice.is-rolling .sb-dice-leaf{animation:sbRoll .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes sbRoll{from{transform:rotate(-200deg) scale(.6)}to{transform:none}}
.sb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sb-row{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;row-gap:.35rem;align-items:center;
  background:var(--card);border:1px solid var(--line-soft);border-radius:18px;padding:.7rem .9rem .7rem .7rem;transition:box-shadow .2s,border-color .2s}
.sb-play{grid-row:1/3;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .12s}
.sb-play svg{width:18px;height:18px}
.sb-play:active{transform:scale(.94)}
.sb-label{display:block;font:italic 600 1.05rem/1.25 var(--f-read);color:var(--ink)}
.sb-meta{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.1rem}
.sb-foot{grid-column:2;display:flex;align-items:center;gap:1rem;min-width:0}
.sb-ep{flex:none;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sb-wave{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:24px}
.sb-wave i{flex:1;max-width:4px;border-radius:2px;background:var(--line-soft);transition:background .15s}
.sb-row.is-playing{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.sb-row.is-playing .sb-play{background:var(--red)}
/* progress: bars turn red left to right as the clip plays */
.sb-wave i.on{background:var(--red)}
.sb-row.is-shared{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
@media (max-width:900px){
  .sb-grid{grid-template-columns:1fr}
  .sb-intro{position:static}
  .sb-list{grid-template-columns:1fr}
}
/* egg 5: holding the hero's play button fills a ring around it */
.hero [data-play]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.hero [data-play].egg-holding{box-shadow:0 0 0 calc(var(--hold) * 10px) rgb(255 255 255 / calc(.15 + var(--hold) * .35));transform:scale(calc(1 + var(--hold) * .04))}

/* ============================================================
   Oer ús page (sections/about-page.liquid, assets/about.js)
   Chosen in prototype/photo-final.html: one photo edge to edge with a
   slight parallax, the story, a second photo with the old-site line, the
   hosts with their own crop, then the shoot as a carousel.
   ============================================================ */
.ap .about-h{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.ap-bleed{margin:0;position:relative;overflow:hidden;height:clamp(340px,78vh,860px);background:var(--ink)}
.ap-bleed img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;object-position:50% 42%;
  will-change:transform}
.ap .about-cols{margin-top:clamp(2.6rem,6vw,5rem)}

.ap-story{margin-top:clamp(3.5rem,8vw,7rem);border-top:3px solid var(--line);padding-top:clamp(1.4rem,3vw,2rem)}
.ap-steps{list-style:none;margin:clamp(1rem,2vw,1.6rem) 0 0;padding:0}
.ap-steps li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1rem,4vw,4rem);
  padding-block:clamp(1.1rem,2.4vw,1.8rem);border-top:1px solid var(--line-soft)}
.ap-steps li:first-child{border-top:0;padding-top:0}
.ap-year{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;
  color:var(--red);font-size:clamp(2rem,1.2rem + 3vw,3.8rem);font-variant-numeric:tabular-nums}
.ap-steps h3{font-size:clamp(1.4rem,1rem + 1.4vw,2rem);margin-bottom:.4rem}
.ap-steps p{margin:0;color:var(--ink-soft);max-width:58ch;font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.6}

.ap-mid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.6rem,5vw,5rem);align-items:center;
  margin-top:clamp(3.5rem,8vw,7rem)}
.ap-mid-photo{margin:0}
.ap-mid-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;border-radius:12px;display:block}
.ap-quote{margin:0}
.ap-quote-big{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.015em;
  font-size:clamp(2.2rem,1.2rem + 3.4vw,4.4rem);margin:0;color:var(--ink)}
.ap-quote-small{font-style:italic;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);color:var(--ink-soft);margin:.9rem 0 0}
.ap-quote footer{margin-top:1.2rem;color:var(--red-deep);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase}

.host-ph{padding-top:0;overflow:hidden}
.host-img{margin:0 calc(-1 * clamp(1.2rem,2.5vw,1.8rem)) 1.2rem;aspect-ratio:3/2;background-repeat:no-repeat;background-size:500%}
.host-img--m{background-position:37% 7.5%}
.host-img--s{background-position:62.5% 7.5%}

.ap-shoot{margin-top:clamp(3.5rem,8vw,7rem)}
.ap-shoot-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:clamp(1rem,2vw,1.6rem)}
.ap-shoot-head h2{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.ap-shoot-nav{display:flex;gap:.6rem}
.ap-round{width:48px;height:48px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  display:grid;place-items:center;padding:0;transition:background var(--d-s),color var(--d-s)}
.ap-round svg{width:22px;height:22px}
.ap-round:hover,.ap-round:focus-visible{background:var(--ink);color:var(--paper)}
.ap-round:disabled{opacity:.3;pointer-events:none}
.ap-track{list-style:none;margin:0;display:flex;gap:clamp(.7rem,1.4vw,1.1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad))) .4rem;
  scroll-padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));scrollbar-width:none;outline-offset:-3px}
.ap-track::-webkit-scrollbar{display:none}
.ap-track li{flex:none;scroll-snap-align:start}
.ap-slide{display:block;height:clamp(300px,34vw,480px);padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--card)}
.ap-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-l) var(--e-expo)}
.ap-slide:hover img,.ap-slide:focus-visible img{transform:scale(1.035)}
.ap-cap{display:block;margin-top:.6rem;color:var(--muted);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase}

.ap-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgb(16 25 43 / .96);color:var(--paper);z-index:300}
.ap-lb[open]{display:grid;place-items:center}
.ap-lb::backdrop{background:transparent}
.ap-lb-fig{margin:0;display:grid;justify-items:center;gap:.9rem;max-width:calc(100vw - 2 * var(--pad))}
.ap-lb-fig img{width:auto;height:auto;max-width:min(100%,1600px);max-height:calc(100dvh - 160px);border-radius:12px;display:block;object-fit:contain;touch-action:pan-y}
.ap-lb-fig figcaption{display:flex;gap:1.2rem;font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.ap-lb .ap-round{position:absolute;border-color:rgb(244 239 231 / .5);color:var(--paper)}
.ap-lb .ap-round:hover,.ap-lb .ap-round:focus-visible{background:var(--paper);color:var(--ink)}
.ap-lb-close{top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--pad)}
.ap-lb-prev{left:var(--pad);top:50%;translate:0 -50%}
.ap-lb-next{right:var(--pad);top:50%;translate:0 -50%}
html.ap-locked{overflow:hidden}

/* 404 photo: from above, in its own circle, looking up at the lost visitor. */
.nf-photo{width:clamp(180px,26vw,320px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:1.4rem;background:var(--ink)}
.nf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.08)}

@media (max-width:860px){
  .ap-steps li{grid-template-columns:1fr;gap:.4rem}
  .ap-mid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .ap-bleed{height:min(62svh,560px)}
  .ap-bleed img{object-position:52% 40%}
  .ap-shoot-nav{display:none}
  .ap-slide{height:56vw}
  .ap-lb-prev,.ap-lb-next{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);translate:none}
  .ap-lb-fig img{max-height:calc(100dvh - 200px)}
}
@media (prefers-reduced-motion:reduce){.ap-bleed img{transform:none!important}.ap-slide img{transition:none}}

/* ============================================================
   Product pages from product_page data (snippets/pp-*.liquid,
   assets/product-page.js) and the preview shop (sections/preview-shop.liquid).
   Approved as prototype/hoodie-example.html.
   ============================================================ */
.pp-img{aspect-ratio:4/5}
.pp-pdp{padding-block:0 clamp(3rem,7vw,6rem)}
/* A product page in the preview shop starts right under the header, like a real one. */
.pv.is-pdp{padding-top:clamp(.75rem,2vw,1.75rem)}
.pp-pdp .pdp-media,.pp-pdp .pdp-info,.pp-pdp .pdp-form,.pp-pdp .pdp-opt{min-width:0}
.pp-pdp .pdp-main{aspect-ratio:4/5;border-radius:12px}
.pp-pdp .pdp-thumbs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem}
.pp-pdp .pdp-thumb{width:auto;height:auto;aspect-ratio:4/5;border-radius:12px;border-width:2px}
.pp-pdp .pdp-thumb[aria-current="true"]{border-color:var(--ink)}
.pp-title{font-size:var(--h2)}

.pp-legend{display:flex;justify-content:space-between;align-items:baseline;width:100%;gap:1rem}
.pp-picked{color:var(--ink)}
.pp-pdp .pdp-opt legend{width:100%;margin-bottom:.3rem}
.pp-sizelink{font-family:var(--f-mono);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:none;border:0;padding:0;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.pp-sizelink:hover{color:var(--red)}
.pp-dot{display:inline-block;width:14px;height:14px;border-radius:999px;margin-right:.5rem;vertical-align:-2px;
  box-shadow:inset 0 0 0 1px rgb(16 25 43 / .25);flex:none}
.pdp-pill input:checked + span .pp-dot{box-shadow:0 0 0 2px var(--paper)}
.pdp-pills.pp-size .pdp-pill span{min-width:56px;justify-content:center;white-space:nowrap}
.pp-pdp .pdp-buy .btn:disabled{opacity:1;background:var(--surface);color:var(--muted);border-color:var(--line-soft)}

.pp-desc{display:grid;gap:1.1rem}
.pp-lede{font-size:1.08rem;line-height:1.6;margin:0}
.pp-dry{position:relative;background:var(--red);color:var(--on-red);border-radius:16px;
  padding:1.3rem clamp(5.2rem,30%,7.5rem) 1.3rem 1.4rem;margin:0;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-.015em;
  font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem)}
.pp-dry .leaf{position:absolute;right:1.2rem;top:50%;width:clamp(3.4rem,18%,4.8rem);translate:0 -50%;color:var(--on-red);opacity:.95}
.pp-facts{list-style:none;margin:0;padding:0;border-top:3px solid var(--line)}
.pp-facts li{padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.98rem;line-height:1.5;font-variant-numeric:tabular-nums}

.pp-tablewrap{overflow-x:auto}
.pp-sizes{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92rem}
.pp-sizes thead th{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;
  text-align:right;padding:.4rem .2rem .6rem;border-bottom:3px solid var(--line);vertical-align:bottom;line-height:1.3}
.pp-sizes thead th span{display:block;text-transform:none;letter-spacing:.04em}
.pp-sizes td,.pp-sizes tbody th{padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);text-align:right}
.pp-sizes tbody th{font-weight:700}
.pp-sizes thead th:first-child,.pp-sizes tbody th{text-align:left}
.pp-sizes tr.is-picked th,.pp-sizes tr.is-picked td{background:var(--red-soft)}
.pp-sizes tr.is-picked th{border-radius:999px 0 0 999px;padding-left:.7rem}
.pp-sizes tr.is-picked td:last-child{border-radius:0 999px 999px 0;padding-right:.7rem}
.pp-howto{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}

@media (max-width:860px){
  .pp-pdp .pdp-thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64px;overflow-x:auto;padding-bottom:.3rem}
}

/* Product page header and buy box, concept from the shop review (2026-10-22):
   photos as one swipeable strip with dots on the photo, title and price tight
   above the options, the button straight after, then shipping and returns,
   the dry line, what it is and the top traits. Quantity lives in the cart. */
.pp-gal{position:relative}
.pp-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:4/5;border-radius:12px;
  background:var(--surface);scrollbar-width:none;outline-offset:3px}
.pp-strip::-webkit-scrollbar{display:none}
.pp-slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.pp-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pp-dots{position:absolute;left:50%;bottom:.9rem;translate:-50% 0;display:flex;align-items:center;gap:.35rem;
  background:rgb(244 239 231 / .88);padding:.45rem .65rem;border-radius:999px;pointer-events:none}
.pp-dots i{width:7px;height:7px;border-radius:999px;background:var(--line-soft);transition:width var(--d-s) var(--e-snap),background var(--d-s)}
.pp-dots i.is-on{width:18px;background:var(--ink)}
.pp-pdp .pdp-thumbs{margin-top:.8rem}
.pp-pdp .pdp-info{gap:1rem}
.pp-head{display:grid;gap:.35rem}
.pp-head .pdp-price{font-size:1.35rem}
.pp-legend .pp-sizelink{min-height:0;margin-left:auto}
.pp-add{width:100%;justify-content:center;gap:.6rem}
.pp-add .leaf{width:18px}
.pp-pdp .pdp-buy{display:none}
.pp-assure{list-style:none;margin:-.2rem 0 0;padding:0;display:grid;gap:.35rem;font-size:var(--meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.pp-assure li{display:flex;align-items:center;gap:.5rem}
.pp-assure .leaf{width:12px;flex:none;color:var(--red)}
.pp-traits{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pp-traits li{display:flex;gap:.7rem;align-items:baseline;line-height:1.45}
.pp-traits .leaf{width:13px;flex:none;color:var(--red);translate:0 1px}
.pp-desc{gap:1rem}

/* Shop grid: three across on desktop, two on a phone. */
.rail--grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){
  .rail--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .8rem}
  .rail--grid .prod{gap:.6rem}
  .rail--grid .prod .row{gap:.5rem}   /* name and price on one line: with whole-euro prices it fits (checked at 375 and 402, FY and NL) */
  .rail--grid .prod h3{min-width:0}
  .rail--grid .prod .price{flex:none}
  .rail--grid .prod h3{font-size:.95rem;line-height:1.2}
  .rail--grid .prod .price{font-size:.78rem}
}

@media (max-width:860px){
  .pp-pdp{padding-top:0}
  .pp-pdp .pdp-grid{gap:1rem}
  .pp-pdp .pdp-media{margin-inline:calc(-1 * var(--pad))}
  .pp-strip{border-radius:0}
  .pp-pdp .pdp-thumbs{display:none}
  .pp-pdp .ep-back{display:none}
}

/* Empty cart: one line in our voice, the two ways into the shop, then the way out. */
.cart-empty{display:grid;gap:clamp(1.2rem,3vw,2rem);max-width:820px;margin-top:.6rem}
.cart-empty-line{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--ink-soft);margin:0;max-width:40ch}
.cart-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.4rem)}
.cart-cat{display:grid;gap:.7rem;align-content:start;text-decoration:none;color:var(--ink)}
.cart-page:has(.cart-empty){padding-top:clamp(1.5rem,4vw,3.5rem)}
.cart-cat-img{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--surface)}
.cart-cat-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-l) var(--e-expo)}
.cart-cat:hover .cart-cat-img img{transform:scale(1.04)}
.cart-cat h2{font-size:clamp(1.3rem,1rem + 1.2vw,2rem)}
.cart-cat span{font-family:var(--f-mono);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cart-empty-actions{display:flex;flex-wrap:wrap;gap:.7rem}
@media (min-width:861px){
  .cart-cats{grid-template-columns:repeat(2,minmax(0,280px))}
  .cart-cat-img{aspect-ratio:1}
}
@media (max-width:560px){.cart-empty-actions .btn{flex:1 1 100%;justify-content:center}}

/* Product page, round 2 (2026-10-23): highlights under the price, the
   description open in the fold-outs, a sticky add to cart, and on a phone
   everything up to the button above the fold. */
.check{width:16px;height:16px;flex:none;color:var(--red)}
.pp-hl{list-style:none;margin:-.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font-size:.95rem}
.pp-hl li{display:flex;align-items:center;gap:.4rem}
.pp-need{color:var(--red-deep);margin:-.3rem 0 0;font-size:var(--meta);letter-spacing:.08em;text-transform:uppercase}
.pdp-opt.is-missing .pdp-pill span{border-color:var(--red);animation:pp-nudge .4s var(--e-snap)}
@keyframes pp-nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pdp-acc details[open] > summary{border-bottom:0}
.pdp-acc .rte .pp-desc{padding-bottom:1rem}

.pp-sticky{position:fixed;left:0;right:0;bottom:var(--player-h);z-index:calc(var(--z-player) - 5);
  background:rgb(244 239 231 / .96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft);padding-block:.6rem;
  transform:translateY(110%);transition:transform var(--d-m) var(--e-expo);pointer-events:none}
.pp-sticky.is-on{transform:none;pointer-events:auto}
.pp-sticky-in{display:flex;align-items:center;gap:1rem}
.pp-sticky-t{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;font-size:1.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pp-sticky-btn{margin-left:auto;flex:none;gap:.55rem;min-width:min(340px,60vw);justify-content:center}
.pp-sticky-btn .leaf{width:16px}

@media (max-width:860px){
  .pp-pdp .pdp-pills.pp-size{flex-wrap:nowrap;gap:.35rem}
  .pp-pdp .pdp-pills.pp-size .pdp-pill{flex:1 1 0;min-width:0}
  .pp-pdp .pdp-pills.pp-size .pdp-pill span{min-width:0;width:100%;padding-inline:.2rem}
  .pp-pdp .pdp-pills.pp-size:has(.pdp-pill:nth-child(7)){flex-wrap:wrap}
  .pp-pdp .pdp-pills.pp-size:has(.pdp-pill:nth-child(7)) .pdp-pill{flex:0 0 calc((100% - 4 * .35rem) / 5)}
  .pp-pdp .pdp-info{gap:.75rem}
  .pp-head{grid-template-columns:1fr auto;align-items:baseline;gap:.2rem 1rem}
  .pp-head .pp-title{font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem)}
  .pp-head .pdp-price{flex-direction:column;align-items:flex-end;gap:0;font-size:1.25rem}
  .pp-head .pdp-tax{font-size:.62rem}
  .pp-pdp .pdp-form{gap:.75rem}
  .pp-pdp .pdp-opt legend{margin-bottom:.15rem}
  .pp-pdp .pdp-pill span{min-height:40px;padding-block:.35rem}
  .pp-sticky-t{display:none}
  .pp-sticky-btn{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){.pp-sticky{transition:none}.pdp-opt.is-missing .pdp-pill span{animation:none}}

/* Cart drawer (snippets/cart-drawer.liquid, assets/cart-drawer.js) */
.cd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;
  overflow:hidden;overflow:clip}
/* clip, not hidden: a hidden box can still be scrolled, and iOS scrolled the
   dialog sideways to reveal the focused close button while the panel slid in. */
.cd::backdrop{background:transparent}
/* The dimming is a layer of its own: ::backdrop does not animate reliably on open. */
.cd-scrim{position:absolute;inset:0;background:rgb(16 25 43 / .45);opacity:0}
.cd-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;will-change:transform;
  box-shadow:-20px 0 60px -30px rgb(16 25 43 / .5)}
html.cd-locked{overflow:hidden;scrollbar-gutter:stable}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + 1.1rem) var(--pad) 1rem;border-bottom:1px solid var(--line-soft)}
.cd-head h2{font-size:1.9rem}
.cd-n{font-size:1rem;letter-spacing:.06em;color:var(--muted);vertical-align:middle}
.cd-x{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;padding:0}
.cd-x svg{width:20px;height:20px}
.cd-x:hover,.cd-x:focus-visible{background:var(--ink);color:var(--paper)}
.cd-ship{padding:1rem var(--pad);border-bottom:1px solid var(--line-soft)}
.cd-ship-t{margin:0 0 .6rem;font-size:1rem}
.cd-ship-t b{color:var(--red-deep)}
.cd-bar{height:8px;border-radius:999px;background:var(--surface);overflow:hidden}
.cd-bar i{display:block;height:100%;background:var(--red);border-radius:999px;transform-origin:left;transform:scaleX(0);
  transition:transform var(--d-l) var(--e-expo)}
.cd-ship.is-free .cd-ship-t{color:var(--red-deep);font-weight:700}
.cd-body{flex:1;overflow-y:auto;padding:0 var(--pad);overscroll-behavior:contain}
.cd-lines{list-style:none;margin:0;padding:0}
.cd-line{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line-soft)}
.cd-img{display:block;width:80px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--surface)}
.cd-img img{width:100%;height:100%;object-fit:cover}
.cd-info{display:grid;gap:.3rem;align-content:start;min-width:0}
.cd-info a{color:var(--ink);text-decoration:none}
.cd-info .mono{font-size:var(--meta);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cd-qty{display:inline-flex;align-items:center;margin-top:.5rem;border:1.5px solid var(--line-soft);border-radius:999px;width:fit-content}
.cd-qty button{width:40px;height:40px;border:0;background:none;font-size:1.15rem;color:var(--ink);border-radius:999px}
.cd-qty button:hover{background:var(--surface)}
.cd-qty span{min-width:1.6rem;text-align:center;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.cd-right{display:grid;justify-items:end;align-content:space-between;gap:1rem}
.cd-price{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.cd-rm{background:none;border:0;padding:.4rem 0;color:var(--muted);font-size:var(--meta);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;min-height:44px}
.cd-rm:hover{color:var(--red-deep)}
.cd-empty{margin:1.4rem 0;color:var(--muted)}
.cd-up{padding-block:1.2rem}
.cd-up h3{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.cd-up-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.cd-sug{display:flex;gap:.7rem;align-items:center;background:var(--card);border-radius:12px;padding:.6rem;text-decoration:none;color:var(--ink)}
.cd-sug img{width:52px;height:65px;object-fit:cover;border-radius:8px;flex:none}
.cd-sug > span{display:grid;gap:.15rem;min-width:0;font-size:.9rem;line-height:1.25}
.cd-sug .mono{font-size:.72rem;color:var(--muted)}
.cd-sug .cd-sug-go{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.cd-foot{padding:1rem var(--pad) calc(env(safe-area-inset-bottom,0px) + 1.1rem);border-top:3px solid var(--line);display:grid;gap:.5rem;background:var(--paper)}
.cd-total{display:flex;justify-content:space-between;align-items:baseline}
.cd-total .mono{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase}
.cd-total strong{font-family:var(--f-display);font-size:1.6rem}
.cd-tax{margin:0;color:var(--muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.cd-note{margin:0;color:var(--red-deep);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.cd-checkout{justify-content:center;gap:.6rem;margin-top:.3rem}
.cd-checkout svg{width:18px;height:18px}
.cd-checkout.is-off{opacity:.45;cursor:not-allowed}
@media (max-width:560px){
  .cd-up-row{grid-template-columns:1fr}
  .cd-line{grid-template-columns:72px minmax(0,1fr) auto;gap:.8rem}
  .cd-img{width:72px}
}
@media (prefers-reduced-motion:reduce){.cd-bar i{transition:none}}

/* Homepage shop: "De strip" (sections/product-rail.liquid), variation C of
   prototype/shop-home-variations.html. */
.sh .sh-kick{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem;font-size:var(--meta);letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-deep)}
.sh .sh-kick .leaf{width:16px;color:var(--red)}
.sh-h{font-size:clamp(2.4rem,1.2rem + 4.4vw,4.4rem);margin:0}
.sh-h span{display:block}
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.2rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.sh-nav{display:flex;gap:.5rem;align-items:center}
.sh-nav .btn{margin-right:.7rem;min-height:52px}
.sh-btn{justify-content:center;gap:.55rem}
.sh-btn .leaf{width:16px}
.sh-arr{width:52px;height:52px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  display:grid;place-items:center;padding:0;transition:background var(--d-s),color var(--d-s)}
.sh-arr svg{width:22px;height:22px}
.sh-arr:hover,.sh-arr:focus-visible{background:var(--ink);color:var(--paper)}
.sh-arr:disabled{opacity:.3;pointer-events:none}
.sh-strip{--w:clamp(250px,21vw,330px);display:grid;grid-auto-flow:column;grid-auto-columns:var(--w);
  column-gap:clamp(.9rem,1.6vw,1.4rem);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  scroll-padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));scrollbar-width:none}
.sh-strip::-webkit-scrollbar{display:none}
.sh-strip:focus-visible{outline-offset:-3px}
.sh-card,.sh-end{scroll-snap-align:start;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.8rem;min-width:0}
.sh-img{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--surface)}
.sh-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-l) var(--e-expo)}
.sh-card:hover .sh-img img{transform:scale(1.04)}
.sh-card h3{font-size:1.15rem;margin:0}
.sh-row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.sh-row .mono{color:var(--muted);font-size:.85rem;white-space:nowrap}
.sh-endleaf{position:relative;display:grid;place-items:center;aspect-ratio:4/5;color:var(--red)}
.sh-endleaf > .leaf{position:absolute;width:96%;left:2%;top:50%;transform:translateY(-50%);transition:transform var(--d-m) var(--e-expo)}
.sh-end:hover .sh-endleaf > .leaf{transform:translateY(-50%) scale(1.05) rotate(-4deg)}
.sh-endtxt{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  color:var(--on-red);padding:14% 18% 0;max-width:100%}
.sh-endtxt b{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);line-height:.95}
.sh-endtxt .mono{font-size:.7rem;opacity:.9;max-width:16ch;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.sh-track{position:relative;height:3px;margin-top:clamp(1.2rem,2vw,1.8rem);overflow:hidden}
.sh-track::before{content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:var(--line-soft)}
.sh-thumb{position:absolute;left:0;top:0;height:3px;background:var(--red);border-radius:3px;width:30%}
.sh-foot{display:none}
@media (prefers-reduced-motion:reduce){.sh-end:hover .sh-endleaf > .leaf{transform:translateY(-50%)}.sh-card:hover .sh-img img{transform:none}}
@media (max-width:720px){
  .sh-nav{display:none}
  .sh-strip{--w:68vw}
  .sh-foot{display:block;margin-top:1.4rem}
  .sh-foot .btn{width:100%;min-height:56px}
}
/* Empty drawer: the two ways into the shop, and the footer steps back. */
.cd-cats{display:grid;gap:1.2rem;padding-bottom:1.4rem}
.cd-cats .cart-cats{grid-template-columns:1fr 1fr;gap:.8rem}
.cd-cats .cart-cat-img{aspect-ratio:4/5}
.cd-cats .cart-cat h3{font-size:1.3rem}
.cd-cats .cart-cat span{font-size:.68rem}
.cd-shop{justify-content:center}
.cd.is-empty .cd-foot{display:none}
.cd.is-empty .cd-empty{margin-bottom:1rem}
.cd.is-empty .cd-ship{display:none}

/* Our story (2026-10-24). Homepage: photo, the first sentence, the invitation,
   one button (sections/story-teaser.liquid). Oer ús: the story in one
   readable column, then Marc and Sjoerd (sections/about-page.liquid). */
.stt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:center}
.stt-photo{margin:0}
.stt-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;border-radius:12px;display:block}
.stt-h{font-size:clamp(2rem,1.1rem + 3vw,3.6rem);line-height:.98;margin:0 0 1.2rem;max-width:16ch}
.stt-invite{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--ink-soft);max-width:40ch;margin:0 0 1.6rem}
.stt .btn{gap:.6rem}
.stt .btn .leaf{width:16px}
@media (max-width:860px){.stt-grid{grid-template-columns:1fr}}

.ap-story-text{max-width:66ch;margin:clamp(2.6rem,6vw,5rem) auto 0;font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.7}
.ap-story-text p{margin:0 0 1.3em;color:var(--ink-soft)}
.ap-story-text .ap-lead{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;line-height:1;
  font-size:clamp(1.9rem,1.1rem + 3vw,3.2rem);color:var(--ink);margin-bottom:.9em}
.ap-motto{color:var(--red);font-weight:700}
.ap-invite{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(1.4rem,1rem + 1.4vw,2rem);color:var(--ink) !important;margin-top:2em !important}
.ap-tag{color:var(--red-deep) !important;font-size:var(--meta);letter-spacing:.1em}
.ap-who{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);margin:clamp(3rem,7vw,5.5rem) 0 0;border-top:3px solid var(--line);padding-top:1.2rem}
.ap-who + .hosts{margin-top:1.4rem}

/* ============================================================
   Mobile menu and language suggestion, variation C of
   prototype/lang-switch-variations.html (2026-10-24).
   The menu fits the screen: a column that shares out the height instead of
   centring a block that can overflow, with the language as the first row.
   ============================================================ */
.menu.ls-menu{
  display:flex;flex-direction:column;align-content:normal;gap:0;
  height:100vh;height:100dvh;
  padding:max(.75rem,env(safe-area-inset-top)) var(--pad) calc(.75rem + var(--player-h,0px) + env(safe-area-inset-bottom));
}
.ls-menu .ls-top{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-height:56px;flex:none;position:relative}
.ls-menu .menu-close{position:static;flex:none}
.ls-menu .menu-nav a{min-height:44px}
.ls-menu .menu-foot{flex:none}
.ls-menu [data-ls-pick]{text-decoration:none;color:var(--on-red);display:flex;align-items:center;justify-content:center;
  min-height:44px;transition:background var(--d-s),color var(--d-s)}
.ls-menu [data-ls-pick][aria-current]{background:var(--on-red);color:var(--red)}
.ls-row{flex:none;display:grid;grid-template-columns:1fr 1fr;border:1.5px solid rgb(255 255 255 / .55);
  border-radius:999px;padding:4px;gap:4px;margin:.2rem 0 clamp(.6rem,2vh,1.4rem);position:relative}
.ls-row .ls-big{border-radius:999px;min-height:48px;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;font-size:1.3rem;padding-top:.12em}
.ls-row .ls-big:not([aria-current]):hover{background:rgb(255 255 255 / .14)}
.ls-c .menu-nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;
  border-top:3px solid rgb(255 255 255 / .9);padding-top:clamp(.4rem,1.5vh,1rem)}
.ls-c .menu-nav a{font-size:min(clamp(2rem,1.2rem + 5vw,3.2rem),5.6vh);line-height:1.08;min-height:max(44px,1.25em)}
.ls-foot{display:flex !important;align-items:center;gap:.6rem;padding-top:clamp(.8rem,2.4vh,1.4rem)}
.ls-foot .listen-lbl{margin-right:auto;opacity:.85}
.ls-round{width:48px;height:48px;display:grid;place-items:center;border-radius:999px;background:var(--on-red);
  transition:transform var(--d-s) var(--e-snap)}
.ls-round:hover,.ls-round:focus-visible{transform:translateY(-2px)}
.ls-round svg{width:30px;height:30px}

/* The suggestion: a white card that rises just above the player. */
.ls-hint{display:none}
.ls-hint--toast{position:fixed;left:var(--pad);right:var(--pad);
  bottom:calc(var(--player-h) + .7rem + env(safe-area-inset-bottom));
  z-index:calc(var(--z-player) + 10);max-width:30rem;margin-inline:auto;
  background:var(--card);color:var(--ink);border-radius:16px;box-shadow:var(--shadow-card);
  padding:.65rem .75rem .65rem 1rem;
  grid-template-columns:auto 1fr auto;column-gap:.7rem;row-gap:.45rem;align-items:center;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--d-m) var(--e-sheet),transform var(--d-m) var(--e-sheet)}
html.ls-hint-on .ls-hint--toast{display:grid}
.ls-hint--toast.ls-in{opacity:1;transform:none;pointer-events:auto}
.ls-hint--toast.ls-leaving{opacity:0;transform:translateY(16px)}
body.menu-open .ls-hint--toast{visibility:hidden}
.ls-hint .leaf{width:18px;color:var(--red);align-self:start;margin-top:.35rem}
.ls-q{margin:0;min-width:0;line-height:1.25}
.ls-q span{display:block}
.ls-q [lang="fy"]{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;opacity:.75;margin-bottom:.1rem}
.ls-q [lang="nl"]{font-family:var(--f-read);font-style:italic;font-size:.92rem}
.ls-go{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 1.05rem;border-radius:999px;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  background:var(--red);color:var(--on-red)}
.ls-go:hover{background:var(--red-deep)}
.ls-x{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:none;border:0;
  color:inherit;opacity:.8;margin:-.35rem -.35rem 0 0;align-self:start}
.ls-x:hover{opacity:1}
@media (min-width:900px){.ls-hint--toast{left:auto;right:var(--pad);margin:0;width:22rem}}
@media (prefers-reduced-motion:reduce){.ls-hint--toast{transition:none}}


/* ============================================================
   Host bubbles on Oer ús, variation B1 of prototype/host-bubbles-variations.html
   (sections/about-page.liquid, assets/host-bubbles.js)
   ============================================================ */
.hb-who{scroll-margin-top:90px}
.hb{position:relative;margin:1.4rem auto 0;max-width:1180px}
.hb-photo{margin:0;position:relative;z-index:0;border-radius:12px;overflow:hidden;background:#fff}
.hb-photo img{display:block;width:100%;height:auto}
.hb-tails{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.hb-tails .hb-g-white{filter:drop-shadow(0 14px 18px rgb(16 25 43 / .2))}
.hb-drawn .hb-b:not(.hb-leafb){background:none;box-shadow:none}
.hb-photo img{max-width:none}
.hb-b{--hb-fill:#fff;position:relative;z-index:2;background:var(--hb-fill);color:var(--ink);
  border-radius:16px;padding:1.1rem 1.35rem 1.25rem;box-shadow:0 22px 44px -22px rgb(16 25 43 / .45)}
.hb-b h3{font-size:clamp(1.35rem,1rem + .8vw,1.75rem);line-height:.95;margin:0 0 .3rem}
.hb-role{font-family:var(--f-mono);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep);line-height:1.35}
.hb-b p{font-family:var(--f-read);font-size:1rem;line-height:1.5;margin:.6rem 0 0;color:inherit;max-width:none}
.hb-b p a{color:inherit;text-underline-offset:3px}
.hb-red{--hb-fill:var(--red);color:#fff;box-shadow:none}
.hb-red .hb-role{color:#fff}
.hb-red a:focus-visible{outline-color:#fff}
/* the leaf as the bubble: the symbol from the logo, never stretched */
.hb-leafb{--hb-fill:var(--red);background:none;box-shadow:none;padding:0;color:#fff;
  aspect-ratio:82.887/74.0798;container-type:inline-size}
.hb-leafb .hb-leaf{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--red)}
.hb-leafb .hb-role{color:#fff}
.hb-leafb .hb-hd{position:absolute;left:15%;top:12.5%;width:37%}
.hb-leafb h3{font-size:6.1cqw;margin:0 0 .25em;white-space:nowrap}
.hb-leafb .hb-role{font-size:3.05cqw;letter-spacing:.08em}
.hb-leafb p{position:absolute;left:15%;right:11%;top:35%;margin:0;font-size:4cqw;line-height:1.4}
.hb-leafb p::before{content:"";float:right;width:7%;height:1.3em}
@media (min-width:860px){
  .hb-b{position:absolute}
}
@media (max-width:859px){
  .hb{display:flex;flex-direction:column;gap:.8rem}
  .hb-b p{font-size:.97rem}
}

@media (min-width:860px){
  .hb--B1 .hb-photo{width:62%;margin-inline:auto}
  .hb--B1 .hb-m{left:0;top:4%;width:30%}
  .hb--B1 .hb-s{right:0;top:13%;width:30%}
}
@media (max-width:859px){
  .hb--B1 .hb-s{order:1;margin-left:14%}
  .hb--B1 .hb-m{order:2;margin-right:14%}
  .hb--B1 .hb-photo{order:3;margin-top:.4rem}
}
/* Language pill and close button on one row. */
.ls-menu .ls-top{gap:.6rem;margin-bottom:clamp(.6rem,2vh,1.2rem)}
.ls-top .ls-row{flex:1 1 auto;min-width:0;margin:0}
.ls-top .ls-row .ls-big{min-height:44px;font-size:1.05rem;padding-inline:.4rem}
/* Homepage story on a phone: the headline uses the full width and breaks only
   between words (16ch left an empty strip and hyphenated BE-SCHERMD). */
@media (max-width:860px){
  .stt-h{max-width:none;hyphens:manual;-webkit-hyphens:manual;font-size:clamp(1.9rem,1.2rem + 3.2vw,2.6rem)}
}
/* The menu sits inside the header's stacking context, below the player, so a
   fixed bar above the player would show through it. Hide it while the menu is open. */
body.menu-open .pp-sticky{visibility:hidden}
/* The sticky add-to-cart bar stays under the page wipe (z 100): it belongs to
   the page being swapped, not to the chrome that survives navigation. */
.pp-sticky{z-index:calc(var(--z-wipe) - 1)}
html.is-changing .pp-sticky,html.is-animating .pp-sticky{visibility:hidden}
/* Oer ús rhythm: one gap (--ap-gap) between the story, the hosts and the
   sign-up, and no rule above the hosts; the heading flows on from the story. */
.ap{--ap-gap:clamp(3rem,7vw,5.5rem);padding-bottom:var(--ap-gap)}
.ap-who{border-top:0;padding-top:0;margin-top:var(--ap-gap)}
.shopify-section:has(.ap) + .shopify-section .signup{padding-top:0;border-top:0}
.shopify-section:has(.ap) + .shopify-section .signup-intro{padding-top:0}
/* Homepage story on desktop too: the headline takes the column's full width,
   breaks only between words, and is sized to land on about four lines. */
.stt-h{max-width:none;hyphens:manual;-webkit-hyphens:manual;font-size:clamp(1.9rem,1rem + 2.2vw,3.1rem);line-height:1}
.stt-invite{max-width:46ch}

/* Sticker sizes as words (Lyts / Midden / Grut), variation A of
   prototype/sticker-size-variations.html; the exact size of the picked one under the row. */
.sz-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sz-a-row{display:grid;gap:.45rem;justify-items:start}
.sz-a-pills{display:flex;gap:.35rem}
.sz-a-pill{position:relative;display:block}
.sz-a-pill input{position:absolute;opacity:0;inset:0;margin:0}
.sz-a-pill > span{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:.5rem .95rem;
  border:1.5px solid var(--line-soft);border-radius:999px;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;transition:background var(--d-s),border-color var(--d-s)}
.sz-a-pill:hover > span{border-color:var(--ink)}
.sz-a-pill input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sz-a-pill input:focus-visible + span{outline:3px solid var(--red);outline-offset:3px}
.sz-a-read{margin:0;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.06em;white-space:nowrap;line-height:1.3;text-transform:none}
.sz-a-read.is-on{color:var(--ink)}
.pdp-opt.is-missing .sz-a-pill > span{border-color:var(--red);animation:pp-nudge .4s var(--e-snap)}
@media (max-width:860px){.sz-a-row{justify-items:stretch;gap:.35rem}.sz-a-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sz-a-pill > span{padding-inline:.4rem}}
@media (prefers-reduced-motion:reduce){.pdp-opt.is-missing .sz-a-pill > span{animation:none}}

/* ============================================================
   "Lúster dizze" on episode pages (assets/episode-listen.js), variation A of
   prototype/episode-listen-variations.html. Under the page wipe (z 100),
   like the product page's sticky bar.
   ============================================================ */
/* ---- shared ---- */
.el-glyph{position:relative;display:grid;place-items:center;width:22px;flex:none}
.el-glyph .leaf{width:22px;color:var(--on-red)}
.el-glyph .tri{position:absolute;width:12px;height:12px;color:var(--red);margin-top:2px}
.el-meta{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Out of the way under the open menu, during the page wipe and with the cart open. */
body.menu-open .el-x,html.is-changing .el-x,html.is-animating .el-x,html.cd-locked .el-x{
  opacity:0!important;visibility:hidden;pointer-events:none!important}

/* The language toast rises above whatever this adds on top of the player. */
.ls-hint--toast{translate:0 calc(-1 * var(--el-lift, 0px));
  transition:opacity var(--d-m) var(--e-sheet),transform var(--d-m) var(--e-sheet),translate var(--d-m) var(--e-expo)}

/* ============================================================
   A · De strook: a paper bar docked on the player, like .pp-sticky
   ============================================================ */
.el-bar{position:fixed;left:0;right:0;bottom:var(--player-h);z-index:calc(var(--z-wipe) - 1);
  background:rgb(244 239 231 / .96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft);padding-block:.55rem;
  transform:translateY(calc(100% + 2px));transition:transform var(--d-m) var(--e-expo);pointer-events:none}
.el-bar.is-on{transform:none;pointer-events:auto}
.el-bar-in{display:flex;align-items:center;gap:1rem}
.el-bar-t{display:grid;min-width:0;gap:.1rem}
.el-bar-t .el-meta{color:var(--red-deep)}
.el-bar-title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;
  font-size:1.2rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-pill{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  padding:.7rem 1.3rem .7rem 1rem;border:0;border-radius:999px;background:var(--red);color:var(--on-red);
  font-family:var(--f-mono);font-size:var(--meta);letter-spacing:.09em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;cursor:var(--cur-hot,pointer)}
.el-pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);
  transition:transform var(--d-m) var(--e-circ)}
.el-pill:hover::before,.el-pill:focus-visible::before{transform:none}
.el-pill:hover .el-glyph .tri,.el-pill:focus-visible .el-glyph .tri{color:var(--ink)}
@media (max-width:720px){
  .el-bar{padding-block:.5rem}
  .el-bar-in{gap:.75rem}
  .el-bar-t .el-meta{font-size:.62rem}
  .el-bar-title{font-size:.98rem}
  .el-pill{padding:.6rem 1rem .6rem .8rem;font-size:.72rem;gap:.5rem}
}

/* The photo shoot carousel back on Oer ús, between the hosts and Kom derby,
   on the page's one gap, with a heading the size of "Wa't wy binne". */
.ap .ap-shoot{margin-top:var(--ap-gap)}
.ap .ap-shoot-head h2{font-size:clamp(1.6rem,1rem + 2vw,2.6rem)}

/* Oer ús, "In it koart" and the FAQ (sections/about-page.liquid): after the
   photo shoot, on the page's one gap. Two columns on a wide screen, the facts
   as mono labels against Tisa values, the questions as rows. Rules, no boxes. */
.ap-facts{margin-top:var(--ap-gap);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.4rem,5vw,5rem);align-items:start}
.ap-facts-h{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);margin:0 0 clamp(1rem,2vw,1.4rem)}
.ap-dl{margin:0;border-top:3px solid var(--line)}
.ap-dl > div{display:grid;grid-template-columns:minmax(7.5rem,2fr) minmax(0,5fr);gap:.4rem 1.2rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft)}
.ap-dl dt{font-family:var(--f-mono);font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep);padding-top:.22em}
.ap-dl dd{margin:0;color:var(--ink-soft);line-height:1.55}
.ap-dl a,.ap-faq a{color:var(--ink);text-underline-offset:.18em}
.ap-faq{border-top:3px solid var(--line)}
.ap-faq > div{padding:1rem 0 1.1rem;border-bottom:1px solid var(--line-soft)}
.ap-faq h3{font-family:var(--f-read);text-transform:none;letter-spacing:0;font-weight:700;line-height:1.35;
  font-size:clamp(1.05rem,1rem + .25vw,1.18rem);margin:0 0 .35rem;color:var(--ink)}
.ap-faq p{margin:0;color:var(--ink-soft);line-height:1.6;max-width:62ch}
.hb-b[id]{scroll-margin-top:110px}
@media (max-width:860px){
  .ap-facts{grid-template-columns:1fr}
  .ap-dl > div{grid-template-columns:1fr;gap:.2rem}
}

/* Homepage: the one sentence under the hero that says what the site is
   (sections/hero-latest-episode.liquid). Reading text, not a headline. */
.hero-intro{padding-top:clamp(2rem,5vw,3.6rem)}
.hero-intro p{margin:0;max-width:60ch;font-size:clamp(1.08rem,1rem + .45vw,1.32rem);line-height:1.6;color:var(--ink-soft)}

/* ============================================================
   Hero play button, variation A of prototype/hero-play-variations.html
   (Marc, 2026-10-25): the player's leaf play button, giant, is the hero's
   one action. Title left, leaf right; on a phone the leaf sits centred above
   the title. Sized by one number, --w (leaf width): the player's 46px button
   times --w/46, so the triangle sits the scaled 3px below centre.
   ============================================================ */
.hp{--hp-h:calc(100svh - var(--hdr-h) - var(--player-h))}
.hp .hp-wrap{padding-block:clamp(1.4rem,3.5vw,3rem);display:block}
.hp h1.hp-h1{max-width:none;margin:0;line-height:.95}
.hp .leaf{overflow:visible;height:auto;flex:none}
.hp-btn{
  --w:200px;
  appearance:none;background:none;border:0;padding:0;margin:0;color:var(--on-red);font:inherit;
  display:inline-flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1.4vw,1rem);
  cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:transparent;
  min-width:44px;min-height:44px;
}
.hp-btn:focus-visible{outline:3px solid var(--on-red);outline-offset:6px}
.hp-btn:focus:not(:focus-visible){outline:none}
.hp-leaf{position:relative;display:grid;place-items:center;width:var(--w);aspect-ratio:82.887/74.0798;
  transition:transform var(--d-s) var(--e-snap)}
.hp-face{position:absolute;inset:0;display:grid;place-items:center}
.hp-body,.hp-halo,.hp-wave{position:absolute;inset:0;width:100%;height:100%;color:var(--on-red);overflow:visible}
.hp-body{filter:drop-shadow(0 calc(var(--w) * .05) calc(var(--w) * .07) rgb(16 25 43 / .22))}
.hp-glyph{position:relative;display:grid;place-items:center;color:var(--red);
  margin-top:calc(var(--w) * 3 / 46);margin-left:calc(var(--w) / 46)}
.hp-tri{width:calc(var(--w) * 24 / 46);height:calc(var(--w) * 24 / 46);display:block;overflow:visible}
.hp-pause{display:none;gap:calc(var(--w) * 3 / 46)}
.hp-pause i{display:block;width:calc(var(--w) * 4 / 46);height:calc(var(--w) * 14 / 46);
  background:currentColor;border-radius:calc(var(--w) * 2 / 46)}
.hp[data-playing="true"] .hp-tri{display:none}
.hp[data-playing="true"] .hp-pause{display:flex}
@media (hover:hover){.hp-btn:hover .hp-leaf{transform:scale(1.04)}}
.hp-btn:active .hp-leaf{transform:scale(.97)}
.hp-cap{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--on-red)}
.hp-links{gap:1.6rem}
/* .hero-actions is kept on the wrapper only so lang-hint.js waits until the button is off screen */
.hp .hp-act.hero-actions{display:block;margin:0;padding:0}
.hp-l-pause{display:none}
.hp[data-playing="true"] .hp-l-play{display:none}
.hp[data-playing="true"] .hp-l-pause{display:inline}
/* egg 5, the 3 s hold: the leaf grows a white halo instead of the pill's box ring */
.hp .hp-btn[data-play].egg-holding{box-shadow:none;transform:none}
.hp-halo{opacity:0;transform:scale(1);transition:opacity var(--d-s)}
.hp-btn.egg-holding .hp-halo{opacity:calc(.12 + var(--hold) * .3);transform:scale(calc(1 + var(--hold) * .16));transition:none}
.hp-btn.egg-holding .hp-leaf{transform:scale(calc(1 + var(--hold) * .03))}
@media (prefers-reduced-motion:reduce){
  .hp-leaf{transition:none}
  .hp-btn:hover .hp-leaf,.hp-btn:active .hp-leaf,.hp-btn.egg-holding .hp-leaf{transform:none}
  .hp-btn.egg-holding .hp-halo{transform:scale(1.08)}
}

.hp-a .hp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(2rem,5vw,5rem)}
.hp-a .hp-text{display:grid;gap:clamp(1rem,2vw,1.4rem);align-content:center}
.hp-a h1.hp-h1{font-size:clamp(2.4rem,1.2rem + 3.1vw,4.4rem);max-width:15ch}
.hp-a .hp-links{margin-top:clamp(.2rem,1vw,.8rem)}
.hp-a .hp-btn{--w:min(36vw,calc(var(--hp-h) * .74),560px)}
.hp-in-lbl{position:absolute;left:0;right:0;top:calc(50% + var(--w) * .2);text-align:center;
  color:var(--red);font-size:clamp(.78rem,calc(var(--w) * .034),1.1rem);letter-spacing:.12em;
  text-transform:uppercase;font-weight:700}
@media (max-width:720px){
  .hp-a .hp-wrap{display:flex;padding-block:1.2rem 1.3rem}
  .hp-a .hp-grid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;gap:clamp(.8rem,2.2svh,1.4rem)}
  .hp-a .hp-text{display:contents}
  .hp-a .hero-eyebrow{order:1;justify-content:center}
  .hp-a .hp-act{order:2}
  .hp-a h1.hp-h1{order:3;font-size:clamp(1.9rem,1.1rem + 3.4vw,2.6rem);max-width:none}
  .hp-a .hero-meta{order:4;justify-content:center}
  .hp-a .hp-links{order:5;justify-content:center;margin-top:0}
  .hp-a .hp-btn{--w:min(70vw,33svh)}
}