/*** Template: Single (base) ***/

.single-article {
	overflow-x: clip;
}

/* Closing demo CTA (style-media, no band) sets its own breathing room from the article foot. */
.single-article .demo-cta {
	padding-block: var(--module-spacing-xlarge);
}

/** Hero **/

/* Band bottom is raised by --hero-media-drop so the featured photo spills below it onto the page. */
.article-hero {
	--hero-media-drop: 280px;
	color: var(--black);
	margin-top: var(--text-spacing-medium);
}

.article-hero .bg-field {
	background: var(--teal-glow);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	bottom: var(--hero-media-drop);
}

@media (prefers-reduced-motion: no-preference) {

	.article-hero .bg-field {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

/* No photo to spill past — wrap the content, with room below. */
.article-hero.no-media {
	--hero-media-drop: 0px;
	padding-bottom: calc(var(--module-spacing-medium) + var(--text-spacing-xsmall));
}

/* Breadcrumb hangs 32px in from the band's top-left corner (24px inset + 32px). */
/* Yoast breadcrumb output (functions/breadcrumbs.php) blanks the current page's crumb so the trail ends on the slash. */
.article-breadcrumb {
	font-size: calc(12rem / 16);
	font-weight: 600;
	opacity: 0.75;
	padding-left: calc(var(--text-spacing-small) + var(--text-spacing-medium));
	padding-top: var(--text-spacing-medium);
	position: relative;
	z-index: 1;
}

.article-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.article-breadcrumb a:hover {
	text-decoration: underline;
}

.article-hero .container.grid {
	margin-top: calc(var(--module-spacing-small) + var(--text-spacing-xxsmall));
}

/* Content + photo align to col 3 (above the body's share-rail gutter). */
.article-hero-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 3 / span 8;
}

.article-hero-content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.article-hero-content > .heading-2 + .article-meta {
	margin-top: var(--text-spacing-small);
}

.article-hero-content > .article-hero-pills + .btn {
	margin-top: var(--text-spacing-large);
}

.article-hero-content > * + .btn.primary {
	margin-top: var(--text-spacing-large);
}

.article-hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall) 12px;
	list-style: none;
	margin: var(--text-spacing-small) 0 0;
	padding: 0;
}

.article-hero-meta {
	display: flex;
	flex-direction: column;
	margin-top: var(--text-spacing-medium);
}

.article-hero-meta > * {
	margin: 0;
}

.article-hero-media {
	aspect-ratio: 784 / 441;
	grid-column: 3 / span 8;
	margin: var(--text-spacing-large) 0 0;
}

/* Lead-capture form in the hero — content left, a white form card on the right that
   breaks out toward the viewport edge. The full-bleed band is dropped; the gradient
   is bounded to the content so the rest of the hero (below + around it) stays white. */
.article-hero:has(.article-hero-form) {
	padding-bottom: var(--module-spacing-medium);
}

.article-hero:has(.article-hero-form) .bg-field {
	display: none;
}

.article-hero:has(.article-hero-form) .article-hero-content {
	align-self: start;
	grid-column: 1 / span 6;
	grid-row: 1;
	isolation: isolate;
	position: relative;
}

/* Gated resource copy — fills the left column beneath the header, beside the form
   (which spans both rows) so the content reads to the left of the form, not below. */
.article-hero-copy {
	grid-column: 1 / span 6;
	grid-row: 2;
	margin-top: var(--text-spacing-large);
}

.article-hero:has(.article-hero-form) .article-hero-content + .article-hero-copy {
	margin-top: var(--module-spacing-xlarge);
}

/* Full-width band (24px inset from both viewport edges) that extends ~120px past the
   content — up over the breadcrumb and ending 120px below the button — then stops, so
   the meta / TLDR that follow sit in the white below it. */
