/**
 * AutoArty — "Automotive Editorial Excellence" design system.
 *
 * STRICT implementation of autoarty-plan/design/stitch-design-system/.
 * Every token below is copied verbatim from DESIGN.md front-matter and the
 * tailwind.config block in code.html. Do not introduce a colour, size or
 * radius that is not defined here.
 *
 * Written as plain CSS rather than the Tailwind play-CDN that code.html used:
 * the CDN compiles at runtime in the browser, which is render-blocking and
 * unacceptable on a page already measured at 1.52s TTFB. The output is the
 * same design, the same values, without shipping a compiler to every visitor.
 *
 * This layer is authoritative. It supersedes the dark carbon/amber palette in
 * autoarty-drive/style.css wherever the two disagree.
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
	/* --- action trio ------------------------------------------------ */
	--race-red:        #E11212;
	--asphalt-black:   #1A1A1A;
	--paper-white:     #FFFFFF;

	/* --- primary ---------------------------------------------------- */
	--primary:              #b50006;
	--on-primary:           #ffffff;
	--primary-container:    #e11212;
	--on-primary-container: #fff4f3;
	--surface-tint:         #c00007;
	--inverse-primary:      #ffb4a9;

	/* --- surfaces --------------------------------------------------- */
	--surface:                    #f9f9f9;
	--surface-dim:                #dadada;
	--surface-bright:             #f9f9f9;
	--surface-container-lowest:   #ffffff;
	--surface-container-low:      #f3f3f3;
	--surface-container:          #eeeeee;
	--surface-container-high:     #e8e8e8;
	--surface-container-highest:  #e2e2e2;
	--surface-variant:            #e2e2e2;
	--background:                 #f9f9f9;

	/* --- ink -------------------------------------------------------- */
	--on-surface:         #1a1c1c;
	--on-surface-variant: #5e3f3b;
	--on-background:      #1a1c1c;
	--inverse-surface:    #2f3131;
	--inverse-on-surface: #f1f1f1;
	--rim-gray:           #666666;

	/* --- lines ------------------------------------------------------ */
	--outline:         #936e69;
	--outline-variant: #e8bcb6;

	/* --- secondary / tertiary / error -------------------------------- */
	--secondary:              #5e5e5e;
	--on-secondary:           #ffffff;
	--secondary-container:    #e2e2e2;
	--on-secondary-container: #646464;
	--tertiary:               #0056b0;
	--on-tertiary:            #ffffff;
	--tertiary-container:     #006ede;
	--error:                  #ba1a1a;
	--on-error:               #ffffff;

	--brake-light-glow: rgba(225, 18, 18, 0.1);

	/* --- type ------------------------------------------------------- */
	--font-display:  'Anton', Impact, 'Haettenschweiler', sans-serif;
	--font-headline: 'Anton', Impact, 'Haettenschweiler', sans-serif;
	--font-util:     'Archivo Narrow', 'Arial Narrow', system-ui, sans-serif;
	--font-body:     'Libre Franklin', system-ui, -apple-system, sans-serif;

	--display-xl:          80px;  --display-xl-lh:          84px;
	--headline-lg:         48px;  --headline-lg-lh:         52px;
	--headline-lg-mobile:  36px;  --headline-lg-mobile-lh:  40px;
	--headline-md:         32px;  --headline-md-lh:         36px;
	--subheading:          18px;  --subheading-lh:          24px;
	--body-lg:             18px;  --body-lg-lh:             28px;
	--body-md:             16px;  --body-md-lh:             24px;
	--label-bold:          14px;  --label-bold-lh:          16px;
	--caption:             12px;  --caption-lh:             16px;

	/* --- space ------------------------------------------------------ */
	--unit:            8px;
	--container-max:   1200px;
	--gutter:          24px;
	--margin-mobile:   16px;
	--margin-desktop:  40px;
	--section-gap:     80px;

	/* --- shape: strictly sharp -------------------------------------- */
	--radius: 0;

	/* --- elevation: tonal layers and hard offsets, never soft blur --- */
	--pop-black: 4px 4px 0 var(--asphalt-black);
	--pop-red:   4px 4px 0 var(--race-red);
}

/* ============================================================
   BASE — overrides the dark child theme site-wide
   ============================================================ */
