/* ═══════════════════════════════════════════════════════════════════════
   DEFENCESPLIT ARTICLE THEME — the master stylesheet for every article.

   Every article page loads, in this order:
     1. the shared Google Fonts link (see ARTICLE-TEMPLATE in AGENTS.md)
     2. style.css   — site chrome: colours, masthead, footer, cookie banner
     3. article.css — this file: everything inside <main class="article">
     4. a tiny inline <style> that sets ONLY the club accent:
          :root { --club: #EF0107; --club-dim: #b30106; }
        --club     = brand colour, used for rules/borders/chart accents
        --club-dim = darker shade, used for text (must stay readable on
                     the cream background — aim for 4.5:1 contrast)

   Typography convention (chosen for comfortable long-form reading):
     Headline ........ Playfair Display 700, 34–48px
     Standfirst ...... Source Serif 4 italic, 21px
     Body ............ Source Serif 4 regular, 19px / 1.7, ~680px measure
     Section heads ... Playfair Display 700, 26px, with a small Inter label
     Labels/meta ..... Inter 11–12px uppercase (never smaller than 11px)
     Data (tables) ... Inter 13–14px with tabular numbers

   Images: one convention — inside the text column, 16:9 crop, caption
   underneath (<figure class="article-figure">). No full-bleed banners.
   ═══════════════════════════════════════════════════════════════════════ */

/* Defaults only — each article's inline <style> (loaded after this file)
   overrides these on :root. Don't redeclare them on .article, or the
   page's value would be shadowed. */
:root {
  --club: var(--accent);
  --club-dim: var(--accent);
}

.article {
  --ink: #1a1a1a;
  --ink-mid: #3a3530;
  --ink-light: var(--muted);
  --rule: var(--border);
  --card: var(--bg-card);
  --col: 680px;

  max-width: var(--col);
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--ink);
}

/* ── HEADER: meta row → headline → club line → standfirst → image ── */
.article .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}

.article .tag {
  display: inline-block;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--club-dim);
}

.article .meta-txt {
  font-size: 12px;
  color: var(--ink-light);
  letter-spacing: 0.02em;
}

.article .dot { color: var(--rule); }

/* Tag chips (base style in style.css) — matchday chip uses the club colour here. */
.article .tag-chips { margin-bottom: 0; }
.article .tag-chip--matchday { color: var(--club-dim); border-color: var(--club); }

.article .meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.article h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5.5vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}

.article .article-club {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 24px;
}

.article .standfirst {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-mid);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}

/* ── IMAGES ── */
.article .article-figure { margin: 0 0 40px; }

.article .article-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 60%;
  background: var(--card);
}

.article .article-figure figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-light);
  letter-spacing: 0.02em;
  padding-top: 8px;
}

/* Charts/diagrams (PNG converted from PNG or PDF): shown whole, never
   cropped, on a white card so chart backgrounds don't clash with the cream. */
.article .article-figure--chart img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rule);
}

/* ── BODY TEXT ── */
.article .prose p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.25em;
}

.article .prose p strong { font-weight: 600; }

.article .sec-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--club-dim);
  margin-top: 56px;
  margin-bottom: 8px;
}

.article .sec-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 20px;
}

/* ── STAT STRIP ── */
.article .stat-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--club);
  margin: 36px 0;
}

.article .stat-item {
  flex: 1;
  min-width: 130px;
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
}

.article .stat-item:last-child { border-right: none; }

.article .stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--ink);
}

/* .red / .gold kept as aliases so older markup still works — both now
   simply mean "highlight in the club colour". */
.article .stat-num.accent,
.article .stat-num.red,
.article .stat-num.gold { color: var(--club-dim); }

.article .stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--ink-light);
}

/* ── PULL QUOTE ── */
.article .pull {
  border-left: 3px solid var(--club);
  padding: 4px 0 4px 24px;
  margin: 40px 0;
}

.article .pull p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

/* ── VERDICT (closing box) ── */
.article .verdict {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--club);
  padding: 28px;
  margin: 48px 0 0;
}

.article .verdict-head {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--club-dim);
  margin-bottom: 14px;
}

.article .verdict p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin-bottom: 0.9em;
}

.article .verdict p:last-child { margin-bottom: 0; }
.article .verdict strong { font-weight: 600; color: var(--ink); }

/* ── DATA BLOCKS: charts, tables, comparison grids ── */
.article .chart-block,
.article .chart-block-flush {
  margin: 36px 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--club);
}

.article .chart-block { padding: 20px 20px 14px; }
.article .chart-block-flush { overflow-x: auto; }
.article .chart-block-flush .chart-inner { padding: 20px 20px 4px; }

.article .chart-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 4px;
}

.article .chart-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-light);
  margin-bottom: 14px;
}

.article .legend-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }

.article .leg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-mid);
}

.article .leg-sq { width: 11px; height: 11px; flex-shrink: 0; }

.article .chart-note,
.article .tbl-note,
.article .model-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-light);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: 10px;
}

.article .tbl-note { padding: 12px 20px; margin-top: 0; }

.article .tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}

.article .tbl th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-light);
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
}

.article .tbl td {
  font-size: 14px;
  color: var(--ink);
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
}

.article .tbl tbody tr:last-child td { border-bottom: none; }
.article .tbl th:last-child,
.article .tbl td:last-child { text-align: right; font-weight: 600; }

.article .pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}

.article .pill-gold,
.article .pill-accent { background: var(--club); color: #1a1a1a; }
.article .pill-plain { background: var(--bg); color: var(--ink-mid); border: 1px solid var(--rule); }

.article .data-block { margin: 36px 0; }

.article .model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
  background: var(--card);
  margin-top: 12px;
}

.article .model-col { padding: 18px 16px; border-right: 1px solid var(--rule); }
.article .model-col:last-child { border-right: none; }

.article .model-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

/* The column the article is about — highlighted with the club accent. */
.article .model-col.featured,
.article .model-col.wlv {
  background: var(--bg);
  box-shadow: inset 0 3px 0 var(--club);
}

.article .m-row { margin-bottom: 12px; }

.article .m-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 2px;
}

.article .m-val {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.article .mtag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }

.article .mtag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
}

.article .mtag-g { background: #e3efe6; color: #1a5e33; }
.article .mtag-r { background: #f6e3df; color: #8f2a1a; }

.article .model-note { border-top: none; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .article { padding: 36px 18px 72px; }
  .article .standfirst { font-size: 19px; }
  .article .prose p { font-size: 18px; }
  .article .sec-head { font-size: 23px; }
  .article .pull p { font-size: 21px; }
  .article .stat-strip { flex-direction: column; }
  .article .stat-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .article .stat-item:last-child { border-bottom: none; }
  .article .model-grid { grid-template-columns: 1fr; }
  .article .model-col { border-right: none; border-bottom: 1px solid var(--rule); }
  .article .model-col:last-child { border-bottom: none; }
}