:root{--ink:#171411;--cream:#f4f0e9;--paper:#faf8f4;--gold:#b99b68;--gold2:#c5a66f;--muted:#968b7c;--line:#e2d9cc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Serif TC","Noto Serif CJK TC","PingFang TC","Noto Sans CJK TC",serif;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:10;background:#fff;padding:8px}
.bar{padding:11px 5vw;text-align:center;background:#171411;color:#fff;font-size:12px;letter-spacing:1.5px}
.nav{min-height:80px;padding:0 5vw;display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--paper);position:relative;z-index:3;border-bottom:1px solid var(--line)}
.brand{font-size:23px;letter-spacing:4px;font-weight:700;white-space:nowrap}
.brand small{display:block;font:10px Arial,sans-serif;letter-spacing:3px;text-align:center;color:var(--gold);margin-top:4px}
.navlinks{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;font-size:14px}
.navlinks a{padding:4px 0;border-bottom:1px solid transparent}
.navlinks a:hover,.navlinks a[aria-current]{border-bottom-color:var(--gold)}
.menu{display:none;background:none;border:1px solid #d8cfc2;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.eyebrow{font:12px Arial,sans-serif;letter-spacing:3px;color:#d7bc89;margin-bottom:18px;text-transform:uppercase}
.button{display:inline-block;background:var(--gold2);color:#171411;padding:15px 28px;font-size:14px;letter-spacing:1px;max-width:100%;text-align:center;border:1px solid var(--gold2)}
.button:hover{background:#d4b77f}
.button.ghost{background:transparent;border-color:#bfae92;color:var(--ink)}
.text-link{font-size:14px;border-bottom:1px solid currentColor;padding-bottom:4px;color:#e6d3ae}
.text-link.dark{color:var(--ink)}
/* hero */
.hero{min-height:620px;display:grid;grid-template-columns:1.05fr .95fr;background:#1b1815;color:#fff}
.hero-copy{padding:110px 6vw 75px 8vw;display:flex;flex-direction:column;justify-content:center}
.hero h1 span{display:block;white-space:nowrap}
.hero h1{font-size:clamp(34px,4.4vw,64px);line-height:1.18;margin:0 0 25px;letter-spacing:4px}
.hero p{font-size:17px;line-height:2;color:#dfd8cf;max-width:430px;margin:0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px;margin-top:30px}
.hero-image{background:linear-gradient(90deg,#1b1815 0%,transparent 23%),url('/assets/site/hero-hermes-red.jpg') center/cover}
.intro{padding:100px 8vw;text-align:center}
.intro h2,.section-title{font-size:34px;letter-spacing:3px;margin:0 0 15px}
.intro p{line-height:2;color:#665e55;max-width:720px;margin:0 auto 12px}
.intro .eyebrow,.page-head .eyebrow,.collections .eyebrow{color:#9a7a45}
.brands{color:var(--gold);letter-spacing:1px;font-size:15px;margin-top:26px!important}
.brands span{white-space:nowrap}
.collections{padding:25px 6vw 90px}
.heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
.heading p{color:var(--muted);font-size:14px;margin:0 0 18px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#222}
.tile img{width:100%;height:100%;object-fit:cover;transition:.4s}
.tile:hover img{transform:scale(1.05)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:50px 20px 20px;color:#fff;font-size:22px;letter-spacing:3px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.collections .pgrid{grid-template-columns:repeat(3,1fr)}
.pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);transition:box-shadow .3s}
.pcard:hover{box-shadow:0 10px 28px rgba(40,30,15,.12)}
.pcard[hidden]{display:none}
.pimg{display:block;aspect-ratio:1/1;overflow:hidden;background:#e8e0d4}
.pimg img{width:100%;height:100%;object-fit:cover;transition:.4s}
.pcard:hover .pimg img{transform:scale(1.04)}
.pmeta{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px}
.pmeta small{font:11px Arial,sans-serif;letter-spacing:2px;color:#9a7a45}
.pmeta strong{font-weight:600;font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pmeta em{font-style:normal;font-size:13px;color:var(--muted)}
.more{text-align:center;margin:40px 0 0}
.service{display:grid;grid-template-columns:1fr 1fr;margin:0 6vw 95px;background:#e8e0d4}
.service-image{min-height:520px;background:url('/assets/site/appraisal.jpg') center 30%/cover}
.service-copy{padding:65px 9%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.service-copy h2{font-size:36px;margin:0 0 15px;letter-spacing:3px}
.service-copy p{line-height:2;color:#5e554a;margin:0 0 24px}
.service-copy .eyebrow{color:#9a7a45}
/* inner pages */
.page-head{padding:80px 6vw 40px;text-align:center;background:#1b1815;color:#fff}
.page-head h1{font-size:clamp(30px,4vw,46px);letter-spacing:4px;margin:0 0 12px}
.page-head p{color:#cfc6b9;margin:0;line-height:1.8}
.page-head .eyebrow{color:#d7bc89}
.listing{padding:40px 5vw 90px}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px}
.filters a{padding:9px 18px;border:1px solid #cbbda6;font-size:14px;background:var(--paper)}
.filters a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.price-note{text-align:center;color:var(--muted);font-size:13px;margin:0 0 30px}
.empty{text-align:center;color:var(--muted)}
.crumbs{padding:20px 6vw;font-size:13px;color:var(--muted)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;padding:10px 6vw 80px;align-items:start}
.pgallery #main-photo{width:100%;max-height:78vh;object-fit:contain;background:#e8e0d4}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbs button{padding:0;border:2px solid transparent;background:none;cursor:pointer;width:84px;height:84px}
.thumbs button.active{border-color:var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo h1{font-size:clamp(24px,2.4vw,32px);line-height:1.5;letter-spacing:1px;margin:0 0 16px}
.pinfo .eyebrow{color:#9a7a45}
.price{font-size:18px;color:#7c6340;margin:0 0 10px}
.pcat,.sku{font-size:14px;color:#665e55;margin:0 0 8px}
.pcat a{text-decoration:underline;text-underline-offset:3px}
.pinfo h3{font:12px Arial,sans-serif;letter-spacing:2px;color:#9a7a45;margin:26px 0 8px}
.pdesc{line-height:1.9;color:#4f473e;margin-top:16px}
.pdesc p{margin:0 0 6px}
.inquiry{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.inquiry-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.small-links{font-size:14px;margin-top:22px}
.small-links a{border-bottom:1px solid #bfae92}
.related{padding-top:20px}
.collections.related .pgrid{grid-template-columns:repeat(4,1fr)}
.prose{max-width:760px;margin:0 auto;padding:60px 6vw;line-height:2.05;color:#4f473e;font-size:16px}
.prose.center{text-align:center;padding-bottom:10px}
.prose p{margin:0 0 18px}
.notice h2{font-size:20px;letter-spacing:2px;color:var(--ink);margin:36px 0 10px}
.notice ul,.notice ol{padding-left:1.4em;margin:0}
.notice .inquiry{margin-top:44px}
.gallery-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 6vw}
.gallery-strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.appraisal-band{margin:70px 6vw 90px;padding:60px 6vw;text-align:center;background:#e8e0d4}
.appraisal-band h2{font-size:32px;letter-spacing:3px;margin:0 0 10px}
.appraisal-band .eyebrow{color:#9a7a45}
.appraisal-band .inquiry{justify-content:center}
.brand-images{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px 6vw 0;align-items:start}
.brand-images img{width:100%}
.posts{padding:60px 6vw 90px;max-width:1100px;margin:0 auto}
.post-card{display:grid;grid-template-columns:320px 1fr;gap:34px;background:var(--paper);border:1px solid var(--line)}
.post-card img{width:100%;height:100%;max-height:360px;object-fit:cover}
.post-card div{padding:30px 30px 30px 0}
.post-card small{color:var(--muted);font-size:13px}
.post-card h2{font-size:26px;margin:10px 0}
.post-card p{line-height:1.9;color:#5e554a}
.post{max-width:820px;margin:0 auto;padding:10px 6vw 90px}
.post h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:2px;margin:10px 0 8px}
.post-meta{color:var(--muted);font-size:14px}
.post .prose{padding:20px 0}
.post .prose p{margin:0 0 6px}
.post-images{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 30px}
.post-images img{width:100%;aspect-ratio:3/4;object-fit:cover}
.footer{padding:55px 7vw 28px;background:#171411;color:#e9e1d5}
.footer-grid{display:flex;justify-content:space-between;gap:30px}
.footer-logo{width:180px;height:auto;margin-bottom:14px}
.footer p{line-height:1.9;color:#beb5aa;font-size:14px;margin:0}
.footer p a{color:#e9e1d5;text-decoration:underline;text-underline-offset:3px}
.credit{border-top:1px solid #443d34;margin-top:40px;padding-top:20px;text-align:center;color:#c5a66f;font-size:13px}
.credit a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.pgrid,.collections.related .pgrid{grid-template-columns:repeat(3,1fr)}.navlinks{gap:6px 16px;font-size:13px}}
@media(max-width:900px){
.nav{min-height:68px;padding:0 5vw}
.menu{display:block}
.navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;flex-wrap:nowrap;gap:0;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 8px 16px rgba(0,0,0,.08)}
.navlinks.open{display:flex}
.navlinks a{padding:14px 5vw;border-bottom:1px solid #eee7dc}
.tiles{grid-template-columns:repeat(2,1fr)}
.product{grid-template-columns:1fr}
.gallery-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
.hero,.service{grid-template-columns:1fr}
.hero-copy{padding:56px 8vw 50px}
.hero-image{height:380px;order:-1;background:url('/assets/site/hero-hermes-red.jpg') center 55%/cover}
.pgrid,.collections .pgrid,.collections.related .pgrid{grid-template-columns:repeat(2,1fr);gap:16px 12px}
.pmeta{padding:10px 10px 12px}.pmeta strong{font-size:14px}
.intro{padding:65px 8vw}
.collections{padding:15px 5vw 60px}
.heading{display:block}
.footer-grid{display:block}.footer-grid>div+div{margin-top:24px}
.service{margin:0 5vw 65px}.service-image{min-height:380px}.service-copy{padding:48px 9%}
.page-head{padding:56px 6vw 32px}
.listing{padding:28px 4vw 60px}
.filters{justify-content:flex-start}.filters a{padding:8px 12px;font-size:13px}
.product{padding:0 5vw 60px}
.thumbs button{width:64px;height:64px}
.inquiry .button{flex:1 1 100%}
.gallery-strip{grid-template-columns:repeat(2,1fr)}
.brand-images{grid-template-columns:1fr}
.post-card{grid-template-columns:1fr}.post-card div{padding:0 20px 24px}
.appraisal-band{margin:50px 5vw 60px;padding:44px 6vw}
}