:root {
	--color-bg: rgb(34, 24, 22);
	--color-bg-highlight: rgb(54, 44, 42);
	--color-text: #ffedbf;
	--color-accent-red: #ff3428;
	--color-accent-blue: #3975bf;

	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

	--font-wght-text: 300;
	--font-wght-highlight: 400;
	--font-wght-heading: 600;

	--font-size-xs: 0.75rem;
	--font-size-sm: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.75rem;
	--font-size-xxl: 2.25rem;

	--border-r-box: 1.5rem;
}

/* Normalize */

html {
	text-size-adjust: 100%; 
}
body {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	background: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]),
[hidden],
template {
	display: none;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b,
strong {
	font-weight: 700;
}
dfn {
	font-style: italic;
}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}
mark {
	background: #ff0;
	color: #000;
}
code,
kbd,
pre,
samp {
	font-family: monospace, serif;
		font-size: var(--font-size-md);
}
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
	font-size: var(--font-size-sm);
}
sub,
sup {
	font-size: var(--font-size-xs);
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -.5em;
}
sub {
	bottom: -.25em;
}
img {
	border: 0;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 0;
}
fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em;
}
legend {
	border: 0;
	padding: 0;
}
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}
button,
input {
	line-height: normal;
}
button,
select {
	text-transform: none;
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
	-webkit-appearance: button;
	appearance: button;
	cursor: pointer;
}
button[disabled],
html input[disabled] {
	cursor: default;
}
input[type=checkbox],
input[type=radio] {
	box-sizing: border-box;
	padding: 0;
}
input[type="search"] {
	appearance: textfield;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:focus {
	outline-color: transparent;
	outline-style: none;
}
pre {
	overflow-x: auto;
	padding: 1.25em;
	border: 1px solid #e6e6e6;
	border-left-width: 5px;
	margin: 1.6em 0;
	font-size: var(--font-size-sm);
	background: #fcfcfc;
	white-space: pre;
	word-wrap: normal;
}
code {
	color: #07f;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Grid */

:root {
	--col-1: calc(100% / 12);
	--col-2: calc(100% / 12 * 2);
	--col-3: calc(100% / 12 * 3);
	--col-4: calc(100% / 12 * 4);
	--col-5: calc(100% / 12 * 5);
	--col-6: calc(100% / 12 * 6);
	--col-7: calc(100% / 12 * 7);
	--col-8: calc(100% / 12 * 8);
	--col-9: calc(100% / 12 * 9);
	--col-10: calc(100% / 12 * 10);
	--col-11: calc(100% / 12 * 11);
	--col-12: 100%;
}

.row {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: visible;
	border: none;
	background: none;
}

.col {
	box-sizing: border-box;
	flex: 0 0 auto;
}

.row.reverse { flex-direction: row-reverse; }
.col.reverse { flex-direction: column-reverse; }

.xs { flex-grow: 1; flex-basis: 0; max-width: 100%; }

.xs-1 { flex-basis: var(--col-1); max-width: var(--col-1); }
.xs-2 { flex-basis: var(--col-2); max-width: var(--col-2); }
.xs-3 { flex-basis: var(--col-3); max-width: var(--col-3); }
.xs-4 { flex-basis: var(--col-4); max-width: var(--col-4); }
.xs-5 { flex-basis: var(--col-5); max-width: var(--col-5); }
.xs-6 { flex-basis: var(--col-6); max-width: var(--col-6); }
.xs-7 { flex-basis: var(--col-7); max-width: var(--col-7); }
.xs-8 { flex-basis: var(--col-8); max-width: var(--col-8); }
.xs-9 { flex-basis: var(--col-9); max-width: var(--col-9); }
.xs-10 { flex-basis: var(--col-10); max-width: var(--col-10); }
.xs-11 { flex-basis: var(--col-11); max-width: var(--col-11); }
.xs-12 { flex-basis: var(--col-12); max-width: var(--col-12); }

.xs-offset-1 { margin-left: var(--col-1); }
.xs-offset-2 { margin-left: var(--col-2); }
.xs-offset-3 { margin-left: var(--col-3); }
.xs-offset-4 { margin-left: var(--col-4); }
.xs-offset-5 { margin-left: var(--col-5); }
.xs-offset-6 { margin-left: var(--col-6); }
.xs-offset-7 { margin-left: var(--col-7); }
.xs-offset-8 { margin-left: var(--col-8); }
.xs-offset-9 { margin-left: var(--col-9); }
.xs-offset-10 { margin-left: var(--col-10); }
.xs-offset-11 { margin-left: var(--col-11); }

.start-xs { justify-content: flex-start; }
.center-xs { justify-content: center; }
.end-xs { justify-content: flex-end; }
.top-xs { align-items: flex-start; }
.middle-xs { align-items: center; }
.bottom-xs { align-items: flex-end; }
.around-xs { justify-content: space-around; }
.between-xs { justify-content: space-between; }
.first-xs { order: -1; }
.last-xs { order: 1; }

.invisible-xs { display: none; visibility: hidden; }
.visible-xs { display: block; visibility: visible; }

/* Media Queries */

@media only screen and (min-width: 48em) {

	.sm { flex-grow: 1; flex-basis: 0; max-width: 100%; }

	.sm-1 { flex-basis: var(--col-1); max-width: var(--col-1); }
	.sm-2 { flex-basis: var(--col-2); max-width: var(--col-2); }
	.sm-3 { flex-basis: var(--col-3); max-width: var(--col-3); }
	.sm-4 { flex-basis: var(--col-4); max-width: var(--col-4); }
	.sm-5 { flex-basis: var(--col-5); max-width: var(--col-5); }
	.sm-6 { flex-basis: var(--col-6); max-width: var(--col-6); }
	.sm-7 { flex-basis: var(--col-7); max-width: var(--col-7); }
	.sm-8 { flex-basis: var(--col-8); max-width: var(--col-8); }
	.sm-9 { flex-basis: var(--col-9); max-width: var(--col-9); }
	.sm-10 { flex-basis: var(--col-10); max-width: var(--col-10); }
	.sm-11 { flex-basis: var(--col-11); max-width: var(--col-11); }
	.sm-12 { flex-basis: var(--col-12); max-width: var(--col-12); }
	
	.sm-offset-1 { margin-left: var(--col-1); }
	.sm-offset-2 { margin-left: var(--col-2); }
	.sm-offset-3 { margin-left: var(--col-3); }
	.sm-offset-4 { margin-left: var(--col-4); }
	.sm-offset-5 { margin-left: var(--col-5); }
	.sm-offset-6 { margin-left: var(--col-6); }
	.sm-offset-7 { margin-left: var(--col-7); }
	.sm-offset-8 { margin-left: var(--col-8); }
	.sm-offset-9 { margin-left: var(--col-9); }
	.sm-offset-10 { margin-left: var(--col-10); }
	.sm-offset-11 { margin-left: var(--col-11); }

	.start-sm { justify-content: flex-start; }
	.center-sm { justify-content: center; }
	.end-sm { justify-content: flex-end; }
	.top-sm { align-items: flex-start; }
	.middle-sm { align-items: center; }
	.bottom-sm { align-items: flex-end; }
	.around-sm { justify-content: space-around; }
	.between-sm { justify-content: space-between; }
	.first-sm { order: -1; }
	.last-sm { order: 1; }

	.invisible-sm { display: none; visibility: hidden; }
	.visible-sm { display: block; visibility: visible; }

}

@media only screen and (min-width: 64em) {

	.md { flex-grow: 1; flex-basis: 0; max-width: 100%; }

	.md-1 { flex-basis: var(--col-1); max-width: var(--col-1); }
	.md-2 { flex-basis: var(--col-2); max-width: var(--col-2); }
	.md-3 { flex-basis: var(--col-3); max-width: var(--col-3); }
	.md-4 { flex-basis: var(--col-4); max-width: var(--col-4); }
	.md-5 { flex-basis: var(--col-5); max-width: var(--col-5); }
	.md-6 { flex-basis: var(--col-6); max-width: var(--col-6); }
	.md-7 { flex-basis: var(--col-7); max-width: var(--col-7); }
	.md-8 { flex-basis: var(--col-8); max-width: var(--col-8); }
	.md-9 { flex-basis: var(--col-9); max-width: var(--col-9); }
	.md-10 { flex-basis: var(--col-10); max-width: var(--col-10); }
	.md-11 { flex-basis: var(--col-11); max-width: var(--col-11); }
	.md-12 { flex-basis: var(--col-12); max-width: var(--col-12); }
	
	.md-offset-1 { margin-left: var(--col-1); }
	.md-offset-2 { margin-left: var(--col-2); }
	.md-offset-3 { margin-left: var(--col-3); }
	.md-offset-4 { margin-left: var(--col-4); }
	.md-offset-5 { margin-left: var(--col-5); }
	.md-offset-6 { margin-left: var(--col-6); }
	.md-offset-7 { margin-left: var(--col-7); }
	.md-offset-8 { margin-left: var(--col-8); }
	.md-offset-9 { margin-left: var(--col-9); }
	.md-offset-10 { margin-left: var(--col-10); }
	.md-offset-11 { margin-left: var(--col-11); }

	.start-md { justify-content: flex-start; }
	.center-md { justify-content: center; }
	.end-md { justify-content: flex-end; }
	.top-md { align-items: flex-start; }
	.middle-md { align-items: center; }
	.bottom-md { align-items: flex-end; }
	.around-md { justify-content: space-around; }
	.between-md { justify-content: space-between; }
	.first-md { order: -1; }
	.last-md { order: 1; }

	.invisible-md { display: none; visibility: hidden; }
	.visible-md { display: block; visibility: visible; }

}

@media only screen and (min-width: 80em) {

	.lg { flex-grow: 1; flex-basis: 0; max-width: 100%; }

	.lg-1 { flex-basis: var(--col-1); max-width: var(--col-1); }
	.lg-2 { flex-basis: var(--col-2); max-width: var(--col-2); }
	.lg-3 { flex-basis: var(--col-3); max-width: var(--col-3); }
	.lg-4 { flex-basis: var(--col-4); max-width: var(--col-4); }
	.lg-5 { flex-basis: var(--col-5); max-width: var(--col-5); }
	.lg-6 { flex-basis: var(--col-6); max-width: var(--col-6); }
	.lg-7 { flex-basis: var(--col-7); max-width: var(--col-7); }
	.lg-8 { flex-basis: var(--col-8); max-width: var(--col-8); }
	.lg-9 { flex-basis: var(--col-9); max-width: var(--col-9); }
	.lg-10 { flex-basis: var(--col-10); max-width: var(--col-10); }
	.lg-11 { flex-basis: var(--col-11); max-width: var(--col-11); }
	.lg-12 { flex-basis: var(--col-12); max-width: var(--col-12); }
	
	.lg-offset-1 { margin-left: var(--col-1); }
	.lg-offset-2 { margin-left: var(--col-2); }
	.lg-offset-3 { margin-left: var(--col-3); }
	.lg-offset-4 { margin-left: var(--col-4); }
	.lg-offset-5 { margin-left: var(--col-5); }
	.lg-offset-6 { margin-left: var(--col-6); }
	.lg-offset-7 { margin-left: var(--col-7); }
	.lg-offset-8 { margin-left: var(--col-8); }
	.lg-offset-9 { margin-left: var(--col-9); }
	.lg-offset-10 { margin-left: var(--col-10); }
	.lg-offset-11 { margin-left: var(--col-11); }

	.start-lg { justify-content: flex-start; }
	.center-lg { justify-content: center; }
	.end-lg { justify-content: flex-end; }
	.top-lg { align-items: flex-start; }
	.middle-lg { align-items: center; }
	.bottom-lg { align-items: flex-end; }
	.around-lg { justify-content: space-around; }
	.between-lg { justify-content: space-between; }
	.first-lg { order: -1; }
	.last-lg { order: 1; }

	.invisible-lg { display: none; visibility: hidden; }
	.visible-lg { display: block; visibility: visible; }

}

@media only screen and (min-width: 96em) {

	.xl { flex-grow: 1; flex-basis: 0; max-width: 100%; }

	.xl-1 { flex-basis: var(--col-1); max-width: var(--col-1); }
	.xl-2 { flex-basis: var(--col-2); max-width: var(--col-2); }
	.xl-3 { flex-basis: var(--col-3); max-width: var(--col-3); }
	.xl-4 { flex-basis: var(--col-4); max-width: var(--col-4); }
	.xl-5 { flex-basis: var(--col-5); max-width: var(--col-5); }
	.xl-6 { flex-basis: var(--col-6); max-width: var(--col-6); }
	.xl-7 { flex-basis: var(--col-7); max-width: var(--col-7); }
	.xl-8 { flex-basis: var(--col-8); max-width: var(--col-8); }
	.xl-9 { flex-basis: var(--col-9); max-width: var(--col-9); }
	.xl-10 { flex-basis: var(--col-10); max-width: var(--col-10); }
	.xl-11 { flex-basis: var(--col-11); max-width: var(--col-11); }
	.xl-12 { flex-basis: var(--col-12); max-width: var(--col-12); }
	
	.xl-offset-1 { margin-left: var(--col-1); }
	.xl-offset-2 { margin-left: var(--col-2); }
	.xl-offset-3 { margin-left: var(--col-3); }
	.xl-offset-4 { margin-left: var(--col-4); }
	.xl-offset-5 { margin-left: var(--col-5); }
	.xl-offset-6 { margin-left: var(--col-6); }
	.xl-offset-7 { margin-left: var(--col-7); }
	.xl-offset-8 { margin-left: var(--col-8); }
	.xl-offset-9 { margin-left: var(--col-9); }
	.xl-offset-10 { margin-left: var(--col-10); }
	.xl-offset-11 { margin-left: var(--col-11); }

	.start-xl { justify-content: flex-start; }
	.center-xl { justify-content: center; }
	.end-xl { justify-content: flex-end; }
	.top-xl { align-items: flex-start; }
	.middle-xl { align-items: center; }
	.bottom-xl { align-items: flex-end; }
	.around-xl { justify-content: space-around; }
	.between-xl { justify-content: space-between; }
	.first-xl { order: -1; }
	.last-xl { order: 1; }

	.invisible-xl { display: none; visibility: hidden; }
	.visible-xl { display: block; visibility: visible; }

}

/* Font Declarations */
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	font-optical-sizing: auto;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	font-optical-sizing: auto;
}

/* Base Styles */

html, body {
	height: 100vh;
	width: 100vw;
	overflow: auto;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-md);
}

