html {
	scroll-behavior: smooth;
	scroll-padding-top: 4.5rem;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; }

/* Skip link */
.skip-link {
	position: absolute;
	top: -2.5rem;
	left: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--paper);
	padding: .5rem 1rem;
	text-decoration: none;
	font-weight: 500;
	transition: top .15s ease;
}

.skip-link:focus {
	top: 0;
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Visually hidden helper */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.font-serif { font-family: var(--serif); }
.font-sans { font-family: var(--sans); }
.ink-soft { color: var(--ink-soft); }
.paper-bg { background: var(--paper); }
.card-bg { background: var(--card-bg); }
.ink-bg { background: var(--ink); }
.accent { color: var(--accent); }
.accent-hover:hover { color: var(--accent); }

/* Focus indicators */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.icon-btn:focus-visible,
.btn:focus-visible {
	outline-offset: 0;
}

.no-underline:focus-visible,
.toc-list a:focus-visible,
.footer-strip a:focus-visible,
.sidepager:focus-visible,
.next-band:focus-visible,
a.tm-heading-anchor:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.wordmark {
	font-family: var(--serif);
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
}

.no-underline,
.no-underline:hover,
.no-underline:focus {
	text-decoration: none;
}

.btn,
.btn:hover,
.btn:focus,
.toc-list a,
.toc-list a:hover,
.toc-list a:focus,
.sidepager,
.sidepager:hover,
.sidepager:focus {
	text-decoration: none;
}

.stage h1 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -.01em;
}

.stage .kicker {
	font-family: var(--sans);
}

.stage .tagline {
	font-family: var(--serif);
}

.stage .byline .name {
	color: var(--ink);
	font-weight: 500;
}

.btn {
	font-family: var(--sans);
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 2px;
}

.btn-primary,
.btn-order {
	color: var(--paper);
}

.btn-primary:hover,
.btn-order:hover {
	background: var(--accent);
	border-color: var(--accent);
}

.btn-quiet {
	border-color: var(--line);
}

.btn-quiet:hover {
	border-color: var(--ink-soft);
	color: var(--ink);
}

.rule-top { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }
.rule-left { border-left: 1px solid var(--card-line); }
.card-rule { border: 1px solid var(--card-line); }

.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-item { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: -1px; }
.toc-list-nested { padding-left: 1.25rem; margin: 0; list-style: none; }
.toc-list-nested .toc-item:last-child { border-bottom: 0; }
.toc-link { text-decoration: none; }
.toc-list a:hover { color: var(--accent); }
.toc-list li.current > .toc-link { color: var(--accent); font-weight: 500; }
.toc-num { font-family: var(--serif); color: var(--ink-soft); }
.toc-meta { color: var(--ink-soft); }

.breadcrumb-list { list-style: none; }
.breadcrumb-item { display: inline; }
.breadcrumb-separator { color: var(--ink-soft); }

.theme-icon { display: none; }
[data-theme="light"] .theme-icon-light,
html:not([data-theme="dark"]) .theme-icon-light { display: inline-flex; }
[data-theme="dark"] .theme-icon-dark { display: inline-flex; }

.toc-header .icon-btn svg { width: 20px; height: 20px; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.icon-btn {
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--ink-soft);
}

.icon-btn:hover {
	background: var(--card-bg);
	color: var(--ink);
}

.icon-btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.toc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: rgba(0,0,0,.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

body.toc-open .toc-backdrop {
	opacity: 1;
	pointer-events: auto;
}

.toc-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 31;
	width: min(340px, 88vw);
	height: 100%;
	background: var(--card-bg);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
}

body.toc-open .toc-panel {
	transform: translateX(0);
	visibility: visible;
	transition: transform .25s ease;
}

/* Visible, grabbable scrollbar for the navigation panel */
.toc-panel {
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	overscroll-behavior: contain;
}

.toc-panel::-webkit-scrollbar {
	width: 10px;
}

.toc-panel::-webkit-scrollbar-track {
	background: transparent;
}

.toc-panel::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 5px;
	border: 2px solid var(--card-bg);
}

.toc-panel::-webkit-scrollbar-thumb:hover {
	background: var(--ink-soft);
}

/* Collapsible folders in the navigation */
.toc-folder-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.toc-item.open > .toc-row .toc-folder-toggle svg {
	transform: rotate(90deg);
}

.toc-sublist { display: none; }
.toc-item.open > .toc-sublist { display: block; }

