/* Webapp sports portal: modular signal board with an orchid and graphite palette. */
:root {
  --wapp-ink: #262632;
  --wapp-muted: #6d6a78;
  --wapp-paper: #f2f0f5;
  --wapp-card: #ffffff;
  --wapp-orchid: #682c70;
  --wapp-lilac: #b68ec0;
  --wapp-lime: #d6e6a0;
  --wapp-rule: #d8d2df;
  --wapp-dark: #211e2a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--wapp-paper);
  color: var(--wapp-ink);
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.72;
}
.b35-brand, .b35-navigation, .b35-footer {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 58px);
}
.b35-brand { padding-top: 24px; padding-bottom: 10px; }
.b35-brand a { color: var(--wapp-orchid); font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.b35-navigation { display: flex; flex-wrap: wrap; gap: 7px 16px; padding-block: 11px 18px; border-bottom: 1px solid var(--wapp-rule); }
.b35-navigation a { color: var(--wapp-ink); font-size: .9rem; text-underline-offset: 4px; }
.b35-navigation a:hover { color: var(--wapp-orchid); }
.b35-skip:focus { left: 16px; z-index: 10; background: white; padding: 8px; }
main { max-width: 1280px; margin: 0 auto; padding: 26px clamp(18px, 4vw, 58px) 82px; }
.wapp-opening {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(180px, 3fr);
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  padding: clamp(26px, 5vw, 58px);
  overflow: hidden;
  color: #fff;
  background: var(--wapp-dark);
  border-radius: 4px 58px 4px 4px;
}
.wapp-opening::after { position: absolute; right: -55px; bottom: -110px; width: 290px; height: 290px; border: 1px solid #765280; border-radius: 50%; content: ""; }
.wapp-opening h1 { position: relative; z-index: 1; margin: 0 0 18px; color: white; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.17; letter-spacing: -.04em; }
.wapp-introduction { position: relative; z-index: 1; max-width: 850px; margin: 0; color: #e4dfe9; }
.wapp-image-orbit { position: relative; z-index: 1; justify-self: end; margin: 0; padding: 14px; border: 1px solid #75677d; background: #302b38; transform: rotate(-2deg); }
.wapp-image-orbit ul { display: grid; grid-template-columns: repeat(2, 64px); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wapp-tile-image { display: block; width: 64px; height: 64px; object-fit: contain; background: #fff; }
.wapp-section { margin-top: 52px; }
.wapp-section-label { display: flex; align-items: center; margin-bottom: 18px; }
.wapp-section-label h2 { margin: 0; padding: 7px 14px; color: #fff; background: var(--wapp-orchid); font-size: 1.18rem; letter-spacing: .02em; }
.wapp-about-section .wapp-section-label h2 { color: var(--wapp-dark); background: var(--wapp-lime); font-size: 1.45rem; }
.wapp-about-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wapp-about-leaf, .wapp-copy-panel, .wapp-standing-copy, .wapp-fixture-copy,
.wapp-score-copy, .wapp-analysis-copy, .wapp-schedule-copy, .wapp-data-panel,
.wapp-chinese-main, .wapp-chinese-side, .wapp-mobile-frame {
  padding: 21px 23px;
  background: var(--wapp-card);
  border: 1px solid var(--wapp-rule);
  border-top: 4px solid var(--wapp-lilac);
}
.wapp-section h3 { margin: 0 0 10px; font-size: 1.12rem; line-height: 1.45; }
.wapp-section p { margin: 0; }
.wapp-standing-map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(200px, 5fr); gap: 20px; align-items: stretch; }
.wapp-competition-set { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; align-content: center; margin: 0; padding: 0; list-style: none; }
.wapp-competition-set li { padding: 9px 12px; color: var(--wapp-orchid); background: #e5dce9; font-weight: 700; text-align: center; }
.wapp-news-overline { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--wapp-rule); }
.wapp-news-overline a { color: var(--wapp-orchid); font-weight: 700; }
.wapp-news-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.wapp-article { position: relative; padding: 16px 18px 18px 24px; background: var(--wapp-card); border-left: 3px solid var(--wapp-lilac); }
.wapp-article::before { position: absolute; top: 22px; left: -6px; width: 9px; height: 9px; border: 2px solid var(--wapp-paper); border-radius: 50%; background: var(--wapp-orchid); content: ""; }
.wapp-article time, .wapp-article-full time { color: var(--wapp-muted); font-size: .82rem; }
.wapp-article h3, .wapp-article-full h3 { margin: 6px 0 9px; font-size: 1.06rem; line-height: 1.45; }
.wapp-article p, .wapp-article-full p { margin: 0; }
.wapp-question-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wapp-question { padding: 18px; background: #e8e3eb; border-radius: 2px 24px 2px 2px; }
.wapp-question h3 { color: var(--wapp-orchid); }
.wapp-fixture-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(190px, 5fr); gap: 20px; align-items: center; }
.wapp-fixture-intro > p { padding: 20px; color: var(--wapp-muted); border-left: 2px solid var(--wapp-lilac); }
.wapp-score-board { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px; }
.wapp-result-ledger, .wapp-calendar-grid, .wapp-data-ledger { margin: 0; padding: 0; list-style: none; }
.wapp-result-line { display: grid; grid-template-columns: 55px 1fr auto; gap: 3px 10px; align-items: center; padding: 12px 14px; background: var(--wapp-dark); color: white; border-bottom: 1px solid #514a59; }
.wapp-result-line .wapp-league { grid-column: 1; color: var(--wapp-lime); font-size: .82rem; }
.wapp-result-line time { grid-column: 2 / 4; color: #d2cbd8; font-size: .76rem; }
.wapp-result-line .wapp-teams { grid-column: 1 / 3; font-weight: 700; }
.wapp-result-line .wapp-score { grid-column: 3; grid-row: 2; color: var(--wapp-lime); }
.wapp-result-line .wapp-status { grid-column: 2; color: #d2cbd8; font-size: .78rem; }
.wapp-analysis-band { max-width: 890px; margin-left: auto; }
.wapp-schedule-intro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(180px, 4fr); gap: 18px; margin-bottom: 15px; align-items: stretch; }
.wapp-schedule-intro > p { display: grid; align-content: center; padding: 18px; color: white; background: var(--wapp-orchid); }
.wapp-calendar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.wapp-event-line { display: grid; grid-template-columns: 55px minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 12px; border-bottom: 1px solid var(--wapp-rule); }
.wapp-league { color: var(--wapp-orchid); font-weight: 700; }
.wapp-event-line time { color: var(--wapp-muted); font-size: .75rem; }
.wapp-teams { grid-column: 1 / 3; font-weight: 600; }
.wapp-teams b { margin-inline: 4px; color: var(--wapp-orchid); }
.wapp-score { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--wapp-orchid); }
.wapp-status { grid-column: 2; color: var(--wapp-muted); font-size: .78rem; }
.wapp-voice-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wapp-editorial-voice { padding: 18px; background: var(--wapp-lime); }
.wapp-editorial-voice:nth-child(2) { transform: translateY(16px); background: #ded1e3; }
.wapp-editorial-voice p { margin: 0; }
.wapp-subpage-intro { max-width: 940px; padding: 24px 0 34px; border-bottom: 4px solid var(--wapp-dark); }
.wapp-subpage-intro h1 { margin: 4px 0 14px; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; }
.wapp-eyebrow { color: var(--wapp-orchid); font-size: .86rem; font-weight: 800; letter-spacing: .07em; }
.wapp-subpage-intro p { margin: 0; }
.wapp-about-essay { display: grid; grid-template-columns: minmax(0, 3fr) minmax(130px, 1fr); gap: 34px; margin-top: 32px; }
.wapp-about-essay article { max-width: 780px; }
.wapp-about-essay h2 { color: var(--wapp-orchid); font-size: 1.25rem; }
.wapp-about-stamps { display: flex; flex-wrap: wrap; align-content: center; gap: 9px; }
.wapp-about-image { width: 50px; height: 50px; object-fit: contain; }
.wapp-full-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 26px; }
.wapp-article-full { padding: 22px; background: var(--wapp-card); border-bottom: 3px solid var(--wapp-lilac); }
.wapp-data-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.wapp-data-ledger { border-top: 3px solid var(--wapp-orchid); }
.wapp-data-row { display: grid; grid-template-columns: 70px minmax(190px, 1.2fr) minmax(130px, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--wapp-rule); }
.wapp-chinese-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; margin-top: 30px; }
.wapp-chinese-side { margin-top: 30px; }
.wapp-mobile-readings { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-top: 34px; }
.wapp-mobile-frame:last-child { margin-top: 25px; border-left: 7px solid var(--wapp-orchid); }
.b35-footer { margin-top: 30px; padding-top: 27px; padding-bottom: 38px; border-top: 2px solid var(--wapp-dark); color: var(--wapp-muted); }
.b35-footer a { margin-right: 16px; color: var(--wapp-orchid); }
@media (max-width: 800px) {
  .wapp-opening { grid-template-columns: 1fr; }
  .wapp-image-orbit { justify-self: start; }
  .wapp-about-shelf, .wapp-standing-map, .wapp-fixture-intro, .wapp-score-board,
  .wapp-schedule-intro, .wapp-about-essay, .wapp-data-notes, .wapp-chinese-layout,
  .wapp-mobile-readings { grid-template-columns: 1fr; }
  .wapp-news-stack, .wapp-question-matrix, .wapp-calendar-grid, .wapp-voice-columns,
  .wapp-full-news { grid-template-columns: 1fr; }
  .wapp-editorial-voice:nth-child(2), .wapp-mobile-frame:last-child, .wapp-chinese-side { transform: none; margin-top: 0; }
  .wapp-data-row { grid-template-columns: 64px 1fr auto; gap: 4px 8px; }
  .wapp-data-row time { grid-column: 2 / 4; }
  .wapp-data-row .wapp-teams { grid-column: 1 / 3; }
  .wapp-data-row .wapp-score { grid-column: 3; grid-row: 2; }
}