@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Crimson+Pro:wght@200;300;400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0A1930}
body{font-family:'Crimson Pro',serif;color:#0A1930;cursor:none;-webkit-font-smoothing:antialiased}
.bg{position:fixed;inset:0;z-index:0}
.bg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,32,0.32) 0%,rgba(6,18,32,0.08) 42%,rgba(6,18,32,0.58) 100%),radial-gradient(ellipse at 72% 18%,rgba(212,175,55,0.18) 0%,transparent 55%)}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px 28px}
.top span{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,251,242,0.58)}
.top .left{display:flex;align-items:center;gap:12px}
.top .line{width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,0.55),transparent)}
.btns{position:fixed;top:14px;right:14px;z-index:30;display:flex;gap:8px}
.btns button{font-family:'Cormorant Garamond',serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid rgba(212,175,55,0.26);background:rgba(255,251,242,0.88);backdrop-filter:blur(10px);cursor:none;transition:all .22s;color:#0A1930;box-shadow:0 4px 18px rgba(0,0,0,0.18)}
.btns button:hover{transform:translateY(-1px);background:rgba(255,251,242,0.98);border-color:rgba(212,175,55,0.42)}
.btns button.dark{background:rgba(10,25,47,0.84);color:#FFFBF2}
#star{position:fixed;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px rgba(212,175,55,0.9)) drop-shadow(0 0 18px rgba(255,215,0,0.55))}
.trail{position:fixed;pointer-events:none;z-index:9998;border-radius:50%;will-change:transform,opacity}
@keyframes fall{0%{transform:translate(-50%,-50%) scale(1) translateY(0) rotate(0deg);opacity:1}100%{transform:translate(-50%,-50%) scale(0) translateY(72px) rotate(180deg);opacity:0}}
#env{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:80px 16px 24px;transition:all .7s cubic-bezier(.4,0,.2,1)}
#env.hide{opacity:0;pointer-events:none;transform:scale(1.04) translateY(-10px)}
.envelope{width:440px;max-width:92vw;height:280px;background:linear-gradient(180deg,#FFFEFA 0%,#FFF8EC 100%);border:1px solid rgba(212,175,55,0.26);box-shadow:0 24px 70px rgba(0,0,0,0.52),0 0 0 1px rgba(212,175,55,0.12);position:relative;cursor:none;display:grid;place-items:center;overflow:hidden}
.envelope::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,0.08),transparent 60%)}
.flap{position:absolute;top:0;left:0;right:0;height:56%;background:linear-gradient(180deg,#FFFEF2,#F1E9D6);clip-path:polygon(0 0,100% 0,50% 100%);border-bottom:1px solid rgba(212,175,55,0.18)}
.seal{position:relative;z-index:2;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFFEF2 0%,#F3D88B 18%,#D4AF37 52%,#8C6A1A 100%);border:1px solid rgba(255,251,242,0.7);box-shadow:0 8px 22px rgba(0,0,0,0.34),inset 0 1px 2px rgba(255,255,255,0.7);display:grid;place-items:center;animation:sealFloat 3.2s ease-in-out infinite}
@keyframes sealFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:'Crimson Pro',serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(10,25,47,0.42);white-space:nowrap}
#card{position:fixed;inset:0;z-index:12;display:grid;place-items:center;padding:86px 18px 24px;opacity:0;pointer-events:none;transform:translateY(36px) scale(.98);transition:all .8s cubic-bezier(.16,1,.3,1)}
#card.show{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.card{width:1140px;max-width:96vw;max-height:88vh;background:linear-gradient(180deg,#FFFEFA 0%,#FFFBF2 100%);border:1px solid rgba(212,175,55,0.22);box-shadow:0 28px 90px rgba(0,0,0,0.5),0 0 0 1px rgba(212,175,55,0.10);display:flex;overflow:hidden;position:relative}
.card .img{width:52%;position:relative;background:#061220;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transform:scale(1.02);transition:transform 8s ease}
.card:hover .img img{transform:scale(1.08)}
.card .img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,25,47,0.0) 60%,rgba(255,251,242,0.08) 100%)}
.card .txt{width:48%;padding:32px 34px 20px;display:flex;flex-direction:column;overflow:auto;background:radial-gradient(ellipse at 30% 0%,rgba(212,175,55,0.06),transparent 55%)}
.card .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.card .eyebrow .line{width:28px;height:1px;background:linear-gradient(90deg,#D4AF37,transparent)}
.card .eyebrow span{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:rgba(10,25,47,0.46)}
.card h1{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,4vw,54px);line-height:.88;font-weight:300;color:#0A1930;letter-spacing:-.02em}
.card h1 i{font-weight:500;font-style:italic}
.card .sub{font-family:'Crimson Pro',serif;font-size:18px;font-style:italic;color:rgba(10,25,47,0.62);margin:14px 0 18px;line-height:1.3}
.card .div{width:48px;height:1px;background:linear-gradient(90deg,#D4AF37,rgba(212,175,55,0.2));margin:0 0 18px}
.card p{font-size:15px;line-height:1.78;color:rgba(10,25,47,0.76);font-weight:300;margin-bottom:12px}
.card .verse{margin:16px 0;border-left:2px solid rgba(212,175,55,0.28);padding:8px 0 8px 14px;font-size:13px;font-style:italic;color:rgba(10,25,47,0.58);line-height:1.6}
.card .inst{margin-top:auto;padding-top:16px;border-top:1px solid rgba(212,175,55,0.14)}
.card .inst .name{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#0A1930;font-weight:600}
.card .inst .loc{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,25,47,0.44);margin-top:4px}
.globcity{margin-top:12px;text-align:center}
.globcity a{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(10,25,47,0.5);text-decoration:none;border-bottom:1px solid rgba(212,175,55,0.32);padding-bottom:2px;cursor:none;transition:all .22s}
.globcity a:hover{color:#0A1930;border-bottom-color:#D4AF37}
.actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.actions button{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid rgba(212,175,55,0.26);background:rgba(255,255,255,0.9);cursor:none;transition:all .2s}
.actions button.primary{background:#0A1930;color:#FFFBF2;border-color:#0A1930}
.actions button:hover{transform:translateY(-1px)}
.footer{position:fixed;bottom:0;left:0;right:0;z-index:15;display:flex;justify-content:center;align-items:center;gap:22px;padding-bottom:16px;pointer-events:none;opacity:.38}
.footer .line{width:72px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,0.5),transparent)}
.footer .star{font-family:'Cormorant Garamond',serif;color:#D4AF37}
@media(max-width:900px){.card{flex-direction:column;max-height:92vh}.card .img{width:100%;height:40vh}.card .txt{width:100%;padding:22px}}
@media print{.top,.btns,#star,.trail,.footer{display:none!important}#env{display:none!important}#card{position:static;opacity:1!important;transform:none!important;padding:0}.card{box-shadow:none;border:none;max-height:none}}

#musicBtn{position:fixed;bottom:14px;right:14px;z-index:40;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid rgba(212,175,55,0.32);background:rgba(255,251,242,0.88);backdrop-filter:blur(10px);cursor:none;transition:all .2s}
#musicBtn:hover{background:rgba(255,251,242,0.98);transform:translateY(-1px)}