/* v6: "How ordering works" flip-up step cards + exhibition secret-club envelope. Transforms/opacity only, except one height reveal on the envelope slot. */
/* ---------- steps: readable stack without JS; flip-up calendar cards once v6.js adds .st-ready ---------- */
.st-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;line-height:inherit}
.st-hint,.st-bn,.st-tip{display:none}
.steps .st-in{flex:1}
.steps .st-front{display:flex;gap:16px;align-items:center}
.steps .st-back p{margin:.3em 0 0 62px}
.how .st-tip{display:block;text-align:center;font:italic 1rem Georgia,serif;color:var(--rose2);margin:-.2em 0 .9em}
.steps.st-ready{grid-template-columns:1fr 1fr;gap:16px 12px}
@media (min-width:900px){.steps.st-ready{grid-template-columns:repeat(4,1fr)}}
.st-ready .st{display:block;padding:0;background:none;box-shadow:none;perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:3px}
.st-ready .st::after{display:none}
.st-ready .st-in{display:grid;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.45,1);min-height:178px;height:100%}
.st-ready .st.open .st-in{transform:rotateX(180deg)}
.st-ready .st-front,.st-ready .st-back{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px 10px 12px;border-radius:3px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 4px 10px rgba(40,20,5,.22)}
.st-ready .st-front{background:var(--tea) url(/img/j-tea.webp) 0 0/260px}
.st-ready .st-back{background:#fdf8ee;transform:rotateX(180deg);justify-content:flex-start;padding-top:26px}
.st-ready .st-front::before,.st-ready .st-back::before{content:"";position:absolute;left:0;right:0;top:0;height:15px;border-radius:3px 3px 0 0;
  background:radial-gradient(circle,#3b2618 2.6px,rgba(0,0,0,0) 3.2px) 50% 50%/24px 15px repeat-x,linear-gradient(#b8665c,#9b4c43)}
.st-ready .st-front::after,.st-ready .st-back::after{content:"";position:absolute;inset:20px 5px 5px;border:1.5px dashed rgba(107,68,37,.4);pointer-events:none}
.st-ready .st-front .n{margin:2px 0 0}
.st-ready .st h3{margin:0;font-size:1.65rem;line-height:1.05}
.st-ready .st-hint{display:block;font:600 .8rem system-ui,sans-serif;letter-spacing:.04em;color:#8a5a45;opacity:.85}
.st-ready .st-bn{display:block;font:700 .72rem system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--rose2)}
.st-ready .st-back p{margin:0;font-size:.95rem;line-height:1.35;color:#3a2a1e;flex:1;display:flex;align-items:center}
.st-ready .st-back .st-hint{font-size:.72rem}
.st-ready .st:has(.st-btn:focus-visible){outline:3px solid #2f5a43;outline-offset:3px}
.st-ready .st-btn:focus{outline:none}
@keyframes stPeek{0%,100%{transform:none}45%{transform:rotateX(-22deg)}}
.st-ready .st.peek .st-in{animation:stPeek .9s ease-in-out 1}
@media (max-width:370px){.st-ready .st h3{font-size:1.45rem}.st-ready .st-back p{font-size:.93rem}}

/* ---------- exhibition: deep burgundy envelope, gold foil, stamp, postmark, wax seal ---------- */
.expo{background:#1b1316 radial-gradient(ellipse 95% 330px at 50% 70px,rgba(201,162,75,.22),rgba(27,19,22,0) 72%) no-repeat;color:#f3e7cf;padding:52px 14px 58px;overflow:hidden}
.expo .lace{display:none}
.expo .script{color:#d9b866;text-shadow:none;letter-spacing:.02em}
.expo h2{background:linear-gradient(100deg,#b8913f,#f6dc94 38%,#c79b45 62%,#f1d78e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;text-align:center;font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.01em;margin:0 0 26px}
.vwrap{width:min(100%,540px);margin:0 auto;position:relative}
.vslot{position:relative}
.vcard{position:relative;z-index:2;margin:0 5.5%;padding:26px 20px calc(26.7% + 16px);background:#fbf6ea linear-gradient(180deg,#fffdf6,#f6eedb);color:#2e2118;text-align:center;
  box-shadow:inset 0 0 0 7px #fbf6ea,inset 0 0 0 8px #c9a24b,inset 0 0 0 11px #fbf6ea,inset 0 0 0 11.6px rgba(201,162,75,.6),0 -6px 22px rgba(0,0,0,.35);border:1px solid #b8913f}
.vc-kick{margin:0;font:700 .66rem system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8c6a26}
.vc-kick i{font-style:normal;color:#5a1424;padding:0 .15em}
.vc-script{font-family:Caveat,cursive;font-size:2.5rem;line-height:1;color:#5a1424;margin:.18em 0 .1em}
.vc-sub{font:italic 1.05rem/1.4 Georgia,serif;color:#4a3122;margin:0 auto .7em;max-width:30em}
.vcard .expo-lead{background:none;box-shadow:none;transform:none;padding:12px 0 0;margin:0 auto 14px;font-size:1rem;color:#5c4a3c;border-top:1px solid rgba(201,162,75,.5)}
.vcard .wl{background:none;box-shadow:none;padding:0;text-align:left;border:0}
.vcard .wl::before,.vcard .clip{display:none}
.vcard .wl label{font-size:.95rem}
.vcard .wl .consent{background:#f3e8cf}
.vcard .wl .btn-gold{background:linear-gradient(180deg,#6b1a2c,#4a0f1c);color:#f6dc94;border:1.5px solid #c9a24b;box-shadow:0 3px 0 #2c0811}
.vc-foot{margin:18px 0 0;font:700 .7rem Georgia,serif;letter-spacing:.14em;color:#8c6a26;text-transform:uppercase}
.venv{position:relative;aspect-ratio:100/58;margin-top:-26.7%}
.venv>*{will-change:auto}
.venv-back{position:absolute;inset:0;z-index:1;border-radius:4px;background:#3a0b16 linear-gradient(180deg,#3c0c17,#2a0710);box-shadow:inset 0 0 0 1.5px #c9a24b,inset 0 0 0 5px #3a0b16,inset 0 0 0 5.6px rgba(214,178,94,.45),0 16px 26px rgba(0,0,0,.55)}
.venv-flap{position:absolute;left:0;right:0;top:0;height:51.7%;z-index:1;transform-origin:50% 0;transform:perspective(900px) rotateX(180deg)}
.vflap-svg,.vpocket-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.vflap-svg{filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.venv-front{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:0 0 4px 4px;overflow:hidden}
.venv-front::after{content:"";position:absolute;inset:0;border:1.5px solid #c9a24b;border-top:0;clip-path:polygon(0 20.7%,50% 41.4%,100% 20.7%,100% 100%,0 100%);border-radius:0 0 4px 4px}
.venv-cover{display:none}
.vseal,.vseal2{position:absolute;left:50%;width:clamp(44px,13%,64px);aspect-ratio:1;margin-left:calc(clamp(44px,13%,64px) / -2);border-radius:47% 53% 50% 48%/52% 46% 54% 48%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%,#f3d88f,#c99a3d 45%,#8a6420 80%);box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 0 0 4px rgba(120,84,22,.35),inset 0 0 0 6px rgba(255,236,170,.35)}
.vseal b,.vseal2 b{font:700 clamp(1.1rem,4.5vw,1.6rem) Georgia,serif;color:#7a5718;text-shadow:0 1px 0 rgba(255,240,190,.7),0 -1px 0 rgba(80,50,10,.5)}
.vseal{top:93%;translate:0 -50%;opacity:0;transition:opacity .3s,scale .3s}
.vseal2{top:41.4%;translate:0 -50%;z-index:4;opacity:1;transition:opacity .5s .9s,scale .5s .9s}
.vto{position:absolute;left:7%;bottom:12%;font-family:Caveat,cursive;font-size:clamp(1.05rem,4.6vw,1.5rem);color:#d9b866;transform:rotate(-4deg)}
.vstamp{position:absolute;right:6%;bottom:12%;width:16.5%;transform:rotate(5deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.vpost{position:absolute;right:13%;bottom:17%;width:30%;color:rgba(245,228,190,.55);transform:rotate(-9deg);z-index:2}
.venv-open{position:absolute;inset:0;z-index:5;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.venv-open[hidden]{display:none}
.venv-open span{position:absolute;left:50%;top:calc(100% + 16px);translate:-50% 0;white-space:nowrap;font:700 .9rem system-ui,sans-serif;letter-spacing:.06em;color:#f6dc94;background:rgba(27,19,22,.7);border:1px solid #c9a24b;border-radius:999px;padding:.45em 1.1em}
.venv-open:focus-visible span{outline:3px solid #f6dc94;outline-offset:2px}
/* Animated states, only while v6.js runs (.vx). The envelope parts move together by --vd (px, set by JS) so the card stays in one stacking context with them.
   closed: envelope sits right under the heading, card tucked inside; s1 seal breaks; s2 flap opens + card peeks; s3 envelope drops away and the card rises out. */
.vx .venv-cover{display:block;position:absolute;left:-60px;right:-60px;top:99.6%;height:2400px;z-index:3;background:#1b1316}
.vx.done .venv-cover{display:none}
.vx .venv-back,.vx .venv-front,.vx .venv-cover,.vx .vseal2,.vx .venv-open{transform:translateY(calc(var(--vd,0px) * -1));transition:transform 1.25s cubic-bezier(.55,.05,.25,1)}
.vx .venv-flap{transform:translateY(calc(var(--vd,0px) * -1)) perspective(900px) rotateX(0deg);z-index:4}
.vx .vseal{opacity:1}
.vx .vcard{transform:translateY(var(--vc0,100px));transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.vx .vseal2{opacity:0;scale:.6}
.vx.s1 .vseal{opacity:0;scale:1.35}
.vx.s2 .venv-flap{transform:translateY(calc(var(--vd,0px) * -1)) perspective(900px) rotateX(180deg);z-index:1;transition:transform .7s cubic-bezier(.45,.05,.3,1),z-index 0s linear .3s}
.vx.s2 .vcard{transform:translateY(var(--vc1,30px))}
.vx.s3 .venv-back,.vx.s3 .venv-front,.vx.s3 .venv-cover,.vx.s3 .vseal2,.vx.s3 .venv-open{transform:translateY(0)}
.vx.s3 .venv-flap{transform:translateY(0) perspective(900px) rotateX(180deg);transition:transform 1.25s cubic-bezier(.55,.05,.25,1)}
.vx.s3 .vcard{transform:none;transition:transform 1.25s cubic-bezier(.55,.05,.25,1)}
.vx.s3 .vseal2{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){.vx *{transition:none!important}.st-ready .st-in{transition:none!important;animation:none!important}}