/* Webonline sports index: route-map layout with a warm paper palette. */
:root {
  --wonline-ink: #243238;
  --wonline-muted: #687476;
  --wonline-paper: #f2eee4;
  --wonline-panel: #fbf9f2;
  --wonline-red: #9a3e30;
  --wonline-green: #87947a;
  --wonline-line: #c9c5b8;
  --wonline-night: #253b3a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--wonline-paper);
  color: var(--wonline-ink);
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.75;
}
.b35-brand, .b35-navigation, .b35-footer {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 56px);
}
.b35-brand { padding-top: 26px; padding-bottom: 12px; }
.b35-brand a { color: var(--wonline-night); font-size: 1.24rem; font-weight: 800; text-decoration: none; }
.b35-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-block: 12px 20px;
  border-bottom: 1px solid var(--wonline-line);
}
.b35-navigation a { color: var(--wonline-ink); font-size: .9rem; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.b35-navigation a:hover { color: var(--wonline-red); }
.b35-skip:focus { left: 18px; z-index: 5; background: white; padding: 8px; }
main { max-width: 1240px; margin: 0 auto; padding: 26px clamp(18px, 4vw, 56px) 80px; }
.wonline-opening {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(160px, 4fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  padding: 28px 0 58px;
  border-bottom: 4px solid var(--wonline-night);
}
.wonline-opening h1 { max-width: 900px; margin: 0 0 18px; font-size: clamp(2rem, 4.3vw, 4.1rem); line-height: 1.2; letter-spacing: -.045em; }
.wonline-lead { max-width: 860px; margin: 0; font-size: 1.05rem; }
.wonline-markers { margin: 0; padding: 18px; border: 1px solid var(--wonline-line); background: var(--wonline-panel); transform: rotate(1.2deg); }
.wonline-markers ul { display: grid; grid-template-columns: repeat(2, 64px); justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wonline-small-image { display: block; width: 64px; height: 64px; object-fit: contain; }
.wonline-section { margin-top: 55px; padding-top: 18px; border-top: 1px solid var(--wonline-line); }
.wonline-section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.wonline-section-heading h2 { margin: 0; color: var(--wonline-red); font-size: 1.32rem; letter-spacing: .03em; }
.wonline-about-section { margin-top: 34px; border-top: 0; }
.wonline-about-section .wonline-section-heading h2 { color: var(--wonline-night); font-size: 1.7rem; }
.wonline-about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
.wonline-about-note, .wonline-note, .wonline-feature-note, .wonline-score-explainer,
.wonline-insight-note, .wonline-preview-note, .wonline-calendar-note,
.wonline-standing-note, .wonline-highlight-card, .wonline-data-note,
.wonline-language-card, .wonline-mobile-card {
  padding: 22px 24px;
  background: var(--wonline-panel);
  border-left: 4px solid var(--wonline-green);
}
.wonline-section h3, .wonline-answer h3 { margin: 0 0 10px; font-size: 1.14rem; line-height: 1.45; }
.wonline-section p, .wonline-page-intro p { margin: 0; }
.wonline-feature-lane { display: grid; grid-template-columns: minmax(0, 3fr) minmax(190px, 1fr); gap: 24px; align-items: stretch; }
.wonline-side-caption { align-self: end; padding: 20px; color: var(--wonline-muted); border-bottom: 2px solid var(--wonline-red); }
.wonline-voices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.wonline-voice { grid-column: span 2; padding: 18px 20px; background: #e4e0d5; }
.wonline-voice:first-child { grid-column: span 3; background: var(--wonline-night); color: #fffdf6; }
.wonline-voice p { margin: 0; }
.wonline-score-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr); gap: 24px; align-items: start; }
.wonline-result-list, .wonline-fixture-list, .wonline-data-table { margin: 0; padding: 0; list-style: none; }
.wonline-result-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 5px 12px; padding: 12px 0; border-bottom: 1px solid var(--wonline-line); }
.wonline-result-line time { grid-column: 1 / 3; color: var(--wonline-muted); font-size: .79rem; }
.wonline-result-line .wonline-fixture-teams { grid-column: 1 / 3; font-weight: 700; }
.wonline-result-line .wonline-fixture-result { grid-column: 3; grid-row: 2; color: var(--wonline-red); }
.wonline-result-line .wonline-fixture-league { grid-column: 1; color: var(--wonline-muted); font-size: .84rem; }
.wonline-result-line .wonline-fixture-status { grid-column: 2; color: var(--wonline-muted); text-align: right; font-size: .8rem; }
.wonline-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.wonline-answer { padding: 18px 0; border-bottom: 1px solid var(--wonline-line); }
.wonline-answer h3 { color: var(--wonline-night); }
.wonline-preview-panel { max-width: 800px; margin-left: auto; }
.wonline-news-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--wonline-line); }
.wonline-news-head a { color: var(--wonline-red); font-weight: 700; }
.wonline-stories { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.wonline-story { grid-column: span 2; padding: 18px; background: var(--wonline-panel); }
.wonline-story:nth-child(1), .wonline-story:nth-child(4) { grid-column: span 3; }
.wonline-story time, .wonline-story-full time { color: var(--wonline-muted); font-size: .82rem; }
.wonline-story h3, .wonline-story-full h3 { margin: 8px 0 10px; font-size: 1.1rem; line-height: 1.45; }
.wonline-story p, .wonline-story-full p { margin: 0; }
.wonline-calendar-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.wonline-calendar-date { display: grid; align-content: center; padding: 18px 22px; color: #fffdf6; background: var(--wonline-night); }
.wonline-fixture-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.wonline-fixture { display: grid; grid-template-columns: minmax(58px, .55fr) 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--wonline-line); }
.wonline-fixture-league { color: var(--wonline-red); font-weight: 700; }
.wonline-fixture time { color: var(--wonline-muted); font-size: .79rem; }
.wonline-fixture-teams { grid-column: 1 / 3; font-weight: 600; }
.wonline-fixture-teams b { margin-inline: 4px; color: var(--wonline-green); }
.wonline-fixture-result { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.wonline-fixture-status { grid-column: 2; color: var(--wonline-muted); font-size: .8rem; }
.wonline-standing-note { max-width: 760px; margin-left: 12%; }
.wonline-highlight-note { max-width: 900px; }
.wonline-page-intro { max-width: 930px; padding: 22px 0 38px; border-bottom: 3px solid var(--wonline-night); }
.wonline-page-intro h1 { margin: 4px 0 14px; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; }
.wonline-kicker { color: var(--wonline-red); font-size: .88rem; font-weight: 700; letter-spacing: .08em; }
.wonline-about-reading { display: grid; grid-template-columns: minmax(0, 3fr) minmax(150px, 1fr); gap: 36px; margin-top: 34px; }
.wonline-about-reading article { max-width: 760px; }
.wonline-about-reading h2 { color: var(--wonline-red); font-size: 1.28rem; }
.wonline-about-stamps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.wonline-about-image { display: block; width: 52px; height: 52px; object-fit: contain; }
.wonline-archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 28px; }
.wonline-story-full { padding: 24px; border: 1px solid var(--wonline-line); background: var(--wonline-panel); }
.wonline-data-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.wonline-data-table { border-top: 3px solid var(--wonline-night); }
.wonline-data-fixture { display: grid; grid-template-columns: 74px minmax(190px, 1fr) minmax(140px, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--wonline-line); }
.wonline-language-panels { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; margin-top: 28px; }
.wonline-language-card:first-child { margin-top: 26px; }
.wonline-mobile-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; margin-top: 32px; align-items: end; }
.wonline-mobile-card:last-child { transform: translateY(-18px); }
.b35-footer { margin-top: 24px; padding-top: 28px; padding-bottom: 36px; border-top: 2px solid var(--wonline-night); color: var(--wonline-muted); }
.b35-footer a { margin-right: 16px; color: var(--wonline-ink); }
@media (max-width: 760px) {
  .wonline-opening { grid-template-columns: 1fr; gap: 20px; padding-top: 10px; }
  .wonline-markers { justify-self: start; transform: none; }
  .wonline-about-grid, .wonline-feature-lane, .wonline-score-desk,
  .wonline-faq-grid, .wonline-calendar-top, .wonline-about-reading,
  .wonline-data-summary, .wonline-language-panels, .wonline-mobile-columns { grid-template-columns: 1fr; }
  .wonline-voices { grid-template-columns: 1fr; }
  .wonline-voice, .wonline-voice:first-child { grid-column: auto; }
  .wonline-stories { grid-template-columns: 1fr; }
  .wonline-story, .wonline-story:nth-child(1), .wonline-story:nth-child(4) { grid-column: auto; }
  .wonline-fixture-list { grid-template-columns: 1fr; }
  .wonline-archive { grid-template-columns: 1fr; }
  .wonline-data-fixture { grid-template-columns: 65px 1fr auto; gap: 5px 10px; }
  .wonline-data-fixture time { grid-column: 2 / 4; }
  .wonline-data-fixture .wonline-fixture-teams { grid-column: 1 / 3; }
  .wonline-data-fixture .wonline-fixture-result { grid-column: 3; grid-row: 2; }
  .wonline-standing-note { margin-left: 0; }
  .wonline-mobile-card:last-child { transform: none; }
}