body {
	font-family: var(--font-family);
	font-weight: 300;
	font-weight: var(--font-wght-text);
	line-height: 1.5;
	letter-spacing: .05em;
	background-color: var(--color-bg);
	color: var(--color-text);
}

h1, h2, h3, h4 {
	font-weight: var(--font-wght-heading);
	margin-top: 0;
	line-height: 1.2;
}

h1 { font-size: var(--font-size-xxl);; }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-lg); }


/* Page Layout */
.page {
	height: 100vh;
	width: 100vw;
}

.page__column {
	height: auto;
	overflow-y: visible;
	padding: 0 2rem 2rem 2rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 237, 191, 0.2) transparent;
}

.page__column--left {
	padding-top: 2rem;
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-bg-highlight);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-bg-highlight);
}

/* Content Section - Left Column */
.content {
	max-width: 100%;
}

.content__title {
	margin: 0 0 .5em 0;
	color: var(--color-accent-red);
}

/* .content__title--russian {} */
/* .content__title--english {} */

.content__text {
	margin-bottom: 2rem;
}

/* Partners Section */
.partners {
	margin-top: 3rem;
}

.partners__title {
	/* font-size: 1.25rem; */
	margin-bottom: 1rem;
	color: var(--color-accent-blue);
}

.partners__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
}

