:root{
  --gold:#C29A6B; --gold-dark:#A9814F; --ivory:#F8F4EE; --cream:#F1EAE0;
  --ink:#3D3630; --muted:#8C8378; --white:#FFFFFF;
  --serif:"Noto Serif TC","Cormorant Garamond",serif;
  --sans:"Noto Sans TC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.8;font-weight:300}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.06em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted);font-size:.92rem}

/* header */
.site-header{background:rgba(248,244,238,.94);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--cream)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo img{height:46px;width:auto;mix-blend-mode:multiply}
.site-nav{display:flex;gap:28px;align-items:center;font-size:.95rem;letter-spacing:.12em}
.site-nav a.on{color:var(--gold-dark)}
.site-nav a:hover{color:var(--gold-dark)}
.nav-cta{background:var(--gold);color:#fff !important;padding:8px 22px;border-radius:2px;transition:.25s}
.nav-cta:hover{background:var(--gold-dark)}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* hero */
.hero{position:relative;text-align:center;padding:110px 24px 120px;background:linear-gradient(160deg,#F8F4EE 0%,#EFE6D8 55%,#E9DCC8 100%);overflow:hidden}
.hero h1{font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:.18em;margin-bottom:18px}
.hero .en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.15rem;color:var(--gold-dark);letter-spacing:.3em;margin-bottom:10px}
.hero p.lead{max-width:560px;margin:0 auto 36px;color:var(--muted)}
.btn{display:inline-block;background:var(--gold);color:#fff;padding:13px 42px;letter-spacing:.2em;font-size:.92rem;border-radius:2px;border:none;cursor:pointer;transition:.25s}
.btn:hover{background:var(--gold-dark)}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold-dark)}
.btn.ghost:hover{background:var(--gold);color:#fff}

/* hero split */
.hero-split{display:grid;grid-template-columns:1.1fr 1fr;max-width:1240px;margin:0 auto;align-items:center;gap:48px;padding:56px 24px 72px}
.hero-text .en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.1rem;color:var(--gold-dark);letter-spacing:.34em;margin-bottom:14px}
.hero-text h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:.14em;line-height:1.25;margin-bottom:22px}
.hero-text .lead{max-width:460px;color:var(--muted);margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{position:relative}
.hero-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;box-shadow:0 24px 60px rgba(120,95,60,.22)}
.hero-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);border-radius:2px;z-index:-1}

/* story strip */
.story-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.story-strip figure{position:relative;margin:0;overflow:hidden}
.story-strip img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease}
.story-strip figure:hover img{transform:scale(1.05)}
.story-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;text-align:center;color:#fff;letter-spacing:.3em;font-size:.9rem;background:linear-gradient(transparent,rgba(46,42,37,.55))}

