:root {
  --navy: #1A1A1A;
  --navy-mid: #2A2A2A;
  --gold: #B8943A;
  --gold-light: #D4AC56;
  --gold-bright: #F0CC78;
  --cream: #FFFFFF;
  --off-white: #FAFAFA;
  --text: #1A1A1A;
  --muted: #888888;
  --border: rgba(184,148,58,0.18);
  --card-bg: #FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--off-white);color:var(--text);font-family:'Syne','Noto Sans TC',sans-serif;font-weight:400;overflow-x:hidden;}

/* ── NAV (simplified, consistent with homepage) ── */
.blog-nav{
  position:sticky;top:0;z-index:100;height:64px;padding:0 24px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(250,250,250,0.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.blog-nav .n-logo{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;color:var(--navy);text-decoration:none;letter-spacing:0.02em;}
.blog-nav .n-logo em{color:var(--gold);font-style:normal;}
.blog-nav-links{display:flex;gap:20px;align-items:center;}
.blog-nav-links a{color:var(--navy);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:0.02em;opacity:0.75;transition:opacity .2s;}
.blog-nav-links a:hover{opacity:1;color:var(--gold);}
.blog-nav-links a.cta{background:var(--navy);color:var(--cream);padding:8px 18px;border-radius:2px;opacity:1;}
.blog-nav-links a.cta:hover{background:var(--gold);color:var(--navy);}

.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ── HUB HEADER ── */
.hub-header{padding:72px 0 40px;text-align:center;}
.sec-label{font-size:11px;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;font-weight:600;margin-bottom:14px;}
.hub-title{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);color:var(--navy);line-height:1.3;}
.hub-title em{font-style:normal;color:var(--gold);}
.hub-sub{margin-top:14px;color:var(--muted);font-size:15px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7;}

/* ── CATEGORY TABS ── */
.cat-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:32px 0 48px;}
.cat-tab{
  padding:9px 18px;border:1px solid var(--border);border-radius:20px;
  background:var(--cream);color:var(--navy);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s;letter-spacing:0.02em;font-family:inherit;
}
.cat-tab:hover{border-color:var(--gold);}
.cat-tab.active{background:var(--navy);border-color:var(--navy);color:var(--cream);}

/* ── ARTICLE CARD GRID ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-bottom:80px;}
.a-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:4px;
  padding:26px 24px;text-decoration:none;display:flex;flex-direction:column;gap:12px;
  transition:transform .25s,box-shadow .25s;
}
.a-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(26,26,26,0.08);border-color:var(--gold);}
.a-card-tag{font-size:10px;letter-spacing:0.12em;color:var(--gold);font-weight:700;text-transform:uppercase;}
.a-card-title{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;color:var(--navy);line-height:1.5;}
.a-card-angle{font-size:13px;color:var(--muted);line-height:1.6;flex-grow:1;}
.a-card-more{font-size:12px;color:var(--gold);font-weight:600;}

/* ── ARTICLE PAGE ── */
.article-main{padding:56px 0 40px;}
.back-link{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:28px;}
.back-link:hover{color:var(--gold);}
.article-cat-tag{
  display:inline-block;font-size:11px;letter-spacing:0.1em;color:var(--gold);
  font-weight:700;text-transform:uppercase;margin-bottom:14px;
}
.article-title{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,34px);color:var(--navy);line-height:1.4;margin-bottom:16px;}
.article-angle{
  font-size:14px;color:var(--muted);line-height:1.7;border-left:2px solid var(--gold);
  padding-left:14px;margin-bottom:36px;font-style:italic;
}
.article-body p{font-size:16px;line-height:1.95;color:var(--text);margin-bottom:22px;}
.article-body ul{margin:0 0 22px 0;padding-left:0;list-style:none;}
.article-body li{
  font-size:16px;line-height:1.8;color:var(--text);margin-bottom:10px;padding-left:22px;position:relative;
}
.article-body li::before{content:'—';color:var(--gold);position:absolute;left:0;}

.article-cta{
  margin-top:48px;padding:32px;background:var(--navy);border-radius:6px;text-align:center;
}
.article-cta p{color:rgba(255,255,255,0.8);font-size:14px;margin-bottom:16px;}
.article-cta a{
  display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;
  padding:12px 28px;border-radius:2px;text-decoration:none;font-size:14px;
}
.article-cta a:hover{background:var(--gold-bright);}

.related{margin-top:56px;}
.related-label{font-size:12px;letter-spacing:0.1em;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:16px;}
.related-list a{
  display:block;padding:16px 0;border-top:1px solid var(--border);
  color:var(--navy);text-decoration:none;font-size:15px;font-weight:500;
}
.related-list a:hover{color:var(--gold);}

.blog-footer{padding:32px 24px;text-align:center;border-top:1px solid var(--border);margin-top:40px;}
.blog-footer a{color:var(--muted);font-size:12px;text-decoration:none;}
.blog-footer a:hover{color:var(--gold);}

@media(max-width:640px){
  .blog-nav-links a:not(.cta){display:none;}
  .hub-header{padding:56px 0 28px;}
}