.partner__logo {
	max-height: 150px;
	width: auto;
}

/* Album Section - Right Column */
.album {
	max-width: 100%;
}

.album__cover {
	max-width: 100%;
	margin-bottom: 2rem;
}

.album__image {
	width: 100%;
	height: auto;
	display: block;
	/* transition: transform 0.3s ease; */
	/* cursor: pointer; */
	border-radius: var(--border-r-box);
}

/* .album__image:hover { transform: scale(1.025); } */

/* Tracks Section */
.tracks {
	margin-bottom: 2rem;
}

.tracks__title {
	/* font-size: 1.25rem; */
	margin-bottom: 1rem;
	color: var(--color-accent-blue);
}

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

.track {
	margin: 0;
}

.track__button {
	display: flex;
	width: 100%;
	min-height: 46px;
	padding: 10px 1rem;
	font-family: var(--font-family);
	font-weight: var(--font-wght-text);
	letter-spacing: .05em;
	text-align: left;
	color: var(--color-text);
	background: none;
	border: none;
	border-radius: 3rem;
	cursor: pointer;
	transition: background-color 0.2s;
}

.track__button:hover {
	font-size: var(--font-size-lg);
	background-color: var(--color-bg-highlight);
}

.track__button.active {
	color: var(--color-accent-red);
	font-weight: var(--font-wght-highlight);
	font-size: var(--font-size-lg);
	background-color: var(--color-bg-highlight);
}

