/* ==========================================================================
   matchups.css — /matchups/ "Two clubs. Every meeting on record."
   --------------------------------------------------------------------------
   House law (README -> Design System):
     * hi-tokens.css loads first and is the law. The :root block below is the
       same per-page palette every research-desk route carries (/matchups/,
       /trades/, /streaks/) so this page reads identically to its siblings.
     * Newsreader is used UPRIGHT ONLY. Every serif rule states
       font-style:normal on purpose — there are no italics on this site.
     * GOLD IS RETIRED as an accent. --receipt exists so hi-receipt.css can
       paint the one gold thing left in the house: the ◷ glyph. Nothing here
       uses it for anything else, and --gold* resolve to blue so a shared
       module cannot reintroduce it.
     * mint / coral are SEMANTIC only. On this page mint means "the left club
       won this game / this season's series" and coral means "the right club
       did". Those are the two sides of a result, which is the one place a
       two-hue split is a fact rather than a decoration. Nothing is graded.
     * FRANCHISE TINTS are the documented exception to the palette. They are
       injected as --tint-a / --tint-b inline by matchups.js and are used ONLY
       as low-alpha wash behind the band and as the crest chip ground — never
       as text colour, because a club colour has no contrast guarantee.
     * No count-up anywhere. Every figure is written once, final, and then
       rewritten in place when a control changes.
     * prefers-reduced-motion kills every transition at the bottom of the file.
   ========================================================================== */

:root{
  --field:#f5efe4; --card:#fffaf1; --border:#d7cbb7; --hairline:#e4dac7;
  --ink:#0d1f3c; --muted:#5b6c83; --blue:#1f5fbf; --coral:#b8483a;
  --hero-a:#071b36; --hero-b:#155fae;
  /* Navy-band ink. The band is navy in BOTH themes, so text on it is measured
     against the LIGHT end of the gradient (#155fae), where the page blue
     scores 1.05:1 and cannot be used. #a9e4ff scores 6.9:1 there. */
  --receipt:#c99b3d; --hero-ink:#a9e4ff; --navy-ink:#8ab8f2;
  --mint:#1d6650; --mint-soft:#e0f0ea; --mint-line:#a9d3c4;
  --gold:var(--blue); --gold-soft:#e3ecfa; --gold-ink:var(--blue); --gold-line:#a9c4ea;
  --blue-soft:#e3ecfa;
  --coral-soft:#f7e3de; --coral-line:#e2ada1;
  --shadow:0 18px 50px rgba(13,31,60,.10);
  --track:#ece4d3; --hover:#fdf6e6; --dotgrid:#c7d7eb; --crest-bg:#fff;
  --serif:'Newsreader', Georgia, serif;
  --sans:'Source Sans 3', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --tint-a:#1f5fbf; --tint-b:#1f5fbf;
}
:root[data-theme="dark"]{
  --field:#0a1220; --card:#101c31; --border:rgba(157,184,221,.18); --hairline:rgba(157,184,221,.10);
  --ink:#eef4fc; --muted:#9db2ce; --blue:#5c9bee; --coral:#e79684;
  --hero-a:#071b36; --hero-b:#123f77;
  --receipt:#e0bd6e; --hero-ink:#a9e4ff; --navy-ink:#a9c9f2;
  --mint:#7ad0b1; --mint-soft:rgba(122,208,177,.14); --mint-line:rgba(122,208,177,.42);
  --gold:var(--blue); --gold-soft:rgba(92,155,238,.14); --gold-ink:var(--blue); --gold-line:rgba(92,155,238,.42);
  --blue-soft:rgba(92,155,238,.14);
  --coral-soft:rgba(231,150,132,.14); --coral-line:rgba(231,150,132,.42);
  --shadow:0 24px 60px rgba(2,8,20,.55);
  --track:#1a2c48; --hover:rgba(157,184,221,.06); --dotgrid:#13233c; --crest-bg:#eef4fc;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--field)}
body{background:var(--field);color:var(--ink);font-family:var(--sans);
  background-image:radial-gradient(var(--dotgrid) 1px, transparent 1px);
  background-size:23px 23px;background-attachment:fixed;
  transition:background .3s,color .3s}
:root[data-theme="dark"] body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 1000px 540px at 50% -15%, rgba(31,95,191,.2), transparent 62%)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-style:normal;font-weight:700;line-height:1.12}