body,
body.home,
.site {
	background: var(--surface-bright) !important;
	color: var(--on-surface) !important;
	font-family: var(--font-body) !important;
	font-size: var(--body-md);
	line-height: var(--body-md-lh);
	-webkit-font-smoothing: antialiased;
}

.stitch *,
.stitch *::before,
.stitch *::after { box-sizing: border-box; }

/* Sharp everywhere. The only curves come from photography. */
.stitch :where(a, button, input, select, textarea, img, .stitch-card, .stitch-chip) {
	border-radius: var(--radius);
}

.stitch h1, .stitch h2, .stitch h3, .stitch h4 {
	font-family: var(--font-headline);
	font-weight: 400;
	text-transform: none;
	color: var(--asphalt-black);
	margin: 0;
	letter-spacing: -0.01em;
}

.stitch p { color: var(--on-surface); margin: 0; }

/* Only UNCLASSED links inherit their colour.
   `.stitch a` would be specificity (0,1,1) and silently beat every
   single-class component rule — `.aa-wordmark`, `.stitch-sechead__more`,
   `.aa-footer__brand` are all (0,1,0) — painting them body-text black on a
   black bar. Scoping to :not([class]) leaves any classed link in charge of
   its own colour. */
.stitch a { text-decoration: none; }
.stitch a:not([class]) { color: inherit; }

/* ============================================================
   TYPE SCALE
   ============================================================ */
.t-display   { font-family: var(--font-display); font-size: var(--headline-lg-mobile);
               line-height: var(--headline-lg-mobile-lh); letter-spacing: -0.02em; }
.t-headline  { font-family: var(--font-headline); font-size: var(--headline-md);
               line-height: var(--headline-md-lh); }
.t-subhead   { font-family: var(--font-util); font-size: var(--subheading);
               line-height: var(--subheading-lh); letter-spacing: 0.05em; font-weight: 700;
               text-transform: uppercase; }
.t-body-lg   { font-family: var(--font-body); font-size: var(--body-lg); line-height: var(--body-lg-lh); }
.t-body      { font-family: var(--font-body); font-size: var(--body-md); line-height: var(--body-md-lh); }
.t-label     { font-family: var(--font-util); font-size: var(--label-bold);
               line-height: var(--label-bold-lh); letter-spacing: 0.02em; font-weight: 700;
               text-transform: uppercase; }
.t-caption   { font-family: var(--font-util); font-size: var(--caption);
               line-height: var(--caption-lh); text-transform: uppercase; }

@media (min-width: 768px) {
	.t-display  { font-size: var(--display-xl); line-height: var(--display-xl-lh); }
	.t-headline { font-size: var(--headline-md); }
}

/* ============================================================
   LAYOUT
   ============================================================ */
#page,
.site,
#content,
.site-content,
#primary,
.site-main,
.content-area,
.aa-home,
.stitch {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

.site-content {
	display: block !important;
}

.stitch-wrap {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto !important;
	margin-right: auto !important;
	margin-inline: auto !important;
	padding-inline: var(--margin-mobile);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.stitch-wrap { padding-inline: var(--margin-desktop); }
}

.stitch-section {
	width: 100%;
	margin-bottom: var(--section-gap);
}

/* Section header: red icon rule, black 2px underline. */
.stitch-sechead {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	padding-bottom: var(--unit);
	margin-bottom: calc(var(--unit) * 3);
	border-bottom: 2px solid var(--asphalt-black);
}

.stitch-sechead__mark {
	width: 10px;
	height: 22px;
	background: var(--race-red);
	flex: 0 0 auto;
}

.stitch-sechead h2 { flex: 1; }

.stitch-sechead__more {
	font-family: var(--font-util);
	font-size: var(--label-bold);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--race-red);
	white-space: nowrap;
}

.stitch-sechead__more:hover { color: var(--asphalt-black); }

/* Alternating tonal bands instead of shadows. */
.stitch-band {
	background: var(--surface-container-low);
	border-block: 2px solid var(--asphalt-black);
	padding-block: calc(var(--unit) * 6);
	margin-bottom: var(--section-gap);
}

/* Blueprint dot field used behind the research band in code.html. */
.stitch-band--dotted { position: relative; overflow: hidden; }

