/* ==========================================================================
   Single article (single.php)

   Loaded only on an individual blog article, so none of this can reach the
   blog listing, the fleet, the homepage, About, Services or a single vehicle.

   The reading column is 44rem, which is about 705px: inside the 680px to
   780px band that keeps a line of body text at a comfortable length on a
   desktop. The measure is the one hard rule in this file. Everything else is
   spacing and colour, chosen so the words, not the furniture, carry the page.

   Mobile first. The base is a 320px phone.
   ========================================================================== */

.cr-single {
	--cr-single-measure: 44rem;
	--cr-single-rhythm: 1.5rem;
}

/* --- Masthead ------------------------------------------------------------- */

.cr-single-header {
	padding-block: clamp(2rem, 1.6rem + 1.8vw, 3.25rem) 0;
	background-color: var(--cr-neutral-light);
	background: linear-gradient(180deg, var(--cr-neutral-light) 0%, var(--cr-white) 100%);
	border-bottom: 1px solid var(--cr-border);
}

.cr-single-masthead {
	max-width: var(--cr-single-measure);
	margin: 0 auto;
	padding-inline: var(--cr-gutter);
}

.cr-single-eyebrow {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-accent);
}

.cr-single-eyebrow a {
	color: var(--cr-primary);
	text-decoration: none;
}

/* The article title. Large, but clamped so a long word still fits a 320px
   screen, and balanced so the last line is not left holding one word. */
.cr-single-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.36vw, 2.3rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
	overflow-wrap: break-word;
	font-weight: 200;
}

.cr-single-lede {
	max-width: 36rem;
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
	color: var(--cr-text-muted);
	text-wrap: pretty;
}

/* --- Metadata ------------------------------------------------------------- */

/* Stacked on a phone, so "Published" is never orphaned beside a value. The
   row is the enhancement, at the end of this file. */
.cr-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.75rem;
	padding-bottom: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-size: 0.875rem;
}

/* The label is the quieter half of the pair so the value carries the row. */
.cr-single-meta__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	min-width: 0;
}

.cr-single-meta__label {
	color: var(--cr-text-muted);
}

.cr-single-meta__label::after {
	content: "\00b7";
	margin-left: 0.375rem;
	color: var(--cr-border);
}

.cr-single-meta__value {
	font-weight: 600;
	color: var(--cr-text);
	overflow-wrap: break-word;
}

/* --- Featured image ------------------------------------------------------- */

.cr-single-featured {
	max-width: var(--cr-container-max);
	margin: 0 auto;
	padding-inline: var(--cr-gutter);
}

/* No featured image means no gap at all, rather than an empty grey band. */
.cr-single-header + .cr-single-featured {
	padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

.cr-single-featured__image {
	display: block;
	width: 100%;
	height: auto;
	/* The theme's own 3:2 crop, kept only because that is the registered size.
	   Nothing inside the article body is cropped: those keep their own shape. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0.5rem;
	background-color: var(--cr-neutral-light);
}

/* --- Article body --------------------------------------------------------- */

.cr-single-body {
	padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) 1rem;
}

.cr-single-content {
	max-width: var(--cr-single-measure);
	margin: 0 auto;
	padding-inline: var(--cr-gutter);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--cr-text);
	overflow-wrap: break-word;
}

.cr-single-content > * {
	margin-top: 0;
	margin-bottom: var(--cr-single-rhythm);
}

.cr-single-content > :last-child {
	margin-bottom: 0;
}

.cr-single-content p {
	margin-bottom: var(--cr-single-rhythm);
}

/* Line length reads best with a slightly open leading on the first line after
   a heading, and a paragraph that opens with a small capital is the single most
   common shape in a long-form article. Both are cheap and both help. */
.cr-single-content > p + p,
.cr-single-content > p + ul,
.cr-single-content > p + ol,
.cr-single-content > p + blockquote,
.cr-single-content > h2 + p,
.cr-single-content > h3 + p,
.cr-single-content > h4 + p {
	margin-top: 0;
}

/* --- Headings in the article --------------------------------------------- */

