html[data-view="articles"],html[data-view="article"] { color-scheme:light; }
.articles-index,.article-page { padding-bottom:70px; }
.articles-intro { max-width:760px; padding:0; }
.articles-intro h1 { margin:0 0 10px; color:#071d2e; font:800 32px/1.16 Arial,sans-serif; letter-spacing:-.035em; }
.articles-intro p:last-child { margin:0; color:#52677b; font:400 15px/1.55 Arial,sans-serif; }
.articles-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.article-feature,.article-placeholder { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #dce3eb; border-radius:var(--card-radius); background:#fff; color:#0d1e36; text-decoration:none; }
.article-feature-image,.article-placeholder-art { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-feature-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:26px; }
.article-feature-author { display:inline-flex; align-items:center; gap:9px; margin-top:14px; color:#52677b; font-size:13px; font-weight:700; }
.article-placeholder-art { display:flex; align-items:flex-end; padding:20px; background:linear-gradient(135deg,#0c2b42,#17616b); color:#b4d9d9; }
.article-placeholder:nth-child(3) .article-placeholder-art { background:linear-gradient(135deg,#17324a,#355271); }
.article-placeholder-art span { font:800 56px/.8 Arial,sans-serif; letter-spacing:-.08em; opacity:.55; }
.article-placeholder-label { margin-top:auto; color:#52677b; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.article-sport { color:#52677b; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.articles-list h2 { margin:18px 0 16px; font:800 clamp(23px,2vw,29px)/1.2 Arial,sans-serif; letter-spacing:-.025em; }
.articles-list p { margin:0 0 28px; color:#44576a; font-size:15px; line-height:1.65; }
.article-feature-link { margin-top:auto; color:#086b72; font-weight:800; }
.article-feature:hover .article-feature-link { text-decoration:underline; text-underline-offset:4px; }
.article-feature:focus-visible { outline:3px solid #087f83; outline-offset:4px; }
.article-breadcrumb { display:flex; align-items:center; gap:10px; margin:32px 0 34px; color:#5b7082; font-size:13px; }
.article-breadcrumb a { color:#075f68; font-weight:700; }
.article-heading { max-width:940px; margin:0 0 42px; }
.article-heading h1 { margin:12px 0 16px; color:#0d1e36; font:800 clamp(38px,4.7vw,62px)/1.09 Arial,sans-serif; letter-spacing:-.035em; }
.article-heading p { margin:0; color:#52677b; font-size:15px; }
.article-heading p a { color:#075f68; font-weight:800; }
.article-byline { display:flex; align-items:center; gap:7px; }
.article-avatar { display:inline-grid; place-items:center; flex:none; width:36px; height:36px; overflow:hidden; border:2px solid #b5dfc5; border-radius:50%; background:#d7eee9; color:#0d1e36; font:800 11px Arial,sans-serif; }
.article-avatar img { width:100%; height:100%; object-fit:cover; }
.article-share { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:20px; }
.article-share>span:first-child { margin-right:4px; color:#52677b; font-size:13px; font-weight:700; }
.article-share a,.article-share button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:5px 11px; border:1px solid #c7d6e2; border-radius:5px; background:#f4f8fb; color:#173d57; font:700 13px Arial,sans-serif; text-decoration:none; cursor:pointer; }
.article-share a:hover,.article-share button:hover { background:#dcecf5; }
.article-share a:focus-visible,.article-share button:focus-visible { outline:3px solid #087f83; outline-offset:2px; }
.article-share .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.article-layout { max-width:700px; }
.article-body { min-width:0; color:#23384c; font-size:17px; line-height:1.76; }
.article-body p { margin:0 0 24px; }
.article-body .article-lede { color:#0d1e36; font-size:20px; font-weight:600; line-height:1.62; }
.article-body h2 { margin:46px 0 15px; color:#0d1e36; font:800 clamp(26px,2.5vw,32px)/1.22 Arial,sans-serif; letter-spacing:-.025em; }
.article-body figure { margin:34px 0 40px; }
.article-body figure img { display:block; width:100%; height:auto; border-radius:8px; }
.article-play { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; margin:30px 0; padding:18px 22px; border-radius:var(--card-radius); background:#e8f0f6; color:#0d1e36; font-size:15px; }
.article-play strong { font-size:19px; }
.article-play span:first-child { color:#375870; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.article-verdict { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px 0 28px; padding:24px; border-radius:var(--card-radius); background:#0d1e36; color:#fff; }
.article-verdict div { display:grid; gap:6px; }
.article-verdict span { color:#afc7d8; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.article-verdict strong { font-size:19px; line-height:1.25; }
.article-verdict small { color:#d8e5ed; font-size:13px; }
.article-author-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.9fr); max-width:1040px; margin:58px 0 0; overflow:hidden; border:1px solid #d5e0e8; border-radius:var(--card-radius); background:#fff; box-shadow:0 10px 24px #071d2e14; }
.article-author-identity { display:flex; flex-direction:column; gap:20px; padding:32px; background:#071d2e; color:#fff; }
.article-author-label { color:#bdd0e1; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.article-author-heading { display:flex; align-items:center; gap:18px; }
.article-avatar-large { width:72px; height:72px; font-size:21px; }
.article-author-heading h2 { margin:0; color:#fff; font:800 27px/1.15 Arial,sans-serif; }
.article-author-record { margin:5px 0 0; color:#bdd0e1; font-size:13px; font-weight:700; }
.article-author-sports,.article-author-best>div { display:flex; flex-wrap:wrap; gap:7px; }
.article-author-sports span { padding:5px 8px; border:1px solid #7893a8; border-radius:5px; color:#e3edf4; font-size:11px; font-weight:700; }
.article-author-bio { max-width:56ch; margin:0; color:#e3edf4; font-size:14px; line-height:1.65; }
.article-author-results { display:flex; flex-direction:column; gap:22px; padding:32px; }
.article-author-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:12px 0; border-top:1px solid #e4ebf0; border-bottom:1px solid #e4ebf0; }
.article-author-metrics>div { min-width:0; padding:8px; text-align:center; }
.article-author-metrics>div+div { border-left:1px solid #e4ebf0; }
.article-author-metrics strong,.article-author-metrics span { display:block; }
.article-author-metrics strong { color:#071d2e; font-size:18px; }
.article-author-metrics span { margin-top:5px; color:#61778a; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.article-author-metrics>p { grid-column:1/-1; margin:0; color:#61778a; font-size:13px; text-align:center; }
.article-author-best h3 { margin:0 0 9px; color:#536c80; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.article-author-best span { padding:5px 8px; border:1px solid #d0e0e5; border-radius:5px; background:#f4fafb; color:#174453; font-size:11px; font-weight:700; }
.article-author-cta { display:block; margin-top:auto; padding:13px 15px; border-radius:5px; background:#102b45; color:#fff; font-size:14px; font-weight:800; line-height:1.4; text-align:center; text-decoration:none; }
.article-author-cta:hover { background:#1b4260; }
.article-author-cta:focus-visible { outline:3px solid #087f83; outline-offset:3px; }
@media(max-width:900px) { .articles-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .article-author-card { grid-template-columns:1fr; } }
@media(max-width:680px) { .articles-list { grid-template-columns:1fr; } .article-feature-copy { padding:24px; } .article-breadcrumb { margin:23px 0 28px; } .article-heading { margin-bottom:28px; } .article-body { font-size:16px; } .article-verdict { grid-template-columns:1fr; } }