/* sections */
.section{padding:80px 0}
.section.alt{background:var(--white)}
.section-head{text-align:center;margin-bottom:48px}
.section-head .en{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);letter-spacing:.28em;font-size:.95rem}
.section-head h2{font-size:1.9rem;letter-spacing:.15em;margin-top:6px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px}
.card{background:var(--white);border:1px solid var(--cream);transition:.3s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 14px 34px rgba(120,95,60,.12);transform:translateY(-4px)}
.card .thumb{aspect-ratio:1/1;background:var(--cream);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.05rem;letter-spacing:.08em}
.card .sub{color:var(--gold-dark);font-size:.82rem;letter-spacing:.14em;margin:6px 0 10px}
.card .price{margin-top:auto;font-family:"Cormorant Garamond",serif;font-size:1.05rem;color:var(--muted)}
.card .actions{display:flex;gap:10px;margin-top:12px}
.card .actions a{flex:1;text-align:center;font-size:.85rem;padding:9px 0;letter-spacing:.12em;border:1px solid var(--gold);color:var(--gold-dark);transition:.25s}
.card .actions a.buy{background:var(--gold);color:#fff}
.card .actions a:hover{background:var(--gold-dark);color:#fff;border-color:var(--gold-dark)}

/* category tabs */
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.tabs a{padding:8px 20px;border:1px solid var(--cream);background:var(--white);font-size:.88rem;letter-spacing:.1em;border-radius:20px;transition:.25s}
.tabs a.on,.tabs a:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* product detail */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.detail .photo{background:var(--white);border:1px solid var(--cream)}
.detail h1{font-size:1.9rem;letter-spacing:.1em}
.detail .sub{color:var(--gold-dark);letter-spacing:.2em;margin:10px 0 4px}
.detail .size{color:var(--muted);font-size:.9rem}
.detail .price{font-family:"Cormorant Garamond",serif;font-size:1.5rem;margin:18px 0}
.detail .desc{margin:20px 0;color:#5A524A}
.features{list-style:none;margin:22px 0;border-top:1px solid var(--cream)}
.features li{padding:12px 4px;border-bottom:1px solid var(--cream);letter-spacing:.06em}
.features li::before{content:"—";color:var(--gold);margin-right:12px}
.buy-note{font-size:.82rem;color:var(--muted);margin-top:14px}

/* articles */
.article-list .item{display:flex;gap:28px;background:var(--white);border:1px solid var(--cream);padding:26px 30px;margin-bottom:20px;transition:.25s}
.article-list .item:hover{box-shadow:0 10px 26px rgba(120,95,60,.1)}
.article-list h3{font-size:1.15rem;margin-bottom:8px}
.article-body{max-width:760px;margin:0 auto;background:var(--white);padding:48px 52px;border:1px solid var(--cream)}
.article-body h1{font-size:1.7rem;margin-bottom:8px}
.article-body .meta{color:var(--muted);font-size:.85rem;margin-bottom:28px}
.article-body p{margin-bottom:1.1em}

/* about */
.about-block{max-width:720px;margin:0 auto;text-align:center}
.about-block p{margin-bottom:1.4em;color:#5A524A;text-align:left}
.divider{width:56px;height:1px;background:var(--gold);margin:34px auto}

/* verify */
.verify-box{max-width:480px;margin:0 auto;background:var(--white);border:1px solid var(--cream);padding:44px 40px;text-align:center}
.verify-box input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--cream);margin:18px 0;font-size:1rem;letter-spacing:.1em}
.result-ok{color:#4A7B4F;margin-top:18px}
.result-no{color:#A3574F;margin-top:18px}

/* footer */
.site-footer{background:#2E2A25;color:#CFC8BE;margin-top:80px;padding:56px 0 0;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;padding-bottom:40px}
.footer-logo{height:40px;width:auto;filter:brightness(1.6) grayscale(.3);margin-bottom:14px;mix-blend-mode:screen}
.site-footer h4{color:#E8DFD2;letter-spacing:.2em;font-size:.95rem;margin-bottom:14px}
.site-footer a{display:block;padding:4px 0;color:#CFC8BE}
.site-footer a:hover{color:var(--gold)}
.copyright{border-top:1px solid #443E37;padding:18px 24px;text-align:center;color:#8C8378;font-size:.8rem}

@media (max-width:820px){
  .nav-toggle{display:block}
  .site-nav{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--ivory);flex-direction:column;padding:8px 24px 18px;border-bottom:1px solid var(--cream);gap:0;
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:.25s ease;box-shadow:0 14px 30px rgba(120,95,60,.12)}
  body.nav-open .site-nav{visibility:visible;opacity:1;transform:translateY(0)}
  .site-nav a{padding:13px 4px;border-bottom:1px solid var(--cream);font-size:1rem}
  .site-nav a:last-child{border-bottom:none}
  .nav-cta{margin-top:10px;text-align:center;padding:13px 22px}

  .hero-split{grid-template-columns:1fr;gap:36px;padding:36px 24px 56px;text-align:center}
  .hero-text .lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-photo{margin:0 6px}
  .hero-photo::before{inset:12px -10px -10px 10px}

  .story-strip{grid-template-columns:repeat(3,1fr)}
  .story-strip figcaption{font-size:.72rem;letter-spacing:.18em;padding:8px}

  .section{padding:56px 0}
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .card .body{padding:14px 14px 16px}
  .card h3{font-size:.95rem}
  .card .sub{font-size:.74rem;letter-spacing:.08em}
  .card .actions a{padding:11px 0;font-size:.82rem}

  .tabs{gap:8px}
  .tabs a{padding:9px 16px;font-size:.84rem}

  .btn{padding:14px 36px}
  .detail{grid-template-columns:1fr;gap:32px}
  .detail h1{font-size:1.5rem}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .article-body{padding:32px 24px}
  .article-list .item{padding:20px 22px}
}

@media (max-width:420px){
  .grid{grid-template-columns:1fr}
  .card .thumb{aspect-ratio:4/3}
}