/* sportperspective — Articles, Article, About and 404 pages.
   Page CSS: tokens only (no hard-coded colours). Builds on css/site.css. */

/* ===================================================================== Articles index */

.articles-controls { margin-bottom: var(--s-6); }
.articles-results { min-height: 120px; }
.article-grid { align-items: stretch; }
.empty-state__sub { font-size: .9375rem; }

.articles-owner { padding-bottom: 0; }
.articles-owner .section-head__meta { max-width: 60ch; }


/* ===================================================================== Article */

/* Reading progress: pinned under the sticky header (top is set from JS). */
.read-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) - 1);
  height: 2px;
  pointer-events: none;
}
.read-progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none; }
}

.article-shell { padding-top: var(--s-6); padding-bottom: var(--s-8); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .875rem;
  font-weight: 600;
  font-stretch: 104%;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover { color: var(--text); }

.article:not([data-league]) {
  --league: var(--accent);
  --league-ink: var(--accent-text);
}
.article__banner { margin-top: var(--s-5); }
.article__banner + .article__banner { margin-top: var(--s-3); }

.article__head { padding-top: var(--s-7); }
.article__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.article__title {
  margin-top: var(--s-4);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4.25rem);
  line-height: .98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.article__dek {
  margin-top: var(--s-5);
  font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  line-height: 1.4;
  max-width: 56ch;
}
.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  white-space: pre-wrap;
  margin-top: var(--s-5);
  font-size: .875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.article__byline strong { color: var(--text); font-weight: 650; }
.article__byline .sep { margin-inline: .35em; color: var(--faint); }

/* The rule: league-coloured hairline running to a vanishing-point dot. */
.article__rule {
  position: relative;
  margin-top: var(--s-5);
  height: 2px;
  background: var(--league);
}
.article__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--league);
}

.article__body { margin-top: var(--s-7); }

/* Prose details for every Markdown construct (base .prose lives in site.css). */
.article__body > p:first-child {
  font-size: 1.1875rem;
  line-height: 1.65;
}
.prose h2 { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 1em; }
.prose h2 { padding-top: var(--s-2); }
.prose h4, .prose h5, .prose h6 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.8em;
}
.prose h5, .prose h6 {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose strong { font-weight: 700; }
.prose li > ul, .prose li > ol { margin-top: .35em; }
.prose ol > li::marker {
  font-family: var(--font-num);
  font-stretch: 78%;
  font-weight: 700;
  color: var(--league-ink);
}
.prose blockquote {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text);
  border-left-width: 3px;
}
.prose blockquote > * + * { margin-top: .8em; }
.prose code { font-size: .84em; overflow-wrap: anywhere; }
.prose pre { font-size: .95rem; }
.prose pre code { overflow-wrap: normal; }
.prose hr {
  border: 0;
  height: 1px;
  background: var(--line-strong);
}

/* Tables from Markdown: .table-scroll > table.data-table */
.prose .table-scroll { margin-top: 1.6em; }
.prose .table-scroll + * { margin-top: 1.4em; }
.prose .data-table { font-size: .9375rem; }
.prose .data-table th,
.prose .data-table td { padding: 10px 14px; white-space: nowrap; }
.prose .data-table th:first-child,
.prose .data-table td:first-child { padding-left: 0; }
.prose .data-table th:last-child,
.prose .data-table td:last-child { padding-right: 0; }
.prose .data-table td { border-bottom: 1px solid var(--line); }
.prose .data-table thead th { border-bottom: 1px solid var(--line-strong); }
.prose .data-table tbody tr:last-child > * { border-bottom: 1px solid var(--line-strong); }
.prose .data-table .align-center { text-align: center; }
.prose .data-table .align-left { text-align: left; }
.prose .table-scroll:focus-visible { outline-offset: 4px; }

/* Figures */
.prose-figure { margin-top: 1.8em; }
.prose-figure + * { margin-top: 1.6em; }
.prose-figure img {
  width: 100%;
  height: auto;
  max-height: min(70vh, 360px);
  object-fit: contain;
  padding: clamp(var(--s-4), 8%, var(--s-7));
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.prose-figure figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted);
}

