:root {
  color-scheme: light;
  --ph-ink: #172433;
  --ph-muted: #65717d;
  --ph-paper: #f5f3ed;
  --ph-card: #fffefa;
  --ph-blue: #12486b;
  --ph-lime: #c7dd5b;
  --ph-line: #d5d9d8;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ph-paper); color: var(--ph-ink); line-height: 1.72; }
a { color: inherit; }
.ph-header { min-height: 92px; padding: 18px max(5vw, 22px); display: flex; align-items: center; gap: 22px; background: var(--ph-blue); color: white; }
.ph-wordmark { color: white; font-size: 26px; font-weight: 800; letter-spacing: .05em; text-decoration: none; }
.ph-header-copy p, .ph-header-copy span { margin: 0; }
.ph-header-copy p { font-weight: 700; }
.ph-header-copy span { color: #d5e0e6; font-size: 13px; }
.ph-navigation { position: relative; z-index: 2; padding: 12px max(5vw, 22px); display: flex; flex-wrap: wrap; gap: 8px 18px; background: #fffefa; border-bottom: 1px solid var(--ph-line); }
.ph-navigation a { color: #173c52; text-decoration: none; font-size: 14px; white-space: nowrap; }
.ph-navigation a:hover, .ph-footer a:hover { text-decoration: underline; }
.ph-home, .ph-inner { width: min(1180px, 92vw); margin: 0 auto; }
.ph-hero { padding: 54px 0 46px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 38px; align-items: center; border-bottom: 1px solid var(--ph-line); }
.ph-sport-line { margin: 0 0 12px; color: var(--ph-blue); font-weight: 700; letter-spacing: .04em; }
h1 { margin: 0 0 20px; font-size: clamp(32px, 4vw, 54px); line-height: 1.2; }
.ph-hero-text { max-width: 720px; font-size: 17px; }
.ph-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ph-hero-tags span { padding: 5px 12px; border: 1px solid #9ab1bc; border-radius: 20px; font-size: 13px; }
.ph-hero-visual { position: relative; margin: 0; min-height: 300px; background: #d9e0dc; clip-path: polygon(0 0,100% 0,100% 86%,88% 100%,0 100%); }
.ph-hero-image { width: 100%; height: 330px; object-fit: cover; }
.ph-hero-visual figcaption { position: absolute; right: 0; bottom: 0; display: grid; gap: 2px; padding: 12px 20px; background: var(--ph-lime); }
.ph-hero-visual figcaption span { font-size: 12px; }
.ph-section { padding: 40px 0; border-bottom: 1px solid var(--ph-line); }
.ph-section h2 { margin: 0 0 20px; font-size: 27px; }
.ph-section-lead { max-width: 780px; color: var(--ph-muted); }
.ph-topic { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: center; }
.ph-topic:nth-of-type(even) { grid-template-columns: .8fr 1.2fr; }
.ph-topic:nth-of-type(even) .ph-topic-copy { order: 2; }
.ph-topic-copy p { max-width: 780px; }
.ph-topic figure { margin: 0; overflow: hidden; border-radius: 4px 42px 4px 4px; }
.ph-topic-image { width: 100%; height: 230px; object-fit: cover; display: block; }
.ph-news-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ph-news-card { grid-column: span 4; padding: 20px; background: var(--ph-card); border-top: 3px solid var(--ph-blue); }
.ph-news-card:nth-child(1), .ph-news-card:nth-child(5) { grid-column: span 6; }
.ph-news-card time, .ph-story time { display: block; color: var(--ph-muted); font-size: 12px; }
.ph-news-card h3 { line-height: 1.4; }
.ph-news-card a { color: var(--ph-blue); font-weight: 700; }
.ph-faq-list { columns: 2 350px; column-gap: 22px; }
.ph-faq-item { break-inside: avoid; margin-bottom: 12px; padding: 16px 18px; background: var(--ph-card); border-left: 3px solid var(--ph-lime); }
.ph-faq-item summary { cursor: pointer; font-weight: 700; }
.ph-discussion-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ph-discussion-card { padding: 18px; border: 1px solid var(--ph-line); background: var(--ph-card); }
.ph-discussion-card h3 { font-size: 17px; }
.ph-image-ribbon { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-top: 28px; }
.ph-image-ribbon img { width: 100%; height: 130px; object-fit: cover; }
.ph-image-ribbon .ph-ribbon-wide { height: 176px; }
.ph-inner { padding: 38px 0 58px; }
.ph-inner-hero, .ph-app-intro, .ph-data-banner, .ph-zh-mast { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: center; padding: 26px; background: #e4e9e3; }
.ph-inner-hero p, .ph-app-intro p, .ph-data-banner p, .ph-zh-mast p { margin-bottom: 0; }
.ph-inner-image, .ph-app-image, .ph-data-image, .ph-zh-image { width: 100%; height: 200px; object-fit: cover; }
.ph-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.ph-page-lead { grid-column: 1 / -1; max-width: 860px; }
.ph-detail-card { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px; background: var(--ph-card); border: 1px solid var(--ph-line); }
.ph-detail-card h2 { margin: 0; font-size: 19px; }
.ph-detail-card p { margin-bottom: 0; }
.ph-detail-image { width: 130px; height: 130px; object-fit: cover; }
.ph-story-columns { columns: 2 420px; column-gap: 22px; margin-top: 24px; }
.ph-story { break-inside: avoid; margin-bottom: 18px; padding: 22px; background: var(--ph-card); border-bottom: 2px solid var(--ph-blue); }
.ph-story h2 { font-size: 22px; }
.ph-story-image { width: 100%; max-height: 230px; object-fit: cover; }
.ph-data-banner { grid-template-columns: 1fr 240px; }
.ph-data-page table { width: 100%; border-collapse: collapse; background: var(--ph-card); margin: 22px 0; }
.ph-data-page caption { text-align: left; padding: 12px 0; font-weight: 700; }
.ph-data-page th, .ph-data-page td { padding: 14px; border-bottom: 1px solid var(--ph-line); text-align: left; }
.ph-data-page th { width: 27%; color: var(--ph-blue); }
.ph-footer { padding: 28px max(5vw, 22px); background: #152b3a; color: white; font-size: 13px; }
.ph-footer p { margin: 6px 0; }
.ph-footer a { color: white; margin-right: 16px; }
.ph-copyright { font-weight: 700; }
@media (max-width: 760px) {
  .ph-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ph-navigation { gap: 7px 12px; }
  .ph-hero, .ph-topic, .ph-topic:nth-of-type(even), .ph-inner-hero, .ph-app-intro, .ph-data-banner, .ph-zh-mast { grid-template-columns: 1fr; }
  .ph-topic:nth-of-type(even) .ph-topic-copy { order: initial; }
  .ph-hero { padding-top: 32px; }
  .ph-hero-image { height: 230px; }
  .ph-news-card, .ph-news-card:nth-child(1), .ph-news-card:nth-child(5) { grid-column: span 12; }
  .ph-discussion-grid, .ph-detail-grid { grid-template-columns: 1fr; }
  .ph-detail-card { grid-template-columns: 90px 1fr; }
  .ph-detail-image { width: 90px; height: 110px; }
  .ph-image-ribbon { grid-template-columns: 1fr 1fr; }
  .ph-image-ribbon .ph-ribbon-wide { grid-column: 1 / -1; height: 150px; }
}