/**
 * The presentation variants.
 *
 * Every option in the registry has three settings and this file carries all
 * three of each, selected by a class on the body element. Nothing here is
 * generated per request, so the file caches like any other stylesheet and a
 * site that changes a setting downloads nothing new.
 *
 * The first variant of each is always what the theme did before these options
 * existed, and is written as a no-op wherever possible so that a default site
 * gets the same rules it always had.
 *
 * @package ActivityMaker
 */

/* ------------------------------------------------------------------ Buttons. */

/*
 * Every button setting is expressed as a custom property, and one selector list
 * at the bottom of this block consumes them.
 *
 * That indirection is what makes the settings reach buttons this theme did not
 * write. A Download button on a File block, or a Button block somebody added to
 * a post, is not an .am-btn - it is markup WordPress produces. Without this it
 * ignored every setting on the site and rendered in WordPress's own default
 * style, which is exactly the thing that looked broken.
 *
 * Written as properties rather than by repeating the selector list per variant,
 * because the list would then appear a dozen times and one of those copies
 * would eventually be missed.
 */

:root {
	/* Fall back to the accent until somebody sets a button or link colour. */
	--am-btn-bg: var(--am-accent);
	--am-btn-bg-hover: var(--am-accent-hover);
	--am-btn-bg-active: var(--am-accent-active);
	--am-btn-ink: var(--am-accent-ink);
	--am-link: var(--am-accent);

	/* Resolved by the variants below. */
	--am-btn-radius: var(--am-radius);
	--am-btn-pad-y: 0.55rem;
	--am-btn-pad-x: 0.95rem;
	--am-btn-min-h: 40px;
	--am-btn-font: var(--am-text-base);

	--am-btn-surface: var(--am-btn-bg);
	--am-btn-border: var(--am-btn-bg);
	--am-btn-label: var(--am-btn-ink);

	--am-btn-surface-hover: var(--am-btn-bg-hover);
	--am-btn-border-hover: var(--am-btn-bg-hover);
	--am-btn-label-hover: var(--am-btn-ink);

	--am-btn-lift: none;
	--am-btn-shadow: none;

	/*
	 * Hand the button colour to plugins that ask a theme for one.
	 *
	 * A plugin that draws its own buttons usually reads a custom property and
	 * falls back to a colour of its own when no theme supplies it - which is how
	 * a download button ends up dark grey on a blue site, matching nothing.
	 * These are namespaced to the plugin that reads them, so they cost nothing
	 * when it is not installed, and the plugin's own settings still win over
	 * them.
	 */
	--pdfs-theme-accent: var(--am-btn-bg);
	--pdfs-theme-accent-contrast: var(--am-btn-ink);
}

/* Corners. */
.am-btn-shape-sharp { --am-btn-radius: 2px; }
.am-btn-shape-pill { --am-btn-radius: 999px; }

/* Size. */
.am-btn-size-compact {
	--am-btn-pad-y: 0.35rem;
	--am-btn-pad-x: 0.7rem;
	--am-btn-min-h: 34px;
	--am-btn-font: var(--am-text-sm);
}

.am-btn-size-large {
	--am-btn-pad-y: 0.75rem;
	--am-btn-pad-x: 1.35rem;
	--am-btn-min-h: 50px;
	--am-btn-font: var(--am-text-md);
}

@media (pointer: coarse) {
	.am-btn-size-compact { --am-btn-min-h: 44px; }
}

/* Fill: the button carries its colour in the border and the text instead. */
.am-btn-fill-outline {
	--am-btn-surface: transparent;
	--am-btn-border: var(--am-btn-bg);
	--am-btn-label: var(--am-btn-bg);
	--am-btn-surface-hover: var(--am-btn-bg);
	--am-btn-border-hover: var(--am-btn-bg);
	--am-btn-label-hover: var(--am-btn-ink);
}

/* Fill: a soft tint, for a page that wants the button present but quiet. */
.am-btn-fill-tinted {
	--am-btn-surface: color-mix(in srgb, var(--am-btn-bg) 14%, transparent);
	--am-btn-border: color-mix(in srgb, var(--am-btn-bg) 24%, transparent);
	--am-btn-label: var(--am-btn-bg);
	--am-btn-surface-hover: color-mix(in srgb, var(--am-btn-bg) 22%, transparent);
	--am-btn-border-hover: color-mix(in srgb, var(--am-btn-bg) 40%, transparent);
	--am-btn-label-hover: var(--am-btn-bg);
}

