* { margin:0; padding:0; box-sizing:border-box; }
:root { --ink:#111; --grey:#888; --line:#e5e5e3; --pad:clamp(20px, 5vw, 64px); }
body { font-family:"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
       background:#fff; color:var(--ink); font-size:15px; line-height:1.7; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

/* nav */
.nav { display:flex; align-items:center; justify-content:space-between;
       padding:26px var(--pad); background:#fff; position:sticky; top:0; z-index:40;
       border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.scrolled { border-color:var(--line); }
.nav .logo { font-weight:800; letter-spacing:1.5px; font-size:19px; }
.nav .links { display:flex; gap:clamp(16px, 3vw, 36px); align-items:center;
              font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--grey); }
.nav .links a:hover, .nav .links a.on { color:var(--ink); }
.nav .lang { cursor:pointer; border:1px solid var(--line); border-radius:16px; padding:4px 13px;
             letter-spacing:1px; }
.nav .lang:hover { border-color:var(--ink); color:var(--ink); }

/* hero 轮播 */
.hero { position:relative; height:min(78vh, 820px); min-height:380px; overflow:hidden; background:#0e0e10; }
.hero .slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.hero .slide.on { opacity:1; }
.hero .slide img { width:100%; height:100%; object-fit:cover; }
.hero .cap { position:absolute; left:var(--pad); bottom:34px; color:#fff; z-index:5;
             text-shadow:0 1px 14px rgba(0,0,0,.55); }
.hero .cap .t1 { font-size:clamp(20px, 2.6vw, 30px); font-weight:300; letter-spacing:.5px; }
.hero .cap .t2 { font-size:12.5px; opacity:.85; margin-top:6px; letter-spacing:2.5px; text-transform:uppercase; }
.hero .dots { position:absolute; right:var(--pad); bottom:42px; display:flex; gap:9px; z-index:5; }
.hero .dots span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4);
                   cursor:pointer; transition:background .3s; }
.hero .dots span.on { background:#fff; }

/* 区块 */
.sect { padding:64px var(--pad) 10px; }
.sect h2 { font-weight:300; font-size:21px; letter-spacing:4px; text-transform:uppercase; }
.sect .sub { color:var(--grey); font-size:13px; margin-top:6px; letter-spacing:.5px; }

/* 卡片网格 */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
        gap:34px 26px; padding:30px var(--pad) 64px; }
.card .ph { overflow:hidden; aspect-ratio:16/10; background:#f4f4f2; }
.card .ph img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.card:hover .ph img { transform:scale(1.04); }
.card .n { font-size:14.5px; margin-top:12px; }
.card .m { font-size:11.5px; color:var(--grey); margin-top:3px; letter-spacing:1.5px; text-transform:uppercase; }
.card .tag { display:inline-block; font-size:10px; border:1px solid #c9c9c6; padding:1px 8px;
             border-radius:9px; color:var(--grey); margin-left:8px; vertical-align:1px;
             letter-spacing:1px; text-transform:uppercase; }
.card .tag.built { border-color:#b7a15c; color:#a08b3f; }

/* 品类入口 */
.cats { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
        gap:2px; padding:20px var(--pad) 70px; }
.cats a { position:relative; aspect-ratio:4/3; overflow:hidden; background:#111; }
.cats a img { width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .45s, transform .7s; }
.cats a:hover img { opacity:.95; transform:scale(1.04); }
.cats a .cn { position:absolute; left:18px; bottom:15px; color:#fff; font-size:13px;
              letter-spacing:2px; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.7); }

/* intro 段 */
.intro { padding:76px var(--pad); max-width:880px; }
.intro p { font-size:clamp(17px, 2vw, 22px); font-weight:300; line-height:1.85; color:#333; }
.intro .more { display:inline-block; margin-top:22px; font-size:12px; letter-spacing:2.5px;
               text-transform:uppercase; color:var(--grey); border-bottom:1px solid var(--line); padding-bottom:3px; }
.intro .more:hover { color:var(--ink); border-color:var(--ink); }

/* 筛选条 */
.filters { display:flex; flex-wrap:wrap; gap:10px; padding:26px var(--pad) 0; }
.filters button { border:1px solid var(--line); background:#fff; color:var(--grey);
                  padding:7px 17px; border-radius:19px; font-size:12px; letter-spacing:1.5px;
                  text-transform:uppercase; cursor:pointer; transition:all .2s; }
.filters button:hover { border-color:var(--ink); color:var(--ink); }
.filters button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.filters .sep { width:1px; background:var(--line); margin:4px 6px; }

/* 详情页 */
.phero { height:min(72vh, 760px); min-height:340px; overflow:hidden; background:#f4f4f2; }
.phero img { width:100%; height:100%; object-fit:cover; }
.pbody { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px;
         padding:56px var(--pad); align-items:start; }
.pbody h1 { font-weight:300; font-size:clamp(24px, 3vw, 34px); letter-spacing:.5px; line-height:1.3; }
.pbody .zhname { color:var(--grey); font-size:15px; margin-top:6px; letter-spacing:2px; }
.pbody .desc { margin-top:26px; max-width:640px; color:#333; font-size:15.5px; }
.pinfo { border-top:2px solid var(--ink); font-size:13px; }
.pinfo div { display:flex; justify-content:space-between; gap:14px; padding:11px 2px;
             border-bottom:1px solid var(--line); }
.pinfo dt { color:var(--grey); letter-spacing:1.5px; text-transform:uppercase; font-size:11px; padding-top:2px; }
.pinfo dd { text-align:right; }
.pgallery { padding:0 var(--pad) 30px; display:grid; gap:26px; }
.pgallery img { width:100%; }
.pnav { display:flex; justify-content:space-between; gap:20px; padding:40px var(--pad) 70px;
        border-top:1px solid var(--line); font-size:13.5px; }
.pnav a { color:var(--grey); max-width:45%; }
.pnav a:hover { color:var(--ink); }
.pnav .lab { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:4px; }

/* about / contact */
.page { padding:64px var(--pad) 80px; max-width:860px; }
.page h1 { font-weight:300; font-size:clamp(24px, 3vw, 32px); letter-spacing:3px; text-transform:uppercase; }
.page .lead { margin-top:30px; font-size:clamp(16px, 1.8vw, 20px); font-weight:300; line-height:1.9; color:#333; }
.page .cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:34px; margin-top:48px; }
.page .cols h3 { font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--grey);
                 border-top:2px solid var(--ink); padding-top:12px; }
.page .cols p { margin-top:10px; font-size:14.5px; color:#333; }
.contact-line { margin-top:40px; font-size:16px; line-height:2.2; }
.contact-line .todo { color:#b04a3a; font-size:13px; }

/* footer */
footer { border-top:1px solid var(--line); padding:38px var(--pad) 46px; display:flex;
         flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:baseline; }
footer .fl { font-weight:800; letter-spacing:1.5px; font-size:15px; }
footer .fr { color:var(--grey); font-size:11.5px; letter-spacing:2px; text-transform:uppercase; }

@media (max-width: 760px) {
  .pbody { grid-template-columns:1fr; gap:34px; }
  .hero { height:56vh; }
  .nav .links { gap:14px; }
}