@janga/norna 0.7.16 → 0.7.18

package/src/styles/global.css

@@ -44,6 +44,9 @@
 	--space-section-to-section-desktop: clamp(2.55rem, 4.2vw, 3.9rem);
 	--space-section-to-section-mobile: 2.25rem;
 	--space-section-to-section: var(--space-section-to-section-desktop);
+	--space-page-title-to-first-section-desktop: clamp(0.9rem, 1.6vw, 1.4rem);
+	--space-page-title-to-first-section-mobile: 0.9rem;
+	--space-page-title-to-first-section: var(--space-page-title-to-first-section-desktop);
 	--space-final-section-bottom-desktop: var(--space-section-to-section-desktop);
 	--space-final-section-bottom-mobile: var(--space-section-to-section-mobile);
 	--space-final-section-bottom: var(--space-final-section-bottom-desktop);
@@ -96,6 +99,19 @@ a {
 	color: var(--color-page);
 }
 
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
 .skip-link {
 	position: fixed;
 	top: 0.75rem;
@@ -193,13 +209,18 @@ a {
 }
 
 .site-nav a:hover,
+.site-nav a:focus-visible,
 .site-nav a[aria-current='page'],
 .mobile-nav-panel a:hover,
+.mobile-nav-panel a:focus-visible,
 .mobile-nav-panel a[aria-current='page'] {
 	opacity: 1;
 }
 
-.site-nav a[aria-current='page'] {
+.site-nav > ul > .site-nav-item > a:hover,
+.site-nav > ul > .site-nav-item > a:focus-visible,
+.site-nav > ul > .site-nav-item > a[aria-current='page'],
+.site-nav > ul > .site-nav-item-current-branch > a {
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.35em;
@@ -232,6 +253,20 @@ a {
 	gap: 0.65rem;
 }
 
+.site-nav-submenu .navigation-page-tree-submenu {
+	gap: 0.75rem;
+}
+
+.site-nav-submenu .navigation-page-tree-submenu .navigation-page-tree-submenu {
+	margin: 0.15rem 0 0 0.35rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+	padding-left: 0.75rem;
+}
+
+.site-nav-submenu .navigation-page-link {
+	font-weight: 650;
+}
+
 .site-nav-submenu a {
 	font-size: 0.76rem;
 	letter-spacing: 0.03em;
@@ -242,7 +277,8 @@ a {
 }
 
 .site-nav-submenu a:hover,
-.site-nav-submenu a:focus-visible {
+.site-nav-submenu a:focus-visible,
+.site-nav-submenu a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
 	text-underline-offset: 0.25em;
@@ -256,6 +292,13 @@ a {
 	transform: translate(-50%, 0);
 }
 
+.site-nav-item[data-submenu-dismissed='true'] .site-nav-submenu {
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transform: translate(-50%, -0.35rem);
+}
+
 .mobile-nav-menu {
 	display: none;
 }
@@ -264,10 +307,29 @@ a {
 	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
 }
 
+.page-nav-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: clamp(1.1rem, 2.5vw, 2rem);
+	width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	margin: 0 auto;
+}
+
+.page-nav-label {
+	flex: 0 0 auto;
+	font-size: 0.7rem;
+	font-weight: 650;
+	letter-spacing: 0.08em;
+	opacity: 0.55;
+	text-transform: uppercase;
+	white-space: nowrap;
+}
+
 .page-nav ul {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: center;
+	justify-content: flex-start;
 	gap: 0 clamp(1.4rem, 4vw, 3.25rem);
 	margin: 0;
 	padding: 0;
@@ -302,14 +364,19 @@ a {
 }
 
 .page-nav a:hover,
-.page-nav a:focus-visible {
+.page-nav a:focus-visible,
+.page-nav a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.35em;
 }
 
-.mobile-page-nav a[aria-current='true'] {
+.page-nav .page-nav-page-top {
+	font-weight: 700;
+}
+
+.mobile-nav-sections a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
@@ -330,6 +397,323 @@ a {
 	padding: 0;
 }
 
+.site-page-layout:not(.site-page-layout-tree) {
+	display: contents;
+}
+
+.site-page-layout-tree {
+	display: grid;
+	grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
+	align-items: start;
+	gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
+	min-height: calc(100svh - var(--site-top-anchor-offset));
+	width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 76rem));
+	margin: 0 auto;
+}
+
+.site-page-layout-tree > .site-content {
+	width: 100%;
+	min-width: 0;
+}
+
+.tree-local-navigation {
+	position: sticky;
+	top: calc(var(--site-top-anchor-offset) + 1.25rem);
+	z-index: 3;
+	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
+	padding: 1.5rem 0;
+	background: var(--color-page);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+}
+
+.navigation-page-sections {
+	margin: 0.15rem 0 0.55rem 0.3rem;
+	border-left: 2px solid color-mix(in srgb, currentColor 38%, transparent);
+	padding: 0.2rem 0 0.25rem 0.85rem;
+}
+
+.navigation-page-tree,
+.page-contents-links {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.navigation-page-node {
+	position: relative;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link {
+	display: block;
+	padding: 0.45rem 2rem 0.45rem 0;
+	color: inherit;
+	font-size: 0.86rem;
+	line-height: 1.35;
+	opacity: 0.72;
+	text-decoration: none;
+}
+
+.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-link {
+	font-size: 0.94rem;
+	font-weight: 700;
+	opacity: 1;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link:hover,
+.navigation-page-tree-sidebar .navigation-page-link:focus-visible,
+.navigation-page-tree-sidebar .navigation-page-link[aria-current='page'] {
+	opacity: 1;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-tree-sidebar .navigation-page-tree-sidebar {
+	margin: 0.25rem 0 0.25rem 0.3rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+	padding-left: 0.85rem;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary {
+	position: absolute;
+	top: 0.25rem;
+	right: 0;
+	display: grid;
+	place-items: center;
+	width: 1.8rem;
+	height: 1.8rem;
+	border: 0;
+	border-radius: var(--shape-radius-small, 2px);
+	list-style: none;
+	cursor: pointer;
+	opacity: 0.66;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary:hover,
+.navigation-page-branch:not(.navigation-page-disclosure) > summary:focus-visible {
+	background: color-mix(in srgb, currentColor 8%, transparent);
+	opacity: 1;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary > [aria-hidden='true']::before {
+	content: "+";
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure)[open] > summary > [aria-hidden='true']::before {
+	content: "−";
+}
+
+.navigation-page-disclosure > .navigation-page-summary {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	border: 0;
+	border-radius: var(--shape-radius-small, 2px);
+	padding: 0.45rem 0;
+	font-size: 0.86rem;
+	line-height: 1.35;
+	list-style: none;
+	cursor: pointer;
+	opacity: 0.72;
+}
+
+.navigation-page-disclosure {
+	position: relative;
+}
+
+.navigation-page-disclosure > .navigation-page-summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-disclosure > .navigation-page-summary:hover,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible,
+.navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary {
+	opacity: 1;
+}
+
+.navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible > :first-child,
+.navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary > :first-child {
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-summary > .navigation-page-summary-title {
+	opacity: 0;
+}
+
+.navigation-page-open-link {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+	max-width: calc(100% - 2rem);
+	padding: 0.45rem 0;
+	color: inherit;
+	font-size: 0.86rem;
+	line-height: 1.35;
+	opacity: 0.72;
+	overflow: hidden;
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-open-link {
+	display: block;
+}
+
+.navigation-page-open-link:hover,
+.navigation-page-open-link:focus-visible,
+.navigation-page-open-link[aria-current='page'] {
+	opacity: 1;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-chevron::before {
+	display: block;
+	content: "›";
+	font-size: 1.15rem;
+	line-height: 1;
+	transition: transform 140ms ease;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-summary .navigation-page-chevron::before {
+	transform: rotate(90deg);
+}
+
+.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-summary {
+	font-size: 0.94rem;
+	font-weight: 700;
+	opacity: 1;
+}
+
+.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-open-link {
+	font-size: 0.94rem;
+	font-weight: 700;
+	opacity: 1;
+}
+
+.navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content {
+	margin: 0.1rem 0 0.25rem 0.3rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+	padding-left: 0.85rem;
+}
+
+.navigation-page-tree-sidebar .navigation-page-disclosure .navigation-page-tree-sidebar {
+	margin: 0.25rem 0;
+	border-left: 0;
+	padding-left: 0;
+}
+
+.navigation-page-disclosure[data-current-branch='true']:not([data-current-page='true']):not([data-sections-open='true'])
+	> .navigation-page-branch-content > .navigation-page-sections {
+	display: none;
+}
+
+.page-contents-links li + li {
+	margin-top: 0.45rem;
+}
+
+.page-contents-links ol {
+	margin: 0.45rem 0 0;
+	padding-left: 0.8rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	list-style: none;
+}
+
+.page-contents-links a {
+	display: block;
+	color: inherit;
+	font-size: 0.8rem;
+	line-height: 1.4;
+	opacity: 0.64;
+	text-decoration: none;
+}
+
+.page-contents-links a:hover,
+.page-contents-links a:focus-visible,
+.page-contents-links a[aria-current='location'] {
+	opacity: 1;
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.site-breadcrumbs {
+	height: calc(clamp(1rem, 2.5vw, 1.5rem) + 1.35rem);
+	width: min(100%, var(--page-text-width, var(--text-width)));
+	margin: 0 auto;
+	padding-top: clamp(1rem, 2.5vw, 1.5rem);
+	font-size: 1rem;
+	line-height: 1.4;
+	overflow: hidden;
+}
+
+.site-breadcrumbs ol {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	font-size: 0.78rem;
+	list-style: none;
+	white-space: nowrap;
+}
+
+.site-breadcrumbs li {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+}
+
+.site-breadcrumbs li:last-child {
+	flex: 0 1 auto;
+}
+
+.site-breadcrumbs li + li::before {
+	margin: 0 0.55rem;
+	content: "/";
+	opacity: 0.38;
+}
+
+.site-breadcrumbs a {
+	display: block;
+	min-width: 0;
+	color: inherit;
+	opacity: 0.72;
+	overflow: hidden;
+	text-decoration: none;
+	text-overflow: ellipsis;
+}
+
+.site-breadcrumbs a:hover,
+.site-breadcrumbs a:focus-visible {
+	opacity: 1;
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.site-breadcrumbs [aria-current='page'] {
+	display: block;
+	min-width: 0;
+	overflow: hidden;
+	font-weight: 650;
+	text-overflow: ellipsis;
+}
+
+.site-content-has-breadcrumbs > .site-section:first-of-type {
+	padding-top: clamp(1.15rem, 2.5vw, 1.75rem);
+}
+
 .site-banners {
 	position: relative;
 	z-index: 2;
@@ -450,11 +834,27 @@ a {
 	pointer-events: none;
 }
 
+.site-page-layout-tree .site-section::before {
+	left: 0;
+}
+
 .site-section + .site-section {
 	margin-top: 0;
 	padding-top: var(--space-section-to-section);
 }
 
+.site-section-page-title-empty .section-header {
+	padding-bottom: 0;
+}
+
+.site-section-page-title-empty .section-header h1 {
+	padding-bottom: 0;
+}
+
+.site-section-page-title-empty + .site-section {
+	padding-top: var(--space-page-title-to-first-section);
+}
+
 .site-section:last-child {
 	padding-bottom: var(--space-final-section-bottom);
 }
@@ -467,11 +867,12 @@ a {
 .section-header {
 	width: min(100%, var(--section-heading-width-desktop, 760px));
 	margin: 0 auto;
-	padding: 0 0 var(--section-heading-spacing-after, 0.55em);
+	padding: 0;
 	text-align: var(--section-heading-align-desktop, center);
 }
 
-.site-section-first-block-is-visual .section-header {
+.site-section-first-block-is-visual .section-header h1,
+.site-section-first-block-is-visual .section-header h2 {
 	padding-bottom: var(--space-heading-to-block);
 }
 
@@ -485,6 +886,7 @@ ul {
 .section-header h1,
 .section-header h2 {
 	margin-bottom: 0;
+	padding-bottom: var(--section-heading-spacing-after, 0.55em);
 	color: inherit;
 	font-size: var(--section-heading-font-size-desktop, clamp(1.35rem, 1.1rem + 0.9vw, 2rem));
 	font-weight: var(--section-heading-font-weight, 400);
@@ -612,7 +1014,7 @@ ul {
 .section-markdown pre.astro-code {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	border-radius: 6px;
+	border-radius: var(--shape-radius-medium, 6px);
 	padding: 0.78rem 0.9rem;
 	background: #0d1117 !important;
 	font-size: 0.92em;
@@ -789,7 +1191,7 @@ ul {
 	align-content: start;
 	margin: 0;
 	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	border-radius: 8px;
+	border-radius: var(--shape-radius-large, 8px);
 	padding: var(--card-list-padding);
 	background: color-mix(in srgb, var(--section-background-color, var(--color-page)) 92%, currentColor 8%);
 	color: inherit;
@@ -1115,6 +1517,7 @@ ul {
 		--space-heading-to-block: var(--space-heading-to-block-mobile);
 		--space-image-item: var(--space-image-item-mobile);
 		--space-section-to-section: var(--space-section-to-section-mobile);
+		--space-page-title-to-first-section: var(--space-page-title-to-first-section-mobile);
 		--space-final-section-bottom: var(--space-final-section-bottom-mobile);
 		--content-gutter: var(--content-gutter-mobile);
 		--image-max-available-width: var(--image-max-available-width-mobile);
@@ -1122,6 +1525,10 @@ ul {
 		--site-top-anchor-offset: 6.25rem;
 	}
 
+	.site-top {
+		backdrop-filter: none;
+	}
+
 	.site-nav-row {
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 		padding: 0.75rem 0;
@@ -1146,30 +1553,20 @@ ul {
 		display: block;
 		position: relative;
 		flex: 0 0 auto;
+		margin-left: auto;
 	}
 
-	.page-nav ul {
-		gap: 0 1.55rem;
-		padding: 0 1rem;
-		text-align: center;
-	}
-
-	.page-nav li + li::before {
-		left: -0.95rem;
-	}
-
-	.page-nav a {
-		padding: 0.95rem 0 0.85rem;
-		font-size: 0.72rem;
-		white-space: nowrap;
+	.page-nav {
+		display: none;
 	}
 
-	.mobile-nav-menu summary {
+	.mobile-nav-menu > summary {
 		display: flex;
 		align-items: center;
-		gap: 0.42rem;
+		gap: 0.5rem;
+		min-height: 2.75rem;
 		border: 1px solid currentColor;
-		padding: 0.5rem 0.7rem 0.44rem;
+		padding: 0.55rem 0.75rem;
 		font-size: 0.72rem;
 		font-weight: 700;
 		letter-spacing: 0.1em;
@@ -1179,69 +1576,358 @@ ul {
 		text-transform: uppercase;
 	}
 
-	.mobile-nav-menu summary::after {
-		content: "▾";
-		font-size: 0.82em;
+	.mobile-nav-menu > summary::after {
+		content: "☰";
+		font-size: 1rem;
 		line-height: 1;
-		opacity: 0.78;
+		opacity: 0.86;
 	}
 
-	.mobile-nav-menu[open] summary::after {
-		transform: rotate(180deg);
+	.mobile-nav-menu[open] > summary::after {
+		content: "×";
+		font-size: 1.25rem;
 	}
 
-	.mobile-nav-menu summary::-webkit-details-marker {
+	.mobile-nav-menu > summary::-webkit-details-marker {
 		display: none;
 	}
 
 	.mobile-nav-panel {
-		position: absolute;
-		top: calc(100% + 0.75rem);
+		position: fixed;
+		top: var(--site-top-anchor-offset);
 		right: 0;
-		display: grid;
-		gap: 1.75rem;
-		width: min(82vw, 22rem);
-		border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
-		padding: 1rem;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		max-height: none;
+		border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+		padding: clamp(1.25rem, 5vw, 2rem) var(--content-gutter) max(1.5rem, env(safe-area-inset-bottom));
 		background: var(--site-top-background-color, var(--color-nav-background));
-		box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.28);
+		box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 0.32);
 		color: var(--site-top-text-color, var(--color-text));
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.mobile-site-nav {
+		width: min(100%, 32rem);
+		margin: 0 auto;
 	}
 
 	.mobile-nav-panel h2 {
-		margin: 0 0 0.75rem;
-		font-size: 0.68rem;
-		font-weight: 700;
-		letter-spacing: 0.14em;
+		margin: 0 0 1.25rem;
+		font-size: clamp(1.25rem, 5vw, 1.55rem);
+		font-weight: 650;
+		letter-spacing: 0;
+		line-height: 1.2;
+		text-transform: none;
+	}
+
+	.mobile-nav-panel :is(ul, ol) {
+		display: grid;
+		gap: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.navigation-page-tree-mobile > .navigation-page-node {
+		border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+	}
+
+	.navigation-page-tree-mobile > .navigation-page-node:first-child {
+		border-top: 0;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-link {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		min-height: 3.25rem;
+		padding: 0.75rem 2.5rem 0.75rem 0;
+		color: inherit;
+		font-size: 0.94rem;
+		letter-spacing: 0;
+		line-height: 1.35;
+		opacity: 0.78;
+		text-decoration: none;
+		text-transform: none;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary {
+		position: static;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: auto;
+		min-height: 3.25rem;
+		padding: 0.75rem 0;
+		font-size: 0.94rem;
+		line-height: 1.35;
+		opacity: 0.78;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-open-link {
+		display: none;
+		align-items: center;
+		min-height: 3.25rem;
+		max-width: calc(100% - 2.5rem);
+		padding: 0.75rem 0;
+		font-size: 0.94rem;
+		line-height: 1.35;
+		opacity: 0.78;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure[open] > .navigation-page-open-link {
+		display: flex;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:hover,
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:focus-visible,
+	.navigation-page-node-current > .navigation-page-disclosure > .navigation-page-summary {
+		background: transparent;
+		opacity: 1;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:focus-visible > :first-child,
+	.navigation-page-node-current > .navigation-page-disclosure > .navigation-page-summary > :first-child {
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.3em;
+	}
+
+	.navigation-page-chevron::before {
+		display: block;
+		content: "›";
+		font-size: 1.25rem;
 		line-height: 1;
-		text-transform: uppercase;
+		transition: transform 140ms ease;
 	}
 
-	.mobile-page-nav {
-		border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-		padding-top: 1.05rem;
+	.navigation-page-disclosure[open] > .navigation-page-summary .navigation-page-chevron::before {
+		transform: rotate(90deg);
 	}
 
-	.mobile-nav-panel ul {
-		display: grid;
-		gap: 0.65rem;
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary > [aria-hidden='true']::before,
+	.navigation-page-tree-mobile .navigation-page-disclosure[open] > .navigation-page-summary > [aria-hidden='true']::before {
+		content: "›";
+	}
+
+	.navigation-page-tree-mobile .navigation-page-branch-content {
+		margin-left: 0.35rem;
+		border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+		padding-left: 1rem;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-sections {
+		margin: 0 0 0.45rem;
+	}
+
+	.navigation-page-branch-content > .navigation-page-tree-mobile > .navigation-page-node {
+		border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+	}
+
+	.navigation-page-tree-mobile .navigation-page-link:hover,
+	.navigation-page-tree-mobile .navigation-page-link:focus-visible,
+	.navigation-page-tree-mobile .navigation-page-link[aria-current='page'] {
+		opacity: 1;
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.3em;
+	}
+
+	.page-contents-links-mobile {
+		margin-top: 0.25rem;
+	}
+
+	.page-contents-links-mobile > li {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	.page-contents-links-mobile li + li {
+		margin-top: 0;
+	}
+
+	.page-contents-links-mobile ol {
+		border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+		padding-left: 1rem;
+	}
+
+	.page-contents-links-mobile a {
+		min-height: 3.2rem;
+		padding: 0.85rem 0;
+		font-size: 0.92rem;
+		opacity: 0.78;
+	}
+
+	.mobile-nav-panel a,
+	.mobile-nav-page-open,
+	.mobile-nav-back {
+		font-family: inherit;
+		font-size: 0.94rem;
+		letter-spacing: 0;
+		line-height: 1.35;
+		text-transform: none;
+	}
+
+	.mobile-nav-page {
+		border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+		padding: 0;
+	}
+
+	.mobile-nav-page:first-child {
+		border-top: 0;
+	}
+
+	.mobile-nav-page > a,
+	.mobile-nav-page-open {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		min-height: 3.4rem;
+		padding: 0.8rem 0;
+		font-weight: 600;
+	}
+
+	.mobile-nav-page-open {
+		display: none;
+		border: 0;
+		background: transparent;
+		color: currentColor;
+		cursor: pointer;
+		font-weight: 600;
+		text-align: left;
 	}
 
-	.mobile-nav-panel a {
-		font-size: 0.82rem;
-		letter-spacing: 0.06em;
+	.mobile-nav-page-open::after {
+		content: "›";
+		font-size: 1.35rem;
+		line-height: 1;
+		opacity: 0.68;
 	}
 
-	.mobile-page-nav a[aria-current='true'] {
+	.mobile-nav-page-open:hover > span,
+	.mobile-nav-page-open:focus-visible > span,
+	.mobile-nav-page-open[aria-current='page'] > span {
 		text-decoration: underline;
 		text-decoration-thickness: 1px;
-		text-underline-offset: 0.35em;
+		text-underline-offset: 0.3em;
+	}
+
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-page-open,
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-back {
+		display: flex;
+	}
+
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-page-fallback {
+		display: none;
+	}
+
+	.mobile-nav-view[hidden] {
+		display: none;
+	}
+
+	.mobile-nav-menu:not([data-mobile-navigation-ready='true']) .mobile-nav-page-view:not([data-current-page='true']) {
+		display: none;
+	}
+
+	.mobile-nav-page-view + .mobile-nav-page-view,
+	.mobile-nav-view + .mobile-nav-view {
+		margin-top: 2rem;
+	}
+
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-view {
+		margin-top: 0;
+	}
+
+	.mobile-nav-back {
+		display: none;
+		align-items: center;
+		gap: 0.55rem;
+		min-height: 2.75rem;
+		margin: -0.4rem 0 0.65rem;
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: currentColor;
+		cursor: pointer;
+		opacity: 0.78;
+	}
+
+	.mobile-nav-back::before {
+		content: "‹";
+		font-size: 1.35rem;
+		line-height: 1;
+	}
+
+	.mobile-nav-back:hover,
+	.mobile-nav-back:focus-visible {
+		opacity: 1;
+		text-decoration: underline;
+		text-underline-offset: 0.25em;
+	}
+
+	.mobile-nav-sections {
+		border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	}
+
+	.mobile-nav-sections li {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	.mobile-nav-sections a {
+		min-height: 3.2rem;
+		padding: 0.85rem 0;
+		font-size: 0.92rem;
+		opacity: 0.78;
+	}
+
+	.mobile-nav-sections .mobile-nav-overview,
+	.mobile-nav-sections .mobile-nav-page-top {
+		font-weight: 650;
+	}
+
+	.mobile-nav-sections li:not(.mobile-nav-page-top-item) a {
+		padding-left: 1rem;
+	}
+
+	.mobile-nav-sections a:hover,
+	.mobile-nav-sections a:focus-visible,
+	.mobile-nav-sections a[aria-current='location'] {
+		opacity: 1;
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.25em;
+	}
+
+	.mobile-navigation-open {
+		overflow: hidden;
 	}
 
 	.site-content {
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 	}
 
+	.site-page-layout-tree {
+		display: block;
+		width: 100%;
+	}
+
+	.site-page-layout-tree > .site-content {
+		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	}
+
+	.site-page-layout-tree .site-section::before {
+		left: calc(50% - 50vw);
+	}
+
+	.tree-local-navigation {
+		display: none;
+	}
+
 	.site-banners {
 		width: min(calc(100% - 2rem), var(--page-width));
 		padding-top: 0.75rem;