/**
 * Article and long-form content.
 *
 * Loaded on singular views and the front page. The measure, rhythm and
 * heading scale here are the site's main reading surface.
 */

/* =================================================================== Article */

.ite-article,
.ite-page {
	padding-block: var(--ite-8) var(--ite-24);
}

.ite-article__header,
.ite-page__header {
	margin-bottom: var(--ite-12);
	padding-bottom: var(--ite-6);
	border-bottom: 1px solid var(--ite-border);
}

.ite-article__kicker {
	margin: 0 0 var(--ite-3);
	font-size: var(--ite-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ite-accent);
	display: flex;
	gap: var(--ite-2);
	align-items: center;
}

.ite-article__title,
.ite-page__title {
	margin-bottom: var(--ite-4);
	font-size: var(--ite-text-3xl);
}

@media (min-width: 48em) {
	.ite-article__title,
	.ite-page__title {
		font-size: var(--ite-text-4xl);
	}
}

.ite-article__standfirst,
.ite-page__standfirst {
	margin-bottom: var(--ite-4);
	font-size: var(--ite-text-lg);
	line-height: var(--ite-leading-snug);
	color: var(--ite-text-muted);
	max-width: 60ch;
}

/* ====================================================================== Meta */

.ite-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ite-2) var(--ite-4);
	padding-top: var(--ite-3);
	border-top: 1px solid var(--ite-border);
	font-size: var(--ite-text-xs);
	color: var(--ite-text-muted);
}

.ite-meta__dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ite-2) var(--ite-4);
}

.ite-meta__item {
	display: inline-flex;
	gap: 0.3em;
}

.ite-meta__author a {
	color: var(--ite-text);
	font-weight: 500;
}

/* ===================================================================== Media */

.ite-article__media {
	margin-bottom: var(--ite-8);
}

.ite-article__image {
	width: 100%;
	border-radius: var(--ite-radius);
}

.ite-article__caption {
	margin-top: var(--ite-2);
	font-size: var(--ite-text-xs);
	color: var(--ite-text-muted);
}

/* ==================================================================== Layout */

.ite-article__layout {
	display: grid;
	gap: var(--ite-12);
}

/* The sidebar only appears where there is genuinely room for it. Below
   this width the article runs full measure and the sidebar follows. */
@media (min-width: 64em) {
	.ite-article__layout:has(.ite-article__sidebar) {
		grid-template-columns: minmax(0, 1fr) 17rem;
	}
}

.ite-article__body,
.ite-page__body {
	min-width: 0;
}

.ite-article__sidebar {
	min-width: 0;
	font-size: var(--ite-text-sm);
}

.ite-widget {
	margin-bottom: var(--ite-6);
	padding: var(--ite-4);
	background: var(--ite-surface-2);
	border-radius: var(--ite-radius);
}

.ite-widget__title {
	margin: 0 0 var(--ite-3);
	font-size: var(--ite-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ite-text-muted);
}

/* ===================================================================== Prose */

/*
 * The prose block fills the page column, and the running text inside it
 * keeps a reading measure. A line of two hundred characters is as hard to
 * follow as a column of forty is wasteful, so the limit moves from the
 * container to the paragraphs, and tables, figures and tools use the full
 * width the container now gives them.
 */
.ite-prose {
	font-size: var(--ite-text-lg);
	line-height: var(--ite-leading);
}

.ite-prose > p,
.ite-prose > ul,
.ite-prose > ol,
.ite-prose > dl,
.ite-prose > blockquote,
.ite-prose > h2,
.ite-prose > h3,
.ite-prose > h4,
.ite-prose > .wp-block-group {
	max-width: 72ch;
}

.ite-prose > * + * {
	margin-top: var(--ite-6);
}

/* Headings get more space above than below, so each one groups with the
   text it introduces rather than floating between two blocks. */
.ite-prose h2 {
	margin-top: var(--ite-12);
	margin-bottom: var(--ite-3);
	font-size: var(--ite-text-2xl);
	scroll-margin-top: calc(var(--ite-header-h) + var(--ite-4));
}

.ite-prose h3 {
	margin-top: var(--ite-8);
	margin-bottom: var(--ite-3);
	font-size: var(--ite-text-xl);
	scroll-margin-top: calc(var(--ite-header-h) + var(--ite-4));
}

