:root{
  --ink:#000000;
  --ink-2:#0a0a0a;
  --paper:#fff9e6;
  --blood:#F0B90B;
  --blood-deep:#b8890a;
  --gold:#F0B90B;
  --gold-soft:#fbd65a;
  --ash:#1a1400;
  --cloud:rgba(240,185,11,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;color:var(--gold);overflow-x:hidden}
body{
  font-family:'Noto Serif SC',serif;
  font-weight:300;
  line-height:1.9;
  background:#000;
  min-height:100vh;
  position:relative;
}


.scroll{position:relative;z-index:3;max-width:860px;margin:0 auto;padding:0 28px}

/* HERO */
.hero{
  min-height:85vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;text-align:center;padding:60px 0 20px;
}
.vertical-title{
  position:absolute;top:48px;left:50%;transform:translateX(-50%);
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:'Ma Shan Zheng',serif;
  font-size:clamp(80px,14vw,180px);
  color:var(--gold);
  opacity:.06;
  letter-spacing:-.15em;
  line-height:.85;
  user-select:none;
  pointer-events:none;
}
.seal{
  position:absolute;top:36%;right:4vw;
  width:88px;height:88px;
  background:var(--gold);
  color:#000;
  font-family:'Ma Shan Zheng',serif;
  font-size:56px;
  font-weight:900;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(6deg);
}

.brush{
  font-family:'Ma Shan Zheng',serif;
  font-size:clamp(120px,22vw,260px);
  color:var(--gold);
  line-height:1;
  letter-spacing:.08em;
  margin-bottom:.3em;
}
.pinyin{
  font-family:'ZCOOL XiaoWei',serif;
  letter-spacing:.6em;
  font-size:14px;
  color:var(--gold);
  text-transform:uppercase;
  opacity:.8;
}

.hero-divider{
  margin-top:48px;
  display:flex;align-items:center;gap:20px;
}
.hero-divider span{
  display:block;width:80px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.hero-divider em{
  font-family:'Ma Shan Zheng',serif;
  font-style:normal;
  font-size:26px;
  color:var(--gold);
  text-shadow:0 0 12px rgba(212,168,72,.6);
}

/* MEMORIAL POLAROID */
.memorial{
  padding:20px 0 30px;
  margin-top:-18vh;
  display:flex;justify-content:center;align-items:center;
  perspective:1200px;
  position:relative;
}
.polaroid{
  background:#f0e4cc;
  padding:18px 18px 64px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  transform:rotate(-2deg);
  max-width:min(440px,86vw);
  position:relative;
}
@keyframes polaroidIn{
  from{opacity:0;transform:rotate(-2.5deg) translateY(30px) scale(.94)}
  to{opacity:1;transform:rotate(-2.5deg) translateY(0) scale(1)}
}
@keyframes polaroidSway{
  0%,100%{transform:rotate(-2.5deg)}
  50%{transform:rotate(-1.2deg)}
}
.polaroid::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,transparent 0 2px,rgba(139,10,31,.015) 2px 4px),
    radial-gradient(ellipse at 30% 20%,rgba(139,69,19,.06),transparent 60%);
  pointer-events:none;
}
.tape{
  position:absolute;top:-10px;
  width:70px;height:22px;
  background:rgba(212,168,72,.35);
  border:1px solid rgba(212,168,72,.5);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.tape-l{left:24px;transform:rotate(-8deg)}
.tape-r{right:24px;transform:rotate(6deg)}
.photo{
  background:#fff;
  overflow:hidden;
  aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  filter:sepia(.08) contrast(1.02);
}
.photo img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .8s ease;
}
.polaroid:hover .photo img{transform:scale(1.03)}
.polaroid figcaption{
  position:absolute;
  bottom:14px;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;
}
.cap-cn{
  font-family:'Ma Shan Zheng',serif;
  font-size:22px;
  color:#5a1820;
  letter-spacing:.15em;
}
.cap-en{
  font-family:'ZCOOL XiaoWei',serif;
  font-size:10px;
  letter-spacing:.35em;
  color:#6b4c2e;
  text-transform:uppercase;
}
.cap-date{
  font-family:'Courier New',monospace;
  font-size:9px;
  letter-spacing:.3em;
  color:#8b6a42;
  margin-top:2px;
}

