/* Table of contents
/* ------------------------------------------------------------

This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css

1. Variables
2. Fonts
3. Resets
4. Globals
5. Layout
6. Navigation
  6.1. Navigation styles
  6.2. Navigation layouts
  6.3. Dropdown menu
  6.4. Mobile menu
7. Card
8. Header
  8.1. Magazine layout
  8.2. Highlight layout
  8.3. Classic layout
9. CTA
10. Featured posts
11. Container
  11.1. With sidebar
  11.2. Without sidebar
12. Post list
  12.1. List style
  12.2. Grid style
  12.3. No image list
13. Sidebar
14. Post/page
  14.1. Article
  14.2. Page template
  14.3. Page without header
15. Content
16. Cards
17. Comments
18. Recent posts
19. Archive
20. Design settings
21. Footer
  21.1. Footer styles
  21.2. Footer bar
  21.3. Footer signup
22. Lightbox

*/

/* 1. Variables
/* ---------------------------------------------------------- */

:root {
	--color-primary: #fff;
	--color-secondary: #000;
	--color-accent: var(--ghost-accent-color, #f06);
	--color-primary-lighter: color-mix(in srgb, var(--color-primary) 50%, transparent);
	--color-secondary-lighter: color-mix(in srgb, var(--color-secondary) 50%, transparent);
	--color-primary-darker: color-mix(in srgb, var(--color-primary) 85%, black);
	--color-secondary-darker: color-mix(in srgb, var(--color-secondary) 85%, black);

	--font-sans: '-Noto Sans HK', -apple-system, sans-serif;
	--font-serif: Palatino, serif;
	--font-serif-alt: var(--font-serif);
	--font-mono: monospace;
	--container-width: 132rem;
	--container-gap: clamp(2rem, 1.7032rem + 1.9355vw, 5rem);
	--content-width: 72rem;
	--grid-gap: var(--container-gap);

	--main: min(var(--content-width, 72rem), 100% - var(--container-gap) * 2);
	--wide: minmax(0, calc((var(--container-width) - var(--content-width)) / 2));
	--full: minmax(var(--container-gap), 1fr);
}

/* 2. Fonts
/* ---------------------------------------------------------- */

/* @font-face {
	font-family: 'Noto Sans HK';
	font-optical-sizing: auto;
	src: url('../fonts/NotoSansHK-VariableFont_wght.woff2') format('woff2-variations');
	font-display: swap;
	font-weight: 100 900;
} */

/* 3. Resets
/* ---------------------------------------------------------- */

::-webkit-scrollbar {
	cursor: grab;
	inline-size: 1.5rem;
	block-size: 0;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	border-radius: 1rem;
	border: 5px solid var(--color-primary);
	background-color: var(--color-secondary-lighter);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-secondary);
}

::-webkit-scrollbar-thumb:active {
	background-color: var(--color-accent);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	font-size: 10px;
	text-size-adjust: none;
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

body {
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	height: auto;
	max-width: 100%;
}

iframe {
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
}

/* 4. Globals
/* ---------------------------------------------------------- */

body {
	font-family: var(--font-sans);
	font-optical-sizing: auto;
	font-size: 1.6rem;
	background-color: var(--color-primary-lighter);
	color: var(--color-secondary);
}

a {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

a [class] {
	text-decoration: none;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

a:hover {
	opacity: 0.75;
}

a [href] {
	cursor: pointer;
	touch-action: manipulation;
}

ul[role='list'],
ol[role='list'],
ul[class],
ol[class] {
	list-style: none;
	padding: 0;
	margin: 0;
}

address {
	font-style: normal;
}

*:focus {
	outline: none;
}

a:focus-visible {
	outline-offset: 4px;
	outline: 2px solid var(--color-secondary-lighter);
	opacity: 0.8;
	transition: opacity 0.5s;
}

details {
	text-align: start;
	margin-block-end: 1rem;
}

details summary {
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	margin: -1rem -1.5rem;
	line-height: 1;
	font-weight: 500;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-secondary-lighter);
}

details,
details summary {
	padding: 1rem 1.5rem;
}

details summary::after {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 2rem;
	content: '+';
	inline-size: 1lh;
	block-size: 1lh;
	margin-inline-start: 1rem;
}

details[open] summary::after {
	content: '–';
}

details[open] summary {
	margin-block-end: 1rem;
}

details summary::-webkit-details-marker {
	display: none;
}

.centered {
	height: 100%;
	width: 100%;
	display: grid;
	place-items: center;
}

.gh-button {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	justify-content: center;
	padding: 0.8em 1.4em;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.004em;
	line-height: 1;
	color: var(--color-primary-lighter);
	cursor: pointer;
	background-color: var(--color-accent);
	border: 0;
	border-radius: 100px;
}

.gh-button:hover {
	opacity: 0.95;
}

.gh-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: currentColor;
	cursor: pointer;
	background-color: transparent;
	border: 0;
	outline: none;
}

.gh-icon-button:hover :is(svg, span) {
	opacity: 0.8;
}

.gh-icon-button svg {
	width: 2rem;
	height: 2rem;
}

.gh-form {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	max-width: 560px;
	width: 100%;
	height: 4rem;
	font-size: 1.7rem;
	font-weight: 450;
	letter-spacing: -0.008em;
	border-radius: 4rem;
	background-color: var(--color-primary-lighter);
	transition: background-color 0.2s ease;
}

.gh-form.success {
	pointer-events: none;
}

.gh-form.error {
	box-shadow: 0 0 0 1px red;
}

.gh-form:hover {
	background-color: rgb(0 0 0 / 0.065);
}

.has-light-text .gh-form:hover,
.gh-footer.has-accent-color .gh-form:hover {
	background-color: var(--color-primary-lighter);
}

.gh-form-input {
	position: absolute;
	inset: 0;
	padding-inline: 2rem;
	width: 100%;
	height: 100%;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: 1.1;
	border: 0;
	background-color: transparent;
	outline: none;
	transition: 0.3s ease-in-out;
}

.gh-form-input::placeholder,
button.gh-form-input {
	color: var(--color-primary);
}

:is(.has-serif-title, .has-mono-title) .gh-form-input {
	padding-inline: 2rem;
}

.gh-form.gh-form.success .gh-form-input {
	opacity: 0.5;
}

.has-light-text .gh-form-input,
.gh-footer.has-accent-color .gh-form-input {
	color: #fff;
}

.has-light-text .gh-form-input::placeholder,
.has-light-text button.gh-form-input,
.gh-footer.has-accent-color .gh-form-input::placeholder {
	color: rgb(255 255 255 / 0.55);
}

.gh-header.is-classic.has-image .gh-form-input {
	color: #15171a;
}

.gh-header.is-classic.has-image .gh-form-input::placeholder,
.gh-header.is-classic.has-image button.gh-form-input,
.gh-header.is-classic.has-image .gh-form > svg {
	color: rgb(0 0 0 / 0.5);
}

button.gh-form-input {
	padding-inline-start: 4rem;
	text-align: left;
	color: var(--color-primary-lighter-text);
	cursor: pointer;
}

:is(.has-serif-title, .has-mono-title) button.gh-form-input {
	padding-inline-start: 4rem;
}

.gh-form .gh-button {
	position: absolute;
	right: 0.5rem;
	padding-inline: 3rem;
	height: 4rem;
	font-size: inherit;
}

.gh-form > svg {
	position: relative;
	left: 2rem;
	width: 2rem;
	height: 2rem;
	color: var(--color-primary-lighter-text);
}

/* :is(.has-serif-title, .has-mono-title) .gh-form > svg {
	left: 2rem;
} */

.gh-form .gh-button svg {
	display: none;
	position: absolute;
	margin-top: 1px;
}

.gh-form:is(.loading, .success) .gh-button span {
	visibility: hidden;
}

.gh-form.loading .gh-button svg:first-of-type {
	display: block;
}

.gh-form.success .gh-button svg:last-of-type {
	display: block;
}

@media (max-width: 576px) {
	.gh-form {
		font-size: 1.6rem;
	}

	.gh-form .gh-button {
		padding-inline: 1rem;
	}

	.gh-form .gh-button span span {
		display: none;
	}

	.gh-form .gh-button span svg {
		display: inline;
		position: static;
		margin-top: 2px;
		width: 2rem;
		height: 2rem;
	}
}

/* 5. Layout
/* ---------------------------------------------------------- */

.banner-link {
	display: flex;
	align-content: center;
	justify-content: center;
}

picture.banner-image img {
	width: auto;
}

.gh-viewport {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.gh-outer {
	padding: 0 max(4vmin, 2rem);
}

.gh-outer .gh-outer {
	padding: 0;
}

.gh-inner {
	margin: 0 auto;
	max-width: var(--container-width);
	width: 100%;
}

.gh-main {
	flex-grow: 1;
}

.gh-canvas,
.kg-width-full.kg-content-wide {
	display: grid;
	grid-template-columns:
		[full-start] var(--full)
		[wide-start] var(--wide)
		[main-start] var(--main) [main-end]
		var(--wide) [wide-end]
		var(--full) [full-end];
}

.gh-canvas > * {
	grid-column: main;
}

.kg-width-wide,
.kg-content-wide > div {
	grid-column: wide;
}

.kg-width-full {
	grid-column: full;
}

/* 6. Navigation
/* ---------------------------------------------------------- */
#main-menu-toggle {
	display: none;
}

/* Open Menu */
#main-menu-toggle ~ .navigation #icon-menu,
#main-menu-toggle:checked ~ .navigation #icon-close,
#main-menu-toggle:checked ~ .navigation .navigation-menu,
#main-menu-toggle:checked ~ .navigation .navigation-actions {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 2rem;
}

