@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-500.ttf') format('truetype')}@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-600.ttf') format('truetype')}@font-face{font-family:'Dancing Script';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/dancing-script-400.ttf') format('truetype')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.ttf') format('truetype')}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.ttf') format('truetype')}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.ttf') format('truetype')}
:root{--navy:#102d47;--ink:#14202a;--cream:#faf8f3;--blossom:#e7a6aa;--photo:url('assets/japan-fuji-pagoda-v2.png');--city:url('assets/japan-tokyo-v2.png');--temple:url('assets/japan-kyoto-v2.png');--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',Arial,sans-serif;--script:'Dancing Script',cursive}
*{box-sizing:border-box}body{margin:0;background:#dfe8ec;color:#fff;font-family:'Inter',Arial,sans-serif;min-height:100svh}button{font:inherit}main{min-height:100svh}.screen{width:min(100%,430px);margin:0 auto;min-height:100svh;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;padding:32px 32px calc(82px + env(safe-area-inset-bottom));background:var(--navy);box-shadow:0 0 50px #061b2a33}.screen :is(h1,h2,h3,p){max-width:100%;overflow-wrap:break-word}.centre,.content,.itin-content,.share-centre{min-width:0}
.photo{color:rgba(255,255,255,.75)}.photo:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(180deg,rgba(8,30,48,.12),rgba(10,25,40,.18) 42%,rgba(7,22,36,.88)),var(--photo);background-size:cover;background-position:center}.photo:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(231,166,170,.11),transparent 45%)}.kyoto-bg:before{background-image:linear-gradient(180deg,rgba(8,23,37,.28),rgba(8,23,37,.42) 48%,rgba(8,23,37,.88)),var(--temple)}.tokyo-bg:before{background-image:linear-gradient(180deg,rgba(5,18,35,.24),rgba(5,18,35,.36) 50%,rgba(5,18,35,.9)),var(--city)}.share-bg:before{background-image:linear-gradient(180deg,rgba(5,18,35,.58),rgba(5,18,35,.72)),var(--temple)}
.paper{background:var(--cream);color:var(--ink)}.paper:after{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;z-index:-1;background:var(--photo) center 66%/cover;clip-path:polygon(0 16%,10% 8%,22% 17%,35% 6%,49% 15%,63% 4%,77% 14%,90% 5%,100% 12%,100% 100%,0 100%)}.overview:after{height:calc(24vh + 80px);background-image:var(--city);background-position:center 32%}.itin:after{display:none}.centre{margin:auto;text-align:center;width:min(100%,620px)}
.brand-lockup,.clue-heading,.section-kicker,.count-title{font-family:'Cormorant Garamond',Georgia,serif;text-transform:uppercase;letter-spacing:.1em}.gift{height:46px;color:rgba(255,255,255,.5)}.gift-icon{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.brand-lockup{font-size:1.35rem;margin:8px}.brand-line{font-family:'Inter',Arial,sans-serif;font-size:.68rem;letter-spacing:.1em;line-height:1.5;margin:0 auto 28px}.script{font-family:var(--script);font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased}.welcome-title{font-size:clamp(3.35rem,15vw,4.8rem);line-height:.84;text-align:left;margin:22px 0 34px;text-shadow:0 1px 10px #0006;font-weight:400;letter-spacing:-.025em}.occasion{display:block;font-size:1em;line-height:.84;letter-spacing:0}.recipient{display:block;font-size:1em;line-height:.84}.welcome-note{font-family:var(--sans);font-size:1.05rem;font-weight:400;text-align:center;line-height:1.45;margin-bottom:28px}
.action{border:0;border-radius:5px;background:rgba(249,247,242,.96);color:var(--ink);padding:15px 26px;min-height:50px;min-width:190px;font-size:.73rem;font-weight:600;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;box-shadow:0 12px 30px #0004;cursor:pointer}.action:focus-visible,.navbtn:focus-visible{outline:3px solid var(--blossom);outline-offset:3px}.closing{margin:42px 0 0;text-align:center;font-size:.61rem;line-height:1.4;letter-spacing:.15em;text-transform:uppercase}
.reveal-lead{position:absolute;top:clamp(132px,18svh,170px);left:32px;right:32px;text-align:center}.clue-heading{font-size:1.55rem;margin:0 0 8px}.clue-sub{font-family:var(--sans);margin:0}.torn{background:#f6f1e9;color:var(--ink);padding:38px 28px;margin:24px auto 34px;max-width:440px;box-shadow:0 12px 25px #0004;clip-path:polygon(0 3%,8% 1%,16% 3%,25% 0,36% 2%,48% 0,59% 2%,70% 0,81% 3%,91% 1%,100% 4%,98% 17%,100% 31%,98% 46%,100% 61%,98% 76%,100% 91%,97% 100%,84% 98%,69% 100%,54% 98%,39% 100%,24% 97%,10% 100%,1% 97%,2% 82%,0 66%,2% 50%,0 34%,2% 18%)}.suspense-centre .torn{position:absolute;top:calc(25svh + 50px);left:32px;right:32px;margin:0 auto}.clue-action{position:absolute;top:calc(50% + 120px);left:50%;transform:translateX(-50%)}.blossom-mark{font-size:2rem;margin-bottom:14px;color:#b66c76}.torn p{font-family:var(--sans);font-size:1.3rem;line-height:1.35;margin:0}
.reveal-screen:before{background-image:linear-gradient(180deg,#fff1,#061b2a0d 55%,#061b2abb),var(--photo)}.reveal-kicker{font-family:var(--serif);font-size:1.7rem;letter-spacing:.08em;text-transform:uppercase;margin:0}.reveal-sub,.keywords{font-size:.67rem;letter-spacing:.2em;text-transform:uppercase}.reveal-sub{margin:8px 0 0}.rule{width:42px;border-top:1px solid;margin:18px auto}.destination{font-family:var(--serif);font-size:clamp(4rem,20vw,8rem);line-height:.8;letter-spacing:-.04em;margin:18px 0 8px;text-transform:uppercase}.flag{font-size:2.1rem}.keywords{margin-top:22px}.reveal-script{position:absolute;bottom:132px;left:32px;right:32px;text-align:center;font-family:var(--serif);font-size:2rem}
.content{width:100%;max-width:700px;margin:32px auto auto}.section-kicker{text-align:center;font-size:1.55rem;line-height:1.1}.info-list{display:grid;gap:20px;margin-top:30px}.info{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start}.overview .info{align-items:center}.overview .icon{width:38px;min-height:27px;display:flex;align-items:center;justify-content:center}.icon{font-size:1.5rem;line-height:1}.hotel-icon svg,.rail-icon svg{display:block;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.label{font-weight:600;font-size:.9rem;line-height:1.3}.value{font-size:.78rem;line-height:1.5;color:#58666d;margin-top:3px}
.itin-content{width:100%;margin:10px auto 0}.section-sub{text-align:center;font-size:.64rem;line-height:1.4;letter-spacing:.18em;text-transform:uppercase}.itinerary{display:grid;gap:10px;margin-top:16px}.day{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;min-height:48px;align-items:center}.thumb{width:58px;aspect-ratio:29/24;border-radius:8px;background:center/cover}.thumb.tokyo{background-image:var(--city)}.thumb.tokyo-alt{background-image:url('assets/japan-tokyo.png')}.thumb.osaka{background-image:url('assets/japan-osaka-v1.png')}.thumb.fuji{background-image:var(--photo)}.thumb.kyoto{background-image:var(--temple)}.thumb.hiroshima{background-image:url('assets/japan-hiroshima-v1.png')}.day-copy{min-width:0}.day-copy strong{display:block;font-size:.57rem;line-height:1.3;letter-spacing:.07em;text-transform:uppercase}.day-copy h3{font-family:var(--serif);font-size:.95rem;line-height:1.1;margin:1px 0}.day-copy p{font-size:.66rem;line-height:1.35;color:#58666d;margin:0}.itin-note{text-align:center;font-size:1.35rem;line-height:.9;margin-top:14px}
.count-title{font-size:1.8rem;margin:0}.count-sub{font-size:.66rem;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;margin:12px 0 28px}.digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.digit{min-width:0;padding:17px 4px;border:1px solid #fff6;border-radius:8px;background:#fff1;backdrop-filter:blur(7px);text-align:center}.digit strong{font-family:var(--serif);font-size:2.1rem;line-height:1;display:block;font-variant-numeric:tabular-nums}.digit span{display:block;margin-top:5px;font-size:.55rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase}.count-script{font-family:var(--serif);font-size:1.8rem;line-height:1.1;margin-top:24px}.count-heart{display:block;margin-top:12px}
.letter{background:var(--cream);color:var(--ink)}.letter:after{content:"";position:absolute;bottom:0;left:0;right:0;height:27vh;background:var(--temple) center 44%/cover;clip-path:polygon(0 25%,14% 18%,29% 23%,45% 12%,61% 22%,74% 15%,88% 21%,100% 10%,100% 100%,0 100%);z-index:-1}.letter-card{width:100%;max-width:366px;margin:auto auto 24vh}.envelope{text-align:center;font-size:1.5rem;line-height:1}.message{font-size:1.3rem;line-height:1.18;margin:24px 0}.signature{font-size:1.55rem;line-height:1}
.share-centre{margin:auto;text-align:center;width:min(100%,520px)}.heart{font-size:1.8rem}.micro{font-size:.67rem;line-height:1.4;letter-spacing:.22em;text-transform:uppercase}.share-copy{font-size:.72rem;line-height:1.5}.qr{width:168px;aspect-ratio:1;margin:18px auto;background:#fff;padding:12px;border-radius:8px;box-shadow:0 14px 34px #0006}.qr img{display:block;width:100%;height:100%;image-rendering:pixelated}.share-brand{font-family:var(--serif);font-size:1.35rem;line-height:1.1;letter-spacing:.16em;text-transform:uppercase}.share-tag{font-size:.65rem;line-height:1.4}.share-script{font-family:var(--serif);font-size:1.7rem;line-height:1.1}.share-row{display:flex;gap:10px;justify-content:center}.share-row .action{flex:1 1 0;min-width:0;max-width:150px}.secondary{color:#fff;background:transparent;border:1px solid #fff9}
.navbtn{position:fixed;right:22px;bottom:24px;width:48px;height:48px;border:1px solid #fff8;background:#051926ad;backdrop-filter:blur(8px);color:#fff;border-radius:50%;z-index:20;font-size:1.2rem}.paper .navbtn,.letter .navbtn{border-color:#14202a55;background:#f8f6f1dd;color:var(--ink)}.dots{position:fixed;left:22px;bottom:43px;display:flex;gap:6px;z-index:22}.dots button{width:6px;height:6px;border:0;border-radius:50%;background:#fff;opacity:.35;padding:0}.dots button.active{width:20px;border-radius:8px;opacity:1}.screen-enter{animation:enter .5s ease-out}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@media(max-width:374px){.screen{padding-left:24px;padding-right:24px}.navbtn{right:18px}.dots{left:18px}.digit strong{font-size:1.9rem}}@media(min-width:700px){.screen{padding:36px 34px calc(86px + env(safe-area-inset-bottom))}.navbtn{right:calc(50% - 193px)}.dots{left:calc(50% - 193px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}