/* ============================== MASTHEAD ============================== */
.masthead{background:#0d1f3c;color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid #1f5fbf}
.masthead .inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:30px;padding:0 28px;height:58px}
.wordmark{display:flex;align-items:baseline;gap:10px}
.wordmark .hi{font-weight:900;letter-spacing:.14em;font-size:.82rem;text-transform:uppercase}
.wordmark .section{font-family:var(--serif);font-style:normal;font-weight:500;font-size:1.02rem;color:#9db8dd}
.mnav{display:flex;gap:22px;margin-left:auto;align-items:center}
.mnav a{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#9db2ce;padding:20px 0;border-bottom:3px solid transparent;margin-bottom:-3px}
.mnav a:hover{color:#fff}
.theme-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(157,184,221,.35);background:transparent;color:#c9d8ee;cursor:pointer;font-size:.9rem;display:grid;place-items:center;transition:background .2s}
.theme-btn:hover{background:rgba(157,184,221,.15)}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}

/* ========================== RESEARCH DESK ============================= */
.rdesk{background:var(--card);border-bottom:1px solid var(--border)}
/* One scrollable row, like every other desk page: a wrapping chip rail pushed
   the hero below the fold on narrow desktops. */
.rdesk .inner{max-width:1180px;margin:0 auto;padding:8px 28px;display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rdesk .inner::-webkit-scrollbar{display:none}
.rdesk a{white-space:nowrap;flex:0 0 auto}
.rdesk .lbl{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-right:4px;white-space:nowrap}
.rdesk .lbl::before{content:"▪ ";color:var(--blue)}
.rdesk a{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:5px 10px;border:1px solid transparent;border-radius:999px;transition:color .15s,border-color .15s,background .15s}
.rdesk a:hover{color:var(--blue);border-color:var(--gold-line);background:var(--blue-soft)}
.rdesk a.on{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px 10px}

/* =============================== HERO ================================= */
.mu-hero{margin:30px 0 0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(140deg,var(--hero-a),var(--hero-b))}
.mu-hero .pad{padding:38px 34px 32px}
.mu-hero .eyeb{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-ink)}
.mu-hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3rem);margin:14px 0 0;letter-spacing:-.015em}
.mu-hero h1 .serif{color:var(--hero-ink);font-weight:400}

/* ---- the two crest pickers + the swap key ---- */
.pickrow{display:flex;align-items:stretch;gap:12px;margin:26px 0 0;flex-wrap:wrap}
.crestpick{flex:1 1 250px;min-width:0;display:flex;align-items:center;gap:14px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.07);border:1px solid rgba(169,228,255,.3);border-radius:14px;padding:12px 16px;
  color:#fff;font-family:var(--sans);transition:background .18s,border-color .18s}
.crestpick:hover,.crestpick:focus-visible{background:rgba(255,255,255,.14);border-color:var(--hero-ink);outline:none}
.crestpick .cw{width:46px;height:46px;flex:0 0 auto;border-radius:10px;background:var(--crest-bg);
  display:grid;place-items:center;overflow:hidden}
.crestpick .cw img{width:36px;height:36px;object-fit:contain}
.crestpick .ct{display:flex;flex-direction:column;min-width:0}
.crestpick .cc{font-family:var(--mono);font-size:1.05rem;font-weight:700;letter-spacing:.08em;color:#fff}
.crestpick .cn{font-size:.72rem;color:var(--hero-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swapbtn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(169,228,255,.3);border-radius:14px;padding:0 15px;color:#fff;
  transition:background .18s,border-color .18s}
.swapbtn:hover,.swapbtn:focus-visible{background:rgba(255,255,255,.16);border-color:var(--hero-ink);outline:none}
.swapbtn .sg{font-size:1.15rem;line-height:1}
.swapbtn .sk{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;color:var(--hero-ink);
  border:1px solid rgba(169,228,255,.45);border-radius:4px;padding:0 4px}

/* ---- the club menu (opens under a picker) ---- */
.cmenu{position:absolute;z-index:60;background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:340px}
.cmenu button{display:flex;align-items:center;justify-content:center;gap:0;padding:8px 4px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:9px;color:var(--ink);
  font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.05em;transition:background .15s,border-color .15s}
.cmenu button:hover,.cmenu button:focus-visible{background:var(--blue-soft);border-color:var(--gold-line);outline:none}
.cmenu button[disabled]{opacity:.34;cursor:not-allowed}
.cmenu button img{width:22px;height:22px;object-fit:contain}
.cmenu .mrow{grid-column:1/-1;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:4px 6px 6px}

/* ---- the tinted split band: the loud figure ---- */
.band{position:relative;margin:22px 0 0;border-radius:16px;overflow:hidden;
  background:rgba(0,0,0,.26);border:1px solid rgba(169,228,255,.22);min-height:150px}
.bandtint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--tint-a) 62%, transparent) 0%,
    color-mix(in srgb, var(--tint-a) 20%, transparent) 34%,
    transparent 50%,
    color-mix(in srgb, var(--tint-b) 20%, transparent) 66%,
    color-mix(in srgb, var(--tint-b) 62%, transparent) 100%);
  transition:opacity .25s}
