
:root {
  --skh-ink: #17232a;
  --skh-deep: #203b3b;
  --skh-copper: #a96e49;
  --skh-fog: #eef0ed;
  --skh-white: #fbfcf9;
  --skh-rule: #bec9c4;
  --skh-muted: #5c6c6a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--skh-ink);
  background: var(--skh-fog);
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.8;
}
.b35-brand {
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px clamp(20px, 4vw, 64px) 9px;
  color: var(--skh-deep);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
}
.b35-brand a { color: inherit; text-decoration: none; }
.b35-navigation {
  display: flex;
  gap: 10px 18px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 12px clamp(20px, 4vw, 64px) 16px;
  border-bottom: 1px solid var(--skh-rule);
}
.b35-navigation a { color: var(--skh-ink); font-size: 13px; text-decoration: none; }
.b35-navigation a:hover { color: var(--skh-copper); }
#content { max-width: 1380px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px) 88px; }
.skh-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 42px;
  align-items: stretch;
  margin: 44px 0 0;
  padding: clamp(32px, 5vw, 68px);
  color: var(--skh-white);
  background: var(--skh-deep);
}
.skh-masthead-copy { max-width: 950px; }
.skh-kicker, .skh-page-title > p:first-child {
  margin: 0 0 12px;
  color: #d4b397;
  font-size: 13px;
  letter-spacing: .15em;
}
.skh-masthead h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.2;
  font-weight: 600;
}
.skh-hero-text { margin: 0; max-width: 880px; font-size: 17px; }
.skh-masthead-mark {
  display: grid;
  place-items: end center;
  border-left: 1px solid rgba(255,255,255,.3);
}
.skh-brand-mark, .skh-story-image, .skh-full-story-image {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.skh-section { position: relative; padding: 62px 0; border-bottom: 1px solid var(--skh-rule); }
.skh-section > header h2 {
  margin: 0 0 24px;
  color: var(--skh-deep);
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.3;
  font-weight: 600;
}
.skh-section p { margin-top: 0; }
.skh-newsboard { padding-top: 72px; }
.skh-news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.skh-story {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2px 18px;
  padding: 24px;
  background: var(--skh-white);
  border-left: 3px solid var(--skh-copper);
}
.skh-story-image { grid-row: span 3; margin-top: 4px; }
.skh-story time, .skh-full-story time { color: var(--skh-muted); font-size: 12px; }
.skh-story h3 { margin: 3px 0 8px; font-size: 18px; line-height: 1.45; }
.skh-story a { color: var(--skh-ink); text-decoration: none; }
.skh-story a:hover { color: var(--skh-copper); }
.skh-news-body { margin: 0; }
.skh-zh-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 34px;
  align-items: center;
  margin: 0 calc(clamp(20px, 4vw, 64px) * -1);
  padding: 64px clamp(20px, 4vw, 64px);
  color: var(--skh-white);
  background: #596e68;
}
.skh-zh-panel > header h2 { color: var(--skh-white); }
.skh-zh-copy { max-width: 850px; font-size: 18px; }
.skh-zh-panel aside {
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.5);
  line-height: 2.5;
}
.skh-data-rail {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .65fr);
  gap: 30px;
  align-items: end;
}
.skh-data-rail > header { grid-column: 1 / -1; }
.skh-matrix-copy { max-width: 850px; margin: 0; font-size: 18px; }
.skh-axis-strip { display: grid; gap: 8px; }
.skh-axis-strip span { padding: 7px 12px; border-bottom: 1px solid var(--skh-copper); color: var(--skh-deep); }
.skh-coverage-read { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 30px; }
.skh-coverage-read > header { grid-row: span 2; padding-top: 4px; }
.skh-coverage-body { max-width: 850px; font-size: 18px; }
.skh-coverage-body p { margin: 0; }
.skh-feature-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5px minmax(130px, .22fr);
  gap: 25px;
}
.skh-feature-spread > header { grid-column: 1 / -1; }
.skh-feature-body { max-width: 860px; font-size: 18px; }
.skh-feature-body p { margin: 0; }
.skh-feature-spine { background: var(--skh-copper); }
.skh-community-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 13px; align-items: start; }
.skh-block {
  min-width: 0;
  padding: 24px;
  background: var(--skh-white);
  border-top: 2px solid var(--skh-deep);
}
.skh-block h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.4; }
.skh-block p { margin: 0; }
.skh-community-note:nth-child(2) { margin-top: 32px; }
.skh-community-note:nth-child(3) { margin-top: 64px; border-top-color: var(--skh-copper); }
.skh-insight-field article {
  max-width: 900px;
  margin-left: auto;
  padding: 12px 30px 12px 0;
  border-right: 4px solid var(--skh-copper);
  font-size: 19px;
}
.skh-insight-field article p { margin: 0; }
.skh-brand-thread { padding-left: 18px; }
.skh-storyline { position: relative; max-width: 930px; padding-left: 34px; border-left: 2px solid var(--skh-deep); }
.skh-storyline > i { position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--skh-copper); }
.skh-storyline > p { margin: 0; }
.skh-storyline > div { display: flex; gap: 10px; margin-top: 22px; }
.skh-storyline span { padding: 6px 12px; color: var(--skh-deep); background: #dfe6e1; font-size: 13px; }
.skh-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
.skh-faq-item { padding: 17px 0; border-bottom: 1px solid var(--skh-rule); }
.skh-faq-item summary { color: var(--skh-deep); font-weight: 650; cursor: pointer; }
.skh-faq-item p { margin: 14px 0 0; }
.skh-page-title { padding: 68px 0 30px; border-bottom: 1px solid var(--skh-rule); }
.skh-page-title h1 { margin: 0; color: var(--skh-deep); font-size: clamp(32px, 4.3vw, 56px); line-height: 1.22; }
.skh-about-map, .skh-data-panels, .skh-online-sheet, .skh-mobile-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 20px;
  padding: 42px 0;
  align-items: stretch;
}
.skh-about-group, .skh-data-first, .skh-online-vocabulary, .skh-mobile-first { align-self: start; }
.skh-about-local, .skh-data-second, .skh-online-context, .skh-mobile-second { align-self: end; }
.skh-about-connector { align-self: center; height: 2px; background: var(--skh-copper); }
.skh-about-note, .skh-data-scale, .skh-device-lines {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 38px;
}
.skh-about-note span, .skh-data-scale span, .skh-device-lines span {
  padding: 8px 12px;
  border-bottom: 2px solid var(--skh-deep);
  color: var(--skh-muted);
}
.skh-full-story-list { padding: 22px 0 48px; }
.skh-full-story { padding: 28px 0; border-bottom: 1px solid var(--skh-rule); }
.skh-full-story-head { display: flex; align-items: center; gap: 20px; }
.skh-full-story-head h2 { margin: 4px 0 0; font-size: clamp(21px, 2.5vw, 31px); line-height: 1.4; }
.skh-full-story > p { max-width: 990px; margin: 22px 0 0 84px; }
.skh-online-colophon { padding: 0 0 48px; color: var(--skh-muted); }
.skh-data-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skh-data-first { margin-top: 20px; }
.skh-data-second { margin-top: 64px; }
.skh-online-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skh-mobile-panels { grid-template-columns: 1fr minmax(250px, .8fr); }
.skh-mobile-first { margin-top: 30px; }
.skh-mobile-second { margin-bottom: 24px; }
.b35-footer { padding: 30px clamp(20px, 4vw, 64px); background: #17232a; color: #edf0ec; }
.b35-footer p { max-width: 1380px; margin: 5px auto; }
.b35-footer a { margin-right: 18px; color: #d6b095; }
@media (max-width: 760px) {
  .skh-masthead { grid-template-columns: 1fr; gap: 22px; margin-top: 25px; padding: 28px 22px; }
  .skh-masthead-mark { grid-row: 1; justify-items: start; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 16px; }
  .skh-news-grid, .skh-community-grid, .skh-faq-grid, .skh-about-map, .skh-data-panels,
  .skh-online-sheet, .skh-mobile-panels { grid-template-columns: 1fr; }
  .skh-about-connector { width: 42px; height: 2px; }
  .skh-about-local, .skh-data-second, .skh-online-context, .skh-mobile-second,
  .skh-community-note:nth-child(2), .skh-community-note:nth-child(3) { margin: 0; }
  .skh-zh-panel, .skh-data-rail { grid-template-columns: 1fr; }
  .skh-coverage-read, .skh-feature-spread { grid-template-columns: 1fr; }
  .skh-coverage-read > header { grid-row: auto; }
  .skh-feature-spine { height: 3px; }
  .skh-storyline > div { flex-wrap: wrap; }
  .skh-full-story > p { margin-left: 0; }
  .skh-story { grid-template-columns: 58px minmax(0, 1fr); padding: 18px; gap: 4px 12px; }
  .skh-story-image { width: 54px; height: 54px; }
}
