/* Gorilla Sun, everything the lab decided for the Ghost theme, as one file.
   Loaded after the theme's screen.css; in the theme it is assets/built/
   gorilla.css (ghost-theme/build.sh copies it there), and the lab's candidate
   (app/(lab)/lab/ghost-blog/candidate) serves this same file. Only theme
   variables and the body classes Ghost gives each page. */

/* ---- Navbar: the current page underlined. Ghost marks Home, Community and
   About; the Articles page, posts, tag and author pages count as Articles. ---- */
.gh-head .nav > li.nav-current > a,
:is(.post-template, .tag-template, .author-template, .page-articles) .gh-head .nav > li.nav-articles > a {
	text-decoration: underline;
	text-decoration-color: var(--ghost-accent-color);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}
.is-head-transparent .gh-head .nav > li.nav-current > a {
	text-decoration-color: var(--color-white);
}

/* ---- Footer ---- */
.gs-foot {
	padding-top: 0;
	padding-bottom: 4rem;
	color: var(--color-dark-gray);
	font-family: var(--font-sans);
	font-size: 1.5rem;
	white-space: normal;
}
@media (max-width: 767px) {
	/* Room for Portal's floating button. */
	.gs-foot {
		padding-bottom: 9rem;
	}
}
.gs-foot-inner {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	width: 100%;
	padding-top: 3.2rem;
	border-top: 5px solid var(--color-black);
}
.gs-foot a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--color-darker-gray);
	text-decoration: none;
}
.gs-foot a:hover {
	color: var(--color-darker-gray);
	text-decoration: underline;
	text-decoration-color: var(--ghost-accent-color);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	opacity: 1;
}
.gs-foot-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3.2rem 6.4rem;
}
.gs-foot-ask {
	flex: 1 1 min(32rem, 100%);
	min-width: 0;
	max-width: 46rem;
}
.gs-foot-make {
	margin: 0;
	font-family: var(--font-mono);
	font-size: clamp(2.4rem, 2rem + 0.8vw, 3rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.gs-foot-ask p {
	margin: 1rem 0 0;
	color: var(--color-dark-gray);
	font-family: var(--font-serif);
	font-size: 1.6rem;
	line-height: 1.55;
}
/* Not the hero's white pill, which the theme applies to every pill on the home page. */
.gs-foot-ask .gh-subscribe-input {
	min-width: 0;
	background-color: var(--color-border);
	color: var(--color-dark-gray);
	height: 48px;
	margin: 1.6rem 0 0;
	font-size: 1.5rem;
	white-space: nowrap;
}
.gs-foot-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(12rem, auto));
	gap: 2.4rem 6.4rem;
}
@media (max-width: 767px) {
	.gs-foot-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		gap: 2.4rem 1.2rem;
	}
}
.gs-foot-col h2 {
	margin: 0 0 0.4rem;
	color: var(--color-dark-gray);
	font-family: var(--font-sans) !important;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0;
}
.gs-foot-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gs-foot-col li {
	margin: 0;
}
/* All on the left: Portal's floating button covers the bottom right. */
.gs-foot-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2rem;
	font-size: 1.3rem;
}
.gs-foot-legal a {
	color: var(--color-dark-gray);
}

/* ---- Tag buttons, on the Articles page, tag and author pages: sticky on white, one
   row that scrolls sideways when it doesn't fit. ---- */
.gs-tags {
	position: sticky;
	top: 0;
	z-index: 10;
	margin-bottom: 2.4rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background: var(--color-white);
}
.page-articles .gs-tags {
	margin-top: 0.6rem;
}
.gs-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}
.gs-pills::-webkit-scrollbar {
	display: none;
}
.gs-pills li {
	flex: none;
	margin: 0;
	padding: 0;
}
.gs-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 32px;
	padding: 0 1.2rem;
	border: 1px solid var(--color-light-gray);
	border-radius: 999px;
	color: var(--color-darker-gray) !important;
	font-family: var(--font-sans);
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}
.gs-pill:hover {
	border-color: var(--color-darker-gray);
}
.gs-tag-dot {
	flex: none;
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	background: var(--tag-color);
}
.gs-count {
	color: var(--color-dark-gray);
	font-weight: 500;
}
.gs-pill[aria-current='page'] {
	border-color: var(--color-darker-gray);
	background: var(--color-darker-gray);
	color: var(--color-white) !important;
}
.gs-pill[aria-current='page'] .gs-count {
	color: inherit;
}

