/* ==========================================================================
   Blog: list (home.php), category archives (category.php), posts (single.php)
   1. Shared: breadcrumb, label, meta line, 16:9 media, auto cover
   2. List header
   3. Featured post
   4. Category filters
   5. Post rows and pagination
   6. Post header and layout
   7. Table of contents
   8. Post body
   9. Author box and related posts
   10. Reading progress
   11. Motion: hovers, and the filter swap (assets/js/blog-list.js)

   The closing CTA and the FAQ accordion (used for Rank Math's FAQ block) are
   styled in closing.css. No keyhole devices on blog pages.
   ========================================================================== */

.blog-page,
.post-page {
	--reading: 40rem; /* the reading column: about 68 characters of body text */
	--toc-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--space-6));
}

/* The filter swap keeps the scroll position itself (blog-list.js), so the
   browser's own scroll anchoring stays out of the way. */
.blog-page {
	isolation: isolate; /* keeps leaving rows (below) behind the new content */
	overflow-anchor: none;
}

/* 1. Shared
   ========================================================================== */

/* Breadcrumb: the light version, as on About. */
.blog-page .breadcrumb__list,
.post-page .breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	list-style: none;
}

.blog-page .breadcrumb__item + .breadcrumb__item::before,
.post-page .breadcrumb__item + .breadcrumb__item::before {
	content: "/" / "";
	margin-inline: var(--space-2);
}

.blog-page .breadcrumb a,
.post-page .breadcrumb a {
	color: var(--brand-blue);
	text-decoration: underline;
	text-decoration-color: var(--border-subtle);
	text-underline-offset: 0.3em;
}

.blog-page .breadcrumb a:hover,
.post-page .breadcrumb a:hover {
	text-decoration-color: var(--accent-yellow);
}

/* Category label: eyebrow style. */
.post-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-blue);
}

.post-label a {
	text-decoration: none;
}

.post-label a:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
}

/* Meta line: items separated by a middle dot. Every item starts with a dot;
   the row is pulled left by one dot's width and clipped there, so the dot at
   the start of each line (including after a wrap) is hidden. The clip stops
   short of the text, so focus outlines still show. */
.post-meta {
	--sep: 1.5rem;

	display: flex;
	flex-wrap: wrap;
	row-gap: var(--space-1);
	margin-inline-start: calc(var(--sep) * -1);
	font-size: var(--text-sm);
	color: var(--ink-muted);
	clip-path: inset(-1rem -1rem -1rem 0.875rem);
}

.post-meta > *::before {
	content: "\00B7" / "";
	display: inline-block;
	width: var(--sep);
	font-weight: var(--weight-regular);
	color: var(--ink-muted);
	text-align: center;
}

.post-meta__author {
	font-weight: var(--weight-semibold);
	color: var(--ink);
}

a.post-meta__author {
	text-decoration: underline;
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

a.post-meta__author:hover {
	color: var(--brand-blue);
}

/* A post's picture: the featured image or the auto cover, always 16:9. */
.post-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--surface-100);
}

.post-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Auto cover. Sized to its own width (container units), so it reads the
   same in the featured slot, a post header or anywhere else. */
.auto-cover {
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	height: 100%;
	color: var(--on-blue);
	background-color: var(--brand-blue);
}

/* Pinwheel texture, as in the homepage hero (hero.css): the PNG is a stencil
   filled with a darker blue. Two stripe masks, one for rows and one for
   columns, keep one tile in every three by three, so it stays low density.
   The file is 830 x 876, hence the 1.0554 ratio. */
.auto-cover::before {
	--tile-w: max(1.5rem, 5cqi);
	--tile-h: calc(var(--tile-w) * 1.0554);

	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--brand-blue-700);
	opacity: 0.45;
	/* Columns start one tile in, rows two tiles down, so the category label
	   sits in a clear band and no pinwheel is cut at the top edge. */
	-webkit-mask-image:
		url("../images/digiholic-pattern-blue.png"),
		repeating-linear-gradient(to right, transparent 0 var(--tile-w), black var(--tile-w) calc(var(--tile-w) * 2), transparent calc(var(--tile-w) * 2) calc(var(--tile-w) * 3)),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--tile-h) * 2), black calc(var(--tile-h) * 2) calc(var(--tile-h) * 3));
	mask-image:
		url("../images/digiholic-pattern-blue.png"),
		repeating-linear-gradient(to right, transparent 0 var(--tile-w), black var(--tile-w) calc(var(--tile-w) * 2), transparent calc(var(--tile-w) * 2) calc(var(--tile-w) * 3)),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--tile-h) * 2), black calc(var(--tile-h) * 2) calc(var(--tile-h) * 3));
	-webkit-mask-size: var(--tile-w) var(--tile-h), auto, auto;
	mask-size: var(--tile-w) var(--tile-h), auto, auto;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	-webkit-mask-repeat: repeat, no-repeat, no-repeat;
	mask-repeat: repeat, no-repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.auto-cover__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 6cqi;
}