/* Hide scroll bar on mobile view*/
body:has(#main-menu-toggle:checked) {
	overflow: hidden;
}

/* Closed Menu */
#main-menu-toggle ~ .navigation #icon-close,
#main-menu-toggle:checked ~ .navigation #icon-menu,
.navigation .navigation-menu,
.navigation .navigation-actions {
	display: none;
}

/* Burger / Close on small screens */
.menu-toggle {
	display: block;
	cursor: pointer;
	width: 2rem;

	svg {
		width: 2rem;
		height: 2rem;
	}
}

#main-menu-toggle:checked ~ .navigation {
	background-color: var(--color-accent);
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow-y: auto;
	gap: var(--grid-gap);
}

.navigation-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navigation {
	z-index: 100;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr;
	padding: 2rem var(--container-gap);
	font-size: 1.3rem;
	font-weight: 600;
}

.navigation ul,
.navigation li {
	padding: 0;
	margin: 0;
}

.navigation ul {
	flex: 1;
	gap: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.navigation li {
	position: relative;
}

.navigation a {
	display: block;
	padding: 0.5rem;
	font-size: 1.4em;
}

.navigation .logo {
	width: 9rem;
	fill: currentColor;
}

/* .current {
	font-weight: 800;
} */

.navigation .social svg {
	width: 2rem;
	height: 2rem;
}

.navigation li:has(.dropdown) > a {
	display: none;
}

.navigation .dropdown.social {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.navigation .navigation-actions {
	align-items: flex-end;
}

/* Larger screen inline menu */
@media screen and (min-width: 767px) {
	.menu-toggle {
		display: none;
	}

	body:has(#main-menu-toggle:checked) {
		overflow: auto;
	}

	#main-menu-toggle:checked ~ .navigation .navigation-menu,
	#main-menu-toggle:checked ~ .navigation .navigation-actions,
	.navigation .navigation-menu,
	.navigation .navigation-actions {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	#main-menu-toggle:checked ~ .navigation,
	#main-menu-toggle ~ .navigation {
		position: relative;
		background-color: unset;
		inset: unset;

		margin: auto;
		width: 100%;
		max-width: var(--container-width);
		grid-template-rows: auto;
		grid-template-columns: 1fr auto 1fr;
		gap: var(--grid-gap);
		align-items: center;
		overflow: visible;
	}

	/* padding-inline: 0; */

	.navigation ul {
		gap: 2rem;
		flex-direction: row;
		justify-content: flex-start;
	}

	.navigation a {
		font-size: 1.5rem;
	}

	.navigation li:has(.dropdown) > a {
		display: block;
	}

	.navigation li:has(.dropdown):hover .dropdown,
	.navigation li:has(.dropdown):focus-visible .dropdown {
		display: flex;
		top: 3.5rem;
	}

	.navigation .dropdown {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		position: absolute;
		width: 20ch;
		background: var(--color-primary-darker);
		color: var(--color-secondary);
		padding: 1rem;
		border-radius: 0.5rem;
		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 7px 2rem -5px rgb(0 0 0 / 0.15);
	}

	.navigation nav {
		display: flex;
		gap: 2rem;
		align-items: center;
	}

	.navigation nav > ul > li {
		align-content: center;
		/* height: 4rem; */
	}

	.navigation .dropdown.social {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.navigation .nav-sign-up {
		flex: 0 1 100%;
	}

	.navigation .navigation-menu {
		grid-column: 1 / 2;
		grid-row: 1;
	}

	.navigation .navigation-brand {
		grid-column-start: 2;
	}

	.navigation .navigation-actions,
	.navigation .navigation-actions .menu {
		justify-content: flex-end;
	}
}
/* END MENUS */

/* 7. Card
/* ---------------------------------------------------------- */

.gh-card {
	position: relative;
}

.gh-card-link {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.gh-card-link:hover {
	opacity: 1;
}

.gh-card-image {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
}

.gh-card-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gh-card-wrapper {
	flex-grow: 1;
}

.gh-card-tag {
	display: none;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.gh-card-title {
	font-size: calc(1.9rem * var(--factor, 1));
	font-weight: 725;
	letter-spacing: -0.014em;
	line-height: 1.3;
}

.gh-card-link:hover .gh-card-title {
	opacity: 0.8;
}

.gh-card-excerpt {
	display: -webkit-box;
	overflow-y: hidden;
	margin-top: 1rem;
	font-size: 1.45rem;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.gh-card-meta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 1px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.004em;
	color: var(--color-primary-lighter-text);
}

.gh-card-meta svg {
	width: 2rem;
	height: 2rem;
	margin-right: 0.25rem;
	margin-top: 0.25rem;
}

.gh-card-meta:not(:empty) {
	margin-top: 1rem;
}

.gh-card-author + .gh-card-date::before {
	content: '—';
	margin-right: 0.5rem;
}

/* 8. Header
/* ---------------------------------------------------------- */

.gh-header {
	position: relative;
	margin-top: 2rem;
}

.gh-header-inner {
	position: relative;
	/* overflow: hidden; */
}

.gh-navigation-logo svg {
	width: 100%;
	max-width: 8rem;
	height: auto;
	fill: currentColor;
}

/* 8.1. Magazine layout */

.gh-header.is-magazine .gh-header-inner {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--grid-gap);
}

.gh-header.is-magazine .gh-header-inner > div {
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	grid-row: 1;
}

.gh-header.is-magazine .gh-header-left {
	grid-column: 1 / span 4;
}

.gh-header.is-magazine .gh-header-inner > .gh-card {
	position: relative;
	grid-column: 5 / span 8;
}

.gh-header.is-magazine .gh-header-right {
	grid-column: 13 / -1;
}

.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link {
	gap: 3rem;
}

.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-image {
	aspect-ratio: 1.618033;
}

.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-tag {
	display: block;
	margin-bottom: 1rem;
}

.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
	font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.022em;
}

.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
	margin-top: clamp(1rem, 0.45vw + 10.18px, 2rem);
	font-size: 1.8rem;
	letter-spacing: -0.02em;
	max-width: 90%;
}

.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) {
	margin-top: 2rem;
}

.gh-header.is-magazine :is(.gh-header-left, .gh-header-right) .gh-card:last-child .gh-card-image {
	display: none;
}

.gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt {
	display: none;
}

.gh-header.is-magazine .gh-header-inner > .gh-card::before,
.gh-header.is-magazine .gh-header-inner > .gh-card::after {
	position: absolute;
	top: 0;
	left: calc(var(--grid-gap) / -2);
	content: '';
	width: 1px;
	height: 100%;
	background-color: var(--color-secondary-darker);
}

.gh-header.is-magazine .gh-header-inner > .gh-card::after {
	right: calc(var(--grid-gap) / -2);
	left: auto;
}

.gh-header.is-magazine .gh-header-inner > div .gh-card + .gh-card::before {
	position: absolute;
	top: calc(var(--grid-gap) / -2);
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: var(--color-secondary-darker);
}

@media (max-width: 1199px) {
	.gh-header.is-magazine .gh-header-inner {
		grid-template-columns: repeat(12, 1fr);
	}

	.gh-header.is-magazine .gh-header-inner > .gh-card {
		grid-column: 1 / span 8;
	}

	.gh-header.is-magazine .gh-header-left {
		grid-column: 9 / -1;
	}

	.gh-header.is-magazine .gh-header-inner > div.gh-header-right {
		grid-column: 1 / -1;
		grid-row: 2;
		flex-direction: row;
	}

	.gh-header.is-magazine .gh-header-right .gh-card {
		flex: 1;
	}

	.gh-header.is-magazine .gh-header-right .gh-card:last-child .gh-card-image {
		display: block;
	}

	.gh-header.is-magazine .gh-header-right {
		position: relative;
	}

	.gh-header.is-magazine .gh-header-right::before {
		position: absolute;
		top: calc(var(--grid-gap) / -2);
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background-color: var(--color-secondary-darker);
	}

	.gh-header.is-magazine .gh-header-right .gh-card::before {
		display: none;
	}

	.gh-header.is-magazine .gh-header-right .gh-card::after {
		position: absolute;
		top: 0;
		right: calc(var(--grid-gap) / -2);
		content: '';
		width: 1px;
		height: 100%;
		background-color: var(--color-secondary-darker);
	}
}

@media (max-width: 991px) {
	.gh-header.is-magazine .gh-header-left .gh-card:nth-child(2) .gh-card-image {
		display: none;
	}
}

@media (max-width: 767px) {
	.gh-header.is-magazine .gh-header-inner {
		display: flex;
		flex-direction: column;
		gap: var(--grid-gap);
	}

	.gh-header.is-magazine .gh-header-inner > div.gh-header-right {
		flex-direction: column;
	}

	.gh-header.is-magazine .gh-card-image {
		display: block !important;
	}

	.gh-header.is-magazine .gh-card::before {
		display: block !important;
		position: absolute;
		top: calc(var(--grid-gap) / -2);
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background-color: var(--color-secondary-darker);
	}
}

/* 8.2. Highlight layout */

.gh-header.is-highlight .gh-header-inner {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--grid-gap);
}