.cr-single-content h2,
.cr-single-content h3,
.cr-single-content h4,
.cr-single-content h5,
.cr-single-content h6 {
	/* Deliberately far below the masthead size. An article's own headings mark
	   sections; they are not competing with the article title. */
	line-height: 1.25;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.cr-single-content h2 {
	margin-top: 2.75rem;
	margin-bottom: 0.875rem;
	font-size: clamp(1.1rem, 1rem + 0.48vw, 1.4rem);
}

.cr-single-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.625rem;
	font-size: clamp(1.1875rem, 1.125rem + 0.3vw, 1.3125rem);
}

.cr-single-content h4 {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	font-size: 1.0625rem;
}

.cr-single-content h5,
.cr-single-content h6 {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cr-single-content > :first-child {
	margin-top: 0;
}

.cr-single-content > :first-child h2,
.cr-single-content > :first-child h3 {
	margin-top: 0;
}

/* --- Links ---------------------------------------------------------------- */

.cr-single-content a {
	color: var(--cr-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cr-single-content a:hover,
.cr-single-content a:focus {
	color: var(--cr-primary-dark);
	text-decoration-thickness: 2px;
}

.cr-single-eyebrow a:hover,
.cr-single-eyebrow a:focus,
.cr-single-eyebrow a:focus-visible {
	text-decoration: underline;
}

/* --- Lists ---------------------------------------------------------------- */

.cr-single-content ul,
.cr-single-content ol {
	margin-bottom: var(--cr-single-rhythm);
	padding-left: 1.375rem;
}

.cr-single-content li {
	margin-bottom: 0.5rem;
	padding-left: 0.25rem;
}

.cr-single-content li:last-child {
	margin-bottom: 0;
}

.cr-single-content li > ul,
.cr-single-content li > ol {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

/* A visible marker, so an unordered list is not a stack of hyphens. */
.cr-single-content ul li::marker {
	color: var(--cr-primary);
}

.cr-single-content ol li::marker {
	font-weight: 600;
	color: var(--cr-primary);
}

/* --- Blockquote ----------------------------------------------------------- */

.cr-single-content blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 3px solid var(--cr-primary);
	color: var(--cr-primary-dark);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.6;
}

.cr-single-content blockquote p:last-child {
	margin-bottom: 0;
}

.cr-single-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--cr-text-muted);
}

/* Nested quotes flatten, so a quote inside a quote does not double the bars. */
.cr-single-content blockquote blockquote {
	margin: 1rem 0;
	padding-left: 1rem;
	border-left-width: 2px;
	font-size: 1rem;
}

/* --- Images and figures --------------------------------------------------- */

/* Images in the body keep the proportions the editor chose. Nothing here
   crops or letterboxes: max-width stops a wide image overflowing, and
   height:auto lets the natural ratio stand. */
.cr-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

.cr-single-content figure {
	margin: 2.25rem 0;
}

.cr-single-content figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--cr-text-muted);
	text-wrap: pretty;
}

.cr-single-content figure figcaption:last-child {
	margin-bottom: 0;
}

/* A caption sits under whichever alignment the editor picked, and never
   outruns the image. */
.cr-single-content .wp-caption,
.cr-single-content .wp-caption-text {
	max-width: 100%;
}

.cr-single-content .alignleft {
	float: left;
	margin: 0.375rem 1.5rem 1rem 0;
}

.cr-single-content .alignright {
	float: right;
	margin: 0.375rem 0 1rem 1.5rem;
}

.cr-single-content .aligncenter {
	margin-inline: auto;
}

/* Wide media may leave the reading column, but never the page, and never in a
   way that lets the page scroll sideways either.
   Nothing here is measured in vw on purpose. A vertical scrollbar comes out of
   the space the page may use but not out of 100vw, so on a desktop with a
   classic scrollbar a full width block ends up one scrollbar wider than the
   page, and the document itself becomes swipeable. The reading column already
   carries the page gutter as its own padding, so bleeding by exactly that much
   reaches the same edge while being measured from the box everything else uses. */
.cr-single-content > .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(-1 * var(--cr-gutter));
}

/* Growing the measure is only safe once the page really is wider than the
   measure plus the 52rem this block asks for, so it stays switched off on
   phones, where there is no room to grow into and would only push the page
   sideways. */
@media (min-width: 56rem) {
	.cr-single-content > .alignwide {
		width: 52rem;
		max-width: none;
		/* 50% is the middle of the 44rem measure, so this hangs the wider block
		   off both sides by the 4rem it is wider by. */
		margin-inline: calc(50% - 26rem);
	}
}

/* --- Tables --------------------------------------------------------------- */