.ite-prose h4 {
	margin-top: var(--ite-6);
	margin-bottom: var(--ite-2);
	font-size: var(--ite-text-lg);
}

.ite-prose ul,
.ite-prose ol {
	padding-left: var(--ite-6);
}

.ite-prose li + li {
	margin-top: var(--ite-2);
}

.ite-prose img {
	border-radius: var(--ite-radius);
}

.ite-prose figure {
	margin-block: var(--ite-6);
}

.ite-prose figcaption {
	margin-top: var(--ite-2);
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
}

.ite-prose blockquote {
	margin-inline: 0;
	padding-left: var(--ite-4);
	border-left: 3px solid var(--ite-border-bright);
	color: var(--ite-text-muted);
}

.ite-prose code {
	padding: 0.1em 0.35em;
	background: var(--ite-surface-3);
	border-radius: var(--ite-radius-sm);
	font-size: 0.875em;
}

.ite-prose pre {
	padding: var(--ite-4);
	background: var(--ite-surface-3);
	border-radius: var(--ite-radius);
	overflow-x: auto;
	font-size: var(--ite-text-sm);
	line-height: 1.5;
}

.ite-prose pre code {
	padding: 0;
	background: none;
}

/* Tables scroll horizontally rather than forcing the page to. */
/*
 * A table wider than the reading column scrolls inside its own box rather
 * than stretching the page: the column width is what makes the prose
 * readable, and a spec table is the one element allowed to be wider than
 * it. max-width keeps the scroll box inside the container instead of
 * letting the table set the page width.
 */
.ite-prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--ite-border);
	border-radius: var(--ite-radius);
	font-size: var(--ite-text-sm);
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 48em) {
	.ite-prose table {
		display: table;
		width: 100%;
		border-collapse: collapse;
		overflow: visible;
	}
}

.ite-prose th,
.ite-prose td {
	padding: var(--ite-4) var(--ite-5);
	text-align: left;
	border-bottom: 1px solid var(--ite-border);
	vertical-align: top;
	line-height: var(--ite-leading-snug);
}

/* The last row's rule would otherwise double up with the table border. */
.ite-prose tbody tr:last-child th,
.ite-prose tbody tr:last-child td {
	border-bottom: 0;
}

/* The first column of a spec table is the label; it reads better held to
   one line and set slightly brighter than the value beside it. */
.ite-prose tbody th:first-child,
.ite-prose tbody td:first-child {
	color: var(--ite-text);
	font-weight: 600;
	white-space: nowrap;
}

.ite-prose thead th {
	position: sticky;
	top: 0;
	background: var(--ite-surface-2);
	font-size: var(--ite-text-xs);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ite-text-muted);
	white-space: nowrap;
}

/* Banding carries the eye across a wide row better than rules alone. */
.ite-prose tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--ite-surface) 55%, transparent);
}

/* ============================================================ Block styles */

.is-style-ite-callout,
.is-style-ite-warning,
.is-style-ite-takeaways {
	padding: var(--ite-4) var(--ite-6);
	border-radius: var(--ite-radius);
	border-left: 4px solid;
	margin-block: var(--ite-6);
	font-size: var(--ite-text-base);
}

.is-style-ite-callout {
	background: var(--ite-accent-dim);
	border-left-color: var(--ite-accent);
}

.is-style-ite-warning {
	background: var(--ite-warning-dim);
	border-left-color: var(--ite-warning);
}

.is-style-ite-takeaways {
	background: var(--ite-surface-2);
	border-left-color: var(--ite-border-bright);
}

.is-style-ite-callout > *:last-child,
.is-style-ite-warning > *:last-child,
.is-style-ite-takeaways > *:last-child {
	margin-bottom: 0;
}

.is-style-ite-takeaways h2 {
	margin-top: 0;
	font-size: var(--ite-text-lg);
}

.is-style-ite-specs table {
	font-variant-numeric: tabular-nums;
}

.is-style-ite-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-ite-checklist li {
	position: relative;
	padding-left: var(--ite-6);
}

.is-style-ite-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 1px;
	background: var(--ite-accent);
}

/* ==================================================================== Footer */

.ite-article__footer {
	margin-top: var(--ite-12);
	padding-top: var(--ite-6);
	border-top: 1px solid var(--ite-border);
}

.ite-tags {
	list-style: none;
	margin: 0 0 var(--ite-6);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ite-2);
}

