/* nav */
nav > div {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* width: 168px; */
	width: calc(calc(100% - 48px * 6) / 5);
}

.home a {
	font-family: var(--serif);
	font-style: italic;
	color: var(--text-secondary);
	font-size: var(--fs-md);
	line-height: var(--lh-sm);
	transition: color 0.15s ease;
	text-decoration: none;
}

.home a::after {
	content: ' ✿';
	font-style: normal;
	color: var(--heading-1);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.home a:hover {
	color: var(--text-primary);
}

.home a:hover::after{
	opacity: 1;
}

.toc ul{
	list-style-type: none;
	
}

.toc a {
	display: block;
	padding-bottom: 4px;
	line-height: var(--lh-md);
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.toc a:hover {
	color: var(--text-primary);
}

.toc ul > li a{
	font-size: var(--fs-xs);
	font-weight: var(--fw-md);
	text-transform: uppercase;
}

.toc li > ul {
	padding-bottom: 8px;
	padding-left: 4px;
}

.toc li > ul li a{
	font-size: var(--fs-sm);
	font-weight: var(--fw-rg);
	text-transform: initial;
}

/* page header */
header {
	margin-bottom: calc(var(--space-base) * 10);
}

h1, h2, h3, h4 {
	font-weight: var(--fw-md);
}

h1 {
	font-family: var(--sans-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-md);
	color: var(--h1-color);
	margin-bottom: 8px;
}

h2 {
  font-size: var(--fs-xs);
  color: var(--heading-1);
  font-weight: var(--fw-md);
  letter-spacing: 8%;
  text-transform: uppercase;
  margin-bottom: 4px;
}

h3 {
	font-size: var(--fs-md);
	margin-bottom: 4px;
}

h4 {
  font-size: var(--fs-sm);
  color: var(--heading-3);
  margin-bottom: 4px;
}

/* paragraph */
p {
	margin-bottom: 24px;
}

p.subtext {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

/* blockquote */
blockquote {
  border-left: 2px solid var(--border);
  margin-bottom: 24px;
  padding: 0 20px;
  font-size: var(--fs-md);
}

blockquote cite {
	font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* list */
.content ul {
  list-style-type: none;
  padding-left: 1.125em;
  margin-bottom: 12px;
}

.content ul li {
  position: relative;
  margin-bottom: 8px;
}

.content ul li:last-child {
  margin-bottom: 0;
}

.content ul li > ul li {
	color: var(--text-secondary);
	line-height: var(--lh-md);
	padding-right: 1.125em;
}

.content ul li::before {
  content: '';
  position: absolute;
  left: -0.875em;
  border-radius: 50%;
  background-color: var(--text-tertiary);
}

.content ul > li::before {
	top: .675em;
  width: 5px;
  height: 5px;
}

.content li > ul {
	margin-top: 8px;
}

.content li > ul li::before {
	top: .625em;
  width: 4px;
  height: 4px;
}


/* gallery */

.gallery {
	margin: 64px 0;
}

img {
	width: 100%;
	border-radius: 8px;
}

.caption {
	padding-bottom: var(--space-base);
}

.caption p {
	margin-bottom: 0;
	color: var(--text-secondary);
}

.caption p:nth-child(1) {
	font-size: .625rem;
	font-weight: var(--fw-md);
	text-transform: uppercase;
}

.caption p:nth-child(2) {
	font-size: var(--fs-sm);
	font-weight: var(--fw-rg);
	line-height: var(--lh-md);
}

mark {
  color: var(--text-primary);
  display: inline;
  margin: -0.022294em -0.141142em -0.277706em -0.25em;
  padding: 0.022294em 0.141142em 0.277706em 0.25em;
  border-radius: 0.5em 0.3em;
  background-image: linear-gradient(
    89.8257918693618deg,
    color-mix(in srgb, var(--mark), transparent 50%),
    color-mix(in srgb, var(--mark), transparent 90%) 4%,
    color-mix(in srgb, var(--mark), transparent 70%) 96%,
    color-mix(in srgb, var(--mark), transparent 30%)
  );
  background-position: 0% 0%;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: scroll;
  background-origin: padding-box;
  background-clip: border-box;
  background-color: transparent;
}

/* Horizontal rule */
hr {
  margin: 3.75em 0;
  height: auto;
  border: none;
  background: none;
  text-align: center;
  position: relative;
}

hr::before {
  content: '✼ ✼ ✼';
  font-family: var(--serif);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}

@media only screen and (width < 768px) {
	.toc {
		display: none;
	}
}

@media only screen and (width < 640px) {
	.gallery {
		margin: 24px 0;
	}
}

@media only screen and (width < 1024px) {
	nav > div {
		width: calc(calc(100% - 48px * 5) / 4);
	}
}