.track__number {
	width: 2rem;
	flex-shrink: 0;
}

.track__name {
	flex-grow: 1;
	margin-right: 1rem;
}

.track__duration {
	flex-shrink: 0;
}

/* Player Section */
.player {
	margin: 2rem 0 1.5rem 0;
	line-height: 0;
}

.player__audio {
	width: 100%;
}

/* Lyrics Section */
.lyrics {
	margin: 2rem 0;
}

.lyrics__title {
	/* font-size: 1.25rem; */
	/* margin-bottom: 0.5rem; */
	color: var(--color-accent-blue);
}

.lyrics__description {
	font-size: var(--font-size-sm);
	opacity: 0.7;
	margin-bottom: 1rem;
}

.lyrics__list {
	margin: 0;
	border: 2px solid var(--color-accent-blue);
	border-radius: var(--border-r-box);
}

.lyrics__item {
	/* margin-bottom: 1rem; */
	overflow: hidden;
	border-radius: var(--border-r-box);
}

.lyrics__summary {
	padding: .5rem 1rem;
	cursor: pointer;
	font-weight: var(--font-wght-highlight);
	color: var(--color-accent-blue);
	list-style: none;
}

.lyrics__summary::-webkit-details-marker {
	display: none;
}

.lyrics__summary::marker {
	display: none;
}