.ite-tag {
	display: inline-block;
	padding: var(--ite-1) var(--ite-3);
	background: var(--ite-surface-2);
	border-radius: 999px;
	font-size: var(--ite-text-xs);
	text-decoration: none;
	color: var(--ite-text-muted);
}

.ite-tag:hover {
	background: var(--ite-accent-dim);
	color: var(--ite-accent);
}

.ite-author-card {
	margin-block: var(--ite-6);
	padding: var(--ite-6);
	background: var(--ite-surface-2);
	border-radius: var(--ite-radius);
}

.ite-author-card__title {
	margin: 0 0 var(--ite-3);
	font-size: var(--ite-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ite-text-muted);
}

.ite-author-card__body {
	display: flex;
	gap: var(--ite-4);
	align-items: flex-start;
}

.ite-author-card__avatar {
	border-radius: 50%;
	flex: 0 0 auto;
}

.ite-author-card__name {
	margin: 0 0 var(--ite-1);
	font-weight: 650;
}

.ite-author-card__bio {
	margin: 0;
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
}

.ite-article__corrections {
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
}

/* ======================================================================= CTA */

.ite-cta {
	margin-block: var(--ite-12);
	padding: var(--ite-8);
	background: var(--ite-accent-dim);
	border-radius: var(--ite-radius);
	max-width: var(--ite-content);
	margin-inline: auto;
}

.ite-cta__title {
	margin: 0 0 var(--ite-3);
	font-size: var(--ite-text-xl);
}

.ite-cta__text {
	margin: 0 0 var(--ite-4);
	max-width: 60ch;
	color: var(--ite-text);
}

/* ================================================================== Builder */

.ite-builder-page__header {
	margin-bottom: var(--ite-8);
	max-width: var(--ite-prose);
}

.ite-builder-page__notes {
	margin-top: var(--ite-12);
	padding-top: var(--ite-8);
	border-top: 1px solid var(--ite-border);
}

.ite-page-links {
	margin-top: var(--ite-6);
	display: flex;
	gap: var(--ite-2);
	font-size: var(--ite-text-sm);
}

/* =================================================================== Hero */

.ite-hero {
	padding-block: var(--ite-16) var(--ite-12);
	background: linear-gradient(
		to bottom,
		var(--ite-surface-2),
		var(--ite-bg)
	);
	border-bottom: 1px solid var(--ite-border);
}

.ite-hero__content {
	max-width: 68ch;
}

.ite-hero__title {
	margin-bottom: var(--ite-4);
	font-size: var(--ite-text-3xl);
	letter-spacing: -0.02em;
}

@media (min-width: 48em) {
	.ite-hero__title {
		font-size: var(--ite-text-4xl);
	}
}

.ite-hero__lead {
	margin-bottom: var(--ite-8);
	font-size: var(--ite-text-lg);
	line-height: var(--ite-leading-snug);
	color: var(--ite-text-muted);
	max-width: 52ch;
}

.ite-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ite-3);
}

/* ================================================================== Steps */

.ite-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ite-6);
	counter-reset: step;
}

@media (min-width: 52em) {
	.ite-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ite-step {
	padding: var(--ite-6);
	background: var(--ite-surface);
	border: 1px solid var(--ite-border);
	border-radius: var(--ite-radius);
}

.ite-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--ite-3);
	border-radius: 50%;
	background: var(--ite-accent);
	color: #fff;
	font-size: var(--ite-text-sm);
	font-weight: 700;
}

.ite-step__title {
	margin: 0 0 var(--ite-2);
	font-size: var(--ite-text-lg);
}

.ite-step__text {
	margin: 0;
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
}

/* ========================================================= Build parts */

.ite-build-parts {
	margin-block: var(--ite-12);
	padding-top: var(--ite-8);
	border-top: 1px solid var(--ite-border);
}

.ite-build-parts__title {
	font-size: var(--ite-text-2xl);
	margin-bottom: var(--ite-4);
}

.ite-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ite-border);
	border-radius: var(--ite-radius);
}

.ite-build-parts__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ite-text-sm);
	background: var(--ite-surface);
}

.ite-build-parts__table th,
.ite-build-parts__table td {
	padding: var(--ite-3) var(--ite-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ite-border);
}

