@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/newsreader-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/newsreader-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/newsreader-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/hanken-grotesk-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/hanken-grotesk-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/hanken-grotesk-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
	color-scheme: light;
	--base: #f8f5ef;
	--base-2: #efe9df;
	--base-3: #e3dacb;
	--contrast: #1b1d1c;
	--body: #424744;
	--primary: #1f4060;
	--primary-2: #162f48;
	--accent: #765a34;
}
* {
	box-sizing: border-box;
}
html {
	scroll-padding-block-start: 2rem;
}
body {
	margin: 0;
	background: var(--base);
	color: var(--body);
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.7;
}
a {
	color: var(--primary);
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}
a:hover {
	color: var(--primary-2);
	text-decoration-thickness: 2px;
}
a:focus-visible,
summary:focus-visible,
pre:focus-visible,
.table-wrap:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 5px;
}
.skip-link {
	position: fixed;
	inset-block-start: .75rem;
	inset-inline-start: .75rem;
	z-index: 10;
	padding: .7rem 1rem;
	transform: translateY(-200%);
	background: var(--contrast);
	color: var(--base);
}
.skip-link:focus {
	transform: none;
	color: var(--base);
}
.sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	width: 17.5rem;
	padding: 2.5rem 1.75rem;
	overflow-y: auto;
	border-inline-end: 1px solid var(--base-3);
	background: var(--base-2);
}
.brand {
	color: var(--contrast);
	font-family: 'Newsreader', Georgia, serif;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.025em;
	text-decoration: none;
}
.guide-label {
	margin: .75rem 0 2rem;
	font-size: .875rem;
	line-height: 1.5;
}
.nav-group + .nav-group {
	margin-block-start: 1.5rem;
}
.nav-group p {
	margin: 0 0 .4rem;
	color: var(--contrast);
	font-size: .8125rem;
	font-weight: 700;
}
.nav-group ul,
.desktop-toc ul,
.mobile-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-group a {
	display: block;
	padding-block: .3rem;
	color: var(--body);
	font-size: .9375rem;
	line-height: 1.45;
	text-decoration: none;
}
.nav-group a:hover {
	color: var(--primary-2);
	text-decoration: underline;
}
.nav-group a[aria-current] {
	color: var(--primary-2);
	font-weight: 700;
	text-decoration: underline;
}
.reading-layout {
	display: grid;
	grid-template-columns: minmax(0, 46rem) 12rem;
	align-items: start;
	gap: 3rem;
	max-width: 89rem;
	margin-inline-start: 17.5rem;
	padding: 4rem clamp(1.5rem, 3.5vw, 4rem) 2rem;
}
main {
	min-width: 0;
}
main:focus {
	outline: none;
}
h1,
h2,
h3 {
	color: var(--contrast);
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
}
h1 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.6rem, 4.5vw, 4.25rem);
}
h2 {
	margin: 3.5rem 0 1.25rem;
	font-size: clamp(1.9rem, 2.8vw, 2.5rem);
}
h3 {
	margin: 2.25rem 0 1rem;
	font-size: 1.6rem;
	font-weight: 500;
}
p {
	margin-block: 0 1.25rem;
}
.lead {
	margin-block-end: 1.75rem;
	color: var(--contrast);
	font-size: 1.25rem;
	line-height: 1.65;
}
ul,
ol {
	margin-block: 1rem 1.5rem;
	padding-inline-start: 1.5rem;
}
li {
	padding-inline-start: .2rem;
	margin-block: .45rem;
}
strong {
	color: var(--contrast);
	font-weight: 650;
}
code {
	padding: .1em .25em;
	background: var(--base-2);
	font-family: ui-monospace, 'Cascadia Code', monospace;
	font-size: .85em;
	overflow-wrap: anywhere;
}
pre {
	max-width: 100%;
	margin: 1.5rem 0;
	padding: 1.25rem;
	overflow: auto;
	border: 1px solid var(--base-3);
	background: var(--base-2);
	color: var(--contrast);
	font-size: .9375rem;
	line-height: 1.65;
	tab-size: 4;
}
pre code {
	padding: 0;
	background: transparent;
	overflow-wrap: normal;
}
figure {
	margin: 2rem 0;
}
figure a {
	display: block;
}
figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--base-3);
}
figcaption {
	margin-block-start: .75rem;
	font-size: .875rem;
	line-height: 1.55;
}
.table-wrap {
	max-width: 100%;
	margin-block: 1.5rem;
	overflow-x: auto;
}
table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	line-height: 1.6;
}
caption {
	margin-block-end: .75rem;
	font-weight: 600;
	text-align: start;
}
th,
td {
	padding: .85rem .75rem;
	border-block-end: 1px solid var(--base-3);
	text-align: start;
	vertical-align: top;
}
th {
	background: var(--base-2);
	color: var(--contrast);
	font-weight: 650;
}
.pattern-list li {
	margin-block: .85rem;
}
.desktop-toc {
	position: sticky;
	inset-block-start: 2rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	font-size: .875rem;
	line-height: 1.5;
}
.desktop-toc p {
	margin: .3rem 0 .75rem;
	color: var(--contrast);
	font-weight: 650;
}
.desktop-toc li,
.mobile-toc li {
	padding: 0;
	margin-block: .65rem;
}
.desktop-toc a {
	color: var(--body);
	text-decoration: none;
}
.desktop-toc a:hover {
	color: var(--primary-2);
	text-decoration: underline;
}
.toc-section {
	padding-inline-start: 1rem;
}
.page-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-block-start: 3.5rem;
	padding-block: 1.5rem;
	border-block: 1px solid var(--base-3);
	font-size: 1rem;
}
.page-links span {
	display: block;
	margin-block-end: .35rem;
	color: var(--body);
	font-size: .8125rem;
}
.page-links a:last-child {
	text-align: end;
}
.page-footer {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-block-start: 1.5rem;
	font-size: .8125rem;
}
.mobile-header,
.mobile-toc {
	display: none;
}
@media (max-width: 1250px) {
	.reading-layout {
		grid-template-columns: minmax(0, 48rem);
	}
	.desktop-toc {
		display: none;
	}
	.mobile-toc {
		display: block;
		margin-block: 2rem;
		padding-block: 1rem;
		border-block: 1px solid var(--base-3);
		font-size: .9375rem;
	}
	summary {
		color: var(--contrast);
		font-weight: 650;
		cursor: pointer;
	}
}
@media (max-width: 800px) {
	.sidebar {
		display: none;
	}
	.mobile-header {
		display: block;
		padding: 1.5rem;
		border-block-end: 1px solid var(--base-3);
		background: var(--base-2);
	}
	.mobile-header .brand {
		font-size: 2.15rem;
	}
	.mobile-header details {
		margin-block-start: 1rem;
	}
	.mobile-header details[open] nav {
		padding-block: 1.5rem .5rem;
	}
	.mobile-header .nav-group a {
		padding-block: .65rem;
	}
	.reading-layout {
		margin: 0;
		padding: 2.5rem 1.5rem 1rem;
	}
	h1 {
		font-size: 2.75rem;
	}
	h2 {
		margin-block-start: 2.75rem;
	}
	.lead {
		font-size: 1.1875rem;
	}
	pre {
		padding: 1rem;
	}
	.page-footer {
		flex-wrap: wrap;
		gap: .25rem;
	}
}
@media print {
	.sidebar,
	.mobile-header,
	.desktop-toc,
	.mobile-toc,
	.skip-link,
	.page-links,
	.page-footer {
		display: none;
	}
	body {
		background: white;
		color: black;
		font-size: 11pt;
	}
	.reading-layout {
		display: block;
		margin: 0;
		padding: 0;
	}
	h2,
	h3 {
		break-after: avoid;
	}
	figure,
	tr,
	pre {
		break-inside: avoid;
	}
	pre {
		white-space: pre-wrap;
	}
	a {
		color: black;
	}
}