/* Article detail pages only. Loaded exclusively by files under /a/. */

body.detail-page {
  --article-reading-width: 900px;
  --article-layout-width: min(1440px, calc(100% - 120px));
  --article-hero-width: 1120px;
  background: #fff;
  color: var(--copy-title);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

body.detail-page .bg-grid,
body.detail-page .bg-glow {
  display: none;
}

/* Breadcrumb and title banner share the inner-page dark visual language. */
body.detail-page .breadcrumb {
  max-width: none;
  margin: 0;
  padding: 122px max(60px, calc((100% - var(--article-hero-width)) / 2)) 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--copy-on-dark-muted);
  background: #070d18;
  font-family: var(--font-cn);
  font-size: var(--type-meta);
  letter-spacing: .02em;
}

body.detail-page .breadcrumb a { color: var(--copy-on-dark-body); }
body.detail-page .breadcrumb > span:not(.current) { color: rgba(255, 255, 255, .34); }
body.detail-page .breadcrumb a:hover,
body.detail-page .breadcrumb a:focus-visible,
body.detail-page .breadcrumb .current { color: #f2cd52; }

/* The title is already shown in the hero; keep the breadcrumb concise. */
body.detail-page .breadcrumb > span:nth-last-child(2),
body.detail-page .breadcrumb .current {
  display: none;
}

body.detail-page .detail-layout,
body.detail-page .detail-layout-single {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.detail-page .detail-main {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.detail-page .detail-header {
  position: relative;
  margin: 0;
  padding: 28px max(60px, calc((100% - var(--article-hero-width)) / 2)) 58px;
  border: 0;
  background:
    radial-gradient(circle at 72% 28%, rgba(38, 141, 194, .12), transparent 30%),
    radial-gradient(circle at 44% 0%, rgba(227, 181, 46, .08), transparent 25%),
    linear-gradient(132deg, #070d18 0%, #071020 100%);
}

body.detail-page .detail-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 181, 46, .62), transparent);
}

body.detail-page .detail-eyebrow,
body.detail-page .detail-title,
body.detail-page .detail-meta {
  width: min(var(--article-hero-width), 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

body.detail-page .detail-eyebrow {
  margin-bottom: 14px;
  color: #f2cd52;
  font-family: var(--font-cn);
  font-size: var(--type-meta);
  font-weight: 650;
  letter-spacing: .12em;
}

body.detail-page .detail-title {
  margin-bottom: 20px;
  color: var(--copy-on-dark);
  font-size: clamp(38px, 3.1vw, 50px);
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: -.028em;
  word-break: auto-phrase;
  text-wrap: balance;
}

body.detail-page .detail-meta {
  color: var(--copy-on-dark-muted);
  font-family: var(--font-cn);
  font-size: var(--type-meta);
  letter-spacing: .04em;
}

/* Focused reading column. */
body.detail-page .article-body {
  width: min(var(--article-reading-width), calc(100% - 48px));
  margin: 0 auto;
  padding: 60px 0 96px;
  color: var(--copy-body);
  font-size: var(--type-body);
  line-height: 1.9;
}

body.detail-page .article-body > p {
  max-width: none;
  margin: 0 0 24px;
  color: var(--copy-body);
  font-size: var(--type-body);
  line-height: 1.9;
  text-wrap: pretty;
}

body.detail-page .article-body > p:first-child {
  margin-bottom: 48px;
  padding-bottom: 34px;
  color: var(--copy-title);
  font-size: var(--type-body-large);
  line-height: 1.85;
  border-bottom: 1px solid rgba(18, 24, 38, .12);
}

body.detail-page .article-body h2 {
  position: relative;
  margin: 64px 0 24px;
  padding: 22px 0 0;
  border: 0;
  color: var(--copy-title);
  font-size: var(--type-card-title);
  font-weight: 740;
  line-height: var(--leading-title);
  letter-spacing: -.015em;
}

body.detail-page .article-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: #e3b52e;
}

body.detail-page .article-body h2:first-of-type { margin-top: 0; }

body.detail-page .article-body h3 {
  margin: 40px 0 16px;
  color: var(--copy-title);
  font-size: var(--type-subtitle);
  line-height: var(--leading-title);
}

body.detail-page .article-body strong,
body.detail-page .article-body b {
  color: var(--copy-title);
  font-weight: 700;
}

body.detail-page .article-body ul,
body.detail-page .article-body ol {
  margin: 28px 0 32px;
  padding: 24px 28px 20px;
  border: 1px solid rgba(18, 24, 38, .11);
  border-left: 3px solid #e3b52e;
  background: #fafbfc;
}

body.detail-page .article-body li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 18px;
  list-style: none;
  color: var(--copy-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

body.detail-page .article-body li:last-child { margin-bottom: 0; }

body.detail-page .article-body li::before {
  content: "";
  position: absolute;
  top: .78em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e3b52e;
}

body.detail-page .article-body blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border: 0;
  border-left: 3px solid #e3b52e;
  background: #fafbfc;
  color: var(--copy-body);
  font-style: normal;
}

/* Related cards follow the insight-page card language without movement. */
body.detail-page .related-section {
  width: var(--article-layout-width);
  max-width: none;
  margin: 0 auto;
  padding: 72px 0 96px;
  border-top: 1px solid rgba(18, 24, 38, .1);
}

body.detail-page .related-head {
  margin-bottom: 36px;
  color: var(--copy-title);
  font-family: var(--font-cn);
  font-size: var(--type-list-title);
  font-weight: 720;
  letter-spacing: -.02em;
}

body.detail-page .related-head::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-bottom: 18px;
  background: #e3b52e;
}

body.detail-page .related-head::after { display: none; }

body.detail-page .related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

body.detail-page .related-card,
body.detail-page .related-card:hover,
body.detail-page .related-card:focus-visible {
  min-width: 0;
  min-height: 340px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(18, 24, 38, .13);
  border-radius: var(--radius-box, 6px);
  background: #fff;
  color: var(--copy-title);
  box-shadow: none;
  transform: none;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}

body.detail-page .related-card:hover,
body.detail-page .related-card:focus-visible {
  border-color: rgba(196, 145, 28, .4);
  background: #fbfcfd;
  box-shadow: 0 14px 38px rgba(18, 35, 52, .06);
}

body.detail-page .related-date {
  color: var(--copy-accent);
  font-family: var(--font-cn);
  font-size: var(--type-meta);
  font-weight: 650;
}

body.detail-page .related-title {
  color: var(--copy-title);
  font-size: var(--type-card-title);
  font-weight: 720;
  line-height: var(--leading-title);
}

body.detail-page .related-excerpt {
  color: var(--copy-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

body.detail-page .related-card::after {
  content: "阅读全文  →";
  align-self: flex-end;
  margin-top: auto;
  color: var(--copy-accent);
  font-size: var(--type-button);
  font-weight: 650;
}

@media (max-width: 1100px) {
  body.detail-page { --article-layout-width: calc(100% - 56px); }
  body.detail-page .breadcrumb,
  body.detail-page .detail-header { padding-right: 28px; padding-left: 28px; }
  body.detail-page .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body.detail-page { --article-layout-width: calc(100% - 32px); }
  body.detail-page .breadcrumb { padding: 88px 16px 14px; font-size: 13px; }
  body.detail-page .detail-header { padding: 24px 16px 42px; }
  body.detail-page .detail-title { font-size: clamp(30px, 8.5vw, 38px); letter-spacing: -.02em; }
  body.detail-page .article-body { width: calc(100% - 32px); padding: 46px 0 72px; }
  body.detail-page .article-body > p:first-child { font-size: var(--type-body); }
  body.detail-page .article-body h2 { margin-top: 52px; font-size: 20px; }
  body.detail-page .article-body ul,
  body.detail-page .article-body ol,
  body.detail-page .article-body blockquote { padding: 20px 18px; }
  body.detail-page .related-section { padding: 56px 0 72px; }
  body.detail-page .related-head { font-size: 28px; }
  body.detail-page .related-grid { grid-template-columns: 1fr; }
  body.detail-page .related-card,
  body.detail-page .related-card:hover,
  body.detail-page .related-card:focus-visible { min-height: 0; }
  body.detail-page .related-title { font-size: 20px; }
}