.lyrics__summary:hover {
	background-color: var(--color-bg-highlight);
}

.lyrics__item:focus,
.lyrics__summary:focus,
.lyrics__summary:focus-visible,
.lyrics__item[open] .lyrics__summary {
	outline: none;
	background-color: var(--color-bg-highlight);
}

.lyrics__summary:focus,
.lyrics__summary:focus-visible,
.lyrics__item[open] .lyrics__summary {
	color: var(--color-accent-red);
}

.lyrics__text {
	padding: 0 1rem 1rem 1rem;
	overflow: hidden;
	line-height: 1.6;
	/* font-size: var(--font-size-sm); */
	border-bottom-left-radius: var(--border-r-box);
	border-bottom-right-radius: var(--border-r-box);
	background-color: var(--color-bg-highlight);
}

.lyrics__text p { margin-bottom: 1rem; }
/* .lyrics__text p:first-child { margin-top: 0; } */
.lyrics__text p:last-child { margin-bottom: 0; }

/* Desktop Lyrics Overlay */
.lyrics-overlay {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 50vw;
	height: 100vh;
	padding: 0;
	overflow-y: auto;
	box-sizing: border-box;
	border-radius: 0;
	background-color: var(--color-bg);
}

.lyrics-overlay__content {
	/* max-width: 100%; */
	width: calc(100% - 1rem);
	min-height: calc(100% - 2rem);
	margin: 1rem 0 1rem 1rem;
	padding: 2rem;
	box-sizing: border-box;
	font-weight: var(--font-wght-highlight);
	color: var(--color-bg);
	border-radius: var(--border-r-box);
	background-color: var(--color-text);
}