/* display:block turns the table into its own scroll container, so a wide table
   scrolls inside itself instead of widening the page. The cells still lay out
   as a table, which is what keeps the columns straight. */
.cr-single-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.cr-single-content caption {
	padding-bottom: 0.625rem;
	font-weight: 600;
	text-align: left;
}

.cr-single-content th,
.cr-single-content td {
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--cr-border);
	text-align: left;
	vertical-align: top;
}

.cr-single-content th {
	background-color: var(--cr-neutral-light);
	font-weight: 700;
	color: var(--cr-primary-dark);
}

.cr-single-content tbody tr:nth-child(even) {
	background-color: rgba(247, 249, 251, 0.6);
}

/* --- Code ----------------------------------------------------------------- */

.cr-single-content code {
	padding: 0.15em 0.35em;
	background-color: var(--cr-neutral-light);
	border: 1px solid var(--cr-border);
	border-radius: 0.25rem;
	font-size: 0.9em;
	word-break: break-word;
}

.cr-single-content pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.125rem 1.25rem;
	background-color: var(--cr-primary-dark);
	color: var(--cr-white);
	border-radius: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	/* Scrolls inside itself, never the page. */
	white-space: pre;
	tab-size: 2;
}

.cr-single-content pre code {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	word-break: normal;
}

/* --- Horizontal rule, small print, media embeds --------------------------- */

.cr-single-content hr {
	height: 1px;
	margin: 2.75rem auto;
	border: 0;
	background-color: var(--cr-border);
}

.cr-single-content small {
	font-size: 0.875rem;
	color: var(--cr-text-muted);
}

.cr-single-content iframe,
.cr-single-content video,
.cr-single-content embed,
.cr-single-content object {
	max-width: 100%;
}

/* Block editor embeds carry their own aspect ratio, so nothing is forced. */
.cr-single-content .wp-block-embed__wrapper {
	position: relative;
}

.cr-single-content .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Paginated article links ---------------------------------------------- */

.cr-single-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cr-border);
	font-weight: 600;
}

.cr-single-page-links .page-links {
	margin: 0;
}

/* ==========================================================================
   Author box
   ========================================================================== */

.cr-single-author {
	margin-top: clamp(2rem, 1.75rem + 1vw, 2.75rem);
	padding-block: 1.75rem;
	border-top: 1px solid var(--cr-border);
}

/* A 64px avatar beside a long name is tight on the narrowest phones. */
.cr-single-author__inner {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	max-width: var(--cr-single-measure);
	margin: 0 auto;
	padding-inline: var(--cr-gutter);
}

.cr-single-author__avatar {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
}

.cr-single-author__body {
	min-width: 0;
}

.cr-single-author__title {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0;
}

.cr-single-author__bio {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--cr-text-muted);
}

/* ==========================================================================
   Keep reading
   ========================================================================== */

.cr-single-related {
	margin-top: clamp(2rem, 1.75rem + 1vw, 2.75rem);
	padding-block: clamp(2rem, 1.75rem + 1vw, 2.75rem);
	background-color: var(--cr-neutral-light);
	border-top: 1px solid var(--cr-border);
}

.cr-single-related__title {
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-accent);
}

.cr-single-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-single-related__item {
	min-width: 0;
}

.cr-single-related__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cr-single-related__card:hover,
.cr-single-related__card:focus-within {
	box-shadow: 0 0.5rem 1.25rem rgba(11, 46, 73, 0.1);
	transform: translateY(-2px);
}

.cr-single-related__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--cr-neutral-light);
}

.cr-single-related__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cr-single-related__card:hover .cr-single-related__image,
.cr-single-related__card:focus-within .cr-single-related__image {
	transform: scale(1.03);
}

.cr-single-related__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.5rem;
	padding: 1.125rem 1.25rem 1.25rem;
}

.cr-single-related__category {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cr-accent);
}

.cr-single-related__name {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	font-family: var(--cr-font-display);
	font-weight: 400;
}

.cr-single-related__name a {
	color: var(--cr-text);
	text-decoration: none;
}

.cr-single-related__name a:hover,
.cr-single-related__name a:focus {
	color: var(--cr-primary);
	text-decoration: underline;
}

.cr-single-related__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cr-primary);
}

.cr-single-related__arrow {
	transition: transform 0.15s ease;
}

