/* ===== CSS Variables & Theme ===== */
html {
	--mobile-scale: 0.61;
	--mobile-padding-offset: 1;
	--base-size: 13px;
	--viewport-height: 100vh;
	font-size: var(--base-size);
	touch-action: manipulation;
	position: relative;
}

body {
	--swatch-1: rgba(0, 0, 0, 0.85);
	--swatch-2: rgba(0, 0, 0, 0.75);
	--swatch-3: rgba(0, 0, 0, 0.6);
	--swatch-4: rgba(0, 0, 0, 0.4);
	--swatch-5: rgba(0, 0, 0, 0.25);
	--swatch-6: #ff0202;
	--swatch-7: rgba(255, 255, 255, 0.85);
	--swatch-8: #d07181;
	--swatch-9: #a01717;
	--swatch-10: #a9d5a0;
	--swatch-11: rgba(0, 0, 0, 0);
	--swatch-12: #ffffff;
	--colorfilter-color: rgba(76, 25, 25, 0.4);
	--colorfilter-color-opacity: 0.24;
	--colorfilter-mix: lighten;
	--colorfilter-grayscale: 1;
	--baseColor-accent: #FF0000;
	--baseColor-accent-rgb: 255, 0, 0;
	--baseColor-accent-reverse-rgb: 255, 255, 255;
	background-color: #000000;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: var(--viewport-height, 100vh);
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

:focus { outline: 0; }

a:active,
.linked:active {
	opacity: 0.7;
}

sub {
	position: relative;
	vertical-align: baseline;
	top: 0.3em;
}

sup {
	position: relative;
	vertical-align: baseline;
	top: -0.4em;
}

ol {
	margin: 0;
	padding: 0 0 0 2.5em;
	list-style-type: decimal-leading-zero;
}

ul {
	margin: 0;
	padding: 0 0 0 2.0em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(10, 0, 255, 0.75);
	border: 0;
	height: 5%;
	display: block;
	margin-top: 0.4rem;
	margin-bottom: 0.5rem;
}

s, del, strike {
	text-decoration: line-through;
}

/* ===== Color Filter Overlays ===== */
.colorfilter-color {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
	filter: grayscale(var(--colorfilter-grayscale));
}
.colorfilter-base {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: var(--colorfilter-mix);
	background: var(--colorfilter-color);
	opacity: var(--colorfilter-color-opacity);
}

/* ===== Content & Page Layout ===== */
.content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 100%;
	position: relative;
	flex-grow: 1;
	border-color: #f9faf8;
	border-width: 0rem;
	border-style: solid;
	border-radius: 0rem;
	margin: 0rem;
}

.pages {
	width: 100%;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.page {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: var(--viewport-height);
}

.page.stacked-page {
	overflow: hidden;
}

/* Every page stacks on the homepage (live loads the later ones as you scroll near the end).
   Any page can also be opened on its own at index.html#<slug> (see route-mode.js) */
body.route-view .pages > .page {
	display: none;
}

body.route-view .pages > .route-current {
	display: flex;
}

/* Pages live keeps off the homepage: they only open on their own */
body:not(.route-view) .pages > .route-only {
	display: none;
}

/* Password pages (password-gate.js): a [data-locked] page shows only its gate, with no background */
.page[data-locked] .backdrop,
.page[data-locked] .bodycopy {
	display: none;
}

.page:not([data-locked]) .password-gate {
	display: none;
}

.password-gate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 340px;
	max-width: 100%;
	min-height: 80vh;
	margin: 0 auto;
}

.password-gate input {
	width: 100%;
	padding: 12px 20px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 16px;
	outline: none;
}

/* Like live, the last page in view gets one screen of bottom padding so its end can scroll up
   past the pinned nav: the last page on the homepage, or the routed page itself */
body:not(.route-view) .pages > .page:last-child,
body.route-view .pages > .route-current {
	padding-bottom: var(--viewport-height);
}

.page-layout {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 100%;
	padding: 0rem;
	width: 100%;
	flex: 1;
	position: relative;
	z-index: 1;
}

.page-content {
	padding: 1rem;
	text-align: left;
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
}

.wallpaper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
}

.backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.backdrop.clip {
	clip: rect(auto, auto, auto, auto);
}