/* ============================================================
   RANGERS TITANS SPITFIRE FC — DESIGN SYSTEM v2.0
   Editorial Sports Platform · Confident · Clean · Restrained
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Core palette */
  --ink:        #0a0a0b;        /* near-black nav/headers */
  --ink-soft:   #1a1a1d;        /* dark sections */
  --body-bg:    #f7f6f3;        /* warm off-white page */
  --surface:    #ffffff;        /* cards */
  --surface-2:  #f0efe9;        /* subtle alt sections */
  --border:     #e2e0d9;        /* dividers */
  --border-dark:#2a2a2e;        /* dark-bg dividers */

  /* Brand */
  --red:        #c1121f;        /* surgical red — CTAs, labels, accent */
  --red-dark:   #960e17;        /* hover */
  --gold:       #b8933a;        /* heritage, subtle only */

  /* Text */
  --text-1:     #111111;
  --text-2:     #4a4a4f;
  --text-3:     #888890;
  --text-inv:   #ffffff;
  --text-inv-2: rgba(255,255,255,0.65);

  /* Typography */
  --f-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:     'Barlow', system-ui, sans-serif;
  --f-mono:     'JetBrains Mono', monospace;

  /* Spacing */
  --gap:        2rem;
  --section:    5rem;
  --max-w:      1280px;
  --nav-h:      64px;
  --util-h:     36px;

  /* Transitions */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fast:       150ms var(--ease);
  --med:        280ms var(--ease);
}

/* ---------- BASE ---------- */
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--body-bg);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* ---------- LAYOUT ---------- */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.section { padding: var(--section) 0; }
.section--dark { background: var(--ink); color: var(--text-inv); }
.section--alt  { background: var(--surface-2); }
.section--surface { background: var(--surface); }

/* ---------- UTILITY BAR ---------- */
.util-bar {
  height: var(--util-h);
  background: var(--ink-soft);
  border-bottom: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
}
.util-bar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.util-bar__left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv-2);
}
.util-bar__league-badge {
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.util-bar__sep { color: var(--border-dark); }
.util-bar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.util-bar__social {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}
.util-bar__social a {
  color: var(--text-inv-2);
  transition: color var(--fast);
  font-size: 13px;
  display: flex;
  align-items: center;
}
.util-bar__social a:hover { color: #fff; }
.util-bar__cta {
  background: var(--red);
  color: #fff !important;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  transition: background var(--fast);
}
.util-bar__cta:hover { background: var(--red-dark); }

/* ---------- PRIMARY NAV ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--ink);
  display: flex;
  align-items: center;
  transition: box-shadow var(--med);
}
.site-nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Logo */
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.site-nav__logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.site-nav__logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-nav__logo-name {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.site-nav__logo-sub {
  font-family: var(--f-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  margin-top: 3px;
}

/* Nav links */
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.site-nav__item { position: relative; }
.site-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  height: var(--nav-h);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  transition: color var(--fast);
  white-space: nowrap;
  position: relative;
}
.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med);
}
.site-nav__item:hover .site-nav__link,
.site-nav__item.current-menu-item .site-nav__link { color: #fff; }
.site-nav__item:hover .site-nav__link::after,
.site-nav__item.current-menu-item .site-nav__link::after { transform: scaleX(1); }

.site-nav__arrow {
  width: 14px; height: 14px;
  opacity: 0.5;
  transition: transform var(--fast), opacity var(--fast);
}
.site-nav__item:hover .site-nav__arrow { transform: rotate(180deg); opacity: 1; }

/* Dropdown */
.site-nav__dropdown {
  position: absolute;
  top: calc(var(--nav-h) - 2px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border-top: 2px solid var(--red);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--med), transform var(--med), visibility var(--med);
  z-index: 300;
}
.site-nav__item:hover .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__dropdown a {
  display: block;
  padding: 11px 18px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  transition: color var(--fast), padding-left var(--fast), background var(--fast);
}
.site-nav__dropdown a:last-child { border-bottom: none; }
.site-nav__dropdown a:hover {
  color: var(--red);
  padding-left: 24px;
  background: #fafaf8;
}

/* Nav right */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.site-nav__search-btn {
  color: rgba(255,255,255,0.65);
  transition: color var(--fast);
  display: flex;
  align-items: center;
  padding: 8px;
}
.site-nav__search-btn:hover { color: #fff; }
.site-nav__search-btn svg { width: 18px; height: 18px; }

/* Hamburger */
.site-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  color: #fff;
}
.site-nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--fast), opacity var(--fast);
}