.band[data-state="game"] .bandtint{opacity:.42}
.bandinner{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:26px 24px}
.bside{display:flex;flex-direction:column;align-items:center;gap:1px}
.bside .bcode{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;color:var(--hero-ink)}
.bside .bwins{font-family:var(--mono);font-size:clamp(2rem,5vw,3.1rem);font-weight:700;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.bside .blbl{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hero-ink)}
.bmid{text-align:center;padding:0 10px;min-width:0}
.brec{font-family:var(--mono);font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:700;color:#fff;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.breclbl{font-size:.7rem;color:var(--hero-ink);margin-top:6px;line-height:1.4}
.bgoals{font-family:var(--mono);font-size:.6rem;color:var(--hero-ink);margin-top:7px;opacity:.9}
.bandgame{position:relative;border-top:1px solid rgba(169,228,255,.2);padding:9px 22px;min-height:34px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.05em;color:var(--hero-ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bandgame b{color:#fff;font-weight:700}

/* ---- controls ---- */
.ctrls{display:flex;align-items:center;gap:16px;margin:20px 0 0;flex-wrap:wrap}
.seg{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(169,228,255,.28);border-radius:999px;padding:3px}
.seg button{cursor:pointer;background:transparent;border:0;border-radius:999px;padding:7px 15px;color:var(--hero-ink);
  font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .15s,color .15s}
.seg button:hover{color:#fff}
.seg button.on{background:#fff;color:#0d1f3c}
.seg button:focus-visible{outline:2px solid var(--hero-ink);outline-offset:2px}
.slid{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.slid label{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-ink)}
.slid label b{color:#fff}
.slid input[type=range]{width:160px;accent-color:#fff;cursor:pointer}
.slid input[type=range]:focus-visible{outline:2px solid var(--hero-ink);outline-offset:3px}
.slidout{font-family:var(--mono);font-size:.63rem;color:#fff;font-variant-numeric:tabular-nums}

.mu-hero .stamp{margin:20px 0 0;font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;color:var(--hero-ink)}
.mu-hero .stamp b{color:#fff}

/* ============================= SECTIONS =============================== */
.sec{margin:54px 0 0}
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:9px}
.sec-head .idx{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--blue);letter-spacing:.1em}
.sec-head h2{font-size:1.5rem}
.sec-lede{max-width:84ch;margin:14px 0 0;color:var(--muted);font-size:.87rem;line-height:1.66;font-weight:500}
.sec-lede b{color:var(--ink);font-weight:700}
.stamp{margin:14px 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--muted);line-height:1.7}
/* the earned handoff: one line, one destination, only where the page has
   already done the work that makes it useful. */
.handoff{margin:16px 0 0}
.handoff a{display:inline-block;font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);padding:8px 14px;border:1px solid var(--border);border-radius:999px;
  transition:border-color .15s,background .15s}
.handoff a:hover{border-color:var(--blue);background:var(--blue-soft)}

/* ---- meeting strip ---- */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin:20px 0 0}
.mtg{text-align:left;cursor:default;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--border);
  border-radius:12px;padding:12px 14px;transition:border-color .15s,background .15s,transform .15s}
.mtg:hover,.mtg:focus-visible{background:var(--hover);transform:translateY(-2px);outline:none;border-color:var(--blue)}
.mtg.w{border-left-color:var(--mint)}
.mtg.l{border-left-color:var(--coral)}
.mtg.t{border-left-color:var(--muted)}
.mtg .d{font-family:var(--mono);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mtg .s{font-family:var(--mono);font-size:1.25rem;font-weight:700;margin-top:5px;color:var(--ink);font-variant-numeric:tabular-nums}
.mtg .m{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.mtg .m .end{color:var(--blue);font-weight:700}
.mtg.w .s{color:var(--mint)}
.mtg.l .s{color:var(--coral)}

/* ---- streak box ---- */
.streakbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:20px 0 0}
.stk{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.stk .k{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stk .v{font-family:var(--serif);font-style:normal;font-size:1.02rem;line-height:1.5;margin-top:9px;color:var(--ink)}
.stk .v b{font-weight:700}
.stk .v .num{font-family:var(--mono);font-weight:700;color:var(--blue)}
.stk .f{font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;color:var(--muted);margin-top:11px;line-height:1.7;
  border-top:1px dashed var(--hairline);padding-top:9px}

/* ---- season strip ---- */
.seasons{display:flex;align-items:flex-end;gap:3px;margin:22px 0 0;overflow-x:auto;padding-bottom:8px;min-height:126px}
.scol{flex:0 0 auto;width:15px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;cursor:default}
.scol .bar{width:100%;border-radius:3px 3px 0 0;background:var(--track);position:relative;overflow:hidden;min-height:6px}
.scol .fill{position:absolute;left:0;right:0;bottom:0;background:var(--mint)}
.scol .yr{font-family:var(--mono);font-size:.46rem;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);height:32px}
.scol:hover .bar{outline:2px solid var(--blue);outline-offset:1px}
.seasonlegend{font-family:var(--mono);font-size:.6rem;color:var(--muted);margin-top:6px;line-height:1.7}
.seasonlegend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:-1px;margin-right:4px}
.seasonlegend .sw.a{background:var(--mint)}
.seasonlegend .sw.b{background:var(--track)}

/* ---- the crossover boards ---- */
.cross{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin:20px 0 0}
.board{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.board h3{font-size:1.05rem;margin:0}
.board .bsub{font-family:var(--mono);font-size:.57rem;letter-spacing:.06em;color:var(--muted);margin-top:7px;line-height:1.7}
.board table{width:100%;border-collapse:collapse;margin-top:14px}
.board th{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  text-align:right;padding:0 0 7px;border-bottom:1px solid var(--border)}
.board th:first-child{text-align:left}
.board td{font-family:var(--mono);font-size:.72rem;padding:8px 0;border-bottom:1px solid var(--hairline);text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.board td:first-child{text-align:left;font-family:var(--sans);font-size:.83rem;font-weight:600}
.board td .pos{font-family:var(--mono);font-size:.55rem;color:var(--muted);letter-spacing:.08em;margin-left:5px}
.board td.pct b{color:var(--ink);font-weight:700}
.board td .base{color:var(--muted);font-size:.62rem}
.board .type{font-size:.62rem;color:var(--muted)}
.board .empty{font-family:var(--serif);font-style:normal;font-size:.95rem;color:var(--muted);line-height:1.6;margin-top:14px}

/* ============================== PROSE ================================= */
.longform{max-width:78ch;margin:58px 0 0}
.longform h2{font-size:1.5rem;border-bottom:2px solid var(--ink);padding-bottom:9px}
.longform p{margin-top:16px;font-size:.94rem;line-height:1.78;color:var(--ink)}
.longform p b{font-weight:700}
.pagefoot{margin:50px 0 0;border:1px dashed var(--border);border-radius:14px;padding:16px 22px;
  font-family:var(--mono);font-size:.62rem;line-height:1.85;color:var(--muted);letter-spacing:.03em}
.pagefoot a{color:var(--blue);border-bottom:1px solid var(--gold-line)}

/* ============================ RESPONSIVE ============================== */
@media(max-width:900px){
  .mnav a{display:none}
  .bandinner{padding:20px 14px}
}
@media(max-width:560px){
  .masthead .inner,.rdesk .inner,.wrap{padding-left:18px;padding-right:18px}
  .mu-hero .pad{padding:28px 20px 24px}
  .pickrow{flex-wrap:nowrap}
  .crestpick{flex:1 1 0;padding:10px 11px;gap:9px}
  .crestpick .cw{width:38px;height:38px}
  .crestpick .cw img{width:29px;height:29px}
  .crestpick .cn{display:none}
  .swapbtn{padding:0 10px}
  .bandinner{grid-template-columns:1fr;gap:14px;text-align:center}
  .bmid{order:-1}
  .bside{flex-direction:row;align-items:baseline;justify-content:center;gap:9px}
  .bside .bwins{font-size:2rem}
  .ctrls{flex-direction:column;align-items:stretch}
  .slid input[type=range]{width:100%}
  .strip{grid-template-columns:1fr 1fr}
  .cmenu{grid-template-columns:repeat(3,minmax(0,1fr));max-width:270px}
  .longform p{font-size:.9rem}
}

/* prefers-reduced-motion: the page is legible without a single transition. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .mtg:hover,.mtg:focus-visible{transform:none}
}