/* typography — headings, eyebrows, body copy.
 *
 * Rules that are not the editor's choice:
 *   headings  Rajdhani 700, uppercase, line-height 0.98-1.05
 *   eyebrows  IBM Plex Mono, uppercase, 10-11px, 0.16-0.18em tracking
 *   body      never below 15px
 */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: var(--wp--preset--font-size--display, 76px); line-height: 0.98; letter-spacing: 0.01em; }
h2 { font-size: var(--wp--preset--font-size--title, 46px); line-height: 1.04; }
h3 { font-size: var(--wp--preset--font-size--subtitle, 34px); line-height: 1.05; letter-spacing: 0.03em; }
h4 { font-size: var(--wp--preset--font-size--card, 26px); line-height: 1.1;  letter-spacing: 0.03em; }
h5 { font-size: var(--wp--preset--font-size--lead, 19px); letter-spacing: 0.04em; }
h6 { font-size: var(--wp--preset--font-size--lg, 16px); letter-spacing: 0.04em; }

p {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 15px);
	line-height: 1.6;
	text-wrap: pretty;
}

/* Eyebrow on bone: red. */
.is-style-tci-eyebrow,
.tci-eyebrow {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-sm, 11px);
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

/* Eyebrow on graphite: brass. Gold never touches light grounds. */
.is-style-tci-eyebrow-brass {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-sm, 11px);
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
}

/* Data label in the dark info bar: 10px, 0.16em tracking, tertiary. */
.tci-label {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-xs, 10px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tci-on-graphite-3);
}

.is-style-tci-lead {
	font-size: var(--wp--preset--font-size--lead, 19px);
	line-height: 1.65;
	max-width: 60ch;
}

.is-style-tci-block-graphite .is-style-tci-lead,
.is-style-tci-block-graphite-deep .is-style-tci-lead {
	color: var(--tci-on-graphite-2);
}

.is-style-tci-note {
	font-size: var(--wp--preset--font-size--xs, 13px);
	color: var(--wp--preset--color--text-muted);
}

/* 01, 02, 03… in mono red, as on the service cards. */
.is-style-tci-numbered {
	list-style: none;
	padding: 0;
	counter-reset: tci-item;
}

.is-style-tci-numbered > li {
	counter-increment: tci-item;
	position: relative;
	padding-left: 34px;
}

.is-style-tci-numbered > li::before {
	content: counter(tci-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-sm, 11px);
	color: var(--wp--preset--color--red);
}

/* Part numbers and references are always mono. */
.tci-part-number,
code,
kbd {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--xs, 13px);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
}

/* The tagline. Brass on graphite, red on bone. Never locked up with the logo:
   the shield already carries its descriptor. */
.tci-tagline {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-sm, 11px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

.is-style-tci-block-graphite .tci-tagline,
.is-style-tci-block-graphite-deep .tci-tagline {
	color: var(--wp--preset--color--brass);
}

@media (max-width: 1024px) {
	h1 { font-size: 52px; }
	h2 { font-size: 36px; }
	h3 { font-size: 28px; }
}

@media (max-width: 640px) {
	h1 { font-size: 40px; }
	h2 { font-size: 30px; }
	h4 { font-size: 22px; }
}