.gh-header.is-highlight .gh-header-left {
	position: relative;
	grid-column: span 8;
}

.gh-header.is-highlight .gh-header-left .gh-card {
	grid-column: span 8;
	grid-row: span 3;
}

.gh-header.is-highlight .gh-header-left .gh-card .gh-card-link {
	gap: 3rem;
}

.gh-header.is-highlight .gh-header-left .gh-card .gh-card-image {
	aspect-ratio: 3 / 2;
}

.gh-header.is-highlight .gh-header-left .gh-card .gh-card-tag {
	display: block;
	margin-bottom: 1rem;
}

.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
	font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.022em;
}

.gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt {
	margin-top: clamp(1rem, 0.45vw + 10.18px, 2rem);
	font-size: 1.8rem;
}

.gh-header.is-highlight .gh-header-left .gh-card .gh-card-meta:not(:empty) {
	margin-top: 2rem;
}

.gh-header.is-highlight .gh-header-middle {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	grid-column: 9 / span 4;
}

.gh-header.is-highlight .gh-header-middle .gh-card:last-child .gh-card-image {
	display: none;
}

.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
	display: none;
}

.gh-header.is-highlight .gh-header-right {
	grid-column: 13 / -1;
}

.gh-header.is-highlight .gh-featured {
	margin-top: 0;
	padding: 0;
}

.gh-header.is-highlight .gh-featured-feed {
	display: flex;
	flex-direction: column;
}

.gh-header.is-highlight .gh-featured-feed .gh-card-title {
	font-size: clamp(1.4rem, 0.23vw + 1.31rem, 1.6rem);
}

.gh-header.is-highlight .gh-header-left::after,
.gh-header.is-highlight .gh-header-middle::after {
	position: absolute;
	top: 0;
	right: calc(var(--grid-gap) / -2);
	content: '';
	width: 1px;
	height: 100%;
	background-color: var(--color-secondary-darker);
}

.gh-header.is-highlight .gh-card::before {
	position: absolute;
	top: calc(var(--grid-gap) / -2);
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: var(--color-secondary-darker);
}

