*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0c0e0b;--room:#11140f;--ink:#efe8d8;--mut:#9b958a;--gold:#c9a24a;--wax:#8e1f1f;--wax2:#5e1212;--kraft:#d8c49a;--kink:#2b2317;--line:#262a22}
html,body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}
body{background:radial-gradient(1200px 700px at 50% 30%,#1c2016 0,#11130e 50%,var(--bg) 80%) no-repeat,var(--bg)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:var(--gold)}
.sp{flex:1}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px clamp(14px,2.4vw,32px);background:linear-gradient(180deg,rgba(12,14,11,.92),rgba(12,14,11,0))}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark b{font:700 17px 'Playfair Display',serif;letter-spacing:.22em}
.seal-mini{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c23c3c,#6e1414 70%);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),0 0 12px rgba(180,40,40,.5);display:inline-block}
.ca{display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:rgba(17,20,15,.85);border-radius:999px;padding:8px 14px;font-size:12px;color:var(--mut)}
.ca span{font-weight:800;color:var(--gold)}.ca code{font:500 12px 'JetBrains Mono',monospace}
.buy{background:var(--gold);color:#17120a;font-weight:800;font-size:14px;padding:10px 16px;border-radius:999px;text-decoration:none;box-shadow:0 0 24px rgba(201,162,74,.35)}
.x{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);text-decoration:none;background:rgba(17,20,15,.85)}

/* the room */
.room{position:relative;min-height:100vh;padding:92px clamp(14px,3vw,40px) 40px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.dust{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(220,200,150,.14) 1px,transparent 1px);background-size:90px 90px;animation:drift 40s linear infinite;opacity:.4}
@keyframes drift{to{background-position:90px 180px}}
.house{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.34em;color:var(--mut)}
.lotno{font:900 clamp(54px,8vw,110px)/1 'Playfair Display',serif;margin:10px 0 2px;letter-spacing:.04em;color:#f3ead6;text-shadow:0 0 50px rgba(201,162,74,.25)}
.gavel{font:italic 500 16px 'Playfair Display',serif;color:var(--gold)}

.stage{position:relative;margin:34px 0 10px;width:min(620px,94vw)}
.spot{position:absolute;left:50%;top:-140px;width:150%;height:150%;transform:translateX(-50%);background:radial-gradient(ellipse 46% 60% at 50% 30%,rgba(236,205,130,.14),transparent 70%);pointer-events:none}
.envwrap{position:relative;perspective:900px}
.env{position:relative;margin:0 auto;width:100%;aspect-ratio:17/10;background:linear-gradient(165deg,#e3d0a6,#c7b183 55%,#b59e71);border-radius:6px;box-shadow:0 40px 80px rgba(0,0,0,.65),inset 0 0 60px rgba(120,90,40,.25);transform:rotate(-1.2deg);transition:transform .5s}
.env::after{content:"";position:absolute;inset:0;border-radius:6px;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 2px,transparent 2px 6px)}
.flap{position:absolute;inset:0 0 auto 0;height:58%;background:linear-gradient(175deg,#d9c493,#bda77a);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:6px 6px 0 0;box-shadow:0 10px 20px rgba(0,0,0,.18);transform-origin:50% 0;transition:transform .9s ease-in;z-index:3}
.env.open .flap{transform:rotateX(165deg)}
.paper{position:absolute;inset:0;z-index:2}
.to{position:absolute;left:7%;bottom:31%;right:7%;text-align:left;font:400 clamp(9px,1.4vw,12px) 'Special Elite',monospace;color:#5d4a28;letter-spacing:.12em;z-index:4}
.hash{position:absolute;left:9%;right:9%;bottom:14%;font:500 clamp(11px,1.8vw,15px)/1.6 'JetBrains Mono',monospace;color:#3f3115;word-break:break-all;text-align:center}
.foot{position:absolute;left:7%;right:7%;bottom:4.5%;font:400 clamp(9px,1.3vw,11px) 'Special Elite',monospace;color:#6b5733;text-align:center}
.foot a{color:#7d5518;text-decoration:underline}
.wax{position:absolute;left:50%;top:44%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg);z-index:4;border-radius:50%;background:radial-gradient(circle at 36% 30%,#c84444,#8e1f1f 55%,#531010);box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,160,140,.35),inset 0 -5px 12px rgba(0,0,0,.45);display:grid;place-items:center;transition:opacity .4s,transform .7s}
.wax i{position:absolute;inset:9%;border-radius:50%;border:2px solid rgba(60,8,8,.55)}
.wax span{font:700 clamp(12px,2.2vw,20px) 'Playfair Display',serif;color:#f7d9c8;letter-spacing:.18em;text-shadow:0 1px 2px #3c0808}
.env.open .wax{transform:translate(-50%,-50%) rotate(28deg) scale(1.12);opacity:0}
.crack{position:absolute;left:50%;top:44%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.crack b{position:absolute;left:50%;top:50%;width:46%;height:3px;background:#4a0d0d;transform-origin:0 50%;animation:shard .8s ease-out forwards}
@keyframes shard{from{transform:rotate(var(--a)) translateX(0);opacity:1}to{transform:rotate(var(--a)) translateX(230%);opacity:0}}
.card{position:absolute;left:50%;top:50%;width:56%;transform:translate(-50%,-30%) scale(.6);opacity:0;z-index:1;background:linear-gradient(170deg,#f6efdd,#e4d9bd);color:#241a0c;border-radius:10px;padding:26px 20px 20px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.6);transition:transform .9s .5s cubic-bezier(.2,1.4,.4,1),opacity .5s .5s}
.env.open~.card,.envwrap.done .card{transform:translate(-50%,-78%) scale(1);opacity:1;z-index:6}
.card img{width:76px;height:76px;border-radius:50%;object-fit:cover;background:#2a2113;box-shadow:0 0 0 4px var(--gold)}
.card b{display:block;font:900 34px 'Playfair Display',serif;margin-top:10px}
.card span{display:block;font-size:13px;color:#6b5a3a}
.card em{display:block;margin-top:12px;font:500 11px 'JetBrains Mono',monospace;font-style:normal;color:#8a7347}
.card em.ok{color:#1d6b2f}
.card em.ok::before{content:"✓ ";font-weight:700}
.podium{margin:26px auto 0;width:min(520px,88%);background:linear-gradient(180deg,#3a2c1b,#241a0f);border-radius:4px 4px 10px 10px;padding:13px 18px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(236,205,130,.2)}
.podium span{font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:#cdb582}

/* clock + ritual */
.clockrow{display:flex;gap:34px;align-items:flex-start;margin-top:38px;max-width:1050px;flex-wrap:wrap;justify-content:center}
.tick{flex:0 0 auto;text-align:center;border:1px solid var(--line);border-radius:14px;padding:18px 30px;background:rgba(17,20,15,.7)}
.tick b{display:block;font:700 54px 'JetBrains Mono',monospace;color:var(--gold);letter-spacing:.04em}
.tick span{font-size:12px;color:var(--mut)}
.ritual{flex:1 1 440px;display:grid;gap:14px;max-width:620px}
.ritual div{display:flex;gap:14px;align-items:flex-start}
.ritual i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font:700 13px 'Playfair Display',serif;font-style:normal;color:var(--gold)}
.ritual p{font-size:14px;line-height:1.55;color:#cfc8b8}
.ritual b{color:var(--ink)}

/* sold-to strip */
.sold{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;max-width:980px}
.sold span{font:500 11px 'JetBrains Mono',monospace;background:rgba(201,162,74,.1);border:1px solid rgba(201,162,74,.3);color:#d9c290;border-radius:999px;padding:6px 12px}
.sold b{color:var(--gold)}

/* catalogue */
section{max-width:1150px;margin:0 auto;padding:70px clamp(14px,3vw,40px)}
h2{font:900 clamp(34px,4vw,52px) 'Playfair Display',serif}
.cathead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.tots{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.tots b{font:700 16px 'JetBrains Mono',monospace;color:var(--gold);margin-right:5px}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.page{position:relative;background:linear-gradient(172deg,#f2ead6,#ddd0b0);color:#241a0c;border-radius:4px;padding:16px 16px 13px;box-shadow:0 14px 30px rgba(0,0,0,.45);transform:rotate(-.6deg)}
.page:nth-child(even){transform:rotate(.7deg)}
.page .pn{display:flex;justify-content:space-between;font:400 11px 'Special Elite',monospace;color:#6b5733;border-bottom:1px solid rgba(43,35,23,.2);padding-bottom:8px}
.page .pc{display:flex;gap:12px;align-items:center;margin:12px 0 8px}
.page img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#2a2113;box-shadow:0 0 0 2.5px var(--gold)}
.page b{font:900 21px 'Playfair Display',serif}
.page .pm{font:500 10.5px 'JetBrains Mono',monospace;color:#6b5733;word-break:break-all}
.page .ph{font:500 10px 'JetBrains Mono',monospace;color:#8a7347;word-break:break-all;margin:7px 0}
.page .pr{display:flex;justify-content:space-between;align-items:center;font:600 12px 'JetBrains Mono',monospace;color:#3f3115}
.page .pr a{color:#7d5518}
.page .note{font-size:11.5px;color:#6b5733;font-style:italic}
.page .vfy{position:absolute;right:10px;top:40px;border:2px solid #1d6b2f;color:#1d6b2f;font:700 10px 'JetBrains Mono',monospace;padding:2px 7px;transform:rotate(9deg);border-radius:3px;opacity:.85}
.empty{color:var(--mut);padding:26px;border:1px dashed var(--line);border-radius:12px;text-align:center;grid-column:1/-1}

/* paddle */
.paddle{display:flex;justify-content:center}
.pad{position:relative;width:min(560px,100%);background:linear-gradient(170deg,#6e4a26,#4a3016);border:1px solid rgba(236,205,130,.25);border-radius:18px 18px 50% 50%/18px 18px 30% 30%;padding:34px 34px 60px;text-align:center;box-shadow:0 26px 50px rgba(0,0,0,.5)}
.pad::after{content:"";position:absolute;left:50%;top:100%;width:16px;height:62px;margin-left:-8px;background:linear-gradient(#3a2712,#241708);border-radius:0 0 8px 8px}
.padno{position:absolute;left:18px;top:12px;font:900 26px 'Playfair Display',serif;color:rgba(236,205,130,.5)}
.pad form{display:flex;gap:10px}
.pad input{flex:1;min-width:0;background:rgba(12,10,6,.5);border:1px solid rgba(236,205,130,.3);border-radius:10px;padding:13px;color:var(--ink);font:500 13px 'JetBrains Mono',monospace}
.pad button{background:var(--wax);color:#f7d9c8;font-weight:800;padding:0 22px;border-radius:10px}
.pad p{margin-top:12px;font-size:12.5px;color:#d9c9ad}
#checkOut{margin-top:10px;font:500 12.5px 'JetBrains Mono',monospace;color:#e8dcc0;text-align:left}
#checkOut div{padding:7px 0;border-bottom:1px dashed rgba(236,205,130,.25)}
#checkOut a{color:#eccd82}

/* terms */
.terms{max-width:900px;margin:0 auto;padding:30px clamp(14px,3vw,40px) 60px;color:#7d776b}
.terms .th{font:400 12px 'Special Elite',monospace;letter-spacing:.3em;color:var(--mut);margin-bottom:12px}
.terms ol{padding-left:18px;display:grid;gap:7px;font-size:12.5px;line-height:1.55}
.terms .fin{margin-top:22px;display:flex;align-items:center;gap:10px;font-size:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:var(--gold);color:#17120a;padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;transition:.3s;z-index:50}
.toast.on{transform:translate(-50%,0);opacity:1}

@media (max-width:700px){
  .buy{display:none}.x{display:none}.ca code{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .clockrow{gap:20px}.tick{padding:14px 22px}.tick b{font-size:40px}
  .pad{padding:26px 18px 50px}
  .card b{font-size:26px}.card img{width:58px;height:58px}
}
