/* app-web-sporttery.com.cn · mobile agenda */
:root {
    --msp-paper: #f3f6f1;
    --msp-ink: #272333;
    --msp-orange: #d07a32;
    --msp-mint: #d2e4e0;
    --msp-rule: #cbd1cc;
    --msp-muted: #626573;
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--msp-paper); color: var(--msp-ink); font-size: 16px; line-height: 1.8; }
a { color: #9c5116; text-underline-offset: 0.2em; }
a:hover { color: #61310f; }
h1, h2, h3 { line-height: 1.36; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.28rem, 2.2vw, 1.8rem); margin: 0 0 0.8rem; }
h3 { margin: 0.4rem 0; font-size: 1.12rem; }
p { max-width: 72ch; }
figure { margin: 0; }
.msp-brand { padding: 1.1rem max(4vw, calc((100vw - 1160px) / 2)); background: #fff; border-bottom: 1px solid var(--msp-rule); }
.msp-brand a { color: var(--msp-ink); font-size: 1.18rem; font-weight: 750; text-decoration: none; }
.msp-brand p { margin: 0.15rem 0 0; color: var(--msp-muted); font-size: 0.83rem; }
.msp-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; padding: 0.6rem max(4vw, calc((100vw - 1160px) / 2)); background: var(--msp-mint); border-bottom: 3px solid var(--msp-orange); }
.msp-nav a { color: #343744; font-size: 0.84rem; font-weight: 650; text-decoration: none; }
.msp-main { width: min(1160px, 92vw); margin: 0 auto; padding: 2rem 0 4rem; }
.msp-tail { padding: 1.5rem max(4vw, calc((100vw - 1160px) / 2)); background: #272333; color: #faf9f7; font-size: 0.88rem; }
.msp-tail p { margin: 0.25rem 0; }
.msp-copyright { font-weight: 700; }
.msp-tail-links { display: flex; gap: 1.3rem; margin-top: 0.7rem; }
.msp-tail-links a { color: #fff; }
.msp-lead-image, .msp-intro-image, .msp-community-image, .msp-news-picture, .msp-about-photo, .msp-dispatch-cover, .msp-story-image, .msp-ranking-cover, .msp-ranking-figure, .msp-cn-lead, .msp-cn-image, .msp-app-cover, .msp-app-image {
    display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 280px; object-fit: contain;
}

/* Home: short, stacked reading cards and a wide lead paragraph. */
.msp-front-title { margin-bottom: 1.1rem; }
.msp-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(160px, 0.75fr); gap: 1.5rem; align-items: center; padding: 1rem 0 2.2rem; border-bottom: 1px solid var(--msp-rule); }
.msp-lead h2 { color: #96501d; }
.msp-lead p { margin-bottom: 0; font-size: 1.08rem; }
.msp-lead figure { justify-self: end; }
.msp-community { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem 1.8rem; margin: 2rem 0; padding: 1.4rem; background: #fff; border-radius: 18px 3px 18px 3px; }
.msp-community h2 { grid-column: 1 / -1; }
.msp-community-image { grid-row: span 2; max-width: 170px; }
.msp-community-stack { display: grid; gap: 0.8rem; }
.msp-community-item { padding: 0.9rem 1rem; border-left: 3px solid var(--msp-orange); background: #f7f4ef; }
.msp-community-item p { margin: 0; }
.msp-vision, .msp-blog, .msp-intro, .msp-contact, .msp-insight, .msp-history { margin: 2rem 0; padding: 1.25rem 0; border-top: 1px solid var(--msp-rule); }
.msp-vision { max-width: 820px; }
.msp-blog article { padding: 1rem 1.2rem; border-left: 5px solid var(--msp-mint); background: #fff; }
.msp-blog article p, .msp-vision p, .msp-intro p, .msp-contact p, .msp-insight p, .msp-history p { margin-bottom: 0; }
.msp-intro { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1rem 2rem; align-items: center; }
.msp-intro h2 { grid-column: 1 / -1; }
.msp-news-stack { margin: 3rem 0; padding: 1.4rem; background: #e9eee9; }
.msp-news-stack > header { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--msp-ink); margin-bottom: 1rem; }
.msp-news-list { display: grid; gap: 1rem; }
.msp-news-tile { display: grid; grid-template-columns: minmax(0, 0.35fr) minmax(0, 1.65fr); gap: 0.1rem 1.2rem; padding: 1rem; background: #fff; border-radius: 3px 16px 3px 16px; }
.msp-news-tile figure { grid-row: span 4; }
.msp-news-tile time, .msp-story time { color: var(--msp-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.msp-news-tile h3, .msp-news-tile p { grid-column: 2; }
.msp-news-tile p { margin: 0; }
.msp-news-tile a { grid-column: 2; margin-top: 0.45rem; font-weight: 700; }
.msp-news-picture { max-width: min(100%, 190px); max-height: 150px; }
.msp-contact { padding: 1.2rem; border: 1px dashed var(--msp-orange); }
.msp-faq { margin: 3rem 0; padding: 1.5rem; background: #fff; }
.msp-question { border-top: 1px solid var(--msp-rule); }
.msp-question summary { padding: 0.9rem 0; cursor: pointer; font-weight: 700; }
.msp-question p { margin: 0 0 1rem; }
.msp-insight { border-top: 4px solid var(--msp-orange); }
.msp-history { max-width: 800px; margin-left: auto; padding-left: 1.4rem; border-left: 3px solid var(--msp-mint); }

/* About page: a compact record list with alternating image placement. */
.msp-about-page > header { margin-bottom: 2rem; padding-bottom: 0.8rem; border-bottom: 4px solid var(--msp-orange); }
.msp-about-page > header p { margin: 0; color: #96501d; font-weight: 700; }
.msp-about-sequence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; }
.msp-about-record { padding: 1.3rem 0; border-bottom: 1px solid var(--msp-rule); }
.msp-about-record:nth-child(even) { transform: translateY(1.2rem); }
.msp-about-record figure { margin: 0.6rem 0; }
.msp-about-record p { margin-bottom: 0; }

/* News page: a vertical ticker with article bodies in a single reading column. */
.msp-dispatch-title { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 0 1.5rem; border-bottom: 4px solid var(--msp-orange); }
.msp-dispatch-title p { color: #96501d; font-weight: 700; }
.msp-news-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 1.5rem 0 3rem; }
.msp-news-note { padding: 1rem 0; border-bottom: 1px solid var(--msp-rule); }
.msp-news-note p { margin-bottom: 0; }
.msp-story-stack { max-width: 900px; margin: 0 auto; }
.msp-story-stack > header { margin-bottom: 1rem; }
.msp-story { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 0.2rem 1.5rem; padding: 1.2rem 0 1.8rem; border-top: 1px solid var(--msp-rule); }
.msp-story time, .msp-story h2, .msp-story figure, .msp-story p { grid-column: 2; }
.msp-story p { margin: 0; }
.msp-story figure { margin: 0.5rem 0; }

/* Rankings page: stacked evidence notes, not a fabricated live table. */
.msp-ranking-header { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 2rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--msp-rule); }
.msp-ranking-header p { color: #96501d; font-weight: 700; }
.msp-ranking-entries { max-width: 880px; margin-left: auto; }
.msp-ranking-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0.3rem 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--msp-rule); }
.msp-ranking-row h2 { grid-column: 1; }
.msp-ranking-row figure, .msp-ranking-row p { grid-column: 2; }
.msp-ranking-row p { margin: 0; }

/* Chinese edition: text blocks alternate with a narrow image rail. */
.msp-cn-page > header { display: grid; grid-template-columns: 1fr auto; gap: 0 2rem; align-items: center; margin-bottom: 1.5rem; }
.msp-cn-page > header > p { grid-column: 1 / -1; color: #96501d; font-weight: 700; }
.msp-cn-copy { max-width: 860px; }
.msp-cn-block { padding: 1.1rem 0; border-top: 1px solid var(--msp-rule); }
.msp-cn-block p { margin-bottom: 0; }
.msp-cn-block span { color: var(--msp-muted); font-size: 0.78rem; }
.msp-cn-images { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding: 1rem; background: var(--msp-mint); }
.msp-cn-image { max-width: min(30%, 190px); max-height: 150px; }

/* App route: narrow sticky rail and one uninterrupted text stack. */
.msp-app-page { display: grid; grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr); gap: 2rem 3rem; }
.msp-app-rail { position: sticky; top: 1rem; align-self: start; padding: 1.2rem; background: #fff; border-top: 5px solid var(--msp-orange); }
.msp-app-rail > p:first-child { color: #96501d; font-weight: 700; }
.msp-app-topics { display: grid; }
.msp-app-topic { padding: 1rem 0; border-bottom: 1px solid var(--msp-rule); }
.msp-app-topic p { margin-bottom: 0; }
.msp-app-gallery { grid-column: 2; display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 0; border-top: 2px solid var(--msp-orange); }
.msp-app-image { max-width: min(28%, 190px); max-height: 150px; }

@media (max-width: 720px) {
    body { font-size: 15px; }
    .msp-brand { padding: 1rem 4vw; }
    .msp-nav { gap: 0.3rem 0.8rem; padding: 0.6rem 4vw; }
    .msp-nav a { font-size: 0.78rem; }
    .msp-main { width: 92vw; padding-top: 1.3rem; }
    .msp-lead, .msp-community, .msp-intro, .msp-ranking-header, .msp-ranking-row, .msp-app-page { grid-template-columns: 1fr; }
    .msp-lead figure { justify-self: start; }
    .msp-community h2, .msp-intro h2 { grid-column: 1; }
    .msp-community-image { grid-row: auto; }
    .msp-news-tile { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr); }
    .msp-about-sequence, .msp-news-guide { grid-template-columns: 1fr; }
    .msp-about-record:nth-child(even) { transform: none; }
    .msp-dispatch-title { align-items: flex-start; flex-direction: column; }
    .msp-story { grid-template-columns: 1fr; }
    .msp-story time, .msp-story h2, .msp-story figure, .msp-story p { grid-column: 1; }
    .msp-cn-page > header { grid-template-columns: 1fr; }
    .msp-cn-page > header > p { grid-column: 1; }
    .msp-cn-images { flex-direction: column; }
    .msp-cn-image { max-width: min(100%, 240px); }
    .msp-app-rail { position: static; }
    .msp-app-gallery { grid-column: 1; }
    .msp-app-image { max-width: min(28%, 150px); }
}