:root{
  --paper:#f6ecd2; --paper2:#efe0bb; --ink:#1d2547; --navy:#1f2a52; --tie:#7b1e2b;
  --straw:#e3b55a; --ginger:#ef8a2e; --sun:#f4a259; --bean:#f08c8c; --cream:#fff8e8;
  --serif:"Fraunces","Ma Shan Zheng",Georgia,serif;
  --hand:"Caveat","Ma Shan Zheng",cursive;
  --mono:"IBM Plex Mono","Ma Shan Zheng",ui-monospace,monospace;
  --cjk:"Ma Shan Zheng",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-width:1180px; background:var(--paper); color:var(--ink); font-family:var(--serif);
  overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:italic;color:var(--tie)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:800;font-size:17px;
  text-decoration:none;border:2.5px solid var(--ink);border-radius:999px;padding:11px 22px;cursor:pointer;
  box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-buy{background:var(--ginger);color:var(--cream)}
.btn-buy:hover{background:#f59a3f}
.btn-x{background:var(--cream);color:var(--ink)}
.btn-copy{background:var(--straw);color:var(--ink);font-size:15px;padding:8px 18px}
.btn.big{font-size:21px;padding:15px 30px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px 4.5%;background:rgba(246,236,210,.92);backdrop-filter:blur(8px);
  border-bottom:2.5px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;font-size:24px;letter-spacing:-.01em}
.brand img{width:44px;height:44px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(-14deg) scale(1.08)}
.links{display:flex;align-items:center;gap:30px;font-size:17px;font-weight:600}
.links a:not(.btn){text-decoration:none;position:relative}
.links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2.5px;background:var(--ginger);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.links a:not(.btn):hover::after{transform:scaleX(1)}
.links .btn{padding:9px 20px;font-size:16px}

/* ---------- hero ---------- */
.banner{position:relative;width:100%;aspect-ratio:2172/724;overflow:hidden;border-bottom:2.5px solid var(--ink)}
.banner>img{width:100%;height:100%;object-fit:cover;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.0)}to{transform:scale(1.035) translateX(-.6%)}}
.hero-copy{position:absolute;left:4.5%;top:50%;transform:translateY(-50%);width:36%}
.kicker{font-family:var(--hand);font-weight:700;font-size:2.5vw;color:var(--tie);transform:rotate(-3deg);margin-left:.4vw;
  animation:rise .9s .1s both}
.hero h1{font-weight:900;line-height:.86;letter-spacing:-.035em;color:var(--ink);font-size:8.6vw;margin:.4vw 0 1.2vw;
  text-shadow:0 0 .6vw rgba(253,232,193,.9),0 .4vw 0 rgba(253,232,193,.75)}
.hero h1 span{display:block;animation:rise .9s both}
.hero h1 span:nth-child(1){animation-delay:.2s}
.hero h1 span:nth-child(2){animation-delay:.35s;font-style:italic;color:var(--ginger);padding-left:5vw;-webkit-text-stroke:.12vw var(--ink)}
.ticker{display:inline-block;background:var(--ink);color:var(--cream);font-family:var(--mono);font-weight:600;font-size:1.25vw;
  padding:.5vw 1.1vw;border-radius:999px;transform:rotate(-2deg);animation:rise .9s .5s both}
.ticker i{font-style:normal;color:var(--straw)}
@keyframes rise{from{opacity:0;transform:translateY(30px) rotate(0)}}

.bubble{position:absolute;left:79%;top:9%;z-index:2}
.bubble span{
  display:block;background:var(--cream);border:.18vw solid var(--ink);border-radius:2vw;padding:.7vw 1.5vw;
  font-family:var(--cjk);font-size:2.6vw;line-height:1;color:var(--tie);box-shadow:.35vw .35vw 0 var(--ink);
  transform-origin:0% 100%;animation:pop 3.2s cubic-bezier(.3,1.6,.5,1) infinite;
}
.bubble span.latin{font-family:var(--hand);font-weight:700;font-size:2.6vw}
.bubble::after{content:"";position:absolute;left:1.2vw;bottom:-1.25vw;width:1.6vw;height:1.6vw;background:var(--cream);
  border-right:.18vw solid var(--ink);border-bottom:.18vw solid var(--ink);transform:skewX(-35deg) rotate(30deg);z-index:-1;
  animation:popTail 3.2s infinite}