.lyrics-overlay__close {
	position: absolute;
	z-index: 1111;
	top: .75rem;
	right: 1rem;
	display: block;
	padding: 0 .25em;
	cursor: pointer;
	font-size: 3rem;
	font-weight: 200;
	line-height: 1em;
	color: var(--color-bg);
	background: none;
	border: none;
}

.desktop-lyrics__close {
	top: 1.75rem;
}
/* .mobile-lyrics__close {} */

.lyrics-overlay__title {
	/* font-size: 1.5rem; */
	margin-bottom: 1rem;
	color: var(--color-accent-red);
	filter: brightness(0.7);
}

.lyrics-overlay__text {
	line-height: 1.6;
	/* font-size: 1rem; */
}

.lyrics-overlay__text p {
	margin-bottom: 1rem;
}

/* Mobile Lyrics Inline */
.mobile-lyrics {
	display: none;
	background-color: var(--color-text);
	border: none;
	border-radius: var(--border-r-box);
	padding: 2rem;
	margin: 0.5rem 0;
	position: relative;
}

.mobile-lyrics__title {
	margin: 0;
	padding: 0;
	/* font-size: 1.125rem; */
	color: var(--color-accent-red);
}

/* .mobile-lyrics__text {} */

.mobile-lyrics__text p {
	margin-bottom: 0.75rem;
	font-weight: var(--font-wght-highlight);
	color: var(--color-bg);
}

.mobile-lyrics__text p:last-child {
	margin-bottom: 0;
}

/* Desktop-only hover functionality */
@media only screen and (min-width: 64em) {
	.lyrics__description {
		display: block;
	}
	
	.track__button {
		position: relative;
	}
}

/* Mobile-only functionality */
@media only screen and (max-width: 63.999em) {
	.lyrics__description {
		display: none;
	}
}

/* Info Section */
.info {
	margin-top: 3rem;
	font-size: var(--font-size-xs);
}

.info__title {
	/* font-size: 1.25rem; */
	margin-bottom: 1rem;
	color: var(--color-accent-blue);
}

.info__link {
	font-weight: var(--font-wght-highlight);
	text-decoration: none;
	color: var(--color-accent-blue);
}

.info__link:hover, 
.info__link:focus {
	text-decoration: underline;
}

/* Responsive Adjustments */
@media only screen and (min-width: 64em) {
	html, body {
		overflow: hidden;
	}

	.page__container {
		flex-direction: row-reverse;
	}
	
	.page__column {
		height: 100vh;
		overflow-y: auto;
	}

	.page__column--right {
		padding-top: 2rem;
	}
}

/* Download */
.download {
	margin-bottom: 2rem;
	text-align: center;
}

.download__button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	font-weight: var(--font-wght-highlight);
	color: var(--color-accent-blue);
	background-color: transparent;
	text-decoration: none;
	border: 2px solid var(--color-accent-blue);
	border-radius: var(--border-r-box);
	transition: background-color 0.2s;
}

.download__button:hover {
	color: var(--color-accent-red);
	border-color: var(--color-accent-red);
}

.download__icon {
	font-size: var(--font-size-lg);
}


/* Responsive Video Container */
.videos {
	margin: 2rem 0;
}

.video {
	margin-bottom: 2rem;
}

.video__container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--border-r-box);
}

.video__container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Fallback für ältere Browser */
@supports not (aspect-ratio: 16 / 9) {
	.video__container {
		padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
		height: 0;
	}
}


/* WCAG Accessibility Adjustments */
:focus,
:focus-visible {
	outline: 2px solid var(--color-accent-blue);
	outline-offset: 2px;
}

.track__button:focus-visible {
	outline: 2px solid var(--color-accent-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}