/*
Theme Name: SunderlandTalk
Theme URI: https://sunderlandtalk.com/
Author: SunderlandTalk
Description: News and fan site theme for SunderlandTalk.com — red header, hero story, match centre strip (next fixture / last result), latest news, Premier League table, Fan Chants and a Season Tracker. All match data is edited in Customize > Match Centre. Self-hosted fonts, no page builder needed.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunderlandtalk
Tags: news, blog, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, sticky-post, threaded-comments
*/

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Barlow Condensed"; src: url(assets/fonts/barlow-condensed-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(assets/fonts/barlow-condensed-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(assets/fonts/barlow-condensed-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--st-red: #cc0f23;          /* white text on this = 5.6:1 */
	--st-red-dark: #a00c1c;
	--st-red-bright: #ff4757;   /* red text on dark = 5.3:1 on #141518 */
	--st-black: #111214;
	--st-dark: #17181b;
	--st-dark-2: #202227;
	--st-ink: #16171a;
	--st-muted: #5b5f66;        /* 6.4:1 on white */
	--st-line: #e3e4e7;
	--st-bg: #f4f4f5;
	--st-white: #fff;
	--st-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	--st-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--st-wrap: 1240px;
	--st-gap: clamp(16px, 2.4vw, 28px);
	--st-radius: 4px;
	--st-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.05);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; font-family: var(--st-body); font-size: 16px; line-height: 1.6; color: var(--st-ink); background: var(--st-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--st-red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--st-red-dark); }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--st-head); font-weight: 700; line-height: 1.1; letter-spacing: .005em; margin: 0 0 .5em; color: var(--st-ink); }