/* :::stat callout — big condensed numeral + caption. */
.pull-stat {
  display: grid;
  gap: var(--s-2) var(--s-5);
  margin-block: 2em;
  padding-block: var(--s-4) var(--s-5);
  border-top: 2px solid var(--league);
  border-bottom: 1px solid var(--line);
}
.prose > .pull-stat + * { margin-top: 0; }
.pull-stat__value {
  font-family: var(--font-num);
  font-stretch: 78%;
  font-weight: 800;
  font-size: clamp(3.5rem, 2.4rem + 4.5vw, 5.75rem);
  line-height: .9;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--league-ink);
  overflow-wrap: anywhere;
}
.pull-stat__label {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-stretch: 104%;
  line-height: 1.45;
  color: var(--muted);
  max-width: 38ch;
}
@media (min-width: 600px) {
  .pull-stat {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }
  .pull-stat__label { padding-bottom: .35em; }
}

.article__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.more-analysis { padding-top: 0; }

/* Loading skeleton — mirrors the article header + first paragraphs. */
.article-skeleton > div { display: grid; padding-top: var(--s-7); }
.article-skeleton .skeleton { display: block; }
.article-skeleton__tag { width: 64px; height: 22px; }
.article-skeleton__title { height: clamp(2rem, 1.2rem + 3.2vw, 3.8rem); margin-top: var(--s-3); }
.article-skeleton__dek { height: 1.2rem; margin-top: var(--s-3); }
.article-skeleton__byline { height: .875rem; margin-top: var(--s-5); }
.article-skeleton__rule { display: block; height: 2px; margin-top: var(--s-5); margin-bottom: var(--s-6); background: var(--line); }
.article-skeleton__p { height: 1.05rem; margin-top: .8rem; }
.article-skeleton__gap { display: block; height: var(--s-4); }

/* Not found */
.article-missing { padding-block: var(--s-8) var(--s-6); }
.article-missing .page-title { margin-top: var(--s-3); }
.article-missing .dek { margin-top: var(--s-4); }
.article-missing .btn { margin-top: var(--s-6); }


/* ===================================================================== About */

.about-page { padding-bottom: var(--s-8); }
.about-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
}
.about-toc a {
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.about-toc a:hover { color: var(--text); }

.glance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-4);
  margin: var(--s-2) 0 0;
}
.glance__item {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
  min-width: 0;
}
.glance__item:first-child { border-top: 2px solid var(--accent); padding-top: calc(var(--s-3) - 1px); }
.glance dd { margin: 0; }
.glance__value {
  display: block;
  margin-top: var(--s-2);
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
  line-height: .95;
}
.glance__note {
  margin-top: var(--s-2);
  font-size: .8125rem;
  color: var(--muted);
}

.about-section {
  padding-top: var(--s-8);
  scroll-margin-top: calc(var(--header-h) + var(--s-2));
}
.about-section > h2 { margin-top: var(--s-3); }
.about-section > .prose { margin-top: var(--s-5); }
.about-section > .prose + .prose,
.about-section > * + .prose { margin-top: var(--s-6); }
.about-prose h3 { font-size: 1.25rem; }

.formula {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.formula__main {
  margin-top: var(--s-3);
  font-family: var(--font-num);
  font-stretch: 86%;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.formula__leagues {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (min-width: 600px) {
  .formula__leagues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.formula__league {
  padding-left: var(--s-3);
  border-left: 2px solid var(--league);
  font-family: var(--font-num);
  font-stretch: 90%;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
}
.formula__league sup { font-size: .7em; line-height: 0; }
.formula__tag {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-weight: 650;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--league-ink);
}
.formula__key {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.freshness {
  margin: var(--s-5) 0 0;
  border-top: 1px solid var(--line-strong);
  max-width: var(--measure);
}
.freshness__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.freshness dt { font-weight: 600; }
.freshness dd { margin: 0; color: var(--muted); font-size: .9375rem; }
.freshness dd .num { font-size: 1.25rem; color: var(--text); margin-right: .15em; }

.disclaimer {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
  max-width: var(--measure);
}
.disclaimer p + p { margin-top: var(--s-3); }


/* ===================================================================== 404 */

.notfound { padding-block: var(--s-7) var(--s-9); }
.notfound__art {
  position: relative;
  height: clamp(170px, 26vw, 280px);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.notfound__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--muted);
}
.notfound__vp { fill: var(--accent); }
.notfound__puck { fill: var(--accent); }
.notfound__code {
  position: absolute;
  left: 0;
  bottom: -.06em;
  margin: 0;
  font-weight: 800;
  font-size: clamp(7rem, 4rem + 14vw, 15rem);
  line-height: .8;
  letter-spacing: -0.02em;
  color: var(--text);
}
.notfound .page-title { margin-top: var(--s-3); }
.notfound .dek { margin-top: var(--s-4); }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}