.auto-cover__category {
	font-size: max(0.6875rem, 2.2cqi);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-yellow);
}

.auto-cover__logo {
	width: auto;
	height: max(1rem, 4cqi);
	margin-top: auto;
	margin-inline-start: auto;
}

/* 2. List header
   ========================================================================== */

.blog-hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-7);
}

.blog-hero__title {
	margin-top: var(--space-6);
	font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5rem);
	color: var(--brand-blue);
}

.blog-hero__intro {
	max-width: var(--measure);
	margin-top: var(--space-5);
	font-size: var(--text-lg);
}

/* 3. Featured post
   Stacked on phones and tablets. Desktop: picture on 7 of 12 columns, text on 5.
   ========================================================================== */

.blog-featured {
	padding-bottom: var(--space-8);
}

.featured-post {
	position: relative;
	display: grid;
	gap: var(--space-5);
}

.featured-post__text {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--space-4);
}

/* One step below the section scale, so a 60 to 70 character title fits in
   three lines at 1440 and never outweighs the h1. */
.featured-post__title {
	font-size: var(--text-2xl);
}

.featured-post__link {
	color: var(--ink);
	text-decoration: none;
}

/* The title link covers the whole block, so the picture and text click through too. */
.featured-post__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.featured-post__link:focus-visible {
	outline: 0;
}

.featured-post__link:focus-visible::after {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.featured-post:hover .featured-post__link {
	color: var(--brand-blue);
}

.featured-post__excerpt {
	max-width: var(--measure);
}

@media (min-width: 64em) {
	.featured-post {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-7);
	}

	.featured-post .post-media {
		grid-column: 1 / span 7;
	}

	.featured-post__text {
		grid-column: 8 / -1;
	}
}

/* 4. Category filters
   Wrap onto more lines on narrow screens rather than scroll sideways.
   ========================================================================== */

.blog-posts {
	padding-bottom: var(--space-section);
}

.blog-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	padding-block: var(--space-4);
	border-block: 1px solid var(--border-subtle);
}

.blog-filters__link {
	display: inline-block;
	padding-block: var(--space-2);
	font-weight: var(--weight-semibold);
	color: var(--ink);
	text-decoration: none;
}

.blog-filters__link:hover {
	color: var(--brand-blue);
}

/* Active: blue text carries the state; the yellow underline is the accent on top. */
.blog-filters__link[aria-current="page"] {
	color: var(--brand-blue);
	text-decoration: underline;
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.45em;
}

/* 5. Post rows
   Editorial rows between hairlines, no background fills. Stacked on phones.
   From tablet: date and category | title and excerpt | reading time and arrow.
   ========================================================================== */

.blog-posts__title {
	margin-top: var(--space-7);
	margin-bottom: var(--space-5);
	font-size: var(--text-2xl);
	color: var(--brand-blue);
}

.blog-posts__title:focus {
	outline: 0;
}

/* Only when the filters move focus here. */
.blog-posts__title:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
}

/* On an archive the heading is hidden, so the rows start straight under the
   filters, sharing the filters' bottom hairline. */
.blog-posts__title.screen-reader-text + .post-rows,
.blog-posts__title.screen-reader-text + .blog-posts__empty {
	border-top: 0;
}

.post-rows {
	position: relative;
	border-top: 1px solid var(--border-subtle);
}

.post-row {
	position: relative;
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--border-subtle);
	background-color: var(--surface);
}

.post-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

.post-row__category {
	font-weight: var(--weight-semibold);
}

.post-row__title {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	text-transform: none;
}

.post-row__link {
	color: var(--ink);
	text-decoration: none;
}

/* The title link covers the whole row: one link, named by the title. */
.post-row__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.post-row__link:focus-visible {
	outline: 0;
}