.article-hero:has(.article-hero-form) .article-hero-content::before {
	background: var(--teal-glow);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	content: "";
	inset-block: calc((var(--module-spacing-medium) + var(--text-spacing-large)) * -1);
	left: calc(var(--viewport-edge) + var(--text-spacing-small));
	position: absolute;
	width: calc(100vw - var(--text-spacing-small) * 2);
	z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {

	.article-hero:has(.article-hero-form) .article-hero-content::before {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

.article-hero-form {
	align-self: start;
	background: var(--white);
	grid-column: 7 / -1;
	grid-row: 1 / span 2;
	margin-right: var(--container-breakout);
	margin-left: var(--text-spacing-large);
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-large));
	z-index: 1;
}

/* Dark title bar flush to the card's top edge; the embed below keeps the padding. */
.article-hero-form .form-title {
	background: var(--black);
	color: var(--white);
	margin: 0;
	padding: var(--text-spacing-small) var(--text-spacing-large);
}

.article-hero-form .embed {
	padding: var(--text-spacing-large);
}

/** Review bar — global awards / star-rating trust strip (Site Settings → Content) **/

/* No author card between them (release notes, or a post with no contributor), so
   the bar owns the whole gap off the body. */
.article-body + .review-bar {
	padding-top: var(--module-spacing-medium);
}

.article-author + .review-bar {
	padding-top: var(--text-spacing-small);
}

.review-bar .reviews {
	align-items: center;
	background: var(--parchment);
	column-gap: var(--text-spacing-xlarge);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: var(--text-spacing-small) var(--text-spacing-xlarge);
	row-gap: var(--text-spacing-small);
}

.review-bar .review {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: var(--text-spacing-xxsmall);
	text-decoration: none;
}

.review-bar a.review:hover .field-label {
	text-decoration: underline;
}

.review-bar .stars {
	display: inline-flex;
	flex-shrink: 0;
	position: relative;
}

/* Outline track + an orange fill layer clipped to the rating — renders any score. */
.review-bar .track,
.review-bar .fill {
	display: flex;
	gap: 2px;
}

.review-bar .fill {
	inset: 0;
	overflow: hidden;
	position: absolute;
	width: calc(var(--rating) / 5 * 100%);
}

.review-bar .star {
	flex-shrink: 0;
}

.review-bar .star svg {
	display: block;
	height: 16px;
	width: 16px;
}

.review-bar .track .star svg {
	fill: none;
	stroke: var(--alabaster-gray);
	stroke-width: 1.5;
}

.review-bar .fill .star svg {
	fill: var(--orange);
}

/** Body — sticky share rail + reading column **/

/* Bottom padding is 0 — the closing CTA / author / related section that always
   follows owns the gap. Only when the body is the last thing on the page does it
   carry its own foot spacing. */
.article-body {
	padding-block: var(--module-spacing-medium) 0;
}

.article-body:last-child {
	padding-bottom: var(--module-spacing-large);
}

/* Featured photo spills below the hero — trim the body's top gap so it isn't doubled. */
.article-hero:has(.media) + .article-body {
	padding-top: var(--text-spacing-medium);
}

.article-share {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	grid-column: 1;
	grid-row: 1;
	/* Content-height, not full-viewport: sticky only engages once the article
	   scrolls under the header, so a 100vh box centred its icons half a screen
	   below the article's start. The static variants below clear the sticky. */
	height: fit-content;
	list-style: none;
	margin: 0;
	margin-left: calc(var(--viewport-edge) + var(--text-spacing-xlarge));
	padding: 0;
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-medium));
}

.article-main {
	grid-column: 3 / span 8;
	grid-row: 1;
}

/* Meta-header rhythm: byline → dates 16, → editorial 32, → body 40. */
.article-main > * + * {
	margin-top: var(--text-spacing-xsmall);
}

/* Column owns the outer gaps — strip the edge margins so a UA or content margin
   can't add to the body's padding. The foot is pinned to .article-content rather
   than :last-child: the body is always what ends the column, and a trailing tile
   (which carries its own block margin) shouldn't have it stripped. */
.article-main > *:first-child {
	margin-top: 0;
}

.article-main > .article-content {
	margin-bottom: 0;
}

/* A block's own trailing margin would stack onto the rhythm between blocks. */
.article-content > * :last-child {
	margin-bottom: 0;
}

.article-main > * + .article-editorial {
	margin-top: var(--text-spacing-medium);
}

.article-main > * + .article-content {
	margin-top: var(--text-spacing-large);
}

/** TLDR — summary box above the body (mirrors the Summary Block module) **/

.article-tldr {
	background: var(--parchment);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-medium) var(--text-spacing-medium) var(--text-spacing-large);
}

