/* v4: offers row, watch modal, flip-book, stamps, theatre curtain. Looks + light JS only. */
html,body{overflow-x:clip}
/* ---------- theatre curtain (only when JS added .curtain-on; never blocks content without JS) ---------- */
.curtain{display:none}
html.curtain-on .curtain{display:block;position:fixed;inset:0;z-index:9999;overflow:hidden;cursor:pointer;animation:cGone .01s linear 1.75s forwards}
.curtain .c-l,.curtain .c-r{position:absolute;top:0;bottom:0;width:51%;
  background:repeating-linear-gradient(90deg,#a95f58 0,#d79a90 14px,#c98479 26px,#9b4c43 40px,#b86c63 50px,#a95f58 56px);
  box-shadow:inset 0 -60px 80px rgba(60,20,15,.35)}
.curtain .c-l{left:0;transform-origin:0 50%;animation:cL 1.25s cubic-bezier(.65,.05,.3,1) .35s forwards;border-right:3px solid #7d3a33}
.curtain .c-r{right:0;transform-origin:100% 50%;animation:cR 1.25s cubic-bezier(.65,.05,.3,1) .35s forwards;border-left:3px solid #7d3a33}
.curtain .c-top{position:absolute;left:0;right:0;top:0;height:64px;background:#be9362 url(/img/j-coffee.webp) 0 0/220px;
  -webkit-mask:radial-gradient(28px 22px at 28px 64px,#0000 98%,#000) 0 0/56px 100%;mask:radial-gradient(28px 22px at 28px 64px,#0000 98%,#000) 0 0/56px 100%;
  box-shadow:0 4px 10px rgba(0,0,0,.4);animation:cTop .9s ease-in .7s forwards}
.curtain .c-ticket{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);background:#fdf8ee;color:#4e301b;padding:14px 26px 10px;border:2px dashed #9b4c43;
  font-family:Caveat,cursive;font-size:2.2rem;line-height:1;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.35);animation:cFade .3s ease-in .3s forwards}
.curtain .c-ticket small{display:block;font:600 .8rem system-ui,sans-serif;color:#7a5a45;margin-top:6px}
html.curtain-off .curtain{display:none}
@keyframes cL{to{transform:translateX(-96%) scaleX(.55)}}
@keyframes cR{to{transform:translateX(96%) scaleX(.55)}}
@keyframes cTop{to{transform:translateY(-110%)}}
@keyframes cFade{to{opacity:0;visibility:hidden}}
@keyframes cGone{to{visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){html.curtain-on .curtain{display:none}}

/* ---------- gentle curtain-reveal of sections on scroll (class added by JS only) ---------- */
@media (prefers-reduced-motion:no-preference){
  main>section.rv{clip-path:inset(-40px 50% -40px 50%);opacity:.2;transition:clip-path .9s cubic-bezier(.6,.05,.3,1),opacity .6s}
  main>section.rv.in{clip-path:inset(-40px -40px -40px -40px);opacity:1}
}

/* ---------- offers: 3 cards side by side, swipe row on phone ---------- */
.grid.offers{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  gap:22px;padding:34px 10px 26px;margin:0 -8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#9b4c43 transparent}
.grid.offers>.card{scroll-snap-align:center}
.grid.offers>.loading{grid-column:1/-1}
@media (min-width:760px){.grid.offers{grid-auto-columns:calc((100% - 44px)/3)}}
.swipe-hint{font-family:Caveat,cursive;font-size:1.5rem;color:var(--rose2);text-align:right;margin:0 6px -18px}
@media (min-width:1100px){.swipe-hint{display:none}}
/* spiral coil across the top of every card */
.grid.offers .card::after{content:"";position:absolute;left:14px;right:14px;top:-15px;height:32px;z-index:5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='32' viewBox='0 0 22 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236d6a66'/%3E%3Cstop offset='.45' stop-color='%23f2efe9'/%3E%3Cstop offset='1' stop-color='%235d5954'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='11' cy='24' rx='3.6' ry='3.2' fill='%232b1d14' opacity='.8'/%3E%3Cpath d='M8 24 C6.5 15 7.5 5 11 3 C14.5 5 15.5 15 14 24' fill='none' stroke='url(%23g)' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/22px 32px repeat-x}
.grid.offers .card::before{display:none}
.card .ph{overflow:hidden}
.card-no{position:absolute;left:10px;top:10px;width:40px;height:40px;border-radius:50%;background:#fdf8ee;color:#9b4c43;border:2px dashed #9b4c43;display:grid;place-items:center;
  font:700 1.5rem/1 Caveat,cursive;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.btn-watch{position:absolute;right:10px;bottom:10px;min-height:48px;padding:.45em 1em;border-radius:999px;border:2px solid #fffdf7;background:rgba(46,33,24,.82);color:#fffdf7;
  font:700 1.05rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.btn-watch:hover{background:#9b4c43}
.btn-watch.inline{position:static;display:block;margin:14px auto 0;background:#4e301b}
.btn-quote{display:block;text-align:center;margin-top:10px;padding:.6em .4em;min-height:48px;font-weight:700;color:#7a3a33;text-decoration:underline;text-underline-offset:3px}
/* ticket-stub "Special R800" */
.ticket-special,.tk-big{display:inline-flex;align-items:stretch;padding:0;border:0;background:none;filter:drop-shadow(0 2px 3px rgba(60,30,10,.3));transform:rotate(-2deg)}
.ticket-special::before{display:none}
.tk-l,.tk-r{display:flex;align-items:center;padding:.25em .7em;font-weight:800}
.tk-l{background:#9b4c43;color:#fdf8ee;font:700 1.45rem/1 Caveat,cursive;border-radius:6px 0 0 6px;
  -webkit-mask:radial-gradient(circle 6px at 0 50%,#0000 97%,#000);mask:radial-gradient(circle 6px at 0 50%,#0000 97%,#000)}
.tk-r{background:#fdf8ee;color:#2f5a43;border:2px dashed #9b4c43;border-left:2px dashed #9b4c43;font-size:1.35rem;border-radius:0 6px 6px 0}
.tk-big{font-size:1.25em;margin:.4em 0 .6em}
.tk-big .tk-l{font-size:1.9rem}.tk-big .tk-r{font-size:1.7rem}
/* round ink stamp */
.ink-stamp{position:absolute;right:10px;top:8px;width:78px;height:78px;color:#9b4c43;opacity:.78;transform:rotate(14deg);pointer-events:none;mix-blend-mode:multiply}
.ink-stamp svg{width:100%;height:100%}
.shop .seal{display:none}

/* ---------- flip-book ---------- */
.set .sub{max-width:40em}
.fb{max-width:460px;margin:22px auto 0;position:relative}
.fb-pages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px}
.fb-page{flex:0 0 90%;scroll-snap-align:center;box-sizing:border-box;background:#fdf8ee url(/img/j-tea.webp) 0 0/300px;color:#2e2118;padding:22px 20px 26px 34px;
  border-radius:3px 10px 10px 3px;box-shadow:0 10px 22px rgba(40,20,5,.35);position:relative}
.fb-page::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;border-left:2px dashed rgba(155,76,67,.45)}
.fb-page h3{font-family:Caveat,cursive;font-size:2.2rem;line-height:1.05;color:#4e301b;margin:0 0 .35em}
.fb-page p{margin:.4em 0}
.pg-photo img,.pg-full{display:block;width:100%;height:auto;border:8px solid #fffdf7;box-shadow:0 4px 10px rgba(40,20,5,.3);box-sizing:border-box}
.pg-photo{transform:rotate(-1.5deg);margin:4px 0 14px}
.pg-cover h3{font-size:2.5rem}
.pg-hint{font-family:Caveat,cursive;font-size:1.6rem;color:#9b4c43;text-align:right}
.pg-list{margin:.8em 0 .3em;padding-left:1.1em}.pg-list li{margin:.25em 0}
.pg-small{font-size:.95rem;color:#5c4a3c}
.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stamp{margin:0;padding:9px;background:radial-gradient(circle at center,#0000 3.4px,#fffdf7 4px) -6px -6px/12px 12px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
.stamp:nth-child(2n){transform:rotate(2deg)}.stamp:nth-child(2n+1){transform:rotate(-2deg)}
.stamp img{display:block;width:100%;height:auto}
.swatches{display:flex;justify-content:center;margin:6px 0 16px}
.sw{width:84px;height:110px;margin:0 -8px;box-shadow:0 4px 8px rgba(0,0,0,.25);border:5px solid #fffdf7}
.sw1{background:url(/img/j-coffee.webp) center/cover;transform:rotate(-9deg)}.sw2{background:url(/img/j-avo.webp) center/cover;transform:translateY(-6px)}.sw3{background:url(/img/j-tea.webp) center/cover;transform:rotate(9deg)}
.fb-page .tags{justify-content:flex-start}
.polaroid{margin:4px auto 10px;width:72%;background:#fffdf7;padding:9px 9px 34px;box-shadow:0 5px 12px rgba(40,20,5,.3);transform:rotate(-3deg)}
.polaroid img{display:block;width:100%;height:auto}
.ask-stamp{display:inline-block;font:700 2rem/1 Caveat,cursive;color:#9b4c43;border:3px double #9b4c43;border-radius:8px;padding:.15em .5em;transform:rotate(-6deg);background:rgba(255,250,240,.6)}
.vid-card{display:block;position:relative;width:100%;padding:0;border:8px solid #fffdf7;background:#000;cursor:pointer;box-shadow:0 5px 12px rgba(40,20,5,.3)}
.vid-card img{display:block;width:100%;height:auto;opacity:.9}
.vid-card .play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(155,76,67,.92);color:#fff;display:grid;place-items:center;font-size:1.8rem}
.vid-cap{display:block;background:#fffdf7;color:#4e301b;font:700 1.3rem/1.2 Caveat,cursive;padding:8px 4px 2px}
.pg-order{text-align:center}
.pg-order .btn{width:100%;margin:8px 0}
.seal-mini{display:block;width:84px;height:84px;margin:10px auto 0;background:url(/img/j-seal.webp) center/contain no-repeat;transform:rotate(-10deg)}
.fb-nav{display:none}
/* JS flip mode */
html.js .fb.ready .fb-pages{display:block;position:relative;overflow:visible;perspective:2000px;padding:0;height:var(--fbh,620px)}
html.js .fb.ready .fb-page{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform-origin:0 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.45,.05,.3,1),box-shadow .85s;will-change:transform;touch-action:pan-y}
html.js .fb.ready .fb-page{display:flex;flex-direction:column;justify-content:center}
html.js .fb.ready .fb-page.flipped{transform:rotateY(-160deg);box-shadow:-12px 10px 22px rgba(40,20,5,.15);pointer-events:none}
html.js .fb.ready .fb-page.flipped{visibility:hidden;transition:transform .85s cubic-bezier(.45,.05,.3,1),visibility 0s .85s}
html.js .fb.ready .fb-page.turning{visibility:visible}
html.js .fb.ready::before{content:"";position:absolute;left:-17px;top:16px;bottom:62px;width:34px;z-index:60;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' viewBox='0 0 34 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%236d6a66'/%3E%3Cstop offset='.45' stop-color='%23f2efe9'/%3E%3Cstop offset='1' stop-color='%235d5954'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='25' cy='12' rx='3.4' ry='3.8' fill='%232b1d14' opacity='.85'/%3E%3Cpath d='M25 9 C15 7.5 5 8.5 3 12 C5 15.5 15 16.5 25 15' fill='none' stroke='url(%23g)' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/34px 24px repeat-y}
html.js .fb.ready .fb-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:12px}
.fb-nav button{width:58px;height:58px;border-radius:50%;border:2px solid #fffdf7;background:#9b4c43;color:#fff;font-size:2rem;line-height:1;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.fb-nav button:disabled{opacity:.35;cursor:default}
.fb-count{font:700 1.5rem/1 Caveat,cursive;color:#4e301b;background:#fdf8ee;padding:.3em .8em;border-radius:4px;transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){html.js .fb.ready .fb-page{transition:none}}

/* ---------- video modal ---------- */
.vmodal{position:fixed;inset:0;z-index:9000;background:rgba(30,18,10,.88);display:grid;place-items:center;padding:16px}
.vmodal[hidden]{display:none}
.vm-box{position:relative;width:min(900px,100%);background:#fdf8ee;padding:10px 10px 6px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vm-box.vert{width:min(400px,100%)}
.vm-frame{position:relative;aspect-ratio:16/9;background:#000}
.vm-box.vert .vm-frame{aspect-ratio:9/16;max-height:78vh;margin:0 auto}
.vm-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vm-title{font:700 1.5rem/1.2 Caveat,cursive;color:#4e301b;margin:6px 4px 2px}
.vm-x{position:absolute;right:-6px;top:-18px;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:#9b4c43;color:#fff;font-size:1.3rem;cursor:pointer;z-index:2}
.pg-steps{margin:.7em 0 0;padding-left:1.3em;font-size:1rem}.pg-steps li{margin:.2em 0}
html.js .fb.ready .fb-page .pg-full{max-height:58%;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.set-tape{top:18px;right:-8px;left:auto;transform:rotate(16deg);width:88px}