/* MAISON YUMI — design-engineering polish, deliberately last in cascade.
   Editorial love-letter design, quiet canvas, purposeful touch feedback. */
:root { --paper:#fff8f3; --ink:#492339; --pink:#bb416c; --blush:#f7dce5; --green:#577963; --gold:#b58b54; --line:#e8d3cb; --serif:'Iowan Old Style','Baskerville','Palatino Linotype',Georgia,serif; --out:cubic-bezier(.22,1,.36,1); }
html { -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; scroll-padding-top:88px; }
body { background-color:var(--paper); background-image:radial-gradient(#d6a6b424 .65px,transparent .65px); background-size:7px 7px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button,a { touch-action:manipulation; } button { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } input,textarea,select { font-size:16px; }
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #a14978;outline-offset:3px}
button:active,.btn:active,.text-btn:active { transform:scale(.975); }
::selection {background:#f3c0d2;color:var(--ink)}
.eyebrow {font-size:10px;font-weight:700;letter-spacing:2.2px;line-height:1.6;color:var(--green)}
.brand {font-family:var(--serif);letter-spacing:-.6px;font-weight:600;font-size:23px}.brand span{font-style:italic;color:var(--pink)}
header {background:#fffaf6ed;backdrop-filter:blur(18px);border-bottom:1px solid #dcbfc280}nav {max-width:640px;padding:15px 21px;min-height:65px}.links {gap:17px;font-size:10px;letter-spacing:.5px}.links a:first-child {display:inline}.nav-ticket {border:0;background:#f7e3e9;border-radius:99px;padding:10px 12px;color:#9f3760}
.gate {min-height:100svh;max-width:900px;gap:34px;padding:35px clamp(24px,4vw,50px);position:relative;isolation:isolate}.gate:before{top:20%;left:10%;background:radial-gradient(circle,#ecc2d8,transparent 70%);filter:none;animation:none}.gate-copy{max-width:510px}.gate h1 {font-size:clamp(53px,7vw,83px);font-weight:400;letter-spacing:-2.7px;line-height:1.06;margin:18px 0 20px}.gate h1 em{font-weight:400;color:var(--pink)}.gate-copy>p{color:#805e6a;line-height:1.8}.gate-copy .eyebrow {color:#a36b55}.gate-art{max-width:370px;animation:none;filter:drop-shadow(0 20px 28px #6c364221)}.gate-art .yumi-art{border:7px solid #fffbf6;border-radius:170px 170px 15px 15px;box-shadow:0 0 0 1px #e4b9ba,0 18px 0 -9px #eed8d4}.gate-art:after{content:'EST. WITH LOVE · 2026';background:#fff9f1f2;border:1px solid #d7a5b7;border-radius:100px;bottom:-6px;padding:12px 18px;color:var(--ink);font-weight:bold;letter-spacing:1.6px;box-shadow:0 6px 18px #5a334019}.gate-art:before{border-color:#e9bdc7}.countdown{gap:9px}.countdown div{border-radius:15px;border:1px solid #ebd0d4;background:#fffefd;box-shadow:0 5px 12px #8c57620c;padding:14px 2px}.countdown strong{font:32px/1 var(--serif);letter-spacing:-1px}.countdown span{font-size:8px}.gate-date{color:#977987!important}.gate-foot{margin-bottom:4px;color:#967f86!important}.owner-preview{color:#ad8b95}.gate .btn{max-width:330px}
.btn{border-radius:100px;font-size:13px;font-weight:700;letter-spacing:.1px;padding:16px 24px;min-height:52px;background:var(--pink);border-color:var(--pink);box-shadow:0 7px 18px #a33a6240;transition:transform .16s var(--out),box-shadow .16s var(--out),background-color .16s}.btn:active{box-shadow:0 3px 8px #a33a6228}.btn:disabled{box-shadow:none}.pill{border-radius:100px;background:#fff9f1;border:1px solid #dfbdbe;color:#865a69;letter-spacing:1px;font-weight:600}
.hero{padding:72px 20px 43px;background:radial-gradient(ellipse 65% 50% at 50% 16%,#f8dfeb 0,transparent 90%);overflow:hidden}.hero:before{animation:none;filter:none;opacity:.2}.hero .eyebrow{letter-spacing:2.4px}.hero h1{font-size:clamp(59px,10vw,88px);font-weight:400;letter-spacing:-3.5px;line-height:1.04;margin:18px auto 15px}.hero h1 em{display:inline-block; color:var(--pink);font-style:italic}.hero h1 em:after{bottom:-4px;opacity:.5}.hero-copy{font-size:14px;line-height:1.8;color:#715265}.hero-portrait{width:138px;height:138px;animation:none;border:7px solid #fffaf2;box-shadow:0 0 0 1px #e4b2c5,0 13px 22px #b14b6d23}.hero .btn{margin-top:22px}.star{font-size:24px;animation:twinkle 6s ease-in-out infinite;opacity:.45}.s2{font-size:32px}
.letter-section{padding:8px 20px 40px;max-width:740px;margin:auto}.letter-frame{position:relative;text-align:center;padding:42px 30px 36px;border-radius:6px;background:#fffdf9;border:1px solid #e8d3c8;box-shadow:0 12px 30px #7645520e,inset 0 0 0 6px #fffdf9,inset 0 0 0 7px #efdfd8}.letter-frame:before,.letter-frame:after{content:'✧';position:absolute;color:#c3a17f;font:30px var(--serif);top:12px;left:17px}.letter-frame:after{left:auto;right:17px}.letter-label{display:block;font-size:9px;letter-spacing:2.2px;color:#997e78;font-weight:bold;margin:13px 0}.letter-frame .yumi-badge{display:block;margin:0 auto 10px}.letter-frame h2{font:normal clamp(31px,5vw,45px)/1.17 var(--serif);letter-spacing:-1.3px;margin:13px 0 18px}.letter-frame h2 em{color:var(--pink);font-weight:400}.letter-frame p{font:16px/1.8 var(--serif);max-width:400px;margin:0 auto;color:#71515d}.letter-signature{display:block;margin-top:22px;font:italic 21px var(--serif);color:#af5374}.letter-ornament{font-size:16px;color:#be9a69;letter-spacing:8px}
.wish-card{max-width:680px;margin:12px auto 38px;background:linear-gradient(140deg,#fffaf5,#f9e1e7);border:1px solid #ecd0d8;border-radius:23px;box-shadow:0 12px 27px #853a6011;padding:30px 22px}.wish-card h2{font-size:35px}.wish-card .btn{font-size:12px}
.birthday-ribbon{background:#592b40;color:#fff6eb;padding:15px 12px;font-size:9px;letter-spacing:2px;text-align:center;white-space:normal;line-height:1.8}
.section{max-width:730px;padding:65px 23px}.section-heading{align-items:end}.section-heading h2{font-size:clamp(38px,7vw,53px);letter-spacing:-1.5px}.small{color:#826473}.yumi-badge{border:3px solid #fffcf4;box-shadow:0 0 0 1px #debaca,0 7px 16px #84516721;border-radius:50%;width:74px;height:74px;display:block;margin:0 0 15px;background-size:300% 300%}
.book-heading{border-color:#e5cace}.book-count{font-style:italic}.moment-garden{border:1px solid #e9d3d6;background:linear-gradient(145deg,#fffef9,#fbeff0);border-radius:22px;padding:22px 13px;box-shadow:none}.moment-stamps button{transition:transform .16s var(--out)}.moment-stamps button:active{transform:scale(.88)}
.ticket-grid{grid-template-columns:1fr;gap:16px}.ticket,.ticket:nth-child(2),.ticket:nth-child(3),.ticket:nth-child(3n+2),.ticket:nth-child(3n){background:#fffdf9}.ticket{display:grid;grid-template-columns:122px minmax(0,1fr);align-items:stretch;border:1px solid #ead5d1;border-radius:21px;box-shadow:0 7px 20px #662e4010;min-width:0;overflow:hidden;isolation:isolate;transition:transform .16s var(--out),box-shadow .2s var(--out)}.ticket:active{transform:scale(.986)}
.ticket .coupon-picture{grid-column:1;grid-row:1/3;width:100%;height:100%;min-height:190px;margin:0;border:0;border-radius:0;background-color:#fae6e8;background-size:300% 300%;transform:none!important;box-shadow:none}.ticket-top{grid-column:2;grid-row:1;min-height:0;padding:17px 16px 8px;display:block}.ticket-no{font-size:8px;letter-spacing:.7px;gap:7px;color:#987e7f}.ticket-no span:first-child{display:none}.ticket h3{font-size:25px;line-height:1.05;letter-spacing:-.7px;margin:12px 0 7px}.ticket .ticket-icon{display:none}.ticket p{font-size:11px;line-height:1.55;color:#816574;margin:0}.ticket-bottom{grid-column:2;grid-row:2;padding:10px 16px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:0}.ticket-bottom:before,.ticket-bottom:after{display:none}.ticket-bottom span{font-size:8px;color:#9b7b84;letter-spacing:.65px}.ticket-bottom .text-btn{font-size:10px;text-decoration:none;color:#af3e68;border-bottom:0;background:#fbe6ed;border-radius:100px;padding:10px 12px;min-height:38px}.ticket.is-stamped{background:#f4f1e8;border-color:#cdd3b6}.ticket.is-stamped .coupon-picture{filter:saturate(.65)}.ticket.is-stamped:after{font-size:8px;top:9px;right:8px}
.games-section{background:linear-gradient(180deg,#f7e5e9,#fff8f2);border-top:1px solid #edd4d7;border-bottom:1px solid #ecd3d7}.game-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-radius:17px;padding:5px;background:#f1d9df}.game-tabs button{border-radius:13px;min-height:48px;transition:background-color .18s}.game-panel{box-shadow:0 8px 25px #9a4b6e18;border-radius:22px;padding:23px 18px}.heart-hole,.memory-card{touch-action:manipulation;user-select:none}.heart-hole{border-radius:19px}.game-score strong{color:var(--pink)}.reaction-pad{border-radius:24px}.game-status{min-height:39px}
.journey-card{background:linear-gradient(145deg,#fffdf8,#faeced);border:1px solid #edd5da;box-shadow:0 10px 26px #7442560b}.journey-stop{box-shadow:0 4px 14px #a155761b;border-radius:14px;background:#fffdfa;border-color:#e5bdc6}.journey-stop:active{transform:translate(-50%,-50%) scale(.975)}.calendar-panel{background:#fffdf9;border-color:#eedad9;box-shadow:0 5px 18px #803d5a0b}.calendar-grid .adventure-date{background:#ac446c;border-radius:11px}.day{border-color:var(--pink)}
.footer{max-width:750px;margin:auto;padding:58px 24px 120px}.footer h2{font-size:42px}.footer p{color:#815c70}.secret-entry{max-width:420px;margin:27px auto 8px;border:1px solid #dcb8c3;border-radius:19px;background:linear-gradient(135deg,#fff2f1,#f8dae5);box-shadow:0 9px 20px #9a55720f;padding:10px}.secret-entry button{border:0;border-radius:12px;padding:15px 17px;width:100%;font:italic 22px var(--serif);color:#a53663;text-decoration:none}.secret-entry button:after{content:'  ↗';font:16px -apple-system,sans-serif}
.mobile-dock{position:fixed;bottom:0;left:0;right:0;z-index:19;background:#fffaf7f2;backdrop-filter:blur(18px);border-top:1px solid #ebd2d5;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -5px 20px #642a4010}.mobile-dock a{min-height:53px;padding:8px 2px 5px;font-size:9px;color:#795b70}.mobile-dock a b{font-size:21px;font-weight:normal}.mobile-dock a.active{background:#f4dfe5;border-radius:12px}
.preview-bar{background:#5c2c43;padding:11px 13px}.preview-bar button{min-height:40px}
.motion-control,.owner-preview{min-height:40px}
.toast{bottom:calc(78px + env(safe-area-inset-bottom,0px));border-radius:13px;background:#56283e;box-shadow:0 8px 20px #411b2e44;padding:13px 18px;line-height:1.5;text-align:center}
dialog{background:#fffaf6;border-radius:22px;border:1px solid #ead1d9;box-shadow:0 22px 65px #371b304a;max-height:calc(100dvh - 50px);overflow:auto;padding:25px 22px}.ticket-dialog .coupon-modal-picture{border-radius:13px}
.ambient-petal{opacity:0;animation-duration:calc(var(--duration) * 1.5)}.gate-art,.hero-portrait{animation:none}.soft-reveal{animation:soft-arrive .48s var(--out) both}.tap-heart{animation-duration:.62s}.birthday-opening{animation:opening-fade 1.3s var(--out) forwards}.opening-seal{animation:seal-open 1s var(--out) both}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px);box-shadow:0 9px 18px #a33a6250}.ticket:hover{transform:translateY(-2px);box-shadow:0 13px 25px #662e4018}.secret-entry button:hover{color:#7f1e49;background:#fff9f6}.nav-ticket:hover{background:#eed0db}}
@media (max-width:750px){
 nav{padding:12px 17px;min-height:62px}.brand{font-size:21px}.links{gap:9px;font-size:9px}.links a:first-child{display:none}.nav-ticket{padding:9px 12px}
 .gate{padding:25px 24px 48px;display:flex;flex-direction:column;gap:24px;text-align:center;justify-content:flex-start}.gate-art{order:0;max-width:270px;width:100%;margin:4px auto 0}.gate-art .yumi-art{border-radius:145px 145px 15px 15px}.gate-copy{order:1;width:100%;margin:auto}.gate h1{font-size:clamp(45px,11vw,58px);line-height:1.07;margin:12px 0}.gate p{font-size:13px;line-height:1.65}.gate .eyebrow{font-size:9px}.gate .countdown{margin:18px auto 12px}.countdown strong{font-size:30px}.gate-date{font-size:9px!important}.gate .btn{width:100%;max-width:380px}
 .hero{padding:60px 18px 30px}.hero h1{font-size:clamp(56px,12vw,71px);line-height:1.05;letter-spacing:-2.8px}.hero-portrait{height:117px;width:117px}.hero-copy{font-size:13px}.pill{font-size:9px;letter-spacing:.5px;padding:11px 14px}.star{display:none}
 .letter-section{padding:0 20px 30px}.letter-frame{padding:32px 23px}.letter-frame h2{font-size:35px}.letter-frame p{font-size:15px}.wish-card{margin:6px 18px 37px;padding:28px 16px}.section{padding:56px 20px}.section-heading h2{font-size:40px}.section-heading .small{font-size:12px}.ticket-grid{gap:13px}.ticket{grid-template-columns:minmax(110px,35%) minmax(0,1fr)}.ticket .coupon-picture{min-height:186px}.ticket-top{padding:16px 13px 7px}.ticket h3{font-size:23px;margin-top:11px}.ticket p{font-size:11px}.ticket-bottom{padding:6px 13px 13px}.ticket-bottom .text-btn{min-height:36px;padding:9px 12px}.book-heading{gap:12px}.book-count{font-size:17px}.game-panel{padding:20px 14px}.game-tabs button{min-height:46px}.heart-board{padding:10px;gap:9px}.footer h2{font-size:39px}
}
@media (max-width:365px){.ticket{grid-template-columns:108px 1fr}.ticket .coupon-picture{min-height:192px}.ticket h3{font-size:21px}.ticket p{font-size:10.5px}.ticket-top{padding:13px 11px 5px}.ticket-bottom{padding:7px 11px 12px}.letter-frame{padding:30px 17px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-petal,.birthday-opening,.tap-heart{display:none!important}.soft-reveal,.ticket.is-stamped:after{animation:none!important}.btn,.ticket,.ticket .coupon-picture{transition:none!important}}