.article-tldr .eyebrow {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.article-tldr .eyebrow .icon {
	display: flex;
	flex-shrink: 0;
}

.article-tldr .eyebrow .icon svg {
	display: block;
	height: 16px;
	width: auto;
}

/* Lead phrase is Semibold, not the default bold (matches Summary Block). */
.article-tldr strong {
	font-weight: 600;
}

.article-main > * + .article-tldr {
	margin-top: var(--text-spacing-large);
}

/** Table of contents — sidebar nav; replaces the share rail when enabled **/

/* Meta rides the hero image's column (.article-hero-media, 3 / span 8 — echoed
   at its 1100/950 rungs below) so the two stay edge-aligned, in row 1 so the TOC
   and the body start together in row 2 — the TOC's sticky start is then the
   content, not the dates. Explicit rows because the TOC precedes it in source. */
.article-body.has-toc .article-meta-header {
	grid-column: 3 / span 8;
	grid-row: 1;
	/* 80px to the content: the grid's row-gap supplies 40, this adds the rest, so
	   it re-resolves when --module-spacing-medium steps down at 950. */
	margin-bottom: calc(var(--module-spacing-medium) - var(--gap));
}

/* Was .article-main's child rhythm before the header moved out of it. */
.article-meta-header > * + * {
	margin-top: var(--text-spacing-medium);
}

/* White rail behind the TOC column (Figma 1291:5284 "White Rail" — 351px, running
   the full height of the body, not hugging the nav). Placed in the same cell as
   the sticky nav and stretched by the row, so it stays put while the nav travels;
   as ::before it paints under the nav without needing a z-index. */
.article-body.has-toc .container.grid::before {
	background: var(--white);
	content: "";
	grid-column: 1 / span 3;
	grid-row: 2;
	margin-left: var(--viewport-edge);
}

/* Box is 3 cols plus the outdent (~354px), so 48px insets leave the ~255px text
   column the design asks for — the width needs no override. */
.article-body.has-toc .article-toc {
	grid-column: 1 / span 3;
	grid-row: 2;
	height: fit-content;
	margin-left: var(--viewport-edge);
	padding: var(--text-spacing-xlarge);
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-large));
}

.article-body.has-toc .article-main {
	grid-column: 5 / -1;
	grid-row: 2;
}

.article-toc-label {
	font-weight: 700;
	margin-bottom: var(--text-spacing-xsmall);
}

.article-toc ul {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-toc a {
	color: var(--black);
	display: block;
	font-size: calc(12rem / 16);
	font-weight: 500;
	line-height: calc(18 / 12);
	text-decoration: none;
}

.article-toc a:not(.btn).is-active,
.article-toc a:not(.btn):hover {
	color: var(--digital-blue);
}

.article-toc .btn {
	display: flex;
	justify-content: center;
	margin-top: var(--text-spacing-medium);
	width: 100%;
}

/* When the TOC owns the rail, sharing goes horizontal (sits in the meta header). */
.article-share-foot {
	flex-direction: row;
	height: auto;
	justify-content: flex-start;
	margin-left: 0;
	position: static;
}

/** TOC layout — the meta moves into a header of two divided rows **/

/* Byline (left) + dates (right), each stacked. */
.article-bylines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	justify-content: space-between;
}

.article-bylines .article-byline {
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.article-bylines .article-meta {
	align-items: flex-end;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	margin: 0;
}

/* Editorial-policy link (left) + social share (right) on one divided row. */
.article-share-row {
	align-items: center;
	border-top: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	padding-top: var(--text-spacing-small);
}

.article-share-row .article-editorial {
	border-top: 0;
	padding-top: 0;
}

.article-share-row .article-share {
	margin: 0 0 0 auto;
}

.article-byline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
}

.article-byline a,
.article-byline .small-text a:not([class]) {
	color: var(--black);
	font-weight: 700;
}

.article-byline + .article-meta {
	margin-top: var(--text-spacing-xsmall);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall) var(--text-spacing-xsmall);
	margin: 0;
}

.article-meta div {
	align-items: baseline;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.article-meta dt,
.article-meta dd {
	margin: 0;
}

.article-editorial {
	border-top: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
	padding-top: var(--text-spacing-small);
}

.article-editorial a {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-weight: 500;
	gap: var(--text-spacing-xxsmall);
	text-decoration: none;
}

/* Label underlined by default (the shield stays clean); hover toggles it off. */
.article-editorial .label {
	text-decoration: underline;
}

.article-editorial a:hover .label {
	text-decoration: none;
}

.article-editorial .icon {
	display: flex;
	flex-shrink: 0;
}

.article-editorial .icon svg {
	display: block;
	height: 12px;
	width: auto;
}

/** Author bio card **/

.article-author {
	/*padding-bottom: var(--module-spacing-large);*/
}

.article-body + .article-author {
	margin-top: var(--module-spacing-large);
}

/* Author/reviewer term archive: the bio card is the page hero (direct child of
   #main, unlike the in-article bio card). Match the standard hero's gap below
   the header, and drop the band's own bottom padding — the single gap below it
   is .article-more's padding-top (or the footer, when there are no articles),
   never both stacked. */
#main > .article-author {
	margin-top: var(--text-spacing-medium);
	padding-bottom: 0;
}