/* ---- Articles page ---- */
.page-articles .gh-post-title {
	font-size: clamp(2.8rem, 2.2rem + 1.2vw, 4rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

/* Glide's CSS has a slide 100% wide until its script, at the very end of the
   page, sets the width: the first slide shows large, then the row jumps. The
   final widths from the start: 3, 2 or 1 a row, 10px apart, as the page's
   script asks for. Once Glide has mounted it adds glide--ltr. */
.page-articles .glide:not(.glide--ltr) .glide__slides {
	gap: 10px;
}
.page-articles .glide:not(.glide--ltr) .glide__slide {
	width: calc((100% - 20px) / 3);
}
@media (max-width: 980px) {
	.page-articles .glide:not(.glide--ltr) .glide__slide {
		width: calc((100% - 10px) / 2);
	}
}
@media (max-width: 767px) {
	.page-articles .glide:not(.glide--ltr) .glide__slide {
		width: 100%;
	}
}

/* The arrows: a sized icon in a 32px circle. The theme lifts its 25px circle
   by half its height; this one would cover the rule above the row title. */
.page-articles .arrow-button {
	width: 32px;
	height: 32px;
	padding: 0;
	transform: none;
}
.page-articles .arrow-button svg {
	flex: none;
	width: 14px;
	height: 14px;
}

/* A card fills its row. */
.page-articles .glide__slides {
	align-items: stretch;
	margin-bottom: 0;
}
.page-articles .glide__slide {
	display: flex;
	height: auto;
	padding: 0;
}
.page-articles .glide__slide .gh-card,
.page-articles .glide__slide .gh-card-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	height: auto;
}
.page-articles .glide__slide .gh-card-wrapper {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-height: 0;
	margin-bottom: 0;
}

/* The rows' titles. */
.page-articles .vertical {
	font-family: var(--font-sans) !important;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

/* The rail as tall as the row, with a title small enough to leave the cards
   setting the height. */
@media (min-width: 981px) {
	.page-articles .vertical-wrap {
		height: 100%;
	}
	.page-articles .vertical {
		margin-bottom: 1.6rem;
		font-size: 36px !important;
		line-height: 1;
	}
	.page-articles .gh-feed > .row {
		margin-bottom: 5.6rem;
	}
}
@media (min-width: 1301px) {
	.page-articles .vertical {
		font-size: 44px !important;
	}
}
@media (max-width: 980px) {
	.page-articles .gh-feed > .row {
		margin-bottom: 4rem;
	}
	.page-articles .title-button-wrap {
		margin-bottom: 1.2rem;
	}
}

/* ---- Cards, on the Articles page, tag and author pages: one 24px grid. Title, date
   and excerpt lines are all multiples of it, so what the excerpt gets when it
   fills a card is always whole lines. The theme clamps titles and excerpts in
   inline styles, hence the !important on the clamps. ---- */
:is(.page-articles, .tag-template, .author-template) .gh-card .gh-card-title {
	margin-top: 1.2rem;
	font-family: var(--font-sans) !important;
	font-size: 2rem;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.005em;
	-webkit-line-clamp: 3 !important;
	line-clamp: 3 !important;
}
:is(.page-articles, .tag-template, .author-template) .gh-card .gh-card-meta {
	margin-top: 0;
	color: var(--color-dark-gray);
	font-size: 1.3rem;
	line-height: 24px;
}
:is(.page-articles, .tag-template, .author-template) .gh-card .gh-content {
	margin-top: 0.8rem !important;
}
:is(.page-articles, .tag-template, .author-template) .gh-card .gh-content > p {
	color: var(--color-dark-gray);
	font-size: 1.5rem;
	line-height: 24px;
	-webkit-line-clamp: 3 !important;
	line-clamp: 3 !important;
}
/* The excerpt takes what is left of the card, in whole lines. */
.page-articles .gh-card .gh-content {
	flex: 1 1 0;
	min-height: 72px;
	overflow: hidden;
}
.page-articles .gh-card .gh-content > p {
	display: block !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
}
@media (min-width: 981px) {
	.page-articles .gh-card .gh-card-title {
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
	}
}

/* ---- Tag and author pages ---- */
/* The grid: 1, 2 or 3 columns, as wide as the navbar (both are .gh-inner).
   The theme's gallery wrappers step aside, so every card is a grid item. The theme's infinite scroll only runs on a
   .gh-feed, so this name turns it off here, where the pages are numbered. */
:is(.tag-template, .author-template) .gs-feed {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4.8rem 2.4rem;
}
:is(.tag-template, .author-template) .gs-feed :is(figure.kg-card, .kg-gallery-container, .kg-gallery-row, .kg-gallery-image) {
	display: contents;
}
@media (max-width: 1100px) {
	:is(.tag-template, .author-template) .gs-feed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	:is(.tag-template, .author-template) .gs-feed {
		grid-template-columns: minmax(0, 1fr);
		gap: 3.2rem;
	}
}
:is(.tag-template, .author-template) .gs-feed .gh-card,
:is(.tag-template, .author-template) .gs-feed .gh-card-link {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	margin: 0;
}
:is(.tag-template, .author-template) .gs-feed .gh-card-wrapper {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-height: 0;
	margin-bottom: 0;
}
@media (min-width: 768px) {
	:is(.tag-template, .author-template) .gh-card .gh-card-title {
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
	}
	:is(.tag-template, .author-template) .gh-card .gh-content {
		flex: 1 1 0;
		min-height: 72px;
		overflow: hidden;
	}
	:is(.tag-template, .author-template) .gh-card .gh-content > p {
		display: block !important;
		overflow: visible !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
	}
}

/* The header. */
.gs-tg-head {
	margin-top: clamp(2.4rem, 1.6rem + 2vw, 4.8rem);
	margin-bottom: 0;
}
.gs-tg-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(2.8rem, 2.2rem + 1.2vw, 4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.gs-tg-line {
	max-width: 34em;
	margin: 1.2rem 0 0;
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 1.6rem + 0.2vw, 1.8rem);
	line-height: 1.55;
}
.gs-tg-count {
	margin: 0.8rem 0 0;
	color: var(--color-dark-gray);
	font-family: var(--font-sans);
	font-size: 1.4rem;
	font-weight: 600;
}
/* Main is the buttons' parent, so they last the whole feed; a grid item would
   only stick inside its own row. */
:is(.tag-template, .author-template) .gs-tags-wrap {
	display: contents;
}
:is(.tag-template, .author-template) .gs-tags {
	width: 100%;
	max-width: var(--container-width);
	margin: 1.2rem auto 2.4rem;
}

/* ---- Post: the header. ---- */
.gh-main:has(.gs-ph) {
	padding-top: clamp(2rem, 1rem + 2vw, 4rem);
}
.gs-ph {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	max-width: 700px;
	margin: 0 auto 1em;
}
.gs-meta,
.gs-by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.8rem;
	color: var(--color-dark-gray);
	font-family: var(--font-sans);
	font-size: 1.4rem;
	line-height: 1.5;
}
.gs-meta {
	margin: 0 0 1rem;
	font-weight: 600;
}
.gs-by {
	margin: 1.2rem 0 0;
	font-weight: 500;
}
/* A date never breaks inside itself; the line breaks between items. */
.gs-item {
	white-space: nowrap;
}
.gs-meta .gs-item + .gs-item::before,
.gs-by .gs-item + .gs-item::before {
	content: '·';
	margin-right: 0.8rem;
	color: var(--color-mid-gray);
}
.gs-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color-darker-gray) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.gs-author {
	color: var(--color-darker-gray);
	text-decoration: underline;
	text-decoration-color: var(--ghost-accent-color);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}