.post-row__link:focus-visible::after {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.post-row:hover .post-row__link {
	color: var(--brand-blue);
}

.post-row__excerpt {
	display: -webkit-box;
	margin-top: var(--space-2);
	overflow: hidden;
	color: var(--ink-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.post-row__end {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

.post-row__arrow {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: var(--brand-blue);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.post-row:hover .post-row__arrow {
	transform: translateX(4px);
}

@media (min-width: 48em) {
	.post-row {
		grid-template-columns: 10rem minmax(0, 1fr) 8rem;
		align-items: baseline;
		gap: var(--space-6);
		padding-block: var(--space-6);
	}

	.post-row__meta {
		flex-direction: column;
	}

	.post-row__end {
		justify-content: flex-end;
	}
}

.blog-posts__empty {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	padding-block: var(--space-6);
	border-block: 1px solid var(--border-subtle);
}

.blog-posts__all {
	font-weight: var(--weight-semibold);
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Pagination: numbered, with previous and next. */
.pagination {
	margin-top: var(--space-7);
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	gap: var(--space-2); /* flex drops the spaces around the arrows */
	padding-inline: var(--space-3);
	font-weight: var(--weight-semibold);
	color: var(--ink);
	text-decoration: none;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}

.pagination a.page-numbers:hover {
	color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.pagination .page-numbers.current {
	color: var(--on-blue);
	background-color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* 6. Post header and layout
   Phones and tablets: one centred column. From 1200px: three columns, the
   reading column in the middle and the table of contents in the left margin.
   ========================================================================== */

.post {
	padding-top: var(--space-8);
	padding-bottom: var(--space-section);
}

.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-7);
}

.post-header {
	display: grid;
	gap: var(--space-7);
}

.post-header__text,
.post-layout__body {
	width: 100%;
	max-width: var(--reading);
	margin-inline: auto;
}

.post-header .post-media {
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;
}

.post-header .post-label {
	margin-top: var(--space-6);
}

.post-header__title {
	margin-top: var(--space-3);
	font-size: var(--text-4xl);
	color: var(--brand-blue);
}

.post-header__standfirst {
	margin-top: var(--space-5);
	font-size: var(--text-xl);
	line-height: 1.45;
}

.post-header .post-meta {
	margin-top: var(--space-5);
}

.post-layout__rail {
	display: none;
}

@media (min-width: 75em) {
	.post-layout {
		grid-template-columns: minmax(0, 1fr) var(--reading) minmax(0, 1fr);
		column-gap: var(--space-7);
	}

	.post-header {
		grid-column: 1 / -1;
	}

	.post-layout__rail {
		display: block;
		grid-column: 1;
	}

	.post-layout__body {
		grid-column: 2;
	}
}

/* 7. Table of contents
   ========================================================================== */

.post-toc__label,
.post-toc__summary {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.post-toc__list {
	display: grid;
	gap: var(--space-1);
	border-left: 1px solid var(--border-subtle);
}

.post-toc__link {
	position: relative;
	display: block;
	padding: var(--space-1) 0 var(--space-1) var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
	text-decoration: none;
}

.post-toc__link:hover {
	color: var(--brand-blue);
}

/* The section being read: brand blue with a short marker on the left rule. */
.post-toc__link[aria-current="location"] {
	font-weight: var(--weight-semibold);
	color: var(--brand-blue);
}

.post-toc__link[aria-current="location"]::before {
	content: "";
	position: absolute;
	top: var(--space-2);
	bottom: var(--space-2);
	left: -2px;
	width: 3px;
	background-color: var(--brand-blue);
}

/* Rail: sticky beside the body, from 1200px. */
.post-toc--rail {
	position: sticky;
	top: var(--toc-top);
	max-height: calc(100vh - var(--toc-top) - var(--space-6));
	overflow-y: auto;
}

.post-toc--rail .post-toc__label {
	margin-bottom: var(--space-4);
}

/* Inline: a disclosure above the body, collapsed by default, below 1200px. */
.post-toc--inline {
	margin-bottom: var(--space-7);
	border-block: 1px solid var(--border-subtle);
}

.post-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3rem;
	list-style: none;
	cursor: pointer;
}

.post-toc__summary::-webkit-details-marker {
	display: none;
}

.post-toc__summary::after {
	content: "+" / "";
	font-size: var(--text-xl);
	font-weight: var(--weight-regular);
	line-height: 1;
	color: var(--brand-blue);
}

.post-toc__details[open] > .post-toc__summary::after {
	content: "\2212" / "";
}

.post-toc--inline .post-toc__list {
	margin-bottom: var(--space-5);
}

@media (min-width: 75em) {
	.post-toc--inline {
		display: none;
	}
}

/* 8. Post body
   ========================================================================== */

.post-content {
	font-size: var(--text-base);
	line-height: 1.75;
}

.post-content > * + * {
	margin-top: var(--space-5);
}

.post-content h2,
.post-content h3 {
	scroll-margin-top: var(--toc-top);
}

.post-content > h2 {
	margin-top: var(--space-8);
	font-size: var(--text-2xl);
	color: var(--brand-blue);
}

.post-content > h3 {
	margin-top: var(--space-7);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	text-transform: none;
}

.post-content > h2 + *,
.post-content > h3 + * {
	margin-top: var(--space-4);
}

.post-content a {
	color: var(--brand-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.post-content a:hover {
	color: var(--brand-blue-700);
	text-decoration-thickness: 2px;
}

.post-content ul,
.post-content ol {
	display: grid;
	gap: var(--space-2);
	padding-inline-start: var(--space-5);
}

.post-content li::marker {
	font-weight: var(--weight-bold);
	color: var(--brand-blue);
}

.post-content code {
	padding: 0.1em 0.35em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background-color: var(--surface-100);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
}

.post-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-5);
	font-size: var(--text-xl);
	line-height: 1.5;
	border-left: 4px solid var(--brand-blue);
}

.post-content blockquote cite {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

.post-content figure {
	margin-inline: 0;
}

.post-content img {
	width: 100%;
}

.post-content figcaption,
.post-content .wp-element-caption {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
	text-align: left;
}

/* Tables scroll sideways inside their own wrapper, never the page. */
.post-content .wp-block-table {
	overflow-x: auto;
}

.post-content table {
	width: 100%;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	border-collapse: collapse;
}

.post-content th,
.post-content td {
	min-width: 7.5rem;
	padding: var(--space-3) var(--space-4) var(--space-3) 0;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--border-subtle);
}

.post-content thead th {
	font-weight: var(--weight-bold);
	border-bottom: 2px solid var(--brand-blue);
}

.post-content .wp-block-table thead,
.post-content .wp-block-table tfoot {
	border: 0;
}

/* Definition and Key takeaways: Group block styles registered in inc/blog.php,
   which also prints the label. */
.post-content .is-style-definition,
.post-content .is-style-key-takeaways {
	padding: var(--space-5) var(--space-6);
	background-color: var(--surface-100);
	border-left: 4px solid var(--brand-blue);
}

.post-content .is-style-definition > * + *,
.post-content .is-style-key-takeaways > * + * {
	margin-top: var(--space-3);
}

.callout__label {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-blue);
}

/* Rank Math's FAQ block, printed as the site accordion (closing.css). */
.post-content .post-faq {
	margin-top: var(--space-5);
}

.post-content .faq__answer > * + * {
	margin-top: var(--space-3);
}

/* 9. Author box and related posts
   ========================================================================== */

.post-author {
	padding-block: var(--space-8);
	background-color: var(--surface-100);
}

.post-author__inner {
	display: grid;
	gap: var(--space-5);
	max-width: calc(var(--reading) + var(--gutter) * 2 + 12rem);
}

/* As on About: bottom-aligned in a 4:5 panel. */
.post-author__portrait {
	width: 8rem;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--surface);
	border: 1px solid var(--border-subtle);
}

.post-author__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

.post-author__name {
	margin-top: var(--space-2);
	font-size: var(--text-2xl);
	color: var(--brand-blue);
}

.post-author__role {
	font-weight: var(--weight-semibold);
	color: var(--ink-muted);
}

.post-author__bio {
	max-width: var(--measure);
	margin-top: var(--space-4);
}

.post-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-5);
}

.post-author__links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--weight-semibold);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.post-author__links a:hover {
	color: var(--brand-blue);
	text-decoration-color: var(--brand-blue);
}

.post-author__external {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 48em) {
	.post-author__inner {
		grid-template-columns: 10rem minmax(0, 1fr);
		align-items: start;
		gap: var(--space-7);
	}

	.post-author__portrait {
		width: 10rem;
	}
}

.post-related {
	padding-block: var(--space-section);
}

.post-related__title {
	margin-bottom: var(--space-6);
	color: var(--brand-blue);
}

/* 10. Reading progress
   A 3px line fixed to the top of the window (under the admin bar when logged
   in), filled by assets/js/blog-post.js as the body is read. It tracks under
   reduced motion too, with no easing.
   ========================================================================== */

.reading-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 50;
	height: 3px;
	pointer-events: none;
}

.reading-progress__bar {
	display: block;
	height: 100%;
	background-color: var(--brand-blue);
	transform: scaleX(0);
	transform-origin: left center;
}

/* Phones: the admin bar scrolls away with the page, so the line sits at the very top. */
@media (max-width: 37.5em) {
	.reading-progress {
		top: 0;
	}
}

/* 11. Motion
   Hovers ease only when motion is allowed. The filter swap itself is run
   by assets/js/blog-list.js with the Web Animations API, and skipped under
   reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.post-row__arrow {
		transition: transform 0.2s ease-out;
	}

	.featured-post .post-media__image,
	.featured-post .auto-cover {
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.featured-post:hover .post-media__image,
	.featured-post:hover .auto-cover {
		transform: scale(1.02);
	}
}

/* Rows leaving during a filter swap: held where they were while they fade,
   behind the new rows and the sections below. */
.is-leaving {
	position: absolute;
	z-index: -1;
	margin: 0;
	pointer-events: none;
}