.gh-header.is-highlight .gh-featured .gh-card:first-child::before {
	display: none;
}

@media (max-width: 1199px) {
	.gh-header.is-highlight .gh-header-inner {
		grid-template-columns: repeat(9, 1fr);
	}

	.gh-header.is-highlight .gh-header-left {
		grid-column: span 6;
	}

	.gh-header.is-highlight .gh-header-middle {
		grid-column: 7 / -1;
	}

	.gh-header.is-highlight .gh-header-right {
		grid-column: 1 / -1;
	}

	.gh-header.is-highlight .gh-featured-feed {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.gh-header.is-highlight .gh-featured-feed .gh-card:before {
		width: calc(100% + var(--grid-gap));
	}

	.gh-header.is-highlight .gh-featured-feed .gh-card::after {
		position: absolute;
		top: 0;
		left: calc(var(--grid-gap) / -2);
		content: '';
		width: 1px;
		height: 100%;
		background-color: var(--color-secondary-darker);
	}
}

@media (max-width: 991px) {
	.gh-header.is-highlight .gh-header-middle .gh-card:nth-child(2) .gh-card-image {
		display: none;
	}
}

@media (max-width: 767px) {
	.gh-header.is-highlight .gh-header-inner {
		display: flex;
		flex-direction: column;
	}

	.gh-header.is-highlight .gh-featured-feed {
		display: flex;
		/* gap: var(--grid-gap); */
	}

	.gh-header.is-highlight .gh-card-image {
		display: block !important;
	}

	.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
		display: -webkit-box;
	}
}

/* 8.3. Classic layout */

.gh-header.is-classic {
	display: flex;
	margin-top: 0;
	padding-block: 16rem;
}

.gh-header.is-classic .gh-header-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5rem;
	margin: auto;
	max-width: 102rem;
	text-align: center;
}

.gh-header.is-classic .gh-header-title {
	font-size: calc(clamp(3rem, 1.82vw + 2.27rem, 4.6rem) * var(--factor, 1));
	line-height: 1.1;
	letter-spacing: -0.028em;
}

.gh-header.is-classic.has-image {
	margin-top: 0;
}

.gh-header.is-classic.has-image::before {
	position: absolute;
	inset: 0;
	content: '';
	opacity: 0.3;
	background-color: var(--color-primary);
	transition: opacity 1.5s ease;
}

.gh-header.is-classic.has-image .gh-header-inner {
	color: var(--color-secondary);
}

.gh-header.is-classic.has-image .gh-header-image {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gh-header.is-classic.has-image .gh-form {
	background-color: var(--color-secondary);
}

/* 9. CTA
/* ---------------------------------------------------------- */

.gh-cta {
	display: none;
	margin-top: max(4vw, 4rem);
}

.gh-header:is(.is-highlight, .is-magazine) + .gh-cta {
	display: block;
}

.gh-cta-inner {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
	padding: clamp(5rem, 3.64vw + 33.45px, 8rem) clamp(4rem, 2.73vw + 29.09px, 6rem);
	text-align: center;
	background-color: var(--color-primary-lighter);
}

.gh-cta-content {
	max-width: 60rem;
}

.gh-cta-title {
	font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.021em;
}

.gh-cta-description {
	margin-top: 1rem;
	font-size: 1.8rem;
	line-height: 1.4;
	letter-spacing: -0.015em;
}

/* 10. Featured posts
/* ---------------------------------------------------------- */

.gh-featured {
	margin-top: 10rem;
}

.gh-navigation + .gh-featured {
	margin-top: 60rem;
}

.gh-header.is-classic:not(.has-image) + .gh-featured {
	margin-top: 0;
}

.gh-featured-inner {
	overflow: hidden;
}

.gh-featured-title {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-primary-darker);
}

.gh-featured-feed {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);
}

.gh-featured-feed .gh-card {
	container-type: inline-size;
	container-name: featured-card;
}

.gh-featured-feed .gh-card-link {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
}

.gh-featured-feed .gh-card-image {
	width: 7rem;
	aspect-ratio: 1;
}

@container featured-card (width < 24rem) {
	.gh-featured-feed .gh-card-image {
		display: none;
	}
}

@container featured-card (24rem <= width <= 270px) {
	.gh-featured-feed .gh-card-image {
		width: 6rem;
	}
}

.gh-featured-feed .gh-card-wrapper {
	container-type: inline-size;
	container-name: featured-card-wrapper;
}

.gh-featured-feed .gh-card-title {
	font-size: 1.6rem;
	font-weight: 650;
	letter-spacing: -0.011em;
}

@container featured-card-wrapper (width < 170px) {
	.gh-featured-feed .gh-card-title {
		font-size: 1.6rem;
	}
}

.gh-featured-feed .gh-card-excerpt {
	display: none;
}

.gh-featured-feed .gh-card-meta:not(:empty) {
	margin-top: 1rem;
}

.gh-featured-feed .gh-card::before {
	position: absolute;
	top: 0;
	left: calc(var(--grid-gap) / -2);
	content: '';
	width: 1px;
	height: 100%;
	background-color: var(--color-secondary-darker);
}

@media (max-width: 1199px) {
	.gh-viewport > .gh-featured .gh-featured-feed {
		grid-template-columns: repeat(3, 1fr);
	}

	.gh-viewport > .gh-featured .gh-featured-feed .gh-card:nth-child(4) {
		display: none;
	}
}

@media (max-width: 767px) {
	.gh-viewport > .gh-featured .gh-featured-feed {
		display: flex;
		flex-direction: column;
	}
}

/* 11. Container
/* ---------------------------------------------------------- */

.gh-container {
	flex-grow: 1;
	margin-top: 6rem;
}

.gh-container-inner {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	column-gap: var(--grid-gap);
}

:is(.gh-featured, .gh-cta) + .gh-container {
	margin-top: max(4vw, 4rem);
}

.gh-header.is-classic:not(.has-image) + .gh-container {
	margin-top: 0;
}

.gh-navigation + .gh-container .gh-container-title,
:is(.paged, .tag-template, .author-template) .gh-container:not(.has-sidebar) .gh-container-title {
	display: none;
}

.gh-more {
	display: none;
	grid-column: 1 / -1;
	margin-top: 5rem;
	font-size: calc(1.9rem * var(--factor, 1));
	font-weight: 725;
	letter-spacing: -0.014em;
}

.gh-container.has-sidebar .gh-more {
	grid-column: span 12;
}

.home-template .gh-more {
	display: block;
}

.gh-more a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gh-more svg {
	margin-top: -1px;
	width: 2rem;
	height: 2rem;
}

.has-serif-title .gh-more svg {
	margin-top: 0;
}

/* 11.1. With sidebar */

.gh-container.has-sidebar .gh-main {
	grid-column: 1 / span 12;
	position: relative;
}

.gh-container.has-sidebar .gh-sidebar {
	grid-column: 13 / -1;
}