.ite-build-parts__table thead th {
	font-size: var(--ite-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ite-text-muted);
	background: var(--ite-surface-2);
	white-space: nowrap;
}

.ite-build-parts__table tbody th {
	font-weight: 600;
	white-space: nowrap;
	width: 1%;
}

.ite-build-parts__table tbody tr:last-child th,
.ite-build-parts__table tbody tr:last-child td {
	border-bottom: 0;
}

.ite-build-parts__specs {
	color: var(--ite-text-muted);
	font-size: var(--ite-text-xs);
}

.ite-build-parts__power {
	margin-top: var(--ite-4);
	font-size: var(--ite-text-sm);
	color: var(--ite-text-muted);
}

.ite-build-parts__notices {
	margin-top: var(--ite-6);
}

.ite-build-parts__notices-title {
	font-size: var(--ite-text-lg);
	margin-bottom: var(--ite-3);
}

.ite-build-parts__notice-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ite-3);
}

.ite-build-parts__notice {
	padding: var(--ite-3) var(--ite-4);
	border-left: 3px solid var(--ite-border-bright);
	border-radius: var(--ite-radius);
	background: var(--ite-surface-2);
	font-size: var(--ite-text-sm);
}

.ite-build-parts__notice p {
	margin: 0;
}

.ite-build-parts__notice--note     { border-left-color: var(--ite-accent); }
.ite-build-parts__notice--unknown  { border-left-color: var(--ite-warning); }
.ite-build-parts__notice--conflict { border-left-color: var(--ite-error); }

.ite-build-parts__notice-detail {
	margin-top: var(--ite-2) !important;
	color: var(--ite-text-muted);
	font-size: var(--ite-text-xs);
	line-height: var(--ite-leading);
}

.ite-build-parts__action {
	margin-top: var(--ite-6);
}

/* Stack the parts table into cards on narrow screens. */
@media (max-width: 40em) {
	.ite-build-parts__table thead {
		display: none;
	}

	.ite-build-parts__table,
	.ite-build-parts__table tbody,
	.ite-build-parts__table tr,
	.ite-build-parts__table th,
	.ite-build-parts__table td {
		display: block;
		width: auto;
	}

	.ite-build-parts__table tr {
		padding: var(--ite-3) var(--ite-4);
		border-bottom: 1px solid var(--ite-border);
	}

	.ite-build-parts__table tr:last-child {
		border-bottom: 0;
	}

	.ite-build-parts__table th,
	.ite-build-parts__table td {
		padding: 0.125rem 0;
		border-bottom: 0;
	}

	.ite-build-parts__table tbody th {
		font-size: var(--ite-text-xs);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--ite-text-muted);
	}
}

/* ================================================================ Tool pages */

/* A page holding a calculator gets a wider measure than a reading page,
   and the header is centred over that width rather than over the prose
   column, so the title does not sit in a narrower band than the tool. */
.ite-page--tool .ite-page__header {
	text-align: left;
}

.ite-page--tool .ite-page__title {
	font-size: var(--ite-text-3xl);
}

/* Tool widgets escape the prose measure. The reading text around them
   stays narrow, but the calculator itself uses the full column. */
.ite-page--tool .ite-prose > .pcb-tool,
.ite-page--tool .ite-prose > .pcb-builder,
.ite-page--tool .ite-prose > .pcb-compare,
.ite-page--tool .ite-prose > .pcb-bn,
.ite-page--tool .ite-prose > .pcb-ctable {
	max-width: none;
	margin-block: var(--ite-8);
}

/* ---------------------------------------------------- Prose refinements */

/* Links inside body copy are underlined so they are distinguishable
   without relying on colour alone. */
.ite-prose a:not(.ite-button) {
	text-decoration: underline;
	text-decoration-color: var(--ite-accent-border);
}

.ite-prose a:not(.ite-button):hover {
	text-decoration-color: currentColor;
}

.ite-prose strong {
	color: var(--ite-text);
	font-weight: 650;
}

.ite-prose > p:first-child {
	font-size: var(--ite-text-lg);
	color: var(--ite-text-muted);
}

/* Lists get a marker in the accent colour rather than the default dot,
   which is nearly invisible against a dark background. */
.ite-prose ul li::marker {
	color: var(--ite-accent);
}

.ite-prose ol li::marker {
	color: var(--ite-text-dim);
	font-variant-numeric: tabular-nums;
}