.gs-title {
	max-width: 22em;
	margin: 0;
	font-family: var(--font-mono);
	font-size: clamp(2.4rem, 1.8rem + 1.4vw, 3.8rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.gs-excerpt {
	max-width: 62ch;
	margin: 1.4rem 0 0;
	color: var(--color-dark-gray);
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 1.6rem + 0.2vw, 1.8rem);
	line-height: 1.55;
}
.gs-ph > .gh-article-image {
	grid-column: 1 / -1;
	margin: 2.4rem 0 0;
}
.gs-ph > .gh-article-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
@media (min-width: 1181px) {
	.gs-ph {
		max-width: 1100px;
		grid-template-columns: minmax(0, 700px);
	}
	.gs-excerpt {
		margin-top: 2.4rem;
	}
}

/* ---- Post: the article on the page's left edge, where the navbar's first
   link starts. From 768; below that the column is the page's width. ---- */
.gh-main:has(.gs-ph) .gh-article-footer,
.gh-main:has(.gs-ph) .gh-comments,
.gs-end-ad {
	display: block;
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
}
.gs-end-ad {
	margin-top: 4rem;
}
@media (min-width: 768px) {
	.gs-ph {
		margin-left: 0;
	}
	.gh-main:has(.gs-ph) .custom-article-content,
	.gh-main:has(.gs-ph) .custom-article-content-main {
		margin-left: 0;
	}
	.gh-main:has(.gs-ph) .gh-article-footer,
	.gh-main:has(.gs-ph) .gh-comments,
	.gs-end-ad {
		margin-left: 0;
	}
}
@media (min-width: 1181px) {
	.gh-main:has(.gs-ph) .custom-article-content-main-wrap {
		flex: 1 1 0;
	}
	.gh-main:has(.gs-ph) .custom-article-content-aside {
		flex: 0 0 336px;
		padding-left: 0;
	}
	.gh-main:has(.gs-ph) .custom-article-content-aside-index {
		margin-left: 0;
	}
}

/* ---- Post: the text. 17px on a phone, 18 from 768: 50 to 75 characters a
   line on a laptop; a line between paragraphs; headings a small step over the
   text, with much more space above than below. ---- */
.post-template {
	--gs-text: 17px;
	--gs-h2: 24px;
	--gs-h3: 20px;
	--gs-h4: 18px;
	--gs-small: 14px;
}
@media (min-width: 768px) {
	.post-template {
		--gs-text: 18px;
		--gs-h2: 30px;
		--gs-h3: 23px;
		--gs-h4: 19px;
		--gs-small: 15px;
	}
}
.post-template .gh-content {
	--content-font-size: var(--gs-text);
	--content-spacing-multiplier: 1;
	font-size: var(--gs-text);
	line-height: 1.6;
}
.post-template .gh-content > h2 {
	font-size: var(--gs-h2);
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.post-template .gh-content > h3 {
	font-size: var(--gs-h3);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.post-template .gh-content > h4 {
	font-size: var(--gs-h4);
	line-height: 1.3;
}
.post-template .gh-content > h2:not(:first-child) {
	margin-top: 2.2em;
}
.post-template .gh-content > :is(h3, h4):not(:first-child) {
	margin-top: 1.8em;
}
.post-template .gh-content > [id] + * {
	margin-top: 0.8em;
}
.post-template .gh-content figcaption {
	margin-top: 1rem;
	color: var(--color-dark-gray);
	font-size: var(--gs-small);
	line-height: 1.45;
}
.post-template .gh-content pre {
	font-size: var(--gs-small);
	line-height: 1.6;
}
.post-template .gh-content :not(pre) > code {
	font-size: 0.85em;
}
.post-template .gh-content > blockquote {
	font-size: 1em;
	line-height: 1.55;
}
.post-template .gh-content li + li {
	margin-top: 0.6rem;
}

/* ---- Post: the rail. Share and Copy link in words, the contents in the sans,
   one entry a line (the theme's .toc-list is a wrapping row). ---- */
.gs-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 1.6rem;
}
.gs-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 32px;
	padding: 0 1.4rem;
	border: 1px solid var(--color-light-gray);
	border-radius: 999px;
	background: none;
	color: var(--color-darker-gray) !important;
	font: 700 1.3rem/1 var(--font-sans);
	text-decoration: none !important;
	cursor: pointer;
}
.gs-share-btn:hover {
	border-color: var(--color-darker-gray);
}
.gs-share-btn:focus-visible {
	outline: 2px solid var(--ghost-accent-color);
	outline-offset: 2px;
}
.gs-notifier {
	color: var(--color-dark-gray);
	font: 700 1.2rem/1 var(--font-sans);
	letter-spacing: 0.05em;
}
.gs-toc-label {
	margin: 0 0 0.8rem 2em;
	color: var(--color-dark-gray);
	font: 700 1.2rem/1 var(--font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.post-template .gh-toc {
	font-family: var(--font-sans);
}
.post-template .gh-toc a {
	font-family: var(--font-sans) !important;
	font-size: 1.4rem;
	line-height: 1.4;
}
.post-template .gh-toc .toc-list {
	display: block;
}
.post-template .gh-toc .toc-list .toc-list {
	padding-left: 1.4rem;
}
.post-template .gh-toc .toc-list-item {
	display: block;
	padding: 0.2rem 0;
}

/* ---- Post: Previous and Next as one row of two small links. ---- */
.gs-navs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.6rem 3.2rem;
	grid-column: 1 / -1;
	max-width: 700px;
	padding-top: 2.4rem;
	border-top: 1px solid var(--color-light-gray);
}
@media (max-width: 600px) {
	.gs-navs {
		grid-template-columns: minmax(0, 1fr);
	}
}
.gs-nav {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	min-height: 64px;
	color: var(--color-darker-gray) !important;
	text-decoration: none !important;
}
.gs-nav-next {
	flex-direction: row-reverse;
	text-align: right;
}
@media (max-width: 600px) {
	.gs-nav-next {
		flex-direction: row;
		text-align: left;
	}
}
.gs-nav figure {
	flex: none;
	width: 64px;
	height: 64px;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--color-lighter-gray);
}
.gs-nav img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gs-nav-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}
.gs-nav-label {
	color: var(--color-dark-gray);
	font-family: var(--font-sans);
	font-size: 1.3rem;
	font-weight: 600;
}
.gs-nav-title {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.gs-nav:hover .gs-nav-title {
	text-decoration: underline;
	text-decoration-color: var(--ghost-accent-color);
	text-decoration-thickness: 2px;
}

/* ---- Tag and author pages: Previous, the page numbers, Next. On a phone the arrows alone,
   so one row holds them. ---- */
.gs-pages {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.8rem;
	margin-top: 4.8rem;
	font-family: var(--font-sans);
	font-size: 1.4rem;
}
.gs-page-next {
	justify-self: end;
}
.gs-page-prev {
	justify-self: start;
}
.gs-pages-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	color: var(--color-dark-gray);
}
.gs-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-width: 36px;
	height: 36px;
	padding: 0 1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--color-darker-gray);
	font-weight: 700;
	text-decoration: none;
}
.gs-page:hover {
	border-color: var(--color-darker-gray);
	opacity: 1;
}
.gs-page[aria-current='page'] {
	border-color: var(--color-darker-gray);
	background: var(--color-darker-gray);
	color: var(--color-white);
}
.gs-page-gap {
	min-width: 16px;
	text-align: center;
}
@media (max-width: 600px) {
	.gs-page-word {
		display: none;
	}
}