/* Search bar */
.site-search-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--med);
}
.site-search-bar.open { max-height: 64px; }
.site-search-bar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--text-1);
  outline: none;
}
.site-search-bar input::placeholder { color: var(--text-3); }

/* Mobile overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 500;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--med), visibility var(--med);
  overflow-y: auto;
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap);
  height: 64px;
  border-bottom: 1px solid var(--border-dark);
}
.mobile-nav__close {
  color: rgba(255,255,255,0.7);
  font-size: 28px;
  line-height: 1;
  padding: 4px;
}
.mobile-nav__close:hover { color: #fff; }
.mobile-nav__links { padding: 1.5rem 0; }
.mobile-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--gap);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid var(--border-dark);
  transition: color var(--fast), padding-left var(--fast);
}
.mobile-nav__links a:hover { color: #fff; padding-left: calc(var(--gap) + 6px); }
.mobile-nav__links .sub-item {
  font-size: 12px;
  font-weight: 600;
  padding-left: calc(var(--gap) + 1.5rem);
  color: rgba(255,255,255,0.5);
  border-color: #1e1e22;
}
.mobile-nav__links .sub-item:hover { color: rgba(255,255,255,0.85); }
.mobile-nav__foot {
  padding: var(--gap);
  margin-top: auto;
  border-top: 1px solid var(--border-dark);
}
.mobile-nav__cta {
  display: block;
  width: 100%;
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 14px;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--fast);
}
.mobile-nav__cta:hover { background: var(--red-dark); }

/* ---------- HERO ---------- */
.hero {
  background: var(--ink);
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--ink) 0%, #1a1215 100%);
}
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="none"/><line x1="0" y1="60" x2="60" y2="0" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></svg>');
}
.hero__crest-watermark {
  position: absolute;
  right: -2%;
  bottom: -5%;
  width: 520px;
  height: 520px;
  object-fit: contain;
  opacity: 0.05;
  pointer-events: none;
  filter: grayscale(1);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 5rem var(--gap) 4rem;
  width: 100%;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hero__league-tag {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 3px 10px;
}
.hero__season {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-inv-2);
  text-transform: uppercase;
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.95;
  max-width: 800px;
  margin-bottom: 1.25rem;
}
.hero__title span { color: var(--red); }
.hero__tagline {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-inv-2);
  margin-bottom: 2.5rem;
}
.hero__tagline strong { color: var(--gold); font-weight: 600; }
.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 24px;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  white-space: nowrap;
}
.btn--primary {
  background: var(--red);
  color: #fff;
}
.btn--primary:hover { background: var(--red-dark); }
.btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn--ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn--outline {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--dark {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover { background: var(--ink-soft); }
.btn svg { width: 16px; height: 16px; }

/* ---------- TICKER ---------- */
.ticker {
  background: var(--red);
  height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker__label {
  flex-shrink: 0;
  background: #fff;
  color: var(--red);
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
}
.ticker__track {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.ticker__scroll {
  display: flex;
  gap: 3rem;
  animation: ticker-scroll 40s linear infinite;
  white-space: nowrap;
}
.ticker__scroll:hover { animation-play-state: paused; }
.ticker__item {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}
.ticker__item strong { color: #fff; }
.ticker__sep { color: rgba(255,255,255,0.3); margin: 0 0.5rem; }
@keyframes ticker-scroll {
  0%  { transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ---------- SECTION HEADERS ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.section-head--dark { border-color: var(--border-dark); }
.section-head__label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.section-head__accent {
  width: 3px;
  height: 1.4em;
  background: var(--red);
  flex-shrink: 0;
  align-self: center;
  position: relative;
  top: -1px;
}
.section-head__title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1);
}
.section-head--dark .section-head__title { color: #fff; }
.section-head__subtitle {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 0.5rem;
}
.section-head__link {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: gap var(--fast);
}
.section-head__link:hover { gap: 10px; }
.section-head__link svg { width: 14px; height: 14px; }

/* ---------- NEWS CARDS ---------- */
.news-lead {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5px;
  background: var(--border);
}
.news-lead__main {
  background: var(--surface);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.news-lead__main:hover .news-lead__img { transform: scale(1.03); }
.news-lead__img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink-soft);
}
.news-lead__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.news-lead__body {
  padding: 1.75rem;
}
.news-lead__side {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  background: var(--border);
}
.news-side-card {
  background: var(--surface);
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background var(--fast);
  flex: 1;
  align-items: flex-start;
}
.news-side-card:hover { background: #fafaf8; }
.news-side-card__thumb {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  background: var(--surface-2);
  overflow: hidden;
}
.news-side-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--med);
}
.news-side-card:hover .news-side-card__thumb img { transform: scale(1.05); }
.news-side-card__body { flex: 1; min-width: 0; }

/* News grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
}
.news-card {
  background: var(--surface);
  cursor: pointer;
  transition: background var(--fast);
}
.news-card:hover { background: #fafaf8; }
.news-card__thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-2);
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.news-card:hover .news-card__thumb img { transform: scale(1.04); }
.news-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.news-card__body--noimg { padding: 1.5rem; }

/* News meta / labels */
.tag {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--red);
  color: #fff;
  margin-bottom: 0.75rem;
}
.tag--outline {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}
.tag--gold { background: var(--gold); }
.tag--dark {
  background: var(--ink);
  color: var(--text-inv-2);
}
.tag--grey {
  background: var(--surface-2);
  color: var(--text-2);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.625rem;
}
.post-meta__sep { color: var(--border); }

/* Article headings */
.card-title-lg {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.05;
  margin-bottom: 0.625rem;
  transition: color var(--fast);
}
.card-title-lg:hover { color: var(--red); }
.card-title-md {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.15;
  margin-bottom: 0.5rem;
  transition: color var(--fast);
}
.card-title-md:hover { color: var(--red); }
.card-title-sm {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.2;
  margin-bottom: 0.375rem;
  transition: color var(--fast);
}
.card-title-sm:hover { color: var(--red); }
.card-excerpt {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}

/* ---------- MATCHDAY ---------- */
.matchday {
  background: var(--ink-soft);
  border-top: 3px solid var(--red);
  padding: 2.5rem 0;
}
.matchday__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
.matchday__comp {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  text-align: center;
  grid-column: 1 / -1;
}
.matchday__team {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.matchday__team--away { flex-direction: row-reverse; }
.matchday__crest {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.matchday__crest--placeholder {
  width: 56px;
  height: 56px;
  background: var(--border-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.3);
}
.matchday__team-name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}
.matchday__team-detail {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inv-2);
  margin-top: 3px;
}
.matchday__team--away .matchday__team-name,
.matchday__team--away .matchday__team-detail { text-align: right; }
.matchday__centre {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.matchday__vs {
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 900;
  color: rgba(255,255,255,0.12);
  letter-spacing: -2px;
  line-height: 1;
}
.matchday__date {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.matchday__time {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-inv-2);
}
.matchday__venue {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inv-2);
  opacity: 0.65;
  margin-top: 4px;
}
.matchday__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Fixtures strip */
.fixtures-strip {
  background: var(--ink);
  border-top: 1px solid var(--border-dark);
  overflow-x: auto;
  scrollbar-width: none;
}
.fixtures-strip::-webkit-scrollbar { display: none; }
.fixtures-strip__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  gap: 4px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-width: max-content;
}
.fixture-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: var(--ink-soft);
  border: 1px solid var(--border-dark);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
  min-width: 130px;
  text-align: center;
}
.fixture-pill:hover { border-color: rgba(255,255,255,0.2); background: #222228; }
.fixture-pill.upcoming { opacity: 0.7; }
.fixture-pill__result {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.fixture-pill__badge {
  font-family: var(--f-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
}
.badge-w { background: #1d6f42; color: #fff; }
.badge-d { background: #444; color: #fff; }
.badge-l { background: var(--red-dark); color: #fff; }
.badge-up { background: var(--border-dark); color: var(--text-inv-2); }
.fixture-pill__opp {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.fixture-pill__date {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.fixture-pill__comp {
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- STATS BAND ---------- */
.stats-band {
  background: var(--ink);
  padding: 3.5rem 0;
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stats-item {
  text-align: center;
  padding: 1.5rem;
  border-right: 1px solid var(--border-dark);
}
.stats-item:last-child { border-right: none; }
.stats-item__num {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stats-item__num span { color: var(--red); }
.stats-item__label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-inv-2);
}

/* ---------- SQUAD ---------- */
.squad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.player-card {
  background: var(--surface);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.player-card:hover .player-card__img { transform: scale(1.04); }
.player-card__img-wrap {
  aspect-ratio: 3/4;
  background: var(--surface-2);
  overflow: hidden;
}
.player-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.player-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-soft);
  font-family: var(--f-display);
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.08);
}
.player-card__body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}
.player-card__number {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 4px;
}
.player-card__name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.1;
}
.player-card__pos {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

/* ---------- TABLE ---------- */
.league-table {
  width: 100%;
  border-collapse: collapse;
}
.league-table th {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.625rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.league-table th:not(:first-child):not(:nth-child(2)) { text-align: center; }
.league-table td {
  padding: 0.875rem 1rem;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  transition: background var(--fast);
}
.league-table td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
  text-align: center;
  color: var(--text-2);
}
.league-table tr:hover td { background: #fafaf8; }
.league-table tr.highlight td {
  background: #fff7f7;
  font-weight: 700;
  color: var(--red);
}
.league-table tr.highlight td:first-child { border-left: 3px solid var(--red); }
.table-pos {
  width: 30px;
  text-align: center !important;
  color: var(--text-3) !important;
  font-size: 12px !important;
}
.table-club {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.table-crest {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.table-crest-placeholder {
  width: 20px;
  height: 20px;
  background: var(--surface-2);
  border-radius: 50%;
}
.table-pts { font-weight: 800 !important; }
.form-badge {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
}
.form-w { background: #1d6f42; color: #fff; }
.form-d { background: #999; color: #fff; }
.form-l { background: var(--red-dark); color: #fff; }

/* ---------- FORMATION ---------- */
.formation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
}
.formation-card {
  background: var(--surface);
  padding: 2rem 1.75rem;
  cursor: pointer;
  transition: background var(--fast);
  border-top: 2px solid transparent;
}
.formation-card:hover {
  background: #fafaf8;
  border-top-color: var(--red);
}
.formation-card__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1.25rem;
  color: var(--red);
}
.formation-card__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 0.75rem;
}
.formation-card__text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ---------- MEDIA ROW ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;
  background: var(--border);
}
.media-card {
  background: var(--ink-soft);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  cursor: pointer;
}
.media-card:hover .media-card__bg { transform: scale(1.06); }
.media-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 500ms var(--ease);
}
.media-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.1) 60%);
}
.media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--fast), transform var(--fast);
}
.media-card:hover .media-card__play {
  background: var(--red);
  border-color: var(--red);
  transform: translate(-50%, -50%) scale(1.1);
}
.media-card__play svg { width: 18px; height: 18px; color: #fff; margin-left: 2px; }
.media-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
}
.media-card__label {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.media-card__title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

/* ---------- JOIN BAND ---------- */
.join-band {
  background: var(--red);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.join-band::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 24px,
    rgba(255,255,255,0.04) 24px,
    rgba(255,255,255,0.04) 25px
  );
}
.join-band__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.join-band__text { flex: 1; }
.join-band__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.join-band__sub {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.join-band__btn {
  background: #fff;
  color: var(--red);
  padding: 14px 32px;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
  flex-shrink: 0;
}
.join-band__btn:hover { background: var(--ink); color: #fff; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--ink-soft);
  border-top: 1px solid var(--border-dark);
}
.site-footer__main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem var(--gap) 3rem;
  display: grid;
  grid-template-columns: 260px 1fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand { }
.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.footer-brand__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.footer-brand__name {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}
.footer-brand__est {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.footer-brand__tagline {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv-2);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inv-2);
  font-size: 14px;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.footer-social a:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.footer-col__title {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-dark);
}
.footer-col__links { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col__links a {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-inv-2);
  transition: color var(--fast), padding-left var(--fast);
}
.footer-col__links a:hover { color: #fff; padding-left: 4px; }
.site-footer__bottom {
  border-top: 1px solid var(--border-dark);
  padding: 1.25rem var(--gap);
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer-copy {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-copy a { color: var(--text-inv-2); }
.footer-copy a:hover { color: #fff; }
.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--fast);
}
.footer-legal a:hover { color: var(--text-inv-2); }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero {
  background: var(--ink);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 35%;
  background: linear-gradient(to left, rgba(193,18,31,0.07), transparent);
}
.page-hero__content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  position: relative;
  z-index: 1;
}
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inv-2);
  margin-bottom: 1rem;
}
.page-hero__breadcrumb a:hover { color: #fff; }
.page-hero__breadcrumb-sep { color: var(--border-dark); font-size: 9px; }
.page-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.page-hero__sub {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv-2);
}

/* ---------- SINGLE POST ---------- */
.single-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3.5rem var(--gap);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: start;
}
.article__head { margin-bottom: 2rem; }
.article__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}
.article__meta-item {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.article__meta-item svg { width: 13px; height: 13px; color: var(--red); }
.article__featured { margin-bottom: 2rem; }
.article__featured img { width: 100%; }
.article__body { font-size: 17px; line-height: 1.75; color: var(--text-2); }
.article__body p { margin-bottom: 1.5rem; }
.article__body h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-1);
  margin: 2rem 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--red);
}
.article__body h3 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-1);
  margin: 1.5rem 0 0.75rem;
}
.article__body blockquote {
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  background: var(--surface-2);
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-1);
}
.article__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Sidebar */
.sidebar {}
.sidebar__widget {
  margin-bottom: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.sidebar__widget-head {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--ink);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.sidebar__widget-body { padding: 1rem 0; }
.sidebar-news-item {
  display: flex;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--fast);
}
.sidebar-news-item:last-child { border-bottom: none; }
.sidebar-news-item:hover { background: #fafaf8; }
.sidebar-news-item__thumb {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  background: var(--surface-2);
  overflow: hidden;
}
.sidebar-news-item__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sidebar-news-item__title {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.2;
  transition: color var(--fast);
}
.sidebar-news-item:hover .sidebar-news-item__title { color: var(--red); }
.sidebar-news-item__date {
  font-family: var(--f-display);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.07em;
  margin-top: 4px;
}

/* ---------- ARCHIVE / BLOG ---------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
}

/* ---------- HISTORY TIMELINE ---------- */
.timeline { position: relative; padding: 2rem 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: start;
}
.timeline-item:nth-child(even) .timeline-item__card { grid-column: 3; }
.timeline-item:nth-child(even) .timeline-item__year { grid-column: 2; }
.timeline-item:nth-child(even) .timeline-item__spacer { grid-column: 1; grid-row: 1; }
.timeline-item__year {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--red);
  text-align: center;
  padding-top: 1rem;
  position: relative;
}
.timeline-item__year::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px; height: 10px;
  background: var(--red);
  border: 2px solid var(--body-bg);
  transform: translate(-50%, -50%);
}
.timeline-item__card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-left: 3px solid var(--red);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.timeline-item__card.visible { opacity: 1; transform: none; }
.timeline-item__era {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.timeline-item__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 0.625rem;
}
.timeline-item__desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ---------- CONTACT FORM ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem var(--gap);
}
.form-group { margin-bottom: 1.5rem; }
.form-label {
  display: block;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.form-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--fast);
}
.form-input:focus { border-color: var(--red); }
textarea.form-input { resize: vertical; min-height: 140px; }
.contact-info-card {
  background: var(--ink);
  color: #fff;
  padding: 2rem;
  height: fit-content;
}
.contact-info-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-dark);
  align-items: flex-start;
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item__icon {
  width: 36px;
  height: 36px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-item__icon svg { width: 16px; height: 16px; color: #fff; }
.contact-info-item__label {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv-2);
  margin-bottom: 3px;
}
.contact-info-item__value {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .squad-grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__main { grid-template-columns: 1fr 1fr 1fr; }
  .news-lead { grid-template-columns: 1fr; }
  .news-lead__side { flex-direction: row; flex-wrap: wrap; }
  .news-side-card { flex: 1 1 45%; }
  .single-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-info-card { order: -1; }
}

@media (max-width: 900px) {
  :root { --section: 3.5rem; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-item { border-right: none; border-bottom: 1px solid var(--border-dark); }
  .stats-item:nth-child(odd) { border-right: 1px solid var(--border-dark); }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .formation-grid { grid-template-columns: 1fr 1fr; }
  .squad-grid { grid-template-columns: repeat(2, 1fr); }
  .matchday__inner { grid-template-columns: 1fr; justify-items: center; }
  .matchday__team--away { flex-direction: row; }
  .matchday__team--away .matchday__team-name,
  .matchday__team--away .matchday__team-detail { text-align: left; }
  .timeline::before { left: 30px; }
  .timeline-item { grid-template-columns: 60px 1fr; }
  .timeline-item__spacer { display: none; }
  .timeline-item:nth-child(even) .timeline-item__card,
  .timeline-item:nth-child(even) .timeline-item__year { grid-column: auto; }
  .timeline-item__year { writing-mode: horizontal-tb; font-size: 18px; }
  .join-band__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  :root { --gap: 1.25rem; --nav-h: 56px; }
  .util-bar { display: none; }
  .site-nav__menu { display: none; }
  .site-nav__actions .site-nav__search-btn { display: none; }
  .site-nav__hamburger { display: flex; margin-left: auto; }
  .hero__title { font-size: 3rem; }
  .news-grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr 1fr; }
  .formation-grid { grid-template-columns: 1fr; }
  .squad-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .league-table th:nth-child(n+6):not(:last-child) { display: none; }
  .league-table td:nth-child(n+6):not(:last-child) { display: none; }
}

/* ---------- PRINT ---------- */
@media print {
  .util-bar, .site-nav, .ticker, .mobile-nav, .join-band, .site-footer { display: none; }
}