@keyframes pop{0%{transform:scale(0) rotate(-12deg)}12%{transform:scale(1) rotate(-4deg)}80%{transform:scale(1) rotate(-4deg)}92%,100%{transform:scale(0) rotate(4deg)}}
@keyframes popTail{0%,4%{opacity:0}12%,80%{opacity:1}88%,100%{opacity:0}}

.ca-bar{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:22px 4.5%;background:var(--navy);color:var(--cream)}
.ca-wrap{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.ca-label{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.14em;background:var(--straw);color:var(--ink);padding:5px 10px;border-radius:6px}
.ca{font-family:var(--mono);font-weight:500;font-size:19px;word-break:break-all;letter-spacing:.02em;min-width:0}
.ca-actions{display:flex;gap:14px;flex-shrink:0}
.ca-bar .btn{border-color:var(--cream);box-shadow:0 4px 0 #0b1030}
.ca-bar .btn-copy{border-color:var(--ink)}
.ca-bar .btn:hover{box-shadow:0 6px 0 #0b1030}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;background:var(--tie);border-bottom:2.5px solid var(--ink);padding:16px 0;
  background-image:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.06) 22px 24px)}
.track{display:flex;gap:34px;width:max-content;animation:scroll 34s linear infinite;align-items:center}
.track span{font-style:italic;font-weight:800;font-size:30px;color:var(--cream);white-space:nowrap}
.track b{font-family:var(--cjk);font-weight:400;font-size:32px;color:var(--straw)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- intro ---------- */
.intro{text-align:center;padding:120px 6% 100px}
.hand{font-family:var(--hand);font-weight:700;font-size:34px;color:var(--tie)}
.intro .hand{transform:rotate(-2deg);margin-bottom:12px}
.intro h2{font-weight:900;font-size:78px;line-height:.98;letter-spacing:-.03em}
.intro .lede{font-size:23px;font-weight:500;max-width:640px;margin:26px auto 0;opacity:.8}

/* ---------- postcards ---------- */
.card{position:relative;border-top:14px solid var(--paper);overflow:hidden}
.card .photo{aspect-ratio:3/2;overflow:hidden;background:var(--paper2)}
.card .photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.card.in .photo img{transform:scale(1)}
.back{
  position:absolute;width:470px;padding:34px 34px 28px;background:var(--cream);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:6px;box-shadow:10px 12px 0 rgba(29,37,71,.85);
  background-image:repeating-linear-gradient(transparent 0 37px,rgba(123,30,43,.14) 37px 38.5px);background-position:0 86px;
  opacity:0;transition:transform 1s cubic-bezier(.3,1.4,.5,1) .35s,opacity .5s .35s;
}
.c-tr .back{top:7%;right:5%;transform:translate(60px,-30px) rotate(9deg)}
.c-br .back{bottom:8%;right:5%;transform:translate(60px,40px) rotate(-9deg)}
.c-tr.in .back{opacity:1;transform:rotate(2.5deg)}
.c-br.in .back{opacity:1;transform:rotate(-2.5deg)}
.back h3{font-weight:900;font-size:40px;line-height:1;letter-spacing:-.025em;max-width:228px;margin:4px 0 14px}
.back .hand{font-size:29px;line-height:38.5px;color:var(--navy);font-weight:500}
.back .sign{font-family:var(--hand);font-weight:700;font-size:34px;text-align:right;color:var(--tie);margin-top:4px}
.stamp{
  position:absolute;top:-22px;right:22px;width:108px;padding:9px 9px 6px;background:var(--cream);
  border:2px dashed rgba(29,37,71,.45);outline:7px solid var(--cream);box-shadow:0 0 0 9px var(--ink);
  transform:rotate(6deg) scale(1.8);opacity:0;transition:transform .45s cubic-bezier(.3,1.7,.5,1) 1.05s,opacity .2s 1.05s;
}
.card.in .stamp{transform:rotate(6deg) scale(1);opacity:1}
.stamp img{width:100%;height:auto;border-radius:50%;background:var(--paper)}
.stamp small{display:block;text-align:center;font-family:var(--mono);font-size:11px;font-weight:600;margin-top:3px}
.postmark{
  position:absolute;top:-26px;right:122px;width:86px;height:86px;background:rgba(255,248,232,.55);border:2.5px solid rgba(123,30,43,.6);border-radius:50%;
  display:grid;place-items:center;text-align:center;font-family:var(--mono);font-weight:600;font-size:10px;line-height:1.25;
  letter-spacing:.08em;color:rgba(123,30,43,.75);padding:12px;transform:rotate(-16deg);
  opacity:0;transition:opacity .2s 1.35s;
}
.card.in .postmark{opacity:1}
.optional[hidden]{display:none}

/* ---------- hello ---------- */
.hello{display:grid;grid-template-columns:600px 1fr;gap:70px;align-items:center;padding:130px 6% 120px;border-top:14px solid var(--paper)}
.coin{position:relative;width:600px;height:600px;display:grid;place-items:center}
.coin img{width:460px;height:460px;filter:drop-shadow(14px 16px 0 var(--ink));animation:tilt 4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-8px)}}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 30s linear infinite}
.ring text{font-family:var(--serif);font-weight:900;font-size:13.4px;letter-spacing:.14em;fill:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.cjk{font-family:var(--cjk);font-size:46px;color:var(--ginger);line-height:1}
.hello-copy h2{font-weight:800;font-size:52px;line-height:1.06;letter-spacing:-.025em;margin:18px 0 38px}
.id{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--cream);box-shadow:8px 9px 0 var(--ink)}
.id div{padding:18px 22px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.id div:nth-child(2n){border-right:0}
.id div:nth-last-child(-n+2){border-bottom:0}
.id dt{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tie)}
.id dd{font-size:24px;font-weight:800;margin-top:4px}

/* ---------- finale ---------- */
.finale{position:relative;display:grid;grid-template-columns:560px 1fr;gap:60px;align-items:end;padding:110px 6% 0;background:var(--straw);
  border-top:2.5px solid var(--ink);overflow:hidden;
  background-image:repeating-linear-gradient(0deg,transparent 0 26px,rgba(140,90,20,.18) 26px 28px),repeating-linear-gradient(90deg,transparent 0 46px,rgba(140,90,20,.14) 46px 48px)}
.finale::before{content:"";position:absolute;right:-120px;top:-160px;width:560px;height:560px;border-radius:50%;background:var(--sun);opacity:.85}
.wave-fig{position:relative;align-self:end}
.wave-fig img{width:520px;height:auto;margin-bottom:-40px;filter:drop-shadow(12px 14px 0 var(--ink));transform-origin:50% 100%;animation:tilt 3.4s ease-in-out infinite}
.wave-fig.cut img{width:560px;margin-bottom:0;filter:none}
.finale-copy{position:relative;padding-bottom:120px}
.finale-copy .hand{font-size:40px;transform:rotate(-3deg)}
.finale h2{font-weight:900;font-size:150px;line-height:.9;letter-spacing:-.045em;margin:6px 0 40px}
.finale h2 em{color:var(--cream);-webkit-text-stroke:3px var(--ink);text-shadow:8px 8px 0 var(--ink)}
.ca-wrap.light{background:var(--cream);border:2.5px solid var(--ink);border-radius:14px;padding:16px 18px;box-shadow:6px 7px 0 var(--ink);margin-bottom:28px}
.finale .ca-actions{gap:18px}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 6%;background:var(--ink);color:var(--paper);font-size:15px}
.foot b{color:var(--straw)}
.foot .cjk{font-size:34px}

/* ---------- toast + reveal ---------- */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,40px);background:var(--ink);color:var(--cream);font-weight:800;
  padding:13px 26px;border-radius:999px;border:2.5px solid var(--straw);opacity:0;pointer-events:none;transition:.3s cubic-bezier(.3,1.5,.5,1);z-index:99}
.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.back,.stamp,.postmark{opacity:1!important}
}