.news-page, .news-article { margin: 0 auto; padding: 120px 24px 72px; max-width: 1280px; width: 100%; }
.news-heading, .news-article__heading { margin-bottom: 32px; }
body:not(.admin-body) .news-heading h1, body:not(.admin-body) .news-article h1 { font-size: 56px; line-height: 1.08; letter-spacing: 0; overflow-wrap: anywhere; }
.news-search { max-width: 640px; margin: 0 0 40px; }
.news-search > div { display: flex; gap: 12px; margin-top: 8px; }
.news-search input { flex: 1; min-width: 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.news-card { min-width: 0; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 24px; }
.news-card > a { display: block; color: var(--text); text-decoration: none; }
.news-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; margin-bottom: 18px; border-radius: 4px; }
.news-card time, .news-article time { font-size: 14px; color: #b9bec4; }
body:not(.admin-body) .news-card h2 { font-size: 26px; line-height: 1.16; margin: 10px 0; letter-spacing: 0; overflow-wrap: anywhere; }
.news-card p { line-height: 1.6; color: #d2d5d8; overflow-wrap: anywhere; }
.news-card a:hover h2 { text-decoration: underline; text-underline-offset: 5px; }
.news-article__heading, .news-prose, .news-article__back { max-width: 820px; margin-left: auto; margin-right: auto; }
.news-article__intro { font-size: 20px; line-height: 1.65; color: #d2d5d8; }
.news-article__image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; margin: 40px 0; border-radius: 4px; }
.news-prose { font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
body:not(.admin-body) .news-prose h2 { font-size: 32px; line-height: 1.2; margin: 40px 0 16px; }
body:not(.admin-body) .news-prose h3 { font-size: 24px; line-height: 1.3; }
.news-prose p { margin: 0 0 24px; }
.news-prose img { max-width: 100%; height: auto; }
.news-prose a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.news-prose pre { max-width: 100%; overflow: auto; }
.news-prose blockquote { margin: 24px 0; padding-left: 24px; border-left: 3px solid var(--accent); }
.news-article__back { margin-top: 40px; }
.news-preview { border-left: 3px solid var(--accent); padding: 12px; background: rgba(255,255,255,.08); }
.admin-body .admin-post-list .admin-filter-bar { display: grid; grid-template-columns: minmax(0,1fr) 180px auto; align-items: end; gap: 12px; margin-bottom: 20px; }
.admin-body .admin-post-list table { table-layout: fixed; min-width: 600px; }
.admin-body .admin-post-list th:nth-child(1) { width: 40%; }
.admin-body .admin-post-list th:nth-child(2) { width: 24%; }
.admin-body .admin-post-list th:nth-child(3) { width: 12%; }
.admin-body .admin-post-list th:nth-child(4) { width: 24%; }
.admin-body .admin-post-list td .hero-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; }
.admin-body .admin-post-list td .hero-actions .button { min-width: 0; padding: 8px 10px; }
.admin-body .admin-post-list td strong { display: block; overflow-wrap: anywhere; }
.admin-body .admin-post-editor h2, .admin-body .admin-hero-manager h2 { font-size: 24px; line-height: 1.25; margin: 0 0 20px; }
.admin-body .admin-post-editor > section, .admin-body .admin-post-editor > details { padding: 24px; }
.admin-body .admin-post-editor > details { background: white; color: #111827; border: 1px solid #d6dce5; }
.admin-body .admin-post-editor summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.admin-body .admin-post-editor details[open] summary { margin-bottom: 20px; }
.admin-body .admin-hero-manager > form { margin: 0 0 36px; }
.admin-body .admin-hero-manager form > .button { margin-top: 16px; }
.admin-body .admin-post-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0; }
.interactive-post { --interactive-accent: var(--accent); --interactive-panel: #101820; --interactive-tile: #1a222b; max-width: 820px; margin: 48px auto 0; padding: 28px; border: 1px solid var(--interactive-accent); background: var(--interactive-panel); }
.interactive-post { border-color: color-mix(in srgb, var(--interactive-accent) 45%, transparent); background: color-mix(in srgb, var(--interactive-panel) 92%, #000); }
.interactive-post h2 { margin: 8px 0 12px; }
.interactive-post > p:not(.eyebrow), .interactive-post__window { color: #d2d5d8; line-height: 1.6; }
.interactive-form { display: grid; gap: 18px; margin-top: 24px; }
.matchmaker-selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.matchmaker-choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.matchmaker-choice-group legend { margin-bottom: 12px; color: #f6f8f3; font-weight: 700; }
.matchmaker-fighter-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: 520px; overflow-y: auto; padding: 2px; }
.matchmaker-fighter-tile { display: grid; gap: 6px; min-width: 0; padding: 8px; color: #f6f8f3; text-align: left; background: var(--interactive-tile); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; cursor: pointer; }
.matchmaker-fighter-tile { background: color-mix(in srgb, var(--interactive-tile) 92%, #000); }
.matchmaker-fighter-tile:hover, .matchmaker-fighter-tile[aria-pressed="true"] { border-color: var(--interactive-accent); background: color-mix(in srgb, var(--interactive-accent) 28%, var(--interactive-tile)); }
.matchmaker-fighter-tile:disabled { opacity: .35; cursor: not-allowed; }
.matchmaker-fighter-tile img, .matchmaker-fighter-tile__placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; background: #111820; }
.matchmaker-fighter-tile__placeholder { display: grid; place-items: center; color: #f6f8f3; font-size: 30px; font-weight: 700; }
.matchmaker-fighter-tile span { overflow-wrap: anywhere; font-weight: 700; }
.matchmaker-fighter-tile small { color: #b9bec4; overflow-wrap: anywhere; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.interactive-form label:not(.checkbox-label) { display: grid; gap: 8px; color: #f6f8f3; font-weight: 700; }
.interactive-form select, .interactive-form input[type=email] { width: 100%; min-height: 48px; padding: 12px 14px; color: #f6f8f3; background: #080c10; border: 1px solid rgba(255,255,255,.25); }
.interactive-option { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--interactive-accent); background: var(--interactive-tile); }
.interactive-option { border-color: color-mix(in srgb, var(--interactive-accent) 30%, transparent); background: color-mix(in srgb, var(--interactive-tile) 92%, #000); }
.interactive-post .button.primary { background: var(--interactive-accent); border-color: var(--interactive-accent); }
.interactive-post .eyebrow { color: var(--interactive-accent); }
.interactive-option label { display: flex; gap: 12px; align-items: center; color: #f6f8f3; }
.interactive-option a { color: #b9d2ff; }
.interactive-post .success-box, .interactive-post .error-box { margin: 12px 0; }
@media (max-width: 640px) { .interactive-post { padding: 20px; } }
@media (max-width: 720px) { .matchmaker-selection-grid { grid-template-columns: minmax(0, 1fr); } .matchmaker-fighter-tiles { max-height: none; } }
@media (max-width: 820px) {
    .admin-body .admin-post-list .admin-filter-bar { grid-template-columns: minmax(0,1fr) 140px; }
    .admin-body .admin-post-list .admin-filter-bar > button { justify-self: start; }
}
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
    .news-page, .news-article { padding: 100px 20px 48px; }
    .news-grid { grid-template-columns: minmax(0,1fr); }
    body:not(.admin-body) .news-heading h1, body:not(.admin-body) .news-article h1 { font-size: 36px; }
    .news-prose { font-size: 16px; }
    .news-article__intro { font-size: 18px; }
}