/* Browsers without color-mix get the soft accent rather than a transparent,
   effectively invisible, button. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.am-btn-fill-tinted {
		--am-btn-surface: var(--am-accent-soft);
		--am-btn-border: var(--am-accent-line);
		--am-btn-surface-hover: var(--am-accent-soft);
		--am-btn-border-hover: var(--am-accent-line);
	}
}

/* Hover: lift. */
.am-btn-hover-lift {
	--am-btn-lift: translateY(-1px);
	--am-btn-shadow: var(--am-shadow-2);
}

/* Hover: swap fill and text. */
.am-btn-hover-invert {
	--am-btn-surface-hover: var(--am-btn-ink);
	--am-btn-border-hover: var(--am-btn-bg);
	--am-btn-label-hover: var(--am-btn-bg);
}

/*
 * The selector list.
 *
 * `:not(.has-background)` and `:not(.has-text-color)` leave a block button
 * alone when somebody chose its colours in the editor: a per-button decision
 * should beat a site-wide default, not be overwritten by it.
 */
.am-btn--primary,
.wp-block-button__link:not(.has-background),
.wp-block-file__button:not(.has-background),
.wp-block-search__button:not(.has-background) {
	background: var(--am-btn-surface);
	border: 1px solid var(--am-btn-border);
	color: var(--am-btn-label);
}

.am-btn--primary:hover:not(:disabled),
.wp-block-button__link:not(.has-background):hover,
.wp-block-file__button:not(.has-background):hover,
.wp-block-search__button:not(.has-background):hover {
	background: var(--am-btn-surface-hover);
	border-color: var(--am-btn-border-hover);
	color: var(--am-btn-label-hover);
}

.am-btn--primary:active:not(:disabled) {
	background: var(--am-btn-bg-active);
	border-color: var(--am-btn-bg-active);
}

/* Shape, size and motion apply to every button, including the secondary ones
   and the ones WordPress produces. */
.am-btn,
.wp-block-button__link,
.wp-block-file__button,
.wp-block-search__button {
	border-radius: var(--am-btn-radius);
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease,
		transform 0.12s ease, box-shadow 0.12s ease;
}

.am-btn,
.wp-block-button__link,
.wp-block-file__button {
	padding: var(--am-btn-pad-y) var(--am-btn-pad-x);
	min-height: var(--am-btn-min-h);
	font-size: var(--am-btn-font);
}

.am-btn:hover:not(:disabled),
.wp-block-button__link:hover,
.wp-block-file__button:hover,
.wp-block-search__button:hover {
	transform: var(--am-btn-lift);
	box-shadow: var(--am-btn-shadow);
}

.am-btn:active:not(:disabled),
.wp-block-button__link:active,
.wp-block-file__button:active {
	transform: none;
}

/* The block buttons are anchors, so they need the rest of the button shape that
   .am-btn already had from base.css. */
.wp-block-button__link,
.wp-block-file__button,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-2);
	font-family: inherit;
	font-weight: 550;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/*
 * A block button where somebody chose a background but not a text colour.
 *
 * The background is theirs and is left alone, but the label would otherwise
 * inherit the ordinary anchor colour and come out accent-on-accent-red. White
 * is what WordPress core defaults these to as well, and it is right for the
 * saturated colours people actually pick for a button. Anyone choosing a pale
 * background can set the text colour beside it in the editor.
 */
.wp-block-button__link.has-background:not(.has-text-color),
.wp-block-file__button.has-background:not(.has-text-color) {
	color: #ffffff;
}

/* WordPress marks up an outline-style Button block with its own class. Honour
   it whatever the site-wide fill setting is: it was a per-button decision. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
	background: transparent;
	border-color: currentColor;
	color: var(--am-btn-bg);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover {
	background: var(--am-btn-bg);
	color: var(--am-btn-ink);
}

/* The File block puts its download button beside the file name. */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-3);
}

.wp-block-file__button {
	/* Core ships a fixed margin-left that pushes the button away from the name
	   and, on a phone, off the end of the line. */
	margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.am-btn,
	.wp-block-button__link,
	.wp-block-file__button,
	.wp-block-search__button {
		transition: none;
	}

	.am-btn:hover:not(:disabled),
	.wp-block-button__link:hover,
	.wp-block-file__button:hover {
		transform: none;
	}
}

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

/*
 * Anything that calls itself a button is not a link, and the theme must not
 * repaint it.
 *
 * Naming the four classes that happened to exist was not enough: a plugin's
 * download button is an anchor inside the article too, and the theme was
 * painting its label the link colour over the plugin's own dark background.
 * Matching on the name covers buttons this theme has never heard of.
 *
 * It is one `:not()` taking a list rather than several chained together, and
 * that is deliberate. A chain of four `:not()` clauses counts as four classes,
 * which was enough to outrank a plugin defending its own button with a doubled
 * class - so the chain added to fix one problem was what caused the next.
 * A `:not()` with a list is worth only its most specific argument.
 */

