/* 文章栏目页（A 版）：顶部主入口、杂志式栏目首屏、一主三次、独立测试引导区。
   与 content-pages.css 同源变量；本文件只服务 articles.html。 */

/* 栏目页版心与样本一致（1040px）；其余页面沿用 content-pages.css 的 860px 阅读版心。 */
body.page-articles .app { width: min(100%, 1040px); }

.topbar { flex-wrap: wrap; gap: 12px 26px; }
.mainnav { display: flex; gap: 22px; }
.mainnav a {
  padding: 5px 0 7px; border-bottom: 2px solid transparent; color: #7a4a45;
  text-decoration: none; font: 600 15px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .02em;
}
.mainnav a:hover { border-bottom-color: #cc8b68; }
.mainnav a:focus-visible { outline: 3px solid rgba(215,121,112,.45); outline-offset: 3px; }
.mainnav a.is-current { color: var(--plum); border-bottom-color: var(--plum); }
.language-switch { margin-left: auto; }

.masthead { padding: clamp(40px,7vw,72px) 0 clamp(26px,4vw,40px); }
.masthead h1 { margin: 0; color: #721d28; font-size: clamp(46px,8vw,72px); font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.positioning {
  max-width: 620px; margin: 30px 0 0; padding: 2px 0 2px 20px;
  border-left: 1px solid #cc8b68; color: #754543; font: 17px/1.8 system-ui, sans-serif;
}

.featured {
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(230px,1fr);
  gap: clamp(26px,5vw,60px); align-items: center;
  padding: clamp(28px,4vw,44px) 0 clamp(32px,5vw,50px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.scene-chip {
  display: inline-block; margin: 0 0 16px; padding: 6px 13px; border: 1px solid rgba(109,60,74,.22);
  border-radius: 99px; color: var(--plum); background: #f9efea; font: 600 12px/1.35 system-ui, sans-serif; letter-spacing: .06em;
}
.featured h2 { margin: 0; font-size: clamp(28px,4.2vw,42px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.featured h2 a { color: #6e1f29; text-decoration: none; }
.featured h2 a:hover, .featured h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.featured .dek { max-width: 560px; margin: 18px 0 0; color: #504a47; font: 16px/1.85 system-ui, sans-serif; }
.featured .meta { margin: 18px 0 0; color: var(--muted); font: 13px/1.6 system-ui, sans-serif; }
.action {
  display: inline-block; margin: 24px 0 0; padding: 14px 26px; border-radius: 999px;
  color: #fffaf7; background: var(--plum); box-shadow: 0 10px 22px rgba(109,60,74,.2);
  text-decoration: none; font: 700 14px/1 system-ui, sans-serif;
}
.action:hover { background: #5c3140; }

/* 纯 CSS 住宅几何意象 */
.featured-art { position: relative; height: 240px; }
.featured-art span { position: absolute; }
.art-circle { top: 4px; right: 0; width: 158px; height: 158px; border: 1px solid rgba(204,139,104,.42); border-radius: 50%; }
.art-base { left: 0; bottom: 32px; width: 100%; height: 1.2px; background: rgba(204,139,104,.7); }
.art-house { left: 21px; bottom: 34px; width: 146px; height: 100px; border: 1.4px solid #cc8b68; border-top: 0; }
.art-roof { left: 6px; bottom: 134px; width: 176px; height: 54px; }
.art-roof::before, .art-roof::after { content: ""; position: absolute; bottom: 0; width: 104px; height: 1.4px; background: #cc8b68; }
.art-roof::before { left: 0; transform-origin: left bottom; transform: rotate(-31.8deg); }
.art-roof::after { right: 0; transform-origin: right bottom; transform: rotate(31.8deg); }
.art-window { left: 46px; bottom: 72px; width: 50px; height: 44px; border: 1.2px solid #cc8b68; }
.art-window::before { content: ""; position: absolute; top: 21px; left: 0; width: 50px; height: 1.2px; background: #cc8b68; }
.art-window::after { content: ""; position: absolute; top: 0; left: 24px; width: 1.2px; height: 44px; background: #cc8b68; }
.art-door { left: 114px; bottom: 34px; width: 28px; height: 48px; border: 1.2px solid #cc8b68; border-bottom: 0; border-radius: 14px 14px 0 0; }
.art-stack { right: 10px; bottom: 34px; width: 60px; height: 64px; border: 1.2px solid rgba(204,139,104,.75); }
.art-stack::before { content: ""; position: absolute; top: 21px; left: 0; width: 60px; height: 1.2px; background: rgba(204,139,104,.75); }
.art-stack::after { content: ""; position: absolute; top: 42px; left: 0; width: 60px; height: 1.2px; background: rgba(204,139,104,.75); }

.collection { padding: clamp(30px,5vw,50px) 0 0; }
.collection-label { margin: 0 0 20px; color: var(--muted); font: 600 12px/1.4 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.article-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.article-card { position: relative; padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,249,.62); }
.article-card::before { content: ""; position: absolute; top: -1px; left: 22px; height: 2px; background: #f5d7c6; }
.article-card:nth-child(1)::before { width: 44px; }
.article-card:nth-child(2)::before { width: 28px; }
.article-card:nth-child(3)::before { width: 36px; }
.article-card:nth-child(4)::before { width: 32px; }
.article-card .card-scene { margin: 0 0 10px; color: var(--muted); font: 600 12px/1.4 system-ui, sans-serif; letter-spacing: .06em; }
.article-card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 1.32; letter-spacing: -.02em; }
.article-card h3 a { color: #7a3f46; text-decoration: none; }
.article-card h3 a:hover, .article-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.article-card .card-dek { margin: 0; color: #6b6560; font: 14px/1.8 system-ui, sans-serif; }

.quiz-band {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin: clamp(34px,5vw,56px) 0 0; padding: 24px 26px; border: 1px solid var(--line);
  border-radius: 20px; background: rgba(255,253,249,.55);
}
.quiz-band p { margin: 0; color: #5f5955; font: 15px/1.75 system-ui, sans-serif; }
.quiz-band strong { display: block; margin-bottom: 5px; color: var(--plum); font: 600 17px/1.4 Georgia, serif; }
.quiz-link {
  flex: 0 0 auto; padding: 13px 22px; border: 1px solid rgba(109,60,74,.3); border-radius: 999px;
  color: var(--plum); background: #fffdfa; text-decoration: none; font: 700 14px/1 system-ui, sans-serif;
}
.quiz-link:hover { background: #f8eceb; }

@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; gap: 28px; }
  .featured-art { order: -1; height: 196px; }
  .article-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mainnav { gap: 18px; width: 100%; order: 3; }
  .masthead { padding-top: 32px; }
  .masthead h1 { font-size: clamp(42px,13vw,56px); }
  .positioning { font-size: 16px; }
  .action, .quiz-link { display: block; text-align: center; }
  .quiz-band { flex-direction: column; align-items: stretch; }
}
@media print {
  .mainnav, .quiz-band { display: none !important; }
  .featured { grid-template-columns: 1fr; break-inside: avoid; }
  .featured-art { display: none; }
  .article-cards { grid-template-columns: 1fr 1fr; }
}