/* matches.css: "Every match, every year" on results.html (assets/matches.js). Loaded after chrome.css. */
.matches{margin-top:clamp(58px,7vw,88px)}
.mx-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:end}
.mx-intro h2{font-size:clamp(34px,4.4vw,54px);line-height:1.02;letter-spacing:-.02em;margin:8px 0 0;color:var(--ox)}
.mx-intro h2:after{display:none}
.mx-intro p{margin:0;color:var(--muted);font-size:16px;line-height:1.6;max-width:560px}
.mx-chips{display:flex;flex-wrap:wrap;gap:14px 26px;margin:30px 0 18px}
.mx-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mx-group>span{flex-basis:100%;font:600 12px/1 "Roboto",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.mx-group button{font:500 14px/1.2 "Roboto",Arial,sans-serif;padding:10px 14px;min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ox);cursor:pointer;transition:border-color .15s,background .15s}
.mx-group button:hover{border-color:var(--gold)}
.mx-group button[aria-pressed=true]{background:var(--ox);border-color:var(--ox);color:#fff}
.mx-group button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mx-board{background:#fff;box-shadow:0 18px 50px rgba(0,33,71,.08);padding:clamp(22px,4vw,44px)}
.mx-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.mx-side{display:flex;flex-direction:column;gap:4px}
.mx-side.mx-c{text-align:right;align-items:flex-end}
.mx-side small{font:600 12px/1.3 "Roboto",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mx-side b{font:600 clamp(56px,8vw,96px)/.9 "Barlow Condensed","Roboto",sans-serif;font-variant-numeric:tabular-nums;color:var(--ox)}
.mx-side.mx-c b{color:var(--cam-ink,#1f7f70)}
.mx-side span{font-size:13px;color:var(--muted)}
.mx-mid{text-align:center;max-width:260px}
.mx-mid strong{display:block;font:400 clamp(22px,2.6vw,30px)/1.15 "Newsreader",Georgia,serif;color:var(--ink)}
.mx-mid span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.mx-strip-wrap{margin:26px 0 6px}
.mx-strip{display:flex;gap:1px;height:46px;align-items:stretch}
.mx-strip i{flex:1 1 0;min-width:1px;border-radius:1px;transition:transform .15s}
.mx-strip i:hover{transform:scaleY(1.18)}
.mx-strip .o,.mx-key .o{background:var(--ox)}
.mx-strip .c,.mx-key .c{background:var(--cam);box-shadow:inset 0 0 0 1px rgba(31,127,112,.45)}
.mx-strip .n,.mx-key .n{background:repeating-linear-gradient(135deg,#e4e1db 0 3px,#f4f2ee 3px 6px)}
.mx-ends{display:flex;justify-content:space-between;font:600 14px/1 "Barlow Condensed","Roboto",sans-serif;color:var(--muted);margin-top:8px;letter-spacing:.04em}
.mx-key{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:12px 0 0;font-size:13px;color:var(--muted)}
.mx-key>span{white-space:nowrap}.mx-key i{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.mx-about{margin:16px 0 0;color:var(--ink);font-size:15px;line-height:1.6;max-width:820px}
.mx-table-wrap{margin-top:22px;border-top:2px solid var(--ox)}
.mx-table{width:100%;border-collapse:collapse;font-size:15px}
.mx-table thead th{text-align:left;font:600 12px/1 "Roboto",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 10px 10px;border-bottom:1px solid var(--line)}
.mx-table tbody th{font:600 22px/1 "Barlow Condensed","Roboto",sans-serif;color:var(--ox);text-align:left;vertical-align:top;padding:14px 10px;width:72px}
.mx-table td{vertical-align:top;padding:13px 10px;border-bottom:1px solid #ecebe8;line-height:1.4}
.mx-table td small{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}
.mx-win{font:600 13px/1 "Roboto",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;display:inline-block;margin-right:10px}
.mx-win.ox{background:var(--ox);color:#fff}
.mx-win.cam{background:var(--cam);color:var(--cam-dark)}
.mx-sc{font:600 20px/1 "Barlow Condensed","Roboto",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);vertical-align:middle}
.mx-more{width:190px}
.mx-more a{display:inline-block;font:600 12px/1 "Roboto",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7D6528;padding:8px 0;min-height:32px}
.mx-more a:after{content:" →"}
.mx-more a:hover{color:var(--ox)}
.mx-more .tbc{margin-top:4px}
.mx-more details{margin-top:4px;font-size:13px;color:var(--muted)}
.mx-more summary{cursor:pointer;color:var(--ox);font-weight:500;min-height:32px;padding-top:6px}
.mx-more details p{margin:6px 0 0;line-height:1.5}
.mx-none th,.mx-none td{color:var(--muted)}
.mx-none th{color:#8a94a0}
.mx-all{margin-top:18px;border:1px solid var(--ox);background:#fff;color:var(--ox);font:600 12px "Roboto",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;cursor:pointer;min-height:44px}
.mx-all:hover{background:var(--ox);color:#fff}
.mx-source{margin:14px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:900px){.mx-intro{grid-template-columns:1fr;gap:14px}}
@media(max-width:640px){
  .mx-head{grid-template-columns:1fr 1fr}.mx-mid{grid-column:1/-1;grid-row:1;max-width:none}
  .mx-strip{height:38px}
  .mx-group{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;max-width:100%}.mx-group>span{position:absolute;left:-9999px}.mx-group button{flex:none}.mx-chips{gap:8px;flex-direction:column}
  .mx-table thead{display:none}
  .mx-table,.mx-table tbody,.mx-table tr{display:block}
  .mx-table tr{display:grid;grid-template-columns:58px 1fr;border-bottom:1px solid #ecebe8;padding:12px 0}
  .mx-table tbody th{padding:2px 8px 0 0;width:auto;grid-row:span 3}
  .mx-table td{border:0;padding:2px 0}
  .mx-more{width:auto}
  .mx-none td{grid-column:2}
}
/* Team links on the latest results cards and under the race replay title (2025 only: the team pages hold one year). */
.latest-race-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px}
.latest-race-links a{font:700 12px/1.3 "Roboto",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);padding-bottom:4px;border-bottom:2px solid var(--gold)}
.latest-race-links a:hover{color:var(--gold-text)}
.rp-racelink{margin:10px 0 0}.rp-racelink[hidden]{display:none}