.stitch-band--dotted::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.05;
	background-image: radial-gradient(var(--asphalt-black) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.stitch-band--dotted > * { position: relative; z-index: 1; }

.stitch-grid { display: grid; gap: var(--gutter); }
.stitch-grid--12 { grid-template-columns: repeat(12, 1fr); }
.stitch-grid--4  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.stitch-grid--3  { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.stitch-grid--5  { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

@media (max-width: 767px) {
	.stitch-grid--12 { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* --- buttons: solid red, or ghost with a 2px black border ----------- */
.stitch-btn {
	display: inline-block;
	font-family: var(--font-headline);
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	padding: 14px 28px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease-in-out, color 0.15s ease-in-out,
		transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.stitch-btn--primary {
	background: var(--race-red);
	color: var(--paper-white);
	border-color: var(--race-red);
}

.stitch-btn--primary:hover {
	background: var(--surface-tint);
	border-color: var(--surface-tint);
	color: var(--paper-white);
}

.stitch-btn--ghost {
	background: transparent;
	color: var(--asphalt-black);
	border-color: var(--asphalt-black);
}

.stitch-btn--ghost:hover {
	background: var(--asphalt-black);
	color: var(--paper-white);
}

/* --- chip / tag: rectangular, red for performance data -------------- */
.stitch-chip {
	display: inline-block;
	font-family: var(--font-util);
	font-size: var(--label-bold);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 4px 12px;
	background: var(--race-red);
	color: var(--paper-white);
	box-shadow: var(--pop-black);
}

.stitch-chip--quiet {
	background: transparent;
	color: var(--race-red);
	box-shadow: none;
	padding: 0;
}

/* --- editorial card: bordered, mechanical hover, no soft shadow ----- */
.stitch-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--paper-white);
	border: 1px solid var(--surface-dim);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
		transform 0.15s ease-in-out;
}

.stitch-card:hover {
	border-color: var(--race-red);
	box-shadow: var(--pop-red);
	transform: translate(-2px, -2px);
}

.stitch-card--featured { border-top: 4px solid var(--race-red); }

.stitch-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-variant);
	border-bottom: 1px solid var(--surface-dim);
}

.stitch-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease-in-out;
}

.stitch-card:hover .stitch-card__media img { transform: scale(1.05); }

/* No asset yet — a technical hatch, never a broken image. */
.stitch-card__placeholder {
	width: 100%;
	height: 100%;
}

/* `.is-empty` is set by the onerror handler when an attachment's file is
   missing from disk. It must ONLY repaint: these elements already carry their
   own box (the list thumb is a fixed 96px square), so setting width/height
   here blows the row layout apart. */
.stitch-card__placeholder,
.stitch-card__media.is-empty,
.stitch-list__thumb.is-empty,
.stitch-hero__bg.is-empty {
	background:
		repeating-linear-gradient(135deg,
			transparent 0 10px, rgba(26, 26, 26, 0.05) 10px 20px),
		var(--surface-variant);
}

.stitch-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--unit);
	padding: calc(var(--unit) * 2);
	flex: 1;
}

.stitch-card__kicker {
	font-family: var(--font-util);
	font-size: var(--caption);
	line-height: var(--caption-lh);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--race-red);
}

.stitch-card__title {
	font-family: var(--font-headline);
	font-size: 24px;
	line-height: 1.1;
	text-transform: none;
	color: var(--asphalt-black);
}

.stitch-card:hover .stitch-card__title { color: var(--race-red); }

.stitch-card__meta {
	margin-top: auto;
	font-family: var(--font-util);
	font-size: var(--caption);
	line-height: var(--caption-lh);
	text-transform: uppercase;
	color: var(--rim-gray);
}

/* --- hero: full-bleed photo, black scrim, red top rule -------------- */
.stitch-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 400px;
	overflow: hidden;
	background: var(--asphalt-black);
	border-top: 4px solid var(--race-red);
}

@media (min-width: 768px) {
	.stitch-hero { min-height: 600px; }
}

.stitch-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease-in-out;
}

.stitch-hero:hover .stitch-hero__bg { transform: scale(1.05); }

.stitch-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		var(--asphalt-black) 0%, transparent 55%, transparent 100%);
	opacity: 0.9;
}

