:root{--paper:#f6f3ec;--ink:#1c2428;--soft:#566068;--rule:#d8d2c4;--fjord:#1f5c5a;--tint:#e6efe9;--card:#fffdf9}
@media (prefers-color-scheme:dark){:root{--paper:#12181a;--ink:#e8e6df;--soft:#9aa5a8;--rule:#2a3437;--fjord:#7cc4bb;--tint:#182a2a;--card:#182023}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.75 Georgia,"Iowan Old Style","Times New Roman",serif}
a{color:var(--fjord);text-underline-offset:3px}
.bar{border-bottom:1px solid var(--rule)}
.bar div{max-width:960px;margin:0 auto;padding:18px 20px;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.brand{font-size:20px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.04em}
.brand i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--fjord);margin-right:9px;transform:translateY(-1px)}
nav{display:flex;flex-wrap:wrap;gap:4px 20px;font:14px/1.6 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;margin-left:auto}
nav a{color:var(--soft);text-decoration:none}nav a:hover{color:var(--fjord)}
main{max-width:700px;margin:0 auto;padding:46px 20px 70px}
.eyebrow{font:12px/1 -apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fjord);margin-bottom:14px}
h1{font-size:clamp(27px,5vw,37px);line-height:1.4;margin:0 0 20px;font-weight:700}
.lead{font-size:19px;line-height:1.85;border-left:3px solid var(--fjord);padding-left:18px;margin:0 0 34px}
h2{font-size:23px;line-height:1.5;margin:44px 0 12px}
h3{font-size:18px;margin:26px 0 6px}
p{margin:0 0 18px}ul,ol{padding-left:1.3em;margin:0 0 20px}li{margin-bottom:8px}
.note{font:14px/1.75 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;background:var(--tint);border-radius:8px;padding:14px 16px;color:var(--soft);margin-top:34px}
.meta{font:13px/1.6 -apple-system,"PingFang TC",sans-serif;color:var(--soft);margin-top:44px;padding-top:16px;border-top:1px solid var(--rule)}
.contacts{list-style:none;padding:0}.contacts li{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.contacts strong{display:block;font:12px/1.4 -apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--fjord)}
.hero{max-width:960px;margin:0 auto;padding:58px 20px 12px}
.hero h1{font-size:clamp(30px,6vw,46px);max-width:15em}
.hero p{font-size:18px;color:var(--soft);max-width:34em;margin:0}
.list{max-width:960px;margin:0 auto;padding:26px 20px 70px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:34px;padding:0}
.list a{background:var(--paper);padding:26px 22px;text-decoration:none;color:var(--ink);display:block}
.list a:hover{background:var(--tint)}
.list small{font:12px/1 -apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fjord)}
.list b{display:block;font-size:19px;line-height:1.55;margin:10px 0 8px}
.list span{font:14px/1.7 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;color:var(--soft)}
.strip{max-width:960px;margin:0 auto;padding:30px 20px 70px;font:15px/1.8 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;color:var(--soft)}
footer{border-top:1px solid var(--rule);font:13px/1.8 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;color:var(--soft)}
footer div{max-width:960px;margin:0 auto;padding:22px 20px 40px}
footer a{color:var(--soft)}