.gh-container.has-sidebar .gh-main::after {
	position: absolute;
	top: 0;
	right: calc(var(--grid-gap) / -2);
	content: '';
	width: 1px;
	height: 100%;
	background-color: var(--color-secondary-darker);
}

/* 11.2. Without sidebar */

.gh-container:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
	grid-column: 3 / span 12;
}

.gh-container.is-list.no-image:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
	grid-column: 4 / span 10;
}

.gh-header:is(.is-highlight, .is-magazine) ~ .gh-container.is-grid:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
	grid-column: 1 / -1;
}

@media (max-width: 1199px) {
	.gh-container-inner {
		display: block;
		overflow: hidden;
	}

	.gh-container.has-sidebar .gh-sidebar {
		display: none;
	}
}

/* 12. Post list
/* ---------------------------------------------------------- */

.gh-container-title {
	grid-column: 1 / -1;
	margin-bottom: calc(var(--grid-gap) / 2);
	padding-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-secondary-lighter);
}

.gh-container:not(:has(.gh-card)) .gh-container-title {
	display: none;
}

.gh-container .gh-feed {
	gap: var(--grid-gap);
}

.gh-container .gh-card-meta:not(:empty) {
	margin-top: 2rem;
}

/* 12.1. List style */

.gh-container.is-list .gh-feed {
	display: flex;
	flex-direction: column;
	container-type: inline-size;
	container-name: list-feed;
}

.gh-container.is-list .gh-card-link {
	flex-direction: row;
	align-items: center;
	gap: 2rem;
}

.gh-container.is-list .no-image .gh-card-link {
	padding-block: 2rem;
}

.gh-container.is-list .gh-card-image {
	flex-shrink: 0;
	width: 22rem;
	aspect-ratio: 1.618033;
}

@container list-feed (width < 600px) {
	.gh-container.is-list .gh-card-image {
		width: 16rem;
	}
}

.gh-container.is-list .gh-card:not(.no-image) .gh-card-wrapper {
	max-width: 60rem;
}

.gh-container.is-list .gh-card-title {
	--factor: 1.05;
}

.gh-container.is-list .no-image .gh-card-title {
	--factor: 1.2;
}

.gh-container.is-list .gh-card-excerpt {
	margin-top: 0.5rem;
}

.gh-container.is-list .gh-card + .gh-card::before {
	position: absolute;
	top: calc(var(--grid-gap) / -2);
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: var(--color-secondary-darker);
}

.home-template .gh-container.is-list .gh-card:first-child:before {
	display: none;
}

@media (max-width: 767px) {
	.gh-container.is-list .gh-card-link {
		flex-direction: column;
		align-items: flex-start;
	}

	.gh-container.is-list .gh-card-image {
		width: 100%;
	}
}

/* 12.2. Grid style */

.gh-container.is-grid .gh-feed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	row-gap: calc(var(--grid-gap) * 1.5);
	overflow: hidden;
}

.gh-container.is-grid .gh-card::before {
	position: absolute;
	top: calc(var(--grid-gap) / -2);
	right: calc(var(--grid-gap) / -2);
	left: calc(var(--grid-gap) / -2);
	content: '';
	height: 1px;
	background-color: var(--color-secondary-darker);
}

.gh-container.is-grid .gh-card::after {
	position: absolute;
	top: 0;
	left: calc(var(--grid-gap) / -2);
	content: '';
	width: 1px;
	height: 100%;
	background-color: var(--color-secondary-darker);
}

@media (max-width: 767px) {
	.gh-container.is-grid .gh-feed {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.gh-container.is-grid .gh-feed {
		display: flex;
		flex-direction: column;
	}
}

/* 12.3. No image list */

.gh-container.is-list.no-image .gh-card-image {
	display: none;
}

/* 13. Sidebar
/* ---------------------------------------------------------- */
.gh-toc:has(ol) {
	background: color-mix(in srgb, var(--color-primary), transparent 10%);
	color: var(--color-secondary);
	padding: 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 7px 2rem -5px rgb(0 0 0 / 0.15);
	z-index: 99;
}

.gh-toc > .toc-list {
	position: relative;
	padding: 1.5rem;
}

.gh-toc .toc-list {
	overflow: hidden;
	list-style: none;
	line-height: 1.2;
	font-size: 1.5rem;
}

.gh-toc .toc-list a {
	font-weight: 400;
}

.gh-toc > :before {
	content: '目錄';
	display: block;
	font-weight: 500;
	margin-bottom: 1rem;
}

/* @media (min-width: 1300px) {
	.gh-sidebar {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-top: 4vmin;
		grid-column: wide-start / main-start;
	}

	.gh-toc {
		width: 26ch;
		position: sticky;
		top: 4vmin;
	}
} */

.gh-toc .is-active-link::before {
	background-color: var(--ghost-accent-color); /* Defines TOC   accent color based on Accent color set in Ghost Admin */
}

.gh-sidebar-inner {
	position: sticky;
	top: calc(var(--grid-gap) / 2);
}

.gh-sidebar-title {
	grid-column: 1 / -1;
	margin-bottom: calc(var(--grid-gap) / 2);
	padding-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-secondary-darker);
}

.gh-about {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5rem 2rem;
	min-height: 380px;
	text-align: center;
	background-color: var(--color-primary-lighter);
}