.page-card {
	position: relative;
	box-shadow: 0 1px 2px rgba(20,18,10,.04), 0 20px 40px -28px rgba(20,18,10,.25);
}

.sidepager {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10%;
	z-index: 10;
}

.sidepager:hover,
.sidepager:focus {
	background-color: var(--paper);
}

.sidepager-left { left: 0; }
.sidepager-right { right: 0; }

.pager-arrow {
	position: sticky;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	display: flex;
	justify-content: center;
}

article { max-width: var(--content); }

article h1 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(2rem, 5vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}

article .prose {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.7;
}

@media screen and (min-width: 30em) {
	article .prose {
		font-size: 1.2rem;
	}
}

article .prose > p:first-of-type::first-letter {
	float: left;
	font-size: 3.5em;
	padding-right: .1em;
	margin: 10px 5px 0 0;
}

article .prose h2,
article .prose h3,
article .prose h4 {
	font-family: var(--serif);
	font-weight: 500;
}

article .prose h2 { font-size: 1.5rem; }
article .prose h3 { font-size: 1.3rem; }

.next-band {
	background: var(--band-bg);
	color: var(--band-fg);
	text-decoration: none;
}

.next-band:hover,
.next-band:focus {
	color: var(--band-fg);
}

.next-band-arrow {
	width: 52px;
	height: 52px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .85;
	transition: transform .2s ease;
}

.next-band-icon {
	transition: transform .2s ease;
}

.next-band:hover .next-band-icon { transform: translateX(6px); }
.next-band-arrow svg { width: 20px; height: 20px; }

.footer-strip p { color: var(--ink-soft); }
.footer-strip a { border-bottom: 1px solid var(--line); }
.footer-strip a:hover { color: var(--accent); border-color: var(--accent); }

.folder-list { max-width: var(--content); margin-left: auto; margin-right: auto; }

/************************************
*  STANDARD ELEMENTS                 *
************************************/

img, figure, figure img {
	max-width: 100%;
	height: auto;
}

figure {
	display: table;
	margin: 2em auto;
	padding: 0;
}

figure.right, figure.left {
	width: auto;
	float: none;
	margin: auto auto;
}

@media (min-width: 40em) {
	figure.right {
		width: auto;
		float: right;
		margin: 0 0 2em 2em;
	}
	figure.left {
		width: auto;
		float: left;
		margin: 0 2em 2em 0;
	}
}

figure img { display: block; margin: auto; }

figcaption {
	display: table-caption;
	caption-side: bottom;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: .5rem;
	border: 1px solid var(--line);
}

code {
	display: inline-block;
	word-break: break-all;
	background: var(--paper-raised);
	color: var(--ink);
	padding: 0 4px;
	border-radius: 4px;
	font-size: .9em;
}

pre {
	display: block;
	white-space: pre;
	max-width: 100%;
	overflow-x: auto;
	font-size: .9em;
	background: var(--ink);
	color: var(--paper);
	padding: 1em;
	border-radius: 4px;
}

pre > code {
	background: transparent;
	color: inherit;
	padding: 0;
}

blockquote {
	border-left: 3px solid var(--line);
	margin: 1.5em 0;
	padding-left: 1em;
	font-style: italic;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2em 0;
}

a.tm-heading-anchor {
	display: inline-block;
	margin-left: -0.8em;
	width: 0.8em;
	font-weight: 300;
	color: var(--ink-soft);
	opacity: 1;
	text-decoration: none;
}

a.tm-heading-anchor:hover,
a.tm-heading-anchor:focus { color: var(--accent); text-decoration: none; }

/************************************
*  GAP UTILITIES (Tachyons lacks gap)*
************************************/

.gap1 { gap: .25rem; }
.gap2 { gap: .5rem; }
.gap3 { gap: 1rem; }
.gap4 { gap: 1.5rem; }

@media (max-width: 560px) {
	.contents-head { flex-direction: column; align-items: flex-start; gap: .35rem; }
	.strip-inner { flex-direction: column; align-items: flex-start; }
	.next-band-inner { flex-direction: column; align-items: flex-start; }
}

@media print {
	.no-print,
	.topbar,
	.toc-backdrop,
	.toc-panel,
	.sidepager,
	.next-band {
		display: none !important;
	}
	body, .page-card {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
	}
	.page-card {
		border: 0 !important;
	}
	article .prose { font-size: 1rem; }
}