/**
 * AutoArty typography — serif editorial.
 *
 * SUPERSEDES the type half of the Stitch design system. Stitch specified Anton
 * (condensed, uppercase display) + Archivo Narrow + Libre Franklin. The founder's
 * spec replaces that with a serif editorial voice. Stitch's COLOUR, SHAPE and
 * LAYOUT are unchanged — Race Red, Asphalt Black, Paper White, 0px radius, hard
 * offsets, 8px rhythm, 1280px container.
 *
 * Spec:
 *   H1 / article title   serif, 32–36px (2–2.25rem), bold
 *   H2 / H3              serif for editorial section titles, 20–24px, semi/bold
 *                        sans for category labels and badges
 *   Body                 sans, 15–16px, 400, line-height 1.5–1.6
 *   Modal / product      title sans bold 16–18px · score sans bold 36–40px
 *                        CTA sans bold 14–15px · bullets sans regular 13–14px
 *   Meta / breadcrumb    sans or italic, 12–13px, muted grey
 *
 * Times New Roman leads the serif stack. Like Georgia it is a system font, so
 * headings still paint on the first frame with no webfont request — the site
 * downloads one family (Inter) rather than three.
 *
 * Note on the pairing: Times is a narrower, higher-contrast face than Georgia
 * and was cut for newsprint at small sizes. At the 32-36px H1 in this spec it
 * reads noticeably lighter and tighter. Georgia is kept next in the stack as
 * the fallback.
 *
 * Loaded last, so it wins on the cascade without !important.
 */

/* ============================================================
   TOKENS — redefined
   ============================================================ */
:root {
	--font-serif: 'Times New Roman', Times, Georgia, 'PT Serif', serif;
	--font-sans:  Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Stitch's four font tokens now resolve to the new pair, so every
	   component that already uses them inherits this change for free. */
	--font-display:  var(--font-serif);
	--font-headline: var(--font-serif);
	--font-body:     var(--font-sans);
	--font-util:     var(--font-sans);

	/* --- type scale, per spec ---------------------------------------- */
	--t-h1:        2.25rem;   /* 36px */
	--t-h1-mobile: 2rem;      /* 32px */
	--t-h2:        1.5rem;    /* 24px */
	--t-h3:        1.25rem;   /* 20px */
	--t-body:      1rem;      /* 16px */
	--t-body-sm:   0.9375rem; /* 15px */
	--t-meta:      0.8125rem; /* 13px */
	--t-caption:   0.75rem;   /* 12px */

	--lh-body:     1.6;
	--lh-heading:  1.25;

	/* Stitch's own size tokens realigned so untouched components follow. */
	--display-xl:         2.25rem;  --display-xl-lh:         1.2;
	--headline-lg:        2.25rem;  --headline-lg-lh:        1.2;
	--headline-lg-mobile: 2rem;     --headline-lg-mobile-lh: 1.25;
	--headline-md:        1.5rem;   --headline-md-lh:        1.3;
	--subheading:         1.25rem;  --subheading-lh:         1.4;
	--body-lg:            1rem;     --body-lg-lh:            1.6;
	--body-md:            0.9375rem; --body-md-lh:           1.6;
	--label-bold:         0.8125rem; --label-bold-lh:        1.4;
	--caption:            0.75rem;  --caption-lh:            1.4;
}

/* ============================================================
   BASE
   ============================================================ */
body,
.stitch,
.stitch p,
.aa-prose {
	font-family: var(--font-sans);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	font-weight: 400;
}

/* ============================================================
   HEADINGS — serif, sentence case
   ============================================================
   Stitch uppercased every heading. Serif display type is set in sentence
   case; uppercasing a serif at 36px reads as shouting and costs legibility.
   Uppercase survives only where the spec keeps it: labels and badges.
   ------------------------------------------------------------ */
.stitch h1, .stitch h2, .stitch h3, .stitch h4, .stitch h5, .stitch h6,
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .widget-title, .wp-block-heading,
.aa-article__title, .aa-archive__title,
.stitch-card__title, .stitch-list__title, .stitch-hero__title,
.aa-feature__title, .aa-feeditem__title, .aa-toolcta__title,
.aa-tile__label, .aa-empty h2 {
	font-family: var(--font-serif);
	text-transform: none;
	letter-spacing: normal;
	line-height: var(--lh-heading);
}

/* --- H1 / article + archive titles -------------------------------- */
h1,
.aa-article__title,
.aa-archive__title,
.stitch-hero__title {
	font-size: var(--t-h1-mobile);
	font-weight: 700;
	color: var(--asphalt-black);
}