.am-entry a:not([class*="btn"], [class*="button"], [role="button"]),
.am-prose a:not([class*="btn"], [class*="button"], [role="button"]) {
	color: var(--am-link);
}

/* Underline only on hover. */
.am-link-style-hover .am-entry a:not([class*="btn"], [class*="button"], [role="button"]),
.am-link-style-hover .am-prose a:not([class*="btn"], [class*="button"], [role="button"]) {
	text-decoration: none;
}

.am-link-style-hover .am-entry a:not([class*="btn"], [class*="button"], [role="button"]):hover,
.am-link-style-hover .am-prose a:not([class*="btn"], [class*="button"], [role="button"]):hover {
	text-decoration: underline;
}

/*
 * An underline that sweeps in from the left.
 *
 * Drawn as a background image rather than a pseudo-element so it works on a
 * link that wraps across two lines, where a positioned ::after would only
 * underline the last fragment.
 */
.am-link-style-sweep .am-entry a:not([class*="btn"], [class*="button"], [role="button"]),
.am-link-style-sweep .am-prose a:not([class*="btn"], [class*="button"], [role="button"]) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.22s ease;
	padding-bottom: 1px;
}

.am-link-style-sweep .am-entry a:not([class*="btn"], [class*="button"], [role="button"]):hover,
.am-link-style-sweep .am-entry a:not([class*="btn"], [class*="button"], [role="button"]):focus-visible,
.am-link-style-sweep .am-prose a:not([class*="btn"], [class*="button"], [role="button"]):hover,
.am-link-style-sweep .am-prose a:not([class*="btn"], [class*="button"], [role="button"]):focus-visible {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.am-link-style-sweep .am-entry a:not([class*="btn"], [class*="button"], [role="button"]),
	.am-link-style-sweep .am-prose a:not([class*="btn"], [class*="button"], [role="button"]) {
		transition: none;
	}
}

/*
 * Whichever style is chosen, a link inside body text must not rely on colour
 * alone to be recognisable. Under a forced-colours setting, and for anyone who
 * cannot distinguish the accent from the text around it, the underline comes
 * back permanently.
 */
@media (forced-colors: active) {
	.am-link-style-hover .am-entry a:not([class*="btn"], [class*="button"], [role="button"]),
	.am-link-style-sweep .am-entry a:not([class*="btn"], [class*="button"], [role="button"]),
	.am-link-style-hover .am-prose a:not([class*="btn"], [class*="button"], [role="button"]),
	.am-link-style-sweep .am-prose a:not([class*="btn"], [class*="button"], [role="button"]) {
		text-decoration: underline;
	}
}

/* ------------------------------------------------------------- Post meta. */

.am-post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--am-1);
}

.am-post-meta__sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	flex: none;
}

.am-post-meta-style-chips .am-post-meta {
	gap: var(--am-2);
}

.am-post-meta-style-chips .am-post-meta__item {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--am-bg-sunken);
	border: 1px solid var(--am-border);
	color: var(--am-text-muted);
}

.am-post-meta-style-chips .am-post-meta__sep {
	display: none;
}

.am-post-meta-style-bordered .am-post-meta {
	padding-block: var(--am-2);
	border-top: 1px solid var(--am-border);
	border-bottom: 1px solid var(--am-border);
	margin-bottom: var(--am-4);
}

/* ---------------------------------------------------------- Article title. */

.am-post-title-align-center .am-article__head {
	text-align: center;
}

.am-post-title-align-center .am-article__head .am-post-meta {
	justify-content: center;
}

/* On a tinted panel. */
.am-post-title-style-panel .am-article__head {
	padding: var(--am-5);
	margin-bottom: var(--am-5);
	background: var(--am-bg-sunken);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
}

/*
 * Over the featured image.
 *
 * The image is a background rather than an <img>, with a scrim over it so the
 * title stays readable whatever the photograph happens to be. When a post has
 * no featured image the accent is used instead, so the layout never collapses
 * into unreadable text on white.
 */
.am-post-title-style-hero .am-article__head {
	position: relative;
	padding: var(--am-7) var(--am-5);
	margin-bottom: var(--am-5);
	border-radius: var(--am-radius-lg);
	overflow: hidden;
	background: var(--am-accent) var(--am-hero-image, none) center / cover no-repeat;
	color: #ffffff;
}

