/* Magazine skin: paper, serif heads, one red. */
      :root {
        --fill-primary-on: light-dark(#f6f0e4, #1a1815);
        --fill-tertiary: light-dark(#ece4d4, #29261f);
        --text-primary: light-dark(#141210, #f3eee4);
        --text-secondary: light-dark(#5c564c, #aaa397);
        --stroke-primary: light-dark(#14121029, #f3eee429);
        --stroke-secondary: light-dark(#14121017, #f3eee417);
        --x-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
        --x-red: light-dark(#c8102e, #ff5c6c);
      }
      .x-mag h1, .x-mag h2, .x-mag h3 { font-family: var(--x-serif); }
      /* Wrapping: prose avoids lone last characters; heads balance and break only at spaces/punctuation. */
      .x-mag p, .x-mag figcaption, .x-mag li, .x-mag .stat__label { text-wrap: pretty; }
      .x-mag h1, .x-mag h2, .x-mag h3, .x-mag h4, .x-mag .x-pull p, .x-mag .cards .quote { text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; }

      /* Section heads: subtitle sits under the title, left-aligned */
      .x-mag .head { grid-template-columns: minmax(0, 1fr); }
      .x-mag .head__sub { justify-self: start; text-align: left; max-width: 60ch; }

      /* Today's numbers: label sits right under its figure; equal padding either side of each divider */
      .x-mag .stat { grid-template-rows: auto 1fr; align-content: start; }
      @media (min-width: 761px) {
        .x-mag .stats { margin-left: -24px; }
        .x-mag .stat:first-child { padding-left: 24px; }
      }

      /* Masthead */
      .x-mast { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 0 4px; border-bottom: 3px double var(--text-primary); }
      .x-mast__kicker { font: var(--type-tag); letter-spacing: 0.24em; color: var(--x-red); }
      .x-mast__title { font: 900 clamp(56px, 16vw, 112px)/1 var(--x-serif); letter-spacing: 0.04em; margin: 0; }
      .x-mast__line { font: var(--type-small); color: var(--text-secondary); padding-bottom: 14px; }
      .x-mast__line b { color: var(--x-red); font-weight: var(--weight-medium); }

      /* Score ticker */
      .x-ticker { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; border-bottom: 1px solid var(--stroke-primary); }
      @media (max-width: 760px) {
        .x-ticker { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
      }
      .x-ticker::-webkit-scrollbar { display: none; }
      .x-ticker a { flex: none; display: flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 8px 16px; font: var(--type-small); font-variant-numeric: tabular-nums; text-decoration: none; color: var(--text-secondary); border-left: 1px solid var(--stroke-secondary); scroll-snap-align: start; white-space: nowrap; }
      .x-ticker a:first-child { border-left: 0; padding-left: 0; }
      .x-ticker b { color: var(--text-primary); font-weight: var(--weight-bold); }
      .x-ticker a:hover b { color: var(--x-red); }

      /* Red kicker on section heads */
      .x-kick { color: var(--x-red) !important; letter-spacing: 0.12em; }

      /* Game card */
      .x-games { display: grid; gap: 28px; }
      .x-game { position: relative; display: grid; gap: 20px; padding: 0 0 24px; border-radius: var(--r-l); background: var(--fill-tertiary); overflow: hidden; scroll-margin-top: 72px; }
      .x-game__bar { height: 8px; background: linear-gradient(to right, var(--a) 0 50%, var(--b) 50% 100%); }
      .x-game__body { display: grid; gap: 20px; padding: 0 clamp(16px, 3vw, 28px); }
      .x-game__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: var(--type-small); color: var(--text-secondary); }
      .x-game__no { font: var(--type-tag); letter-spacing: 0.16em; color: var(--x-red); }
      .x-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 2px; column-gap: 12px; padding: 4px 0 16px; border-bottom: 1px solid var(--stroke-primary); }
      .x-team { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; row-gap: 2px; justify-items: start; }
      .x-score__final { grid-column: 2; grid-row: 2; align-self: center; padding: 3px 10px; border: 1px solid var(--stroke-primary); border-radius: var(--r-pill); font: var(--type-tag); letter-spacing: 0.14em; color: var(--text-secondary); }
      .x-team:last-child { justify-items: end; text-align: right; }
      .x-team__name { display: inline-flex; align-items: center; gap: 8px; font: var(--type-label); }
      .x-team__name::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
      .x-team:last-child .x-team__name { flex-direction: row-reverse; }
      .x-team__pts { font: 600 clamp(44px, 12vw, 72px)/1 var(--x-serif); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
      .x-team.is-win .x-team__pts { font-weight: 900; color: var(--text-primary); }
      .x-game h3 { font-size: clamp(22px, 5.6vw, 30px); font-weight: 900; line-height: 1.3; }
      .x-game__img { margin: 0; }
      .x-game__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--r-m); background: var(--fill-primary-on); }
      .x-game__img figcaption { padding: 8px 2px 0; font: var(--type-caption); line-height: 1.6; color: var(--text-secondary); }

      /* Cover: 16:9 photo shown whole, copy below */
      .x-hero { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; }
      .x-hero::after { display: none; }
      .x-hero .hero__img { position: static; display: block; height: auto; aspect-ratio: 16 / 9; object-fit: contain; z-index: auto; }
      .x-hero__media { position: relative; }
      .x-hero .hero__credit { position: absolute; top: auto; right: 12px; bottom: 12px; left: auto; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: var(--r-s); background: color-mix(in srgb, var(--hero-surface) 55%, transparent); color: var(--hero-text); }
      .x-hero .hero__copy { max-width: none; padding-top: clamp(16px, 2.4vw, 24px); }
      .x-hero h1 { max-width: 900px; font-size: clamp(30px, 4vw, 48px); }
      .x-hero .hero__sub { max-width: 640px; }
      .x-nw { white-space: nowrap; }
      @media (max-width: 760px) { .x-br { display: none; } }

      /* Quarter bars (pure CSS) */
      .x-game .chart__cap { font: var(--type-label); color: var(--text-primary); }
      .x-game .chart__cap small { display: block; margin-top: 2px; font: var(--type-caption); color: var(--text-secondary); }
      .x-q__legend { display: flex; gap: 16px; margin: 0 0 8px; padding: 0; list-style: none; font: var(--type-caption); color: var(--text-secondary); }
      .x-q__legend li { display: inline-flex; align-items: center; gap: 6px; }
      .x-q__legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
      .x-q__legend li + li::before { background: var(--b); }
      .x-q__plot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .x-q__grp { display: grid; gap: 6px; justify-items: center; }
      .x-q__bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 160px; border-bottom: 1px solid var(--stroke-primary); }
      .x-q__bars i { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: min(28px, 40%); height: 100%; font-style: normal; }
      .x-q__bars i::after { content: ""; display: block; width: 100%; height: calc(var(--v) / 50 * (100% - 20px)); border-radius: 3px 3px 0 0; background: var(--a); }
      .x-q__bars i + i::after { background: var(--b); }
      .x-q__bars b { padding-bottom: 3px; font: var(--type-caption); font-variant-numeric: tabular-nums; color: var(--text-primary); }
      .x-q__lbl { font: var(--type-caption); color: var(--text-secondary); }
      .x-game__text p { font-size: var(--size-prose); line-height: 1.75; }
      .x-game__text p + p { margin-top: 10px; }
      .x-turn { display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; border-left: 3px solid var(--x-red); background: var(--fill-primary-on); border-radius: 0 var(--r-s) var(--r-s) 0; font: var(--type-body); line-height: 1.6; }
      .x-turn__tag { flex: none; padding: 2px 8px; border-radius: 4px; background: var(--x-red); color: light-dark(#fff, #1a1815); font: var(--type-tag); }
      .x-game .chart { background: var(--fill-primary-on); margin: 0; }
      .x-sub { font: var(--type-tag); letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 10px; }

      /* Stat comparison bars */
      .x-vs { display: grid; gap: 14px; }
      .x-vs__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 10px; align-items: center; font-variant-numeric: tabular-nums; }
      .x-vs__l, .x-vs__r { font: var(--type-body-strong); line-height: 20px; color: var(--text-primary); }
      .x-vs__r { text-align: right; }
      .x-vs__k { font: var(--type-caption); line-height: 20px; color: var(--text-secondary); text-align: center; }
      .x-vs__bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 8px; }
      .x-vs__bar i { display: block; border-radius: 2px; background: var(--a); min-width: 4px; }
      .x-vs__bar i + i { background: var(--b); }

      /* Top scorers */
      .x-scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .x-scorers ol { margin: 0; padding: 0; list-style: none; }
      .x-scorers li { padding: 8px 0; border-bottom: 1px solid var(--stroke-secondary); font: var(--type-small); line-height: 1.5; }
      .x-scorers li:last-child { border-bottom: 0; }
      .x-scorers li b { font-weight: var(--weight-bold); }
      .x-scorers li small { display: block; color: var(--text-secondary); }
      .x-scorers h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: var(--type-label); }
      .x-scorers h4::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }

      @media (min-width: 900px) {
        .x-game__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
        .x-game__head, .x-game__title { grid-column: 1 / -1; }
        .x-game__story, .x-game__data { display: grid; gap: 20px; }
      }
      @media (max-width: 899px) { .x-game__story, .x-game__data { display: grid; gap: 20px; } }
      @media (max-width: 420px) { .x-scorers { grid-template-columns: 1fr; } }

      /* Pull quote */
      .x-pull { margin: 0; padding: clamp(28px, 5vw, 48px) 0; border-top: 3px double var(--text-primary); border-bottom: 3px double var(--text-primary); text-align: center; }
      .x-pull p { font: 900 clamp(24px, 5.4vw, 40px)/1.45 var(--x-serif); max-width: 24em; margin: 0 auto; text-wrap: balance; }
      .x-pull p::before { content: "“"; display: block; font-size: 1.8em; line-height: 0.6; color: var(--x-red); margin-bottom: 8px; }
      .x-pull footer { margin-top: 14px; font: var(--type-small); color: var(--text-secondary); }

      /* Awards: small red label, bold winner, grey note; equal heights */
      .x-awards { grid-auto-rows: 1fr; }
      .x-awards > div { display: flex; flex-direction: column; gap: 6px; }
      .x-award__tag { font: var(--type-tag); letter-spacing: 0.12em; color: var(--x-red); }
      .x-awards h3 { margin: 0; font-size: clamp(22px, 2.4vw, 26px); font-weight: 900; line-height: 1.3; }
      .x-award__note { font: var(--type-small); color: var(--text-secondary); }

      /* Tomorrow: narrow time column, tag inline, highlight flush with the table edges */
      .x-sched table th:first-child { width: 80px; }
      .x-sched tr > :first-child { padding-left: 12px; }
      .x-sched tr > :last-child { padding-right: 12px; }
      .x-sched tr.is-highlight > * { box-shadow: none; }
      .x-sched .dot { display: inline-flex; margin: 0 0 0 8px; vertical-align: 1px; }
      @media (max-width: 599px) {
        .x-sched tbody tr, .x-sched tbody tr.is-highlight { margin-inline: 0; padding-inline: 12px; }
        .x-sched tbody tr > * { padding-inline: 0; }
      }

      /* Footer: everything left-aligned and stacked */
      .x-mag .foot { display: grid; justify-items: start; gap: 8px; }
    
      /* Compact cards (days with more than 4 games) */
      .x-more { margin: 32px 0 12px; }
      .x-compacts { display: grid; gap: 20px; }
      .x-game--compact { gap: 16px; padding-bottom: 20px; }
      .x-game--compact .x-game__body { gap: 14px; }
      .x-game--compact .x-score { padding-bottom: 12px; }
      .x-game--compact .x-team__pts { font-size: clamp(36px, 9vw, 48px); }
      .x-game--compact .x-scorers li { padding: 2px 0 0; }
      @media (min-width: 900px) {
        .x-compacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .x-game--compact .x-game__body { grid-template-columns: minmax(0, 1fr); }
      }
      .x-qt { width: 100%; border-collapse: collapse; font: var(--type-small); font-variant-numeric: tabular-nums; }
      .x-qt th, .x-qt td { padding: 5px 0; text-align: center; border-bottom: 1px solid var(--stroke-secondary); background: none; }
      .x-qt thead th { font: var(--type-caption); color: var(--text-secondary); }
      .x-qt tbody th { text-align: left; font-weight: var(--weight-medium); white-space: nowrap; }
      .x-qt tbody th::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--c); vertical-align: 1px; }
      .x-qt tbody tr:last-child > * { border-bottom: 0; }
      .x-qt td:last-child b { font-weight: var(--weight-bold); }
      .x-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

      /* Archive list */
      .x-arc { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
      .x-arc a { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; padding: 12px; border-radius: var(--r-l); background: var(--fill-tertiary); color: inherit; text-decoration: none; }
      .x-arc img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-m); background: var(--fill-primary-on); }
      .x-arc__no { font: var(--type-tag); letter-spacing: 0.14em; color: var(--x-red); }
      .x-arc h2 { margin: 6px 0; font: 900 clamp(19px, 2.4vw, 24px)/1.35 var(--x-serif); text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; }
      .x-arc a:hover h2 { color: var(--x-red); }
      .x-arc__scores { font: var(--type-small); color: var(--text-secondary); text-wrap: pretty; }
      @media (max-width: 560px) { .x-arc a { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

      /* ---------- Mobile pass (phones are the main audience) ---------- */
      /* Ticker: one text run per game so "124–90" never splits; fade marks the scroll edge */
      .x-ticker a > span { white-space: nowrap; }
      @media (max-width: 760px) {
        .x-ticker { padding-inline-end: 48px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
      }
      /* Footer source line: segments never break inside; link sits on the text baseline */
      .x-src { display: flex; flex-wrap: wrap; column-gap: 0.4em; }
      .x-src > span:not(:last-child)::after { content: " ·"; }
      .x-mast__line.x-src { justify-content: center; column-gap: 0.5em; }
      .x-mag .foot .link { display: inline-block; min-width: 0; min-height: 0; margin: -12px 0; padding: 12px 0; vertical-align: baseline; }
      @media (max-width: 760px) {
        /* Today's numbers: fixed figure column, label centred on the figure */
        .x-mag .stats { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); }
        .x-mag .stat { grid-template-rows: none; align-items: center; }
      }
      @media (max-width: 600px) {
        .x-mag {
          --gutter: 10px;
          --size-body: 16px;
          --type-body: var(--weight-regular) 16px/var(--lh) var(--sans);
          --type-body-strong: var(--weight-medium) 16px/var(--lh) var(--sans);
        }
        /* Cover caption: small text under the photo instead of a pill over it */
        .x-hero .hero__credit { position: static; max-width: none; margin: 0; padding: 10px 20px 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: var(--type-caption); line-height: 1.5; color: var(--hero-text-muted); text-wrap: pretty; }
        .x-hero .hero__copy { padding: 14px 20px 24px; }
        /* Game cards: wider text column */
        .x-game__body { padding-inline: 14px; }
        .x-game { gap: 16px; }
        /* Turning point: tag on its own line, text full width */
        .x-turn { display: block; padding: 12px; }
        .x-turn__tag { display: inline-block; margin-bottom: 6px; }
        .x-turn > span:last-child { display: block; }
        /* Schedule: time + matchup on one line, no repeated column labels */
        .x-sched tbody tr, .x-sched tbody tr.is-highlight { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding-block: 12px; }
        .x-sched tbody tr > th { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; width: auto; }
        .x-sched { margin-inline: 0; max-width: 100%; }
        .x-sched tbody td[data-label] { display: block; }
        .x-sched tbody td[data-label]::before { content: none; }
        .x-sched .dot { margin-left: 6px; vertical-align: 0; }
        /* Awards: pairs of short winners share a row, long ones take the full width */
        .x-awards, .x-mag .cards.x-awards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
        .x-mag figcaption { text-wrap: balance; }
        .x-awards > div { padding: 14px 16px; }
        .x-awards > .is-wide { grid-column: 1 / -1; }
        .x-awards h3 { font-size: 20px; }
      }
      .x-game--compact .x-scorers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }