@import url(fontawesome-all.min.css);

/*
	Ethereal by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Page */

	@-moz-keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-ms-keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-ms-viewport {
		width: device-width;
	}

	html {
		width: 100%;
		height: 100%;
	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: -moz-flex-start;
		-webkit-justify-content: -webkit-flex-start;
		-ms-justify-content: -ms-flex-start;
		justify-content: flex-start;
		-ms-overflow-style: scrollbar;
		width: 100%;
		height: 100%;
		min-height: 30rem;
		overflow: hidden;
	}

		body:before {
			-moz-animation: load-spinner 1s infinite linear;
			-webkit-animation: load-spinner 1s infinite linear;
			-ms-animation: load-spinner 1s infinite linear;
			animation: load-spinner 1s infinite linear;
			-moz-transition: opacity 0.25s ease;
			-webkit-transition: opacity 0.25s ease;
			-ms-transition: opacity 0.25s ease;
			transition: opacity 0.25s ease;
			-moz-transition-delay: 0s;
			-webkit-transition-delay: 0s;
			-ms-transition-delay: 0s;
			transition-delay: 0s;
			pointer-events: none;
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 4rem;
			height: 4rem;
			margin: -2rem 0 0 -2rem;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='96px' height='96px' viewBox='0 0 96 96' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: %232e2b37%3B stroke-width: 1.5px%3B %7D%3C/style%3E%3Cdefs%3E%3CclipPath id='corner'%3E%3Cpolygon points='0,0 48,0 48,48 96,48 96,96 0,96' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23corner)'%3E%3Ccircle cx='48' cy='48' r='32'/%3E%3C/g%3E%3C/svg%3E");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 4rem;
			opacity: 0;
		}

		body:after {
			pointer-events: none;
			content: '';
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			background-attachment: fixed;
			background-color: #e1e6e1;
			background-image: url("../../images/overlay.png"), url("../../images/test.png");
			background-repeat: repeat, repeat-x;
			background-size: 128px 128px, cover;
		}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

		body.is-preload:before {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			opacity: 0.25;
		}

	@media screen and (max-width: 736px) {

		html {
			height: auto;
		}

		body {
			height: auto;
			overflow-x: hidden;
			overflow-y: auto;
		}

	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

/* Typography */

	html {
		font-size: 18pt;
		font-size: 1vmax;
	}

		@media screen and (max-width: 1680px) {

			html {
				font-size: 12pt;
				font-size: 1.1vmax;
			}

		}

		@media screen and (max-width: 1280px) {

			html {
				font-size: 11pt;
				font-size: 1.5vmax;
			}

		}

	body, input, select, textarea {
		color: rgba(255, 255, 255, 0.75);
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 1rem;
		font-weight: 300;
		line-height: 1.65;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		color: white;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: yellow;
		}

	strong, b {
		color: rgba(255, 255, 255, 0.875);
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 1.5rem 0;
		color: #fff;
    font-weight: 700;
    text-align: justify;
	}

		body.is-ie p {
			width: 100%;
		}

	h1, h2, h3, h4, h5, h6 {
		color: rgba(255, 255, 255, 0.875);
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 700;
		line-height: 1.3;
		margin: 0 0 0.75rem 0;
		letter-spacing: -0.05em;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1.major, h2.major, h3.major {
		position: relative;
	}

		h1.major:after, h2.major:after, h3.major:after {
			content: '';
			position: absolute;
			left: 0;
			width: 3.5rem;
			height: 0.1rem;
			/* background-color: rgba(255, 255, 255, 0.25); */
		}

	h1 {
		font-size: 3rem;
		line-height: 1.2;
	}

	h1.majorblack {
		margin: 0 0 2.625rem 0;
		font-family: 'Amaranth', sans-serif;
		font-family: 'Dancing Script', cursive;
		color:#000;
		font-size:5em;
	}

	@media (max-width:600px){

	h1.majorblack {
		margin: 0 0 2.625rem 0;
		font-family: 'Amaranth', sans-serif;
		font-family: 'Dancing Script', cursive;
		color:#000;
		font-size:4em;
	}
	}
		h1.major {
			margin: 0 0 2.625rem 0;
			font-family: 'Amaranth', sans-serif;
			font-family: 'Dancing Script', cursive;
			color:#fff;
			font-size:5em;

		}

			h1.major:after {
				bottom: -1.325rem;
			}

	h2 {
		font-size: 1.75rem;
		line-height: 1.2;
	}

		h2.major {
			margin: 0 0 1.9875rem 0;
			margin-left: 4.5em;
		}

			h2.major:after {
				bottom: -1.2rem;
			}

	h3 {
		font-size: 1.325rem;
	}

		h3.major {
			margin: 0 0 1.875rem 0;
		}

			h3.major:after {
				bottom: -0.75rem;
			}

	h4 {
		font-size: 1rem;
	}

	h5 {
		font-size: 0.9rem;
	}

	h6 {
		font-size: 0.7rem;
	}

	sub {
		font-size: 0.8rem;
		position: relative;
		top: 0.5rem;
	}

	sup {
		font-size: 0.8rem;
		position: relative;
		top: -0.5rem;
	}

	blockquote {
		border-left: solid 0.25rem rgba(255, 255, 255, 0.25);
		font-style: italic;
		margin: 0 0 1.5rem 0;
		padding: 0.375rem 0 0.375rem 1.5rem;
	}

	code {
		background: rgba(255, 255, 255, 0.075);
		border-radius: 0.25rem;
		font-family: "Courier New", monospace;
		font-size: 0.8rem;
		margin: 0 0.25rem;
		padding: 0.25rem 0.65rem;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.8rem;
		margin: 0 0 1.5rem 0;
		white-space: pre-wrap;
	}

		pre code {
			display: block;
			line-height: 1.625;
			padding: 1rem 1.5rem;
			overflow-x: auto;
			margin: 0;
		}

	hr {
		border: 0;
		border-bottom: solid 2px rgba(255, 255, 255, 0.25);
		margin: 1.875rem 0;
	}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

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

	@media screen and (max-width: 736px) {

		html {
			font-size: 12pt;
		}

		h1 {
			font-size: 2.25rem;
			line-height: 1.2;
		}

			h1.major {
				margin: 0 0 2.625rem 0;
			}

				h1.major:after {
					bottom: -1.325rem;
				}

		h2 {
			font-size: 1.5rem;
			line-height: 1.2;
		}

			h2.major {
				margin: 0 0 1.9875rem 0;
			}

				h2.major:after {
					bottom: -1.2rem;
				}

		h3 {
			font-size: 1rem;
		}

			h3.major {
				margin: 0 0 1.875rem 0;
			}

				h3.major:after {
					bottom: -0.75rem;
				}

		h4 {
			font-size: 1rem;
		}

		h5 {
			font-size: 0.9rem;
		}

		h6 {
			font-size: 0.7rem;
		}

		h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
			display: none;
		}

	}

	@media screen and (max-width: 360px) {

		html {
			font-size: 11pt;
		}

	}

/* Form */

	form {
		margin: 0 0 1.5rem 0;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3rem);
			margin: -1.5rem 0 1.5rem -1.5rem;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5rem 0 0 1.5rem;
				width: calc(100% - 1.5rem);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75rem);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5rem);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375rem);
				}

		@media screen and (max-width: 736px) {

			form > .fields {
				width: calc(100% + 2.25rem);
				margin: -1.125rem 0 1.5rem -1.125rem;
			}

				form > .fields > .field {
					padding: 1.125rem 0 0 1.125rem;
					width: calc(100% - 1.125rem);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.125rem);
					}

					form > .fields > .field.third {
						width: calc(100% - 1.125rem);
					}

					form > .fields > .field.quarter {
						width: calc(100% - 1.125rem);
					}

		}

	label {
		color: rgba(255, 255, 255, 0.875);
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.8rem;
		font-weight: 700;
		margin: 0 0 0.4875rem 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: transparent;
		border: solid 2px rgba(255, 255, 255, 0.25);
		border-radius: 0.25rem;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 0.75rem;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			border-color: #ffe4b4;
		}

	option {
		background-color: rgba(255, 255, 255, 0.875);
		color: #2e2b37;
	}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.25)' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.5rem;
		padding-right: 2.5rem;
		text-overflow: ellipsis;
	}

		select option {
			color: rgba(255, 255, 255, 0.875);
			background: #2e2b37;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.5rem;
	}

	textarea {
		padding: 0.75rem 1rem;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			position: relative;
			color: rgba(255, 255, 255, 0.75);
			cursor: pointer;
			display: inline-block;
			font-size: 1rem;
			font-weight: 300;
			margin-bottom: 0;
			padding-left: 2.5rem;
			padding-right: 1rem;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				content: '';
				display: inline-block;
				font-size: 0.8rem;
				position: absolute;
				top: 0;
				left: 0;
				width: 1.6875rem;
				height: 1.6875rem;
				line-height: 1.6875rem;
				background: rgba(255, 255, 255, 0.075);
				border: solid 1px rgba(255, 255, 255, 0.25);
				border-radius: 0.25rem;
				color: #2e2b37;
				text-align: center;
			}

				body.is-ie input[type="checkbox"] + label:before, body.is-ie
				input[type="radio"] + label:before {
					line-height: 1.5;
				}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			content: '\f00c';
			background: rgba(255, 255, 255, 0.875);
			border-color: rgba(255, 255, 255, 0.875);
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: #ffe4b4;
			box-shadow: 0 0 0 1px #ffe4b4;
		}

		input[type="checkbox"]:focus:checked + label:before,
		input[type="radio"]:focus:checked + label:before {
			background: #ffe4b4;
		}

		input[type="checkbox"].color1 + label:before,
		input[type="radio"].color1 + label:before {
			color: #726193;
		}

		input[type="checkbox"].color2 + label:before,
		input[type="radio"].color2 + label:before {
			color: #e37b7c;
		}

		input[type="checkbox"].color3 + label:before,
		input[type="radio"].color3 + label:before {
			color: #ffe4b4;
		}

		input[type="checkbox"].color4 + label:before,
		input[type="radio"].color4 + label:before {
			color: #353865;
		}

	input[type="checkbox"] + label:before {
		border-radius: 0.25rem;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

/* Icon */

	.icon {
		text-decoration: none;
		position: relative;
		border-bottom: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Image */

	.image {
		display: inline-block;
		position: relative;
		border: 0;
	}

		.image.filtered:after {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
			background-size: 128px 128px, auto;
			pointer-events: none;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 1;
			z-index: 1;
		}

		.image.filtered.tinted:after {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)), linear-gradient(0deg, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125));
			background-size: 128px 128px, auto, auto;
		}

		.image[data-position] img {
			-moz-object-fit: cover;
			-webkit-object-fit: cover;
			-ms-object-fit: cover;
			object-fit: cover;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.image[data-position="top left"] img {
			-moz-object-position: top left;
			-webkit-object-position: top left;
			-ms-object-position: top left;
			object-position: top left;
		}

		.image[data-position="top"] img {
			-moz-object-position: top;
			-webkit-object-position: top;
			-ms-object-position: top;
			object-position: top;
		}

		.image[data-position="top right"] img {
			-moz-object-position: top right;
			-webkit-object-position: top right;
			-ms-object-position: top right;
			object-position: top right;
		}

		.image[data-position="right"] img {
			-moz-object-position: right;
			-webkit-object-position: right;
			-ms-object-position: right;
			object-position: right;
		}

		.image[data-position="bottom right"] img {
			-moz-object-position: bottom right;
			-webkit-object-position: bottom right;
			-ms-object-position: bottom right;
			object-position: bottom right;
		}

		.image[data-position="bottom"] img {
			-moz-object-position: bottom;
			-webkit-object-position: bottom;
			-ms-object-position: bottom;
			object-position: bottom;
		}

		.image[data-position="bottom left"] img {
			-moz-object-position: bottom left;
			-webkit-object-position: bottom left;
			-ms-object-position: bottom left;
			object-position: bottom left;
		}

		.image[data-position="left"] img {
			-moz-object-position: left;
			-webkit-object-position: left;
			-ms-object-position: left;
			object-position: left;
		}

		.image[data-position="center"] img {
			-moz-object-position: center;
			-webkit-object-position: center;
			-ms-object-position: center;
			object-position: center;
		}

		.image[data-position="25% 25%"] img {
			-moz-object-position: 25% 25%;
			-webkit-object-position: 25% 25%;
			-ms-object-position: 25% 25%;
			object-position: 25% 25%;
		}

		.image[data-position="75% 25%"] img {
			-moz-object-position: 75% 25%;
			-webkit-object-position: 75% 25%;
			-ms-object-position: 75% 25%;
			object-position: 75% 25%;
		}

		.image[data-position="75% 75%"] img {
			-moz-object-position: 75% 75%;
			-webkit-object-position: 75% 75%;
			-ms-object-position: 75% 75%;
			object-position: 75% 75%;
		}

		.image[data-position="25% 75%"] img {
			-moz-object-position: 25% 75%;
			-webkit-object-position: 25% 75%;
			-ms-object-position: 25% 75%;
			object-position: 25% 75%;
		}

		.image img {
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5rem 1rem 0;
			top: 0.25rem;
		}

		.image.right {
			float: right;
			padding: 0 0 1rem 1.5rem;
			top: 0.25rem;
		}

		.image.fit {
			display: block;
			margin: 0 0 1.5rem 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 2.25rem 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 1.5rem 0;
		padding-left: 1.25rem;
	}

		ol li {
			padding-left: 0.25rem;
		}

	ul {
		list-style: disc;
		margin: 0 0 1.5rem 0;
		padding-left: 1rem;
	}

		ul li {
			padding-left: 0.5rem;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px rgba(255, 255, 255, 0.25);
				padding: 0.5rem 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 1.5rem 0;
	}

		dl dt {
			display: block;
			font-weight: 400;
			margin: 0 0 0.75rem 0;
		}

		dl dd {
			margin-left: 1.5rem;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
    display: flex;
    cursor: default;
    list-style: none;
    margin-left: -6em;
    padding-left: 0;
    margin-right: 1em;
    margin-top: 1em;
    z-index: 999;
    position: relative;
	}

		ul.actions li {
			padding: 0 0 0 0.75rem;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 0.975rem 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 0.75rem);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1rem 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li .icon:before {
				font-size: 1.25em;
			}

/* Grid Icons */

	ul.grid-icons {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		list-style: none;
		margin: 0 0 1.5rem 0;
		padding-left: 0;
	}

		ul.grid-icons .icon {
			display: block;
			position: relative;
			width: 100%;
			text-align: center;
		}

			ul.grid-icons .icon:before {
				display: block;
				width: 6rem;
				height: 6rem;
				line-height: 6rem;
				border-radius: 6rem;
				box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
				font-size: 2.5rem;
				margin: 0 auto;
				text-align: center;
			}

				body.is-ie ul.grid-icons .icon:before {
					line-height: 2.375;
				}

		ul.grid-icons > li {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
			margin: 1.5rem 0 0 1.5rem;
			padding-left: 0;
		}

		ul.grid-icons.connected > li:before {
			content: '';
			display: block;
			position: absolute;
			width: 1.5rem;
			height: 2px;
			top: 50%;
			left: -1.5rem;
			background-color: rgba(255, 255, 255, 0.25);
		}

		ul.grid-icons.connected > li:after {
			content: '';
			display: block;
			position: absolute;
			width: 2px;
			height: 1.5rem;
			top: -1.5rem;
			left: 50%;
			background-color: rgba(255, 255, 255, 0.25);
		}

		ul.grid-icons.two {
			width: 14rem;
		}

			ul.grid-icons.two > li:nth-child(-n + 2) {
				margin-top: 0;
			}

				ul.grid-icons.two > li:nth-child(-n + 2):after {
					display: none;
				}

			ul.grid-icons.two > li:nth-child(2n - 1) {
				margin-left: 0;
			}

				ul.grid-icons.two > li:nth-child(2n - 1):before {
					display: none;
				}

		ul.grid-icons.three {
			width: 21.5rem;
		}

			ul.grid-icons.three > li:nth-child(-n + 3) {
				margin-top: 0;
			}

				ul.grid-icons.three > li:nth-child(-n + 3):after {
					display: none;
				}

			ul.grid-icons.three > li:nth-child(3n - 2) {
				margin-left: 0;
			}

				ul.grid-icons.three > li:nth-child(3n - 2):before {
					display: none;
				}

		ul.grid-icons.four {
			width: 29rem;
		}

			ul.grid-icons.four > li:nth-child(-n + 4) {
				margin-top: 0;
			}

				ul.grid-icons.four > li:nth-child(-n + 4):after {
					display: none;
				}

			ul.grid-icons.four > li:nth-child(4n - 3) {
				margin-left: 0;
			}

				ul.grid-icons.four > li:nth-child(4n - 3):before {
					display: none;
				}

		@media screen and (max-width: 736px) {

			ul.grid-icons {
				-moz-justify-content: -moz-flex-start;
				-webkit-justify-content: -webkit-flex-start;
				-ms-justify-content: -ms-flex-start;
				justify-content: flex-start;
				width: 100% !important;
				margin: -1rem 0 1.5rem -1rem;
			}

				ul.grid-icons .icon:before {
					width: 4.5rem;
					height: 4.5rem;
					line-height: 4.5rem;
					font-size: 1.75rem;
				}

				ul.grid-icons > li {
					margin: 1rem 0 0 1rem !important;
				}

					ul.grid-icons > li:before {
						display: none !important;
					}

					ul.grid-icons > li:after {
						display: none !important;
					}

		}

/* Contact Icons */

	ul.contact-icons {
		list-style: none;
		padding-left: 0;
	}

		ul.contact-icons > li {
			margin: 1.25rem 0 0 0;
			padding-left: 0;
		}

			ul.contact-icons > li:before {
				display: inline-block;
				width: 2.25rem;
				height: 2.25rem;
				line-height: 2.25rem;
				border-radius: 2.25rem;
				background-color: white;
				color: #2e2b37;
				cursor: default;
				font-size: 1.125rem;
				margin-right: 1rem;
				text-align: center;
				vertical-align: middle;
			}

				body.is-ie ul.contact-icons > li:before {
					line-height: 2.125;
				}

			ul.contact-icons > li a {
				border-bottom: 0;
			}

		ul.contact-icons.color1 > li:before {
			color: #726193;
		}

		ul.contact-icons.color2 > li:before {
			color: #e37b7c;
		}

		ul.contact-icons.color3 > li:before {
			color: #ffe4b4;
		}

		ul.contact-icons.color4 > li:before {
			color: #353865;
		}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 1.5rem 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px rgba(255, 255, 255, 0.25);
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: rgba(255, 255, 255, 0.075);
			}

		table td {
			padding: 0.75rem 0.75rem;
		}

		table th {
			color: rgba(255, 255, 255, 0.875);
			font-size: 0.9rem;
			font-weight: 400;
			padding: 0 0.75rem 0.75rem 0.75rem;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px rgba(255, 255, 255, 0.25);
		}

		table tfoot {
			border-top: solid 2px rgba(255, 255, 255, 0.25);
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px rgba(255, 255, 255, 0.25);
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border: 0;
		border-radius: 0.25rem;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
		color: rgba(255, 255, 255, 0.875) !important;
		cursor: pointer;
		display: inline-block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.6rem;
		font-weight: 700;
		height: 2.75rem;
		letter-spacing: 0.15rem;
		line-height: 2.75rem;
		padding: 0 1.5rem 0 1.65rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			box-shadow: inset 0 0 0 2px #ffe4b4;
			color: #ffe4b4 !important;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(255, 228, 180, 0.125);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			display: inline-block;
			position: relative;
			top: -0.075rem;
			vertical-align: middle;
			font-size: 0.8rem;
			margin: 0 0.375rem 0 -0.325rem;
		}

		input[type="submit"].icon.circle,
		input[type="reset"].icon.circle,
		input[type="button"].icon.circle,
		button.icon.circle,
		.button.icon.circle {
			position: relative;
			width: 3.125rem;
			height: 3.125rem;
			line-height: 3.125rem;
			text-indent: 3.125rem;
			border-radius: 100%;
			overflow: hidden;
			padding: 0;
			letter-spacing: 0;
		}

			input[type="submit"].icon.circle:before,
			input[type="reset"].icon.circle:before,
			input[type="button"].icon.circle:before,
			button.icon.circle:before,
			.button.icon.circle:before {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: inherit;
				height: inherit;
				font-size: 1.25rem;
				line-height: inherit;
				margin: 0;
				text-indent: 0;
			}

			input[type="submit"].icon.circle.fa-angle-left:before,
			input[type="reset"].icon.circle.fa-angle-left:before,
			input[type="button"].icon.circle.fa-angle-left:before,
			button.icon.circle.fa-angle-left:before,
			.button.icon.circle.fa-angle-left:before {
				position: relative;
				left: -0.1rem;
				font-size: 1.75rem;
			}

			input[type="submit"].icon.circle.fa-angle-right:before,
			input[type="reset"].icon.circle.fa-angle-right:before,
			input[type="button"].icon.circle.fa-angle-right:before,
			button.icon.circle.fa-angle-right:before,
			.button.icon.circle.fa-angle-right:before {
				position: relative;
				left: 0.1rem;
				font-size: 1.75rem;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.4rem;
			height: 1.875rem;
			line-height: 1.875rem;
			padding: 0 1.25rem 0 1.4rem;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 0.8rem;
			height: 3.3125rem;
			line-height: 3.3125rem;
			padding: 0 2rem 0 2.15rem;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			/* background-color: white; */
			box-shadow: none;
			color: #2e2b37 !important;
		}

			input[type="submit"].primary.color1,
			input[type="reset"].primary.color1,
			input[type="button"].primary.color1,
			button.primary.color1,
			.button.primary.color1 {
				color: #726193 !important;
			}

			a.button.primary.color1.circle.icon.solid.fa-angle-right:hover {
				color: #fff !important;
		}

			input[type="submit"].primary.color2,
			input[type="reset"].primary.color2,
			input[type="button"].primary.color2,
			button.primary.color2,
			.button.primary.color2 {
				color: #e37b7c !important;
			}

			input[type="submit"].primary.color3,
			input[type="reset"].primary.color3,
			input[type="button"].primary.color3,
			button.primary.color3,
			.button.primary.color3 {
				color: #ffe4b4 !important;
			}

			input[type="submit"].primary.color4,
			input[type="reset"].primary.color4,
			input[type="button"].primary.color4,
			button.primary.color4,
			.button.primary.color4 {
				color: #353865 !important;
			}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
			  background-color: transparent; 
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			button.primary:active,
			.button.primary:active {
				background-color: #fdd997;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			cursor: default;
			opacity: 0.5;
		}

/* Gallery */

	@-moz-keyframes gallery-modal-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes gallery-modal-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-ms-keyframes gallery-modal-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes gallery-modal-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	.gallery {
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		height: 100%;
	}

		.gallery > * {
			width: 20rem;
			height: 100%;
		}

		.gallery .image {
			display: block;
			position: relative;
			border-bottom: 0;
			overflow: hidden;
		}

			.gallery .image img {
				-moz-transition: -moz-transform 0.2s ease-in-out;
				-webkit-transition: -webkit-transform 0.2s ease-in-out;
				-ms-transition: -ms-transform 0.2s ease-in-out;
				transition: transform 0.2s ease-in-out;
			}

			.gallery .image:after {
				-moz-transition: opacity 0.2s ease-in-out;
				-webkit-transition: opacity 0.2s ease-in-out;
				-ms-transition: opacity 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out;
			}

			.gallery .image:hover img {
				-moz-transform: scale(1.025);
				-webkit-transform: scale(1.025);
				-ms-transform: scale(1.025);
				transform: scale(1.025);
			}

			.gallery .image:hover:after {
				opacity: 0;
			}

		.gallery .group {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

			.gallery .group > * {
				height: 50%;
			}

		.gallery .modal {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			pointer-events: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-moz-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
			-webkit-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
			-ms-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
			transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(46, 43, 55, 0.875);
			opacity: 0;
			outline: 0;
			visibility: none;
			z-index: 0;
		}

			.gallery .modal:before {
				-moz-animation: gallery-modal-spinner 1s infinite linear;
				-webkit-animation: gallery-modal-spinner 1s infinite linear;
				-ms-animation: gallery-modal-spinner 1s infinite linear;
				animation: gallery-modal-spinner 1s infinite linear;
				-moz-transition: opacity 0.25s ease;
				-webkit-transition: opacity 0.25s ease;
				-ms-transition: opacity 0.25s ease;
				transition: opacity 0.25s ease;
				-moz-transition-delay: 0.5s;
				-webkit-transition-delay: 0.5s;
				-ms-transition-delay: 0.5s;
				transition-delay: 0.5s;
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				width: 4rem;
				height: 4rem;
				margin: -2rem 0 0 -2rem;
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='96px' height='96px' viewBox='0 0 96 96' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: rgba(255, 255, 255, 0.875)%3B stroke-width: 1.5px%3B %7D%3C/style%3E%3Cdefs%3E%3CclipPath id='corner'%3E%3Cpolygon points='0,0 48,0 48,48 96,48 96,96 0,96' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23corner)'%3E%3Ccircle cx='48' cy='48' r='32'/%3E%3C/g%3E%3C/svg%3E");
				background-position: center;
				background-repeat: no-repeat;
				background-size: 4rem;
				opacity: 0;
			}

			.gallery .modal:after {
				content: '';
				display: block;
				position: absolute;
				top: 0.5rem;
				right: 0.5rem;
				width: 4rem;
				height: 4rem;
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 64 64' zoomAndPan='disable'%3E%3Cstyle%3Eline %7Bstroke: rgba(255, 255, 255, 0.875)%3Bstroke-width: 1.5px%3B%7D%3C/style%3E%3Cline x1='20' y1='20' x2='44' y2='44' /%3E%3Cline x1='20' y1='44' x2='44' y2='20' /%3E%3C/svg%3E");
				background-position: center;
				background-repeat: no-repeat;
				background-size: 3rem;
				cursor: pointer;
			}

			.gallery .modal .inner {
				-moz-transform: translateY(0.75rem);
				-webkit-transform: translateY(0.75rem);
				-ms-transform: translateY(0.75rem);
				transform: translateY(0.75rem);
				-moz-transition: opacity 0.25s ease, -moz-transform 0.25s ease;
				-webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
				-ms-transition: opacity 0.25s ease, -ms-transform 0.25s ease;
				transition: opacity 0.25s ease, transform 0.25s ease;
				opacity: 0;
			}

				.gallery .modal .inner img {
					display: block;
					max-width: 90vw;
					max-height: 85vh;
					box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
				}

			.gallery .modal.visible {
				pointer-events: auto;
				opacity: 1;
				visibility: visible;
				z-index: 11000;
			}

				.gallery .modal.visible:before {
					opacity: 1;
				}

			.gallery .modal.loaded .inner {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
				-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
				-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
				transition: opacity 0.5s ease, transform 0.5s ease;
				opacity: 1;
			}

			.gallery .modal.loaded:before {
				-moz-transition-delay: 0s;
				-webkit-transition-delay: 0s;
				-ms-transition-delay: 0s;
				transition-delay: 0s;
				opacity: 0;
			}

	@media screen and (max-width: 980px) {

		.gallery .modal .inner img {
			max-width: 100vw;
		}

	}

	@media screen and (max-width: 736px) {

		.gallery {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
		}

			.gallery > * {
				height: auto;
				width: 100%;
			}

			.gallery .image {
				width: 100%;
				height: 40rem;
			}

			.gallery .group .span-0-25 {
				width: 8.33333%;
			}

			.gallery .group .span-0-5 {
				width: 16.66666%;
			}

			.gallery .group .span-0-75 {
				width: 25.0%;
			}

			.gallery .group .span-1 {
				width: 33.33333%;
			}

			.gallery .group .span-1-25 {
				width: 41.66666%;
			}

			.gallery .group .span-1-5 {
				width: 49.99999%;
			}

			.gallery .group .span-1-75 {
				width: 58.33333%;
			}

			.gallery .group .span-2 {
				width: 66.66666%;
			}

			.gallery .group .span-2-25 {
				width: 74.99999%;
			}

			.gallery .group .span-2-5 {
				width: 83.33332%;
			}

			.gallery .group .span-2-75 {
				width: 91.66666%;
			}

			.gallery .group .span-3 {
				width: 99.99999%;
			}

			.gallery .group .span-3-25 {
				width: 108.33332%;
			}

			.gallery .group .span-3-5 {
				width: 116.66665%;
			}

			.gallery .group .span-3-75 {
				width: 124.99999%;
			}

			.gallery .group .span-4 {
				width: 133.33332%;
			}

			.gallery .group .span-4-25 {
				width: 141.66665%;
			}

			.gallery .group .span-4-5 {
				width: 149.99998%;
			}

			.gallery .group .span-4-75 {
				width: 158.33332%;
			}

			.gallery .group .span-5 {
				width: 166.66665%;
			}

			.gallery .group .span-5-25 {
				width: 174.99998%;
			}

			.gallery .group .span-5-5 {
				width: 183.33331%;
			}

			.gallery .group .span-5-75 {
				width: 191.66665%;
			}

			.gallery .group .span-6 {
				width: 199.99998%;
			}

			.gallery .group .span-6-25 {
				width: 208.33331%;
			}

			.gallery .group .span-6-5 {
				width: 216.66664%;
			}

			.gallery .group .span-6-75 {
				width: 224.99998%;
			}

			.gallery .group .span-7 {
				width: 233.33331%;
			}

			.gallery .group .span-7-25 {
				width: 241.66664%;
			}

			.gallery .group .span-7-5 {
				width: 249.99997%;
			}

			.gallery .group .span-7-75 {
				width: 258.33331%;
			}

			.gallery .group .span-8 {
				width: 266.66664%;
			}

			.gallery .group .span-8-25 {
				width: 274.99997%;
			}

			.gallery .group .span-8-5 {
				width: 283.3333%;
			}

			.gallery .group .span-8-75 {
				width: 291.66664%;
			}

			.gallery .group .span-9 {
				width: 299.99997%;
			}

			.gallery .group .span-9-25 {
				width: 308.3333%;
			}

			.gallery .group .span-9-5 {
				width: 316.66663%;
			}

			.gallery .group .span-9-75 {
				width: 324.99997%;
			}

			.gallery .group .span-10 {
				width: 333.3333%;
			}

			.gallery .group .image {
				height: 20rem;
			}

	}

	@media screen and (max-width: 480px) {

		.gallery .image {
			height: 30rem;
		}

		.gallery .group .image {
			height: 12.5rem;
		}

	}

/* Panel */

	.panel {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-grow: 0;
		-webkit-flex-grow: 0;
		-ms-flex-grow: 0;
		flex-grow: 0;
		-moz-flex-shrink: 0;
		-webkit-flex-shrink: 0;
		-ms-flex-shrink: 0;
		flex-shrink: 0;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

		.panel > * {
			position: relative;
			min-width: 10rem;
		}

			.panel > *.color0 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4);
				background-size: 128px 128px, auto;
			}

			.panel > *.color1 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #726193;
			}

			.panel > *.color2 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #e37b7c;
			}

			.panel > *.color3 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #ffe4b4;
			}

			.panel > *.color4 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #353865;
			}

			.panel > *.color1-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #6c5e86;
			}

			.panel > *.color2-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #de7172;
			}

			.panel > *.color3-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #fedea6;
			}

			.panel > *.color4-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #323459;
			}

		.panel > .intro {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: 22rem;
		}

			.panel > .intro.joined {
				width: 18.5rem;
				padding-right: 0;
			}

				.panel > .intro.joined + .inner {
					padding-left: 2.625rem;
				}

		.panel > .inner {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			position: relative;
			width: 100%;
		}

			.panel > .inner.columns {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				-moz-flex-direction: row;
				-webkit-flex-direction: row;
				-ms-flex-direction: row;
				flex-direction: row;
			}

				.panel > .inner.columns > * {
					-moz-flex-grow: 0;
					-webkit-flex-grow: 0;
					-ms-flex-grow: 0;
					flex-grow: 0;
					-moz-flex-shrink: 0;
					-webkit-flex-shrink: 0;
					-ms-flex-shrink: 0;
					flex-shrink: 0;
					margin-left: 3.5rem;
				}

				.panel > .inner.columns > :first-child {
					margin-left: 0;
				}

				.panel > .inner.columns.divided > * {
					margin-left: 7rem;
				}

					.panel > .inner.columns.divided > *:before {
						content: '';
						position: absolute;
						top: 3.5rem;
						width: 2px;
						height: calc(100% - 7rem);
						margin-left: -3.5rem;
						background-color: rgba(255, 255, 255, 0.25);
					}

				.panel > .inner.columns.divided > :first-child {
					margin-left: 0;
				}

					.panel > .inner.columns.divided > :first-child:before {
						display: none;
					}

				.panel > .inner.columns.aligned {
					-moz-align-items: -moz-flex-start;
					-webkit-align-items: -webkit-flex-start;
					-ms-align-items: -ms-flex-start;
					align-items: flex-start;
				}

		.panel .span-0-25 {
			width: 2.5rem;
		}

		.panel .span-0-5 {
			width: 5rem;
		}

		.panel .span-0-75 {
			width: 7.5rem;
		}

		.panel .span-1 {
			width: 10rem;
		}

		.panel .span-1-25 {
			width: 12.5rem;
		}

		.panel .span-1-5 {
			width: 15rem;
		}

		.panel .span-1-75 {
			width: 17.5rem;
		}

		.panel .span-2 {
			width: 20rem;
		}

		.panel .span-2-25 {
			width: 22.5rem;
		}

		.panel .span-2-5 {
			width: 25rem;
		}

		.panel .span-2-75 {
			width: 27.5rem;
		}

		.panel .span-3 {
			width: 30rem;
		}

		.panel .span-3-25 {
			width: 32.5rem;
		}

		.panel .span-3-5 {
			width: 35rem;
		}

		.panel .span-3-75 {
			width: 37.5rem;
		}

		.panel .span-4 {
			width: 40rem;
		}

		.panel .span-4-25 {
			width: 42.5rem;
		}

		.panel .span-4-5 {
			width: 45rem;
		}

		.panel .span-4-75 {
			width: 47.5rem;
		}

		.panel .span-5 {
			width: 50rem;
		}

		.panel .span-5-25 {
			width: 52.5rem;
		}

		.panel .span-5-5 {
			width: 55rem;
		}

		.panel .span-5-75 {
			width: 57.5rem;
		}

		.panel .span-6 {
			width: 60rem;
		}

		.panel .span-6-25 {
			width: 62.5rem;
		}

		.panel .span-6-5 {
			width: 65rem;
		}

		.panel .span-6-75 {
			width: 67.5rem;
		}

		.panel .span-7 {
			width: 70rem;
		}

		.panel .span-7-25 {
			width: 72.5rem;
		}

		.panel .span-7-5 {
			width: 75rem;
		}

		.panel .span-7-75 {
			width: 77.5rem;
		}

		.panel .span-8 {
			width: 80rem;
		}

		.panel .span-8-25 {
			width: 82.5rem;
		}

		.panel .span-8-5 {
			width: 85rem;
		}

		.panel .span-8-75 {
			width: 87.5rem;
		}

		.panel .span-9 {
			width: 90rem;
		}

		.panel .span-9-25 {
			width: 92.5rem;
		}

		.panel .span-9-5 {
			width: 95rem;
		}

		.panel .span-9-75 {
			width: 97.5rem;
		}

		.panel .span-10 {
			width: 100rem;
		}

		.panel.small {
			width: 35rem;
		}

		.panel.medium {
			width: 50rem;
		}

		.panel.large {
			width: 65rem;
		}

		.panel.small .span-0-25, .panel.medium .span-0-25, .panel.large .span-0-25 {
			width: 2.5%;
		}

		.panel.small .span-0-5, .panel.medium .span-0-5, .panel.large .span-0-5 {
			width: 5%;
		}

		.panel.small .span-0-75, .panel.medium .span-0-75, .panel.large .span-0-75 {
			width: 7.5%;
		}

		.panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 {
			width: 10%;
		}

		.panel.small .span-1-25, .panel.medium .span-1-25, .panel.large .span-1-25 {
			width: 12.5%;
		}

		.panel.small .span-1-5, .panel.medium .span-1-5, .panel.large .span-1-5 {
			width: 15%;
		}

		.panel.small .span-1-75, .panel.medium .span-1-75, .panel.large .span-1-75 {
			width: 17.5%;
		}

		.panel.small .span-2, .panel.medium .span-2, .panel.large .span-2 {
			width: 20%;
		}

		.panel.small .span-2-25, .panel.medium .span-2-25, .panel.large .span-2-25 {
			width: 22.5%;
		}

		.panel.small .span-2-5, .panel.medium .span-2-5, .panel.large .span-2-5 {
			width: 25%;
		}

		.panel.small .span-2-75, .panel.medium .span-2-75, .panel.large .span-2-75 {
			width: 27.5%;
		}

		.panel.small .span-3, .panel.medium .span-3, .panel.large .span-3 {
			width: 30%;
		}

		.panel.small .span-3-25, .panel.medium .span-3-25, .panel.large .span-3-25 {
			width: 32.5%;
		}

		.panel.small .span-3-5, .panel.medium .span-3-5, .panel.large .span-3-5 {
			width: 35%;
		}

		.panel.small .span-3-75, .panel.medium .span-3-75, .panel.large .span-3-75 {
			width: 37.5%;
		}

		.panel.small .span-4, .panel.medium .span-4, .panel.large .span-4 {
			width: 40%;
		}

		.panel.small .span-4-25, .panel.medium .span-4-25, .panel.large .span-4-25 {
			width: 42.5%;
		}

		.panel.small .span-4-5, .panel.medium .span-4-5, .panel.large .span-4-5 {
			width: 45%;
		}

		.panel.small .span-4-75, .panel.medium .span-4-75, .panel.large .span-4-75 {
			width: 47.5%;
		}

		.panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 {
			width: 50%;
		}

		.panel.small .span-5-25, .panel.medium .span-5-25, .panel.large .span-5-25 {
			width: 52.5%;
		}

		.panel.small .span-5-5, .panel.medium .span-5-5, .panel.large .span-5-5 {
			width: 55%;
		}

		.panel.small .span-5-75, .panel.medium .span-5-75, .panel.large .span-5-75 {
			width: 57.5%;
		}

		.panel.small .span-6, .panel.medium .span-6, .panel.large .span-6 {
			width: 60%;
		}

		.panel.small .span-6-25, .panel.medium .span-6-25, .panel.large .span-6-25 {
			width: 62.5%;
		}

		.panel.small .span-6-5, .panel.medium .span-6-5, .panel.large .span-6-5 {
			width: 65%;
		}

		.panel.small .span-6-75, .panel.medium .span-6-75, .panel.large .span-6-75 {
			width: 67.5%;
		}

		.panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 {
			width: 70%;
		}

		.panel.small .span-7-25, .panel.medium .span-7-25, .panel.large .span-7-25 {
			width: 72.5%;
		}

		.panel.small .span-7-5, .panel.medium .span-7-5, .panel.large .span-7-5 {
			width: 75%;
		}

		.panel.small .span-7-75, .panel.medium .span-7-75, .panel.large .span-7-75 {
			width: 77.5%;
		}

		.panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 {
			width: 80%;
		}

		.panel.small .span-8-25, .panel.medium .span-8-25, .panel.large .span-8-25 {
			width: 82.5%;
		}

		.panel.small .span-8-5, .panel.medium .span-8-5, .panel.large .span-8-5 {
			width: 85%;
		}

		.panel.small .span-8-75, .panel.medium .span-8-75, .panel.large .span-8-75 {
			width: 87.5%;
		}

		.panel.small .span-9, .panel.medium .span-9, .panel.large .span-9 {
			width: 90%;
		}

		.panel.small .span-9-25, .panel.medium .span-9-25, .panel.large .span-9-25 {
			width: 92.5%;
		}

		.panel.small .span-9-5, .panel.medium .span-9-5, .panel.large .span-9-5 {
			width: 95%;
		}

		.panel.small .span-9-75, .panel.medium .span-9-75, .panel.large .span-9-75 {
			width: 97.5%;
		}

		.panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 {
			width: 100%;
		}

		.panel.color0 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4);
			background-size: 128px 128px, auto;
		}

		.panel.color1 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
			background-size: 128px 128px, auto;
			background-color: #726193;
		}

		.panel.color2 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
			background-size: 128px 128px, auto;
			background-color: #e37b7c;
		}

		.panel.color3 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
			background-size: 128px 128px, auto;
			background-color: #ffe4b4;
		}

		.panel.color4 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
			background-size: 128px 128px, auto;
			background-color: #353865;
		}

		.panel.color1-alt {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
			background-size: 128px 128px, auto;
			background-color: #6c5e86;
		}

		.panel.color2-alt {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
			background-size: 128px 128px, auto;
			background-color: #de7172;
		}

		.panel.color3-alt {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
			background-size: 128px 128px, auto;
			background-color: #fedea6;
		}

		.panel.color4-alt {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
			background-size: 128px 128px, auto;
			background-color: #323459;
		}

	@media screen and (max-width: 736px) {

		.panel {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
		}

			.panel > *.color1 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #726193;
			}

			.panel > *.color2 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #e37b7c;
			}

			.panel > *.color3 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #ffe4b4;
			}

			.panel > *.color4 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #353865;
			}

			.panel > *.color1-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #6c5e86;
			}

			.panel > *.color2-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #de7172;
			}

			.panel > *.color3-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #fedea6;
			}

			.panel > *.color4-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #323459;
			}

			.panel > .intro {
				padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
				width: 100% !important;
			}

				.panel > .intro.joined {
					padding-bottom: 0;
					padding-right: 1.75rem;
				}

					.panel > .intro.joined + .inner {
						padding-top: 0;
						padding-left: 1.75rem;
					}

			.panel > .inner {
				padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			}

				.panel > .inner.columns {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

					.panel > .inner.columns > * {
						margin-left: 0;
						margin-top: 0;
					}

					.panel > .inner.columns > :first-child {
						margin-top: 0;
					}

					.panel > .inner.columns.divided > * {
						margin-left: 0;
						margin-top: 3.5rem;
					}

						.panel > .inner.columns.divided > *:before {
							content: '';
							position: absolute;
							top: auto;
							left: 1.75rem;
							width: calc(100% - 3.5rem);
							height: 2px;
							margin-left: 0;
							margin-top: -1.75rem;
						}

					.panel > .inner.columns.divided > :first-child {
						margin-top: 0;
					}

			.panel .span-0-25 {
				width: 100%;
			}

			.panel .span-0-5 {
				width: 100%;
			}

			.panel .span-0-75 {
				width: 100%;
			}

			.panel .span-1 {
				width: 100%;
			}

			.panel .span-1-25 {
				width: 100%;
			}

			.panel .span-1-5 {
				width: 100%;
			}

			.panel .span-1-75 {
				width: 100%;
			}

			.panel .span-2 {
				width: 100%;
			}

			.panel .span-2-25 {
				width: 100%;
			}

			.panel .span-2-5 {
				width: 100%;
			}

			.panel .span-2-75 {
				width: 100%;
			}

			.panel .span-3 {
				width: 100%;
			}

			.panel .span-3-25 {
				width: 100%;
			}

			.panel .span-3-5 {
				width: 100%;
			}

			.panel .span-3-75 {
				width: 100%;
			}

			.panel .span-4 {
				width: 100%;
			}

			.panel .span-4-25 {
				width: 100%;
			}

			.panel .span-4-5 {
				width: 100%;
			}

			.panel .span-4-75 {
				width: 100%;
			}

			.panel .span-5 {
				width: 100%;
			}

			.panel .span-5-25 {
				width: 100%;
			}

			.panel .span-5-5 {
				width: 100%;
			}

			.panel .span-5-75 {
				width: 100%;
			}

			.panel .span-6 {
				width: 100%;
			}

			.panel .span-6-25 {
				width: 100%;
			}

			.panel .span-6-5 {
				width: 100%;
			}

			.panel .span-6-75 {
				width: 100%;
			}

			.panel .span-7 {
				width: 100%;
			}

			.panel .span-7-25 {
				width: 100%;
			}

			.panel .span-7-5 {
				width: 100%;
			}

			.panel .span-7-75 {
				width: 100%;
			}

			.panel .span-8 {
				width: 100%;
			}

			.panel .span-8-25 {
				width: 100%;
			}

			.panel .span-8-5 {
				width: 100%;
			}

			.panel .span-8-75 {
				width: 100%;
			}

			.panel .span-9 {
				width: 100%;
			}

			.panel .span-9-25 {
				width: 100%;
			}

			.panel .span-9-5 {
				width: 100%;
			}

			.panel .span-9-75 {
				width: 100%;
			}

			.panel .span-10 {
				width: 100%;
			}

			.panel.small, .panel.medium, .panel.large {
				width: 100% !important;
			}

				.panel.small .span-0-25, .panel.medium .span-0-25, .panel.large .span-0-25 {
					width: 100%;
				}

				.panel.small .span-0-5, .panel.medium .span-0-5, .panel.large .span-0-5 {
					width: 100%;
				}

				.panel.small .span-0-75, .panel.medium .span-0-75, .panel.large .span-0-75 {
					width: 100%;
				}

				.panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 {
					width: 100%;
				}

				.panel.small .span-1-25, .panel.medium .span-1-25, .panel.large .span-1-25 {
					width: 100%;
				}

				.panel.small .span-1-5, .panel.medium .span-1-5, .panel.large .span-1-5 {
					width: 100%;
				}

				.panel.small .span-1-75, .panel.medium .span-1-75, .panel.large .span-1-75 {
					width: 100%;
				}

				.panel.small .span-2, .panel.medium .span-2, .panel.large .span-2 {
					width: 100%;
				}

				.panel.small .span-2-25, .panel.medium .span-2-25, .panel.large .span-2-25 {
					width: 100%;
				}

				.panel.small .span-2-5, .panel.medium .span-2-5, .panel.large .span-2-5 {
					width: 100%;
				}

				.panel.small .span-2-75, .panel.medium .span-2-75, .panel.large .span-2-75 {
					width: 100%;
				}

				.panel.small .span-3, .panel.medium .span-3, .panel.large .span-3 {
					width: 100%;
				}

				.panel.small .span-3-25, .panel.medium .span-3-25, .panel.large .span-3-25 {
					width: 100%;
				}

				.panel.small .span-3-5, .panel.medium .span-3-5, .panel.large .span-3-5 {
					width: 100%;
				}

				.panel.small .span-3-75, .panel.medium .span-3-75, .panel.large .span-3-75 {
					width: 100%;
				}

				.panel.small .span-4, .panel.medium .span-4, .panel.large .span-4 {
					width: 100%;
				}

				.panel.small .span-4-25, .panel.medium .span-4-25, .panel.large .span-4-25 {
					width: 100%;
				}

				.panel.small .span-4-5, .panel.medium .span-4-5, .panel.large .span-4-5 {
					width: 100%;
				}

				.panel.small .span-4-75, .panel.medium .span-4-75, .panel.large .span-4-75 {
					width: 100%;
				}

				.panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 {
					width: 100%;
				}

				.panel.small .span-5-25, .panel.medium .span-5-25, .panel.large .span-5-25 {
					width: 100%;
				}

				.panel.small .span-5-5, .panel.medium .span-5-5, .panel.large .span-5-5 {
					width: 100%;
				}

				.panel.small .span-5-75, .panel.medium .span-5-75, .panel.large .span-5-75 {
					width: 100%;
				}

				.panel.small .span-6, .panel.medium .span-6, .panel.large .span-6 {
					width: 100%;
				}

				.panel.small .span-6-25, .panel.medium .span-6-25, .panel.large .span-6-25 {
					width: 100%;
				}

				.panel.small .span-6-5, .panel.medium .span-6-5, .panel.large .span-6-5 {
					width: 100%;
				}

				.panel.small .span-6-75, .panel.medium .span-6-75, .panel.large .span-6-75 {
					width: 100%;
				}

				.panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 {
					width: 100%;
				}

				.panel.small .span-7-25, .panel.medium .span-7-25, .panel.large .span-7-25 {
					width: 100%;
				}

				.panel.small .span-7-5, .panel.medium .span-7-5, .panel.large .span-7-5 {
					width: 100%;
				}

				.panel.small .span-7-75, .panel.medium .span-7-75, .panel.large .span-7-75 {
					width: 100%;
				}

				.panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 {
					width: 100%;
				}

				.panel.small .span-8-25, .panel.medium .span-8-25, .panel.large .span-8-25 {
					width: 100%;
				}

				.panel.small .span-8-5, .panel.medium .span-8-5, .panel.large .span-8-5 {
					width: 100%;
				}

				.panel.small .span-8-75, .panel.medium .span-8-75, .panel.large .span-8-75 {
					width: 100%;
				}

				.panel.small .span-9, .panel.medium .span-9, .panel.large .span-9 {
					width: 100%;
				}

				.panel.small .span-9-25, .panel.medium .span-9-25, .panel.large .span-9-25 {
					width: 100%;
				}

				.panel.small .span-9-5, .panel.medium .span-9-5, .panel.large .span-9-5 {
					width: 100%;
				}

				.panel.small .span-9-75, .panel.medium .span-9-75, .panel.large .span-9-75 {
					width: 100%;
				}

				.panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 {
					width: 100%;
				}

			.panel.color1 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #726193;
			}

			.panel.color2 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #e37b7c;
			}

			.panel.color3 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #ffe4b4;
			}

			.panel.color4 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25));
				background-size: 128px 128px, auto;
				background-color: #353865;
			}

			.panel.color1-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #6c5e86;
			}

			.panel.color2-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #de7172;
			}

			.panel.color3-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #fedea6;
			}

			.panel.color4-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175));
				background-size: 128px 128px, auto;
				background-color: #323459;
			}

	}

/* Panel (Banner) */

	.panel.banner {
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
	}

		.panel.banner .content {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
		}

			.panel.banner .content > .actions:last-child {
				margin-bottom: 0;
			}

		.panel.banner .image {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
		}

			.panel.banner .image img {
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		.panel.banner.left {
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
		}

		.panel.banner.right {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

	@media screen and (max-width: 736px) {

		.panel.banner .content {
			padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			-moz-flex-basis: 60%;
			-webkit-flex-basis: 60%;
			-ms-flex-basis: 60%;
			flex-basis: 60%;
		}

			.panel.banner .content > .actions:last-child {
				margin-bottom: 1.5rem;
			}

		.panel.banner .image {
			-moz-flex-basis: 40%;
			-webkit-flex-basis: 40%;
			-ms-flex-basis: 40%;
			flex-basis: 40%;
		}

	}

	@media screen and (max-width: 736px) and (orientation: portrait) {

		.panel.banner .content {
			-moz-flex-basis: auto;
			-webkit-flex-basis: auto;
			-ms-flex-basis: auto;
			flex-basis: auto;
		}

		.panel.banner .image {
			-moz-flex-basis: auto;
			-webkit-flex-basis: auto;
			-ms-flex-basis: auto;
			flex-basis: auto;
			height: 18rem;
		}

		.panel.banner.left {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
		}

		.panel.banner.right {
			-moz-flex-direction: column-reverse;
			-webkit-flex-direction: column-reverse;
			-ms-flex-direction: column-reverse;
			flex-direction: column-reverse;
		}

	}

/* Panel (Spotlight) */

	.panel.spotlight {
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
		position: relative;
	}

		.panel.spotlight > * {
			z-index: 1;
		}

		.panel.spotlight .content {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
		}

		.panel.spotlight .image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

			.panel.spotlight .image img {
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		.panel.spotlight.left {
			-moz-justify-content: -moz-flex-start;
			-webkit-justify-content: -webkit-flex-start;
			-ms-justify-content: -ms-flex-start;
			justify-content: flex-start;
		}

			.panel.spotlight.left .content {
				background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.125) 30%, rgba(0, 0, 0, 0.175) 50%);
			}

		.panel.spotlight.right {
			-moz-justify-content: -moz-flex-end;
			-webkit-justify-content: -webkit-flex-end;
			-ms-justify-content: -ms-flex-end;
			justify-content: flex-end;
		}

			.panel.spotlight.right .content {
				background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.125) 30%, rgba(0, 0, 0, 0.175) 50%);
			}

	@media screen and (max-width: 736px) {

		.panel.spotlight .content {
			padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			-moz-flex-direction: column !important;
			-webkit-flex-direction: column !important;
			-ms-flex-direction: column !important;
			flex-direction: column !important;
			background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.175)) !important;
			min-height: 25rem;
		}

	}

	@media screen and (max-width: 480px) {

		.panel.spotlight .content {
			min-height: 30rem;
		}

	}

/* Page Wrapper */

	#page-wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: -moz-flex-start;
		-webkit-justify-content: -webkit-flex-start;
		-ms-justify-content: -ms-flex-start;
		justify-content: flex-start;
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		height: 100%;
		padding: 5rem;
	}

		@media screen and (orientation: portrait) {

			#page-wrapper {
				padding-left: 2rem;
				padding-right: 2rem;
			}

		}

		@media screen and (min-aspect-ratio: 16 / 7) {

			#page-wrapper {
				padding: 6vh;
			}

		}

		@media screen and (min-aspect-ratio: 16 / 6) {

			#page-wrapper {
				padding: 0;
			}

		}

	@media screen and (max-width: 736px) {

		#page-wrapper {
			height: auto;
			padding: 1rem;
		}

	}

	@media screen and (max-width: 480px) {

		#page-wrapper {
			padding: 0;
		}

	}

/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-moz-transition: opacity 1s ease-out, -moz-transform 0.75s ease-out;
		-webkit-transition: opacity 1s ease-out, -webkit-transform 0.75s ease-out;
		-ms-transition: opacity 1s ease-out, -ms-transform 0.75s ease-out;
		transition: opacity 1s ease-out, transform 0.75s ease-out;
		-moz-transition-delay: 0.25s;
		-webkit-transition-delay: 0.25s;
		-ms-transition-delay: 0.25s;
		transition-delay: 0.25s;
		cursor: default;
		position: relative;
		height: 32rem;
		box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.575);
	}

		#wrapper > .scrollZone {
			position: fixed;
			width: 6rem;
			height: inherit;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
			z-index: 10100;
		}

			#wrapper > .scrollZone.left {
				left: 0;
			}

			#wrapper > .scrollZone.right {
				right: 0;
			}

		#wrapper > .copyright {
			/* position: absolute;
			bottom: -3rem;
			right: 0;
			font-size: 0.8rem;
			color: rgba(46, 43, 55, 0.375);
			margin-bottom: 0; */
			bottom: 8rem;
			right: 4rem;
			font-size: 0.8rem;
			margin-bottom: 0;
			position: fixed;
		}





@media (min-width: 820px) and (max-width:1200px){
		#wrapper > .copyright {
			bottom: 0rem;
		}
	}


			#wrapper > .copyright a:hover {
				color: inherit;
			}

		#wrapper.is-dragging {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
		}

			#wrapper.is-dragging * {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			#wrapper.is-dragging * {
				cursor: -moz-grab;
				cursor: -webkit-grab;
				cursor: -ms-grab;
				cursor: grab;
			}

		#wrapper.is-dragged * {
			pointer-events: none;
		}

		body.is-preload #wrapper {
			-moz-transform: translateX(2rem);
			-webkit-transform: translateX(2rem);
			-ms-transform: translateX(2rem);
			transform: translateX(2rem);
			opacity: 0;
		}

	@media screen and (max-width: 736px) {

		#wrapper {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
			margin: 0 0 5rem 0;
			box-shadow: 0 0.25rem 1.5rem 0.25rem rgba(46, 43, 55, 0.5);
		}

			#wrapper > .scrollZone {
				display: none;
			}

			#wrapper > .copyright {
				/* display: block;
				width: 100%;
				text-align: center; */
				display: block;
				width: 100%;
				text-align: center;
				position: relative;
				bottom: 4rem;
				right: 0rem;
			}

			body.is-preload #wrapper {
				-moz-transform: translateY(1rem);
				-webkit-transform: translateY(1rem);
				-ms-transform: translateY(1rem);
				transform: translateY(1rem);
			}

	}

	@media screen and (max-width: 480px) {

		#wrapper {
			box-shadow: none;
		}

			body.is-preload #wrapper {
				-moz-transform: none;
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}

	}

	.title {
		margin-top:-720px;
		margin-left:100px;
		font-size:80px;
		font-family: 'Dancing Script', cursive;
		z-index: 9;
		position:fixed;
		/* text-shadow: 2px 2px 4px #ccc; */
		outline: none;
		color: #fff;

	}
	.push-left-title {
		margin-left:200px
	}


	.push-left {
		margin-left:150px
	}

	@media (max-width:600px) {
		.push-left {
			margin-left:0px
		}
	}


	h2.major.push-righ.t-title {
    margin-left: 150px;
}

.sun:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #f3ec78, #af4261);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}
.sun, .mercury, .venus, .earth, .mars, .saturn, .jupiter, .uranus, .neptune {
	font-size: 2em;
}

.mercury:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #f3ec78, #ba905e);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.venus:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #d36005, #bc4202);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.earth:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #002948, #576e41);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}


.mars:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #9c3005, #5e2004);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.jupiter:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #b2b3ae, #a96212);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.saturn:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #c9b199, #bb8145);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.uranus:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #2fcfe9, #0f2735);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.neptune:hover {
	background-color: #f3ec78;
	background-image: linear-gradient(45deg, #9ac5e4, #5d5185);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	 background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.footer {
	bottom: 0;
	position: fixed;
	font-size: 0.8em;
	padding: 1em;
	width: 100%;
	margin-left: -6em;
	text-align: center;
}

@media (max-width:768px) {
	.footer {
    bottom: 0;
    right: 0;
    font-size: 0.8em;
    text-align: center;
    padding: 1em;
    z-index: 999;
    background: url(/images/background.webp);
	}
}


/* =========================================================
   SOL ENRICHMENT PASS
   Clean planet-page content panels
========================================================= */

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10000;
    padding: 0.55rem 0.8rem;
    border-radius: 0.35rem;
    background: #111;
    color: #fff;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.sol-kicker {
    margin: 0 0 0.5rem 0;
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sol-standfirst {
    max-width: 34rem;
    color: rgba(0, 0, 0, 0.78);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: left;
}

.sol-page-hero .actions {
    margin-top: 1.5rem;
}

.sol-facts-panel .intro p,
.sol-detail-panel .intro p {
    text-align: left;
}

.sol-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(10rem, 1fr));
    gap: 1rem;
    align-content: center;
    min-width: 34rem;
}

.sol-fact-card {
    min-height: 9rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.18);
}

.sol-fact-card h3 {
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sol-fact-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.sol-detail-list {
    min-width: 28rem;
}

.sol-detail-list ul {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.sol-detail-list li {
    margin-bottom: 0.8rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    line-height: 1.55;
}

.sol-detail-list a {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.55);
}

@media screen and (max-width: 736px) {
    .sol-fact-grid {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }

    .sol-detail-list {
        min-width: 0;
        width: 100%;
    }

    .sol-standfirst {
        font-size: 1rem;
    }
}




/* =========================================================
   SOL MAIN PAGE HORIZONTAL JOURNEY
   Main page only. Preserves Ethereal horizontal mechanics.
========================================================= */

/* ---------------------------------------------
   01. Opening panel / launch point
--------------------------------------------- */

#home .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#home .content::before {
    content: "HORIZONTAL SOLAR BRIEFING";
    display: block;
    margin-bottom: 0.85rem;
    color: rgba(0, 0, 0, 0.54);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
}

#home h1.majorblack {
    margin: 0 0 1.2rem 0;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(3.4rem, 5vw, 5.25rem);
    line-height: 0.92;
    letter-spacing: -0.08em;
}

#home .content p {
    max-width: 31rem;
    color: rgba(0, 0, 0, 0.76);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
}

#home .sol-hero-actions {
    display: flex;
    margin: 0 0 1.1rem 0;
    padding: 0;
    list-style: none;
}

#home .sol-hero-actions li {
    padding-left: 0;
}

#home .sol-hero-actions .button {
    color: #111 !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.24);
    white-space: nowrap;
}

/* ---------------------------------------------
   02. Inter-panel arrow controls
--------------------------------------------- */

#wrapper > ul.actions {
    align-self: center;
    justify-content: center;
    width: 3.25rem;
    margin: 0 1.1rem;
    padding: 0;
    position: relative;
    z-index: 20;
}

#wrapper > ul.actions li {
    padding-left: 0;
}

/* ---------------------------------------------
   03. Quick facts / orientation panel
--------------------------------------------- */

.sol-index-facts .intro {
    width: 17.5rem;
}

.sol-index-facts .intro h2.major {
    margin-left: 0;
    max-width: 13.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sol-index-facts .intro h2.major::before {
    content: "ORIENTATION / ";
    display: block;
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sol-index-facts .intro p {
    max-width: 13.5rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    font-weight: 550;
    line-height: 1.48;
    text-align: left;
}

.sol-index-facts .inner {
    width: 21rem;
    overflow: visible;
}

.sol-index-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.sol-index-grid article {
    display: grid;
    grid-template-columns: 6.6rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    box-shadow: none;
}

.sol-index-grid article:last-child {
    border-bottom: 0;
}

.sol-index-grid strong {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-transform: uppercase;
}

.sol-index-grid span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

/* ---------------------------------------------
   04. Planet panels / object files
--------------------------------------------- */

.panel.spotlight .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.panel.spotlight .content::before {
    content: "OBJECT FILE";
    display: block;
    margin-bottom: 0.55rem;
    color: rgba(255, 255, 255, 0.58);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
}

.panel.spotlight h2.major {
    margin-left: 0;
    margin-bottom: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(2.5rem, 4vw, 4.1rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.panel.spotlight h2.major a {
    display: inline-block;
}

.panel.spotlight h2.major a::after {
    display: block;
    margin-top: 0.38rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.panel.spotlight h2.major a.sun::after {
    content: "Central star / system anchor";
}

.panel.spotlight h2.major a.mercury::after {
    content: "Inner world / 1st orbit";
}

.panel.spotlight h2.major a.venus::after {
    content: "Inner world / greenhouse world";
}

.panel.spotlight h2.major a.earth::after {
    content: "Inner world / life-bearing planet";
}

.panel.spotlight h2.major a.mars::after {
    content: "Inner world / exploration target";
}

.panel.spotlight h2.major a.jupiter::after {
    content: "Outer world / gas giant";
}

.panel.spotlight h2.major a.saturn::after {
    content: "Outer world / ring system";
}

.panel.spotlight h2.major a.uranus::after {
    content: "Outer world / tilted ice giant";
}

.panel.spotlight h2.major a.neptune::after {
    content: "Outer world / distant ice giant";
}

.panel.spotlight .content p {
    max-width: 28rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    font-weight: 550;
    line-height: 1.55;
    text-align: left;
}

/* Remove the old forced left push on paragraphs/headings where used */
.push-left,
.push-left-title {
    margin-left: 0 !important;
}

/* ---------------------------------------------
   05. Footer / project credit
--------------------------------------------- */

.footer .copyright,
.copyright {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------
   06. Mobile
--------------------------------------------- */

@media screen and (max-width: 736px) {
    #home h1.majorblack {
        font-size: 3rem;
        letter-spacing: -0.05em;
    }

    #wrapper > ul.actions {
        width: auto;
        margin: 1rem 0;
    }

    .sol-index-facts .intro,
    .sol-index-facts .inner {
        width: 100%;
    }

    .sol-index-facts .intro h2.major,
    .sol-index-facts .intro p {
        max-width: none;
    }

    .sol-index-grid article {
        grid-template-columns: 1fr;
        gap: 0.08rem;
    }

    .panel.spotlight h2.major {
        font-size: 2.55rem;
    }

    .panel.spotlight .content p {
        max-width: none;
    }
}


/* =========================================================
   SOL HORIZONTAL PARALLAX
   Background-only. No layout, panel, or scroll changes.
========================================================= */

:root {
    --sol-star-x: 0px;
    --sol-bg-x: 0px;
}

body::after {
    background-position:
        var(--sol-star-x) 0,
        var(--sol-bg-x) center;
}

@media screen and (prefers-reduced-motion: reduce), screen and (max-width: 736px) {
    body::after {
        background-position:
            0 0,
            center center;
    }
}


/* =========================================================
   SOL MAIN PAGE PANEL BACKGROUND TUNE
   Visual-only: no horizontal layout changes.
========================================================= */

/* Shared briefing-panel tone for the first two stops */
#home .content.color0,
.sol-index-facts .intro,
.sol-index-facts .inner {
    background:
        linear-gradient(
            135deg,
            rgba(6, 12, 24, 0.92),
            rgba(18, 23, 42, 0.84)
        ) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
}

/* Give the entry panel a subtle warm launch accent */
#home .content.color0 {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(244, 198, 106, 0.2),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(7, 12, 24, 0.94),
            rgba(20, 24, 44, 0.88)
        ) !important;
}

/* Give the orientation panel a cooler navigation/briefing accent */
.sol-index-facts .intro,
.sol-index-facts .inner {
    background:
        radial-gradient(
            circle at 100% 20%,
            rgba(95, 178, 255, 0.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(7, 12, 24, 0.94),
            rgba(20, 24, 44, 0.88)
        ) !important;
}

/* Rebalance dark-panel text */
#home .content::before {
    color: rgba(244, 198, 106, 0.72);
}

#home h1.majorblack {
    color: rgba(255, 255, 255, 0.94);
}

#home .content p {
    color: rgba(255, 255, 255, 0.76);
}

#home .sol-hero-actions .button {
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: inset 0 0 0 2px rgba(244, 198, 106, 0.45);
}

#home .sol-hero-actions .button:hover {
    color: #ffe4b4 !important;
    box-shadow: inset 0 0 0 2px rgba(255, 228, 180, 0.9);
}

.sol-index-facts .intro h2.major {
    color: rgba(255, 255, 255, 0.94);
}

.sol-index-facts .intro h2.major::before {
    color: rgba(95, 178, 255, 0.78);
}

.sol-index-facts .intro p {
    color: rgba(255, 255, 255, 0.74);
}

/* Keep the quick facts list quiet and briefing-like */
.sol-index-grid article {
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.sol-index-grid strong {
    color: rgba(255, 255, 255, 0.95);
}

.sol-index-grid span {
    color: rgba(255, 255, 255, 0.68);
}


/* =========================================================
   SOL PLANET ACCENTS
   Subtle identity colours for horizontal object-file panels.
========================================================= */

:root {
    --sol-accent-sol: #f4c66a;
    --sol-accent-mercury: #b8b2a6;
    --sol-accent-venus: #e6b86f;
    --sol-accent-earth: #5fb2ff;
    --sol-accent-mars: #d66a3f;
    --sol-accent-jupiter: #d6a66f;
    --sol-accent-saturn: #e3c984;
    --sol-accent-uranus: #7edbe8;
    --sol-accent-neptune: #4f7dff;
}

/* Main panel title accents */

.panel.spotlight h2.major a {
    border-bottom: 0.12rem solid currentColor;
    padding-bottom: 0.28rem;
    transition:
        color 0.2s ease-in-out,
        border-bottom-color 0.2s ease-in-out,
        text-shadow 0.2s ease-in-out;
}

.panel.spotlight h2.major a.sun {
    color: var(--sol-accent-sol);
}

.panel.spotlight h2.major a.mercury {
    color: var(--sol-accent-mercury);
}

.panel.spotlight h2.major a.venus {
    color: var(--sol-accent-venus);
}

.panel.spotlight h2.major a.earth {
    color: var(--sol-accent-earth);
}

.panel.spotlight h2.major a.mars {
    color: var(--sol-accent-mars);
}

.panel.spotlight h2.major a.jupiter {
    color: var(--sol-accent-jupiter);
}

.panel.spotlight h2.major a.saturn {
    color: var(--sol-accent-saturn);
}

.panel.spotlight h2.major a.uranus {
    color: var(--sol-accent-uranus);
}

.panel.spotlight h2.major a.neptune {
    color: var(--sol-accent-neptune);
}

.panel.spotlight h2.major a:hover {
    color: #fff;
    border-bottom-color: currentColor;
    text-shadow: 0 0 1.2rem currentColor;
}

/* Object-file subtitle accents */

.panel.spotlight h2.major a.sun::after {
    color: color-mix(in srgb, var(--sol-accent-sol) 72%, white);
}

.panel.spotlight h2.major a.mercury::after {
    color: color-mix(in srgb, var(--sol-accent-mercury) 72%, white);
}

.panel.spotlight h2.major a.venus::after {
    color: color-mix(in srgb, var(--sol-accent-venus) 72%, white);
}

.panel.spotlight h2.major a.earth::after {
    color: color-mix(in srgb, var(--sol-accent-earth) 72%, white);
}

.panel.spotlight h2.major a.mars::after {
    color: color-mix(in srgb, var(--sol-accent-mars) 72%, white);
}

.panel.spotlight h2.major a.jupiter::after {
    color: color-mix(in srgb, var(--sol-accent-jupiter) 72%, white);
}

.panel.spotlight h2.major a.saturn::after {
    color: color-mix(in srgb, var(--sol-accent-saturn) 72%, white);
}

.panel.spotlight h2.major a.uranus::after {
    color: color-mix(in srgb, var(--sol-accent-uranus) 72%, white);
}

.panel.spotlight h2.major a.neptune::after {
    color: color-mix(in srgb, var(--sol-accent-neptune) 72%, white);
}

/* Quick facts orientation accents */

.sol-index-grid article:nth-child(1) strong {
    color: var(--sol-accent-sol);
}

.sol-index-grid article:nth-child(2) strong {
    color: var(--sol-accent-mercury);
}

.sol-index-grid article:nth-child(3) strong {
    color: var(--sol-accent-venus);
}

.sol-index-grid article:nth-child(4) strong {
    color: var(--sol-accent-earth);
}

.sol-index-grid article:nth-child(5) strong {
    color: var(--sol-accent-mars);
}

.sol-index-grid article:nth-child(6) strong {
    color: var(--sol-accent-jupiter);
}

.sol-index-grid article:nth-child(7) strong {
    color: var(--sol-accent-saturn);
}

.sol-index-grid article:nth-child(8) strong {
    color: var(--sol-accent-uranus);
}

.sol-index-grid article:nth-child(9) strong {
    color: var(--sol-accent-neptune);
}


/* =========================================================
   SOL QUICK FACTS LINKS
========================================================= */

.sol-index-grid article a {
    display: grid;
    grid-template-columns: 6.6rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    width: 100%;
    border-bottom: 0;
    text-decoration: none;
}

.sol-index-grid article a:hover span,
.sol-index-grid article a:focus-visible span {
    color: rgba(255, 255, 255, 0.92);
}

.sol-index-grid article a:focus-visible {
    outline: 2px solid rgba(255, 228, 180, 0.85);
    outline-offset: 0.25rem;
}

@media screen and (max-width: 736px) {
    .sol-index-grid article a {
        grid-template-columns: 1fr;
        gap: 0.08rem;
    }
}


/* =========================================================
   SOL QUICK FACTS LINK RESET
   Keeps linked rows visually identical to the pre-link layout.
========================================================= */

.sol-index-grid article a {
    display: contents;
    border-bottom: 0;
    color: inherit;
    text-decoration: none;
}

.sol-index-grid article a:hover,
.sol-index-grid article a:focus-visible {
    color: inherit;
}

.sol-index-grid article:has(a:hover) span,
.sol-index-grid article:has(a:focus-visible) span {
    color: rgba(255, 255, 255, 0.9);
}

.sol-index-grid article:has(a:focus-visible) {
    outline: 2px solid rgba(255, 228, 180, 0.75);
    outline-offset: 0.2rem;
}


/* =========================================================
   SOL FIXED PLANET NAV
   Small route-style navigator for the horizontal journey.
========================================================= */

.sol-planet-nav {
    position: fixed;
    right: 50%;
    bottom: 1.05rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(6, 10, 20, 0.72);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
    transform: translateX(50%);
    backdrop-filter: blur(10px);
}

.sol-planet-nav::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%);
}

.sol-planet-nav a {
    position: relative;
    z-index: 1;
    display: block;
    width: 0.72rem;
    height: 0.72rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0.8rem currentColor;
    text-decoration: none;
}

.sol-planet-nav a span {
    position: absolute;
    left: 50%;
    bottom: 1.15rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    background: rgba(6, 10, 20, 0.92);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(0.2rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.sol-planet-nav a:hover span,
.sol-planet-nav a:focus-visible span {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sol-planet-nav a:focus-visible {
    outline: 2px solid rgba(255, 228, 180, 0.9);
    outline-offset: 0.25rem;
}

.sol-planet-nav .sun { color: var(--sol-accent-sol); }
.sol-planet-nav .mercury { color: var(--sol-accent-mercury); }
.sol-planet-nav .venus { color: var(--sol-accent-venus); }
.sol-planet-nav .earth { color: var(--sol-accent-earth); }
.sol-planet-nav .mars { color: var(--sol-accent-mars); }
.sol-planet-nav .jupiter { color: var(--sol-accent-jupiter); }
.sol-planet-nav .saturn { color: var(--sol-accent-saturn); }
.sol-planet-nav .uranus { color: var(--sol-accent-uranus); }
.sol-planet-nav .neptune { color: var(--sol-accent-neptune); }

@media screen and (max-width: 736px) {
    .sol-planet-nav {
        display: none;
    }
}


/* =========================================================
   SOL PLANET NAV ORBITAL MODE
   Planet-style fixed route nav with active satellite marker.
========================================================= */

.sol-planet-nav {
    gap: 0.86rem;
    padding: 0.62rem 0.95rem;
}

.sol-planet-nav a {
    width: 0.92rem;
    height: 0.92rem;
    border: 0;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.16) 16%, transparent 28%),
        radial-gradient(circle at 62% 70%, rgba(0, 0, 0, 0.36), transparent 52%),
        currentColor;
    box-shadow:
        0 0 0.45rem rgba(255, 255, 255, 0.08),
        0 0 0.85rem color-mix(in srgb, currentColor 72%, transparent);
    transform: scale(1);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.sol-planet-nav a:hover,
.sol-planet-nav a:focus-visible,
.sol-planet-nav a.is-active {
    transform: scale(1.22);
    filter: saturate(1.18);
}

.sol-planet-nav a.is-active {
    box-shadow:
        0 0 0.35rem rgba(255, 255, 255, 0.24),
        0 0 1.1rem currentColor,
        0 0 2rem color-mix(in srgb, currentColor 48%, transparent);
}

/* Active satellite orbit */
.sol-planet-nav a.is-active::after {
    content: "";
    position: absolute;
    inset: -0.46rem;
    border: 1px solid color-mix(in srgb, currentColor 64%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% -1px, #fff 0 0.09rem, transparent 0.1rem);
    animation: solSatelliteOrbit 1.9s linear infinite;
    pointer-events: none;
}

/* Saturn gets a subtle ring treatment */
.sol-planet-nav a.saturn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.55rem;
    height: 0.48rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.72;
    transform: translate(-50%, -50%) rotate(-18deg);
    pointer-events: none;
}

.sol-planet-nav a.saturn.is-active::before {
    opacity: 0.95;
}

/* Slight size variation so they read less like generic dots */
.sol-planet-nav a.sun {
    width: 1.08rem;
    height: 1.08rem;
}

.sol-planet-nav a.mercury {
    width: 0.68rem;
    height: 0.68rem;
}

.sol-planet-nav a.venus,
.sol-planet-nav a.earth {
    width: 0.86rem;
    height: 0.86rem;
}

.sol-planet-nav a.mars {
    width: 0.78rem;
    height: 0.78rem;
}

.sol-planet-nav a.jupiter {
    width: 1.18rem;
    height: 1.18rem;
}

.sol-planet-nav a.saturn {
    width: 1.08rem;
    height: 1.08rem;
}

.sol-planet-nav a.uranus,
.sol-planet-nav a.neptune {
    width: 0.94rem;
    height: 0.94rem;
}

@keyframes solSatelliteOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after {
        animation: none;
    }
}


/* =========================================================
   SOL PLANET NAV SATELLITE DEPTH ORBIT
   Replaces flat spin with angled front/back orbit.
========================================================= */

/* Remove the previous ring-style active orbit */
.sol-planet-nav a.is-active::after {
    inset: auto;
    border: 0;
    border-radius: 50%;
    background: #fff;
    width: 0.18rem;
    height: 0.18rem;
    left: 50%;
    top: 50%;
    box-shadow:
        0 0 0.25rem rgba(255, 255, 255, 0.95),
        0 0 0.55rem currentColor;
    pointer-events: none;
    animation: solSatelliteDepthOrbit 2.35s linear infinite;
}

/* Add a faint tilted orbital guide without creating another scroll/layout layer */
.sol-planet-nav a.is-active {
    position: relative;
}

.sol-planet-nav a.is-active span::before {
    content: "";
    position: fixed;
    width: 1.85rem;
    height: 0.72rem;
    border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
    border-radius: 50%;
    opacity: 0.42;
    pointer-events: none;
    transform: translate(-50%, 0.88rem) rotate(-23deg);
}

/* Hide tooltip orbit helper unless the parent is active */
.sol-planet-nav a:not(.is-active) span::before {
    display: none;
}

/* Front/back elliptical satellite path.
   0 / 100 = front-right
   25 = rear/top, faded and smaller
   50 = front-left
   75 = rear/top, faded and smaller
*/
@keyframes solSatelliteDepthOrbit {
    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(0.78rem)
            translateY(0.18rem)
            scale(1.15);
        z-index: 3;
    }

    18% {
        opacity: 0.9;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(0.36rem)
            translateY(-0.22rem)
            scale(0.82);
        z-index: 1;
    }

    32% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(0)
            translateY(-0.34rem)
            scale(0.42);
        z-index: 0;
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(-0.78rem)
            translateY(0.18rem)
            scale(1.15);
        z-index: 3;
    }

    68% {
        opacity: 0.9;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(-0.36rem)
            translateY(-0.22rem)
            scale(0.82);
        z-index: 1;
    }

    82% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(0)
            translateY(-0.34rem)
            scale(0.42);
        z-index: 0;
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(0.78rem)
            translateY(0.18rem)
            scale(1.15);
        z-index: 3;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after {
        animation: none;
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-23deg)
            translateX(0.78rem)
            translateY(0.18rem)
            scale(1);
    }
}


/* =========================================================
   SOL PLANET NAV SATELLITE ORBIT REFINEMENT
   Smooth angled front/back pass. Overrides previous orbit attempt.
========================================================= */

/* Remove previous guide artefact */
.sol-planet-nav a.is-active span::before,
.sol-planet-nav a:not(.is-active) span::before {
    display: none !important;
}

/* Keep active planet clear */
.sol-planet-nav a.is-active {
    overflow: visible;
}

/* Satellite: larger, clearer, no ring bounce */
.sol-planet-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.28rem;
    height: 0.28rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 0.25rem rgba(255, 255, 255, 0.95),
        0 0 0.7rem currentColor;
    pointer-events: none;
    animation: solSatelliteEllipticalOrbit 2.8s linear infinite;
}

/* 
   Angled apparent orbit:
   - bottom arc = visible/front
   - top arc = behind planet/faded out
   - no rotate() transform, so it should not bounce/jump
*/
@keyframes solSatelliteEllipticalOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) scale(1.08);
    }

    10% {
        opacity: 1;
        transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) scale(1.12);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) scale(1.16);
    }

    30% {
        opacity: 1;
        transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) scale(1.12);
    }

    40% {
        opacity: 1;
        transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) scale(1.04);
    }

    49% {
        opacity: 0.35;
        transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) scale(0.72);
    }

    56% {
        opacity: 0;
        transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) scale(0.45);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) scale(0.38);
    }

    82% {
        opacity: 0;
        transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) scale(0.48);
    }

    92% {
        opacity: 0.45;
        transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) scale(0.75);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) scale(1.08);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after {
        animation: none;
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) scale(1);
    }
}


/* =========================================================
   SOL PLANET NAV POSITION / BACKGROUND RESET
   Keeps route visible above footer without panel backdrop.
========================================================= */

.sol-planet-nav {
    bottom: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.sol-planet-nav::before {
    left: 0.45rem;
    right: 0.45rem;
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0.65rem rgba(255, 255, 255, 0.12);
}

.sol-planet-nav a span {
    background: rgba(6, 10, 20, 0.86);
}

.footer {
    position: fixed;
    right: 0;
    bottom: 0.65rem;
    left: 0;
    z-index: 900;
    pointer-events: none;
    text-align: center;
}

.footer .copyright {
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

@media screen and (max-width: 736px) {
    .footer {
        position: static;
        margin-top: 1rem;
    }
}


/* =========================================================
   SOL PLANET NAV ACTIVE ROCKET
   Replaces the white moon/dot with a small rocket marker.
========================================================= */

.sol-planet-nav a.is-active::after {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: #ffffff;
    font-size: 0.52rem;
    line-height: 1;
    text-shadow:
        0 0 0.2rem rgba(255, 255, 255, 0.95),
        0 0 0.65rem currentColor;
    box-shadow: none;
    pointer-events: none;
    animation: solRocketOrbit 2.8s linear infinite;
}

@keyframes solRocketOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(35deg) scale(1);
    }

    10% {
        opacity: 1;
        transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(70deg) scale(1.04);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(110deg) scale(1.08);
    }

    30% {
        opacity: 1;
        transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(160deg) scale(1.04);
    }

    40% {
        opacity: 1;
        transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(205deg) scale(0.98);
    }

    49% {
        opacity: 0.35;
        transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(245deg) scale(0.78);
    }

    56% {
        opacity: 0;
        transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(285deg) scale(0.58);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(320deg) scale(0.52);
    }

    82% {
        opacity: 0;
        transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(350deg) scale(0.62);
    }

    92% {
        opacity: 0.45;
        transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(15deg) scale(0.84);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(35deg) scale(1);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after {
        animation: none;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(35deg) scale(1);
        opacity: 1;
    }
}


/* =========================================================
   SOL PLANET NAV ACTIVE ROCKET - CSS SHAPE
   Replaces star glyph with a tiny rocket silhouette.
========================================================= */

.sol-planet-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 0.26rem;
    height: 0.52rem;

    border: 0;
    border-radius: 50% 50% 42% 42%;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f7f7 54%,
            #bfc7d5 55%,
            #8d96a8 100%
        );

    box-shadow:
        0 0 0.18rem rgba(255, 255, 255, 0.95),
        0 0 0.5rem currentColor;

    pointer-events: none;
    animation: solRocketShipOrbit 2.8s linear infinite;
}

/* Rocket side fins */
.sol-planet-nav a.is-active::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 0.46rem;
    height: 0.28rem;

    background:
        linear-gradient(135deg, transparent 0 35%, currentColor 36% 62%, transparent 63%),
        linear-gradient(225deg, transparent 0 35%, currentColor 36% 62%, transparent 63%);

    pointer-events: none;
    animation: solRocketFinOrbit 2.8s linear infinite;
}

/* Override Saturn ring when Saturn is active */
.sol-planet-nav a.saturn.is-active::before {
    width: 0.46rem;
    height: 0.28rem;
    border: 0;
    border-radius: 0;
    opacity: 1;
}

/* Small flame */
.sol-planet-nav a.is-active .rocket-flame {
    display: none;
}

@keyframes solRocketShipOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(118deg) scale(1);
    }

    10% {
        opacity: 1;
        transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(145deg) scale(1.04);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(180deg) scale(1.08);
    }

    30% {
        opacity: 1;
        transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(220deg) scale(1.04);
    }

    40% {
        opacity: 0.9;
        transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(250deg) scale(0.96);
    }

    49% {
        opacity: 0.35;
        transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(282deg) scale(0.76);
    }

    56% {
        opacity: 0;
        transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(312deg) scale(0.58);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(345deg) scale(0.52);
    }

    82% {
        opacity: 0;
        transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(28deg) scale(0.62);
    }

    92% {
        opacity: 0.45;
        transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(78deg) scale(0.82);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(118deg) scale(1);
    }
}

@keyframes solRocketFinOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(118deg) scale(1);
    }

    10% {
        opacity: 1;
        transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(145deg) scale(1.04);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(180deg) scale(1.08);
    }

    30% {
        opacity: 1;
        transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(220deg) scale(1.04);
    }

    40% {
        opacity: 0.9;
        transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(250deg) scale(0.96);
    }

    49% {
        opacity: 0.35;
        transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(282deg) scale(0.76);
    }

    56% {
        opacity: 0;
        transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(312deg) scale(0.58);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(345deg) scale(0.52);
    }

    82% {
        opacity: 0;
        transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(28deg) scale(0.62);
    }

    92% {
        opacity: 0.45;
        transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(78deg) scale(0.82);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(118deg) scale(1);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after,
    .sol-planet-nav a.is-active::before {
        animation: none;
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(118deg) scale(1);
    }
}


/* =========================================================
   SOL PLANET NAV ROCKET TANGENTIAL ORBIT
   Rocket now points along orbital path, not at the planet.
========================================================= */

@keyframes solRocketShipOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(230deg) scale(1);
    }

    10% {
        opacity: 1;
        transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(248deg) scale(1.04);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(270deg) scale(1.08);
    }

    30% {
        opacity: 1;
        transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(295deg) scale(1.04);
    }

    40% {
        opacity: 0.9;
        transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(325deg) scale(0.96);
    }

    49% {
        opacity: 0.35;
        transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(350deg) scale(0.76);
    }

    56% {
        opacity: 0;
        transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(25deg) scale(0.58);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(78deg) scale(0.52);
    }

    82% {
        opacity: 0;
        transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(125deg) scale(0.62);
    }

    92% {
        opacity: 0.45;
        transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(178deg) scale(0.82);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(230deg) scale(1);
    }
}

@keyframes solRocketFinOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(230deg) scale(1);
    }

    10% {
        opacity: 1;
        transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(248deg) scale(1.04);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(270deg) scale(1.08);
    }

    30% {
        opacity: 1;
        transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(295deg) scale(1.04);
    }

    40% {
        opacity: 0.9;
        transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(325deg) scale(0.96);
    }

    49% {
        opacity: 0.35;
        transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(350deg) scale(0.76);
    }

    56% {
        opacity: 0;
        transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(25deg) scale(0.58);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(78deg) scale(0.52);
    }

    82% {
        opacity: 0;
        transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(125deg) scale(0.62);
    }

    92% {
        opacity: 0.45;
        transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(178deg) scale(0.82);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(230deg) scale(1);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after,
    .sol-planet-nav a.is-active::before {
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(230deg) scale(1);
    }
}


/* =========================================================
   SOL PLANET NAV ROCKET DIRECTION FIX
   Flips rocket so nose leads and flame trails.
========================================================= */

@keyframes solRocketShipOrbit {
    0% { opacity: 1; transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1); }
    10% { opacity: 1; transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(68deg) scale(1.04); }
    20% { opacity: 1; transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(90deg) scale(1.08); }
    30% { opacity: 1; transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(115deg) scale(1.04); }
    40% { opacity: 0.9; transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(145deg) scale(0.96); }
    49% { opacity: 0.35; transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(170deg) scale(0.76); }
    56% { opacity: 0; transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(205deg) scale(0.58); }
    68% { opacity: 0; transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(258deg) scale(0.52); }
    82% { opacity: 0; transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(305deg) scale(0.62); }
    92% { opacity: 0.45; transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(358deg) scale(0.82); }
    100% { opacity: 1; transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1); }
}

@keyframes solRocketFinOrbit {
    0% { opacity: 1; transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1); }
    10% { opacity: 1; transform: translate(calc(-50% + 0.68rem), calc(-50% + 0.34rem)) rotate(68deg) scale(1.04); }
    20% { opacity: 1; transform: translate(calc(-50% + 0.18rem), calc(-50% + 0.45rem)) rotate(90deg) scale(1.08); }
    30% { opacity: 1; transform: translate(calc(-50% - 0.38rem), calc(-50% + 0.38rem)) rotate(115deg) scale(1.04); }
    40% { opacity: 0.9; transform: translate(calc(-50% - 0.82rem), calc(-50% + 0.14rem)) rotate(145deg) scale(0.96); }
    49% { opacity: 0.35; transform: translate(calc(-50% - 0.95rem), calc(-50% - 0.08rem)) rotate(170deg) scale(0.76); }
    56% { opacity: 0; transform: translate(calc(-50% - 0.62rem), calc(-50% - 0.28rem)) rotate(205deg) scale(0.58); }
    68% { opacity: 0; transform: translate(calc(-50% + 0.02rem), calc(-50% - 0.38rem)) rotate(258deg) scale(0.52); }
    82% { opacity: 0; transform: translate(calc(-50% + 0.68rem), calc(-50% - 0.24rem)) rotate(305deg) scale(0.62); }
    92% { opacity: 0.45; transform: translate(calc(-50% + 0.92rem), calc(-50% - 0.02rem)) rotate(358deg) scale(0.82); }
    100% { opacity: 1; transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1); }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after,
    .sol-planet-nav a.is-active::before {
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1);
    }
}


/* =========================================================
   SOL PLANET NAV ROCKET OCCLUSION TUNE
   Moves the hide/snap point behind the active planet.
========================================================= */

@keyframes solRocketShipOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1);
    }

    12% {
        opacity: 1;
        transform: translate(calc(-50% + 0.62rem), calc(-50% + 0.36rem)) rotate(72deg) scale(1.04);
    }

    24% {
        opacity: 1;
        transform: translate(calc(-50% + 0.02rem), calc(-50% + 0.46rem)) rotate(96deg) scale(1.08);
    }

    36% {
        opacity: 1;
        transform: translate(calc(-50% - 0.62rem), calc(-50% + 0.28rem)) rotate(126deg) scale(1);
    }

    46% {
        opacity: 0.7;
        transform: translate(calc(-50% - 0.98rem), calc(-50% + 0.02rem)) rotate(160deg) scale(0.82);
    }

    52% {
        opacity: 0;
        transform: translate(calc(-50% - 0.72rem), calc(-50% - 0.18rem)) rotate(198deg) scale(0.58);
    }

    60% {
        opacity: 0;
        transform: translate(calc(-50% - 0.18rem), calc(-50% - 0.32rem)) rotate(238deg) scale(0.48);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.34rem), calc(-50% - 0.28rem)) rotate(282deg) scale(0.5);
    }

    76% {
        opacity: 0.08;
        transform: translate(calc(-50% + 0.78rem), calc(-50% - 0.12rem)) rotate(322deg) scale(0.64);
    }

    84% {
        opacity: 0.42;
        transform: translate(calc(-50% + 1.02rem), calc(-50% + 0.02rem)) rotate(8deg) scale(0.78);
    }

    92% {
        opacity: 0.82;
        transform: translate(calc(-50% + 1.02rem), calc(-50% + 0.08rem)) rotate(32deg) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1);
    }
}

@keyframes solRocketFinOrbit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1);
    }

    12% {
        opacity: 1;
        transform: translate(calc(-50% + 0.62rem), calc(-50% + 0.36rem)) rotate(72deg) scale(1.04);
    }

    24% {
        opacity: 1;
        transform: translate(calc(-50% + 0.02rem), calc(-50% + 0.46rem)) rotate(96deg) scale(1.08);
    }

    36% {
        opacity: 1;
        transform: translate(calc(-50% - 0.62rem), calc(-50% + 0.28rem)) rotate(126deg) scale(1);
    }

    46% {
        opacity: 0.7;
        transform: translate(calc(-50% - 0.98rem), calc(-50% + 0.02rem)) rotate(160deg) scale(0.82);
    }

    52% {
        opacity: 0;
        transform: translate(calc(-50% - 0.72rem), calc(-50% - 0.18rem)) rotate(198deg) scale(0.58);
    }

    60% {
        opacity: 0;
        transform: translate(calc(-50% - 0.18rem), calc(-50% - 0.32rem)) rotate(238deg) scale(0.48);
    }

    68% {
        opacity: 0;
        transform: translate(calc(-50% + 0.34rem), calc(-50% - 0.28rem)) rotate(282deg) scale(0.5);
    }

    76% {
        opacity: 0.08;
        transform: translate(calc(-50% + 0.78rem), calc(-50% - 0.12rem)) rotate(322deg) scale(0.64);
    }

    84% {
        opacity: 0.42;
        transform: translate(calc(-50% + 1.02rem), calc(-50% + 0.02rem)) rotate(8deg) scale(0.78);
    }

    92% {
        opacity: 0.82;
        transform: translate(calc(-50% + 1.02rem), calc(-50% + 0.08rem)) rotate(32deg) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .sol-planet-nav a.is-active::after,
    .sol-planet-nav a.is-active::before {
        transform: translate(calc(-50% + 0.95rem), calc(-50% + 0.12rem)) rotate(50deg) scale(1);
    }
}


/* =========================================================
   SOL PLANET NAV TOOLTIP FIX
   Ensures labels always render above the planet row.
========================================================= */

.sol-planet-nav a span {
    position: absolute;
    left: 50%;
    bottom: 1.35rem;
    z-index: 20;

    display: block;
    min-width: max-content;
    padding: 0.25rem 0.45rem;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.25rem;
    background: rgba(6, 10, 20, 0.96);

    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(0.2rem);
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.sol-planet-nav a:hover span,
.sol-planet-nav a:focus-visible span,
.sol-planet-nav a.is-active:hover span,
.sol-planet-nav a.is-active:focus-visible span {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Stop pseudo-elements from interfering with tooltip text */
.sol-planet-nav a span::before,
.sol-planet-nav a span::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SOL PLANET NAV TOOLTIP / SMOOTH NAV FIX
   Tooltip uses data-label so rocket pseudo-elements cannot blank it.
========================================================= */

/* Hide old inner-span tooltip text completely; keep it for markup fallback only. */
.sol-planet-nav a > span {
    display: none !important;
}

/* Data-label tooltip. */
.sol-planet-nav a[data-label] {
    overflow: visible;
}

.sol-planet-nav a[data-label]::marker {
    display: none;
}

.sol-planet-nav a[data-label] .unused {
    display: none;
}

/* Use a non-rocket tooltip layer on the link itself. */
.sol-planet-nav a[data-label] {
    --sol-tooltip-y: 1.45rem;
}

/* Tooltip text is drawn with box-shadow-safe text via an extra generated layer. */
.sol-planet-nav a[data-label]:not(.is-active)::before,
.sol-planet-nav a[data-label].is-active span + * {
    content: none;
}

/* Because active rocket uses ::before and ::after, draw tooltip from a child span replacement. */
.sol-planet-nav a[data-label] span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 1.35rem !important;
    z-index: 9999 !important;

    min-width: max-content;
    padding: 0.25rem 0.45rem;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.25rem;
    background: rgba(6, 10, 20, 0.96);

    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-indent: 0 !important;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(0.2rem);
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.sol-planet-nav a[data-label]:hover span,
.sol-planet-nav a[data-label]:focus-visible span {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sol-planet-nav a[data-label] span::before,
.sol-planet-nav a[data-label] span::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SOL PLANET NAV HOVER TARGET FIX
   Enlarges the interactive area without changing planet visuals.
========================================================= */

.sol-planet-nav a {
    box-sizing: content-box;
    padding: 0.42rem;
    margin: -0.42rem;
    background-clip: content-box;
}

/* Keep the route line visually behind the enlarged hit targets */
.sol-planet-nav::before {
    pointer-events: none;
}

/* Tooltip should appear whenever the enlarged anchor is hovered/focused */
.sol-planet-nav a:hover span,
.sol-planet-nav a:focus-visible span,
.sol-planet-nav a.is-active:hover span,
.sol-planet-nav a.is-active:focus-visible span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* =========================================================
   SOL PLANET NAV HOVER TARGET UNDO
   Restores planet visuals after enlarged hit-area test.
========================================================= */

.sol-planet-nav a {
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    background-clip: border-box !important;
}


/* =========================================================
   SOL PLANET NAV SATURN RING RESTORE
   Restores Saturn ring by freeing ::before from rocket fins.
========================================================= */

/* Remove rocket fins layer because it conflicts with Saturn ring. */
.sol-planet-nav a.is-active::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Restore Saturn ring for inactive and active states. */
.sol-planet-nav a.saturn::before,
.sol-planet-nav a.saturn.is-active::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;

    width: 1.65rem;
    height: 0.5rem;

    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    background: transparent !important;

    opacity: 0.82 !important;
    pointer-events: none;

    transform: translate(-50%, -50%) rotate(-18deg) !important;
    animation: none !important;
}

.sol-planet-nav a.saturn.is-active::before {
    opacity: 1 !important;
    box-shadow: 0 0 0.45rem currentColor;
}

/* Keep the active rocket above the Saturn ring. */
.sol-planet-nav a.is-active::after {
    z-index: 3;
}


/* =========================================================
/* =========================================================
   SOL PLANET NAV TOOLTIP FINAL OVERLAY
   Independent tooltip layer. Keeps existing planet visuals.
========================================================= */

.sol-planet-nav a > span {
    display: none !important;
}

.sol-nav-tooltip {
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;

    padding: 0.28rem 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.25rem;

    background: rgba(6, 10, 20, 0.96);
    color: #fff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -100%) translateY(-0.35rem);
    transition:
        opacity 0.14s ease,
        visibility 0.14s ease,
        transform 0.14s ease;
}

.sol-nav-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) translateY(-0.55rem);
}


/* =========================================================
   SOL PLANET NAV OLD TOOLTIP KILL SWITCH
   Prevents the original span-based tooltip from rendering.
========================================================= */

.sol-planet-nav a span,
.sol-planet-nav a:hover span,
.sol-planet-nav a:focus-visible span,
.sol-planet-nav a.is-active:hover span,
.sol-planet-nav a.is-active:focus-visible span,
.sol-planet-nav a span::before,
.sol-planet-nav a span::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    content: none !important;
}


/* =========================================================
   SOL PLANET NAV SATURN RING MASK
   Shows Saturn ring as a partial/front arc only.
========================================================= */

.sol-planet-nav a.saturn::before,
.sol-planet-nav a.saturn.is-active::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;

    width: 1.65rem;
    height: 0.5rem;

    border-width: 1px !important;
    border-style: solid !important;
    border-color: transparent currentColor currentColor currentColor !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;
    opacity: 0.82 !important;
    pointer-events: none;

    transform: translate(-50%, -50%) rotate(-18deg) !important;
    animation: none !important;
}

/* Keep hover/active from revealing the full rear ring */
.sol-planet-nav a.saturn:hover::before,
.sol-planet-nav a.saturn:focus-visible::before,
.sol-planet-nav a.saturn.is-active:hover::before,
.sol-planet-nav a.saturn.is-active:focus-visible::before {
    border-color: transparent currentColor currentColor currentColor !important;
    opacity: 0.9 !important;
    box-shadow: none !important;
}


/* =========================================================
   SOL FOOTER BALANCE
   Aligns footer visually with centred planet route.
========================================================= */

.footer {
    position: fixed;
    right: 0;
    bottom: 0.55rem;
    left: 0;
    z-index: 850;
    display: flex;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.footer .copyright,
.copyright {
    display: inline-block;
    max-width: 38rem;
    margin: 0 auto;
    padding: 0 1rem;

    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-align: center;
}

.footer .copyright a,
.copyright a {
    pointer-events: auto;
}

@media screen and (max-width: 736px) {
    .footer {
        position: static;
        margin: 1rem auto 0;
        padding: 0 1rem 1rem;
    }

    .footer .copyright,
    .copyright {
        max-width: none;
        font-size: 0.72rem;
    }
}


/* =========================================================
   SOL FOOTER SINGLE-LINE RESET
========================================================= */

.footer {
    position: fixed;
    right: 0;
    bottom: 0.55rem;
    left: 0;
    z-index: 850;

    display: flex;
    justify-content: center;

    pointer-events: none;
    text-align: center;
}

.footer .copyright {
    display: inline-block;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1rem;

    color: rgba(255, 255, 255, 0.62);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-align: center;
}

.footer .copyright a {
    pointer-events: auto;
}

@media screen and (max-width: 736px) {
    .footer {
        position: static;
        margin: 1rem auto 0;
        padding: 0 1rem 1rem;
    }

    .footer .copyright {
        max-width: none;
        font-size: 0.72rem;
    }
}


/* =========================================================
   SOL FOOTER / PLANET ROUTE SPACING TUNE
   Position-only adjustment.
========================================================= */

.sol-planet-nav {
    bottom: 3.25rem;
}

.footer {
    bottom: 0.48rem;
}

.footer .copyright {
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.64rem;
    line-height: 1.25;
}

/* Keep tooltip clear of footer/nav compression */
.sol-nav-tooltip {
    transform: translate(-50%, -100%) translateY(-0.65rem);
}

.sol-nav-tooltip.is-visible {
    transform: translate(-50%, -100%) translateY(-0.85rem);
}


/* =========================================================
   SOL FOOTER / PLANET ROUTE TRUE CENTRE FIX
   Forces nav and footer to share the same viewport centre anchor.
========================================================= */

.sol-planet-nav {
    left: 50% !important;
    right: auto !important;
    bottom: 3.35rem !important;
    width: max-content !important;
    transform: translateX(-50%) !important;
}

.footer {
    left: 50% !important;
    right: auto !important;
    bottom: 0.55rem !important;
    width: max-content !important;
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%) !important;
}

.footer .copyright {
    display: block;
    width: max-content;
    max-width: calc(100vw - 2rem);
    margin: 0 auto;
    padding: 0;
    text-align: center;
    white-space: nowrap;
}

@media screen and (max-width: 736px) {
    .footer {
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: none;
        transform: none !important;
    }

    .footer .copyright {
        width: auto;
        max-width: none;
        white-space: normal;
    }
}


/* =========================================================
   SOL FOOTER / PLANET ROUTE VIEWPORT CENTRE FIX
   Uses viewport units so horizontal document width cannot offset alignment.
========================================================= */

.sol-planet-nav {
    left: 50vw !important;
    right: auto !important;
    bottom: 3.35rem !important;
    width: max-content !important;
    max-width: calc(100vw - 2rem) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
}

.footer {
    left: 0 !important;
    right: auto !important;
    bottom: 0.55rem !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;

    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    pointer-events: none !important;
}

.footer .copyright {
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
    margin: 0 auto !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.54) !important;
    font-size: 0.64rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

@media screen and (max-width: 736px) {
    .sol-planet-nav {
        display: none !important;
    }

    .footer {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 1rem 1rem !important;
    }

    .footer .copyright {
        max-width: none !important;
        white-space: normal !important;
    }
}


/* =========================================================
   SOL HERO PANEL PASS
   Visual-only. Does not alter panel width, nav, footer, or scroll positions.
========================================================= */

#home .content.color0 {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(244, 198, 106, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(95, 178, 255, 0.13),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(5, 10, 22, 0.96),
            rgba(14, 18, 34, 0.92)
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Subtle orbital graphic inside hero only */
#home .content.color0::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -3.5rem;
    z-index: -1;

    width: 13rem;
    height: 13rem;

    border: 1px solid rgba(244, 198, 106, 0.14);
    border-radius: 50%;

    box-shadow:
        inset 0 0 0 1.2rem rgba(255, 255, 255, 0.018),
        0 0 3rem rgba(95, 178, 255, 0.08);

    pointer-events: none;
}

/* Small route marker */
#home .content.color0::before {
    content: "MISSION ENTRY / HORIZONTAL SOLAR BRIEFING";
    display: block;
    margin-bottom: 0.85rem;

    color: rgba(244, 198, 106, 0.76);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Hero title discipline */
#home h1.majorblack {
    margin: 0 0 1.15rem 0;

    color: rgba(255, 255, 255, 0.96);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(3.4rem, 5vw, 5.3rem);
    line-height: 0.92;
    letter-spacing: -0.08em;

    text-shadow: 0 0 2rem rgba(95, 178, 255, 0.16);
}

/* Hero copy */
#home .content p {
    max-width: 31rem;

    color: rgba(255, 255, 255, 0.76);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.58;
    text-align: left;
}

/* CTA: briefing-style but still template-compatible */
#home .sol-hero-actions {
    display: flex;
    margin: 0 0 1.15rem 0;
    padding: 0;
    list-style: none;
}

#home .sol-hero-actions li {
    padding-left: 0;
}

#home .sol-hero-actions .button {
    color: rgba(255, 255, 255, 0.94) !important;
    box-shadow: inset 0 0 0 2px rgba(244, 198, 106, 0.42);
    white-space: nowrap;
}

#home .sol-hero-actions .button:hover {
    color: #ffe4b4 !important;
    box-shadow: inset 0 0 0 2px rgba(255, 228, 180, 0.9);
}

/* Hero image: make it feel like part of the hero without moving it */
#home .image::after {
    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 22, 0.34),
            rgba(5, 10, 22, 0.04)
        ),
        url("../../images/overlay.png");
    background-size: auto, 128px 128px;
    opacity: 1;
}

/* Keep mobile simple */
@media screen and (max-width: 736px) {
    #home .content.color0::after {
        display: none;
    }

    #home h1.majorblack {
        font-size: 3rem;
        letter-spacing: -0.05em;
    }

    #home .content p {
        max-width: none;
    }
}



/* =========================================================
   SOL TOP MASTHEAD
   Fixed viewport overlay for the empty top space.
   Does not affect panel layout or horizontal scroll positions.
========================================================= */

.sol-top-masthead {
    position: fixed;
    top: 0.85rem;
    left: 50vw;
    z-index: 1200;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;

    width: min(72rem, calc(100vw - 4rem));
    padding: 0.55rem 0;

    color: rgba(255, 255, 255, 0.62);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;

    pointer-events: none;
    transform: translateX(-50%);
}

.sol-top-masthead::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(244, 198, 106, 0),
        rgba(244, 198, 106, 0.42),
        rgba(255, 255, 255, 0.12),
        rgba(95, 178, 255, 0.32),
        rgba(95, 178, 255, 0)
    );
}

.sol-top-masthead__mark {
    justify-self: start;
    color: rgba(244, 198, 106, 0.78);
}

.sol-top-masthead__title {
    justify-self: center;
    color: rgba(255, 255, 255, 0.74);
}

.sol-top-masthead__meta {
    justify-self: end;
    color: rgba(95, 178, 255, 0.68);
}

@media screen and (max-width: 736px) {
    .sol-top-masthead {
        display: none;
    }
}


/* =========================================================
   SOL LEFT SECTION BACKGROUND FIX
   Removes inherited lilac/purple Ethereal panel tone from new info sections.
========================================================= */

#wrapper > .sol-left-section {
    background:
        linear-gradient(
            135deg,
            rgba(5, 10, 22, 0.98),
            rgba(14, 18, 34, 0.94)
        ) !important;
}

#wrapper > .sol-left-section .intro,
#wrapper > .sol-left-section .inner {
    background:
        radial-gradient(
            circle at 100% 20%,
            rgba(95, 178, 255, 0.11),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(6, 11, 23, 0.98),
            rgba(15, 20, 38, 0.94)
        ) !important;

    background-color: transparent !important;
    background-image:
        radial-gradient(
            circle at 100% 20%,
            rgba(95, 178, 255, 0.11),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(6, 11, 23, 0.98),
            rgba(15, 20, 38, 0.94)
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.84);
}

/* Remove template colour wash on the left info sections only */
#wrapper > .sol-left-section.color1,
#wrapper > .sol-left-section.color2,
#wrapper > .sol-left-section.color3,
#wrapper > .sol-left-section.color4 {
    background-color: transparent !important;
    background-image: none !important;
}

/* Keep the section text aligned with the dark briefing palette */
#wrapper > .sol-left-section .intro p:not(.sol-left-section__eyebrow) {
    color: rgba(255, 255, 255, 0.72);
}

#wrapper > .sol-left-section .sol-left-section__eyebrow {
    color: rgba(244, 198, 106, 0.68);
}

#wrapper > .sol-left-section .sol-left-section__list strong {
    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   SOL LEFT SECTION COMPACT CARD PASS
   Makes each left info section read as one attached card.
   Reduces total width by roughly one third.
========================================================= */

#wrapper > .sol-left-section {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(5, 10, 22, 0.98),
            rgba(14, 18, 34, 0.94)
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Visually merge the two Ethereal child blocks into one card */
#wrapper > .sol-left-section .intro,
#wrapper > .sol-left-section .inner {
    background: transparent !important;
    background-image: none !important;
    border-right: 0 !important;
}

/* Total was roughly 28rem. New total is roughly 18.5rem. */
#wrapper > .sol-left-section .intro {
    width: 8.75rem !important;
    min-width: 8.75rem !important;
    padding-left: 1.25rem;
    padding-right: 0.75rem;
}

#wrapper > .sol-left-section .inner {
    width: 9.75rem !important;
    min-width: 9.75rem !important;
    padding-left: 0.75rem;
    padding-right: 1.25rem;
}

/* One-card depth layer */
#wrapper > .sol-left-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(95, 178, 255, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 72%,
            rgba(244, 198, 106, 0.08),
            transparent 32%
        );

    pointer-events: none;
}

#wrapper > .sol-left-section .intro,
#wrapper > .sol-left-section .inner {
    z-index: 1;
}

/* Tighten type for the narrower card */
#wrapper > .sol-left-section__eyebrow,
#wrapper > .sol-left-section .sol-left-section__eyebrow {
    margin-bottom: 0.36rem;
    font-size: 0.52rem;
    letter-spacing: 0.14em;
}

#wrapper > .sol-left-section h2.major {
    max-width: 7rem;
    margin-bottom: 0.85rem;
    font-size: 1.25rem;
    line-height: 1.04;
}

#wrapper > .sol-left-section .intro p:not(.sol-left-section__eyebrow) {
    max-width: 7rem;
    font-size: 0.68rem;
    line-height: 1.38;
}

/* Fix the list spacing so labels/values do not run together */
#wrapper > .sol-left-section__list,
#wrapper > .sol-left-section .sol-left-section__list {
    justify-content: center;
}

#wrapper > .sol-left-section .sol-left-section__list article {
    padding: 0.42rem 0;
}

#wrapper > .sol-left-section .sol-left-section__list strong {
    margin-bottom: 0.12rem;
    font-size: 0.5rem;
    letter-spacing: 0.14em;
}

#wrapper > .sol-left-section .sol-left-section__list span {
    display: block;
    font-size: 0.68rem;
    line-height: 1.25;
}

/* Mobile remains full-width stacked */
@media screen and (max-width: 736px) {
    #wrapper > .sol-left-section .intro,
    #wrapper > .sol-left-section .inner {
        width: 100% !important;
        min-width: 0 !important;
    }

    #wrapper > .sol-left-section h2.major,
    #wrapper > .sol-left-section .intro p:not(.sol-left-section__eyebrow) {
        max-width: none;
    }
}


/* =========================================================
   SOL LEFT SECTION SINGLE CARD FIX
   Forces each left info section into one compact vertical card.
   Existing planet plates remain untouched.
========================================================= */

#wrapper > .sol-left-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 18rem !important;
    min-width: 18rem !important;
    height: 100% !important;

    padding: 0 !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 78% 26%,
            rgba(95, 178, 255, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 16% 74%,
            rgba(244, 198, 106, 0.08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(5, 10, 22, 0.98),
            rgba(14, 18, 34, 0.95)
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Override Ethereal child-panel behaviour inside the left info card */
#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    padding: 0 1.45rem !important;

    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Top content block */
#wrapper > .sol-left-section > .intro {
    margin: 0 0 1.15rem 0 !important;
}

/* Bottom list block */
#wrapper > .sol-left-section > .inner {
    margin: 0 !important;
}

/* Kill the previous split-card pseudo background */
#wrapper > .sol-left-section::before,
#wrapper > .sol-left-section::after {
    content: none !important;
    display: none !important;
}

/* Typography for the single-card layout */
#wrapper > .sol-left-section .sol-left-section__eyebrow {
    margin: 0 0 0.45rem 0 !important;

    color: rgba(244, 198, 106, 0.74);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

#wrapper > .sol-left-section h2.major {
    margin: 0 0 0.8rem 0 !important;
    max-width: none !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-align: left;
}

#wrapper > .sol-left-section .intro p:not(.sol-left-section__eyebrow) {
    max-width: none !important;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 550;
    line-height: 1.42;
    text-align: left;
}

/* List now sits below the intro in the same card */
#wrapper > .sol-left-section .sol-left-section__list {
    display: block !important;
}

#wrapper > .sol-left-section .sol-left-section__list article {
    display: grid !important;
    grid-template-columns: 4.6rem 1fr;
    gap: 0.7rem;
    align-items: baseline;

    padding: 0.42rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#wrapper > .sol-left-section .sol-left-section__list article:last-child {
    border-bottom: 0;
}

#wrapper > .sol-left-section .sol-left-section__list strong {
    display: block;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.52);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

#wrapper > .sol-left-section .sol-left-section__list span {
    display: block;
    margin: 0 !important;

    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
}

/* Keep existing accent classes working */
#wrapper > .sol-left-section--sol h2.major,
#wrapper > .sol-left-section--sol .sol-left-section__list span {
    color: var(--sol-accent-sol);
}

#wrapper > .sol-left-section--mercury h2.major,
#wrapper > .sol-left-section--mercury .sol-left-section__list span {
    color: var(--sol-accent-mercury);
}

#wrapper > .sol-left-section--venus h2.major,
#wrapper > .sol-left-section--venus .sol-left-section__list span {
    color: var(--sol-accent-venus);
}

#wrapper > .sol-left-section--earth h2.major,
#wrapper > .sol-left-section--earth .sol-left-section__list span {
    color: var(--sol-accent-earth);
}

#wrapper > .sol-left-section--mars h2.major,
#wrapper > .sol-left-section--mars .sol-left-section__list span {
    color: var(--sol-accent-mars);
}

#wrapper > .sol-left-section--jupiter h2.major,
#wrapper > .sol-left-section--jupiter .sol-left-section__list span {
    color: var(--sol-accent-jupiter);
}

#wrapper > .sol-left-section--saturn h2.major,
#wrapper > .sol-left-section--saturn .sol-left-section__list span {
    color: var(--sol-accent-saturn);
}

#wrapper > .sol-left-section--uranus h2.major,
#wrapper > .sol-left-section--uranus .sol-left-section__list span {
    color: var(--sol-accent-uranus);
}

#wrapper > .sol-left-section--neptune h2.major,
#wrapper > .sol-left-section--neptune .sol-left-section__list span {
    color: var(--sol-accent-neptune);
}

@media screen and (max-width: 736px) {
    #wrapper > .sol-left-section {
        width: 100% !important;
        min-width: 0 !important;
    }

    #wrapper > .sol-left-section > .intro,
    #wrapper > .sol-left-section > .inner {
        padding: 1.5rem !important;
    }

    #wrapper > .sol-left-section .sol-left-section__list article {
        grid-template-columns: 1fr;
        gap: 0.12rem;
    }
}


/* =========================================================
   SOL LEFT SECTION BACKGROUND CARD FIX
   Restores a visible single-card background for left info sections.
========================================================= */

#wrapper > .sol-left-section {
    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(95, 178, 255, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 78%,
            rgba(244, 198, 106, 0.1),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(5, 10, 22, 0.98) 0%,
            rgba(10, 15, 30, 0.97) 48%,
            rgba(16, 20, 38, 0.95) 100%
        ) !important;

    background-color: rgba(5, 10, 22, 0.98) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.055),
        inset -1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Keep children transparent so the parent reads as one card */
#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Add a subtle internal divider only, not a second panel */
#wrapper > .sol-left-section > .intro {
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#wrapper > .sol-left-section > .inner {
    padding-top: 0.9rem !important;
}

/* Remove any previous pseudo-layer that may be making it look transparent */
#wrapper > .sol-left-section::before,
#wrapper > .sol-left-section::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SOL LEFT SECTION MATCH AT-A-GLANCE
   Makes new left info cards use the same dark card language
   as the Solar System at-a-glance panel.
========================================================= */

#wrapper > .sol-left-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 18rem !important;
    min-width: 18rem !important;
    height: 100% !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98) 0%,
            rgba(18, 18, 32, 0.97) 48%,
            rgba(26, 30, 48, 0.95) 100%
        ) !important;

    background-color: #111524 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.11) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        inset -1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

/* Remove inherited Ethereal/nebula transparency from child blocks */
#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* One-card stacked layout */
#wrapper > .sol-left-section > .intro {
    margin: 0 0 1rem 0 !important;
    padding: 0 1.55rem 1rem 1.55rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#wrapper > .sol-left-section > .inner {
    margin: 0 !important;
    padding: 0.85rem 1.55rem 0 1.55rem !important;
}

/* Kill all previous pseudo backgrounds */
#wrapper > .sol-left-section::before,
#wrapper > .sol-left-section::after {
    content: none !important;
    display: none !important;
}

/* Text layout */
#wrapper > .sol-left-section .sol-left-section__eyebrow {
    margin: 0 0 0.42rem 0 !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

#wrapper > .sol-left-section h2.major {
    margin: 0 0 0.8rem 0 !important;
    max-width: none !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
}

#wrapper > .sol-left-section .intro p:not(.sol-left-section__eyebrow) {
    max-width: none !important;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    line-height: 1.42 !important;
    text-align: left !important;
}

/* List sits inside same card, not a second visual panel */
#wrapper > .sol-left-section .sol-left-section__list {
    display: block !important;
}

#wrapper > .sol-left-section .sol-left-section__list article {
    display: grid !important;
    grid-template-columns: 4.5rem 1fr !important;
    gap: 0.7rem !important;
    align-items: baseline !important;

    padding: 0.42rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#wrapper > .sol-left-section .sol-left-section__list article:last-child {
    border-bottom: 0 !important;
}

#wrapper > .sol-left-section .sol-left-section__list strong {
    display: block !important;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.52) !important;
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

#wrapper > .sol-left-section .sol-left-section__list span {
    display: block !important;
    margin: 0 !important;

    font-size: 0.68rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

/* Maintain planet accents */
#wrapper > .sol-left-section--sol .sol-left-section__eyebrow,
#wrapper > .sol-left-section--sol h2.major,
#wrapper > .sol-left-section--sol .sol-left-section__list span {
    color: var(--sol-accent-sol) !important;
}

#wrapper > .sol-left-section--mercury .sol-left-section__eyebrow,
#wrapper > .sol-left-section--mercury h2.major,
#wrapper > .sol-left-section--mercury .sol-left-section__list span {
    color: var(--sol-accent-mercury) !important;
}

#wrapper > .sol-left-section--venus .sol-left-section__eyebrow,
#wrapper > .sol-left-section--venus h2.major,
#wrapper > .sol-left-section--venus .sol-left-section__list span {
    color: var(--sol-accent-venus) !important;
}

#wrapper > .sol-left-section--earth .sol-left-section__eyebrow,
#wrapper > .sol-left-section--earth h2.major,
#wrapper > .sol-left-section--earth .sol-left-section__list span {
    color: var(--sol-accent-earth) !important;
}

#wrapper > .sol-left-section--mars .sol-left-section__eyebrow,
#wrapper > .sol-left-section--mars h2.major,
#wrapper > .sol-left-section--mars .sol-left-section__list span {
    color: var(--sol-accent-mars) !important;
}

#wrapper > .sol-left-section--jupiter .sol-left-section__eyebrow,
#wrapper > .sol-left-section--jupiter h2.major,
#wrapper > .sol-left-section--jupiter .sol-left-section__list span {
    color: var(--sol-accent-jupiter) !important;
}

#wrapper > .sol-left-section--saturn .sol-left-section__eyebrow,
#wrapper > .sol-left-section--saturn h2.major,
#wrapper > .sol-left-section--saturn .sol-left-section__list span {
    color: var(--sol-accent-saturn) !important;
}

#wrapper > .sol-left-section--uranus .sol-left-section__eyebrow,
#wrapper > .sol-left-section--uranus h2.major,
#wrapper > .sol-left-section--uranus .sol-left-section__list span {
    color: var(--sol-accent-uranus) !important;
}

#wrapper > .sol-left-section--neptune .sol-left-section__eyebrow,
#wrapper > .sol-left-section--neptune h2.major,
#wrapper > .sol-left-section--neptune .sol-left-section__list span {
    color: var(--sol-accent-neptune) !important;
}

@media screen and (max-width: 736px) {
    #wrapper > .sol-left-section {
        width: 100% !important;
        min-width: 0 !important;
    }

    #wrapper > .sol-left-section .sol-left-section__list article {
        grid-template-columns: 1fr !important;
        gap: 0.12rem !important;
    }
}


/* =========================================================
   SOL LEFT SECTION BACKGROUND ONLY FIX
   Forces the new left cards to use the same solid dark card tone
   as Solar System at a glance.
========================================================= */

#wrapper > .sol-left-section,
#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    background-color: #101524 !important;
    background-image:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 22, 38, 0.98)
        ) !important;
}

#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    box-shadow: none !important;
}

#wrapper > .sol-left-section::before,
#wrapper > .sol-left-section::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SOL LEFT SECTION CONTINUOUS CARD FIX
========================================================= */

#wrapper > .sol-left-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    width: 18rem !important;
    min-width: 18rem !important;
    height: 100% !important;

    padding: 1.75rem 0 1.5rem 0 !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98) 0%,
            rgba(18, 18, 32, 0.97) 48%,
            rgba(26, 30, 48, 0.95) 100%
        ) !important;

    background-color: #111524 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* children must not create their own panels */
#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;

    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* remove the visual break */
#wrapper > .sol-left-section > .intro {
    padding-top: 0 !important;
    padding-bottom: 1.15rem !important;
    border-bottom: 0 !important;
}

#wrapper > .sol-left-section > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* kill pseudo layers */
#wrapper > .sol-left-section::before,
#wrapper > .sol-left-section::after,
#wrapper > .sol-left-section > .intro::before,
#wrapper > .sol-left-section > .intro::after,
#wrapper > .sol-left-section > .inner::before,
#wrapper > .sol-left-section > .inner::after {
    content: none !important;
    display: none !important;
}

/* text positioning */
#wrapper > .sol-left-section .sol-left-section__eyebrow {
    margin: 0 0 0.45rem 0 !important;
    color: rgba(244, 198, 106, 0.78) !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

#wrapper > .sol-left-section h2.major {
    margin: 0 0 0.95rem 0 !important;
    max-width: 10rem !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.55rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
}

#wrapper > .sol-left-section .intro p:not(.sol-left-section__eyebrow) {
    margin: 0 !important;
    max-width: 12rem !important;

    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* fact rows */
#wrapper > .sol-left-section .sol-left-section__list {
    display: block !important;
    margin-top: 0.15rem !important;
}

#wrapper > .sol-left-section .sol-left-section__list article {
    display: grid !important;
    grid-template-columns: 4.6rem 1fr !important;
    gap: 0.8rem !important;
    align-items: start !important;

    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#wrapper > .sol-left-section .sol-left-section__list article:last-child {
    border-bottom: 0 !important;
}

#wrapper > .sol-left-section .sol-left-section__list strong {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

#wrapper > .sol-left-section .sol-left-section__list span {
    margin: 0 !important;
    font-size: 0.69rem !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

@media screen and (max-width: 736px) {
    #wrapper > .sol-left-section {
        width: 100% !important;
        min-width: 0 !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.25rem !important;
    }

    #wrapper > .sol-left-section > .intro,
    #wrapper > .sol-left-section > .inner {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    #wrapper > .sol-left-section .sol-left-section__list article {
        grid-template-columns: 1fr !important;
        gap: 0.15rem !important;
    }
}


/* =========================================================
   SOL LEFT SECTION BACKGROUND REPAIR
   Restores one continuous dark background behind each facts card.
========================================================= */

#wrapper > .sol-left-section {
    position: relative !important;
    isolation: isolate !important;

    background-color: #111524 !important;
    background-image: none !important;

    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Dedicated background layer so child transparency cannot expose page background */
#wrapper > .sol-left-section::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.99) 0%,
            rgba(17, 20, 36, 0.99) 48%,
            rgba(26, 30, 48, 0.97) 100%
        ) !important;

    pointer-events: none !important;
}

/* Keep both internal blocks visually part of the same card */
#wrapper > .sol-left-section > .intro,
#wrapper > .sol-left-section > .inner {
    position: relative !important;
    z-index: 1 !important;

    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Remove only the unwanted break, not the background */
#wrapper > .sol-left-section > .intro {
    border-bottom: 0 !important;
}

#wrapper > .sol-left-section > .inner {
    border-top: 0 !important;
}


/* =========================================================
   SOL LEFT SECTION PLANET BORDER ACCENTS
   3px right border, colour-coded per facts section.
========================================================= */

#wrapper > .sol-left-section {
    border-right-width: 3px !important;
    border-right-style: solid !important;
}

#wrapper > .sol-left-section--sol {
    border-right-color: var(--sol-accent-sol) !important;
}

#wrapper > .sol-left-section--mercury {
    border-right-color: var(--sol-accent-mercury) !important;
}

#wrapper > .sol-left-section--venus {
    border-right-color: var(--sol-accent-venus) !important;
}

#wrapper > .sol-left-section--earth {
    border-right-color: var(--sol-accent-earth) !important;
}

#wrapper > .sol-left-section--mars {
    border-right-color: var(--sol-accent-mars) !important;
}

#wrapper > .sol-left-section--jupiter {
    border-right-color: var(--sol-accent-jupiter) !important;
}

#wrapper > .sol-left-section--saturn {
    border-right-color: var(--sol-accent-saturn) !important;
}

#wrapper > .sol-left-section--uranus {
    border-right-color: var(--sol-accent-uranus) !important;
}

#wrapper > .sol-left-section--neptune {
    border-right-color: var(--sol-accent-neptune) !important;
}


/* =========================================================
   SOL ACTIVE ROUTE / BRIEFING COLOUR PASS
   Matches "Briefing /" and masthead SOL / XX to planet accents.
========================================================= */

/* Facts-card "Briefing /" labels */

#wrapper > .sol-left-section--sol .sol-left-section__eyebrow {
    color: var(--sol-accent-sol) !important;
}

#wrapper > .sol-left-section--mercury .sol-left-section__eyebrow {
    color: var(--sol-accent-mercury) !important;
}

#wrapper > .sol-left-section--venus .sol-left-section__eyebrow {
    color: var(--sol-accent-venus) !important;
}

#wrapper > .sol-left-section--earth .sol-left-section__eyebrow {
    color: var(--sol-accent-earth) !important;
}

#wrapper > .sol-left-section--mars .sol-left-section__eyebrow {
    color: var(--sol-accent-mars) !important;
}

#wrapper > .sol-left-section--jupiter .sol-left-section__eyebrow {
    color: var(--sol-accent-jupiter) !important;
}

#wrapper > .sol-left-section--saturn .sol-left-section__eyebrow {
    color: var(--sol-accent-saturn) !important;
}

#wrapper > .sol-left-section--uranus .sol-left-section__eyebrow {
    color: var(--sol-accent-uranus) !important;
}

#wrapper > .sol-left-section--neptune .sol-left-section__eyebrow {
    color: var(--sol-accent-neptune) !important;
}

/* Top masthead route code */

.sol-top-masthead__mark[data-accent="sol"] {
    color: var(--sol-accent-sol) !important;
}

.sol-top-masthead__mark[data-accent="mercury"] {
    color: var(--sol-accent-mercury) !important;
}

.sol-top-masthead__mark[data-accent="venus"] {
    color: var(--sol-accent-venus) !important;
}

.sol-top-masthead__mark[data-accent="earth"] {
    color: var(--sol-accent-earth) !important;
}

.sol-top-masthead__mark[data-accent="mars"] {
    color: var(--sol-accent-mars) !important;
}

.sol-top-masthead__mark[data-accent="jupiter"] {
    color: var(--sol-accent-jupiter) !important;
}

.sol-top-masthead__mark[data-accent="saturn"] {
    color: var(--sol-accent-saturn) !important;
}

.sol-top-masthead__mark[data-accent="uranus"] {
    color: var(--sol-accent-uranus) !important;
}

.sol-top-masthead__mark[data-accent="neptune"] {
    color: var(--sol-accent-neptune) !important;
}


/* =========================================================
   SOL PLANET PLATE IMAGE READABILITY
   Reduces image brightness/contrast behind existing text.
   No text wrapping, no overlays, no layout changes.
========================================================= */

#wrapper > .panel.spotlight.medium.right > .image.tinted img {
    filter:
        brightness(0.72)
        contrast(0.92)
        saturate(0.92);
}

/* Keep Sol slightly brighter so it still feels luminous */
#wrapper > .panel.spotlight.medium.right#first > .image.tinted img {
    filter:
        brightness(0.78)
        contrast(0.9)
        saturate(0.92);
}


/* =========================================================
   SOL IMAGE POP / TEXT READABILITY BALANCE
   Keeps the Sun vivid while calming only the text side.
   No text wrapping, no layout changes, no content overlays.
========================================================= */

/* Remove broad dimming from the planet plate images */
#wrapper > .panel.spotlight.medium.right > .image.tinted img {
    filter:
        brightness(0.92)
        contrast(1.04)
        saturate(1.05);
}

/* Sol should stay luminous */
#wrapper > .panel.spotlight.medium.right#first > .image.tinted img {
    filter:
        brightness(1.04)
        contrast(1.08)
        saturate(1.12);
}

/* Use the existing tinted image layer to calm the text side only */
#wrapper > .panel.spotlight.medium.right > .image.tinted::after {
    opacity: 1 !important;
    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 22, 0.52) 0%,
            rgba(5, 10, 22, 0.34) 34%,
            rgba(5, 10, 22, 0.12) 58%,
            rgba(5, 10, 22, 0.02) 100%
        ),
        url("../../images/overlay.png") !important;
    background-size: auto, 128px 128px !important;
}

/* Sol gets a lighter text-side calm so the star still pops */
#wrapper > .panel.spotlight.medium.right#first > .image.tinted::after {
    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 22, 0.46) 0%,
            rgba(5, 10, 22, 0.24) 38%,
            rgba(5, 10, 22, 0.06) 62%,
            rgba(5, 10, 22, 0) 100%
        ),
        url("../../images/overlay.png") !important;
    background-size: auto, 128px 128px !important;
}

/* Small type clarity only, not a heavy glow */
#wrapper > .panel.spotlight.medium.right .content p {
    text-shadow: 0 1px 0.55rem rgba(0, 0, 0, 0.32);
}


/* =========================================================
   SOL TEXT ZONE READABILITY TUNE
   Keeps Sun vivid while slightly calming the body-copy area.
========================================================= */

#wrapper > .panel.spotlight.medium.right#first > .image.tinted::after {
    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 22, 0.18) 0%,
            rgba(5, 10, 22, 0.16) 34%,
            rgba(5, 10, 22, 0.38) 58%,
            rgba(5, 10, 22, 0.62) 100%
        ),
        url("../../images/overlay.png") !important;
    background-size: auto, 128px 128px !important;
}

/* Keep the Sol image vivid */
#wrapper > .panel.spotlight.medium.right#first > .image.tinted img {
    filter:
        brightness(1.04)
        contrast(1.08)
        saturate(1.12) !important;
}


/* =========================================================
   SOL GLOBAL BACKGROUND VIBRANCY RESET
   Restores full nebula strength across the whole viewport.
   Does not affect card backgrounds, planet plates, nav, or footer.
========================================================= */

body::after {
    background-color: #050a16 !important;
    background-image:
        url("../../images/overlay.png"),
        url("../../images/test.png") !important;
    background-repeat:
        repeat,
        repeat-x !important;
    background-size:
        128px 128px,
        cover !important;
    background-position:
        var(--sol-star-x) 0,
        var(--sol-bg-x) center !important;
    opacity: 1 !important;
    filter:
        brightness(1.08)
        contrast(1.08)
        saturate(1.18) !important;
}

/* Remove any remaining viewport-level dampening layers */
#page-wrapper::before,
#page-wrapper::after,
body::before {
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep wrapper/cards above the background as before */
#page-wrapper,
#wrapper {
    position: relative;
}

#wrapper {
    z-index: 1;
}


/* =========================================================
   SOL WRAPPER SHADOW BACKGROUND FIX
   Removes the dark cast making the background look different
   above/below and between content cards.
========================================================= */

#wrapper {
    box-shadow: none !important;
}


/* =========================================================
   SOL PLANET DETAIL PAGES UI PASS 01
   CSS-only pass for individual planet pages.
   Does not alter index route, fixed planet nav, or page HTML.
========================================================= */

/* Page hero: match the darker mission-card direction from index */
.sol-page-hero .content.color0 {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 22%,
            rgba(95, 178, 255, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 14% 76%,
            rgba(244, 198, 106, 0.08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98) 0%,
            rgba(18, 18, 32, 0.97) 48%,
            rgba(26, 30, 48, 0.95) 100%
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sol-page-hero .content.color0::before,
.sol-page-hero .content.color0::after {
    content: none !important;
    display: none !important;
}

/* Detail page kicker */
.sol-page-hero .sol-kicker {
    margin: 0 0 0.65rem 0;

    color: rgba(244, 198, 106, 0.78);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

/* Detail page title */
.sol-page-hero h1.majorblack {
    margin: 0 0 1rem 0;

    color: rgba(255, 255, 255, 0.96);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.08em;

    text-shadow:
        0 0 2rem rgba(95, 178, 255, 0.16),
        0 0 0.65rem rgba(0, 0, 0, 0.36);
}

/* Detail page standfirst */
.sol-page-hero .sol-standfirst {
    max-width: 24rem;
    margin: 0 0 1.45rem 0;

    color: rgba(255, 255, 255, 0.76);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.48;
    text-align: left;
}

/* Back button: briefing style */
.sol-page-hero ul.actions {
    margin: 0;
    padding: 0;
}

.sol-page-hero ul.actions li {
    padding-left: 0;
}

.sol-page-hero .button {
    color: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
        inset 0 0 0 2px rgba(244, 198, 106, 0.42),
        0 0 1.2rem rgba(244, 198, 106, 0.08);
}

.sol-page-hero .button:hover {
    color: #ffe4b4 !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 228, 180, 0.9),
        0 0 1.5rem rgba(244, 198, 106, 0.18);
}

/* Hero image: remove old pastel wash and make it feel cinematic */
.sol-page-hero .image {
    background: rgba(5, 10, 22, 0.92);
}

.sol-page-hero .image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 22, 0.28),
            rgba(5, 10, 22, 0.04) 55%,
            rgba(5, 10, 22, 0.16)
        ),
        url("../../images/overlay.png");

    background-size: auto, 128px 128px;
    pointer-events: none;
}

.sol-page-hero .image img {
    filter:
        brightness(1.02)
        contrast(1.04)
        saturate(1.06);
}

/* Overview spotlight: improve readability without changing structure */
#wrapper > .panel.spotlight.medium.right:not(#home) > .content {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.96),
            rgba(16, 20, 38, 0.92)
        ) !important;
}

#wrapper > .panel.spotlight.medium.right:not(#home) h2.major {
    margin-left: 0;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -0.045em;
}

#wrapper > .panel.spotlight.medium.right:not(#home) .push-left {
    max-width: 32rem;

    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.52;
    text-align: left;
}

/* Key facts panel: match dark card direction */
.sol-facts-panel {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 18, 32, 0.97)
        ) !important;
}

.sol-facts-panel .intro,
.sol-facts-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
    background-image:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 18, 32, 0.97)
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sol-facts-panel h2.major,
.sol-detail-panel h2.major {
    margin-left: 0;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -0.045em;
}

.sol-facts-panel .intro p,
.sol-detail-panel .intro p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

/* Fact cards */
.sol-fact-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
    gap: 0.85rem;
    align-content: center;
}

.sol-fact-card {
    padding: 0.9rem 1rem;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.35rem;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        0 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
}

.sol-fact-card h3 {
    margin: 0 0 0.28rem 0;

    color: rgba(244, 198, 106, 0.78);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sol-fact-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
}

/* Why it matters panel */
.sol-detail-panel {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 18, 32, 0.97)
        ) !important;
}

.sol-detail-panel .intro,
.sol-detail-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sol-detail-list ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.sol-detail-list li {
    position: relative;
    margin: 0;
    padding: 0.68rem 0 0.68rem 1.15rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    color: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.42;
}

.sol-detail-list li:last-child {
    border-bottom: 0;
}

.sol-detail-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.17rem;

    width: 0.38rem;
    height: 0.38rem;

    border-radius: 50%;
    background: rgba(244, 198, 106, 0.78);
    box-shadow: 0 0 0.65rem rgba(244, 198, 106, 0.24);
}

.sol-detail-list a {
    color: #ffe4b4;
    border-bottom-color: rgba(255, 228, 180, 0.38);
}

.sol-detail-list a:hover {
    color: #ffffff;
    border-bottom-color: transparent;
}

/* Detail page copyright */
#wrapper > .copyright {
    align-self: flex-end;
    margin: 0 2rem 0 0;
    padding: 0.75rem 0;

    color: rgba(255, 255, 255, 0.54);
    font-size: 0.66rem;
    font-weight: 500;
    white-space: nowrap;
}

@media screen and (max-width: 736px) {
    .sol-page-hero h1.majorblack {
        font-size: 3rem;
        letter-spacing: -0.05em;
    }

    .sol-fact-grid {
        grid-template-columns: 1fr;
    }

    #wrapper > .copyright {
        align-self: auto;
        margin: 1rem;
        white-space: normal;
    }
}


/* =========================================================
   SOL EARTH DETAIL PAGE PASS 01
   Earth-only layout refinement.
========================================================= */

body.sol-detail-page--earth {
    background-color: #050a16;
}

/* Fixed top masthead, matching main route language */
body.sol-detail-page--earth .sol-detail-masthead {
    position: fixed;
    top: 0.85rem;
    left: 50vw;
    z-index: 1200;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;

    width: min(72rem, calc(100vw - 4rem));
    padding: 0.55rem 0;

    color: rgba(255, 255, 255, 0.62);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;

    pointer-events: none;
    transform: translateX(-50%);
}

body.sol-detail-page--earth .sol-detail-masthead::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(95, 178, 255, 0),
        rgba(95, 178, 255, 0.48),
        rgba(255, 255, 255, 0.12),
        rgba(95, 178, 255, 0.48),
        rgba(95, 178, 255, 0)
    );
}

body.sol-detail-page--earth .sol-detail-masthead__mark {
    justify-self: start;
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-detail-masthead__title {
    justify-self: center;
    color: rgba(255, 255, 255, 0.74);
}

body.sol-detail-page--earth .sol-detail-masthead__link {
    justify-self: end;
    color: var(--sol-accent-earth);
    border-bottom: 0;
    pointer-events: auto;
}

body.sol-detail-page--earth .sol-detail-masthead__link:hover {
    color: #ffffff;
}

/* Main row breathing room */
body.sol-detail-page--earth #wrapper {
    box-shadow: none !important;
}

/* Hero spacing */
body.sol-detail-page--earth .sol-page-hero .content.color0 {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
}

body.sol-detail-page--earth .sol-page-hero .sol-kicker {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-page-hero h1.majorblack {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-page-hero .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-earth) 58%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-earth) 16%, transparent);
}

body.sol-detail-page--earth .sol-page-hero .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-earth),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-earth) 28%, transparent);
}

/* Earth-specific accenting inside the detail content */
body.sol-detail-page--earth .sol-fact-card h3,
body.sol-detail-page--earth .sol-detail-list li::before {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-fact-card h3 {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-detail-list li::before {
    background: var(--sol-accent-earth);
    box-shadow: 0 0 0.65rem color-mix(in srgb, var(--sol-accent-earth) 32%, transparent);
}

/* Footer positioning for detail pages */
body.sol-detail-page--earth #wrapper > .copyright {
    position: fixed;
    right: 0;
    bottom: 0.55rem;
    left: 0;
    z-index: 850;

    width: 100vw;
    margin: 0;
    padding: 0 1rem;

    color: rgba(255, 255, 255, 0.54);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;

    pointer-events: none;
}

body.sol-detail-page--earth #wrapper > .copyright a {
    color: rgba(255, 255, 255, 0.68);
    pointer-events: auto;
}

body.sol-detail-page--earth #wrapper > .copyright a:hover {
    color: var(--sol-accent-earth);
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-detail-masthead {
        display: none;
    }

    body.sol-detail-page--earth .sol-page-hero .content.color0 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    body.sol-detail-page--earth #wrapper > .copyright {
        position: static;
        width: auto;
        margin: 1rem;
        white-space: normal;
    }
}


/* =========================================================
   SOL EARTH DETAIL FOOTER CENTRE FIX
   Centres the fixed footer against the visible viewport.
========================================================= */

body.sol-detail-page--earth #wrapper > .copyright {
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    bottom: 0.55rem !important;
    z-index: 850 !important;

    display: block !important;
    width: max-content !important;
    max-width: calc(100vw - 2rem) !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
}

body.sol-detail-page--earth #wrapper > .copyright a {
    pointer-events: auto !important;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth #wrapper > .copyright {
        position: static !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 1rem !important;
        white-space: normal !important;
        transform: none !important;
    }
}


/* =========================================================
   SOL EARTH MAIN CONTENT ROUTE PASS 01
   Reworks Earth detail content into an index-style route.
========================================================= */

/* Route arrows between major Earth sections */
body.sol-detail-page--earth .sol-earth-route-arrow {
    align-self: center;
    margin: 0 1.2rem;
    padding: 0;
}

body.sol-detail-page--earth .sol-earth-route-arrow li {
    padding-left: 0;
}

body.sol-detail-page--earth .sol-earth-route-arrow .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-earth) 54%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-earth) 14%, transparent);
}

body.sol-detail-page--earth .sol-earth-route-arrow .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-earth),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-earth) 26%, transparent);
}

/* Earth facts now behaves like a left briefing card attached to the overview plate */
body.sol-detail-page--earth .sol-earth-briefing {
    display: flex;
    flex-direction: row;

    min-width: 34rem;
    max-width: 34rem;

    border-right: 3px solid var(--sol-accent-earth);
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.98),
            rgba(18, 18, 32, 0.97)
        ) !important;
}

body.sol-detail-page--earth .sol-earth-briefing .intro {
    width: 13rem;
    min-width: 13rem;

    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.sol-detail-page--earth .sol-earth-briefing .inner {
    width: 21rem;
    min-width: 21rem;
}

body.sol-detail-page--earth .sol-earth-briefing h2.major {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-earth-briefing .intro p {
    max-width: 10.5rem;
}

/* Compact the fact cards so the card reads as a briefing file, not a loose grid */
body.sol-detail-page--earth .sol-earth-briefing .sol-fact-grid {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
}

body.sol-detail-page--earth .sol-earth-briefing .sol-fact-card {
    padding: 0.72rem 0.85rem;

    border-color: rgba(95, 178, 255, 0.2);
    border-radius: 0.28rem;

    background:
        linear-gradient(
            135deg,
            rgba(95, 178, 255, 0.085),
            rgba(255, 255, 255, 0.025)
        );
}

body.sol-detail-page--earth .sol-earth-briefing .sol-fact-card h3 {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-earth-briefing .sol-fact-card p {
    font-size: 0.8rem;
}

/* Overview plate sits directly after briefing card */
body.sol-detail-page--earth .sol-earth-overview-plate {
    margin-left: 0;
}

body.sol-detail-page--earth .sol-earth-overview-plate > .content {
    border-left: 0 !important;
}

body.sol-detail-page--earth .sol-earth-overview-plate h2.major {
    color: var(--sol-accent-earth);
}

/* Context panel becomes a cleaner final briefing card */
body.sol-detail-page--earth .sol-earth-context {
    min-width: 34rem;
    max-width: 34rem;

    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 3px solid var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-earth-context h2.major {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-earth-context .intro {
    width: 14rem;
    min-width: 14rem;
}

body.sol-detail-page--earth .sol-earth-context .inner {
    width: 20rem;
    min-width: 20rem;
}

/* Keep the fixed footer clear of the content route */
body.sol-detail-page--earth #wrapper {
    padding-bottom: 2.5rem;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-route-arrow {
        display: none;
    }

    body.sol-detail-page--earth .sol-earth-briefing,
    body.sol-detail-page--earth .sol-earth-context {
        min-width: 0;
        max-width: none;
        width: auto;
        flex-direction: column;
        border-right-width: 0;
    }

    body.sol-detail-page--earth .sol-earth-briefing .intro,
    body.sol-detail-page--earth .sol-earth-briefing .inner,
    body.sol-detail-page--earth .sol-earth-context .intro,
    body.sol-detail-page--earth .sol-earth-context .inner {
        width: auto;
        min-width: 0;
    }
}


/* =========================================================
   SOL EARTH DOSSIER CONTENT PASS 01
   Longer factual read split across horizontal no-scroll panels.
========================================================= */

body.sol-detail-page--earth .sol-earth-dossier {
    display: flex;
    flex-direction: row;

    min-width: 39rem;
    max-width: 39rem;

    overflow: hidden !important;

    border-right: 3px solid var(--sol-accent-earth);

    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;
}

body.sol-detail-page--earth .sol-earth-dossier .intro,
body.sol-detail-page--earth .sol-earth-dossier .inner {
    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;
}

body.sol-detail-page--earth .sol-earth-dossier .intro {
    width: 14.25rem;
    min-width: 14.25rem;

    padding-right: 1.55rem;

    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.sol-detail-page--earth .sol-earth-dossier .inner {
    width: 24.75rem;
    min-width: 24.75rem;
}

body.sol-detail-page--earth .sol-dossier-kicker {
    margin: 0 0 0.72rem 0;

    color: var(--sol-accent-earth);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.17em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

body.sol-detail-page--earth .sol-earth-dossier h2.major {
    margin: 0 0 1rem 0;

    color: var(--sol-accent-earth);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.85rem;
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

body.sol-detail-page--earth .sol-earth-dossier .intro p:not(.sol-dossier-kicker) {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.42;
    text-align: left;
}

body.sol-detail-page--earth .sol-dossier-facts {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 0.58rem;
}

body.sol-detail-page--earth .sol-dossier-facts article {
    display: grid;
    grid-template-columns: 5.9rem 1fr;
    gap: 0.65rem;
    align-items: baseline;

    padding: 0.54rem 0.68rem;

    border: 1px solid rgba(95, 178, 255, 0.18);
    border-radius: 0.28rem;

    background:
        linear-gradient(
            135deg,
            rgba(95, 178, 255, 0.075),
            rgba(255, 255, 255, 0.024)
        );
}

body.sol-detail-page--earth .sol-dossier-facts strong {
    color: var(--sol-accent-earth);
    font-size: 0.56rem;
    font-weight: 850;
    letter-spacing: 0.15em;
    line-height: 1.2;
}

body.sol-detail-page--earth .sol-dossier-facts span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.25;
}

body.sol-detail-page--earth .sol-dossier-copy {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

body.sol-detail-page--earth .sol-dossier-copy h3 {
    margin: 0 0 0.65rem 0;

    color: rgba(255, 255, 255, 0.9);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.94rem;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

body.sol-detail-page--earth .sol-dossier-copy p {
    margin: 0 0 0.82rem 0;

    color: rgba(255, 255, 255, 0.76);
    font-size: 0.78rem;
    font-weight: 620;
    line-height: 1.42;
    text-align: left;
}

body.sol-detail-page--earth .sol-dossier-copy ul,
body.sol-detail-page--earth .sol-dossier-sources ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

body.sol-detail-page--earth .sol-dossier-copy li,
body.sol-detail-page--earth .sol-dossier-sources li {
    position: relative;

    margin: 0;
    padding: 0.36rem 0 0.36rem 0.95rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.28;
}

body.sol-detail-page--earth .sol-dossier-copy li::before,
body.sol-detail-page--earth .sol-dossier-sources li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;

    width: 0.32rem;
    height: 0.32rem;

    border-radius: 50%;
    background: var(--sol-accent-earth);
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-earth) 32%, transparent);
}

body.sol-detail-page--earth .sol-source-note {
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;

    color: color-mix(in srgb, var(--sol-accent-earth) 70%, rgba(255,255,255,0.55)) !important;
    font-size: 0.61rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    line-height: 1.25 !important;
    text-transform: uppercase;
}

body.sol-detail-page--earth .sol-earth-dossier-plate > .content {
    overflow: hidden !important;
}

body.sol-detail-page--earth .sol-earth-dossier-plate .sol-dossier-kicker {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-earth-dossier-plate h2.major {
    color: var(--sol-accent-earth);
}

body.sol-detail-page--earth .sol-earth-dossier-plate .push-left {
    max-width: 31rem;
}

body.sol-detail-page--earth .sol-earth-dossier--sources {
    min-width: 36rem;
    max-width: 36rem;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .intro {
    width: 14rem;
    min-width: 14rem;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
    width: 22rem;
    min-width: 22rem;
}

body.sol-detail-page--earth .sol-dossier-sources {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

body.sol-detail-page--earth .sol-dossier-sources a {
    color: rgba(255, 255, 255, 0.82);
    border-bottom-color: rgba(95, 178, 255, 0.28);
}

body.sol-detail-page--earth .sol-dossier-sources a:hover {
    color: var(--sol-accent-earth);
    border-bottom-color: transparent;
}

/* Dossier route arrows */
body.sol-detail-page--earth .sol-earth-route-arrow {
    align-self: center;
    margin: 0 1.15rem;
    padding: 0;
}

body.sol-detail-page--earth .sol-earth-route-arrow li {
    padding-left: 0;
}

/* Suppress scrollbars inside main Earth content cards */
body.sol-detail-page--earth .panel,
body.sol-detail-page--earth .panel > .intro,
body.sol-detail-page--earth .panel > .inner,
body.sol-detail-page--earth .panel > .content {
    scrollbar-width: none;
}

body.sol-detail-page--earth .panel::-webkit-scrollbar,
body.sol-detail-page--earth .panel > .intro::-webkit-scrollbar,
body.sol-detail-page--earth .panel > .inner::-webkit-scrollbar,
body.sol-detail-page--earth .panel > .content::-webkit-scrollbar {
    display: none;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier,
    body.sol-detail-page--earth .sol-earth-dossier--sources {
        min-width: 0;
        max-width: none;
        width: auto;
        flex-direction: column;
        overflow: visible !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro,
    body.sol-detail-page--earth .sol-earth-dossier .inner,
    body.sol-detail-page--earth .sol-earth-dossier--sources .intro,
    body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
        width: auto;
        min-width: 0;
        overflow: visible !important;
    }
}


/* =========================================================
   SOL EARTH MAGNETOSPHERE OVERFLOW FIX
========================================================= */

body.sol-detail-page--earth #earth-magnetosphere .sol-dossier-copy p {
    font-size: 0.75rem;
    line-height: 1.34;
}

body.sol-detail-page--earth #earth-magnetosphere .sol-dossier-copy li {
    font-size: 0.7rem;
    line-height: 1.24;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}


/* =========================================================
   SOL EARTH DOSSIER BALANCE PASS 01
   Rebalances left/right text columns across Earth dossier cards.
   Fixes long titles such as Magnetosphere without adding scrollbars.
========================================================= */

body.sol-detail-page--earth .sol-earth-dossier {
    min-width: 41rem !important;
    max-width: 41rem !important;
}

/* Give section titles enough width to breathe */
body.sol-detail-page--earth .sol-earth-dossier .intro {
    width: 16.25rem !important;
    min-width: 16.25rem !important;
    padding-right: 1.65rem !important;
}

/* Keep total card width controlled by taking a little space from the copy side */
body.sol-detail-page--earth .sol-earth-dossier .inner {
    width: 24.75rem !important;
    min-width: 24.75rem !important;
}

/* Title balance across all dossier cards */
body.sol-detail-page--earth .sol-earth-dossier h2.major {
    max-width: 13.5rem !important;

    font-size: 1.58rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;

    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance;
}

/* Keep intro body text visually aligned after wider title column */
body.sol-detail-page--earth .sol-earth-dossier .intro p:not(.sol-dossier-kicker) {
    max-width: 12.5rem !important;
}

/* Slightly tighten the right copy so the wider title column does not create new overflow */
body.sol-detail-page--earth .sol-dossier-copy h3 {
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
}

body.sol-detail-page--earth .sol-dossier-copy p {
    font-size: 0.75rem !important;
    line-height: 1.34 !important;
}

body.sol-detail-page--earth .sol-dossier-copy li {
    font-size: 0.7rem !important;
    line-height: 1.24 !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Source notes are useful, but should not dominate the card */
body.sol-detail-page--earth .sol-source-note {
    font-size: 0.57rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.07em !important;
}

/* Snapshot/source panels keep their own proportions */
body.sol-detail-page--earth .sol-earth-dossier--sources {
    min-width: 39rem !important;
    max-width: 39rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .intro {
    width: 15.75rem !important;
    min-width: 15.75rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
    width: 23.25rem !important;
    min-width: 23.25rem !important;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier,
    body.sol-detail-page--earth .sol-earth-dossier--sources {
        min-width: 0 !important;
        max-width: none !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro,
    body.sol-detail-page--earth .sol-earth-dossier .inner,
    body.sol-detail-page--earth .sol-earth-dossier--sources .intro,
    body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
        width: auto !important;
        min-width: 0 !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier h2.major {
        max-width: none !important;
    }
}


/* =========================================================
   SOL EARTH LEFT COLUMN BALANCE PASS 01
   Rebalances dossier intro columns after long-title fix.
========================================================= */

body.sol-detail-page--earth .sol-earth-dossier .intro {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding-left: 3.25rem !important;
    padding-right: 2.25rem !important;
}

/* Move the left briefing stack slightly higher so it aligns better with right copy */
body.sol-detail-page--earth .sol-earth-dossier .intro > * {
    transform: translateY(-1.05rem);
}

/* Let long titles breathe without feeling clipped or cramped */
body.sol-detail-page--earth .sol-earth-dossier h2.major {
    max-width: 100% !important;
    margin-bottom: 0.9rem !important;

    font-size: 1.64rem !important;
    line-height: 1.02 !important;
}

/* Keep the left intro paragraph visually connected to the title */
body.sol-detail-page--earth .sol-earth-dossier .intro p:not(.sol-dossier-kicker) {
    max-width: 100% !important;

    font-size: 0.78rem !important;
    line-height: 1.38 !important;
}

/* Kicker spacing tightened for better vertical balance */
body.sol-detail-page--earth .sol-dossier-kicker {
    margin-bottom: 0.62rem !important;
}

/* The first snapshot card has denser facts, so keep its intro less lifted */
body.sol-detail-page--earth .sol-earth-dossier--snapshot .intro > * {
    transform: translateY(-0.35rem);
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier .intro > *,
    body.sol-detail-page--earth .sol-earth-dossier--snapshot .intro > * {
        transform: none !important;
    }
}


/* =========================================================
   SOL EARTH LEFT TITLE MEASURE FIX
   Prevents long left-column headings touching the divider.
========================================================= */

/* Make intro padding count inside the set column width */
body.sol-detail-page--earth .sol-earth-dossier .intro {
    box-sizing: border-box !important;

    width: 16.25rem !important;
    min-width: 16.25rem !important;

    padding-left: 3rem !important;
    padding-right: 2.75rem !important;
}

/* Keep the actual text block away from the divider */
body.sol-detail-page--earth .sol-earth-dossier .intro .sol-dossier-kicker,
body.sol-detail-page--earth .sol-earth-dossier .intro h2.major,
body.sol-detail-page--earth .sol-earth-dossier .intro p {
    max-width: 10.35rem !important;
}

/* Long titles should wrap before they hit the divider */
body.sol-detail-page--earth .sol-earth-dossier .intro h2.major {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;

    font-size: 1.52rem !important;
    line-height: 1.03 !important;
}

/* Magnetosphere specifically needs a slightly smaller measure */
body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
    max-width: 9.8rem !important;
    font-size: 1.44rem !important;
}

/* Keep the left intro copy aligned with the new title measure */
body.sol-detail-page--earth .sol-earth-dossier .intro p:not(.sol-dossier-kicker) {
    max-width: 10.35rem !important;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier .intro,
    body.sol-detail-page--earth .sol-earth-dossier .intro .sol-dossier-kicker,
    body.sol-detail-page--earth .sol-earth-dossier .intro h2.major,
    body.sol-detail-page--earth .sol-earth-dossier .intro p,
    body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
        max-width: none !important;
    }
}


/* =========================================================
   SOL EARTH LEFT COLUMN EXTEND PASS 01
   Keeps long dossier headings on one line by widening the
   left intro column instead of wrapping the title.
========================================================= */

/* Widen the whole dossier card to allow a larger left intro column */
body.sol-detail-page--earth .sol-earth-dossier {
    min-width: 44rem !important;
    max-width: 44rem !important;
}

/* Extend left column */
body.sol-detail-page--earth .sol-earth-dossier .intro {
    box-sizing: border-box !important;

    width: 18.75rem !important;
    min-width: 18.75rem !important;

    padding-left: 3.25rem !important;
    padding-right: 2.5rem !important;
}

/* Keep right column stable */
body.sol-detail-page--earth .sol-earth-dossier .inner {
    width: 25.25rem !important;
    min-width: 25.25rem !important;
}

/* Undo previous forced wrapping / tight title measure */
body.sol-detail-page--earth .sol-earth-dossier .intro .sol-dossier-kicker,
body.sol-detail-page--earth .sol-earth-dossier .intro h2.major,
body.sol-detail-page--earth .sol-earth-dossier .intro p,
body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
    max-width: none !important;
}

/* Keep headings single-line where possible */
body.sol-detail-page--earth .sol-earth-dossier .intro h2.major,
body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
    white-space: nowrap !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    font-size: 1.52rem !important;
    line-height: 1.03 !important;
}

/* Keep intro body text readable within the wider left column */
body.sol-detail-page--earth .sol-earth-dossier .intro p:not(.sol-dossier-kicker) {
    max-width: 12.75rem !important;
}

/* Source panel follows the same wider rhythm */
body.sol-detail-page--earth .sol-earth-dossier--sources {
    min-width: 42rem !important;
    max-width: 42rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .intro {
    width: 17.75rem !important;
    min-width: 17.75rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
    width: 24.25rem !important;
    min-width: 24.25rem !important;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier,
    body.sol-detail-page--earth .sol-earth-dossier--sources {
        min-width: 0 !important;
        max-width: none !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro,
    body.sol-detail-page--earth .sol-earth-dossier .inner,
    body.sol-detail-page--earth .sol-earth-dossier--sources .intro,
    body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
        width: auto !important;
        min-width: 0 !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro h2.major,
    body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
        white-space: normal !important;
    }
}


/* =========================================================
   SOL EARTH EXPANDED INFO PASS 01
   Extra source-backed Earth dossier cards.
========================================================= */

/* New card titles need the same one-line treatment as the balanced dossier template */
body.sol-detail-page--earth #earth-water-cycle .intro h2.major,
body.sol-detail-page--earth #earth-climate-engine .intro h2.major,
body.sol-detail-page--earth #earth-biosphere-links .intro h2.major {
    white-space: nowrap !important;
}

/* Climate title is longer, so give it a slight optical reduction */
body.sol-detail-page--earth #earth-climate-engine .intro h2.major,
body.sol-detail-page--earth #earth-biosphere-links .intro h2.major {
    font-size: 1.44rem !important;
}

/* Keep the expanded panels consistent with the wider Earth card rhythm */
body.sol-detail-page--earth #earth-water-cycle,
body.sol-detail-page--earth #earth-climate-engine,
body.sol-detail-page--earth #earth-biosphere-links {
    min-width: 44rem !important;
    max-width: 44rem !important;
}


/* =========================================================
   SOL EARTH EXPANDED COPY PASS 02
   Allows richer verified copy while preserving no-scroll cards.
========================================================= */

/* Give the right text column more breathing room for expanded copy */
body.sol-detail-page--earth .sol-earth-dossier {
    min-width: 49rem !important;
    max-width: 49rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier .intro {
    width: 18.75rem !important;
    min-width: 18.75rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier .inner {
    width: 30.25rem !important;
    min-width: 30.25rem !important;
}

/* Expanded copy: readable but still compact enough for no internal scrollbars */
body.sol-detail-page--earth .sol-dossier-copy p,
body.sol-detail-page--earth .sol-earth-dossier-plate .push-left {
    font-size: 0.74rem !important;
    line-height: 1.31 !important;
    margin-bottom: 0.62rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier-plate .sol-dossier-extra {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.sol-detail-page--earth .sol-dossier-copy h3 {
    margin-bottom: 0.48rem !important;

    font-size: 0.88rem !important;
    line-height: 1.1 !important;
}

body.sol-detail-page--earth .sol-dossier-copy li {
    font-size: 0.67rem !important;
    line-height: 1.2 !important;

    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

body.sol-detail-page--earth .sol-source-note {
    margin-top: 0.08rem !important;

    font-size: 0.54rem !important;
    line-height: 1.14 !important;
}

/* Overview plate has more image room, so keep its text controlled */
body.sol-detail-page--earth .sol-earth-dossier-plate > .content {
    overflow: hidden !important;
}

body.sol-detail-page--earth .sol-earth-dossier-plate .push-left {
    max-width: 33rem !important;
}

/* Keep long left titles on one line after wider card pass */
body.sol-detail-page--earth .sol-earth-dossier .intro h2.major {
    white-space: nowrap !important;
}

@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier {
        min-width: 0 !important;
        max-width: none !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro,
    body.sol-detail-page--earth .sol-earth-dossier .inner {
        width: auto !important;
        min-width: 0 !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro h2.major {
        white-space: normal !important;
    }
}


/* =========================================================
   SOL EARTH BALANCE PASS 02
   Rebalances left/right dossier columns and improves text fill.
========================================================= */

/* Pull the overall dossier width back slightly */
body.sol-detail-page--earth .sol-earth-dossier {
    min-width: 47rem !important;
    max-width: 47rem !important;
}

/* Left briefing column: reduce from the last wider pass */
body.sol-detail-page--earth .sol-earth-dossier .intro {
    box-sizing: border-box !important;

    width: 17.1rem !important;
    min-width: 17.1rem !important;

    padding-left: 2.9rem !important;
    padding-right: 2rem !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Right content column: widen and top-align instead of centering vertically */
body.sol-detail-page--earth .sol-earth-dossier .inner {
    width: 29.9rem !important;
    min-width: 29.9rem !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    padding-top: 2.35rem !important;
    padding-bottom: 2.35rem !important;
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
}

/* Left titles remain one-line and balanced */
body.sol-detail-page--earth .sol-earth-dossier .intro h2.major {
    white-space: nowrap !important;
    overflow: visible !important;

    font-size: 1.56rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;

    margin-bottom: 0.85rem !important;
}

/* Keep left copy measured so it does not feel loose */
body.sol-detail-page--earth .sol-earth-dossier .intro p:not(.sol-dossier-kicker) {
    max-width: 11.7rem !important;

    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

/* Kicker stays compact */
body.sol-detail-page--earth .sol-dossier-kicker {
    margin-bottom: 0.58rem !important;
}

/* Right-side text up a little */
body.sol-detail-page--earth .sol-dossier-copy h3 {
    font-size: 0.96rem !important;
    line-height: 1.14 !important;
    margin-bottom: 0.62rem !important;
}

body.sol-detail-page--earth .sol-dossier-copy p,
body.sol-detail-page--earth .sol-earth-dossier-plate .push-left {
    font-size: 0.79rem !important;
    line-height: 1.42 !important;
    margin-bottom: 0.72rem !important;
}

/* Let the right boxes breathe vertically while staying compact */
body.sol-detail-page--earth .sol-dossier-copy ul {
    margin-top: 0.15rem !important;
}

body.sol-detail-page--earth .sol-dossier-copy li {
    font-size: 0.71rem !important;
    line-height: 1.28 !important;

    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Source note sits comfortably at the bottom of the content flow */
body.sol-detail-page--earth .sol-source-note {
    margin-top: 0.45rem !important;
    margin-bottom: 0 !important;

    font-size: 0.56rem !important;
    line-height: 1.18 !important;
}

/* Keep the special long title safe */
body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
    white-space: nowrap !important;
    font-size: 1.52rem !important;
}

/* Source panel follows the same rhythm */
body.sol-detail-page--earth .sol-earth-dossier--sources {
    min-width: 45rem !important;
    max-width: 45rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .intro {
    width: 17rem !important;
    min-width: 17rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
    width: 28rem !important;
    min-width: 28rem !important;
}

/* Mobile fallback */
@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier,
    body.sol-detail-page--earth .sol-earth-dossier--sources {
        min-width: 0 !important;
        max-width: none !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro,
    body.sol-detail-page--earth .sol-earth-dossier .inner,
    body.sol-detail-page--earth .sol-earth-dossier--sources .intro,
    body.sol-detail-page--earth .sol-earth-dossier--sources .inner {
        width: auto !important;
        min-width: 0 !important;
        padding: inherit !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier .intro h2.major,
    body.sol-detail-page--earth #earth-magnetosphere .intro h2.major {
        white-space: normal !important;
    }
}


/* =========================================================
   SOL EARTH BOTTOM-ANCHORED META PASS 01
   Anchors bullets + source notes from the bottom of each
   right-hand dossier card for consistent visual margins.
========================================================= */

/* Right-hand card content becomes a vertical layout */
body.sol-detail-page--earth .sol-dossier-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    height: 100% !important;
}

/* Push the bullet block toward the bottom consistently */
body.sol-detail-page--earth .sol-dossier-copy ul {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 0.75rem !important;
}

/* Source note stays attached below the bullet block */
body.sol-detail-page--earth .sol-dossier-copy .sol-source-note {
    margin-top: 0.55rem !important;
    margin-bottom: 0 !important;
}

/* Reduce accidental two-line bullet wrapping */
body.sol-detail-page--earth .sol-dossier-copy li {
    max-width: 100% !important;

    font-size: 0.69rem !important;
    line-height: 1.22 !important;

    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.95rem !important;
}

/* Give the bullet text a little more usable line length */
body.sol-detail-page--earth .sol-dossier-copy li::before {
    top: 0.62rem !important;
}

/* Keep paragraph block readable above the anchored meta area */
body.sol-detail-page--earth .sol-dossier-copy p:not(.sol-source-note) {
    font-size: 0.79rem !important;
    line-height: 1.38 !important;
    margin-bottom: 0.68rem !important;
}

body.sol-detail-page--earth .sol-dossier-copy h3 {
    font-size: 0.96rem !important;
    line-height: 1.14 !important;
    margin-bottom: 0.62rem !important;
}


/* =========================================================
   SOL EARTH SINGLE-LINE BULLETS PASS 01
   Prevents bullet lines wrapping and breaking card rhythm.
========================================================= */

body.sol-detail-page--earth .sol-dossier-copy li,
body.sol-detail-page--earth .sol-dossier-sources li {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    max-width: 100% !important;
}

/* Give bullet text the widest possible measure inside the right column */
body.sol-detail-page--earth .sol-dossier-copy ul {
    width: 100% !important;
}

/* Slightly reduce bullet indent so text has more line length */
body.sol-detail-page--earth .sol-dossier-copy li {
    padding-left: 0.78rem !important;
}

/* Reposition bullet dot after the smaller indent */
body.sol-detail-page--earth .sol-dossier-copy li::before {
    left: 0 !important;
}


/* =========================================================
   SOL EARTH BULLET/SOURCE CLEANUP PASS 01
   Removes bullet divider lines and compacts source notes.
========================================================= */

/* Bullet rows should not look like table rows */
body.sol-detail-page--earth .sol-dossier-copy li,
body.sol-detail-page--earth .sol-dossier-sources li {
    border-bottom: 0 !important;
}

/* Bullet block remains bottom-anchored, but lighter */
body.sol-detail-page--earth .sol-dossier-copy ul {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 0.6rem !important;
}

/* Keep bullets compact and single-line */
body.sol-detail-page--earth .sol-dossier-copy li {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
    padding-left: 0.78rem !important;

    font-size: 0.69rem !important;
    line-height: 1.18 !important;
}

/* Smaller marker to reduce visual noise */
body.sol-detail-page--earth .sol-dossier-copy li::before {
    left: 0 !important;
    top: 0.56rem !important;

    width: 0.26rem !important;
    height: 0.26rem !important;
}

/* Source note: compact, single-line, no overflow */
body.sol-detail-page--earth .sol-dossier-copy .sol-source-note {
    display: block !important;

    margin-top: 0.42rem !important;
    margin-bottom: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 0.52rem !important;
    line-height: 1.12 !important;
    letter-spacing: 0.055em !important;
}

/* Give the source note a little more usable width */
body.sol-detail-page--earth .sol-dossier-copy {
    min-width: 0 !important;
}


/* =========================================================
   SOL EARTH READABLE TEXT + SOURCE PASS 01
   Restores readable text sizing and handles long sources
   through compact wording rather than tiny text/ellipsis.
========================================================= */

/* Right column remains bottom-balanced */
body.sol-detail-page--earth .sol-dossier-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    height: 100% !important;
    min-width: 0 !important;
}

/* Restore readable paragraph sizing */
body.sol-detail-page--earth .sol-dossier-copy p:not(.sol-source-note),
body.sol-detail-page--earth .sol-earth-dossier-plate .push-left {
    font-size: 0.79rem !important;
    line-height: 1.38 !important;
    margin-bottom: 0.68rem !important;
}

/* Restore readable section heading */
body.sol-detail-page--earth .sol-dossier-copy h3 {
    font-size: 0.96rem !important;
    line-height: 1.14 !important;
    margin-bottom: 0.62rem !important;
}

/* Bottom block: bullets pushed down, no divider lines */
body.sol-detail-page--earth .sol-dossier-copy ul {
    width: 100% !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 0.62rem !important;
    padding-left: 0 !important;

    list-style: none !important;
}

body.sol-detail-page--earth .sol-dossier-copy li {
    position: relative !important;

    border-bottom: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
    padding-left: 0.78rem !important;

    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
}

body.sol-detail-page--earth .sol-dossier-copy li::before {
    left: 0 !important;
    top: 0.56rem !important;

    width: 0.26rem !important;
    height: 0.26rem !important;
}

/* Source note: readable and single-line because text is now shortened */
body.sol-detail-page--earth .sol-dossier-copy .sol-source-note {
    display: block !important;

    margin-top: 0.42rem !important;
    margin-bottom: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    color: color-mix(in srgb, var(--sol-accent-earth) 70%, rgba(255,255,255,0.55)) !important;
    font-size: 0.58rem !important;
    line-height: 1.18 !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}


/* =========================================================
   SOL EARTH 0.85 TEXT SAFE PASS 01
   Applies 0.85rem body text without changing card geometry.
========================================================= */

/* Requested paragraph size only */
body.sol-detail-page--earth .sol-dossier-copy p:not(.sol-source-note),
body.sol-detail-page--earth .sol-earth-dossier-plate .push-left {
    font-size: 0.85rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.52rem !important;
}

/* Slightly tighten the right-column heading only */
body.sol-detail-page--earth .sol-dossier-copy h3 {
    font-size: 0.96rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.48rem !important;
}

/* Keep bottom meta block compact without changing box width */
body.sol-detail-page--earth .sol-dossier-copy ul {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 0.42rem !important;
}

body.sol-detail-page--earth .sol-dossier-copy li {
    border-bottom: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    font-size: 0.68rem !important;
    line-height: 1.12 !important;

    padding-top: 0.12rem !important;
    padding-bottom: 0.12rem !important;
}

/* Source line stays compact; source wording should use et al. where needed */
body.sol-detail-page--earth .sol-dossier-copy .sol-source-note {
    margin-top: 0.32rem !important;
    margin-bottom: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    font-size: 0.55rem !important;
    line-height: 1.12 !important;
    letter-spacing: 0.052em !important;
}

/* Do not alter the left-column geometry */
body.sol-detail-page--earth .sol-earth-dossier .intro {
    box-sizing: border-box !important;
}


/* =========================================================
   SOL EARTH SOURCE CARDS PASS 01
   Converts final source list into clickable destination cards.
========================================================= */

body.sol-detail-page--earth .sol-earth-source-cards-panel {
    min-width: 52rem !important;
    max-width: 52rem !important;
}

body.sol-detail-page--earth .sol-earth-source-cards-panel .intro {
    width: 16rem !important;
    min-width: 16rem !important;
}

body.sol-detail-page--earth .sol-earth-source-cards-panel .inner {
    width: 36rem !important;
    min-width: 36rem !important;
}

/* Source card grid */
body.sol-detail-page--earth .sol-source-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;

    align-content: center;

    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* Clickable cards */
body.sol-detail-page--earth .sol-source-card {
    display: grid;
    grid-template-columns: 4.1rem 1fr;
    gap: 0.78rem;
    align-items: center;

    min-width: 0;
    padding: 0.62rem 0.72rem;

    border: 1px solid rgba(95, 178, 255, 0.2);
    border-radius: 0.34rem;

    background:
        linear-gradient(
            135deg,
            rgba(95, 178, 255, 0.08),
            rgba(255, 255, 255, 0.026)
        );

    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-bottom: 0 !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        0 0.7rem 1.35rem rgba(0, 0, 0, 0.12);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

body.sol-detail-page--earth .sol-source-card:hover {
    transform: translateY(-1px);

    border-color: color-mix(in srgb, var(--sol-accent-earth) 72%, rgba(255,255,255,0.2));

    background:
        linear-gradient(
            135deg,
            rgba(95, 178, 255, 0.13),
            rgba(255, 255, 255, 0.04)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.055),
        0 0.9rem 1.8rem rgba(0, 0, 0, 0.18),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-earth) 14%, transparent);
}

/* Destination image tile */
body.sol-detail-page--earth .sol-source-card__image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 4.1rem;
    height: 3.1rem;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.28rem;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(95, 178, 255, 0.22),
            rgba(8, 10, 22, 0.92)
        );

    color: var(--sol-accent-earth);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;

    box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.26);
}

/* Subtle source-specific destination image treatment */
body.sol-detail-page--earth .sol-source-card--noaa .sol-source-card__image {
    color: #7fd7ff;
}

body.sol-detail-page--earth .sol-source-card--usgs .sol-source-card__image {
    color: #9bd49a;
}

/* Card text */
body.sol-detail-page--earth .sol-source-card__body {
    display: block;
    min-width: 0;
}

body.sol-detail-page--earth .sol-source-card__body strong {
    display: block;

    margin-bottom: 0.18rem;

    color: rgba(255, 255, 255, 0.92);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: 0.01em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.sol-detail-page--earth .sol-source-card__body span {
    display: block;

    color: rgba(255, 255, 255, 0.64);
    font-size: 0.62rem;
    font-weight: 620;
    line-height: 1.22;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile fallback */
@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-source-cards-panel {
        min-width: 0 !important;
        max-width: none !important;
    }

    body.sol-detail-page--earth .sol-earth-source-cards-panel .intro,
    body.sol-detail-page--earth .sol-earth-source-cards-panel .inner {
        width: auto !important;
        min-width: 0 !important;
    }

    body.sol-detail-page--earth .sol-source-card-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SOL EARTH SOURCE CARDS GRID FIX 01
   Converts source cards from vertical list feel into a compact
   two-column destination grid. Keeps NASA/NOAA/USGS text tiles.
========================================================= */

body.sol-detail-page--earth .sol-earth-source-cards-panel {
    min-width: 56rem !important;
    max-width: 56rem !important;
    overflow: hidden !important;
}

body.sol-detail-page--earth .sol-earth-source-cards-panel .intro {
    width: 16.5rem !important;
    min-width: 16.5rem !important;
}

body.sol-detail-page--earth .sol-earth-source-cards-panel .inner.sol-source-card-grid {
    width: 39.5rem !important;
    min-width: 39.5rem !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 4.15rem !important;
    gap: 0.58rem !important;
    align-content: center !important;

    padding: 2rem 2.1rem !important;

    overflow: hidden !important;
}

/* Individual source card */
body.sol-detail-page--earth .sol-source-card {
    display: grid !important;
    grid-template-columns: 3.65rem minmax(0, 1fr) !important;
    gap: 0.68rem !important;
    align-items: center !important;

    min-width: 0 !important;
    height: 4.15rem !important;
    padding: 0.5rem 0.62rem !important;

    border-radius: 0.32rem !important;
}

/* Destination text image tile */
body.sol-detail-page--earth .sol-source-card__image {
    width: 3.65rem !important;
    height: 2.82rem !important;

    font-size: 0.54rem !important;
    letter-spacing: 0.15em !important;
}

/* Source text */
body.sol-detail-page--earth .sol-source-card__body {
    min-width: 0 !important;
}

body.sol-detail-page--earth .sol-source-card__body strong {
    margin-bottom: 0.16rem !important;

    font-size: 0.7rem !important;
    line-height: 1.08 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.sol-detail-page--earth .sol-source-card__body span {
    font-size: 0.58rem !important;
    line-height: 1.16 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Keep organisation tiles visually distinct */
body.sol-detail-page--earth .sol-source-card--nasa .sol-source-card__image {
    color: var(--sol-accent-earth) !important;
}

body.sol-detail-page--earth .sol-source-card--noaa .sol-source-card__image {
    color: #7fd7ff !important;
}

body.sol-detail-page--earth .sol-source-card--usgs .sol-source-card__image {
    color: #9bd49a !important;
}

/* Mobile fallback */
@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-source-cards-panel {
        min-width: 0 !important;
        max-width: none !important;
    }

    body.sol-detail-page--earth .sol-earth-source-cards-panel .intro,
    body.sol-detail-page--earth .sol-earth-source-cards-panel .inner.sol-source-card-grid {
        width: auto !important;
        min-width: 0 !important;
    }

    body.sol-detail-page--earth .sol-earth-source-cards-panel .inner.sol-source-card-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        padding: 1.5rem !important;
    }

    body.sol-detail-page--earth .sol-source-card {
        height: auto !important;
    }
}


/* =========================================================
   SOL EARTH SNAPSHOT FACTS PASS 01
   Expands Earth file quick facts to 10 compact rows.
========================================================= */

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts {
    gap: 0.42rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts article {
    grid-template-columns: 6rem 1fr !important;

    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts strong {
    font-size: 0.54rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts span {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
}


/* =========================================================
   SOL EARTH SNAPSHOT BALANCE PASS 02
   Rebalance Earth file quick facts into a compact 2-column grid.
========================================================= */

body.sol-detail-page--earth .sol-earth-dossier--snapshot .intro {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .intro p:not(.sol-dossier-kicker) {
    max-width: 13rem !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.72rem 0.72rem !important;

    align-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts article {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    min-width: 0 !important;
    min-height: 4.05rem !important;

    padding: 0.72rem 0.88rem !important;

    border: 1px solid rgba(95, 178, 255, 0.22) !important;
    border-radius: 0.34rem !important;

    background:
        linear-gradient(
            135deg,
            rgba(95, 178, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0.5rem 1.1rem rgba(0, 0, 0, 0.1) !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts strong {
    display: block !important;

    margin: 0 0 0.28rem 0 !important;

    color: var(--sol-accent-earth) !important;

    font-size: 0.56rem !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts span {
    display: block !important;

    max-width: 100% !important;

    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 0.82rem !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Slight extra help for the longest values */
body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts article:nth-child(3) span,
body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts article:nth-child(4) span,
body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts article:nth-child(7) span,
body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts article:nth-child(8) span {
    font-size: 0.78rem !important;
}

/* Mobile fallback */
@media screen and (max-width: 736px) {
    body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts {
        grid-template-columns: 1fr !important;
    }

    body.sol-detail-page--earth .sol-earth-dossier--snapshot .sol-dossier-facts span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}


/* =========================================================
   SOL MARS DETAIL PAGE COLOUR MODE PASS 01
   Mars inherits the Earth master layout and transparency model.
   Only the planet colour identity changes.
========================================================= */

body.sol-detail-page--mars {
    --sol-accent-earth: var(--sol-accent-mars);
    --sol-page-accent: var(--sol-accent-mars);
    --sol-page-base: 210, 92, 54;
}

/* Mars-specific copy in masthead */
body.sol-detail-page--mars .sol-detail-masthead__mark,
body.sol-detail-page--mars .sol-detail-masthead__link,
body.sol-detail-page--mars .sol-kicker,
body.sol-detail-page--mars .sol-dossier-kicker,
body.sol-detail-page--mars .sol-earth-dossier h2.major,
body.sol-detail-page--mars .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mars .sol-source-note {
    color: var(--sol-accent-mars) !important;
}

/* Mars keeps the exact Earth transparency model, only swapping tint colour */
body.sol-detail-page--mars .sol-page-hero .content.color0,
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-dossier .intro,
body.sol-detail-page--mars .sol-earth-dossier .inner,
body.sol-detail-page--mars .sol-earth-dossier-plate > .content,
body.sol-detail-page--mars .sol-earth-source-cards-panel,
body.sol-detail-page--mars .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mars .sol-earth-source-cards-panel .inner {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(var(--sol-page-base), 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(var(--sol-page-base), 0.1),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.16) 0%,
            rgba(8, 10, 22, 0.985) 34%,
            rgba(18, 22, 38, 0.97) 100%
        ) !important;
}

body.sol-detail-page--mars .panel.color1.sol-earth-dossier,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .intro,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .inner {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(var(--sol-page-base), 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985) 0%,
            rgba(var(--sol-page-base), 0.13) 46%,
            rgba(18, 22, 38, 0.97) 100%
        ) !important;
}

/* Mars border / bullet / source-card identity */
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-dossier-copy li::before,
body.sol-detail-page--mars .sol-dossier-sources li::before {
    background: var(--sol-accent-mars) !important;
    box-shadow: 0 0 0.55rem rgba(var(--sol-page-base), 0.34) !important;
}

body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--mars .sol-source-card {
    border-color: rgba(var(--sol-page-base), 0.28) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.12),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--mars .sol-source-card--nasa .sol-source-card__image {
    color: var(--sol-accent-mars) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.24),
            rgba(8, 10, 22, 0.94)
        ) !important;
}


/* =========================================================
   SOL MARS PANEL COLOUR FIX 01
   Removes inherited Earth-blue panel tint from Mars while
   preserving the same dark transparent gradient model.
========================================================= */

body.sol-detail-page--mars {
    --sol-page-base: 210, 92, 54;
    --sol-page-accent: var(--sol-accent-mars);
}

/* Main Mars content panels */
body.sol-detail-page--mars .sol-page-hero .content.color0,
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-dossier .intro,
body.sol-detail-page--mars .sol-earth-dossier .inner,
body.sol-detail-page--mars .sol-earth-dossier-plate > .content,
body.sol-detail-page--mars .sol-earth-source-cards-panel,
body.sol-detail-page--mars .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mars .sol-earth-source-cards-panel .inner {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(var(--sol-page-base), 0.26),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(var(--sol-page-base), 0.15),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.24) 0%,
            rgba(8, 10, 22, 0.985) 34%,
            rgba(28, 18, 16, 0.97) 100%
        ) !important;
}

/* Alternate Mars panels */
body.sol-detail-page--mars .panel.color1.sol-earth-dossier,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .intro,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .inner {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(var(--sol-page-base), 0.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985) 0%,
            rgba(var(--sol-page-base), 0.2) 46%,
            rgba(30, 19, 16, 0.97) 100%
        ) !important;
}

/* Overview spotlight plate: remove inherited blue wash */
body.sol-detail-page--mars .sol-earth-dossier-plate > .content {
    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(var(--sol-page-base), 0.24),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.22),
            rgba(8, 10, 22, 0.985) 42%,
            rgba(28, 18, 16, 0.97)
        ) !important;
}

/* Snapshot fact cards: remove blue card wash */
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts article {
    border-color: rgba(var(--sol-page-base), 0.42) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.18),
            rgba(255, 255, 255, 0.028)
        ) !important;
}

/* Source cards: keep the grid, switch the card tint to Mars */
body.sol-detail-page--mars .sol-source-card {
    border-color: rgba(var(--sol-page-base), 0.38) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.16),
            rgba(255, 255, 255, 0.026)
        ) !important;
}

body.sol-detail-page--mars .sol-source-card:hover {
    border-color: rgba(var(--sol-page-base), 0.72) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.24),
            rgba(255, 255, 255, 0.04)
        ) !important;
}

/* Source destination tiles keep the NASA text, but use Mars tint */
body.sol-detail-page--mars .sol-source-card__image {
    color: var(--sol-accent-mars) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.34),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Accent/border cleanup */
body.sol-detail-page--mars .sol-dossier-kicker,
body.sol-detail-page--mars .sol-earth-dossier h2.major,
body.sol-detail-page--mars .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mars .sol-source-note,
body.sol-detail-page--mars .sol-detail-masthead__mark,
body.sol-detail-page--mars .sol-detail-masthead__link {
    color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-dossier-copy li::before {
    background: var(--sol-accent-mars) !important;
    box-shadow: 0 0 0.55rem rgba(var(--sol-page-base), 0.38) !important;
}


/* =========================================================
   SOL MARS PANEL TRANSPARENCY FIX 02
   Restores Earth-style transparency depth while keeping Mars tint.
========================================================= */

body.sol-detail-page--mars {
    --sol-page-base: 210, 92, 54;
    --sol-page-accent: var(--sol-accent-mars);
}

/* Main Mars panels: same subtle gradient range as Earth, Mars colour only */
body.sol-detail-page--mars .sol-page-hero .content.color0,
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-dossier .intro,
body.sol-detail-page--mars .sol-earth-dossier .inner,
body.sol-detail-page--mars .sol-earth-dossier-plate > .content,
body.sol-detail-page--mars .sol-earth-source-cards-panel,
body.sol-detail-page--mars .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mars .sol-earth-source-cards-panel .inner {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(var(--sol-page-base), 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(var(--sol-page-base), 0.08),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.10) 0%,
            rgba(8, 10, 22, 0.985) 34%,
            rgba(18, 22, 38, 0.97) 100%
        ) !important;
}

/* Alternate panels: keep difference, but do not flood the card red */
body.sol-detail-page--mars .panel.color1.sol-earth-dossier,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .intro,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .inner {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(var(--sol-page-base), 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985) 0%,
            rgba(var(--sol-page-base), 0.09) 46%,
            rgba(18, 22, 38, 0.97) 100%
        ) !important;
}

/* Overview plate: remove heavy Mars wash */
body.sol-detail-page--mars .sol-earth-dossier-plate > .content {
    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(var(--sol-page-base), 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.10),
            rgba(8, 10, 22, 0.985) 42%,
            rgba(18, 22, 38, 0.97)
        ) !important;
}

/* Quick fact cards: less brown, more dark-card-with-Mars-accent */
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts article {
    border-color: rgba(var(--sol-page-base), 0.34) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.08),
            rgba(255, 255, 255, 0.024)
        ) !important;
}

/* Source cards follow the same restrained tint */
body.sol-detail-page--mars .sol-source-card {
    border-color: rgba(var(--sol-page-base), 0.3) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.08),
            rgba(255, 255, 255, 0.026)
        ) !important;
}

body.sol-detail-page--mars .sol-source-card:hover {
    border-color: rgba(var(--sol-page-base), 0.58) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.13),
            rgba(255, 255, 255, 0.04)
        ) !important;
}

/* Keep Mars identity in accents, not heavy panel fill */
body.sol-detail-page--mars .sol-dossier-kicker,
body.sol-detail-page--mars .sol-earth-dossier h2.major,
body.sol-detail-page--mars .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mars .sol-source-note,
body.sol-detail-page--mars .sol-detail-masthead__mark,
body.sol-detail-page--mars .sol-detail-masthead__link {
    color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-dossier-copy li::before {
    background: var(--sol-accent-mars) !important;
    box-shadow: 0 0 0.55rem rgba(var(--sol-page-base), 0.28) !important;
}


/* =========================================================
   SOL MARS DARK RED BASE FIX 01
   Replaces inherited blue-black panel base with a dark Mars
   red/brown base while preserving the same transparency model.
========================================================= */

body.sol-detail-page--mars {
    --sol-page-base: 210, 92, 54;
    --sol-mars-dark: 14, 8, 9;
    --sol-mars-mid: 34, 16, 13;
    --sol-mars-deep: 8, 5, 6;
    --sol-page-accent: var(--sol-accent-mars);
}

/* Main Mars panels: dark red/brown base, not blue/navy */
body.sol-detail-page--mars .sol-page-hero .content.color0,
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-dossier .intro,
body.sol-detail-page--mars .sol-earth-dossier .inner,
body.sol-detail-page--mars .sol-earth-source-cards-panel,
body.sol-detail-page--mars .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mars .sol-earth-source-cards-panel .inner {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(var(--sol-page-base), 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(var(--sol-page-base), 0.08),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.09) 0%,
            rgba(var(--sol-mars-dark), 0.985) 36%,
            rgba(var(--sol-mars-mid), 0.97) 100%
        ) !important;
}

/* Alternating dossier cards: same opacity range, Mars-toned dark base */
body.sol-detail-page--mars .panel.color1.sol-earth-dossier,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .intro,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .inner {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(var(--sol-page-base), 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-mars-deep), 0.985) 0%,
            rgba(var(--sol-page-base), 0.085) 46%,
            rgba(var(--sol-mars-mid), 0.97) 100%
        ) !important;
}

/* Mars overview plate: replace inherited blue content base */
body.sol-detail-page--mars .sol-earth-dossier-plate > .content {
    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(var(--sol-page-base), 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.09) 0%,
            rgba(var(--sol-mars-dark), 0.985) 42%,
            rgba(var(--sol-mars-mid), 0.97) 100%
        ) !important;
}

/* Quick fact cards: dark Mars cards, not blue-tinted cards */
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts article {
    border-color: rgba(var(--sol-page-base), 0.36) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.075),
            rgba(var(--sol-mars-mid), 0.34)
        ) !important;
}

/* Source cards: same dark Mars base */
body.sol-detail-page--mars .sol-source-card {
    border-color: rgba(var(--sol-page-base), 0.32) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.075),
            rgba(var(--sol-mars-mid), 0.34)
        ) !important;
}

body.sol-detail-page--mars .sol-source-card:hover {
    border-color: rgba(var(--sol-page-base), 0.62) !important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.14),
            rgba(var(--sol-mars-mid), 0.42)
        ) !important;
}

/* Destination image tiles: dark Mars base */
body.sol-detail-page--mars .sol-source-card__image {
    color: var(--sol-accent-mars) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(var(--sol-page-base), 0.22),
            rgba(var(--sol-mars-deep), 0.94)
        ) !important;
}

/* Mars accent remains the identity layer */
body.sol-detail-page--mars .sol-dossier-kicker,
body.sol-detail-page--mars .sol-earth-dossier h2.major,
body.sol-detail-page--mars .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mars .sol-source-note,
body.sol-detail-page--mars .sol-detail-masthead__mark,
body.sol-detail-page--mars .sol-detail-masthead__link {
    color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mars) !important;
}


/* =========================================================
   SOL MARS ORIGINAL BASE + ACCENTS ONLY PASS 01
   Restores Earth-master dark panel backgrounds for Mars.
   Keeps Mars colour only for accents/highlights.
========================================================= */

body.sol-detail-page--mars {
    --sol-page-accent: var(--sol-accent-mars);
}

/* Restore the Earth-master dark panel background behaviour */
body.sol-detail-page--mars .sol-page-hero .content.color0,
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-dossier .intro,
body.sol-detail-page--mars .sol-earth-dossier .inner,
body.sol-detail-page--mars .sol-earth-dossier-plate > .content,
body.sol-detail-page--mars .sol-earth-source-cards-panel,
body.sol-detail-page--mars .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mars .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Restore the subtle alternate card base */
body.sol-detail-page--mars .panel.color1.sol-earth-dossier,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .intro,
body.sol-detail-page--mars .panel.color1.sol-earth-dossier .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards return to dark base with Mars accent borders */
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--mars .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-mars) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

/* Hover still uses Mars accent, but panel stays dark */
body.sol-detail-page--mars .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-mars) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Keep all Mars accent/highlight identity */
body.sol-detail-page--mars .sol-detail-masthead__mark,
body.sol-detail-page--mars .sol-detail-masthead__link,
body.sol-detail-page--mars .sol-kicker,
body.sol-detail-page--mars .sol-dossier-kicker,
body.sol-detail-page--mars .sol-earth-dossier h2.major,
body.sol-detail-page--mars .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mars .sol-source-note {
    color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mars) !important;
}

/* Mars bullet dots */
body.sol-detail-page--mars .sol-dossier-copy li::before,
body.sol-detail-page--mars .sol-dossier-sources li::before {
    background: var(--sol-accent-mars) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-mars) 34%, transparent) !important;
}

/* Source destination tiles keep NASA text, with Mars accent */
body.sol-detail-page--mars .sol-source-card__image {
    color: var(--sol-accent-mars) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-mars) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Mars buttons/arrows */
body.sol-detail-page--mars .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-mars) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-mars) 14%, transparent) !important;
}

body.sol-detail-page--mars .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-mars),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-mars) 26%, transparent) !important;
}


/* =========================================================
   SOL DETAIL PAGE ACCENTS ONLY PASS 01
   Sol uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Sol gold.
========================================================= */

body.sol-detail-page--sol {
    --sol-page-accent: var(--sol-accent-sol);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--sol .sol-page-hero .content.color0,
body.sol-detail-page--sol .sol-earth-dossier,
body.sol-detail-page--sol .sol-earth-dossier .intro,
body.sol-detail-page--sol .sol-earth-dossier .inner,
body.sol-detail-page--sol .sol-earth-dossier-plate > .content,
body.sol-detail-page--sol .sol-earth-source-cards-panel,
body.sol-detail-page--sol .sol-earth-source-cards-panel .intro,
body.sol-detail-page--sol .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Sol accent borders */
body.sol-detail-page--sol .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--sol .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-sol) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--sol .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-sol) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Sol accent/highlight identity */
body.sol-detail-page--sol .sol-detail-masthead__mark,
body.sol-detail-page--sol .sol-detail-masthead__link,
body.sol-detail-page--sol .sol-kicker,
body.sol-detail-page--sol .sol-dossier-kicker,
body.sol-detail-page--sol .sol-earth-dossier h2.major,
body.sol-detail-page--sol .sol-earth-dossier-plate h2.major,
body.sol-detail-page--sol .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--sol .sol-source-note {
    color: var(--sol-accent-sol) !important;
}

body.sol-detail-page--sol .sol-earth-dossier,
body.sol-detail-page--sol .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-sol) !important;
}

/* Sol bullet dots */
body.sol-detail-page--sol .sol-dossier-copy li::before,
body.sol-detail-page--sol .sol-dossier-sources li::before {
    background: var(--sol-accent-sol) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-sol) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Sol accent */
body.sol-detail-page--sol .sol-source-card__image {
    color: var(--sol-accent-sol) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-sol) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Sol buttons/arrows */
body.sol-detail-page--sol .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-sol) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-sol) 14%, transparent) !important;
}

body.sol-detail-page--sol .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-sol),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-sol) 26%, transparent) !important;
}


/* =========================================================
   MERCURY DETAIL PAGE ACCENTS ONLY PASS 01
   Mercury uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Mercury stone/taupe.
========================================================= */

body.sol-detail-page--mercury {
    --sol-page-accent: var(--sol-accent-mercury);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--mercury .sol-page-hero .content.color0,
body.sol-detail-page--mercury .sol-earth-dossier,
body.sol-detail-page--mercury .sol-earth-dossier .intro,
body.sol-detail-page--mercury .sol-earth-dossier .inner,
body.sol-detail-page--mercury .sol-earth-dossier-plate > .content,
body.sol-detail-page--mercury .sol-earth-source-cards-panel,
body.sol-detail-page--mercury .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mercury .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Mercury accent borders */
body.sol-detail-page--mercury .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--mercury .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-mercury) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--mercury .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-mercury) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Mercury accent/highlight identity */
body.sol-detail-page--mercury .sol-detail-masthead__mark,
body.sol-detail-page--mercury .sol-detail-masthead__link,
body.sol-detail-page--mercury .sol-kicker,
body.sol-detail-page--mercury .sol-dossier-kicker,
body.sol-detail-page--mercury .sol-earth-dossier h2.major,
body.sol-detail-page--mercury .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mercury .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mercury .sol-source-note {
    color: var(--sol-accent-mercury) !important;
}

body.sol-detail-page--mercury .sol-earth-dossier,
body.sol-detail-page--mercury .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mercury) !important;
}

/* Mercury bullet dots */
body.sol-detail-page--mercury .sol-dossier-copy li::before,
body.sol-detail-page--mercury .sol-dossier-sources li::before {
    background: var(--sol-accent-mercury) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-mercury) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Mercury accent */
body.sol-detail-page--mercury .sol-source-card__image {
    color: var(--sol-accent-mercury) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-mercury) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* ESA source tile */
body.sol-detail-page--mercury .sol-source-card--esa .sol-source-card__image {
    color: #9fc4ff !important;
}

/* Mercury buttons/arrows */
body.sol-detail-page--mercury .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-mercury) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-mercury) 14%, transparent) !important;
}

body.sol-detail-page--mercury .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-mercury),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-mercury) 26%, transparent) !important;
}


/* =========================================================
   PLANET DETAIL HERO NAME ACCENT FIX 01
   Ensures the first-card planet name uses the active planet
   accent colour, not the inherited Earth blue.
========================================================= */

/* Sol */
body.sol-detail-page--sol .sol-page-hero h1.majorblack {
    color: var(--sol-accent-sol) !important;
}

/* Mercury */
body.sol-detail-page--mercury .sol-page-hero h1.majorblack {
    color: var(--sol-accent-mercury) !important;
}

/* Venus */
body.sol-detail-page--venus .sol-page-hero h1.majorblack {
    color: var(--sol-accent-venus) !important;
}

/* Earth */
body.sol-detail-page--earth:not(.sol-detail-page--sol):not(.sol-detail-page--mercury):not(.sol-detail-page--venus):not(.sol-detail-page--mars):not(.sol-detail-page--jupiter):not(.sol-detail-page--saturn):not(.sol-detail-page--uranus):not(.sol-detail-page--neptune) .sol-page-hero h1.majorblack {
    color: var(--sol-accent-earth) !important;
}

/* Mars */
body.sol-detail-page--mars .sol-page-hero h1.majorblack {
    color: var(--sol-accent-mars) !important;
}

/* Jupiter */
body.sol-detail-page--jupiter .sol-page-hero h1.majorblack {
    color: var(--sol-accent-jupiter) !important;
}

/* Saturn */
body.sol-detail-page--saturn .sol-page-hero h1.majorblack {
    color: var(--sol-accent-saturn) !important;
}

/* Uranus */
body.sol-detail-page--uranus .sol-page-hero h1.majorblack {
    color: var(--sol-accent-uranus) !important;
}

/* Neptune */
body.sol-detail-page--neptune .sol-page-hero h1.majorblack {
    color: var(--sol-accent-neptune) !important;
}


/* =========================================================
   VENUS DETAIL PAGE ACCENTS ONLY PASS 01
   Venus uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Venus ochre/amber.
========================================================= */

body.sol-detail-page--venus {
    --sol-page-accent: var(--sol-accent-venus);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--venus .sol-page-hero .content.color0,
body.sol-detail-page--venus .sol-earth-dossier,
body.sol-detail-page--venus .sol-earth-dossier .intro,
body.sol-detail-page--venus .sol-earth-dossier .inner,
body.sol-detail-page--venus .sol-earth-dossier-plate > .content,
body.sol-detail-page--venus .sol-earth-source-cards-panel,
body.sol-detail-page--venus .sol-earth-source-cards-panel .intro,
body.sol-detail-page--venus .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Venus accent borders */
body.sol-detail-page--venus .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--venus .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-venus) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--venus .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-venus) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Venus accent/highlight identity, including first hero name */
body.sol-detail-page--venus .sol-page-hero h1.majorblack,
body.sol-detail-page--venus .sol-detail-masthead__mark,
body.sol-detail-page--venus .sol-detail-masthead__link,
body.sol-detail-page--venus .sol-kicker,
body.sol-detail-page--venus .sol-dossier-kicker,
body.sol-detail-page--venus .sol-earth-dossier h2.major,
body.sol-detail-page--venus .sol-earth-dossier-plate h2.major,
body.sol-detail-page--venus .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--venus .sol-source-note {
    color: var(--sol-accent-venus) !important;
}

body.sol-detail-page--venus .sol-earth-dossier,
body.sol-detail-page--venus .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-venus) !important;
}

/* Venus bullet dots */
body.sol-detail-page--venus .sol-dossier-copy li::before,
body.sol-detail-page--venus .sol-dossier-sources li::before {
    background: var(--sol-accent-venus) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-venus) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Venus accent */
body.sol-detail-page--venus .sol-source-card__image {
    color: var(--sol-accent-venus) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-venus) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Venus buttons/arrows */
body.sol-detail-page--venus .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-venus) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-venus) 14%, transparent) !important;
}

body.sol-detail-page--venus .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-venus),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-venus) 26%, transparent) !important;
}


/* =========================================================
   MARS DETAIL PAGE ACCENTS ONLY FINAL PASS 01
   Mars uses the Earth master layout/backgrounds.
   Overrides earlier Mars colour-wash experiments.
========================================================= */

body.sol-detail-page--mars {
    --sol-page-accent: var(--sol-accent-mars);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--mars .sol-page-hero .content.color0,
body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-dossier .intro,
body.sol-detail-page--mars .sol-earth-dossier .inner,
body.sol-detail-page--mars .sol-earth-dossier-plate > .content,
body.sol-detail-page--mars .sol-earth-source-cards-panel,
body.sol-detail-page--mars .sol-earth-source-cards-panel .intro,
body.sol-detail-page--mars .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Mars accent borders */
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--mars .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-mars) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--mars .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-mars) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Mars accent/highlight identity, including first hero name */
body.sol-detail-page--mars .sol-page-hero h1.majorblack,
body.sol-detail-page--mars .sol-detail-masthead__mark,
body.sol-detail-page--mars .sol-detail-masthead__link,
body.sol-detail-page--mars .sol-kicker,
body.sol-detail-page--mars .sol-dossier-kicker,
body.sol-detail-page--mars .sol-earth-dossier h2.major,
body.sol-detail-page--mars .sol-earth-dossier-plate h2.major,
body.sol-detail-page--mars .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--mars .sol-source-note {
    color: var(--sol-accent-mars) !important;
}

body.sol-detail-page--mars .sol-earth-dossier,
body.sol-detail-page--mars .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-mars) !important;
}

/* Mars bullet dots */
body.sol-detail-page--mars .sol-dossier-copy li::before,
body.sol-detail-page--mars .sol-dossier-sources li::before {
    background: var(--sol-accent-mars) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-mars) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Mars accent */
body.sol-detail-page--mars .sol-source-card__image {
    color: var(--sol-accent-mars) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-mars) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Mars buttons/arrows */
body.sol-detail-page--mars .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-mars) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-mars) 14%, transparent) !important;
}

body.sol-detail-page--mars .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-mars),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-mars) 26%, transparent) !important;
}

/* .... */
/* =========================================================
   JUPITER DETAIL PAGE ACCENTS ONLY PASS 01
   Jupiter uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Jupiter tan/amber.
========================================================= */

body.sol-detail-page--jupiter {
    --sol-page-accent: var(--sol-accent-jupiter);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--jupiter .sol-page-hero .content.color0,
body.sol-detail-page--jupiter .sol-earth-dossier,
body.sol-detail-page--jupiter .sol-earth-dossier .intro,
body.sol-detail-page--jupiter .sol-earth-dossier .inner,
body.sol-detail-page--jupiter .sol-earth-dossier-plate > .content,
body.sol-detail-page--jupiter .sol-earth-source-cards-panel,
body.sol-detail-page--jupiter .sol-earth-source-cards-panel .intro,
body.sol-detail-page--jupiter .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Jupiter accent borders */
body.sol-detail-page--jupiter .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--jupiter .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-jupiter) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--jupiter .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-jupiter) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Jupiter accent/highlight identity, including first hero name */
body.sol-detail-page--jupiter .sol-page-hero h1.majorblack,
body.sol-detail-page--jupiter .sol-detail-masthead__mark,
body.sol-detail-page--jupiter .sol-detail-masthead__link,
body.sol-detail-page--jupiter .sol-kicker,
body.sol-detail-page--jupiter .sol-dossier-kicker,
body.sol-detail-page--jupiter .sol-earth-dossier h2.major,
body.sol-detail-page--jupiter .sol-earth-dossier-plate h2.major,
body.sol-detail-page--jupiter .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--jupiter .sol-source-note {
    color: var(--sol-accent-jupiter) !important;
}

body.sol-detail-page--jupiter .sol-earth-dossier,
body.sol-detail-page--jupiter .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-jupiter) !important;
}

/* Jupiter bullet dots */
body.sol-detail-page--jupiter .sol-dossier-copy li::before,
body.sol-detail-page--jupiter .sol-dossier-sources li::before {
    background: var(--sol-accent-jupiter) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-jupiter) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Jupiter accent */
body.sol-detail-page--jupiter .sol-source-card__image {
    color: var(--sol-accent-jupiter) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-jupiter) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* ESA source tile */
body.sol-detail-page--jupiter .sol-source-card--esa .sol-source-card__image {
    color: #9fc4ff !important;
}

/* Jupiter buttons/arrows */
body.sol-detail-page--jupiter .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-jupiter) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-jupiter) 14%, transparent) !important;
}

body.sol-detail-page--jupiter .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-jupiter),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-jupiter) 26%, transparent) !important;
}


/* =========================================================
   SATURN DETAIL PAGE ACCENTS ONLY PASS 01
   Saturn uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Saturn pale gold.
========================================================= */

body.sol-detail-page--saturn {
    --sol-page-accent: var(--sol-accent-saturn);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--saturn .sol-page-hero .content.color0,
body.sol-detail-page--saturn .sol-earth-dossier,
body.sol-detail-page--saturn .sol-earth-dossier .intro,
body.sol-detail-page--saturn .sol-earth-dossier .inner,
body.sol-detail-page--saturn .sol-earth-dossier-plate > .content,
body.sol-detail-page--saturn .sol-earth-source-cards-panel,
body.sol-detail-page--saturn .sol-earth-source-cards-panel .intro,
body.sol-detail-page--saturn .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Saturn accent borders */
body.sol-detail-page--saturn .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--saturn .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-saturn) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--saturn .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-saturn) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Saturn accent/highlight identity, including first hero name */
body.sol-detail-page--saturn .sol-page-hero h1.majorblack,
body.sol-detail-page--saturn .sol-detail-masthead__mark,
body.sol-detail-page--saturn .sol-detail-masthead__link,
body.sol-detail-page--saturn .sol-kicker,
body.sol-detail-page--saturn .sol-dossier-kicker,
body.sol-detail-page--saturn .sol-earth-dossier h2.major,
body.sol-detail-page--saturn .sol-earth-dossier-plate h2.major,
body.sol-detail-page--saturn .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--saturn .sol-source-note {
    color: var(--sol-accent-saturn) !important;
}

body.sol-detail-page--saturn .sol-earth-dossier,
body.sol-detail-page--saturn .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-saturn) !important;
}

/* Saturn bullet dots */
body.sol-detail-page--saturn .sol-dossier-copy li::before,
body.sol-detail-page--saturn .sol-dossier-sources li::before {
    background: var(--sol-accent-saturn) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-saturn) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Saturn accent */
body.sol-detail-page--saturn .sol-source-card__image {
    color: var(--sol-accent-saturn) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-saturn) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Saturn buttons/arrows */
body.sol-detail-page--saturn .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-saturn) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-saturn) 14%, transparent) !important;
}

body.sol-detail-page--saturn .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-saturn),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-saturn) 26%, transparent) !important;
}


/* =========================================================
   URANUS DETAIL PAGE ACCENTS ONLY PASS 01
   Uranus uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Uranus ice blue.
========================================================= */

body.sol-detail-page--uranus {
    --sol-page-accent: var(--sol-accent-uranus);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--uranus .sol-page-hero .content.color0,
body.sol-detail-page--uranus .sol-earth-dossier,
body.sol-detail-page--uranus .sol-earth-dossier .intro,
body.sol-detail-page--uranus .sol-earth-dossier .inner,
body.sol-detail-page--uranus .sol-earth-dossier-plate > .content,
body.sol-detail-page--uranus .sol-earth-source-cards-panel,
body.sol-detail-page--uranus .sol-earth-source-cards-panel .intro,
body.sol-detail-page--uranus .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Uranus accent borders */
body.sol-detail-page--uranus .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--uranus .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-uranus) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--uranus .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-uranus) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Uranus accent/highlight identity, including first hero name */
body.sol-detail-page--uranus .sol-page-hero h1.majorblack,
body.sol-detail-page--uranus .sol-detail-masthead__mark,
body.sol-detail-page--uranus .sol-detail-masthead__link,
body.sol-detail-page--uranus .sol-kicker,
body.sol-detail-page--uranus .sol-dossier-kicker,
body.sol-detail-page--uranus .sol-earth-dossier h2.major,
body.sol-detail-page--uranus .sol-earth-dossier-plate h2.major,
body.sol-detail-page--uranus .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--uranus .sol-source-note {
    color: var(--sol-accent-uranus) !important;
}

body.sol-detail-page--uranus .sol-earth-dossier,
body.sol-detail-page--uranus .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-uranus) !important;
}

/* Uranus bullet dots */
body.sol-detail-page--uranus .sol-dossier-copy li::before,
body.sol-detail-page--uranus .sol-dossier-sources li::before {
    background: var(--sol-accent-uranus) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-uranus) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Uranus accent */
body.sol-detail-page--uranus .sol-source-card__image {
    color: var(--sol-accent-uranus) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-uranus) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Uranus buttons/arrows */
body.sol-detail-page--uranus .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-uranus) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-uranus) 14%, transparent) !important;
}

body.sol-detail-page--uranus .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-uranus),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-uranus) 26%, transparent) !important;
}


/* =========================================================
   URANUS DETAIL PAGE ACCENTS ONLY PASS 01
   Uranus uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Uranus ice blue.
========================================================= */

body.sol-detail-page--uranus {
    --sol-page-accent: var(--sol-accent-uranus);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--uranus .sol-page-hero .content.color0,
body.sol-detail-page--uranus .sol-earth-dossier,
body.sol-detail-page--uranus .sol-earth-dossier .intro,
body.sol-detail-page--uranus .sol-earth-dossier .inner,
body.sol-detail-page--uranus .sol-earth-dossier-plate > .content,
body.sol-detail-page--uranus .sol-earth-source-cards-panel,
body.sol-detail-page--uranus .sol-earth-source-cards-panel .intro,
body.sol-detail-page--uranus .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Uranus accent borders */
body.sol-detail-page--uranus .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--uranus .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-uranus) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--uranus .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-uranus) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Uranus accent/highlight identity, including first hero name */
body.sol-detail-page--uranus .sol-page-hero h1.majorblack,
body.sol-detail-page--uranus .sol-detail-masthead__mark,
body.sol-detail-page--uranus .sol-detail-masthead__link,
body.sol-detail-page--uranus .sol-kicker,
body.sol-detail-page--uranus .sol-dossier-kicker,
body.sol-detail-page--uranus .sol-earth-dossier h2.major,
body.sol-detail-page--uranus .sol-earth-dossier-plate h2.major,
body.sol-detail-page--uranus .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--uranus .sol-source-note {
    color: var(--sol-accent-uranus) !important;
}

body.sol-detail-page--uranus .sol-earth-dossier,
body.sol-detail-page--uranus .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-uranus) !important;
}

/* Uranus bullet dots */
body.sol-detail-page--uranus .sol-dossier-copy li::before,
body.sol-detail-page--uranus .sol-dossier-sources li::before {
    background: var(--sol-accent-uranus) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-uranus) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Uranus accent */
body.sol-detail-page--uranus .sol-source-card__image {
    color: var(--sol-accent-uranus) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-uranus) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Uranus buttons/arrows */
body.sol-detail-page--uranus .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-uranus) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-uranus) 14%, transparent) !important;
}

body.sol-detail-page--uranus .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-uranus),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-uranus) 26%, transparent) !important;
}


/* =========================================================
   NEPTUNE DETAIL PAGE ACCENTS ONLY PASS 01
   Neptune uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Neptune deep blue.
========================================================= */

body.sol-detail-page--neptune {
    --sol-page-accent: var(--sol-accent-neptune);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--neptune .sol-page-hero .content.color0,
body.sol-detail-page--neptune .sol-earth-dossier,
body.sol-detail-page--neptune .sol-earth-dossier .intro,
body.sol-detail-page--neptune .sol-earth-dossier .inner,
body.sol-detail-page--neptune .sol-earth-dossier-plate > .content,
body.sol-detail-page--neptune .sol-earth-source-cards-panel,
body.sol-detail-page--neptune .sol-earth-source-cards-panel .intro,
body.sol-detail-page--neptune .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Neptune accent borders */
body.sol-detail-page--neptune .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--neptune .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-neptune) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--neptune .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-neptune) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Neptune accent/highlight identity, including first hero name */
body.sol-detail-page--neptune .sol-page-hero h1.majorblack,
body.sol-detail-page--neptune .sol-detail-masthead__mark,
body.sol-detail-page--neptune .sol-detail-masthead__link,
body.sol-detail-page--neptune .sol-kicker,
body.sol-detail-page--neptune .sol-dossier-kicker,
body.sol-detail-page--neptune .sol-earth-dossier h2.major,
body.sol-detail-page--neptune .sol-earth-dossier-plate h2.major,
body.sol-detail-page--neptune .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--neptune .sol-source-note {
    color: var(--sol-accent-neptune) !important;
}

body.sol-detail-page--neptune .sol-earth-dossier,
body.sol-detail-page--neptune .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-neptune) !important;
}

/* Neptune bullet dots */
body.sol-detail-page--neptune .sol-dossier-copy li::before,
body.sol-detail-page--neptune .sol-dossier-sources li::before {
    background: var(--sol-accent-neptune) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-neptune) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Neptune accent */
body.sol-detail-page--neptune .sol-source-card__image {
    color: var(--sol-accent-neptune) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-neptune) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Neptune buttons/arrows */
body.sol-detail-page--neptune .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-neptune) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-neptune) 14%, transparent) !important;
}

body.sol-detail-page--neptune .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-neptune),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-neptune) 26%, transparent) !important;
}


/* =========================================================
   PLUTO DETAIL PAGE ACCENTS ONLY PASS 01
   Pluto uses the Earth master layout/backgrounds.
   Only accents/highlights switch to Pluto frost/taupe.
========================================================= */

body.sol-detail-page--pluto {
    --sol-accent-pluto: #d3b08a;
    --sol-page-accent: var(--sol-accent-pluto);
}

/* Restore Earth-master dark panel background behaviour */
body.sol-detail-page--pluto .sol-page-hero .content.color0,
body.sol-detail-page--pluto .sol-earth-dossier,
body.sol-detail-page--pluto .sol-earth-dossier .intro,
body.sol-detail-page--pluto .sol-earth-dossier .inner,
body.sol-detail-page--pluto .sol-earth-dossier-plate > .content,
body.sol-detail-page--pluto .sol-earth-source-cards-panel,
body.sol-detail-page--pluto .sol-earth-source-cards-panel .intro,
body.sol-detail-page--pluto .sol-earth-source-cards-panel .inner {
    background:
        linear-gradient(
            135deg,
            rgba(8, 10, 22, 0.985),
            rgba(18, 18, 32, 0.97)
        ) !important;

    background-color: #111524 !important;
}

/* Snapshot/source cards keep dark base with Pluto accent borders */
body.sol-detail-page--pluto .sol-earth-dossier--snapshot .sol-dossier-facts article,
body.sol-detail-page--pluto .sol-source-card {
    border-color: color-mix(in srgb, var(--sol-accent-pluto) 42%, rgba(255,255,255,0.12)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        ) !important;
}

body.sol-detail-page--pluto .sol-source-card:hover {
    border-color: color-mix(in srgb, var(--sol-accent-pluto) 72%, rgba(255,255,255,0.2)) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

/* Pluto accent/highlight identity, including first hero name */
body.sol-detail-page--pluto .sol-page-hero h1.majorblack,
body.sol-detail-page--pluto .sol-detail-masthead__mark,
body.sol-detail-page--pluto .sol-detail-masthead__link,
body.sol-detail-page--pluto .sol-kicker,
body.sol-detail-page--pluto .sol-dossier-kicker,
body.sol-detail-page--pluto .sol-earth-dossier h2.major,
body.sol-detail-page--pluto .sol-earth-dossier-plate h2.major,
body.sol-detail-page--pluto .sol-earth-dossier--snapshot .sol-dossier-facts strong,
body.sol-detail-page--pluto .sol-source-note {
    color: var(--sol-accent-pluto) !important;
}

body.sol-detail-page--pluto .sol-earth-dossier,
body.sol-detail-page--pluto .sol-earth-source-cards-panel {
    border-right-color: var(--sol-accent-pluto) !important;
}

/* Pluto bullet dots */
body.sol-detail-page--pluto .sol-dossier-copy li::before,
body.sol-detail-page--pluto .sol-dossier-sources li::before {
    background: var(--sol-accent-pluto) !important;
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--sol-accent-pluto) 34%, transparent) !important;
}

/* Source destination tiles keep organisation text, with Pluto accent */
body.sol-detail-page--pluto .sol-source-card__image {
    color: var(--sol-accent-pluto) !important;

    background:
        radial-gradient(
            circle at 30% 24%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sol-accent-pluto) 24%, transparent),
            rgba(8, 10, 22, 0.94)
        ) !important;
}

/* Pluto buttons/arrows */
body.sol-detail-page--pluto .button {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-pluto) 52%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-pluto) 14%, transparent) !important;
}

body.sol-detail-page--pluto .button:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-pluto),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-pluto) 26%, transparent) !important;
}


/* =========================================================
   PLUTO INDEX ROUTE PASS 01
   Adds Pluto to the horizontal index route as a dwarf planet
   / Kuiper Belt bonus stop after Neptune.
========================================================= */

:root {
    --sol-accent-pluto: #d3b08a;
}

/* Index route title accent */
.panel.spotlight h2.major a.pluto {
    color: var(--sol-accent-pluto);
}

.panel.spotlight h2.major a.pluto::after {
    color: color-mix(in srgb, var(--sol-accent-pluto) 72%, white);
}

/* Quick facts Pluto accent */
.sol-index-grid article:nth-child(10) strong {
    color: var(--sol-accent-pluto);
}

/* Fixed bottom route nav Pluto accent */
.sol-planet-nav .pluto {
    color: var(--sol-accent-pluto);
}

/* Pluto is a small dwarf planet stop, so keep its nav marker smaller */
.sol-planet-nav a.pluto {
    width: 0.62rem;
    height: 0.62rem;
}


/* =========================================================
   PLUTO INDEX QUICK FACT FIX 01
========================================================= */

:root {
    --sol-accent-pluto: #d3b08a;
}

/* Pluto quick fact accent: avoid fragile nth-child targeting */
.sol-index-grid article a[href="#pluto"] strong {
    color: var(--sol-accent-pluto) !important;
}

.sol-index-grid article a[href="#pluto"] {
    border-color: color-mix(in srgb, var(--sol-accent-pluto) 36%, rgba(255,255,255,0.12)) !important;
}


/* =========================================================
   PLUTO INDEX FACT CARD FIX 02
========================================================= */

:root {
    --sol-accent-pluto: #d3b08a;
}

/* Pluto fact card accent, independent of child order */
a[href="#pluto"] strong {
    color: var(--sol-accent-pluto) !important;
}

a[href="#pluto"] {
    border-color: color-mix(in srgb, var(--sol-accent-pluto) 36%, rgba(255,255,255,0.12)) !important;
}


/* =========================================================
   PLUTO INDEX LEFT FACTS ACCENT FIX 01
   Adds Pluto accent support to the existing route facts card
   system. No layout changes.
========================================================= */

:root {
    --sol-accent-pluto: #d3b08a;
}

#wrapper > .sol-left-section--pluto .sol-left-section__eyebrow,
#wrapper > .sol-left-section--pluto h2.major,
#wrapper > .sol-left-section--pluto .sol-left-section__list span {
    color: var(--sol-accent-pluto) !important;
}


/* =========================================================
   PLUTO MASTHEAD FIX 01
========================================================= */

body.sol-detail-page--pluto .sol-detail-masthead__mark {
    color: var(--sol-accent-pluto, #d3b08a) !important;
}

body.sol-detail-page--pluto .sol-detail-masthead__mark::after {
    background: color-mix(in srgb, var(--sol-accent-pluto, #d3b08a) 72%, white) !important;
}


/* =========================================================
   PLUTO INDEX ROUTE FINAL FIX 01
========================================================= */

:root {
    --sol-accent-pluto: #d3b08a;
}

.panel.spotlight h2.major a.pluto {
    color: var(--sol-accent-pluto) !important;
}

.panel.spotlight h2.major a.pluto::after {
    content: "Kuiper Belt / dwarf planet";
    color: color-mix(in srgb, var(--sol-accent-pluto) 72%, white) !important;
}

#wrapper > .sol-left-section--pluto {
    border-right: 3px solid var(--sol-accent-pluto) !important;
}

#wrapper > .sol-left-section--pluto .sol-left-section__eyebrow,
#wrapper > .sol-left-section--pluto h2.major,
#wrapper > .sol-left-section--pluto .sol-left-section__list span {
    color: var(--sol-accent-pluto) !important;
}

.sol-top-masthead__mark.is-pluto {
    color: var(--sol-accent-pluto) !important;
}


/* =========================================================
   PLUTO INDEX TITLE SIZE FIX 01
========================================================= */

#pluto h2.major {
    font-size: 2em !important;
    line-height: 1.05 !important;
}

#pluto h2.major a.pluto {
    font-size: inherit !important;
}


/* =========================================================
   PLUTO INDEX TITLE SIZE MATCH NEPTUNE 01
   Reverts the earlier 2em override and matches normal
   spotlight/object-card title sizing.
========================================================= */

#pluto h2.major {
    font-size: clamp(2.5rem, 4vw, 4.1rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
}

#pluto h2.major a.pluto {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* =========================================================
   PLUTO INDEX TITLE SIZE MATCH NEPTUNE FINAL 01
   Neptune is large because .neptune has font-size: 2em.
   Pluto needs the same link-level scaling.
========================================================= */

#pluto h2.major {
    font-size: clamp(2.5rem, 4vw, 4.1rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
}

#pluto h2.major a.pluto {
    font-size: 2em !important;
    line-height: inherit !important;
}

/* Keep the generated strapline at normal strapline size */
#pluto h2.major a.pluto::after {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.16em !important;
}


/* =========================================================
   PLUTO DETAIL HERO COLOUR FIX 01
   Final Pluto-only override for the first detail-page card.
========================================================= */

:root {
    --sol-accent-pluto: #d3b08a;
}

body.sol-detail-page--pluto .sol-page-hero h1.majorblack,
body.sol-detail-page--pluto h1.majorblack,
body.sol-detail-page--pluto .sol-page-hero .content h1.majorblack {
    color: var(--sol-accent-pluto) !important;
    -webkit-text-fill-color: var(--sol-accent-pluto) !important;
}

body.sol-detail-page--pluto .sol-page-hero .sol-kicker,
body.sol-detail-page--pluto .sol-page-hero .button,
body.sol-detail-page--pluto .sol-page-hero .button.primary.color1 {
    color: var(--sol-accent-pluto) !important;
}

body.sol-detail-page--pluto .sol-page-hero .button,
body.sol-detail-page--pluto .sol-page-hero .button.primary.color1 {
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--sol-accent-pluto) 56%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--sol-accent-pluto) 14%, transparent) !important;
}

body.sol-detail-page--pluto .sol-page-hero .button:hover,
body.sol-detail-page--pluto .sol-page-hero .button.primary.color1:hover {
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 2px var(--sol-accent-pluto),
        0 0 1.5rem color-mix(in srgb, var(--sol-accent-pluto) 24%, transparent) !important;
}