/* As a page hero the band goes full-bleed with the standard 24px viewport gutters,
   not the container inset the in-article card uses (that one lines up with
   .review-bar below it; there's nothing to line up with here). 50%−50vw walks out
   to the viewport edge from the container's PADDING box — --viewport-edge is for a
   grid child and would overshoot by the container's own 40px padding, which sits
   inside that box. Self-centering, so it holds at every width with no MQ. */
#main > .article-author .container.grid::before {
	inset: 0 calc(50% - 50vw + var(--text-spacing-small));
}

.article-author .container.grid {
	align-items: center;
	isolation: isolate;
	padding-block: var(--text-spacing-xlarge);
}

/* Painted on a ::before inset by the container's own horizontal padding, not on
   .container itself — a background there runs out under the gutters and sits
   wider than .review-bar, whose surface is a child inside the container. Absolute
   so it isn't a grid item; rides the token, so it re-insets at 650. */
.article-author .container.grid::before {
	background: var(--lavender);
	content: "";
	inset: 0 var(--container-outer-padding);
	position: absolute;
	z-index: -1;
}

.article-author-id {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-small);
	grid-column: 2 / span 4;
}

.article-author-photo {
	border-radius: 50%;
	flex-shrink: 0;
	height: 120px;
	object-fit: cover;
	width: 120px;
}

.article-author-id > div > * {
	margin: 0;
}

.article-author-id > div > * + * {
	margin-top: var(--text-spacing-xsmall);
}

/* Term archive with no bio + no socials — center the identity alone in the card. */
.article-author.no-bio .article-author-id {
	grid-column: 1 / -1;
	justify-content: center;
}

.article-author-bio {
	align-items: flex-start;
	border-left: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	grid-column: 6 / span 6;
	padding-left: var(--module-spacing-small);
}

/* Profile socials — only rendered on the author/reviewer term archive. */
.article-author-links {
	display: flex;
	gap: var(--text-spacing-xsmall);
	list-style: none;
	margin: var(--text-spacing-xxsmall) 0 0;
	padding: 0;
}

.article-author-links a {
	align-items: center;
	background: var(--white);
	color: var(--digital-blue);
	display: flex;
	height: 40px;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
	width: 40px;
}

.article-author-links a:hover,
.article-author-links a:focus-visible {
	background: var(--digital-blue);
	color: var(--white);
}

/** More from — related card grid **/

.article-more {
	padding-block: var(--module-spacing-large);
}

.module.demo-cta.style-media:not(:has(.media)) + .article-more {
	padding-top: 0;
}

.article-more-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	grid-column: 1 / -1;
	justify-content: space-between;
	margin-bottom: var(--text-spacing-xsmall);
}

/* flex-end lines the button up with the heading's descender, not its baseline —
   nudge it back up. Reset once the two stack (650), where there's nothing to
   align to. */
.article-more-head .btn {
	margin-bottom: 4px;
}

/* minmax(0,1fr), not 1fr — a bare 1fr floors at min-content, so a card with a long
   unbreakable title (or wide media) blows out its track and the columns go uneven.
   The 0 floor keeps every column equal regardless of content. */
