#gate{position:fixed;inset:0;z-index:99999;overflow-y:auto;-webkit-overflow-scrolling:touch;color:#6b2f40;
background:#fbf3ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
font-family:var(--sans,'Jost',sans-serif);transition:opacity .8s ease,transform .8s ease;-webkit-user-select:none;user-select:none}
#gate.out{opacity:0;transform:scale(1.04);pointer-events:none}
#gate .g-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,rgba(255,214,120,.35),transparent 70%),radial-gradient(70% 50% at 50% 100%,rgba(240,138,171,.25),transparent 70%)}
#gate .g-land{position:relative;max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 34px);text-align:center}
#gate .g-top{font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.6}
#gate .g-stack{position:relative;height:250px;margin:18px auto 6px;width:260px}
#gate .g-stack figure{position:absolute;left:50%;top:0;margin:0;width:165px;padding:8px 8px 30px;background:#fff;border-radius:3px;box-shadow:0 12px 28px rgba(110,50,60,.22);transform-origin:50% 90%;animation:gDeal .9s cubic-bezier(.2,.8,.2,1) both}
#gate .g-stack figure img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
#gate .g-stack figure figcaption{position:absolute;left:0;right:0;bottom:5px;font-family:var(--script,'Great Vibes',cursive);font-size:19px;color:#a8506c}
#gate .g-stack figure:nth-child(1){transform:translateX(-95%) rotate(-11deg);animation-delay:.05s}
#gate .g-stack figure:nth-child(2){transform:translateX(-5%) rotate(9deg);animation-delay:.18s}
#gate .g-stack figure:nth-child(3){transform:translateX(-50%) rotate(-1.5deg);animation-delay:.32s;z-index:2}
@keyframes gDeal{from{opacity:0;margin-top:40px}to{opacity:1;margin-top:0}}
#gate .g-tape{position:absolute;top:-10px;left:50%;width:60px;height:20px;margin-left:-30px;background:rgba(255,226,140,.75);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
#gate h1{font-family:var(--script,'Great Vibes',cursive);font-weight:400;font-size:62px;line-height:1;margin:14px 0 0;color:#8a3550}
#gate h1 small{display:block;font-family:var(--serif,'Cormorant Garamond',serif);font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:#6b2f40;opacity:.65;margin-bottom:6px}
#gate .g-flags{font-size:16px;margin-top:4px;letter-spacing:.2em}
#gate .g-count{display:flex;justify-content:center;gap:10px;margin:18px 0 8px}
#gate .g-count div{background:#fff;border-radius:14px;padding:10px 8px;min-width:64px;box-shadow:0 6px 16px rgba(160,70,100,.12)}
#gate .g-count b{display:block;font-family:var(--serif,'Cormorant Garamond',serif);font-size:30px;line-height:1;color:#c2476e;font-variant-numeric:tabular-nums}
#gate .g-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
#gate .g-since{font-size:13px;opacity:.7;margin:0 0 4px}
#gate .g-note{font-family:var(--script,'Great Vibes',cursive);font-size:26px;line-height:1.2;color:#8a3550;margin:22px 8px 18px}
#gate .g-toc{font-family:var(--serif,'Cormorant Garamond',serif);font-size:13px;letter-spacing:.32em;text-transform:uppercase;opacity:.6;margin:0 0 12px;display:flex;align-items:center;gap:10px}
#gate .g-toc:before,#gate .g-toc:after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
#gate .g-chs{display:flex;flex-direction:column;gap:14px}
#gate .g-ch{position:relative;display:flex;align-items:stretch;gap:0;border:0;padding:0;font:inherit;color:inherit;text-align:left;background:#fff;border-radius:18px;overflow:hidden;
box-shadow:0 10px 24px rgba(160,70,100,.14);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s;animation:gUpIn .7s ease both}
#gate .g-ch:active{transform:scale(.97)}
@keyframes gUpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#gate .g-ch .g-th{width:96px;flex:none;background:#f3d9df center/cover no-repeat;position:relative}
#gate .g-ch.soon .g-th{filter:blur(3px) saturate(.6) brightness(1.05)}
#gate .g-ch .g-seal{position:absolute;right:-14px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8657f,#a8203f);
box-shadow:0 2px 6px rgba(120,20,40,.35),inset 0 -2px 4px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2}
#gate .g-ch .g-tx{padding:14px 16px 14px 26px;flex:1;min-width:0}
#gate .g-ch .g-n{font-family:var(--serif,'Cormorant Garamond',serif);font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
#gate .g-ch .g-t{font-family:var(--script,'Great Vibes',cursive);font-size:30px;line-height:1.05;color:#8a3550;margin:2px 0 4px}
#gate .g-ch .g-d{font-size:12px;opacity:.7}
#gate .g-ch.soon .g-d b{color:#c2476e}
#gate .g-ch.open .g-d b{color:#3e8a5a}
#gate .g-sign{font-family:var(--script,'Great Vibes',cursive);font-size:24px;color:#8a3550;margin-top:26px;opacity:.9}
/* keypad */
#gate .g-sheet{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(251,243,234,.96);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
#gate.pad .g-sheet{opacity:1;pointer-events:auto}
#gate .g-sheet .g-n{font-family:var(--serif,'Cormorant Garamond',serif);font-size:13px;letter-spacing:.28em;text-transform:uppercase;opacity:.6}
#gate .g-sheet h2{font-family:var(--script,'Great Vibes',cursive);font-weight:400;font-size:46px;margin:2px 0 4px;color:#8a3550}
#gate .g-sub{font-size:14px;margin:0 0 22px;opacity:.75}
#gate .g-back{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:16px;border:0;background:none;font:inherit;font-size:15px;color:#6b2f40;opacity:.7;cursor:pointer}
#gate .g-dots{display:flex;gap:16px;margin-bottom:26px}
#gate .g-dots span{width:22px;height:20px;transition:transform .15s}
#gate .g-dots span svg{width:100%;height:100%}
#gate .g-dots span path{fill:none;stroke:#d97a98;stroke-width:2.2;transition:fill .15s}
#gate .g-dots span.on path{fill:#e8789b;stroke:#e8789b}
#gate .g-dots span.on{transform:scale(1.15)}
#gate.ok .g-dots span path{fill:#f2c14e;stroke:#f2c14e}
#gate.shake .g-dots{animation:gShake .45s}
@keyframes gShake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
#gate .g-pad{display:grid;grid-template-columns:repeat(3,74px);gap:14px}
#gate .g-pad button{width:74px;height:74px;border-radius:50%;border:0;font-family:var(--serif,'Cormorant Garamond',serif);font-size:32px;color:#6b2f40;background:#fff;
box-shadow:0 6px 16px rgba(160,70,100,.16);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s,background .15s}
#gate .g-pad button:active{transform:scale(.92);background:#ffe8ef}
#gate .g-pad .g-x{background:transparent;box-shadow:none;font-size:24px}
#gate .g-hint{margin-top:20px;font-size:14px;opacity:.8;min-height:20px}
@media (max-height:640px){#gate .g-pad{grid-template-columns:repeat(3,62px)}#gate .g-pad button{width:62px;height:62px;font-size:26px}#gate .g-stack{height:210px}#gate .g-stack figure{width:140px}}
@media (prefers-reduced-motion:reduce){#gate .g-stack figure,#gate .g-ch{animation:none}}

#gate.closed{overflow:hidden}
#gate.closed .g-land{opacity:0;transform:scale(.96)}
#gate .g-land{transition:opacity .9s ease .1s,transform .9s ease .1s}
#gate.opened .g-land{opacity:1;transform:none}
#gate .g-cover{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:radial-gradient(80% 60% at 50% 40%,#fff3e4 0%,#f4dccd 60%,#e9c6b8 100%);perspective:1800px;cursor:pointer;transition:opacity .8s ease .9s}
#gate.opening .g-cover{opacity:0;pointer-events:none}
#gate .g-book{position:relative;width:min(78vw,300px);aspect-ratio:3/4.2;transform-style:preserve-3d;animation:gFloat 4s ease-in-out infinite}
@keyframes gFloat{50%{transform:translateY(-6px) rotate(-.6deg)}}
#gate.opening .g-book{animation:gZoom 1.6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes gZoom{to{transform:scale(1.25) translateX(8%)}}
#gate .g-pages{position:absolute;inset:4px 2px 4px 8px;border-radius:2px 10px 10px 2px;
background:repeating-linear-gradient(90deg,#fffaf2 0 2px,#f1e6d6 2px 3px);box-shadow:inset 6px 0 14px rgba(0,0,0,.08)}
#gate .g-front{position:absolute;inset:0;border-radius:4px 14px 14px 4px;transform-origin:0 50%;transform-style:preserve-3d;
background:linear-gradient(135deg,#a8304f 0%,#8a2442 45%,#6f1a35 100%);
box-shadow:0 30px 60px rgba(90,20,40,.4),inset 0 0 0 1px rgba(255,255,255,.08),inset 12px 0 18px rgba(0,0,0,.25);
transition:transform 1.4s cubic-bezier(.55,0,.25,1);backface-visibility:hidden;overflow:hidden}
#gate .g-front:before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#gate.opening .g-front{transform:rotateY(-165deg)}
#gate .g-spine{position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.08) 60%,rgba(0,0,0,.15))}
#gate .g-foil{position:absolute;inset:16px 16px 16px 28px;border:1.5px solid rgba(242,200,110,.75);border-radius:4px 10px 10px 4px;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;
box-shadow:inset 0 0 0 4px rgba(0,0,0,0),inset 0 0 0 5px rgba(242,200,110,.35)}
#gate .g-cv-top,#gate .g-cv-vol{font-family:var(--serif,'Cormorant Garamond',serif);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
background:linear-gradient(180deg,#ffe7a6,#d9a441 55%,#f6d68a);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
#gate .g-cv-photo{width:58%;margin:16px 0 12px;padding:5px 5px 18px;background:#fffaf0;transform:rotate(-3deg);box-shadow:0 8px 18px rgba(0,0,0,.35)}
#gate .g-cv-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
#gate .g-cv-t{font-family:var(--script,'Great Vibes',cursive);font-weight:400;font-size:48px;line-height:1;margin:0;
background:linear-gradient(180deg,#fff1c4 0%,#e6b85a 50%,#fbe3a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
#gate .g-cv-t i{font-style:normal;font-size:.7em}
#gate .g-cv-flags{font-size:13px;margin:6px 0 10px;letter-spacing:.2em}
#gate .g-cv-tap{margin-top:28px;font-family:var(--serif,'Cormorant Garamond',serif);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#7a3b4a;opacity:.75;animation:gBlink 2.2s ease-in-out infinite}
@keyframes gBlink{50%{opacity:.3}}
#gate.opening .g-cv-tap{opacity:0;animation:none;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){#gate .g-book{animation:none}#gate .g-front{transition-duration:.4s}}

#gate .g-front{z-index:2;transform:translateZ(2px)}
#gate .g-pages{z-index:1;transform:translateZ(0)}
#gate.opening .g-front{transform:translateZ(2px) rotateY(-165deg)}
#gate .g-pages{display:flex;align-items:center;justify-content:center}
#gate .g-pg1{font-family:var(--script,'Great Vibes',cursive);font-size:32px;line-height:1.25;color:#8a3550;text-align:center;margin:0;padding:20px}
#gate .g-pg1 span{font-size:24px;opacity:.8}

/* ===== page flip ===== */
#gate{overflow:hidden}
#gate .g-flip{position:fixed;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;perspective:1400px;
transition:opacity .9s ease .1s,transform .9s ease .1s}
#gate .g-flip::-webkit-scrollbar{display:none}
#gate.closed .g-flip{opacity:0;transform:scale(.96)}
#gate .g-page{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;
padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 46px);box-sizing:border-box}
#gate .g-paper{--shade:0;position:relative;width:100%;max-width:420px;height:100%;max-height:760px;border-radius:6px 18px 18px 6px;overflow:hidden;
background:#fffaf2;box-shadow:0 18px 40px rgba(110,50,60,.22),inset 14px 0 18px -10px rgba(120,60,50,.22);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 20px;box-sizing:border-box;will-change:transform;backface-visibility:hidden}
#gate .g-paper:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(60,20,30,var(--shade)),rgba(60,20,30,calc(var(--shade)*.3)));border-radius:inherit}
#gate .g-pn{position:absolute;bottom:12px;left:0;right:0;font-family:var(--serif,'Cormorant Garamond',serif);font-size:13px;opacity:.45;margin:0}
#gate .g-pn:before,#gate .g-pn:after{content:" — "}
#gate .g-p0 .g-top{margin:0}
#gate .g-p0 h1{margin:2px 0 0;font-size:56px}
#gate .g-p0 .g-stack{height:205px;margin:12px auto 4px;width:250px}
#gate .g-p0 .g-stack figure{width:140px}
#gate .g-p0 .g-count{margin:6px 0 4px}
#gate .g-p0 .g-count div{min-width:58px;padding:8px 6px}
#gate .g-p0 .g-count b{font-size:26px}
#gate .g-p0 .g-since{margin:12px 0 0;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
#gate .g-p0 .g-note{font-size:23px;margin:14px 6px 8px}
#gate .g-swipe{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin:6px 0 0}
#gate .g-swipe span{display:inline-block;animation:gNudge 1.4s ease-in-out infinite}
@keyframes gNudge{50%{transform:translateX(6px)}}
#gate .g-chp .g-paper{justify-content:flex-end;padding:0;color:#fff}
#gate .g-chp .g-img{position:absolute;inset:0;background:#d9b8bf center/cover no-repeat}
#gate .g-chp.soon .g-img{filter:blur(6px) saturate(.7);transform:scale(1.08)}
#gate .g-chp .g-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,10,20,0) 30%,rgba(40,10,20,.35) 55%,rgba(40,10,20,.82) 100%)}
#gate .g-chp.soon .g-shade{background:linear-gradient(180deg,rgba(60,20,35,.25),rgba(60,20,35,.8))}
#gate .g-chtx{position:relative;padding:0 24px 52px;width:100%;box-sizing:border-box}
#gate .g-chp .g-n{color:#ffe7a6;opacity:.95;font-family:var(--serif,'Cormorant Garamond',serif);font-size:13px;letter-spacing:.3em;text-transform:uppercase;margin:0}
#gate .g-chp h2{font-family:var(--script,'Great Vibes',cursive);font-weight:400;font-size:54px;line-height:1.05;margin:4px 0 6px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
#gate .g-line{font-size:15px;line-height:1.45;margin:0 0 18px;opacity:.92}
#gate .g-open{border:0;font:inherit;font-size:16px;font-weight:600;padding:14px 26px;border-radius:999px;cursor:pointer;color:#6b2f40;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent}
#gate .g-open:active{transform:scale(.96)}
#gate .g-open.sealed{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:10px}
#gate .g-wax{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif,'Cormorant Garamond',serif);font-size:11px;font-weight:700;color:#ffd9c2;
background:radial-gradient(circle at 35% 30%,#e8657f,#a8203f);box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 -2px 4px rgba(0,0,0,.25)}
#gate .g-chp .g-d{font-size:12px;letter-spacing:.08em;opacity:.8;margin:10px 0 0}
#gate .g-chp .g-pn{color:#fff}
#gate .g-pend .g-tbc{font-family:var(--script,'Great Vibes',cursive);font-size:50px;color:#8a3550;margin:0 0 10px}
#gate .g-pend .g-endl{font-family:var(--serif,'Cormorant Garamond',serif);font-size:19px;line-height:1.5;margin:0}
#gate .g-back1{margin-top:26px;border:0;background:none;font:inherit;font-size:14px;color:#8a3550;opacity:.75;cursor:pointer}
#gate .g-dotsnav{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18px);display:flex;justify-content:center;gap:8px;pointer-events:none;transition:opacity .6s}
#gate.closed .g-dotsnav{opacity:0}
#gate .g-dotsnav i{width:7px;height:7px;border-radius:50%;background:#d97a98;opacity:.35;transition:all .25s}
#gate .g-dotsnav i.on{opacity:1;width:20px;border-radius:4px}
#gate .g-sheet{z-index:6}
#gate .g-cover{z-index:7}
@media (max-height:700px){#gate .g-p0 .g-stack{height:160px}#gate .g-p0 .g-stack figure{width:112px}#gate .g-p0 h1{font-size:46px}#gate .g-p0 .g-note{font-size:20px;margin:8px 4px 4px}}
@media (prefers-reduced-motion:reduce){#gate .g-swipe span{animation:none}}