.gh-about-icon {
	margin-bottom: 2rem;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.gh-about-title {
	font-size: calc(2.4rem * var(--factor, 1));
	font-weight: 700;
	letter-spacing: -0.019em;
}

.gh-about-description {
	margin-top: 1rem;
	font-size: 1.45rem;
	line-height: 1.4;
}

.gh-about .gh-button {
	margin-top: 3rem;
}

.gh-recommendations {
	margin-top: 5rem;
}

.gh-recommendations .recommendations {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 0;
}

.gh-recommendations .recommendation:first-child {
	margin-top: 4px;
}

.gh-recommendations .recommendation a {
	display: grid;
	grid-template-columns: 2rem auto;
	gap: 4px 1rem;
}

.gh-recommendations .recommendation a:hover {
	opacity: 1;
}

.gh-recommendations .recommendation-favicon {
	grid-row: span 2;
	width: 100%;
	border-radius: 4px;
}

.gh-recommendations .recommendation-title {
	margin-top: -2px;
	font-size: 1.5rem;
	font-weight: 650;
	letter-spacing: -0.009em;
}

.gh-recommendations .recommendation a:hover .recommendation-title {
	opacity: 0.8;
}

.gh-recommendations .recommendation-url {
	order: 1;
	overflow: hidden;
	font-size: 1.4rem;
	line-height: 1.25;
	color: var(--color-primary-lighter-text);
	text-overflow: ellipsis;
}

.gh-recommendations .recommendation-description {
	display: -webkit-box;
	display: none;
	overflow-y: hidden;
	grid-column: 2;
	font-size: 1.4rem;
	line-height: 1.4;
	color: var(--color-primary-lighter-text);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.gh-recommendations button {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 2rem;
	padding: 0;
	cursor: pointer;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	background-color: transparent;
	border: 0;
}

.gh-recommendations button svg {
	margin-top: -1px;
	width: 1rem;
}

.gh-recommendations button:hover {
	opacity: 0.8;
}

/* 14. Post/page
/* ---------------------------------------------------------- */

/* 14.1. Article */

.gh-article {
	--container-width: 112rem;

	word-break: break-word;
}

.gh-article-header {
	/* margin: clamp(4rem, 3.64vw + 25.45px, 7rem) 0 4rem; */
	/* margin: clamp(4rem, 3.64vw + 25.45px, 7rem) 0 4rem; */

	margin: 2rem auto;
}

.gh-article-tag {
	margin-bottom: 1rem;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	/* color: var(--color-accent); */
}

.gh-article-title {
	font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
	line-height: 1.1;
	letter-spacing: -0.022em;
}

.gh-article-excerpt {
	margin-top: clamp(1rem, 0.45vw + 10.18px, 2rem);
	max-width: 72rem;
	font-size: clamp(1.5rem, 0.45vw + 1.32rem, 1.9rem);
	line-height: 1.4;
	letter-spacing: -0.018em;
}

.gh-article-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	margin-left: 0.5rem;
}

.gh-article-author-image {
	display: flex;
	margin-right: 1rem;
}

.gh-article-author-image a {
	position: relative;
	margin: 0 -1rem;
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	background-color: var(--color-secondary-lighter);
	border-radius: 50%;
}

.gh-article-author-image a:first-child {
	z-index: 10;
}

.gh-article-author-image a:nth-child(2) {
	z-index: 9;
}

.gh-article-author-image a:nth-child(3) {
	z-index: 8;
}

.gh-article-author-image :is(img, svg) {
	position: absolute;
	inset: 0;
	object-fit: cover;
}

.gh-article-meta-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gh-article-author-name {
	font-size: 1.6rem;
	font-weight: 650;
	letter-spacing: -0.013em;
}

.gh-article-meta-content {
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.006em;
	color: var(--color-secondary);
}

.gh-article-image {
	display: none;
	/* grid-column: wide;
	margin-top: 4rem; */
}

.gh-article-image img {
	width: 100%;
}

/* 14.2. Page template */

.page-template .gh-article-header {
	margin-block: 7rem 3rem;
}

/* 14.3. Page without header */

.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
	margin-top: 6rem;
}

.page-template .gh-content > *:last-child:not(.kg-width-full) {
	margin-bottom: 6vw;
}

.page-template .gh-footer {
	margin-top: 0;
}

/* 15. Content
/* ---------------------------------------------------------- */

/* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */

.gh-content {
	position: relative;
	font-size: var(--content-font-size, 1.7rem);
	letter-spacing: -0.01em;
}

/* Default vertical spacing */
.gh-content > * + * {
	margin-top: calc(3rem * var(--content-spacing-factor, 1));
	margin-bottom: 0;
}

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

/* Remove space between full-width cards */
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
	margin-top: 0;
}

/* Add back a top margin to all headings,
unless a heading is the very first element in the post content */
.gh-content > [id]:not(:first-child) {
	margin-top: calc(4rem * var(--content-spacing-factor, 1));
}

/* Add drop cap setting */
.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
	margin: 0 0.2em 0em 0;
	font-size: 3.1em;
	float: left;
	line-height: 1;
	margin-left: -1px;
	font-weight: 700;
}

/* Add a small margin between a heading and paragraph after it */
.gh-content > [id] + p {
	margin-top: calc(1rem * var(--content-spacing-factor, 1));
}

/* A larger margin before/after dividers, blockquotes and embeds */
.gh-content > :is(hr, blockquote, iframe) {
	position: relative;
	margin-top: calc(5rem * var(--content-spacing-factor, 1)) !important;
}

.gh-content > :is(hr, blockquote, iframe) + * {
	margin-top: calc(5rem * var(--content-spacing-factor, 1)) !important;
}

/* Now the content typography styles */
.gh-content h1 {
	font-size: calc(2.2em * var(--factor, 1));
	letter-spacing: -0.02em;
}

.gh-content h2 {
	font-size: calc(1.6em * var(--factor, 1));
	letter-spacing: -0.02em;
}

.gh-content h3 {
	font-size: calc(1.3em * var(--factor, 1));
	letter-spacing: -0.017em;
}

.gh-content a {
	font-weight: 500;
	/* color: var(--color-accent); */
	/* text-decoration: underline; */
}

.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) {
	font-size: 0.95em;
}

.gh-content :is(ul, ol) {
	padding-left: 3rem;
}

.gh-content :is(li + li, li :is(ul, ol)) {
	margin-top: 1rem;
}

.gh-content ol ol li {
	list-style-type: lower-alpha;
}

.gh-content ol ol ol li {
	list-style-type: lower-roman;
}

.gh-content hr {
	width: 100%;
	height: 1px;
	background-color: var(--color-secondary-lighter);
	border: 0;
}

.gh-content .gh-table {
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}

.gh-content .gh-table table {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 1.5rem;
	white-space: nowrap;
	vertical-align: top;
	border-spacing: 0;
	border-collapse: collapse;
}

.gh-content .gh-table table th {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-darkgrey);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.2px;
}

.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td {
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--color-secondary-darker);
}

.gh-content .gh-table table :is(th, td):first-child {
	padding-left: 0;
}

.gh-content .gh-table table :is(th, td):last-child {
	padding-right: 0;
}

.gh-content pre {
	overflow: auto;
	padding: 2rem;
	font-size: 1.5rem;
	line-height: 1.5em;
	background: var(--color-primary-lighter);
	border-radius: 0.5rem;
	font-family: var(--font-mono);
}

.gh-content :not(pre) > code {
	vertical-align: baseline;
	padding: 0.15em 0.4em;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 1em;
	background: var(--color-primary-lighter);
	border-radius: 0.25em;
	font-family: var(--font-mono);
}

/* 16. Cards
/* ---------------------------------------------------------- */

/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */

.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
	margin-top: calc(5rem * var(--content-spacing-factor, 1));
}

.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
	margin-top: calc(5rem * var(--content-spacing-factor, 1));
}

.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
	margin-top: calc(68px * var(--content-spacing-factor, 1));
}

.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
	margin-top: calc(68px * var(--content-spacing-factor, 1));
}

/* Image */

.kg-image {
	margin-right: auto;
	margin-left: auto;
}

/* Embed */

.kg-embed-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Gallery */

.kg-image[width][height],
.kg-gallery-image {
	cursor: pointer;
}

.kg-image-card a:hover,
.kg-gallery-image a:hover {
	opacity: 1 !important;
}

/* Toggle */

.kg-card.kg-toggle-card .kg-toggle-heading-text {
	font-size: 2rem;
	font-weight: 700;
}

.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
	font-family: var(--font-serif);
}

