:root { --article-gold: #d9b25f; --article-ink: #0c1018; --article-paper: #f6f2e8; --article-muted: #657080; }
.article-hub { background: linear-gradient(180deg, #101724 0, #0b0f16 260px, #f3f0e8 260px); padding-bottom: 84px; }
.article-hub-hero { max-width: 1180px; margin: 0 auto; padding: 108px 30px 76px; color: #fff; }
.article-hub-hero .eyebrow, .article-page .eyebrow { color: var(--article-gold); font-size: .76rem; font-weight: 800; letter-spacing: .18em; margin: 0 0 16px; }
.article-hub-hero h1 { max-width: 780px; margin: 0; font-family: "Playfair Display", "Noto Sans TC", serif; font-size: clamp(2.35rem, 5vw, 4.8rem); line-height: 1.1; }
.article-hub-hero .lead { max-width: 720px; color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.9; }
.article-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1180px; padding: 0 30px; margin: -18px auto 0; }
.news-card { display: flex; flex-direction: column; overflow: hidden; color: #172032; background: #fff; border: 1px solid rgba(25,33,48,.08); box-shadow: 0 18px 45px rgba(12,16,24,.12); transition: transform .22s ease, box-shadow .22s ease; }
.news-card:hover { color: #172032; transform: translateY(-5px); box-shadow: 0 25px 55px rgba(12,16,24,.19); }
.news-card-media { position: relative; height: 245px; overflow: hidden; background: #172032; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .news-card-media img { transform: scale(1.05); }
.news-card-category { position: absolute; left: 18px; bottom: 18px; padding: 8px 12px; color: #15100a; background: var(--article-gold); font-size: .75rem; font-weight: 800; letter-spacing: .07em; }
.news-card-body { padding: 26px 28px 28px; }
.news-card-date { color: var(--article-muted); font-size: .78rem; letter-spacing: .06em; }
.news-card h2 { margin: 11px 0; font-size: clamp(1.35rem, 2vw, 1.72rem); line-height: 1.35; }
.news-card p { margin: 0; color: #5e6875; line-height: 1.8; }
.news-card .read-more { display: inline-block; margin-top: 20px; color: #9d721c; font-size: .88rem; font-weight: 800; }
.article-page { background: var(--article-paper); min-height: 100vh; padding-bottom: 80px; }
.article-cover { height: min(54vw, 530px); min-height: 300px; background: #0f1724; overflow: hidden; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-shell { max-width: 930px; margin: -68px auto 0; position: relative; padding: 0 28px; }
.article-header { padding: 44px 52px 34px; background: #fff; box-shadow: 0 18px 50px rgba(12,16,24,.13); }
.article-header .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: #77808b; font-size: .86rem; }
.article-header .breadcrumb a { color: #a77c24; }
.article-header h1 { margin: 0; color: #182031; font-family: "Playfair Display", "Noto Sans TC", serif; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.18; }
.article-meta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 22px; color: #6f7784; font-size: .86rem; }
.article-meta .article-category { color: #8d671b; font-weight: 800; }
.article-excerpt { margin: 28px 0 0; padding-left: 20px; border-left: 3px solid var(--article-gold); color: #445062; font-size: 1.08rem; line-height: 1.95; }
.article-body { padding: 48px 52px 58px; background: #fff; border-top: 1px solid #ebedf0; }
.article-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 40px; padding: 0; list-style: none; }
.article-highlights li { padding: 15px; background: #fbf7ed; border-top: 2px solid var(--article-gold); color: #4d5664; font-size: .9rem; line-height: 1.6; }
.article-body section { margin: 40px 0; }
.article-body h2 { margin: 0 0 16px; color: #1a2333; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.4; }
.article-body p { color: #4f5966; line-height: 2; margin: 0 0 16px; }
.article-sources { margin: 42px 0; padding: 26px 28px; border-top: 3px solid var(--article-gold); background: #f7f8fa; }
.article-sources h2 { margin-bottom: 10px; }
.article-sources ul { margin: 14px 0 0; padding-left: 20px; }
.article-sources li { margin: 10px 0; color: #546070; line-height: 1.6; }
.article-sources a { color: #8b6415; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-review-note { margin-top: 34px; padding: 18px 22px; border-left: 3px solid #2e587b; background: #eff5f8; color: #465a67; font-size: .9rem; line-height: 1.8; }
.article-disclaimer { margin-top: 38px; padding: 20px 22px; border: 1px solid #ead9ad; background: #fff9e8; color: #685c43; font-size: .9rem; line-height: 1.8; }
.article-back { display: inline-flex; margin-top: 34px; color: #9d721c; font-weight: 800; }
@media (max-width: 760px) { .article-hub-hero { padding: 92px 20px 55px; } .article-feature-grid { grid-template-columns: 1fr; padding: 0 18px; gap: 20px; } .news-card-media { height: 210px; } .article-shell { padding: 0 15px; margin-top: -34px; } .article-header, .article-body { padding: 30px 24px; } .article-highlights { grid-template-columns: 1fr; } }