/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  color:#f7f7f7;
  background: #0a0a0c;
  line-height:1.8;
}

/* Luxury gradient marble-style background using layers */
.hero{
  min-height: 92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
     radial-gradient(1000px 600px at 10% -10%, rgba(255,215,0,0.12), transparent 60%),
     radial-gradient(900px 500px at 110% 20%, rgba(65,105,225,0.15), transparent 65%),
     radial-gradient(800px 500px at 50% 120%, rgba(0,255,200,0.08), transparent 60%),
     linear-gradient(135deg, #0b0b10, #0a0a0c 40%, #10121a 70%, #0b0b10 100%);
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    url('images/lot_qianlong_vase_side.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity:0.06; /* subtle texture */
  filter: blur(3px);
}
.container{width:min(1180px, 92vw); margin:0 auto; position:relative; z-index:1;}
.brand{
  letter-spacing:.2em;
  font-weight:800;
  font-size: clamp(26px, 2.3vw, 34px);
  color:#EADBC8;
  text-transform:uppercase;
}
.display{
  font-weight:900;
  font-size: clamp(44px, 5.6vw, 82px);
  letter-spacing:.04em;
  line-height:1.15;
  margin-top:8px;
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.subtitle{
  margin-top:18px;
  color:#d1d5db;
  font-size: clamp(16px, 1.5vw, 18px);
  max-width:900px;
  margin-inline:auto;
}
.cta-wrap{margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  padding:13px 20px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; font-weight:700;
  transition:.25s transform ease, .25s background ease, .25s border-color ease;
}
.btn:hover{ transform: translateY(-2px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}

/* Sections */
.section{padding:84px 0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02))}
.section:nth-child(even){background:linear-gradient(180deg, rgba(16,16,24,0.48), rgba(10,10,12,0.2))}
.section h2{
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom:12px;
  color:#fff;
}
.section .lede{color:#cbd5e1; margin-bottom:28px}

/* Cards grid */
.grid{display:grid; gap:22px}
.grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}
.grid.cols-2{grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));}

.card{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  overflow:hidden;
  transition:.3s transform ease, .3s border-color ease, .3s background ease;
}
.card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,0.18); background:rgba(255,255,255,0.06) }
.card img{ width:100%; height: 240px; object-fit: cover; display:block; }
.card .p{ padding:18px 18px 20px; }
.card h3{ font-size:20px; color:#fff; margin-bottom:8px }
.card p{ color:#d1d5db }

/* Auction banner */
.banner{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;
  padding:20px;
  display:grid;
  gap:14px;
  background:
    radial-gradient(600px 220px at 100% 0, rgba(255,215,0,.1), transparent 70%),
    rgba(255,255,255,0.05);
}
.banner .row{display:flex; gap:18px; flex-wrap:wrap}
.banner .pill{padding:8px 14px; border-radius:999px; background:rgba(255,255,255,0.08); font-weight:700}

/* Steps */
.step{display:flex; gap:14px; align-items:flex-start}
.step .num{
  font-weight:800; font-size:18px; color:#FFD700;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
}

/* Footer */
footer{padding:44px 0; border-top:1px solid rgba(255,255,255,0.08); color:#bfc6d1}
small{color:#a8b1bd}

/* Gallery */
.gallery{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.gallery figure{margin:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden}
.gallery img{width:100%; height:220px; object-fit:cover; display:block}
.gallery figcaption{padding:12px 14px; font-size:14px; color:#dce1ea}

/* Table-like details */
.dl{display:grid; grid-template-columns: 180px 1fr; gap:10px 18px; align-items:start}
.dl div{padding:0}
.dl .k{color:#cbd5e1}
.dl .v{color:#fff}

hr.sep{border:none; border-top:1px solid rgba(255,255,255,.1); margin:26px 0}
a{color:#CDE1FF}