:root { --black:#0b0a0d; --ink:#161418; --paper:#f5f1ef; --muted:#aaa2a5; --pink:#f5b8c8; --line:rgba(255,255,255,.14); --serif:"Noto Serif SC", Georgia, serif; --display:"Playfair Display", var(--serif); --mono:"DM Mono", monospace; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--black);color:var(--paper);font-family:var(--serif);overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}button{font:inherit;color:inherit}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,72px);position:fixed;top:0;left:0;right:0;z-index:10;transition:.4s ease}.nav.scrolled{height:62px;background:rgba(11,10,13,.63);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{font:500 22px var(--display);color:var(--paper);text-decoration:none;letter-spacing:.08em}.brand span{font-size:15px;color:var(--pink);margin:0 3px}.nav-links{display:flex;gap:30px}.nav-links a{font:11px var(--mono);letter-spacing:.08em;color:var(--paper);text-decoration:none;opacity:.75;transition:.2s}.nav-links a:hover{opacity:1;color:var(--pink)}.sound-toggle{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:8px 12px;cursor:pointer;font:10px var(--mono);letter-spacing:.08em;transition:.25s}.sound-toggle:hover,.sound-toggle.playing{border-color:var(--pink);color:var(--pink)}.sound-icon{font-size:14px;margin-right:5px}.hero{height:100svh;min-height:620px;position:relative;display:grid;place-items:center;overflow:hidden}.hero-media{position:absolute;inset:-4%;background:url('assets/hero.jpg') center/cover no-repeat;filter:grayscale(45%) contrast(1.05);transform:scale(1.06)}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,3,5,.3),rgba(5,4,7,.36) 55%,var(--black))}.stars{position:absolute;inset:0;background-image:radial-gradient(circle at 8% 15%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 24% 36%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 52% 16%,#f5b8c8 0 1px,transparent 1.7px),radial-gradient(circle at 77% 26%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 91% 62%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 14% 72%,#f5b8c8 0 1px,transparent 1.7px);opacity:.65}.hero-content{text-align:center;position:relative;z-index:1}.eyebrow,.section-kicker{text-transform:uppercase;font:10px var(--mono);letter-spacing:.2em;color:var(--pink);margin:0 0 20px}.hero h1{font:400 clamp(58px,11vw,150px) var(--display);letter-spacing:-.08em;line-height:.8;margin:0;text-shadow:0 8px 40px rgba(0,0,0,.25)}.heart{display:inline-block;color:var(--pink);font-size:.45em;vertical-align:middle;margin:0 .2em;animation:pulse 2.2s infinite}.hero-subtitle{font:400 clamp(25px,3vw,43px) var(--display);font-style:italic;margin:22px 0 36px;letter-spacing:.04em}.enter-button{border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.15);border-radius:100px;padding:14px 20px 14px 25px;cursor:pointer;display:inline-flex;align-items:center;gap:19px;font:10px var(--mono);letter-spacing:.12em;transition:.35s}.enter-button i{font-size:18px;font-style:normal;line-height:0}.enter-button:hover{background:var(--paper);color:var(--black);box-shadow:0 0 30px rgba(245,184,200,.4)}.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:1;font:9px var(--mono);letter-spacing:.13em;opacity:.7;white-space:nowrap}.scroll-hint span{height:30px;width:1px;background:var(--paper);position:absolute;left:50%;top:25px;animation:scrollLine 2s infinite}.section-pad{padding:clamp(90px,14vw,180px) clamp(22px,8vw,130px)}.counter-section{text-align:center;background:radial-gradient(circle at 50% 10%,#261c25 0,transparent 35%)}.counter-wrap{max-width:780px;margin:auto}.counter-lead{font-size:clamp(23px,3vw,38px);margin:0 0 22px}.counter{display:flex;justify-content:center;align-items:baseline;gap:clamp(10px,2vw,28px)}.counter div{display:flex;align-items:baseline;gap:8px}.counter strong{font:400 clamp(42px,8vw,104px) var(--display);letter-spacing:-.05em}.counter span{font-size:14px;color:var(--pink)}.counter em{font-style:normal;color:var(--pink);opacity:.6}.counter-note{color:var(--muted);font-size:14px;margin:32px 0 0}.heading{max-width:860px;margin:0 auto 90px}.heading h2{font:400 clamp(38px,6vw,76px)/1.25 var(--serif);letter-spacing:-.07em;margin:0}.heading h2 em,.ending h2 em{font-family:var(--display);font-weight:400;color:var(--pink)}.timeline{position:relative;max-width:1080px;margin:auto}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--line) 3%,var(--line) 97%,transparent)}.timeline-item{display:grid;grid-template-columns:1fr 1fr;gap:10%;position:relative;min-height:330px;align-items:center}.timeline-item.reverse .timeline-copy{grid-column:2}.timeline-item.reverse figure{grid-column:1;grid-row:1}.timeline-dot{position:absolute;width:11px;height:11px;border-radius:50%;left:calc(50% - 5px);background:var(--pink);box-shadow:0 0 0 6px #181219,0 0 22px var(--pink)}.timeline-copy{padding:20px 8% 20px 0}.reverse .timeline-copy{padding:20px 0 20px 8%}.date{font:10px var(--mono);color:var(--pink);letter-spacing:.15em}.timeline h3{font:500 29px var(--serif);margin:12px 0 15px}.timeline-copy>p:last-child{color:#c8c0c2;font-size:14px;line-height:2}.timeline figure{height:270px;margin:0;overflow:hidden}.timeline img,.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.timeline figure:hover img,.gallery-item:hover img{transform:scale(1.06)}.gallery{max-width:1150px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:12px}.gallery-item{padding:0;border:0;overflow:hidden;background:#241c20;cursor:zoom-in}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}.map-section{background:#100e12}.map-card{max-width:1120px;height:500px;margin:auto;position:relative;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at center,#25202b, #121015 65%)}.map-card:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,184,200,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(245,184,200,.06) 1px,transparent 1px);background-size:50px 50px}.map-continent{position:absolute;background:#7f6875;opacity:.34;filter:blur(.2px);border-radius:42% 58% 55% 45% / 42% 43% 57% 58%}.america{height:180px;width:110px;left:20%;top:27%;transform:rotate(-23deg)}.europe{height:80px;width:105px;left:47%;top:25%;transform:rotate(13deg)}.asia{height:165px;width:260px;left:54%;top:34%;transform:rotate(-7deg)}.city{position:absolute;background:transparent;border:0;cursor:pointer;color:var(--paper);padding:8px}.city span{display:block;width:10px;height:10px;background:var(--pink);border-radius:50%;box-shadow:0 0 0 5px rgba(245,184,200,.14),0 0 22px var(--pink);margin:auto}.city b{display:block;font:10px var(--mono);letter-spacing:.1em;margin-top:11px;opacity:0;transform:translateY(4px);transition:.25s}.city:hover b{opacity:1;transform:none}.city:focus:after,.city:hover:after{content:attr(data-memory);position:absolute;width:160px;left:50%;bottom:100%;transform:translateX(-50%);padding:9px;background:#f5f1ef;color:#161418;font-size:11px;font-family:var(--serif);margin-bottom:7px}.city-shanghai{left:71%;top:48%}.city-kyoto{left:76%;top:46%}.city-paris{left:51%;top:35%}.map-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}.letter-section{background:linear-gradient(160deg,#181419,#0b0a0d)}.letter{position:relative;max-width:680px;margin:auto;padding:clamp(40px,8vw,88px);background:var(--paper);color:#282026;box-shadow:20px 28px 80px rgba(0,0,0,.4);transform:rotate(-1deg)}.letter:after{content:"";position:absolute;inset:8px;border:1px solid rgba(83,55,66,.13);pointer-events:none}.letter-stamp{position:absolute;right:42px;top:36px;width:42px;height:42px;border:1px solid #b7808e;border-radius:50%;display:grid;place-items:center;color:#b7808e;font-size:21px}.letter-date{font:10px var(--mono);letter-spacing:.13em;color:#9d6877}.letter h2{font:400 clamp(29px,5vw,47px) var(--serif);margin:22px 0}.letter-rule{height:1px;background:#d6c6ca;margin:20px 0 27px}.letter>p:not(.letter-date):not(.signature){font-size:15px;line-height:2;color:#57484d}.signature{margin:30px 0 0;text-align:right;font-size:13px;line-height:1.7}.signature em{font:26px var(--display)}.ending{position:relative;min-height:72svh;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#2a1a28,var(--black) 65%)}.ending-content{position:relative;z-index:1}.ending h2{font:400 clamp(44px,7vw,90px)/1.05 var(--display);margin:0;letter-spacing:-.06em}.ending-content>p:last-child{font:italic 20px var(--display);color:var(--muted);margin-top:29px}.to-top{position:fixed;right:24px;bottom:24px;z-index:9;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(20,17,22,.7);backdrop-filter:blur(8px);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.3s}.to-top.visible{opacity:1;transform:none;pointer-events:auto}.lightbox{position:fixed;inset:0;z-index:30;background:rgba(4,3,5,.93);display:grid;place-items:center;padding:45px;opacity:0;visibility:hidden;transition:.3s}.lightbox.open{opacity:1;visibility:visible}.lightbox img{max-width:min(100%,1100px);max-height:90vh;object-fit:contain;box-shadow:0 20px 80px #000}.lightbox-close{position:absolute;top:20px;right:28px;border:0;background:transparent;font-size:38px;cursor:pointer}.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}.intro{opacity:0;animation:intro .9s forwards}.intro-delay-1{animation-delay:.22s}.intro-delay-2{animation-delay:.4s}.intro-delay-3{animation-delay:.6s}@keyframes intro{to{opacity:1;transform:none}}@keyframes pulse{50%{filter:drop-shadow(0 0 14px var(--pink));transform:scale(1.12)}}@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:700px){.nav{height:64px}.nav-links{display:none}.sound-text{display:none}.sound-toggle{padding:8px 10px}.sound-icon{margin:0}.hero{min-height:590px}.counter{gap:8px}.counter div{gap:4px}.counter span{font-size:11px}.counter em{font-size:11px}.heading{margin-bottom:55px}.timeline:before{left:5px}.timeline-item,.timeline-item.reverse{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 0 54px 27px;min-height:0}.timeline-item.reverse .timeline-copy{order:0}.timeline-item.reverse figure{order:1}.timeline-dot{left:0;top:37px}.timeline-copy,.reverse .timeline-copy{padding:0}.timeline h3{font-size:25px}.timeline figure{height:220px}.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:7px}.gallery-item.wide{grid-column:span 2}.map-card{height:350px}.letter{transform:none}.city b{opacity:1;transform:none;font-size:8px}.city:after{display:none}.map-continent{transform:scale(.74)!important}.america{left:9%;top:25%}.europe{left:39%;top:28%}.asia{left:48%;top:34%}.city-shanghai{left:67%;top:51%}.city-kyoto{left:76%;top:47%}.city-paris{left:48%;top:37%}.section-pad{padding-top:100px;padding-bottom:100px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}