.cr-single-related__card:hover .cr-single-related__arrow,
.cr-single-related__card:focus-within .cr-single-related__arrow {
	transform: translateX(0.1875rem);
}

/* ==========================================================================
   Previous and next
   ========================================================================== */

.cr-single-navigation {
	padding-block: 1.75rem clamp(2rem, 1.75rem + 1vw, 2.75rem);
	border-top: 1px solid var(--cr-border);
}

.cr-single-navigation__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-single-navigation__item {
	min-width: 0;
}

.cr-single-navigation__link {
	display: block;
	height: 100%;
	padding: 1rem 1.125rem;
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cr-single-navigation__link:hover,
.cr-single-navigation__link:focus {
	background-color: var(--cr-neutral-light);
	border-color: var(--cr-primary);
}

.cr-single-navigation__direction {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cr-text-muted);
}

.cr-single-navigation__title {
	margin-top: 0.375rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cr-text);
	/* A long title is clamped to two lines rather than stretching the row. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: break-word;
	font-family: var(--cr-font-display);
}

.cr-single-navigation__item--next .cr-single-navigation__link {
	text-align: right;
}

.cr-single-navigation__item--next .cr-single-navigation__direction {
	flex-direction: row-reverse;
}

/* ==========================================================================
   Reading progress

   A two pixel line at the very top of the viewport, above the sticky site
   header. It cannot be clicked through and it carries no text, so it stays
   out of the way. It is removed entirely for visitors who have asked for
   reduced motion, rather than being shown without the transition.
   ========================================================================== */

.cr-single-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	height: 2px;
	pointer-events: none;
	background-color: transparent;
}

.cr-single-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--cr-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

.cr-single-progress[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cr-single-progress {
		display: none;
	}
}

/* ==========================================================================
   Tablet: from 40rem up
   ========================================================================== */

@media (min-width: 40rem) {
	.cr-single-meta {
		gap: 0.5rem 1.5rem;
	}

	.cr-single-content {
		font-size: 1.125rem;
	}

	.cr-single-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-single-navigation__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Laptop and desktop: from 64rem up
   ========================================================================== */

@media (min-width: 64rem) {
	.cr-single {
		/* More air between sections once there is room for it. */
		--cr-single-rhythm: 1.75rem;
	}

	/* The 44rem measure, with the body text at the 19px the brief asks for. */
	.cr-single-content {
		font-size: 1.1875rem;
	}

	.cr-single-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* ==========================================================================
   From the narrowest phones upwards

   The base rules carry the phone sizes: the stacked meta row, the tighter
   blockquote, the smaller avatar. Nothing here shrinks the type, it only
   removes padding and stops side-by-side elements from fighting for a narrow
   line.
   ========================================================================== */

@media (min-width: 26rem) {
	.cr-single-meta {
		flex-direction: row;
		gap: 0.5rem 1.25rem;
		padding-bottom: 2rem;
	}

	.cr-single-content blockquote {
		padding-left: 1.5rem;
		font-size: 1.125rem;
	}

	.cr-single-author__inner {
		gap: 1rem;
	}

	.cr-single-author__avatar {
		width: 4rem;
		height: 4rem;
	}
}

/* ==========================================================================
   Discussion
   ========================================================================== */

/* The comments sit in the article's own reading column rather than running
   to the edge of the viewport, so the conversation reads as part of the
   piece it is about. */
.cr-single .cr-comments {
	box-sizing: border-box;
	max-width: calc(var(--cr-single-measure) + 2 * var(--cr-gutter));
	margin-inline: auto;
	padding-inline: var(--cr-gutter);
}

.cr-single .cr-comments__list .comment-body {
	padding: 1.5rem 0;
}

.cr-single .cr-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--cr-font-display);
	font-weight: 500;
	color: var(--cr-primary-dark);
}

.cr-single .cr-comments__list .comment-author img {
	margin-right: 0;
}

.cr-single .cr-comments__list .comment-author .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cr-single .cr-comments__list .comment-meta {
	margin: 0.375rem 0 0.75rem;
}

.cr-single .cr-comments__list .comment-meta a {
	color: var(--cr-text-muted);
	text-decoration: none;
}

.cr-single .cr-comments__list .comment-content p {
	margin-bottom: 0.75rem;
}

.cr-single .cr-comments__list .reply a {
	font-weight: 600;
	text-decoration: none;
}