/* ---- Navbar: dark mode's toggle, left of search. The lightbulb hangs from its
   base and swings when pressed, as on gorillasun.com. ---- */
#gh-head .gh-head-brand {
	grid-template-columns: 1fr auto auto auto;
}
.gs-theme svg {
	transform-origin: top;
}
.gs-swing svg {
	animation: gs-swing 0.8s ease-in-out;
}
@keyframes gs-swing {
	20% {
		transform: rotate(18deg);
	}
	45% {
		transform: rotate(-12deg);
	}
	65% {
		transform: rotate(7deg);
	}
	82% {
		transform: rotate(-3deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.gs-swing svg {
		animation: none;
	}
}

/* ---- Dark mode: :root.dark, the theme's own colour names turned over. The page
   is the theme's ink. The hero stays white on its picture. ---- */
:root.dark {
	color-scheme: dark;
	--background-color: #15171a;
	--color-white: #15171a;
	--color-black: #f1f1f1;
	--color-lighter-gray: #24272c;
	--color-light-gray: #33373d;
	--color-mid-gray: #5a5f66;
	--color-dark-gray: #b8bcc2;
	--color-darker-gray: #f1f1f1;
	--color-secondary-text: #b8bcc2;
	--color-border: hsla(0, 0%, 100%, 0.16);
}
:root.dark .is-head-transparent .gh-head,
:root.dark .gh-about {
	--color-white: #fff;
}
/* What the theme and its templates draw in raw black. */
/* The rows' bar: the theme makes it white below 980. */
:root.dark .vertical-wrap {
	border-color: var(--color-black);
	background-color: transparent !important;
}
:root.dark .arrow-button {
	border-color: #fff;
	color: #fff;
}
:root.dark .arrow-button:hover {
	border-color: var(--ghost-accent-color);
}
:root.dark .arrow-button svg {
	fill: currentColor;
}
/* Orange buttons keep their white words: the theme writes them in the page's colour. */
:root.dark .gh-primary-btn {
	color: #fff;
}
/* Except on the home page's picture, where the navbar's is a white pill. */
:root.dark .is-head-transparent .gh-head-btn {
	color: #15171a;
}
:root.dark [style*='dotted #000'] {
	border-left-color: var(--color-black) !important;
}
/* A picture with a transparent background sits on white, as it does in light
   mode: black lines would vanish on the ink. */
:root.dark .gh-content img,
:root.dark .gh-card-image img {
	background: #fff;
}
/* Captions outside the post's text, in the theme's lighter grey. */
:root.dark figcaption {
	color: var(--color-dark-gray);
}
/* Inline code: the orange is 4.2:1 on its dark ground, this 5.5:1. */
:root.dark .gh-content :not(pre) > code {
	color: #ff7a4d;
}
/* Ghost's bookmark cards are white by default. */
:root.dark .kg-bookmark-container {
	background: var(--color-lighter-gray);
	color: var(--color-darker-gray) !important;
}
/* The About page's links. */
:root.dark .link-list > li,
:root.dark .link-list-logo {
	border-color: var(--color-black);
}
/* The contents' guide line is the theme's raw #eee; the active entry's stays orange. */
:root.dark .toc-link:not(.is-active-link)::before {
	background-color: var(--color-light-gray);
}

/* ---- Author pages: the tag pages' header, with his picture beside it. ---- */
.gs-author-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: clamp(1.2rem, 0.8rem + 1vw, 2rem);
}
.gs-author-pic {
	width: clamp(56px, 48px + 2vw, 72px);
	height: clamp(56px, 48px + 2vw, 72px);
	border-radius: 50%;
	object-fit: cover;
}
.gs-author-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.2rem;
}
.gs-author-meta a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--color-darker-gray);
	text-decoration: underline;
	text-decoration-color: var(--ghost-accent-color);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
/* Ghost's comments and Portal's buttons are transparent iframes. A browser gives an
   iframe an opaque white background when its colour scheme differs from its own
   document's, so they keep theirs. */
:root.dark iframe {
	color-scheme: light;
}