.has-mono-title .kg-toggle-card .kg-toggle-heading-text {
	font-family: var(--font-mono);
}

/* Callout */

.kg-callout-card.kg-card {
	border-radius: 0.25em;
}

.kg-callout-card-accent a {
	text-decoration: underline;
}

/* Blockquote */

blockquote:not([class]) {
	padding-left: 2rem;
	border-left: 4px solid var(--color-accent);
}

blockquote.kg-blockquote-alt {
	font-style: normal;
	font-weight: 400;
	color: var(--color-primary-lighter-text);
}

/* Button */

.kg-card.kg-button-card .kg-btn {
	font-size: 1em;
}

/* Header */

.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header {
	font-family: var(--font-serif);
}

.has-mono-title .kg-card.kg-header-card h2.kg-header-card-header {
	font-family: var(--font-mono);
}

.has-serif-body .kg-header-card h3.kg-header-card-subheader {
	font-family: var(--font-serif);
}

/* Bookmark */

.kg-bookmark-card .kg-bookmark-container {
	border-radius: 0.25em !important;
}

.kg-bookmark-card .kg-bookmark-container:hover {
	opacity: 1;
}

.kg-bookmark-card .kg-bookmark-content {
	padding: 1.15em;
}

.kg-bookmark-card .kg-bookmark-title {
	font-size: 0.9em;
}

.kg-bookmark-card .kg-bookmark-description {
	max-height: none;
	margin-top: 0.3em;
	font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-metadata {
	font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-thumbnail img {
	border-radius: 0 0.2em 0.2em 0;
}

/* Product */

.kg-product-card.kg-card .kg-product-card-image {
	margin-bottom: 1rem;
}

.kg-product-card.kg-card a.kg-product-card-button {
	height: 2.8em;
	margin-top: 1rem;
}

.has-serif-title .kg-product-card.kg-card .kg-product-card-title {
	font-family: var(--font-serif);
}

.has-mono-title .kg-product-card.kg-card .kg-product-card-title {
	font-family: var(--font-mono);
}

.has-serif-body .kg-product-card-description :is(p, ul, ol) {
	font-family: var(--font-serif-alt);
}

/* File */

.kg-file-card.kg-card .kg-file-card-container {
	padding: 0.6em;
}

.kg-file-card.kg-card .kg-file-card-contents {
	margin: 4px 1rem 0.5rem;
}

.kg-file-card.kg-card .kg-file-card-metadata {
	font-size: 0.9em;
}

.kg-file-card.kg-card .kg-file-card-filesize::before {
	margin-right: 0.5rem;
	margin-left: 0.5rem;
}

/* Caption */

figcaption {
	margin-top: 1rem;
	font-size: 1.4rem;
	/* text-align: center; */
}

.kg-card.kg-width-full figcaption {
	padding: 0 2rem;
}

/* figcaption a {
	color: var(--color-accent);
	text-decoration: underline;
} */

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

.gh-comments {
	margin-top: 5rem;
}

/* 18. Recent posts
/* ---------------------------------------------------------- */

.post-template .gh-container {
	margin-top: 12rem;
}

.post-template .gh-container-inner {
	display: block;
}

.post-template .gh-container.is-grid .gh-feed {
	grid-template-columns: repeat(4, 1fr);
}

.post-template .gh-container .gh-container-title {
	display: block;
}

/* 19. Archive
/* ---------------------------------------------------------- */

.gh-archive {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--grid-gap);
	margin-block: 6rem 2rem;
}

.gh-archive.has-image {
	margin-top: 5rem;
}

.gh-archive-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap);
	grid-column: 1 / -1;
	padding-bottom: clamp(4rem, 2.73vw + 29.09px, 6rem);
	border-bottom: 1px solid var(--color-secondary-darker);
}

.gh-archive.has-image .gh-archive-inner {
	align-items: center;
	grid-column: 1 / -1;
}

.gh-archive:not(.has-sidebar):not(.has-image) .gh-archive-inner {
	grid-column: 3 / span 12;
}

.gh-archive .gh-article-image {
	grid-column: auto;
	margin-top: 0;
}

:is(.tag-template, .author-template) .gh-container {
	margin-top: 0;
}

.author-template .gh-archive-inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2rem;
}

.author-template .gh-article-image {
	margin-top: 0;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
}

.author-template .gh-article-title {
	font-size: 3.6rem;
}

.gh-author-meta {
	display: flex;
	gap: 10px;
	margin-top: 2rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--color-primary-lighter-text);
}

.gh-author-meta a {
	color: inherit;
}

.gh-author-social {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-left: 3px;
}

.gh-author-social svg {
	width: 2rem;
	height: 2rem;
}

@media (max-width: 1199px) {
	.gh-archive {
		display: block;
	}
}

@media (max-width: 767px) {
	.gh-archive-inner {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.author-template .gh-archive-inner {
		flex-direction: column-reverse;
	}
}

/* 21. Footer
/* ---------------------------------------------------------- */

.gh-footer {
	padding: var(--container-gap);
	margin-top: 12vw;
	font-size: 1.4rem;
	background-color: var(--color-primary);
	color: var(--color-secondary-lighter);
}
/* .gh-footer.has-accent-color .gh-button {
	background-color: #fff;
	color: #15171a;
} */

/* 21.2. Footer bar */

.gh-footer-bar {
	margin: auto;
	max-width: var(--container-width);
	/* margin-bottom: 100px;
	padding-block: 3rem; */
}

.gh-footer-menu {
	width: 100%;
}

@media screen and (min-width: 767px) {
	.gh-footer-menu {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 1%;
		flex-wrap: wrap;
		margin-block: 2rem;
	}

	.gh-footer-menu details {
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		flex: 1 1 19%;
	}

	.gh-footer-menu summary {
		display: none;
	}
}

.gh-footer-menu li {
	padding: 0.5rem 0;
}

.gh-footer-copyright {
	margin: auto;
	margin-top: 2rem;
	max-width: var(--container-width);
	text-align: center;
	white-space: nowrap;
	font-size: 1.2rem;
}

.gh-footer-copyright a {
	text-decoration: underline;
}

/* 21.3. Footer signup */

.gh-footer-signup {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 160px;
	text-align: center;
}

.gh-footer-signup-header {
	font-size: calc(clamp(2.8rem, 1.36vw + 2.25rem, 4rem) * var(--factor, 1));
	font-weight: 700;
	letter-spacing: -0.03em;
}

.gh-footer-signup-subhead {
	margin-top: 1rem;
	max-width: 64rem;
	font-size: 1.8rem;
	font-weight: 450;
	line-height: 1.4;
	letter-spacing: -0.014em;
	opacity: 0.75;
}

.gh-footer-signup .gh-form {
	margin-top: 4rem;
}

@media (max-width: 991px) {
	.gh-footer-bar {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
}

/* 22. Lightbox
/* ---------------------------------------------------------- */

.pswp {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-ms-touch-action: none;
	touch-action: none;
	outline: none;
	backface-visibility: hidden;
	-webkit-text-size-adjust: 100%;
}

.pswp img {
	max-width: none;
}

.pswp--animate_opacity {
	opacity: 0.001;
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	will-change: opacity;
}

.pswp--open {
	display: block;
}

.pswp--zoom-allowed .pswp__img {
	cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
	cursor: grab;
}

.pswp--dragging .pswp__img {
	cursor: grabbing;
}

.pswp__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: opacity;
}

.pswp__scroll-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	touch-action: none;
	backface-visibility: hidden;
}

