* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink:#f0ece4; --muted:#b9c0cf; --gold:#e2c78c; --gold-lt:#f6e5bd;
  --line:rgba(226,199,140,.22); --bg:#060b16; --bg2:rgba(255,255,255,.05); }
body { font-family:'Microsoft JhengHei','Microsoft JhengHei UI','Noto Sans TC',sans-serif;
  font-size:18px; color:var(--ink); background:var(--bg); line-height:1.8; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
header { position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(6,11,22,.92); border-bottom:1px solid var(--line); }
.nav { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; flex-wrap:wrap; gap:16px; }
.nav .logo { font-size:20px; font-weight:800; letter-spacing:2px; color:var(--ink); }
.nav .logo span { display:block; font-size:13px; font-weight:400; letter-spacing:3px; color:var(--gold); margin-top:2px; }
.nav .links { display:flex; gap:26px; flex-wrap:wrap; }
.nav a.item { font-size:16px; font-weight:700; letter-spacing:1px; color:var(--ink); white-space:nowrap; }
.nav a.item:hover, .nav a.item.active { color:var(--gold-lt); }
main { max-width:1200px; margin:0 auto; padding:140px 24px 60px; }
.page-head { text-align:center; margin-bottom:48px; }
.page-head h1 { font-size:34px; font-weight:800; letter-spacing:4px; color:var(--ink); }
.page-head h1::after { content:""; display:block; width:64px; height:2px; background:var(--gold-lt); margin:22px auto 0; }
.page-head .sub { margin-top:16px; font-size:16px; letter-spacing:1px; color:var(--muted); }
.page-head.has-bg { position:relative; margin:-140px -24px 48px; height:420px;
  background-size:cover; background-position:center; color:#fff;
  display:flex; align-items:flex-end; justify-content:flex-end; overflow:hidden; }
.page-head.has-bg::before { content:""; position:absolute; inset:0; background:rgba(6,10,20,.42); }
.page-head.has-bg .inner { position:relative; z-index:1; text-align:right;
  background:rgba(6,10,20,.6); padding:20px 32px; margin:0 0 36px 36px; border-right:3px solid var(--gold); }
.page-head.has-bg h1, .page-head.has-bg .sub { color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.page-head.has-bg h1::after { background:var(--gold-lt); margin:18px 0 0 auto; }
.page-head.has-bg .sub { color:#f0e6d6; }
.hero-video { width:100%; max-height:560px; object-fit:cover; margin-bottom:40px; }
.prose p { font-size:18px; color:var(--ink); margin:14px 0; line-height:2; }
.prose h2 { font-size:26px; font-weight:800; margin:40px 0 16px; color:var(--gold-lt); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:24px 0; }
.gallery img { width:100%; height:auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; margin-top:20px; }
.card { display:block; }
.card .thumb { overflow:hidden; background:var(--bg2); aspect-ratio:1/1; }
.card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.card:hover .thumb img { transform:scale(1.05); }
.card .name { margin-top:12px; font-size:16px; line-height:1.6; color:var(--ink); }
.card .price { margin-top:6px; font-size:17px; font-weight:700; color:var(--gold-lt); }
.card .price.ask { color:var(--muted); font-size:14px; }
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.product-detail .imgs img { margin-bottom:12px; }
.product-detail .info .price { font-size:26px; font-weight:800; color:var(--gold-lt); margin:18px 0; }
.product-detail .info .price.ask { font-size:17px; color:var(--muted); }
.product-detail .info .desc p { font-size:17px; color:var(--ink); margin:8px 0; }
.product-detail .note { margin-top:28px; padding:14px 18px; background:var(--bg2); border:1px solid var(--line);
  font-size:15px; color:var(--gold-lt); }
.post-list a.post-item { display:block; padding:22px 0; border-bottom:1px solid var(--line); }
.post-list .post-title { font-size:21px; font-weight:800; color:var(--ink); }
.post-list .post-excerpt { margin-top:8px; font-size:16px; color:var(--muted); }
.contact-box { background:var(--bg2); border:1px solid var(--line); padding:32px 40px;
  font-size:18px; line-height:2.1; color:var(--ink); }
.contact-box a { color:var(--gold-lt); }
#panoviewer { width:100%; height:600px; background:#000; }
footer { padding:70px 24px 40px; text-align:center; border-top:1px solid var(--line); margin-top:40px; }
footer .brand { font-size:18px; font-weight:800; letter-spacing:4px; color:var(--ink); }
footer .tagline { margin-top:10px; font-size:15px; letter-spacing:1px; color:var(--muted); }
footer .bottom { margin-top:50px; display:flex; justify-content:space-between; max-width:1200px;
  margin-left:auto; margin-right:auto; font-size:14px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
@media (max-width:860px) {
  .nav { padding:14px 18px; }
  .nav .links { width:100%; justify-content:center; gap:12px 18px; order:3;
    padding-top:12px; margin-top:8px; border-top:1px solid var(--line); }
  .nav a.item { font-size:14px; }
  main { padding-top:170px; padding-left:16px; padding-right:16px; }
  .product-detail { grid-template-columns:1fr; gap:24px; }
  .page-head h1 { font-size:24px; letter-spacing:2px; }
  .page-head.has-bg { height:300px; margin:-170px -16px 36px; }
  .page-head.has-bg .inner { margin:0 16px 24px; padding:14px 18px; text-align:center; }
  .page-head.has-bg h1::after { margin:14px auto 0; }
}