:root{
  --ink:#141312; --ink2:#1d1b19; --cream:#efe4c8; --cream2:#cfc3a6;
  --sage:#8fb89a; --plum:#5a4f57; --muted:#9a917f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-width:1180px; background:var(--ink); color:var(--cream);
  font-family:"Space Mono",ui-monospace,monospace;
  background-image:
    repeating-linear-gradient(-28deg, transparent 0 46px, rgba(239,228,200,.035) 46px 50px),
    radial-gradient(ellipse at 72% 45%, #2a2622 0%, var(--ink) 62%);
  display:flex; flex-direction:column;
}
.stage{
  flex:1; width:1240px; margin:0 auto; padding:56px 40px 24px;
  display:grid; grid-template-columns:1fr 600px; gap:64px; align-items:center;
}
.kicker{letter-spacing:.22em; text-transform:uppercase; font-size:13px; color:var(--sage)}
.kicker del{color:#d0634e; text-decoration-thickness:2px}
h1{
  font-family:"DM Serif Display",Georgia,serif; font-weight:400;
  font-size:112px; line-height:.92; margin:18px 0 10px; letter-spacing:-.01em;
}
h1 em{color:var(--cream2); font-style:italic}
.ticker{font-size:22px; font-weight:700; color:var(--sage); letter-spacing:.08em}
.lede{max-width:500px; margin:22px 0 34px; font-size:15px; line-height:1.65; color:var(--muted)}

.ca{
  display:flex; align-items:center; gap:14px; max-width:560px;
  border:1px solid rgba(239,228,200,.25); background:var(--ink2); padding:12px 12px 12px 16px;
}
.ca-label{font-size:12px; font-weight:700; color:var(--ink); background:var(--sage); padding:3px 7px}
.ca code{flex:1; font-family:inherit; font-size:14px; word-break:break-all; color:var(--cream)}
#copy{
  font:700 13px "Space Mono",monospace; letter-spacing:.06em; text-transform:uppercase;
  background:var(--cream); color:var(--ink); border:0; padding:9px 16px; cursor:pointer;
  transition:background .15s;
}
#copy:hover{background:#fff}
#copy.done{background:var(--sage)}

.actions{display:flex; gap:14px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font:700 15px "Space Mono",monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 30px; border:2px solid var(--cream); transition:transform .15s, background .15s, color .15s;
}
.btn:hover{transform:translateY(-2px)}
.buy{background:var(--sage); border-color:var(--sage); color:var(--ink)}
.buy:hover{background:#a6cdb0}
.x{color:var(--cream)}
.x:hover{background:var(--cream); color:var(--ink)}
.x svg{width:17px; height:17px; fill:currentColor}

.logo{position:relative; justify-self:end}
.frame{
  width:560px; height:560px; padding:14px; background:var(--cream);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  transform:rotate(2deg); animation:sway 6s ease-in-out infinite;
}
.frame img,.frame video{display:block; width:100%; height:100%; object-fit:cover}
.logo figcaption{
  position:absolute; left:-26px; bottom:34px; transform:rotate(-6deg);
  background:var(--ink); color:var(--sage); border:2px solid var(--sage);
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:8px 14px;
}
@keyframes sway{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(.8deg) translateY(-8px)}}

footer{padding:18px 40px 22px; text-align:center; font-size:11px; color:#6d665a}
@media (prefers-reduced-motion:reduce){.frame{animation:none}}