.pswp__container,
.pswp__img {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

.pswp__zoom-wrap {
	position: absolute;
	width: 100%;
	transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
	transform-origin: left top;
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
	transition: none;
}

.pswp__item {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.pswp__img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
}

.pswp__img--placeholder {
	backface-visibility: hidden;
}

.pswp__img--placeholder--blank {
	background: var(--color-primary);
}

.pswp--ie .pswp__img {
	top: 0;
	left: 0;
	width: 100% !important;
	height: auto !important;
}

.pswp__error-msg {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -1rem;
	font-size: 2rem;
	line-height: 2rem;
	color: var(--color-primary);
	text-align: center;
}

.pswp__error-msg a {
	color: var(--color-primary);
	text-decoration: underline;
}

.pswp__button {
	position: relative;
	display: block;
	float: right;
	width: 4rem;
	height: 4rem;
	padding: 0;
	margin: 0;
	overflow: visible;
	appearance: none;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	transition: opacity 0.2s;
}

.pswp__button:focus,
.pswp__button:hover {
	opacity: 1;
}

.pswp__button:active {
	outline: none;
	opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.pswp__ui--over-close .pswp__button--close {
	opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	width: 4rem;
	height: 4rem;
	background: url('../images/default-skin.png') 0 0 no-repeat;
	background-size: 26rem 88px;
}

@media (-webkit-min-device-pixel-ratio: 1.1),
	(-webkit-min-device-pixel-ratio: 1.09375),
	(min-resolution: 105dpi),
	(min-resolution: 1.1dppx) {
	.pswp--svg .pswp__button,
	.pswp--svg .pswp__button--arrow--left::before,
	.pswp--svg .pswp__button--arrow--right::before {
		background-image: url('../images/default-skin.svg');
	}

	.pswp--svg .pswp__button--arrow--left,
	.pswp--svg .pswp__button--arrow--right {
		background: none;
	}
}

.pswp__button--close {
	background-position: 0 -4rem;
}

.pswp__button--share {
	background-position: -4rem -4rem;
}

.pswp__button--fs {
	display: none;
}

.pswp--supports-fs .pswp__button--fs {
	display: block;
}

.pswp--fs .pswp__button--fs {
	background-position: -4rem 0;
}

.pswp__button--zoom {
	display: none;
	background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
	display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
	background-position: -13rem 0;
}

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
	visibility: hidden;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
	position: absolute;
	top: 50%;
	width: 70px;
	height: 100px;
	margin-top: -4rem;
	background: none;
}

.pswp__button--arrow--left {
	left: 0;
}

.pswp__button--arrow--right {
	right: 0;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	position: absolute;
	top: 35px;
	width: 3rem;
	height: 30px;
	content: '';
}

.pswp__button--arrow--left::before {
	left: 0.5rem;
	background-position: -138px -4rem;
}

.pswp__button--arrow--right::before {
	right: 0.5rem;
	background-position: -94px -4rem;
}

.pswp__counter {
	position: absolute;
	top: 0;
	left: 0;
	height: 4rem;
	padding: 0 15px;
	font-size: 11px;
	font-weight: 700;
	line-height: 4rem;
	color: var(--color-primary);
	user-select: none;
}

.pswp__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 4rem;
}

.pswp__caption__center {
	max-width: 42rem;
	padding: 25px 15px 30px;
	margin: 0 auto;
	font-size: 11px;
	line-height: 1.6;
	color: var(--color-primary);
	text-align: center;
}

.pswp__caption__center .post-caption-title {
	margin-bottom: 7px;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
}

.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
	padding: 0 4px;
	content: '\02022';
}

.pswp__caption--empty {
	display: none;
}

.pswp__caption--fake {
	visibility: hidden;
}

.pswp__preloader {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4rem;
	height: 4rem;
	margin-left: -22px;
	opacity: 0;
	transition: opacity 0.25s ease-out;
	direction: ltr;
	will-change: opacity;
}

.pswp__preloader__icn {
	width: 2rem;
	height: 2rem;
	margin: 1rem;
}

.pswp__preloader--active {
	opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
	background: url('../images/preloader.gif') 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
	opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
	animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
	animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 2rem;
	height: 2rem;
	margin: 0;
	background: none;
	opacity: 0.75;
}

.pswp--css_animation .pswp__preloader__cut {
	position: relative;
	width: 7px;
	height: 2rem;
	overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 2rem;
	height: 2rem;
	margin: 0;
	background: none;
	border: 2px solid var(--color-primary);
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
}

@media screen and (max-width: 102rem) {
	.pswp__preloader {
		position: relative;
		top: auto;
		left: auto;
		float: right;
		margin: 0;
	}
}

@keyframes clockwise {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes donut-rotate {
	0% {
		transform: rotate(0);
	}

	50% {
		transform: rotate(-140deg);
	}

	100% {
		transform: rotate(0);
	}
}

.pswp__ui {
	z-index: 1550;
	visibility: visible;
	opacity: 1;
	-webkit-font-smoothing: auto;
}

.pswp__top-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4rem;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
	backface-visibility: hidden;
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	will-change: opacity;
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
	visibility: visible;
}

.pswp__ui--idle .pswp__top-bar {
	opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
	opacity: 0;
}

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
	opacity: 0.001;
}

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
	display: none;
}

.pswp__element--disabled {
	display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
	background: none;
}

/* TOC Bot */
.toc {
	overflow-y: auto;
}
.toc > .toc-list {
	overflow: hidden;
	position: relative;
}
.toc > .toc-list li {
	list-style: none;
}
.toc-list {
	margin: 0;
	padding-left: 10px;
}
a.toc-link {
	color: currentColor;
	height: 100%;
}
.is-collapsible {
	max-height: 1000px;
	overflow: hidden;
	transition: all 300ms ease-in-out;
}
.is-collapsed {
	max-height: 0;
}
.is-position-fixed {
	position: fixed !important;
	top: 0;
}
.is-active-link {
	font-weight: 700;
}

.toc-list-item::before {
	display: inline-block;
	content: '→';
	margin-right: 1rem;
	/* left: 0;
	margin-top: -1px;
	position: absolute; */
}

.is-active-link::before {
	background-color: var(--color-accent);
}

/* .toc-link::before {
	background-color: var(--color-primary);
	content: ' ';
	display: inline-block;
	height: inherit;
	left: 0;
	margin-top: -1px;
	position: absolute;
	width: 2px;
}
.is-active-link::before {
	background-color: var(--color-accent);
} */