/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — BBC GEL type scale
   4 responsive groups: A (<400) B (400-599) C (600-899) D (≥900)
   ═══════════════════════════════════════════════════════════════ */

/*  Name           | <400    | ≥400    | ≥600    | ≥900    | Font            */
/*  Canon          | 32/36   | 36/40   | 44/48   | 52/56   | Serif 900      */
/*  Trafalgar      | 24/28   | 26/30   | 30/34   | 36/40   | Serif 700      */
/*  Paragon        | 22/26   | 24/28   | 26/30   | 28/32   | Serif 700      */
/*  Double Pica    | 20/24   | 20/24   | 22/26   | 26/30   | Serif 700      */
/*  Great Primer   | 18/22   | 18/22   | 18/22   | 21/26   | Sans 400       */
/*  Pica           | 15/20   | 15/20   | 16/22   | 18/24   | Sans 400       */
/*  Long Primer    | 14/18   | 14/18   | 14/18   | 15/20   | Sans 400       */
/*  Brevier        | 13/16   | 13/16   | 13/16   | 14/18   | Sans 500       */
/*  Minion         | 12/16   | 12/16   | 12/16   | 12/16   | Sans 400       */

/* Group A — base */
.canon          { font: 900 2rem/2.25rem var(--serif); }
.trafalgar      { font: 700 1.5rem/1.75rem var(--serif); }
.paragon        { font: 700 1.375rem/1.625rem var(--serif); }
.double-pica    { font: 700 1.25rem/1.5rem var(--serif); }
.great-primer   { font: 400 1.125rem/1.375rem var(--sans); }
.pica           { font: 400 0.9375rem/1.25rem var(--sans); }
.long-primer    { font: 400 0.875rem/1.125rem var(--sans); }
.brevier        { font: 500 0.8125rem/1rem var(--sans); }
.minion         { font: 400 0.75rem/1rem var(--sans); }

/* Group B ≥400 */
@media (min-width: 400px) {
	.canon      { font-size: 2.25rem; line-height: 2.5rem; }
	.trafalgar  { font-size: 1.625rem; line-height: 1.875rem; }
	.paragon    { font-size: 1.5rem; line-height: 1.75rem; }
}

/* Group C ≥600 */
@media (min-width: 600px) {
	.canon       { font-size: 2.75rem; line-height: 3rem; }
	.trafalgar   { font-size: 1.875rem; line-height: 2.125rem; }
	.paragon     { font-size: 1.625rem; line-height: 1.875rem; }
	.double-pica { font-size: 1.375rem; line-height: 1.625rem; }
	.pica        { font-size: 1rem; line-height: 1.375rem; }
}

/* Group D ≥900 */
@media (min-width: 900px) {
	.canon        { font-size: 3.25rem; line-height: 3.5rem; }
	.trafalgar    { font-size: 2.25rem; line-height: 2.5rem; }
	.paragon      { font-size: 1.75rem; line-height: 2rem; }
	.double-pica  { font-size: 1.625rem; line-height: 1.875rem; }
	.great-primer { font-size: 1.3125rem; line-height: 1.625rem; }
	.pica         { font-size: 1.125rem; line-height: 1.5rem; }
	.long-primer  { font-size: 0.9375rem; line-height: 1.25rem; }
	.brevier      { font-size: 0.875rem; line-height: 1.125rem; }
}

/* ── Utility ── */
.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans); }
.bold  { font-weight: 700; }
.black { font-weight: 900; }
.measure { max-width: var(--measure); }

/* ── Section label (replaces old Poppins italic kicker) ── */
.section-label {
	font: 700 0.75rem/1 var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ── Tag (inline category label) ── */
.tag {
	display: inline-block;
	font: 700 0.6875rem/1 var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.2em 0.5em 0.15em;
	border-radius: 2px;
}

.tag--brand {
	background: var(--kk-brand-red);
	color: var(--kk-white);
}

.tag--subtle {
	background: rgba(0,0,0,0.55);
	color: var(--kk-white);
}

/* ── Article kicker (pre-headline teaser) ── */
.article-kicker {
	font: 500 1.0625rem/1.4 var(--sans);
	color: var(--kk-ink-subtle);
	margin-bottom: var(--s2);
}