.articles-page{--article-bg:#112738;--article-card:#193244;--article-ink:#f3f5f7;--article-muted:#b6c7d2;--article-line:#3a5263;--article-accent:#7fd5d0;background:var(--article-bg);color:var(--article-ink)}
html[data-theme=light] .articles-page{--article-bg:#f6f7f5;--article-card:#fff;--article-ink:#20394e;--article-muted:#526b7c;--article-line:#d4dfe3;--article-accent:#147c7a}
.articles-page .site-header{position:relative;background:var(--article-bg);border-bottom:1px solid var(--article-line)}
.articles-page .site-footer{border-top:1px solid var(--article-line)}
.articles-main{padding-block:58px 88px;min-height:66vh;max-width:1280px}
.articles-intro{margin-bottom:38px}.articles-kicker{display:flex;align-items:center;gap:12px;color:var(--article-muted);font-size:11px}.articles-kicker:before{content:'';width:28px;height:2px;background:var(--orange)}
.articles-intro h1{font-size:42px;font-weight:500;line-height:1.6;margin-block:12px}.articles-lead{font-size:15px;line-height:2;color:var(--article-muted)}
.articles-list{display:grid;gap:28px}.article-feature{min-width:0;border:1px solid var(--article-line);border-radius:14px;background:var(--article-card);overflow:hidden;transition:border-color .2s}.article-feature:has(a:hover),.article-feature:focus-within{border-color:var(--article-accent)}
.article-card-link{display:grid;grid-template-columns:.95fr 1.05fr;min-height:346px;color:var(--article-ink)}.article-card-link:hover{color:var(--article-ink)}.article-card-link:focus-visible{outline-offset:-5px}
.article-art{position:relative;display:grid;place-items:center;min-height:300px;isolation:isolate;background:#dce5e9;overflow:hidden;color:#38566c}.article-art:before{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/surnames-studio/mountains.webp') 23% 58%/auto 115% no-repeat;mix-blend-mode:multiply;opacity:.95}.article-art span{font:400 clamp(140px,16vw,230px)/1 Century,sans-serif;letter-spacing:-.07em;opacity:.28;direction:ltr;padding-inline-end:.07em}
html[data-theme=dark] .article-art{background:#132c3e;color:#c5dce9}html[data-theme=dark] .article-art:before{filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.45}
.article-copy{display:flex;flex-direction:column;align-items:flex-start;padding:38px 42px;min-width:0}.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--article-muted);font-size:10px}.article-category{color:var(--article-accent)}.article-copy h2{font-size:27px;font-weight:500;line-height:1.8;margin-block:18px 12px}.article-copy>p{font-size:13px;line-height:2.1;color:var(--article-muted)}.article-action{display:flex;align-items:center;gap:12px;color:var(--article-accent);font-size:12px;min-height:44px;margin-top:22px}.article-action .icon{width:21px;height:21px}html[dir=rtl] .article-action .icon{transform:scaleX(-1)}
html[lang=zh-Hans] .articles-kicker{font-size:17px}html[lang=zh-Hans] .articles-intro h1{font-size:50px;font-weight:300}html[lang=zh-Hans] .articles-lead{font-size:23px}html[lang=zh-Hans] .article-meta{font-size:17px}html[lang=zh-Hans] .article-copy h2{font-size:34px;font-weight:300;line-height:1.5}html[lang=zh-Hans] .article-copy>p{font-size:21px;line-height:1.7}html[lang=zh-Hans] .article-action{font-size:19px}
@media(max-width:1100px){.article-copy{padding:28px}.article-copy h2{font-size:23px}.article-copy>p{font-size:12px}}
@media(max-width:760px){.articles-main{padding-block:32px 48px}.articles-intro{margin-bottom:26px}.articles-intro h1{font-size:32px}.articles-lead{font-size:12px}.article-card-link{grid-template-columns:1fr}.article-art{min-height:210px}.article-art span{font-size:164px}.article-copy{padding:24px}.article-copy h2{font-size:22px;margin-top:14px}.article-meta{gap:12px}.article-action{margin-top:15px}html[lang=zh-Hans] .articles-intro h1{font-size:40px}html[lang=zh-Hans] .articles-lead{font-size:21px}html[lang=zh-Hans] .article-copy h2{font-size:30px}html[lang=zh-Hans] .article-copy>p{font-size:19px}}
@media(max-width:380px){.article-copy{padding:20px}.article-copy h2{font-size:20px}.article-copy>p{font-size:11px}.article-meta{font-size:9px}.article-action{font-size:11px}}
@media(prefers-reduced-motion:reduce){.article-feature{transition:none}}