:root{
  --gold:#B8935A; --gold-dk:#8C6B3F; --ink:#2E2A24; --ink-2:#5A5348;
  --bg:#FFFFFF; --bg-alt:#F8F5EE; --line:#E5DED0; --alert:#8C3B2E;
  --radius:14px; --max:920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
a{color:var(--gold-dk); text-decoration:none}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px}
.brand{display:flex; flex-direction:column; line-height:1.15}
.brand-cn{font-size:19px; font-weight:700; letter-spacing:3px; color:var(--ink)}
.brand-en{font-size:9px; letter-spacing:2.4px; color:var(--gold); margin-top:2px}
.nav{display:flex; gap:22px; flex-wrap:wrap}
.nav a{font-size:14px; color:var(--ink-2)}
.nav a:hover{color:var(--gold-dk)}
@media(max-width:760px){ .nav{display:none} }

/* Hero */
.hero{
  background:linear-gradient(160deg,#FBF8F1 0%,#F3EDE0 100%);
  border-bottom:1px solid var(--line); padding:74px 0 62px; text-align:center;
}
.hero-kicker{font-size:12px; letter-spacing:4px; color:var(--gold); margin:0 0 16px}
.hero h1{
  font-size:clamp(28px,5.2vw,44px); margin:0 0 14px; font-weight:700; letter-spacing:2px;
}
.hero-sub{font-size:clamp(15px,2.4vw,19px); color:var(--ink-2); margin:0 0 22px; letter-spacing:1px}
.hero-note{
  display:inline-block; font-size:14px; color:var(--ink-2); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:8px 20px; margin:0 0 20px;
}
.hero-flag{
  max-width:600px; margin:0 auto; font-size:14.5px; color:var(--alert);
  background:#FDF6F4; border:1px solid #F0DCD6; border-radius:var(--radius); padding:12px 18px;
}

/* Sections */
.section{padding:64px 0; border-bottom:1px solid var(--line)}
.section-alt{background:var(--bg-alt)}
.section h2{
  font-size:clamp(20px,3vw,26px); margin:0 0 26px; padding-left:14px;
  border-left:4px solid var(--gold); letter-spacing:1px;
}
.section h3{font-size:16px; margin:32px 0 12px; color:var(--ink); letter-spacing:.5px}
.section-note{font-size:14.5px; color:var(--ink-2); background:#fff; border-left:3px solid var(--gold);
  padding:14px 18px; border-radius:0 var(--radius) var(--radius) 0; margin:26px 0 0}
.note{font-size:13.5px; color:var(--ink-2)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px}
.card h3{margin:0 0 8px; font-size:14px; color:var(--gold-dk); letter-spacing:1px}
.card p{margin:0; font-size:15px}
.card-warn{background:#FDF6F4; border-color:#F0DCD6}
.card-warn h3{color:var(--alert)}

/* Table */
.tbl{width:100%; border-collapse:collapse; margin:12px 0 8px; font-size:15px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tbl th,.tbl td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tbl thead th{background:#F3EDE0; font-weight:600; font-size:14px; letter-spacing:.5px}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody th{width:34%; background:#FCFAF5; font-weight:600; color:var(--ink-2); font-size:14px}

/* Lists */
.list{margin:12px 0; padding-left:20px; font-size:15px}
.list li{margin:7px 0}

.ingredients{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; font-size:15px; line-height:2; letter-spacing:.4px;
}

/* Alert */
.alert{background:#FDF6F4; border:1px solid #F0DCD6; border-radius:var(--radius); padding:20px 22px; margin-top:28px}
.alert h3{margin:0 0 10px; color:var(--alert); font-size:16px}
.alert p{margin:6px 0}

/* Caveat */
.caveat{background:#FFFDF7; border:1px dashed var(--gold); border-radius:var(--radius); padding:20px 22px; margin-top:28px}
.caveat h3{margin:0 0 10px; font-size:15px; color:var(--gold-dk)}

/* FAQ */
details{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin:10px 0; padding:0 20px}
details[open]{border-color:var(--gold)}
summary{cursor:pointer; font-weight:600; padding:16px 0; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋"; color:var(--gold); font-weight:400; flex:0 0 auto}
details[open] summary::after{content:"－"}
details p{margin:0 0 18px; font-size:15px; color:var(--ink-2)}

/* Channels */
.channels{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.channel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-align:center}
.channel h3{margin:0 0 8px; font-size:15px; color:var(--gold-dk)}
.channel p{margin:0; font-size:15px}

/* Footer */
.site-footer{background:#2E2A24; color:#CFC7B8; padding:52px 0 42px; text-align:center; font-size:13.5px}
.footer-brand{font-size:15px; color:#E8DFCD; letter-spacing:3px; margin:0 0 18px}
.footer-info{margin:6px 0; line-height:1.9}
.footer-copy{margin:26px 0 0; font-size:12px; color:#8C8375; letter-spacing:1px}

@media print{ .site-header,.nav{display:none} .section{page-break-inside:avoid} }