.article-more-cards {
	display: grid;
	gap: var(--text-spacing-large);
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Release-note card is a full-width 3-column row in its own archive; in this 3-up
   grid that cell is too narrow, so collapse it to a stack (mirrors search.css). */
.article-more-cards .card.release-note-card {
	grid-template-columns: 1fr;
	row-gap: var(--text-spacing-xsmall);
}

.article-more-cards .card.release-note-card .btn.tertiary {
	justify-self: start;
}

/* Author archive appends numbered pagination below the article grid. */
.article-more .pagination {
	grid-column: 1 / -1;
}

/*** Press release — About + Media contact blocks appended inside .article-main. ***/

.press-release-about,
.press-release-contact {
	border-top: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
	margin-top: var(--module-spacing-medium);
	padding-top: var(--module-spacing-small);
}

.press-release-about > * + *,
.press-release-contact > * + * {
	margin-top: var(--text-spacing-small);
}

.press-release-contact p {
	margin: 0;
}

.press-release-contact p + p {
	margin-top: var(--text-spacing-xxsmall);
}

.press-release-contact a {
	color: var(--digital-blue);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.article-breadcrumb {
		padding-left: var(--text-spacing-medium);
	}

	/* Band goes full-bleed — no room left for the 24px side inset. */
	.article-hero:has(.article-hero-form) .article-hero-content::before {
		left: var(--viewport-edge);
		width: 100vw;
	}

	/* Same here — drop the 24px gutter the base rule adds and run edge to edge. */
	#main > .article-author .container.grid::before {
		inset: 0 calc(50% - 50vw);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem / 16)) {

	.article-hero-content {
		grid-column: 2 / -2;
	}

	.article-author-id {
		grid-column: 1 / span 4;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1100rem / 16)) {

	.article-more-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 2-up grid — a lone 3rd card orphans its row, so drop it (re-shown at 650 when
	   the grid is single-column). :last-child scopes it to the exactly-3 case. */
	.article-more-cards > li:nth-child(3):last-child {
		display: none;
	}

	/* The meta header tracks the hero image's column at every rung (its base rule
	   explains why); the full selector is echoed so its (0,3,0) base doesn't win. */
	.article-hero-media,
	.article-main,
	.article-body.has-toc .article-meta-header {
		grid-column: 2 / -2;
	}

	/* Sticky rail unsticks and drops to a horizontal share row below the body
	   (grid-row 2 forces it past the DOM-first rail into the article foot). */
	.article-share {
		flex-direction: row;
		grid-column: 2 / -2;
		grid-row: 2;
		height: auto;
		justify-content: flex-start;
		margin-left: 0;
		position: static;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.article-breadcrumb {
		padding-left: var(--container-outer-padding);
	}

	/* Shorter spill than desktop — the photo hangs 80px past the band. */
	.article-hero {
		--hero-media-drop: 80px;
	}

	.article-hero-content,
	.article-hero:has(.article-hero-form) .article-hero-content,
	.article-hero-copy,
	.article-hero-media,
	.article-hero-form {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Snap the form card flush once it's full-width, and drop the sticky — stacked
	   there's nothing beside it to scroll past. */
	.article-hero-form {
		margin-left: 0;
		margin-right: 0;
		position: static;
	}

	.article-hero:has(.article-hero-form) .article-hero-content::before {
		inset-block-end: calc(var(--module-spacing-large) * -1);
	}

	.article-hero-media {
		margin-top: 0;
	}

	.article-share {
		flex-direction: row;
		grid-column: 1 / -1;
		grid-row: auto;
		height: auto;
		justify-content: flex-start;
		order: 1;
		position: static;
	}

	.article-main,
	.article-body.has-toc .article-main {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-top: 0;
	}

	/* No column to sit behind once the TOC is full-width and in flow. */
	.article-body.has-toc .container.grid::before {
		display: none;
	}

	/* TOC stacks above the body — drop the sticky sidebar treatment. Keeps its own
	   white panel + insets, so it still reads as a distinct block when stacked. */
	.article-body.has-toc .article-toc {
		background: var(--white);
		grid-column: 1 / -1;
		grid-row: auto;
		margin-left: 0;
		position: static;
	}

	.article-body.has-toc .article-meta-header {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Meta-header rows stack: byline over dates, editorial over share. */
	.article-bylines,
	.article-share-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.article-bylines .article-meta {
		align-items: flex-start;
	}

	.article-share-row .article-share {
		margin-left: 0;
	}

	.article-author-id,
	.article-author-bio {
		grid-column: 1 / -1;
	}

	.article-author-bio {
		border-left: 0;
		padding-left: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	#main > .article-author {
		margin-top: var(--text-spacing-small);
	}

	/* Coloured band: the 56px side padding eats a third of a phone before a word is
	   set, and once the reviews wrap the desktop-width gutter between them is dead. */
	.review-bar .reviews {
		column-gap: var(--text-spacing-medium);
		padding-inline: var(--text-spacing-small);
	}

	.article-more-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single column now — the 3rd card no longer orphans, so bring it back. */
	.article-more-cards > li:nth-child(3):last-child {
		display: revert;
	}

	.article-breadcrumb {
		padding-top: var(--container-outer-padding);
	}

	.article-hero {
		margin-top: var(--text-spacing-small);
	}

	.article-more-head {
		margin-bottom: 0;
	}

	.article-more-head .btn {
		margin-bottom: 0;
	}

	/* The row is flex-end so the single template's button sits on the heading's
	   baseline; the term archive's count opts out and centres against it. */
	.article-more-head .meta {
		align-self: center;
	}

}