.am-post-title-style-hero .am-article__head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 13, 18, 0.35) 0%, rgba(10, 13, 18, 0.72) 100%);
}

.am-post-title-style-hero .am-article__head > * {
	position: relative;
}

.am-post-title-style-hero .am-article__title,
.am-post-title-style-hero .am-post-meta,
.am-post-title-style-hero .am-post-meta a {
	color: #ffffff;
}

.am-post-title-style-hero .am-post-meta {
	opacity: 0.92;
}

.am-post-title-style-hero .am-post-meta-style-chips .am-post-meta__item,
.am-post-title-style-hero .am-article__head .am-post-meta__item {
	border-color: rgba(255, 255, 255, 0.35);
}

/* The hero already shows the image, so the standard one underneath would be
   the same picture twice. */
.am-post-title-style-hero .am-article__thumb {
	display: none;
}

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

.am-post-thumb-style-hidden .am-article__thumb {
	display: none;
}

/*
 * Full width of the page. The negative margin only cancels the container
 * padding, so it can never be wider than the window - and it is undone above
 * the width where the article sits in a column beside a sidebar.
 */
.am-post-thumb-style-wide .am-article__thumb {
	margin-inline: calc(var(--am-4) * -1);
	border-radius: 0;
}

@media (min-width: 640px) {
	.am-post-thumb-style-wide .am-article__thumb {
		margin-inline: calc(var(--am-5) * -1);
	}
}

@media (min-width: 1000px) {
	.am-post-thumb-style-wide .am-article__thumb {
		margin-inline: 0;
		border-radius: var(--am-radius-lg);
	}
}

/* -------------------------------------------------------- Breadcrumbs. */

.am-post-breadcrumbs-off .am-article .am-breadcrumbs {
	display: none;
}

.am-post-breadcrumbs-chips .am-breadcrumbs {
	gap: var(--am-1);
}

.am-post-breadcrumbs-chips .am-breadcrumbs a,
.am-post-breadcrumbs-chips .am-breadcrumbs [aria-current] {
	padding: 0.15em 0.65em;
	border-radius: 999px;
	background: var(--am-bg-sunken);
	border: 1px solid var(--am-border);
	text-decoration: none;
}

.am-post-breadcrumbs-chips .am-breadcrumbs a:hover {
	background: var(--am-accent-soft);
	border-color: var(--am-accent-line);
}

/* ------------------------------------------------------------ Post cards. */

.am-card-columns-1 .am-posts { grid-template-columns: 1fr; }

@media (min-width: 760px) {
	.am-card-columns-1 .am-posts { grid-template-columns: 1fr; }
}

@media (min-width: 1000px) {
	.am-card-columns-3 .am-posts { grid-template-columns: repeat(3, 1fr); }
}

.am-card-ratio-classic .am-post-card__thumb { aspect-ratio: 4 / 3; }
.am-card-ratio-square .am-post-card__thumb { aspect-ratio: 1; }

/* Boxed. */
.am-card-style-boxed .am-post-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	background: var(--am-bg-raised);
	overflow: hidden;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.am-card-style-boxed .am-post-card:hover {
	border-color: var(--am-border-strong);
	box-shadow: var(--am-shadow-2);
}

.am-card-style-boxed .am-post-card__thumb {
	margin-bottom: 0;
	border-radius: 0;
}

.am-card-style-boxed .am-post-card__title,
.am-card-style-boxed .am-post-meta,
.am-card-style-boxed .am-post-card__excerpt {
	padding-inline: var(--am-4);
}

.am-card-style-boxed .am-post-card__title {
	padding-top: var(--am-4);
}

.am-card-style-boxed .am-post-card__excerpt {
	padding-bottom: var(--am-4);
}

/*
 * Text over the image.
 *
 * A post with no featured image would be white text on nothing, so the card
 * paints the accent behind the image and the scrim sits over both - meaning a
 * missing image degrades to a solid coloured card rather than to nothing.
 */
.am-card-style-overlay .am-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 15rem;
	padding: var(--am-4);
	border: 0;
	border-radius: var(--am-radius-lg);
	overflow: hidden;
	background: var(--am-accent);
	isolation: isolate;
}

.am-card-style-overlay .am-post-card__thumb {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto;
	z-index: -2;
}

.am-card-style-overlay .am-post-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 13, 18, 0.15) 30%, rgba(10, 13, 18, 0.82) 100%);
}

.am-card-style-overlay .am-post-card__title a,
.am-card-style-overlay .am-post-meta,
.am-card-style-overlay .am-post-meta a,
.am-card-style-overlay .am-post-card__excerpt {
	color: #ffffff;
}

