:root{
  --ink:#0a0a0a; --paper:#f6f5f3; --mute:#8b8b88; --line:#26262a;
  --serif:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1;background:#06070b}
#bg.bg-fallback{background:
  radial-gradient(120% 80% at 50% 108%, #1a1f29 0%, transparent 62%),
  radial-gradient(90% 60% at 50% -10%, #10141c 0%, transparent 70%), #06070b}
#landing{position:relative;z-index:1}
button{font-family:inherit;cursor:pointer}

/* ───────── landing ───────── */
#landing{max-width:1180px;margin:0 auto;padding:0 32px 80px}
.top{display:flex;justify-content:space-between;align-items:baseline;
  padding:34px 0 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mark{font-family:var(--sans);font-weight:600;letter-spacing:.34em;font-size:13px}
.mark span{color:var(--mute)}
.by{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

.hero{padding:132px 0 96px;border-bottom:1px solid rgba(255,255,255,.09)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6.4vw,86px);
  line-height:1.02;letter-spacing:-.035em;margin:0 0 34px}
.hero h1 em{font-style:normal;font-weight:300;color:#8e9199}
.lede{max-width:56ch;font-size:17px;line-height:1.65;color:#b6b5b1;font-weight:300;margin:0}

.stat-strip{display:flex;flex-wrap:wrap;gap:52px;margin-top:64px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.09)}
.stat{min-width:168px}
.stat b{display:block;font-family:var(--serif);font-size:42px;font-weight:300;line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:12px;line-height:1.5;letter-spacing:.05em;color:var(--mute);max-width:19ch}
.stat:first-child b{color:#fff}
.stat:not(:first-child) b{color:#5e5e5c}

.choose{padding:82px 0 0}
.choose h2{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mute);margin:0 0 34px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09)}
.card{background:rgba(10,10,12,.72);backdrop-filter:blur(9px);padding:0;border:0;text-align:left;color:inherit;
  display:flex;flex-direction:column;transition:background .45s ease}
.card:hover,.card:focus-visible{background:#f6f5f3;color:#0a0a0a;outline:none;backdrop-filter:none}
.card-strip{display:flex;height:132px;overflow:hidden}
.card-strip img{width:33.333%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);
  transition:filter .55s ease,transform .55s ease}
.card:hover .card-strip img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.card-body{padding:26px 26px 30px;flex:1;display:flex;flex-direction:column}
.card h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
.card .where{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.card:hover .where{color:#6a6a66}
.card p{font-size:14px;line-height:1.6;color:#a9a8a4;margin:16px 0 0;font-weight:300}
.card:hover p{color:#44443f}
.card .enter{margin-top:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center}
.card .enter i{font-style:normal;transition:transform .4s ease}
.card:hover .enter i{transform:translateX(7px)}

.foot{margin-top:78px;font-size:12px;line-height:1.7;color:#67676a}
.foot strong{color:#9a9a97;font-weight:500}
.foot .rule{height:1px;background:rgba(255,255,255,.09);margin:20px 0}

/* ───────── stage ───────── */
#stage{position:fixed;inset:0;background:#000}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

#loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:22px;background:#000;color:#7d7d7a;font-size:12px;letter-spacing:.24em;text-transform:uppercase;z-index:20}
.spin{width:26px;height:26px;border:1px solid #2a2a2a;border-top-color:#f6f5f3;border-radius:50%;
  animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

#veil{position:absolute;inset:0;display:grid;place-content:center;z-index:15;
  background:rgba(0,0,0,.72);backdrop-filter:blur(3px);cursor:pointer;text-align:center}
.veil-name{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.03em;margin:0 0 10px}
.veil-hint{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin:0}
.veil-or{margin:26px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5e5e5c}
#veil .ghost{margin-top:12px}

#hud{position:absolute;inset:0;pointer-events:none;z-index:18;
  font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 1px 18px rgba(0,0,0,.75)}
#hud::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 16%,transparent 82%,rgba(0,0,0,.42))}
#hud .hud-tl{position:absolute;top:26px;left:28px}
.g-name{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.g-meta{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#a6a5a1;margin-top:9px}
#hud .hud-tr{position:absolute;top:26px;right:28px;display:flex;gap:10px;pointer-events:auto;z-index:2}
#hud .hud-bl{position:absolute;bottom:24px;left:28px;color:#a6a5a1;letter-spacing:.03em}
#hud .hud-br{position:absolute;bottom:24px;right:28px;color:#a6a5a1;text-align:right;max-width:30ch;line-height:1.6}
#hud .hud-br b{color:#fff;font-weight:500}
kbd{display:inline-block;border:1px solid #55554f;border-radius:3px;padding:1px 5px;margin:0 1px;
  font-family:var(--sans);font-size:10px;color:#ddd}

#reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#reticle span{display:block;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:all .2s}
#reticle.hot span{width:11px;height:11px;background:transparent;
  border:1px solid #fff;box-shadow:0 0 12px rgba(255,255,255,.5)}

#prompt{position:absolute;top:calc(50% + 34px);left:50%;transform:translateX(-50%);
  text-align:center;line-height:1.65;white-space:nowrap}
#prompt .p-t{font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:-.01em}
#prompt .p-s{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c9c8c4}

.ghost{background:transparent;border:1px solid rgba(255,255,255,.32);color:#f6f5f3;
  padding:8px 15px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border-radius:2px;transition:all .25s}
.ghost:hover{background:#f6f5f3;color:#0a0a0a;border-color:#f6f5f3}
.ghost.on{background:#f6f5f3;color:#0a0a0a}
.solid{background:#f6f5f3;border:1px solid #f6f5f3;color:#0a0a0a;padding:11px 22px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;border-radius:2px}
.solid:hover{background:#fff}

/* ───────── detail ───────── */
#detail{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);z-index:30;
  background:#0d0d0f;border-left:1px solid #232327;display:flex;flex-direction:column;
  overflow-y:auto;animation:slide .38s cubic-bezier(.16,1,.3,1)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
#detail-close{position:absolute;top:14px;right:16px;background:none;border:0;color:#8b8b88;
  font-size:26px;line-height:1;padding:4px 8px;z-index:2}
#detail-close:hover{color:#fff}
.d-img{background:#000;padding:34px 34px 0}
.d-img img{width:100%;display:block;box-shadow:0 26px 60px rgba(0,0,0,.7)}
.d-body{padding:26px 34px 40px}
.d-artist{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#a6a5a1;margin:0 0 8px}
.d-title{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.025em;line-height:1.2;margin:0 0 8px}
.d-medium{font-size:13px;color:#8b8b88;margin:0 0 22px;line-height:1.55}
.d-price{border-top:1px solid #232327;border-bottom:1px solid #232327;padding:18px 0;margin-bottom:22px}
.d-price .amt{font-family:var(--serif);font-size:29px;font-weight:400;letter-spacing:-.02em;line-height:1}
.d-price .tag{display:inline-block;margin-top:10px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px}
.tag.open{background:#16351f;color:#7fd39a}
.tag.poa{background:#3a2f12;color:#e0b355}
.tag.range{background:#16283a;color:#79b6e6}
.d-facts{margin:0 0 26px;font-size:13px;line-height:1.6}
.d-facts dt{color:#6f6f6c;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:18px}
.d-facts dd{margin:5px 0 0;color:#d6d5d1}
.d-facts .tier{display:inline-flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.gallery{background:#7fd39a}.dot.curated{background:#79b6e6}.dot.open{background:#e0b355}
.d-actions{display:flex;gap:10px;margin-bottom:20px}
.d-note{font-size:11px;color:#5e5e5c;margin:0;line-height:1.6}

@media (max-width:720px){
  #landing{padding:0 20px 60px}
  .hero{padding:70px 0 60px}
  .stat-strip{gap:30px}
  #hud .hud-bl{display:none}
  #detail{width:100%;border-left:0}
}