@media (min-width: 768px) {
	h1,
	.aa-article__title,
	.aa-archive__title,
	.stitch-hero__title { font-size: var(--t-h1); }
}

/* The hero sits on a dark photo, so its headline must stay white.
   `.stitch h1` in stitch.css is (0,1,1) and out-specifies a bare
   `.stitch-hero__title` (0,1,0), which painted it black on the photo.
   Matching the class twice raises this to (0,2,0) without !important. */
.stitch .stitch-hero__title,
.stitch-hero .stitch-hero__title { color: var(--paper-white); }

/* --- H2 / H3 ------------------------------------------------------- */
h2,
.aa-prose h2 {
	font-size: var(--t-h2);
	font-weight: 700;
}

h3,
.aa-prose h3,
.stitch-card__title,
.aa-feeditem__title,
.aa-list__title {
	font-size: var(--t-h3);
	font-weight: 600;
}

h4, .aa-prose h4 {
	font-size: 1.0625rem;   /* 17px */
	font-weight: 600;
}

/* Section headers stay sans — they are labels, not editorial headings. */
.stitch-sechead h2,
.t-subhead {
	font-family: var(--font-sans);
	font-size: var(--t-meta);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ============================================================
   BODY / PROSE
   ============================================================ */
.aa-prose {
	font-size: var(--t-body);
	line-height: var(--lh-body);
}

.aa-prose h2 {
	font-family: var(--font-serif);
	font-size: var(--t-h2);
	text-transform: none;
	letter-spacing: normal;
}

.aa-prose h3 {
	font-family: var(--font-serif);
	font-size: var(--t-h3);
	text-transform: none;
}

.aa-prose h4 {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}

.aa-prose li { font-size: var(--t-body); }

.aa-tldr p,
.aa-article__standfirst,
.aa-archive__standfirst {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ============================================================
   LABELS, BADGES, CHIPS — sans, uppercase, small
   ============================================================ */
.stitch-chip,
.aa-article__kicker,
.aa-archive__kicker,
.stitch-card__kicker,
.aa-feature__chip,
.t-label,
.aa-tile__label,
.aa-subnav a,
.stitch-btn,
.aa-btn,
.aa-mainnav a,
.stitch-sechead__more,
.aa-footer__col a,
.aa-pagination .page-numbers,
.stitch-table th,
.aa-prose thead th {
	font-family: var(--font-sans);
	letter-spacing: 0.04em;
}

.stitch-chip,
.aa-article__kicker,
.aa-archive__kicker,
.stitch-card__kicker,
.aa-feature__chip {
	font-size: var(--t-caption);
	font-weight: 700;
	text-transform: uppercase;
}

/* Buttons: sans, bold, 14–15px */
.stitch-btn,
.aa-btn,
.aa-btn--sub,
.aa-topbar__signin,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	font-family: var(--font-sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
}

/* ============================================================
   META, BREADCRUMBS, CAPTIONS — 12–13px muted
   ============================================================ */
.aa-crumbs,
.aa-crumbs a,
.stitch-card__meta,
.aa-trustbar__item,
.aa-byline__role,
.aa-dateline,
.aa-prose figcaption,
.aa-method p,
.aa-footer__legal p,
.aa-footer__legal a,
.t-caption {
	font-family: var(--font-sans);
	font-size: var(--t-meta);
	line-height: 1.5;
	color: var(--rim-gray);
	letter-spacing: normal;
}

.aa-crumbs,
.aa-trustbar__item,
.stitch-card__kicker { text-transform: uppercase; }

.aa-prose figcaption { font-style: italic; text-transform: none; }

.aa-byline__name {
	font-family: var(--font-sans);
	font-size: var(--t-meta);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--asphalt-black);
}

/* ============================================================
   WORDMARK — the one place a display face still earns its keep
   ============================================================ */
.aa-wordmark,
.aa-footer__brand {
	font-family: var(--font-serif);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* ============================================================
   PRODUCT / MODAL BLOCKS — spec'd sizes
   ============================================================ */
.aa-product-title {
	font-family: var(--font-sans);
	font-size: 1.125rem;      /* 18px */
	font-weight: 700;
	line-height: 1.35;
}

.aa-product-score {
	font-family: var(--font-sans);
	font-size: 2.375rem;      /* 38px */
	font-weight: 700;
	line-height: 1;
	color: var(--race-red);
}

.aa-product-cta {
	font-family: var(--font-sans);
	font-size: 0.9375rem;     /* 15px */
	font-weight: 700;
}

.aa-product-features li {
	font-family: var(--font-sans);
	font-size: 0.875rem;      /* 14px */
	font-weight: 400;
	line-height: 1.55;
}