.am-card-style-overlay .am-post-card__title a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.am-card-style-overlay .am-post-card__excerpt {
	opacity: 0.88;
}

/* ------------------------------------------------------------- Comments. */

.am-comments {
	margin-top: var(--am-7);
	padding-top: var(--am-6);
	border-top: 1px solid var(--am-border);
}

.am-comments h2,
.am-comments .comment-reply-title {
	font-size: var(--am-text-lg);
	margin-bottom: var(--am-4);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--am-6);
	padding: 0;
}

.comment-list ol.children {
	list-style: none;
	/* Indent replies, but only by as much as a phone can spare. A fixed 2rem
	   per level pushes a third-level reply off a 375px screen entirely. */
	margin: var(--am-3) 0 0;
	padding-left: var(--am-3);
	border-left: 2px solid var(--am-border);
}

@media (min-width: 640px) {
	.comment-list ol.children {
		padding-left: var(--am-5);
	}
}

.comment-list li.comment {
	margin: 0 0 var(--am-4);
}

.comment-body {
	padding-bottom: var(--am-4);
	border-bottom: 1px solid var(--am-border);
}

.comment-list ol.children .comment-body:last-child {
	border-bottom: 0;
}

.comment-meta,
.comment-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-2);
	margin-bottom: var(--am-2);
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
}

.comment-author .avatar {
	border-radius: 50%;
	flex: none;
	width: 36px;
	height: 36px;
}

.comment-author .fn {
	font-weight: 620;
	font-style: normal;
	color: var(--am-text);
}

.comment-metadata a,
.comment-author a {
	color: var(--am-text-muted);
	text-decoration: none;
}

.comment-content {
	/* A pasted URL in a comment is the classic way a phone layout ends up
	   scrolling sideways. */
	overflow-wrap: break-word;
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.comment-content img,
.comment-content iframe {
	max-width: 100%;
	height: auto;
}

.reply {
	margin-top: var(--am-2);
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-size: var(--am-text-sm);
	font-weight: 550;
	text-decoration: none;
}

@media (pointer: coarse) {
	.comment-reply-link { min-height: 44px; }
}

.comment-form {
	display: grid;
	gap: var(--am-3);
	max-width: var(--am-prose-width);
}

.comment-form p {
	margin: 0;
}

.comment-form label {
	display: block;
	margin-bottom: var(--am-1);
	font-size: var(--am-text-sm);
	font-weight: 600;
}

/* WordPress emits bare inputs for author, email and url. They have to look
   like the rest of the site without the theme rewriting comment_form. */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--am-border-strong);
	border-radius: var(--am-radius);
	background: var(--am-bg-raised);
	color: var(--am-text);
	font-family: inherit;
	font-size: var(--am-text-base);
	line-height: 1.5;
}

@media (pointer: coarse) {
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"] {
		min-height: 44px;
	}
}

.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
	outline: 2px solid var(--am-accent);
	outline-offset: 1px;
	border-color: var(--am-accent);
}

/*
 * Three fields side by side once there is room, stacked before that.
 *
 * Done with grid columns rather than inline-block widths: the form is already a
 * grid, and a grid item cannot be made to flow inline - it just takes a row of
 * its own and the three fields stay stacked at every width.
 */
@media (min-width: 640px) {
	.comment-form {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.comment-form > * {
		grid-column: 1 / -1;
	}

	.comment-form .comment-form-author,
	.comment-form .comment-form-email,
	.comment-form .comment-form-url {
		grid-column: auto;
	}
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--am-2);
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
}

.comment-form .comment-form-cookies-consent input {
	margin-top: 0.2em;
	flex: none;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.comment-notes,
.logged-in-as {
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
}

/* Boxed. */
.am-comment-style-boxed .comment-body {
	padding: var(--am-4);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	background: var(--am-bg-raised);
}

.am-comment-style-boxed .comment-list ol.children {
	border-left: 0;
}

/* Joined by a thread line. */
.am-comment-style-threaded .comment-body {
	border-bottom: 0;
	padding-bottom: var(--am-2);
}

.am-comment-style-threaded .comment-list > li.comment {
	padding-bottom: var(--am-4);
	border-bottom: 1px solid var(--am-border);
}

.am-comment-style-threaded .comment-list ol.children {
	border-left: 2px solid var(--am-accent-line);
}

/* ------------------------------------------------- Home page article list. */

.am-home-posts__more {
	margin-top: var(--am-5);
	display: flex;
	justify-content: center;
}