.stitch-hero__body {
	position: relative;
	width: 100%;
	padding: calc(var(--unit) * 3);
	color: var(--paper-white);
}

@media (min-width: 768px) {
	.stitch-hero__body { padding: calc(var(--unit) * 5); }
}

.stitch-hero__title {
	font-family: var(--font-display);
	font-size: var(--headline-lg-mobile);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--paper-white);
	max-width: 20ch;
}

@media (min-width: 768px) {
	.stitch-hero__title { font-size: var(--headline-lg); line-height: var(--headline-lg-lh); }
}

.stitch-hero:hover .stitch-hero__title { color: var(--race-red); }

.stitch-hero__lede {
	margin-top: calc(var(--unit) * 2);
	max-width: 60ch;
	font-family: var(--font-body);
	font-size: var(--body-lg);
	line-height: var(--body-lg-lh);
	color: var(--inverse-on-surface);
}

/* --- list panel: bordered stack, used for "Latest News" ------------- */
.stitch-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--paper-white);
	border: 2px solid var(--surface-dim);
}

.stitch-list__item {
	display: flex;
	gap: calc(var(--unit) * 2);
	padding: calc(var(--unit) * 2);
	border-bottom: 1px solid var(--surface-dim);
	transition: background 0.15s ease-in-out;
}

.stitch-list__item:last-child { border-bottom: 0; }
.stitch-list__item:hover { background: var(--surface-container-low); }

.stitch-list__thumb {
	width: 96px;
	height: 96px;
	flex: 0 0 auto;
	overflow: hidden;
	border: 1px solid var(--asphalt-black);
	background: var(--surface-variant);
}

.stitch-list__thumb img { width: 100%; height: 100%; object-fit: cover; }

.stitch-list__title {
	font-family: var(--font-headline);
	font-size: 20px;
	line-height: 1.1;
	text-transform: none;
	color: var(--asphalt-black);
}

.stitch-list__item:hover .stitch-list__title { color: var(--race-red); }

/* --- inputs: 1px black box, red focus ------------------------------- */
.stitch-field {
	width: 100%;
	padding: 12px 16px;
	background: var(--paper-white);
	border: 1px solid var(--surface-dim);
	color: var(--on-surface);
	font-family: var(--font-body);
	font-size: var(--body-md);
	appearance: none;
}

.stitch-field:focus {
	outline: none;
	border-color: var(--race-red);
	box-shadow: inset 0 0 0 1px var(--race-red);
}

/* --- spec table: black header, striped rows ------------------------- */
.stitch-table { width: 100%; border-collapse: collapse; }

.stitch-table th {
	background: var(--asphalt-black);
	color: var(--paper-white);
	font-family: var(--font-util);
	font-size: var(--label-bold);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 16px;
}

.stitch-table td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--surface-dim);
	font-family: var(--font-body);
	font-size: var(--body-md);
	color: var(--on-surface);
}

.stitch-table tbody tr:nth-child(even) td { background: var(--surface-container-low); }

/* --- index list: dense topic directory ------------------------------ */
.stitch-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0 var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stitch-index a {
	display: flex;
	justify-content: space-between;
	gap: var(--unit);
	padding: 10px 0;
	border-bottom: 1px solid var(--surface-dim);
	font-family: var(--font-util);
	font-size: var(--label-bold);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--asphalt-black);
}

.stitch-index a:hover { color: var(--race-red); border-bottom-color: var(--race-red); }
.stitch-index span { color: var(--rim-gray); font-variant-numeric: tabular-nums; }

/* --- newsletter band: inverse surface ------------------------------- */
.stitch-cta {
	background: var(--asphalt-black);
	color: var(--paper-white);
	padding-block: calc(var(--unit) * 7);
	border-top: 4px solid var(--race-red);
}

.stitch-cta a:not([class]) { color: var(--paper-white); text-decoration: underline; }
.stitch-cta h2 { color: var(--paper-white); }
.stitch-cta p  { color: var(--inverse-on-surface); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.stitch a:focus-visible,
.stitch button:focus-visible,
.stitch input:focus-visible,
.stitch select:focus-visible {
	outline: 3px solid var(--race-red);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.stitch *,
	.stitch *::before,
	.stitch *::after {
		transition: none !important;
		animation: none !important;
	}
	.stitch-card:hover { transform: none; }
}