/* POEM */
.poem{
  padding:120px 0 80px;
  text-align:center;
  position:relative;
}
.line{
  font-family:'Noto Serif SC',serif;
  font-weight:400;
  font-size:clamp(18px,2.2vw,24px);
  letter-spacing:.12em;
  color:var(--gold);
}
.line.spacer{line-height:.6;pointer-events:none}
.line.emphasis{
  font-weight:600;
  font-size:clamp(22px,2.6vw,28px);
  color:var(--gold);
}
.line.gold{
  color:var(--gold);
  font-weight:700;
}
.line.final{
  font-family:'Ma Shan Zheng',serif;
  font-size:clamp(48px,8vw,88px);
  color:var(--gold);
  letter-spacing:.25em;
  padding-top:32px;
}

/* CONTRACT */
.contract{
  padding:100px 0 60px;
  text-align:center;
}
.stamp-wrap{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-bottom:60px;
}
.stamp-label{
  font-family:'ZCOOL XiaoWei',serif;
  font-size:12px;
  letter-spacing:.5em;
  color:var(--gold);
  text-transform:uppercase;
  padding-left:.5em;
}
.ca{
  position:relative;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--paper);
  font-family:'Courier New',monospace;
  font-size:clamp(10px,1.6vw,15px);
  letter-spacing:.05em;
  padding:18px 28px;
  cursor:pointer;
  transition:all .3s ease;
  max-width:92vw;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:20px;
  border-radius:2px;
}
.ca::before,.ca::after{
  content:'';position:absolute;width:14px;height:14px;
  border:1px solid var(--blood);
}
.ca::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.ca::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.ca:hover{
  background:rgba(200,16,46,.08);
  border-color:var(--blood);
  color:var(--gold-soft);
  box-shadow:0 0 30px rgba(200,16,46,.25);
}
.ca-text{word-break:break-all;text-align:left}
.ca-hint{
  font-family:'ZCOOL XiaoWei',serif;
  font-size:10px;
  letter-spacing:.3em;
  color:var(--blood);
  white-space:nowrap;
  padding:4px 8px;
  border:1px solid var(--blood);
  transition:all .3s;
}
.ca:hover .ca-hint{background:var(--blood);color:var(--paper)}
.ca.copied .ca-hint{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* SYMBOLS */
.symbols{
  display:flex;justify-content:center;gap:clamp(16px,4vw,48px);
  flex-wrap:wrap;
  margin-top:20px;
}
.symbol{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 24px;
  min-width:120px;
  text-decoration:none;
  color:var(--gold);
  border:1px solid rgba(240,185,11,.3);
  background:#000;
  transition:border-color .25s ease,transform .25s ease;
  overflow:hidden;
}
.symbol svg{
  width:38px;height:38px;color:var(--gold);
  z-index:1;position:relative;
}
.symbol .bnb-logo{
  width:44px;height:44px;
  object-fit:contain;
  z-index:1;position:relative;
}
.symbol span{
  font-family:'ZCOOL XiaoWei',serif;
  font-size:12px;
  letter-spacing:.35em;
  color:var(--gold);
  z-index:1;position:relative;
}
.symbol:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}

/* FOOTER */
.footer{
  padding:120px 0 80px;
  text-align:center;
  position:relative;
}
.lantern{
  width:96px;height:96px;margin:0 auto 40px;
  background:url('bnb-logo-clean.png') center/contain no-repeat;
  position:relative;
}
.haiku{
  font-family:'ZCOOL XiaoWei',serif;
  font-size:14px;
  letter-spacing:.3em;
  color:var(--gold-soft);
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:28px;
  opacity:.7;
}
.mini{
  font-family:'Courier New',monospace;
  font-size:10px;
  letter-spacing:.5em;
  color:var(--gold);
  opacity:.55;
  text-transform:uppercase;
}

/* MOBILE */
@media(max-width:640px){
  .seal{width:64px;height:64px;font-size:40px;right:6vw;top:38%}
  .ca{font-size:9px;padding:14px 18px;flex-direction:column;gap:10px}
  .ca-text{text-align:center}
  .symbol{min-width:88px;padding:20px 14px}
  .symbol svg{width:30px;height:30px}
  .moon{width:180px;height:180px}
}