p { margin: 0 0 1em; }
abbr[title] { text-decoration: none; cursor: help; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; left: 8px; top: 8px; z-index: 1000; padding: 10px 16px; background: #fff; color: var(--st-black); font-weight: 700; }
.st-wrap { width: 100%; max-width: var(--st-wrap); margin: 0 auto; padding: 0 var(--st-gap); }
.st-sep { opacity: .55; margin: 0 .15em; }
.st-content { flex: 1 0 auto; }
.st-header, .st-footer { flex-shrink: 0; }

/* ---------- Header ---------- */
.st-header { background: var(--st-red); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.admin-bar .st-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .st-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .st-header { top: 0; } }
.st-header__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.st-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; flex-shrink: 0; margin: 6px 0; }
.st-brand:hover { color: #fff; }
.st-brand__logo { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.st-brand__text { display: flex; flex-direction: column; line-height: 1; }
.st-brand__name { font-family: var(--st-head); font-weight: 700; font-size: 30px; letter-spacing: .01em; text-transform: uppercase; }
.st-brand__name strong { font-weight: 800; color: var(--st-black); }
.st-brand__tag { font-size: 12px; font-weight: 500; opacity: .9; margin-top: 4px; letter-spacing: .02em; }
.st-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.st-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.st-menu > li { position: relative; }
.st-menu a { display: block; padding: 26px 15px; color: #fff; text-decoration: none; font-family: var(--st-head); font-weight: 700; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; border-bottom: 4px solid transparent; }
.st-menu a:hover, .st-menu .current-menu-item > a, .st-menu .current_page_item > a, .st-menu .current-menu-ancestor > a { border-bottom-color: #fff; color: #fff; background: rgba(0,0,0,.12); }
.st-menu .sub-menu { list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--st-black); display: none; box-shadow: var(--st-shadow); }
.st-menu li:hover > .sub-menu, .st-menu li:focus-within > .sub-menu { display: block; }
.st-menu .sub-menu a { padding: 11px 16px; font-size: 17px; border: 0; }
.st-nav__search input { width: 150px; padding: 8px 12px; border: 0; border-radius: 3px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 14px; }
.st-nav__search input::placeholder { color: rgba(255,255,255,.85); }
.st-nav__search input:focus { background: #fff; color: var(--st-ink); }
.st-nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: transparent; color: #fff; cursor: pointer; position: relative; }
.st-nav-toggle__bars, .st-nav-toggle__bars::before, .st-nav-toggle__bars::after { content: ""; position: absolute; left: 12px; width: 24px; height: 3px; background: currentColor; transition: transform .2s, opacity .2s; }
.st-nav-toggle__bars { top: 22px; }
.st-nav-toggle__bars::before { left: 0; top: -8px; }
.st-nav-toggle__bars::after { left: 0; top: 8px; }
.st-nav-open .st-nav-toggle__bars { background: transparent; }
.st-nav-open .st-nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.st-nav-open .st-nav-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 960px) {
	.st-header__inner { min-height: 64px; gap: 12px; }
	.st-brand__logo { width: 52px; height: 52px; }
	.st-brand__name { font-size: 25px; }
	.st-brand__tag { display: none; }
	.st-nav-toggle { display: block; }
	.st-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--st-red-dark); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
	.st-nav-open .st-nav { display: flex; }
	.st-menu { flex-direction: column; align-items: stretch; }
	.st-menu a { padding: 15px var(--st-gap); border-bottom: 1px solid rgba(255,255,255,.14); font-size: 20px; }
	.st-menu a:hover { border-bottom-color: rgba(255,255,255,.14); }
	.st-menu .sub-menu { position: static; display: block; background: transparent; box-shadow: none; padding: 0 0 0 16px; }
	.st-nav__search { padding: 14px var(--st-gap) 0; }
	.st-nav__search input { width: 100%; padding: 12px; font-size: 16px; }
}

/* ---------- Hero ---------- */
.st-hero { background: var(--st-black); }
.st-hero__wrap { padding: 0; max-width: var(--st-wrap); }
.st-hero__link { position: relative; display: block; width: 100%; min-width: 0; color: #fff; text-decoration: none; aspect-ratio: 16 / 7; min-height: 300px; max-height: 600px; overflow: hidden; background: var(--st-dark-2); }
.st-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.st-hero__link:hover .st-hero__img { transform: scale(1.02); }
.st-hero__overlay { position: absolute; inset: auto 0 0 0; padding: 120px clamp(18px, 4vw, 48px) clamp(20px, 3vw, 36px); background: linear-gradient(to top, rgba(10,10,12,.92) 0%, rgba(10,10,12,.6) 55%, rgba(10,10,12,0) 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-hero__title { font-family: var(--st-head); font-weight: 800; font-size: clamp(30px, 5vw, 60px); line-height: 1; text-transform: uppercase; letter-spacing: .005em; max-width: 22ch; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.st-hero__meta { font-size: 14px; color: rgba(255,255,255,.85); }
.st-hero__link:hover .st-hero__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.st-hero--noimg .st-hero__link { aspect-ratio: auto; min-height: 0; background: linear-gradient(135deg, var(--st-dark) 0%, #2a0a0f 100%); }
.st-hero--noimg .st-hero__overlay { position: static; padding-top: 60px; background: none; }

/* ---------- Match strip ---------- */
.st-strip { background: var(--st-black); color: #fff; border-top: 1px solid #2a2c31; border-bottom: 4px solid var(--st-red); }
.st-strip__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-strip__col { padding: 20px 0 22px; min-width: 0; }
.st-strip__last { border-left: 1px solid #34363c; padding-left: clamp(18px, 4vw, 48px); }
.st-strip__next { padding-right: clamp(18px, 4vw, 48px); }
.st-strip__label { margin: 0 0 6px; font-family: var(--st-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c9cbd0; }
.st-strip__match { margin: 0 0 4px; font-family: var(--st-head); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.05; text-transform: uppercase; color: var(--st-red-bright); }
.st-strip__match a { color: inherit; text-decoration: none; }
.st-strip__match a:hover { text-decoration: underline; }
.st-strip .st-v { color: #fff; font-weight: 600; font-size: .8em; margin: 0 .1em; }
.st-score { display: inline-block; background: var(--st-red); color: #fff; padding: 0 .35em; margin: 0 .2em; border-radius: 2px; letter-spacing: .03em; }
.st-strip__info { margin: 0; font-size: 14px; color: #e4e5e8; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.st-strip__info abbr { font-weight: 600; }
.st-strip__comp { color: #c9cbd0; }
.st-form { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; font-size: 12px; font-weight: 700; color: #fff; margin-right: 6px; }
.st-form--w { background: #1f8a4c; }
.st-form--d { background: #6b6f78; }
.st-form--l { background: var(--st-red); }
@media (max-width: 720px) {
	.st-hero__link { aspect-ratio: 4 / 3; min-height: 0; }
	.st-hero__overlay { padding-top: 60px; }
	.st-strip__inner { grid-template-columns: minmax(0, 1fr); }
	.st-strip__col { padding: 16px 0; }
	.st-strip__next { padding-right: 0; }
	.st-strip__last { border-left: 0; border-top: 1px solid #34363c; padding-left: 0; }
}

/* Coming soon */
.st-soon { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--st-muted); font-size: 14px; }
.st-soon__badge { display: inline-block; font-family: var(--st-head); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border: 1px solid currentColor; border-radius: 2px; color: var(--st-red); }
.st-strip .st-soon { color: #c9cbd0; }
.st-strip .st-soon__badge { color: var(--st-red-bright); font-size: 20px; }

/* ---------- Layout ---------- */
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--st-gap); padding-top: 32px; padding-bottom: 40px; }
.st-page-pad { padding-top: 36px; padding-bottom: 56px; }
.st-narrow { max-width: 820px; }
@media (max-width: 1000px) { .st-layout { grid-template-columns: minmax(0, 1fr); } }
.st-section-title { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 3px solid var(--st-black); position: relative; }
.st-section-title::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 64px; height: 3px; background: var(--st-red); }

/* Category label */
.st-cat { display: inline-block; font-family: var(--st-head); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-red); text-decoration: none; margin-bottom: 6px; }
.st-cat:hover { text-decoration: underline; }
.st-cat--solid { background: var(--st-red); color: #fff; padding: 4px 10px; margin: 0; }

/* Cards */
.st-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; }
@media (max-width: 860px) { .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-cards { grid-template-columns: minmax(0, 1fr); } }
.st-card { background: #fff; border-radius: var(--st-radius); overflow: hidden; box-shadow: var(--st-shadow); display: flex; flex-direction: column; border-bottom: 3px solid transparent; transition: border-color .2s, transform .2s; }
.st-card:hover { border-bottom-color: var(--st-red); transform: translateY(-2px); }
.st-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--st-dark-2); }
.st-card__media img { width: 100%; height: 100%; object-fit: cover; }
.st-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.st-card__title { font-size: 23px; font-weight: 700; line-height: 1.1; margin: 0 0 8px; }
.st-card__title a { color: var(--st-ink); text-decoration: none; }
.st-card__title a:hover { color: var(--st-red); }
.st-card__excerpt { font-size: 14.5px; color: #3d4046; line-height: 1.5; margin: 0 0 10px; }
.st-card__meta { font-size: 12.5px; color: var(--st-muted); margin: auto 0 0; }

.st-thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, var(--st-red) 0 28px, var(--st-red-dark) 28px 56px); }
.st-thumb-placeholder img { width: 30%; max-width: 96px; height: auto; opacity: .95; }

/* List */
.st-list { display: flex; flex-direction: column; background: #fff; border-radius: var(--st-radius); box-shadow: var(--st-shadow); margin-bottom: 20px; }
.st-list-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--st-line); align-items: center; }
.st-list-item:last-child { border-bottom: 0; }
.st-list-item__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--st-dark-2); }
.st-list-item__media img { width: 100%; height: 100%; object-fit: cover; }
.st-list-item__body .st-cat { margin-bottom: 2px; font-size: 13px; }
.st-list-item__title { font-size: 21px; margin: 0 0 4px; }
.st-list-item__title a { color: var(--st-ink); text-decoration: none; }
.st-list-item__title a:hover { color: var(--st-red); }
.st-list-item__excerpt { font-size: 14.5px; color: #3d4046; margin: 0 0 6px; }
.st-list--archive .st-list-item { grid-template-columns: 220px minmax(0, 1fr); }
.st-list--archive .st-list-item__title { font-size: 25px; }
@media (max-width: 560px) { .st-list-item, .st-list--archive .st-list-item { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } .st-list-item__title, .st-list--archive .st-list-item__title { font-size: 19px; } .st-list-item__excerpt { display: none; } }

/* Buttons */
.st-btn { display: inline-block; background: var(--st-red); color: #fff; border: 0; border-radius: 3px; padding: 11px 20px; font-family: var(--st-head); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; line-height: 1.1; }
.st-btn:hover { background: var(--st-red-dark); color: #fff; }
.st-btn--small { padding: 8px 14px; font-size: 15px; }

/* ---------- Sidebar boxes ---------- */
.st-sidebar { display: flex; flex-direction: column; gap: 20px; }
.st-box { background: #fff; border-radius: var(--st-radius); box-shadow: var(--st-shadow); overflow: hidden; }
.st-box__title { margin: 0; background: var(--st-black); color: #fff; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; border-bottom: 3px solid var(--st-red); }
.st-box__body { padding: 16px; }
.st-box__body--flush { padding: 0; }
.st-box__pad { padding: 16px; }
.widget > *:not(.st-box__title) { padding-left: 16px; padding-right: 16px; }
.widget ul { margin: 12px 0; padding-left: 32px; }
.widget > *:last-child { padding-bottom: 16px; }
.widget h2, .widget .wp-block-heading { margin: 0 -16px 10px; background: var(--st-black); color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; border-bottom: 3px solid var(--st-red); }
.widget .wp-block-search__label { display: block; font-weight: 700; padding-top: 14px; margin-bottom: 6px; }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 6px; }
.widget .wp-block-search__input { flex: 1; padding: 9px 10px; border: 1px solid #c8cbd0; border-radius: 3px; font: inherit; }
.widget .wp-block-search__button { background: var(--st-red); color: #fff; border: 0; border-radius: 3px; padding: 9px 14px; font-weight: 700; cursor: pointer; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }
.widget li { margin-bottom: 6px; }

.st-nextmatch { text-align: center; }
.st-nextmatch__comp { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 8px; }
.st-nextmatch__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 12px; }
.st-nextmatch__team { font-family: var(--st-head); font-weight: 800; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.st-nextmatch__team.is-us { color: var(--st-red); }
.st-nextmatch__v { font-family: var(--st-head); font-weight: 700; font-size: 16px; color: #fff; background: var(--st-black); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.st-nextmatch__when { font-size: 14px; margin: 0 0 6px; }
.st-nextmatch__when strong { font-size: 18px; }
.st-nextmatch__venue { font-size: 13.5px; color: var(--st-muted); margin: 0 0 10px; }
.st-nextmatch .st-soon { justify-content: center; }

.st-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--st-line); }
.st-table thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); background: #fafafa; }
.st-table .st-table__team { text-align: left; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.st-table tbody th { font-weight: 500; }
.st-table__pos { width: 34px; color: var(--st-muted); }
.st-table__pts { font-weight: 700; }
.st-table tr.is-us td, .st-table tr.is-us th { background: var(--st-red); color: #fff; font-weight: 700; border-bottom-color: var(--st-red); }
.st-table tbody tr:nth-child(4) td, .st-table tbody tr:nth-child(4) th { border-bottom: 2px solid #9aa0a8; }
.st-table tbody tr:nth-last-child(4) td, .st-table tbody tr:nth-last-child(4) th { border-bottom: 2px solid #9aa0a8; }
.st-table__updated { font-size: 12px; color: var(--st-muted); margin: 0; padding: 8px 12px; }

/* ---------- Feature row: Fan Chants + Season Tracker ---------- */
.st-features-row { background: var(--st-dark); padding: 48px 0 56px; border-top: 4px solid var(--st-red); }
.st-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-gap); }
@media (max-width: 900px) { .st-features { grid-template-columns: minmax(0, 1fr); } }
.st-feature { background: var(--st-dark-2); color: #f1f1f3; border-radius: var(--st-radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid #2e3036; }
.st-feature__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid #34363c; background: linear-gradient(90deg, var(--st-red) 0 6px, transparent 6px); }
.st-feature__title { margin: 0; color: #fff; font-size: clamp(26px, 3vw, 34px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.st-feature__more { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid var(--st-red-bright); }
.st-feature__more:hover { color: var(--st-red-bright); }
.st-feature__body { padding: 20px 24px 24px; flex: 1; }
.st-feature .st-soon { color: #c9cbd0; }
.st-feature .st-soon__badge { color: var(--st-red-bright); }

.st-chant-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: chant; }
.st-chant { position: relative; padding: 4px 0 16px 56px; border-bottom: 1px solid #34363c; counter-increment: chant; }
.st-chant:last-child { border-bottom: 0; padding-bottom: 0; }
.st-chant::before { content: counter(chant, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--st-head); font-weight: 800; font-size: 38px; line-height: 1; color: var(--st-red-bright); }
.st-chant__title { font-size: 24px; margin: 0 0 8px; text-transform: uppercase; }
.st-chant__title a { color: #fff; text-decoration: none; }
.st-chant__title a:hover { color: var(--st-red-bright); }
.st-chant__lyrics { margin: 0 0 8px; padding: 0 0 0 14px; border-left: 3px solid var(--st-red); font-style: italic; color: #dcdde1; font-size: 15px; line-height: 1.55; }
.st-chant__lyrics span { display: block; }
.st-chant__read { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-red-bright); text-decoration: none; }
.st-chant__read:hover { text-decoration: underline; }

.st-tracker__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.st-stat { background: #2a2c32; border-radius: 3px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.st-stat__value { font-family: var(--st-head); font-weight: 800; font-size: 38px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.st-stat--big { background: var(--st-red); }
.st-stat--big .st-stat__value { font-size: 52px; }
.st-stat__label { font-size: 13px; color: #e8e9ec; line-height: 1.35; }
.st-progress { margin-bottom: 18px; }
.st-progress__label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #e8e9ec; }
.st-progress__bar { height: 10px; background: #34363c; border-radius: 5px; overflow: hidden; }
.st-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--st-red), var(--st-red-bright)); }
.st-tracker__note { font-size: 15px; color: #dcdde1; border-left: 3px solid var(--st-red); padding-left: 12px; }
.st-tracker__subtitle { font-size: 20px; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin: 22px 0 10px; }
.st-keygames { list-style: none; margin: 0; padding: 0; }
.st-keygame { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #34363c; font-size: 14.5px; }
.st-keygame:last-child { border-bottom: 0; }
.st-keygame__date { font-weight: 700; color: var(--st-red-bright); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.st-keygame__teams { font-weight: 600; color: #fff; }
.st-keygame__ha { font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 2px; display: grid; place-items: center; background: #3a3d44; color: #fff; }
.st-keygame__ha--h { background: var(--st-red); }
.st-keygame__comp { font-size: 12px; color: #c9cbd0; }
@media (max-width: 520px) { .st-keygame { grid-template-columns: 74px minmax(0,1fr) auto; } .st-keygame__comp { display: none; } .st-stat--big .st-stat__value { font-size: 42px; } .st-stat__value { font-size: 32px; } }

/* ---------- Archive / article ---------- */
.st-archive-head { margin-bottom: 24px; }
.st-archive-head--center { text-align: center; }
.st-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--st-red); margin: 0 0 4px; }
.st-archive-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; text-transform: uppercase; margin: 0 0 8px; }
.st-archive-desc { color: var(--st-muted); }
.st-lead { font-size: 18px; color: #3d4046; }

.st-article { background: #fff; border-radius: var(--st-radius); box-shadow: var(--st-shadow); padding: clamp(20px, 4vw, 44px); margin-bottom: 24px; }
.st-article__head { margin-bottom: 20px; }
.st-article__title { font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1.02; margin: 0 0 12px; }
.st-article__standfirst { font-size: 19px; line-height: 1.5; color: #33363c; margin: 0 0 12px; }
.st-article__meta { font-size: 14px; color: var(--st-muted); margin: 0; padding-top: 12px; border-top: 1px solid var(--st-line); }
.st-article__image { margin: 0 calc(-1 * clamp(20px, 4vw, 44px)) 24px; }
.st-article__image img { width: 100%; }
.st-article__image figcaption { font-size: 13px; color: var(--st-muted); padding: 8px clamp(20px, 4vw, 44px) 0; }
.st-article__foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--st-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.st-tags, .st-share { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-tags span, .st-share span { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: var(--st-muted); }
.st-tags a, .st-share a { background: var(--st-bg); padding: 4px 10px; border-radius: 3px; text-decoration: none; color: var(--st-ink); font-weight: 500; }
.st-tags a:hover, .st-share a:hover { background: var(--st-red); color: #fff; }
.st-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.st-postnav a { display: block; background: #fff; padding: 14px 16px; border-radius: var(--st-radius); box-shadow: var(--st-shadow); text-decoration: none; color: var(--st-ink); font-family: var(--st-head); font-weight: 700; font-size: 19px; line-height: 1.15; height: 100%; }
.st-postnav a span { display: block; font-family: var(--st-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-red); margin-bottom: 4px; }
.st-postnav__next { text-align: right; grid-column: 2; }

/* Prose (block editor content) */
.st-prose { font-size: 18px; line-height: 1.72; }
.st-prose > * { margin-top: 0; margin-bottom: 1.15em; }
.st-prose h2 { font-size: 32px; margin-top: 1.4em; }
.st-prose h3 { font-size: 26px; margin-top: 1.2em; }
.st-prose ul, .st-prose ol { padding-left: 1.3em; }
.st-prose li { margin-bottom: .35em; }
.st-prose blockquote, .st-prose .wp-block-quote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--st-red); font-size: 20px; font-style: italic; color: #2b2d32; }
.st-prose .wp-block-pullquote { border-top: 4px solid var(--st-red); border-bottom: 4px solid var(--st-red); padding: 24px 0; text-align: center; }
.st-prose .wp-block-pullquote blockquote { border: 0; padding: 0; }
.st-prose .wp-block-pullquote p { font-family: var(--st-head); font-weight: 700; font-size: 30px; line-height: 1.15; font-style: normal; text-transform: uppercase; }
.st-prose cite { display: block; font-size: 14px; font-style: normal; color: var(--st-muted); margin-top: 6px; }
.st-prose figure { margin-left: 0; margin-right: 0; }
.st-prose figcaption, .st-prose .wp-element-caption { font-size: 13px; color: var(--st-muted); margin-top: 6px; }
.st-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.st-prose th, .st-prose td { border: 1px solid var(--st-line); padding: 8px 10px; }
.st-prose .wp-block-button__link { background: var(--st-red); color: #fff; border-radius: 3px; font-family: var(--st-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.st-prose .alignwide { margin-left: calc(-1 * clamp(0px, 3vw, 44px)); margin-right: calc(-1 * clamp(0px, 3vw, 44px)); max-width: none; }
.st-prose .alignleft { float: left; margin: .3em 1.2em 1em 0; max-width: 50%; }
.st-prose .alignright { float: right; margin: .3em 0 1em 1.2em; max-width: 50%; }
.st-prose .aligncenter { margin-left: auto; margin-right: auto; }
.st-prose::after { content: ""; display: table; clear: both; }
.st-prose .wp-block-verse, .st-lyrics pre { font-family: var(--st-body); font-size: 20px; line-height: 1.7; font-style: italic; white-space: pre-wrap; background: none; padding: 0 0 0 20px; border-left: 4px solid var(--st-red); }
.st-prose .wp-block-gallery { gap: 8px; }
.st-prose .wp-block-embed { margin-bottom: 1.4em; }
.st-page-links { margin-top: 20px; font-weight: 600; }

/* Chants archive */
.st-chant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
.st-chant-card { background: var(--st-dark-2); color: #f1f1f3; border-radius: var(--st-radius); padding: 22px 22px 20px; border-top: 4px solid var(--st-red); display: flex; flex-direction: column; }
.st-chant-card__title { font-size: 26px; text-transform: uppercase; margin-bottom: 10px; }
.st-chant-card__title a { color: #fff; text-decoration: none; }
.st-chant-card__title a:hover { color: var(--st-red-bright); }
.st-chant-card__lyrics { font-style: italic; color: #dcdde1; font-size: 15px; line-height: 1.55; flex: 1; margin-bottom: 12px; }
.st-chant-card__lyrics span { display: block; }

/* Pagination */
.navigation.pagination { margin: 20px 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.page-numbers { display: inline-block; min-width: 40px; padding: 8px 12px; text-align: center; background: #fff; border-radius: 3px; text-decoration: none; color: var(--st-ink); font-weight: 600; box-shadow: var(--st-shadow); }
.page-numbers.current, .page-numbers:hover { background: var(--st-red); color: #fff; }

/* Search form */
.st-searchform { display: flex; gap: 8px; margin: 16px 0; }
.st-searchform input[type="search"] { flex: 1; padding: 11px 14px; border: 1px solid #c8cbd0; border-radius: 3px; font: inherit; }
.st-404 { text-align: center; }
.st-404 .st-searchform { max-width: 520px; margin: 24px auto; }
.st-404__code { font-family: var(--st-head); font-weight: 800; font-size: clamp(100px, 18vw, 180px); line-height: .9; color: var(--st-red); margin: 0 0 8px; }

/* Comments */
.st-comments { background: #fff; padding: clamp(20px, 4vw, 36px); border-radius: var(--st-radius); box-shadow: var(--st-shadow); }
.st-comment-list { list-style: none; padding: 0; }
.st-comment-list .comment-body { padding: 12px 0; border-bottom: 1px solid var(--st-line); }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 10px; border: 1px solid #c8cbd0; border-radius: 3px; font: inherit; }
.comment-form .submit { background: var(--st-red); color: #fff; border: 0; padding: 11px 20px; border-radius: 3px; font-weight: 700; cursor: pointer; }

/* ---------- Footer ---------- */
.st-footer { background: var(--st-black); color: #d6d7db; border-top: 4px solid var(--st-red); }
.st-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; padding-bottom: 28px; }
.st-footer__brand { display: flex; align-items: center; gap: 14px; }
.st-footer__logo { width: 84px; height: 84px; object-fit: contain; }
.st-footer__name { font-family: var(--st-head); font-weight: 700; font-size: 30px; text-transform: uppercase; color: #fff; margin: 0; }
.st-footer__name strong { color: var(--st-red-bright); font-weight: 800; }
.st-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.st-footer-menu a { color: #fff; text-decoration: none; font-family: var(--st-head); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; }
.st-footer-menu a:hover { color: var(--st-red-bright); }
.st-footer__legal { border-top: 1px solid #2a2c31; font-size: 13px; }
.st-footer__legal .st-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 16px; padding-bottom: 18px; }
.st-footer__legal p { margin: 0; }
.st-footer__disclaimer { color: #b4b6bc; }

/* Core alignment helpers outside prose */
.alignwide, .alignfull { max-width: none; }
.wp-caption-text, .gallery-caption { font-size: 13px; color: var(--st-muted); }
.sticky, .bypostauthor { }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }