/* Jonny's Website v4 - original carbon-fibre look, made responsive */

@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

a:link, a:visited, a:active {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

html, body {
	background-color: #000000;
	background-image: url(/images/Carbon-Fibre-Background.gif);
	background-repeat: repeat;
	color: #FFFFFF;
	cursor: url('/cursors/arrow.png'), auto;
	font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
	font-size: 16px;
	margin: 0;
	min-height: 100%;
}

.site-shell {
	max-width: 974px;
	margin: 0 auto;
	width: 100%;
	--site-max-width: 974px;
}

.Header,
.Navigation,
.site-column {
	background-color: #000000;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
}

.site-column {
	border-bottom: 1px solid #333333;
	display: flow-root;
	margin-bottom: 5px;
}

.Content,
.BackLink,
.CommonLinks,
.Footer {
	background-color: #000000;
}

.Header {
	text-align: center;
	/* allow the header to grow/shrink with its contents so the text never gets clipped */
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.site-banner {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* fluid font sizing so the header scales smoothly with viewport and avoids wrapping/cutting */
	font-size: clamp(18px, 8.5vw, 90px);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.site-banner .beveled-text {
	--lettering-stroke: 14px;
	white-space: nowrap;
	display: inline-block;
	font-size: inherit; /* inherit the fluid size from the banner */
	line-height: 1;
	transform-origin: center;
}

.Header a.site-banner:link,
.Header a.site-banner:visited,
.Header a.site-banner:hover,
.Header a.site-banner:active {
	color: #fff;
	text-decoration: none;
}

.Navigation {
	--nav-height: 30px;
	--nav-button-width: 150px;
	--nav-bar-gradient: linear-gradient(to bottom, #b4b4b4 0%, #7a7a7a 10%, #3e3e3e 20%, #1a1a1a 30%, #050505 60%, #000000 100%);
	--nav-hover-gradient: linear-gradient(to bottom, #d8d8d8 0%, #9a9a9a 8%, #5a5a5a 28%, #2a2a2a 62%, #0c0c0c 88%, #000000 100%);
	border: 1px solid #333333;
	min-height: var(--nav-height);
	background-color: #000;
	background-image: var(--nav-bar-gradient);
	position: relative;
	z-index: 20;
	overflow: visible;
}

.Content { padding-bottom: 12px; }
.BackLink { text-align: center; }

.CommonLinks {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	font-size: 14px;
	text-align: center;
	padding: 8px 10px;
}

.CommonLinks .hr-dim {
	margin: 0 auto;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 8px;
	column-gap: 0;
}

.footer-links a {
	padding: 0;
}

.footer-links a:link,
.footer-links a:visited,
.footer-links a:active {
	color: #fff;
	text-decoration: none;
}

.footer-links a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: #fff;
}

.footer-links a:not(:last-child)::after {
	content: "|";
	display: inline-block;
	margin: 0 0.75em;
	text-decoration: none;
}

.Footer {
	font-size: 12px;
	text-align: center;
	padding: 0 10px 10px;
}

#SectionTitle,
#Title {
	margin: 0 auto;
	text-align: center;
	min-height: 60px;
	padding: 6px 16px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#SectionTitle .beveled-text,
#Title .beveled-text {
	--lettering-stroke: 10px;
	font-size: 50px; /* page titles */
}

/* Thinner outer stroke for page titles' outer layer */
#SectionTitle .beveled-text::before,
#Title .beveled-text::before {
	-webkit-text-stroke: 6px #ffffff;
}

#SubTitle {
	font-size: 20px;
	font-weight: bold;
	padding: 0 20px 5px;
}

#SubTitleComment,
.heading-note {
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
}

#Paragraph {
	padding-left: 20px;
	padding-right: 20px;
}

#Intro {
	font-size: 16px;
	margin: 0 auto;
	padding: 0 16px 20px;
	text-align: center;
	max-width: 75%;
}

#Intro.page-narrow-intro {
	max-width: 720px;
	box-sizing: content-box;
}

#Quote { font-style: italic; }

h1 {
	font-size: 24px;
	font-weight: bold;
	border-bottom: 1px solid #FFFFFF;
}

h2 {
	border-bottom: 1px solid #333;
}

h1:focus { outline: none; }

.AnchorLink { text-decoration: none; }
.ImageLink { border: 0; max-width: 100%; height: auto; }

.info {
	clear: both;
	overflow: hidden;
	padding: 0 20px 10px;
}

.Question {
	color: #808080;
	width: 175px;
	vertical-align: top;
	padding: 0 8px 8px 0;
}

.Answer {
	vertical-align: top;
	padding: 0 0 8px;
}

.FavImage,
.EduImage {
	vertical-align: top;
	text-align: center;
	padding-left: 12px;
}

.FavImage { width: 130px; }
.EduImage { width: 250px; }

.FavImage img,
.EduImage img,
.info img {
	max-width: 100%;
	height: auto;
}

.Section { width: 100%; }
.EduTable { border: 1px solid #FFFFFF; width: 100%; }
.EduTableHeading { font-weight: bold; }
.EduTableDataGrade { text-align: center; width: 100px; }

.details-portrait {
	vertical-align: top;
	text-align: right;
	padding-left: 16px;
	width: 280px;
}
.details-portrait img { border: 1px solid #FFFFFF; max-width: 260px; height: auto; }

.home-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Or 1.2fr 0.8fr to keep the left column slightly wider */
	gap: 28px;
	padding: 0 28px 28px;
	align-items: stretch;
	box-sizing: border-box;
}

.home-blurb {
	min-width: 0;
}

.home-blurb p {
	margin: 0 0 1em;
	line-height: 1.5;
}

.home-kicker {
	margin: 0 0 18px;
}

.home-kicker .lettering {
	--lettering-stroke: 7px;
	font-size: 34px;
	white-space: normal;
}

.home-kicker .beveled-text {
	--lettering-stroke: 10px;
	font-size: 50px; /* same as page titles */
	white-space: normal;
}

.home-signature {
	font-style: italic;
	margin-left: 1em!important;
}

.home-portrait {
	container-type: size;
	display: grid;
	place-items: center; /* Ensures the circular image is centered in its column */
	justify-content: center; /* Keeps horizontal positioning balanced */
	min-width: 0;
	min-height: 0;
	margin-top: 8px;
}

.home-portrait-circle {
	/* aim for 40% of the site width (capped to site max) but remain fluid using viewport fallback */
	width: clamp(120px, 40vw, calc(var(--site-max-width) * 0.4));
	aspect-ratio: 1 / 1;
	max-width: calc(var(--site-max-width) * 0.4);
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #333;
	box-sizing: border-box;
}

@supports (width: 1cqmin) {
	.home-portrait-circle {
		width: 100cqmin;
		height: 100cqmin;
		max-width: none;
	}
}

.home-portrait-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.home-social {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
	.home-social a img {
		width: 48px;
		height: 48px;
		display: block;
	}

#FeedbackForm,
.site-form {
	margin: 0 auto;
	max-width: 720px;
	padding: 0 16px 28px;
	box-sizing: border-box;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.form-field label {
	font-weight: bold;
	font-size: 14px;
}

.form-field .form-control,
.site-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]),
.site-form textarea,
input.form-control,
textarea.form-control {
	width: 100%;
	background-color: #111;
	color: #fff;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 10px 12px;
	font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	max-width: 100%;
	box-sizing: border-box;
	color-scheme: dark;
	appearance: none;
	-webkit-appearance: none;
}

.form-field:focus-within .form-control,
.form-field .form-control:focus,
.site-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):focus,
.site-form textarea:focus,
input.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input:not([type]):focus,
textarea:focus {
	outline: none;
	border: 1px solid #666 !important;
	background-color: #151515;
}

.form-actions {
	display: flex;
	justify-content: flex-end;
}

.validation-message {
	color: #ff8888;
	font-size: 14px;
}

.form-success {
	color: #cde8cd;
}

input[type="text"],
input[type="email"],
input[type="search"],
input:not([type]),
textarea,
select {
	background-color: #111;
	color: #fff;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 10px 12px;
	font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
	font-size: 16px;
	max-width: 100%;
	box-sizing: border-box;
	color-scheme: dark;
}

input[type="submit"],
button.site-button,
a.site-button {
	background: #222;
	color: #fff;
	border: 1px solid #666;
	padding: 6px 14px;
	font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
}

input[type="submit"]:hover,
button.site-button:hover,
a.site-button:hover { background: #333; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover {
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	transition: background-color 99999s ease-out 0s;
	-webkit-box-shadow: 0 0 0 1000px #111 inset !important;
	box-shadow: 0 0 0 1000px #111 inset !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
.form-field:focus-within input:-webkit-autofill,
.form-field:focus-within textarea:-webkit-autofill {
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	border: 1px solid #666 !important;
	transition: background-color 99999s ease-out 0s;
	-webkit-box-shadow: 0 0 0 1000px #151515 inset !important;
	box-shadow: 0 0 0 1000px #151515 inset !important;
}

.form-error { color: #ff8888; margin: 8px 0; }

/* Tabs (tabber look) */
.tabber-nav {
	margin: 1em 0 0;
	padding: 3px 8px 0;
	border-bottom: 1px solid #333333;
	font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

	.tabber-nav a,
	.tabber-nav button {
		padding: 3px 0.5em;
		border: 1px solid #333333;
		border-bottom: none;
		background: #000;
		color: #fff;
		text-decoration: none;
		font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}

.tabber-nav a:hover,
.tabber-nav button:hover { background: #333; text-decoration: none; }

.tabber-nav a.active,
.tabber-nav button.active {
	background: #fff;
	color: #000;
	border-bottom: 1px solid #333;
}

.tabber-nav a.active:hover,
.tabber-nav button.active:hover { color: #000; background: #fff; text-decoration: none; }

.tab-panel { padding: 8px 0; }

/* Navigation */
.menu {
	padding: 0;
	margin: 0;
	list-style: none;
	height: var(--nav-height);
	display: flex;
	position: relative;
}

@media (min-width: 801px) {
	.menu {
		justify-content: center;
	}

	.menu ul.sub {
		width: max-content;
		min-width: 100%;
	}

	.menu ul.sub li a {
		white-space: nowrap;
	}
}

.menu li.top {
	width: var(--nav-button-width);
	position: relative;
}

	.menu li a.top_link {
		display: flex;
		align-items: center;
		justify-content: center;
		height: var(--nav-height);
		line-height: 1;
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
		font-size: 22px;
		font-weight: bold;
		-webkit-text-stroke: 1.4px #000;
		paint-order: stroke fill;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}

.menu li a.top_link:hover { text-decoration: none; }

	.menu li.top:hover > a.top_link {
		background-image: var(--nav-hover-gradient);
	}

.menu ul.sub {
	display: none;
	position: absolute;
	left: 0;
	top: var(--nav-height);
	background: #000;
	padding: 3px 0;
	border: 1px solid #333;
	z-index: 200;
}

.menu li.top:hover > ul.sub { display: block; }

.menu ul.sub li { display: block; }

	.menu ul.sub li a {
		display: block;
		font-family: Calibri, Carlito, Lato, 'Segoe UI', sans-serif;
		font-size: 16px;
		font-weight: normal;
		line-height: 22px;
		padding: 0 8px;
		color: #fff;
		text-align: left;
		text-decoration: none;
	}

.menu ul.sub li a:hover { background: #333; text-decoration: none; }

.nav-toggle {
	display: none;
	background: transparent;
	color: #fff;
	border: 0;
	height: var(--nav-height);
	width: 44px;
	padding: 0 10px;
	cursor: pointer;
	align-items: center;
	justify-content: flex-end;
}

.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
	height: 18px;
}

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 1px;
	box-shadow: 0 0 0 1px #000;
	transition: transform 0.15s ease, opacity 0.15s ease;
	transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-mobile-navbar {
	display: none;
	--bs-navbar-padding-x: 0;
	--bs-navbar-padding-y: 0.5rem;
	--bs-navbar-color: #fff;
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-padding-y: 0;
	--bs-navbar-brand-margin-end: 0;
	--bs-navbar-toggler-padding-y: 0.25rem;
	--bs-navbar-toggler-padding-x: 0.75rem;
	--bs-navbar-toggler-font-size: 1.25rem;
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
	--bs-navbar-toggler-border-radius: 0.375rem;
	--bs-navbar-toggler-focus-width: 0.25rem;
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	position: relative;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
	background-color: #000;
	border-bottom: 1px solid #333;
	box-sizing: border-box;
}

.site-mobile-navbar .container-fluid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 12px 0 0;
	box-sizing: border-box;
}

.site-mobile-navbar .navbar-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	padding-left: 16px;
	box-sizing: border-box;
}

.site-mobile-navbar .navbar-brand {
	padding-top: var(--bs-navbar-brand-padding-y);
	padding-bottom: var(--bs-navbar-brand-padding-y);
	margin-right: 0;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 40px;
	z-index: 2;
	line-height: 0;
}

.site-mobile-navbar .navbar-brand:link,
.site-mobile-navbar .navbar-brand:visited,
.site-mobile-navbar .navbar-brand:hover,
.site-mobile-navbar .navbar-brand:active {
	text-decoration: none;
	color: #fff;
}

.site-mobile-navbar .navbar-brand img {
	display: block;
	height: 40px;
	width: 40px;
	object-fit: contain;
}

.site-mobile-navbar .navbar-brand-title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

.site-mobile-navbar .navbar-brand-title:link,
.site-mobile-navbar .navbar-brand-title:visited,
.site-mobile-navbar .navbar-brand-title:hover,
.site-mobile-navbar .navbar-brand-title:active {
	text-decoration: none;
	color: inherit;
}

.site-mobile-navbar .navbar-brand-title .beveled-text {
	font-size: 42px;
	letter-spacing: 2px;
	line-height: 6;
	white-space: nowrap;
}

.site-mobile-navbar .navbar-brand-title .beveled-text::before,
.site-mobile-navbar .navbar-brand-title .beveled-text::after {
	white-space: nowrap;
}

.site-mobile-navbar .navbar-brand-title .beveled-text::before {
	-webkit-text-stroke: 6px #ffffff;
}

.site-mobile-navbar .navbar-brand-title .beveled-text::after {
	-webkit-text-stroke: 5px #111111;
}

.site-mobile-navbar .navbar-toggler {
	padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
	margin-left: auto;
	flex: 0 0 auto;
	z-index: 2;
	font-size: var(--bs-navbar-toggler-font-size);
	line-height: 1;
	color: #fff;
	background-color: transparent;
	border: 1px solid var(--bs-navbar-toggler-border-color);
	border-radius: var(--bs-navbar-toggler-border-radius);
	cursor: pointer;
}

.site-mobile-navbar .navbar-toggler:hover,
.site-mobile-navbar .navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
}

.site-mobile-navbar .navbar-toggler:focus {
	box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) rgba(255, 255, 255, 0.25);
}

.site-mobile-navbar .navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-image: var(--bs-navbar-toggler-icon-bg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.site-mobile-navbar .navbar-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	width: 100%;
	padding-left: 16px;
	box-sizing: border-box;
	background: #000;
}

.site-mobile-navbar .collapse:not(.show) {
	display: none;
}

.site-mobile-navbar .navbar-nav {
	display: flex;
	flex-direction: column;
	padding: 8px 0 12px;
	margin: 0;
	list-style: none;
	max-height: min(70vh, calc(100dvh - 56px));
	overflow-x: hidden;
	overflow-y: auto;
}

.site-mobile-navbar .navbar-nav .nav-link {
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 4px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
	box-shadow: inset 0 -1px 0 #2a2a2a;
	box-sizing: border-box;
}

.site-mobile-navbar .navbar-nav .nav-link:hover,
.site-mobile-navbar .navbar-nav .nav-link.active {
	background: #1c1c1c;
	color: #fff;
	text-decoration: none;
}

.site-mobile-navbar .navbar-sub {
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
}

.site-mobile-navbar .navbar-sub .nav-link {
	padding-left: 28px;
	font-size: 15px;
	font-weight: 400;
	color: #c8c8c8;
}

@media (max-width: 479px) {
	.site-mobile-navbar .navbar-brand {
		display: none;
	}

	.site-mobile-navbar .navbar-brand-title {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		z-index: 1;
	}

	.site-mobile-navbar .navbar-brand-title .beveled-text {
		line-height: 1;
	}
}

/* Photos */
.photos-page {
	padding: 4px 24px 28px;
	box-sizing: border-box;
}

.photos-page .blog-empty {
	padding: 24px 0;
}

.photos-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	position: relative;
	z-index: 4;
}

.photos-search {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 16px;
	background: #111;
	border: 1px solid #333;
	border-radius: 4px;
	box-sizing: border-box;
}

.photos-search:focus-within {
	border-color: #666;
	background: #151515;
}

.photos-search-icon {
	width: 20px;
	height: 20px;
	color: #9a9a9a;
	flex: 0 0 auto;
}

.photos-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	max-width: none;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	outline: none;
	box-shadow: none;
	border-radius: 0;
}

.photos-search input[type="search"]::placeholder {
	color: #8a8a8a;
}

.photos-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.photos-filter {
	position: relative;
}

.photos-filter > button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #333;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
}

.photos-filter > button:hover,
.photos-filter.open > button,
.photos-filter.active > button {
	border-color: #666;
	background: #151515;
	text-decoration: none;
}

.photos-filter > button svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.photos-chevron {
	width: 16px;
	height: 16px;
	opacity: 0.7;
}

.photos-filter-count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #555;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

.photos-filter-backdrop {
	position: fixed;
	inset: 0;
	z-index: 3;
}

.photos-filter-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 220px;
	max-height: min(360px, 70vh);
	overflow: auto;
	padding: 4px 0;
	background: #111;
	border: 1px solid #333;
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
	box-sizing: border-box;
	z-index: 5;
}

.photos-date-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px 14px;
	width: 250px;
	min-width: 0;
	max-width: min(250px, calc(100vw - 24px));
	overflow-x: hidden;
	box-sizing: border-box;
}

.photos-date-menu label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: #bbb;
	min-width: 0;
}

.photos-date-menu select,
.photos-date-menu input[type="date"] {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	background: #111;
	color: #fff;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 14px;
	box-sizing: border-box;
}

.photos-date-menu input[type="date"]::-webkit-datetime-edit {
	min-width: 0;
	max-width: 100%;
}

.photos-date-or {
	margin: 2px 0 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #888;
}

.photos-clear {
	align-self: flex-start;
	background: transparent;
	border: 0;
	color: #ccc;
	font-family: inherit;
	font-size: 13px;
	padding: 4px 0;
	cursor: pointer;
}

.photos-clear:hover {
	color: #fff;
	text-decoration: underline;
}

.photos-filter-empty {
	margin: 0;
	padding: 8px 14px;
	color: #888;
	font-size: 14px;
}

.photos-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}

.photos-check:hover {
	background: #151515;
}

.photos-check input {
	margin: 0;
	accent-color: #888;
}

.photos-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 14px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.photos-menu-item:hover,
.photos-menu-item.selected {
	background: #151515;
	text-decoration: none;
}

.photos-check-slot {
	width: 1.1em;
	flex: 0 0 auto;
	color: #ddd;
}

.photos-album-grid,
.photos-photo-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px 16px;
}

.photos-album-card,
.photos-photo-card {
	display: block;
	min-width: 0;
	color: #fff;
	text-decoration: none;
}

.photos-album-card:hover,
.photos-photo-card:hover {
	text-decoration: none;
}

.photos-album-thumb,
.photos-photo-thumb {
	aspect-ratio: 1 / 1;
	border: 1px solid #333;
	border-radius: 16px;
	box-sizing: border-box;
	overflow: hidden;
	background: #1a1a1a;
}

.photos-album-thumb img,
.photos-photo-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photos-album-name {
	margin: 10px 2px 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.photos-album-date {
	margin: 0 2px;
	font-size: 13px;
	color: #9a9a9a;
}

.photos-album-head {
	margin: 0 0 18px;
}

.photos-album-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 16px;
}

.photos-album-copy {
	flex: 0 0 auto;
	width: min(100%, max-content);
	max-width: 100%;
	min-width: 0;
}

.photos-album-head h1 {
	margin: 0 0 6px;
	font-size: 26px;
	border: 0;
}

.photos-album-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	color: #9a9a9a;
	font-size: 14px;
	line-height: 1.4;
}

.photos-album-owner {
	flex: 0 0 auto;
	width: auto;
}

.photos-page .photos-album-heading .photos-filter-menu {
	right: auto;
	left: 0;
	transform: none;
}

.photos-album-heading .photos-filter.menu-align-end .photos-filter-menu {
	left: auto;
	right: 0;
}

@media (min-width: 801px) {
	.photos-page .photos-album-heading .photos-filter-menu {
		left: auto;
		right: 0;
	}
}

.photos-album-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.photos-album-meta-item svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.photos-album-desc {
	margin: 8px 0 0;
}

html.photos-overlay-open,
html.photos-overlay-open body {
	overflow: hidden;
}

html:has(.photos-overlay) .Header,
html:has(.photos-overlay) .Navigation,
html:has(.photos-overlay) .site-mobile-navbar,
html.photos-overlay-open .Header,
html.photos-overlay-open .Navigation,
html.photos-overlay-open .site-mobile-navbar {
	z-index: 0;
}

html:has(.photos-overlay) .site-column,
html:has(.photos-overlay) .Content,
html.photos-overlay-open .site-column,
html.photos-overlay-open .Content {
	position: relative;
	z-index: 2000;
}

.photos-overlay {
	position: fixed;
	inset: 0;
	z-index: 2100;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	padding: 20px 72px 16px;
	background: rgba(0, 0, 0, 0.84);
	box-sizing: border-box;
	outline: none;
	overflow: hidden;
}

.photos-overlay-stage {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.photos-overlay-media {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	background: transparent;
}

video.photos-overlay-media {
	background: #111;
}

.photos-overlay-caption {
	flex: 0 0 auto;
	min-height: 1.4em;
	margin: 12px 0 0;
	color: #ddd;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	text-shadow: 0 1px 2px #000, 0 0 8px #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.photos-overlay-missing {
	margin: 0;
	padding: 0 16px;
	color: #ccc;
	text-align: center;
}

.photos-overlay-btn {
	position: absolute;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #333;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.photos-overlay-btn:hover:not(.is-disabled) {
	border-color: #666;
	background: #151515;
	text-decoration: none;
}

.photos-overlay-btn.is-disabled {
	color: #555;
	border-color: #2a2a2a;
	background: #0c0c0c;
	cursor: default;
	opacity: 0.45;
	pointer-events: auto;
}

.photos-overlay-media.is-clickable {
	cursor: pointer;
}

.photos-overlay-btn svg {
	width: 22px;
	height: 22px;
}

.photos-overlay-close {
	top: 16px;
	right: 16px;
}

.photos-overlay-prev {
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
}

.photos-overlay-next {
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

span#DateGreyOut, .date-grey { color: #AAAAAA; }

/* Links */
#LinksSection {
	padding: 0 20px 16px;
	text-align: center;
}

#LinksBanner {
	margin: 0 auto 16px;
	text-align: center;
	max-width: 468px;
}

#LinksBanner img { max-width: 100%; height: auto; }

/* Guestbook */
.gbook-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 20px;
}

.gbook_commentbox {
	width: 100%;
	margin: 0 0 16px;
	border: 1px solid #333;
	border-radius: 4px;
	background-color: #0d0d0d;
	background-image: linear-gradient(to bottom, #b4b4b4 0%, #7a7a7a 10%, #3e3e3e 20%, #1a1a1a 32%, #0d0d0d 55%);
	background-repeat: no-repeat;
	background-size: 100% 10px;
	display: grid;
	grid-template-columns: minmax(140px, 28%) minmax(0, 1fr);
	gap: 18px;
	padding: 18px 16px 14px;
	box-sizing: border-box;
}

.gbook_submitted,
.gbook_comments {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #aaa;
	margin: 0 0 8px;
	padding: 0 0 6px;
	border-bottom: 1px solid #333;
}

.gbook-name {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
}

.gbook-from {
	margin-top: 4px;
	color: #bbb;
	font-size: 14px;
	line-height: 1.4;
}

.gbook_comment {
	font-size: 15px;
	line-height: 1.5;
}

.gbook_added {
	margin-top: 12px;
	color: #888;
	font-size: 13px;
}

.calendar-frame {
	width: 100%;
	height: 600px;
	border: 1px solid #777;
	background: #fff;
}

.misc-launcher {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 12px;
	max-width: 640px;
	margin: 0 auto;
	padding: 8px 28px 40px;
	box-sizing: border-box;
}

.misc-app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	color: #fff;
}

.misc-app:link,
.misc-app:visited,
.misc-app:active,
.misc-app:hover {
	color: #fff;
	text-decoration: none;
}

.misc-app-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 20px;
	box-sizing: border-box;
	background-color: #000;
	background-image: linear-gradient(to bottom, #b4b4b4 0%, #7a7a7a 10%, #3e3e3e 20%, #1a1a1a 30%, #050505 60%, #000000 100%);
	border: 1px solid #333333;
	transition: transform 0.12s ease, border-color 0.12s ease, background-image 0.12s ease;
}

.misc-app:hover .misc-app-icon,
.misc-app:focus-visible .misc-app-icon {
	background-image: linear-gradient(to bottom, #d8d8d8 0%, #9a9a9a 8%, #5a5a5a 28%, #2a2a2a 62%, #0c0c0c 88%, #000000 100%);
	border-color: #666;
	transform: translateY(-1px);
}

.misc-app-icon svg {
	width: 48px;
	height: 48px;
	fill: #fff;
}

.misc-app-name {
	font-size: 14px;
	line-height: 1.25;
	text-align: center;
	max-width: 92px;
	overflow-wrap: anywhere;
}

.misc-page {
	padding: 0 20px 28px;
}

.misc-page h1 {
	margin: 0 0 6px;
}

.misc-page p {
	margin: 0 0 10px;
	line-height: 1.45;
}

.misc-page-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
}

.misc-page-head h1 {
	border-bottom: 0;
	margin: 0;
}

.misc-page-lead {
	color: #aaa;
	font-size: 16px;
	margin: 0 !important;
}

.misc-page-head .misc-app-icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 16px;
}

.misc-page-head .misc-app-icon svg {
	width: 38px;
	height: 38px;
}

.about-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.about-thumbs img { max-width: 100%; height: auto; }

.page-narrow {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 16px 28px;
}

.about-page,
.credits-page,
.terms-page {
	line-height: 1.45;
}

.about-page.page-narrow,
.credits-page.page-narrow,
.terms-page.page-narrow {
	padding-bottom: 28px;
}

.about-page h1 {
	line-height: 1.3;
}

.guestbook-page #gbook_header {
	max-width: none;
}

.guestbook-page .gbook_commentbox {
	width: 100%;
}

.guestbook-page .site-form {
	max-width: none;
	padding: 0 0 8px;
}

.page-narrow.site-form {
	padding-bottom: 28px;
}

.about-page h1,
.credits-page h1,
.changelog-release h1 {
	margin: 18px 0 10px;
}

.about-page p.changelog-kicker,
.changelog-release .changelog-kicker {
	margin: 22px 0 0;
}

.about-page p.changelog-kicker + h1,
.changelog-release .changelog-kicker + h1 {
	margin-top: 2px;
}

.about-page p,
.credits-page p,
.terms-page p {
	margin: 0 0 12px;
}

.about-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 8px 0 22px;
}

.about-gallery-item {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid #333;
	background: #111;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: pointer;
}

.about-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(0, 0, 0, 0.88);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 16px 24px;
	outline: none;
	cursor: default;
}

.lightbox-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
}

.lightbox-stage img {
	display: block;
	max-width: min(960px, 92vw);
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid #333;
	background: #111;
}

.lightbox-caption {
	margin: 0;
	color: #ddd;
	text-align: center;
}

.lightbox-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #111;
	color: #fff;
	border: 1px solid #666;
	padding: 6px 12px;
	cursor: pointer;
	font: inherit;
}

.changelog-kicker {
	margin: 0;
	color: #888;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.changelog-release {
	margin: 0 0 22px;
	padding: 0 0 16px;
	border-bottom: 1px solid #333;
}

.changelog-release:first-child .changelog-kicker {
	margin-top: 0;
}

.changelog-release ul {
	margin: 0;
	padding-left: 22px;
	line-height: 1.5;
}

.changelog-years {
	list-style: none;
	margin: 0;
	padding: 0;
}

.changelog-years li {
	margin: 0 0 6px;
}

.changelog-years a.active {
	font-weight: bold;
	text-decoration: underline;
}

.donate-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 16px 28px;
	align-items: center;
}

.donate-copy {
	min-width: 0;
	line-height: 1.5;
}

.donate-form {
	margin: 22px 0 0;
}

.donate-button,
a.blog-rss,
.blog-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #333;
	border-radius: 4px;
	background-color: #000;
	background-image: linear-gradient(to bottom, #b4b4b4 0%, #7a7a7a 10%, #3e3e3e 20%, #1a1a1a 30%, #050505 60%, #000000 100%);
	color: #fff;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	appearance: none;
}

.donate-button {
	min-height: 48px;
	padding: 12px 22px;
	font-size: 18px;
}

a.blog-rss {
	width: 100%;
	margin-top: auto;
	min-height: 0;
	padding: 6px 14px;
	font-size: 15px;
}

.blog-page-link {
	min-height: 0;
	padding: 4px 12px;
	font-size: 14px;
}

.donate-button:hover,
a.blog-rss:hover,
.blog-page-link:hover {
	background-image: linear-gradient(to bottom, #d8d8d8 0%, #9a9a9a 8%, #5a5a5a 28%, #2a2a2a 62%, #0c0c0c 88%, #000000 100%);
	color: #fff;
	text-decoration: none;
}

a.donate-button:link,
a.donate-button:visited,
a.donate-button:active,
a.blog-rss:link,
a.blog-rss:visited,
a.blog-rss:active,
a.blog-page-link:link,
a.blog-page-link:visited,
a.blog-page-link:active {
	color: #fff;
	text-decoration: none;
}

.donate-button:disabled {
	opacity: 0.65;
	cursor: default;
}

.donate-pint img {
	display: block;
	max-width: 180px;
	height: auto;
}

.hr-dim { border: 0; border-top: 1px solid #333; width: 60%; margin: 8px auto; }
.hr-full { border: 0; border-top: 1px solid #333; width: 100%; }

.blazor-error-ui,
#blazor-error-ui {
	background: #b32121;
	color: #fff;
	padding: 8px 16px;
	display: none;
}

#blazor-error-ui.shown,
.blazor-error-ui.shown { display: block; }

/* Single class text effect */
.beveled-text {
	position: relative;
	font-size: 90px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #ffffff;
	z-index: 1;
}

	/* Outer Layer: Crisp White Outer Outline */
	.beveled-text::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		color: #ffffff;
		-webkit-text-stroke: 7px #ffffff;
		filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.7));
		z-index: -2;
		display: block;
		width: 100%;
		white-space: normal;
		line-height: inherit;
		pointer-events: none;
		user-select: none;
	}

	/* Middle Layer: Equal-Distance Dark/Black Bevel Outline */
	.beveled-text::after {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		color: #111111;
		-webkit-text-stroke: 5px #111111;
		z-index: -1;
		display: block;
		width: 100%;
		white-space: normal;
		line-height: inherit;
		pointer-events: none;
		user-select: none;
	}

@media (max-width: 1100px) {
	.photos-album-grid,
	.photos-photo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.home-grid {
		grid-template-columns: 1fr;
	}

	.home-portrait {
		width: min(280px, 70vw);
		height: min(280px, 70vw);
		justify-self: center;
	}

	.home-kicker .lettering { font-size: 26px; --lettering-stroke: 6px; }
	.home-kicker .beveled-text { font-size: 32px; --lettering-stroke: 8px; }
	#Intro { max-width: 92%; }
}

@media (max-width: 800px) {
	.Header {
		display: none;
	}

	.Navigation {
		display: none;
	}

	.site-mobile-navbar {
		display: flex;
	}

	#Title, #SectionTitle { min-height: 48px; }
	#Title .beveled-text,
	#SectionTitle .beveled-text {
		font-size: 32px;
		--lettering-stroke: 0;
		-webkit-text-stroke: 0;
		text-shadow: none;
		color: #fff;
		filter: none;
	}

	#Title .beveled-text::before,
	#Title .beveled-text::after,
	#SectionTitle .beveled-text::before,
	#SectionTitle .beveled-text::after {
		display: none;
	}

	.site-column,
	.Content,
	.CommonLinks,
	.Footer {
		position: relative;
		z-index: 1;
	}

	.nav-toggle {
		display: flex;
		width: 100%;
		background: transparent;
	}

	.menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		height: auto !important;
		max-height: min(70vh, calc(100dvh - var(--nav-height) - 24px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #161616;
		border: 1px solid #333;
		border-top: 0;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7);
	}

	.menu.open {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
	}

	.menu li.top { width: 100%; }

	.menu li a.top_link {
		justify-content: flex-start;
		text-align: left;
		height: auto;
		min-height: 38px;
		padding: 8px 16px;
		font-size: 18px;
		font-weight: 600;
		line-height: 22px;
		background: none;
		background-image: none;
		-webkit-text-stroke: 0;
		text-shadow: none;
		border-bottom: 0;
		box-shadow: inset 0 -1px 0 #2a2a2a;
		box-sizing: border-box;
	}

	.menu li.top:hover > a.top_link,
	.menu li a.top_link:hover {
		background: #1c1c1c;
		background-image: none;
		text-decoration: none;
	}

	.menu ul.sub {
		position: static;
		display: block;
		width: 100%;
		min-width: 0;
		border: 0;
		padding: 0 0 6px;
		background: transparent;
	}

	.menu ul.sub li a {
		display: flex;
		align-items: center;
		min-height: 38px;
		padding: 8px 16px 8px 40px;
		text-align: left;
		font-size: 15px;
		font-weight: 400;
		color: #c8c8c8;
		line-height: 22px;
		white-space: normal;
		box-sizing: border-box;
	}

	.menu ul.sub li a:hover {
		background: #1c1c1c;
		color: #fff;
	}
	.photos-page {
		padding-left: 16px;
		padding-right: 16px;
	}

	.photos-page .photos-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.photos-page .photos-search {
		width: 100%;
	}

	.photos-page .photos-filters {
		justify-content: center;
		width: 100%;
	}

	.photos-page .photos-album-heading .photos-filters {
		justify-content: flex-start;
		width: auto;
	}

	.photos-filter-menu {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.photos-page .photos-album-heading .photos-filter-menu {
		right: auto;
		left: 0;
		transform: none;
	}

	.photos-album-heading .photos-filter.menu-align-end .photos-filter-menu {
		left: auto;
		right: 0;
	}

	.photos-album-grid,
	.photos-photo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.photos-overlay {
		padding: 16px 56px 12px;
	}

	.photos-overlay-btn {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}

	.photos-overlay-close {
		top: 10px;
		right: 10px;
	}

	.photos-overlay-prev {
		left: 8px;
	}

	.photos-overlay-next {
		right: 8px;
	}
	.details-portrait { display: block; text-align: center; width: auto; padding: 12px 0 0; }
	.FavImage, .EduImage { display: none; }
	.gbook_commentbox { grid-template-columns: 1fr; }
	.gbook-toolbar {
		justify-content: center;
	}
	.donate-grid {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.donate-form {
		display: flex;
		justify-content: center;
	}

	.about-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-page,
	.credits-page,
	.terms-page {
		padding-left: 16px;
		padding-right: 16px;
	}
	.CommonLinks { font-size: 13px; }

	/* Reduce bevel and glow when text scales smaller */
	.beveled-text::before {
		-webkit-text-stroke: 6px #ffffff;
		filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.6));
	}

	.beveled-text::after {
		-webkit-text-stroke: 4px #111111;
	}
}

@media (max-width: 520px) {
	.photos-album-grid,
	.photos-photo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body { font-size: 15px; }
	.Header { min-height: 64px; }
	.site-banner { font-size: clamp(14px, 6.5vw, 34px); padding: 6px 8px; }
	.site-banner .beveled-text { --lettering-stroke: 7px; white-space: normal; }
	#Title, #SectionTitle { min-height: 40px; }
	#Title .beveled-text,
	#SectionTitle .beveled-text {
		font-size: 24px;
		--lettering-stroke: 0;
	}

	.home-kicker .beveled-text { font-size: 24px; --lettering-stroke: 6px; }
	/* If the kicker wraps to multiple lines on narrow screens, remove the heavy beveled outline
	   to avoid visual overlap and clipping. Provide a plain fallback appearance. */
	.home-kicker .beveled-text::before,
	.home-kicker .beveled-text::after {
		display: none !important;
	}

	.home-kicker .beveled-text {
		/* fallback plain styling when outlines are hidden */
		-webkit-text-stroke: 0 !important;
		text-shadow: none !important;
		color: #fff;
	}
	/* noop: preserve region context - placeholder */
	.tabber-nav a, .tabber-nav button { font-size: 15px; }

	/* Further reduce bevel and glow for very small screens */
	.beveled-text::before {
		-webkit-text-stroke: 5px #ffffff;
		filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
	}

	.beveled-text::after {
		-webkit-text-stroke: 3px #111111;
	}
}

/* Facebook-style profile */
.Content:has(.profile) {
	padding-bottom: 0;
}

.profile {
	--profile-text: #e4e6eb;
	--profile-muted: #b0b3b8;
	--profile-line: #3e4042;
	--profile-hover: #3a3b3c;
	--profile-active: #333;
	--profile-link: #2e89ff;
	--profile-icon: #3a3b3c;
	color: var(--profile-text);
	font-family: 'Segoe UI', Helvetica, Arial, Lato, sans-serif;
	background: #000000;
	border-top: 1px solid var(--profile-line);
}

.profile a:link,
.profile a:visited,
.profile a:active {
	color: var(--profile-link);
	text-decoration: none;
}

.profile a:hover {
	color: var(--profile-link);
	text-decoration: underline;
}

.profile-header {
	display: flex;
	align-items: center;
	gap: 56px;
	padding: 28px 32px 24px;
}

.profile-avatar {
	width: 168px;
	height: 168px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 18%;
	flex-shrink: 0;
	background: #111;
}

.profile-identity {
	min-width: 0;
}

.profile-name {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.profile-tagline {
	margin: 0 0 10px;
	color: var(--profile-muted);
	font-size: 15px;
}

.profile-pins {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	color: var(--profile-muted);
	font-size: 14px;
}

.profile-pins span,
.profile-pins a,
.profile-inline-pins span,
.profile-inline-pins a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.profile-pins .profile-glyph,
.profile-inline-pins .profile-glyph {
	width: 16px;
	height: 16px;
}

.profile-body {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	border-top: 1px solid var(--profile-line);
	min-height: 520px;
}

.profile-nav {
	border-right: 1px solid var(--profile-line);
	padding: 16px 10px 28px;
}

.profile-pills,
.profile-pills-measure {
	display: none;
}

.profile-nav h2 {
	margin: 0 12px 10px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.profile-nav a:link,
.profile-nav a:visited,
.profile-nav a:active {
	display: block;
	padding: 10px 12px;
	margin: 1px 0;
	border-radius: 4px;
	color: var(--profile-text);
	font-size: 15px;
	text-decoration: none;
}

.profile-nav a:hover {
	background: var(--profile-hover);
	color: var(--profile-text);
	text-decoration: none;
}

.profile-nav a.active:link,
.profile-nav a.active:visited,
.profile-nav a.active:hover {
	background: var(--profile-active);
	color: #fff;
	text-decoration: none;
}

.profile-main {
	padding: 18px 28px 40px;
}

.profile-main section {
	margin: 0 0 22px;
}

.profile-main h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	color: var(--profile-text);
}

.profile-travel-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 4px 0 16px;
	border: 1px solid #333;
	background: #111;
	overflow: hidden;
	box-sizing: border-box;
}

.profile-travel-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.profile-inline-pins {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	color: var(--profile-text);
	font-size: 15px;
	padding: 4px 0 8px;
}

.profile-inline-pins .dot {
	color: var(--profile-muted);
}

.profile-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
}

.profile-row-media {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.profile-row-media img,
.profile-icon-wrap,
.profile-initials {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.profile-row-media img {
	object-fit: cover;
	background: #fff;
}

.profile-icon-wrap {
	background: var(--profile-icon);
	color: var(--profile-text);
}

.profile-initials {
	background: #5b6b7a;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.profile-glyph {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: inherit;
}

.profile-glyph svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}

.profile-row-body {
	min-width: 0;
	padding-top: 1px;
}

.profile-row-title {
	font-size: 15px;
	line-height: 1.35;
	color: var(--profile-text);
}

.profile-row-sub,
.profile-row-meta {
	color: var(--profile-muted);
	font-size: 13px;
	line-height: 1.4;
	margin-top: 2px;
}

.profile-row-meta {
	max-width: 62ch;
}

@media (max-width: 800px) {
	.profile-header {
		flex-direction: column;
		text-align: center;
		padding: 24px 16px 18px;
		gap: 16px;
	}

	.profile-avatar {
		width: 148px;
		height: 148px;
	}

	.profile-pins {
		justify-content: center;
	}

	.profile-body {
		grid-template-columns: 1fr;
		min-height: 0;
		overflow: visible;
	}

	.profile-nav-full {
		display: none;
	}

	.profile-nav {
		position: relative;
		z-index: 6;
		border-right: 0;
		border-bottom: 1px solid var(--profile-line);
		padding: 0 8px;
		overflow: visible;
	}

	.profile-nav h2 {
		display: none;
	}

	.profile-pills {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		overflow: visible;
		min-height: 52px;
	}

	.profile-pills-measure {
		position: absolute;
		left: -9999px;
		top: 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0;
		visibility: hidden;
		pointer-events: none;
		white-space: nowrap;
	}

	.profile .profile-nav .profile-pills > a:link,
	.profile .profile-nav .profile-pills > a:visited,
	.profile .profile-nav .profile-pills > a:active,
	.profile .profile-nav .profile-pills-measure [data-item] {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		padding: 0 16px;
		margin: 0;
		border-radius: 0;
		min-height: 52px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		color: var(--profile-muted);
		background: transparent;
		white-space: nowrap;
	}

	.profile .profile-nav .profile-pills > a:hover,
	.profile .profile-nav .profile-pills > a:focus-visible,
	.profile-more-btn:hover,
	.profile-more-btn:focus-visible,
	.profile-more-btn[aria-expanded="true"] {
		background: transparent;
		color: var(--profile-text);
		text-decoration: none;
	}

	.profile .profile-nav .profile-pills > a:hover::before,
	.profile .profile-nav .profile-pills > a:focus-visible::before,
	.profile-more-btn:hover::before,
	.profile-more-btn:focus-visible::before,
	.profile-more-btn[aria-expanded="true"]::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 6px 2px 8px;
		border-radius: 8px;
		background: var(--profile-hover);
		pointer-events: none;
	}

	.profile .profile-nav .profile-pills > a.active:link,
	.profile .profile-nav .profile-pills > a.active:visited,
	.profile .profile-nav .profile-pills > a.active:hover,
	.profile .profile-nav .profile-pills > a.active:focus-visible,
	.profile-more-btn.active,
	.profile-more-btn.active:hover,
	.profile-more-btn.active:focus-visible {
		background: transparent;
		color: #fff;
		box-shadow: none;
		text-decoration: none;
	}

	.profile .profile-nav .profile-pills > a.active::after,
	.profile-more-btn.active::after {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;
		background: #888;
		border-radius: 3px 3px 0 0;
	}

	.profile-more {
		position: relative;
		flex-shrink: 0;
		display: flex;
		align-items: stretch;
		margin: 0;
		z-index: 5;
	}

	.profile-more-btn {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		min-height: 52px;
		background: transparent;
		color: var(--profile-muted);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		white-space: nowrap;
	}

	.profile-more-caret {
		display: inline-flex;
		width: 16px;
		height: 16px;
	}

	.profile-more-caret svg {
		width: 100%;
		height: 100%;
		fill: currentColor;
		display: block;
	}

	.profile-more-backdrop {
		position: fixed;
		inset: 0;
		z-index: 40;
	}

	.profile-more-menu {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		z-index: 41;
		min-width: 220px;
		max-height: min(360px, calc(100dvh - 120px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 0;
		border-radius: 8px;
		background: #242526;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	}

	.profile .profile-nav .profile-more-menu a:link,
	.profile .profile-nav .profile-more-menu a:visited,
	.profile .profile-nav .profile-more-menu a:active {
		display: block;
		padding: 12px 16px;
		margin: 0;
		border-radius: 0;
		background: transparent;
		color: var(--profile-text);
		font-size: 15px;
		font-weight: 500;
		white-space: nowrap;
		text-decoration: none;
	}

	.profile .profile-nav .profile-more-menu a:hover {
		background: var(--profile-hover);
		color: #fff;
		text-decoration: none;
	}

	.profile .profile-nav .profile-more-menu a.active:link,
	.profile .profile-nav .profile-more-menu a.active:visited,
	.profile .profile-nav .profile-more-menu a.active:hover {
		background: var(--profile-active);
		color: #fff;
		text-decoration: none;
	}

	.profile-main {
		padding: 16px 16px 32px;
		border-top: 0;
	}

	.profile-inline-pins {
		justify-content: center;
		text-align: left;
	}

	.profile-row-meta {
		max-width: none;
	}
}

/* Blog */
.blog-search-fields {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.blog-search-fields input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	max-width: none;
}

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
	gap: 16px 28px;
	padding: 0 20px 28px;
	align-items: start;
}

.blog-layout > .blog-rss-panel {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.blog-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	position: relative;
	z-index: 4;
	align-self: center;
}

.blog-toolbar .photos-search {
	flex: 1 1 140px;
	min-width: 120px;
}

.blog-toolbar .photos-filters {
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

.blog-preview {
	margin: 0 0 22px;
	padding: 0 0 16px;
	border-bottom: 1px solid #333;
}

.blog-preview-inner {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.blog-thumb {
	flex: 0 0 110px;
	width: 110px;
	height: 110px;
	overflow: hidden;
	border: 1px solid #444;
	background: #111;
}

.blog-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-preview-body {
	flex: 1;
	min-width: 0;
}

.blog-cover {
	margin: 12px 0 16px;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid #333;
	background: #111;
	position: relative;
}

.blog-cover img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.blog-preview h2,
.blog-post h1 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: bold;
}

.blog-preview h2 {
	border-bottom: 1px solid #333;
}

.blog-post h1 {
	border-bottom: 1px solid #fff;
}

.blog-preview-body h2 a:hover {
	text-decoration: none;
}

.blog-excerpt,
.blog-post p {
	margin: 0 0 10px;
	line-height: 1.45;
}

.blog-meta {
	color: #aaa;
	font-size: 14px;
	margin: 0 0 8px;
}

.blog-post-byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 8px;
}

.blog-post-byline .blog-meta {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.blog-post-byline .blog-tags {
	margin: 0;
	justify-content: flex-end;
	flex: 0 1 auto;
}

.blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.blog-tag {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #666;
	background: #111;
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	font-family: inherit;
}

a.blog-tag:link,
a.blog-tag:visited,
a.blog-tag:active {
	color: #fff;
	text-decoration: none;
}

.blog-tag:hover,
a.blog-tag:hover,
.blog-tag.active {
	background: #333;
	text-decoration: none;
}

.blog-pager {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 8px 0 4px;
	font-size: 15px;
}

.blog-pager > :first-child { justify-self: start; }
.blog-pager > :last-child { justify-self: end; }

.blog-pager-disabled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	border: 1px solid #333;
	border-radius: 4px;
	background-color: #000;
	background-image: linear-gradient(to bottom, #b4b4b4 0%, #7a7a7a 10%, #3e3e3e 20%, #1a1a1a 30%, #050505 60%, #000000 100%);
	color: #888;
	font-size: 14px;
	font-weight: bold;
	opacity: 0.45;
	cursor: default;
}

.blog-post-nav {
	margin-top: 28px;
	padding-top: 12px;
	border-top: 1px solid #333;
}

.blog-next {
	text-align: right;
}

.blog-crumb {
	color: #aaa;
	font-size: 14px;
	margin: 0 0 10px;
}

.blog-empty {
	padding: 8px 0 24px;
}

.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.blog-archive,
.blog-rss-panel,
.blog-search-panel {
	border: 1px solid #333;
	background: #0a0a0a;
	padding: 12px 16px 16px 16px;
	box-sizing: border-box;
	overflow: hidden;
}

.blog-archive h2,
.blog-rss-panel h2,
.blog-search-panel h2 {
	margin: 0 0 10px;
	font-size: 18px;
	border-bottom: 1px solid #333;
}

.blog-archive details {
	margin: 2px 0;
}

.blog-archive summary {
	cursor: pointer;
	font-weight: bold;
	padding: 3px 0 3px 1.2em;
	list-style: none;
	position: relative;
}

.blog-archive summary::-webkit-details-marker {
	display: none;
}

.blog-archive summary::marker {
	content: none;
}

.blog-archive summary::before {
	content: "▶";
	position: absolute;
	left: 0;
	top: 0.35em;
	font-size: 0.65em;
	line-height: 1;
}

.blog-archive details[open] > summary::before {
	content: "▼";
}

.blog-archive .blog-month {
	margin-left: 1.15em;
}

.blog-archive .blog-month summary {
	font-weight: normal;
	color: #ddd;
}

.blog-archive ul {
	margin: 2px 0 8px;
	padding: 0 0 0 2.4em;
	list-style: disc;
	list-style-position: outside;
}

.blog-archive li {
	margin: 3px 0;
}

.blog-archive a.active {
	font-weight: bold;
	text-decoration: underline;
}

.projects-grid {
	--project-photo-height: 211px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 0 20px 28px;
	align-items: stretch;
}

.projects-grid .card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #0a0a0a;
	border: 1px solid #333;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	box-sizing: border-box;
}

.projects-grid a.card:link,
.projects-grid a.card:visited,
.projects-grid a.card:active {
	color: #fff;
	text-decoration: none;
}

.projects-grid a.card:hover {
	border-color: #666;
	text-decoration: none;
	background: #111;
}

.projects-grid .card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid #333;
	background: #111;
}

.projects-grid .card-media-blur {
	display: none;
}

.projects-grid .card-img-top {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.projects-grid .card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 16px;
	flex: 1 1 auto;
}

.projects-grid .card-title {
	margin: 0;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #333;
	padding-bottom: 6px;
	text-decoration: none;
}

.projects-grid .card-text {
	margin: 0;
	line-height: 1.45;
	color: #ddd;
}

.project-page {
	padding: 0 20px 28px;
}

.project-page h1 {
	margin: 0 0 10px;
}

.project-page p {
	margin: 0 0 10px;
	line-height: 1.45;
}

.project-lead {
	color: #aaa;
	font-size: 16px;
}

.project-cover {
	margin: 0 0 16px;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 326px;
	overflow: hidden;
	border: 1px solid #333;
	background: #111;
	position: relative;
}

.project-cover img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.project-head {
	margin: 0 0 12px;
}

.project-head h1 {
	margin: 0 0 6px;
}

.project-head .project-lead {
	margin: 0;
}

.project-block {
	margin: 0 0 28px;
}

.project-block > h2 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #bbb;
	border: 0;
}

.project-status {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
}

.project-meta {
	display: grid;
	gap: 0;
	margin: 8px 0 0;
}

.project-meta > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #222;
}

.project-meta dt {
	color: #888;
	font-weight: 400;
}

.project-meta dd {
	margin: 0;
	text-align: right;
}

.project-log {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid #333;
}

.project-log li {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 16px;
	position: relative;
	padding: 0 0 18px 18px;
}

.project-log li::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #888;
}

.project-log time {
	color: #888;
	font-size: 13px;
	line-height: 1.4;
}

.project-log h3 {
	margin: 0 0 4px;
	font-size: 16px;
	border: 0;
}

.project-log p {
	margin: 0;
	color: #ccc;
}

.project-kit-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.project-kit-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #0a0a0a;
	border: 1px solid #333;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

.project-kit-card:link,
.project-kit-card:visited,
.project-kit-card:active,
.project-kit-card:hover {
	color: #fff;
	text-decoration: none;
}

.project-kit-card:hover {
	border-color: #666;
	background: #111;
}

.project-kit-image {
	aspect-ratio: 16 / 9;
	background: #111;
	border-bottom: 1px solid #333;
	overflow: hidden;
}

.project-kit-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.project-kit-body {
	padding: 10px 12px 12px;
}

.project-kit-body h3 {
	margin: 0 0 4px;
	font-size: 16px;
	border: 0;
}

.project-kit-body p {
	margin: 0 0 4px;
}

.project-jobs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.project-jobs li {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid #333;
}

.project-jobs li.done {
	opacity: 0.65;
}

.project-job-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
}

.project-job-top h3 {
	margin: 0;
	font-size: 16px;
	border: 0;
}

.project-job-status {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #888;
}

.project-job-status.doing {
	color: #fff;
}

.project-job-status.done {
	color: #666;
}

.project-kit-detail {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.project-kit-detail-image {
	border: 1px solid #333;
	background: #111;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.project-kit-detail-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.project-kit-detail-body h2 {
	margin: 0 0 6px;
	font-size: 26px;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
}

.project-kit-detail-body h3 {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #bbb;
	border: 0;
}

.project-kit-role {
	margin: 0 0 4px;
}

.project-page .about-gallery {
	margin: 0;
}

.project-page .blog-preview:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Film Log */
.film-log-nav,
.project-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0 0 22px;
	padding: 0 0 10px;
	border-bottom: 1px solid #333;
	font-size: 15px;
}

.film-log-nav a:link,
.film-log-nav a:visited,
.film-log-nav a:active,
.project-nav a:link,
.project-nav a:visited,
.project-nav a:active {
	color: #aaa;
	text-decoration: none;
	padding: 4px 0;
}

.film-log-nav a:hover,
.project-nav a:hover {
	color: #fff;
	text-decoration: none;
}

.film-log-nav a.active,
.project-nav a.active {
	color: #fff;
	box-shadow: inset 0 -2px 0 #fff;
}

.film-log-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
	gap: 28px;
	align-items: start;
}

.film-log-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.film-log-heading-row h2,
.film-log-block h2,
.film-log-panel h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #bbb;
	border: 0;
}

.film-log-heading-row a {
	font-size: 13px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.film-log-block {
	margin: 0 0 28px;
}

.tier-list-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 8px;
}

.tier-list-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #0a0a0a;
	border: 1px solid #333;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	box-sizing: border-box;
}

.tier-list-card:link,
.tier-list-card:visited,
.tier-list-card:active,
.tier-list-card:hover {
	color: #fff;
	text-decoration: none;
}

.tier-list-card:hover {
	border-color: #666;
	background: #111;
}

.tier-list-card-board {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #111;
	background: #101010;
}

.tier-list-card-row {
	display: flex;
	min-height: 36px;
	border-bottom: 1px solid #111;
}

.tier-list-card-row:last-child {
	border-bottom: 0;
}

.tier-list-card-label {
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111;
	font-size: 13px;
	font-weight: 700;
}

.tier-list-card-items {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	background: #161616;
}

.tier-list-card-items img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	display: block;
}

.tier-list-card-body {
	padding: 12px 14px 14px;
}

.tier-list-card-body h2 {
	margin: 0 0 4px;
	font-size: 18px;
	border-bottom: 0;
}

.tier-list-card-body p {
	margin: 0;
	color: #aaa;
	font-size: 14px;
}

.tier-board {
	width: 100%;
	border: 1px solid #111;
	background: #101010;
}

.tier-board-row {
	display: flex;
	min-height: 80px;
	border-bottom: 1px solid #000;
}

.tier-board-row:last-child {
	border-bottom: 0;
}

.tier-board-label {
	flex: 0 0 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.tier-board-items {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	min-width: 0;
	background: #161616;
}

.tier-board-item {
	position: relative;
	width: 80px;
	height: 80px;
	flex: 0 0 auto;
	cursor: default;
	background: transparent;
}

.tier-items-bg-white .tier-board-item,
.tier-items-bg-white .tier-list-card-items img {
	background: #fff;
}

.tier-items-bg-black .tier-board-item,
.tier-items-bg-black .tier-list-card-items img {
	background: #000;
}

.tier-items-bg-transparent .tier-board-item,
.tier-items-bg-transparent .tier-list-card-items img {
	background: transparent;
}

.tier-board-item::after {
	content: attr(data-name);
	position: absolute;
	left: 50%;
	top: calc(100% + 6px);
	transform: translateX(-50%);
	padding: 4px 8px;
	background: #000;
	border: 1px solid #555;
	color: #fff;
	font-size: 12px;
	line-height: 1.2;
	white-space: normal;
	max-width: 220px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	z-index: 5;
}

.tier-board-item:hover,
.tier-board-item:focus-visible {
	z-index: 6;
}

.tier-board-item:hover::after,
.tier-board-item:focus-visible::after {
	opacity: 1;
}

.tier-lists .photos-toolbar,
.top-tens .photos-toolbar {
	margin: 0 0 18px;
}

.tier-lists .photos-toolbar .photos-search,
.top-tens .photos-toolbar .photos-search {
	flex: 1 1 140px;
	min-width: 120px;
}

.top-ten-index {
	display: flex;
	flex-direction: column;
}

.top-ten-index-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid #333;
	color: #fff;
	text-decoration: none;
}

.top-ten-index-item:link,
.top-ten-index-item:visited,
.top-ten-index-item:active,
.top-ten-index-item:hover {
	color: #fff;
	text-decoration: none;
}

.top-ten-index-item:hover h2 {
	color: #ddd;
}

.top-ten-index-image {
	width: 96px;
	height: 96px;
	overflow: hidden;
	border: 1px solid #333;
	background: #111;
}

.top-ten-index-image img,
.top-ten-entry-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-ten-index-body h2,
.top-ten-entry-body h2 {
	margin: 0 0 6px;
	border-bottom: 1px solid #333;
	padding-bottom: 4px;
}

.top-ten-index-body h2 {
	font-size: 20px;
}

.top-ten-index-body p,
.top-ten-entry-body p {
	margin: 0;
	line-height: 1.45;
	color: #ccc;
}

.top-ten-index-body p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.top-ten-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
	gap: 28px;
	align-items: start;
}

.top-ten-entries {
	list-style: none;
	margin: 0;
	padding: 0;
}

.top-ten-entry {
	display: grid;
	grid-template-columns: 48px 88px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid #222;
}

.top-ten-rank {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: #888;
	text-align: center;
	padding-top: 6px;
}

.top-ten-entry-image {
	width: 88px;
	height: 88px;
	overflow: hidden;
	border: 1px solid #333;
	background: #111;
}

.top-ten-entry-body h2 {
	font-size: 18px;
}

.top-ten-panel {
	border: 1px solid #333;
	background: #0a0a0a;
	padding: 12px 16px 16px;
	margin: 0 0 16px;
	box-sizing: border-box;
}

.top-ten-panel h2 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #bbb;
	border-bottom: 1px solid #333;
	padding-bottom: 6px;
}

.top-ten-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.top-ten-panel li {
	margin: 0 0 8px;
}

.top-ten-panel a:link,
.top-ten-panel a:visited {
	color: #ddd;
	text-decoration: none;
}

.top-ten-panel a:hover {
	color: #fff;
	text-decoration: underline;
}

.tier-board-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.film-log-panel {
	border: 1px solid #333;
	background: #0a0a0a;
	padding: 12px 16px 16px;
	margin: 0 0 16px;
	box-sizing: border-box;
}

.quiz-toolbar {
	margin: 0 0 18px;
}

.quiz-toolbar .photos-search {
	flex: 1 1 140px;
	min-width: 120px;
}

.quiz-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.quiz-item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 12px;
	padding: 0 0 16px;
	margin: 0 0 16px;
	border-bottom: 1px solid #333;
}

.quiz-num {
	font-size: 22px;
	font-weight: 700;
	color: #666;
	line-height: 1.2;
}

.quiz-q,
.quiz-a {
	margin: 0 0 8px !important;
	line-height: 1.45;
}

.quiz-q span,
.quiz-a span {
	font-weight: 700;
	color: #888;
	margin-right: 6px;
}

.quiz-q {
	font-weight: 700;
	color: #fff;
}

.quiz-a {
	color: #ccc;
}

.quiz-when {
	margin: 0 !important;
	color: #888;
	font-size: 13px;
}

.quiz-submit h2 {
	margin: 0 0 10px;
}

.quiz-submit .film-muted {
	display: block;
	margin: 0 0 14px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	line-height: 1.4;
}

.quiz-submit .form-field {
	margin: 0 0 12px;
}

.quiz-submit .form-actions {
	justify-content: stretch;
	margin-top: 4px;
}

.quiz-submit .donate-button {
	width: 100%;
	min-height: 40px;
	padding: 8px 16px;
	font-size: 16px;
}

.film-fav-grid,
.film-poster-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.film-poster-grid {
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.film-poster {
	display: block;
	position: relative;
	aspect-ratio: 2 / 3;
	background: #111;
	border: 1px solid #333;
	overflow: hidden;
}

.film-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.film-poster-fallback,
.film-poster-caption {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 10px;
	font-size: 13px;
	line-height: 1.25;
	color: #fff;
}

.film-poster-tall {
	width: 100%;
}

.film-stars {
	display: inline-flex;
	gap: 1px;
	color: #ccc;
	letter-spacing: 0;
	line-height: 1;
}

.film-star {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	color: #444;
	font-size: 16px;
	line-height: 1;
}

.film-star::before {
	content: "★";
}

.film-star-fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	color: #fff;
	white-space: nowrap;
}

.film-review {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid #333;
}

.film-review:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.film-review h3 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
}

.film-review h3 a {
	color: #fff;
	text-decoration: none;
}

.film-review h3 a:hover {
	text-decoration: underline;
}

.film-year,
.film-muted {
	color: #888;
	font-weight: 400;
	font-size: 15px;
}

.film-review-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 8px;
	color: #aaa;
	font-size: 14px;
}

.film-review-quote {
	margin: 0;
	color: #ddd;
	font-style: italic;
	line-height: 1.45;
}

.film-year-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 120px;
}

.film-year-stat strong {
	font-size: 32px;
	line-height: 1;
}

.film-year-stat-label {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #888;
}

.film-diary-mini {
	list-style: none;
	margin: 0;
	padding: 0;
}

.film-diary-mini > li {
	margin: 0 0 10px;
}

.film-diary-month {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #888;
	margin: 0 0 4px;
}

.film-diary-mini ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.film-diary-mini li li {
	display: grid;
	grid-template-columns: 1.6em minmax(0, 1fr);
	gap: 8px;
	margin: 3px 0;
	font-size: 14px;
}

.film-diary-day {
	color: #888;
	text-align: right;
}

.film-rating-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 72px;
	margin-top: 8px;
}

.film-rating-bar {
	flex: 1 1 auto;
	min-width: 6px;
	background: #888;
	border-radius: 1px 1px 0 0;
}

.film-rating-axis {
	flex: 0 0 auto;
	font-size: 12px;
	color: #888;
	align-self: flex-end;
	padding-bottom: 0;
}

.film-search {
	margin: 0 0 16px;
}

.film-search input[type="search"] {
	width: 100%;
}

.film-diary-heading {
	margin: 22px 0 8px;
	font-size: 16px;
	border-bottom: 1px solid #333;
	padding-bottom: 4px;
}

.film-diary-wrap {
	overflow-x: auto;
}

.film-diary-table {
	width: 100%;
	min-width: 640px;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
}

.film-diary-col-date {
	width: 72px;
}

.film-diary-col-poster {
	width: 48px;
}

.film-diary-col-name {
	width: auto;
}

.film-diary-col-year {
	width: 92px;
}

.film-diary-col-rating {
	width: 108px;
}

.film-diary-col-review {
	width: 76px;
}

.film-diary-table th {
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #888;
	padding: 6px 8px 8px 0;
	border-bottom: 1px solid #333;
	font-weight: 700;
}

.film-diary-month-row th {
	padding: 22px 0 8px;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	border-bottom: 1px solid #333;
}

.film-diary-table tbody:first-child .film-diary-month-row th {
	padding-top: 0;
}

.film-diary-table td {
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid #222;
	vertical-align: middle;
}

.film-diary-table td:first-child,
.film-diary-table th:first-child,
.film-diary-table td:nth-child(4),
.film-diary-table td:nth-child(5),
.film-diary-table td:nth-child(6),
.film-diary-table th:nth-child(4),
.film-diary-table th:nth-child(5),
.film-diary-table th:nth-child(6) {
	white-space: nowrap;
}

.film-diary-poster {
	width: 48px;
}

.film-diary-poster .film-poster {
	width: 36px;
	aspect-ratio: 2 / 3;
}

.film-detail {
	display: grid;
	grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.film-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	color: #aaa;
	margin: 0 0 12px;
}

.film-detail-body h2 {
	margin: 0 0 8px;
	font-size: 28px;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
	border: 0;
}

.film-detail-body h3 {
	margin: 18px 0 8px;
	font-size: 16px;
}

.film-review-bare {
	grid-template-columns: 1fr;
	border-top: 1px solid #333;
	padding-top: 12px;
}

@media (max-width: 800px) {
	.blog-layout {
		grid-template-columns: 1fr;
	}

	.blog-layout > .blog-toolbar {
		order: 0;
	}

	.blog-layout > .blog-main {
		order: 1;
	}

	.blog-layout > .blog-rss-panel {
		order: 2;
	}

	.blog-sidebar {
		order: 3;
	}

	.blog-layout {
		padding-left: 16px;
		padding-right: 16px;
	}

	.blog-preview h2,
	.blog-post h1 {
		font-size: 20px;
	}

	.blog-thumb {
		flex-basis: 88px;
		width: 88px;
		height: 88px;
	}

	.blog-post-byline {
		flex-direction: column;
		align-items: flex-start;
	}

	.blog-post-byline .blog-tags {
		justify-content: flex-start;
	}

	.projects-grid {
		grid-template-columns: 1fr;
		padding-left: 16px;
		padding-right: 16px;
	}

	.projects-grid .card-media {
		aspect-ratio: auto;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.projects-grid .card-media-blur {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		filter: blur(22px);
		transform: scale(1.14);
		pointer-events: none;
	}

	.projects-grid .card-img-top {
		position: relative;
		inset: auto;
		width: min(100%, calc(var(--project-photo-height) * 16 / 9));
		height: auto;
		max-height: var(--project-photo-height);
		aspect-ratio: 16 / 9;
		object-fit: cover;
		z-index: 1;
	}

	.project-page,
	.misc-page {
		padding-left: 16px;
		padding-right: 16px;
	}

	.project-kit-grid,
	.project-kit-detail {
		grid-template-columns: 1fr;
	}

	.project-log li {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.project-page .about-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.misc-launcher {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-left: 16px;
		padding-right: 16px;
		gap: 22px 8px;
	}

	.misc-app-icon {
		width: 60px;
		height: 60px;
		border-radius: 16px;
	}

	.misc-app-icon svg {
		width: 42px;
		height: 42px;
	}

	.misc-app-name {
		font-size: 13px;
		max-width: 76px;
	}

	.film-log-layout,
	.film-detail {
		grid-template-columns: 1fr;
	}

	.film-fav-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.film-diary-table {
		min-width: 640px;
	}

	.tier-list-index {
		grid-template-columns: 1fr;
	}

	.tier-board-label {
		flex-basis: 52px;
		font-size: 22px;
	}

	.tier-board-item {
		width: 64px;
		height: 64px;
	}

	.top-ten-layout {
		grid-template-columns: 1fr;
	}

	.top-ten-entry {
		grid-template-columns: 36px 72px minmax(0, 1fr);
		gap: 10px;
	}

	.top-ten-rank {
		font-size: 22px;
	}

	.top-ten-entry-image,
	.top-ten-index-image {
		width: 72px;
		height: 72px;
	}

	.top-ten-index-item {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.random-quiz .photos-toolbar,
	.tier-lists .photos-toolbar,
	.top-tens .photos-toolbar {
		flex-wrap: wrap;
	}

	.quiz-item {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 10px;
	}

	.quiz-num {
		font-size: 18px;
	}
}