/* @group FONTS */

@font-face {
  font-family: 'Radio Canada';
  src: url('../fonts/RadioCanada-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/RadioCanada-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: 'Radio Canada Big';
  src: url('../fonts/RadioCanadaBig-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/RadioCanadaBig-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--color-dark: 				#000000;
	--color-light:				#FFFFFF;
	--color-primary: 		#f2af57;
	--color-secondary: 	#c2bebb;
	--color-tertiary: 		#a38e71;
	--color-mark: 				#f5d3bc;
	
	--font-family: 'Radio Canada', Helvetica, Arial, sans-serif;
	--font-family-heading: 'Radio Canada Big', Helvetica, Arial, sans-serif;
	
	--font: 		400 clamp(18px, 2.0vw, 22px)/1.4em var(--font-family);
	--font-lg: 	550 1.4rem/1.3em var(--font-family);
	--font-xl: 	500 2.2rem/1em var(--font-family);
	
	--font-weight-bold: 650;
	--font-stretch: 92%;
	
	--padding-inline: 			clamp(1rem, 4vw, 2rem);
	
	--spacing-block: 		clamp(1.5rem, 6vw, 3rem);
	--spacing-block-lg: 	clamp(3rem, 12vw, 6rem);
	
	--column-gap: clamp(2rem, 6vw, 3rem);
	
	--shadow-image: 0 0 1rem rgba(0,0,0,.15);
	
}

/* @end */

/* @group BASE */

html,
body {
	min-width: 320px;
	font: var(--font);
}

body {
	container-type: inline-size;
	color: var(--color-light);
}

strong {
	font-weight: var(--font-weight-bold);
}

h1 {
	font: var(--font-lg);
	font-stretch: 90%;
}

h1:has(+ *) {
	margin-bottom: 1.4rem;
}

h2 {
	font-weight: var(--font-weight-bold);
	font-stretch: 100%;
}

* + h2 {
	margin-top: 1.4em;
}

h2:has(+ *) {
	margin-bottom: 1em;
}

p:has(+ *) {
	margin-bottom: 1em;
}

mark {
	color: var(--color-dark);
	padding-block: .2em;
	padding-inline: .4em;
	background-color: var(--color-mark);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* @group Lists */

.main ul:not([class]):has(+ *) {
    margin-bottom: 1em;
}

	.main ul:not([class]) li {
	   display: flex;
	}
	
		.main ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 1.25em;
			padding-right: .25em;
			text-align: center;
		}
	
	.main ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	
ol {
  counter-reset: counter;
}

ol:has(+ *) {
	margin-bottom: 1em;
}

	ol li {
		display: table;
	  counter-increment: counter;
	}
	
		ol li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @group Links */

.text a,
.footer a {
	text-decoration: underline;
	text-decoration-thickness: .07em;
	text-underline-offset: .15em;
	transition: text-decoration .15s ease-in-out 0s;
}

.footer a {
	text-decoration-color: transparent;
}

.text a,
.footer a.active,
.footer a:hover {
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.text a:has(mark) {
	text-decoration-color: color-mix(in srgb, var(--color-dark) 40%, transparent);
}

.text a:hover {
	text-decoration-color: currentColor;
}

.text a:has(mark):hover {
	text-decoration-color: var(--color-dark);
}

/* @end */

/* @end */

/* @group Body */

.body {
	min-width: 320px;
	min-height: 100vh;
}

/* @end */

/* @group Header */

.header {
	position: relative;
	display: flex;
	column-gap: 1em;
	row-gap: 1.4rem; /* space between staves */
	margin-block: var(--spacing-block) var(--spacing-block-lg);
	padding-inline: var(--padding-inline);
	color: var(--color-light);
	font: var(--font-lg);
	line-height: 1;
}

	.header::before,
	.header::after {
		position: absolute;
		z-index: 0;
		inset-inline: 0;
		content: "";
		display: block;
		height: 1.8rem;
		background: linear-gradient(
	    #FFFFFF 6%,
	    transparent 0 23.5%,
	    #FFFFFF 0 29.5%,
	    transparent 0 47%,
	    #FFFFFF 0 53%,
			transparent 0 70.5%,
	    #FFFFFF 0 76.5%,
			transparent 0 94%,
	    #FFFFFF 0 100%
	  );
		background-size: cover;
		background-repeat: no-repeat;
		opacity: .4;
	}
	
	.header::before {
		inset-block-start: .6rem;
	}
	
	.header a {
		display: inline-block;
		transition: all .15s ease-in-out 0s;
	}

	.header a:hover {
		transform: scaleX(1.1);
	}
	
	.header a.active {
		letter-spacing: .1em;
	}

	@container (max-width: 39.999999999rem) {
		
		.header {
			flex-direction: column;
		}
		
			.header::after {
				inset-block-end: 0;
			}

	}
	
	@container (min-width: 40rem) {
		
		.header {
			justify-content: space-between;
		}
		
			.header::after {
				display: none;
			}
		
	}


/* @end */

/* @group Logo */

.logo {
	position: relative;
	z-index: 10;
	font: var(--font-xl);
}

/* @end */

/* @group Menu */

.menu {
	position: relative;
	z-index: 10;
	display: flex;
	column-gap: clamp(.6em, 2.8vw, 1em);
	margin-bottom: .15rem;
	font-stretch: 90%;
	line-height: 1;
}

	.menu > *:nth-child(2) {
		margin-block-start: -.3em;
	}
	
	.menu > *:nth-child(3) {
		margin-block-start: .3em;
	}
	
	@container (max-width: 39.999999999rem) {
		
		.menu {
			align-self: flex-end;
			
		}
		
	}

/* @end */

/* @group Main */

.main {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--padding-inline);
	padding-block-end: var(--spacing-block-lg);
	font-stretch: var(--font-stretch);
}

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

	@container (max-width: 39.999999999rem) {
		
		.main {
			min-height: calc(100vh - var(--spacing-block) - 5.7rem - var(--spacing-block-lg) - 5.5rem);
		}

	}
	
	@container (min-width: 40rem) {
		
		.main {
			min-height: calc(100vh - var(--spacing-block) - 2.2rem - var(--spacing-block-lg) - 4rem);
		}

	}

/* @end */

/* @group Text */

.text {
	max-width: calc(30rem - .5 * var(--column-gap));
}

/* @end */

/* @group Scores & Score */

h1:has(+ .scores) {
	display: none;
}

.scores {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: var(--spacing-block-lg);
}

	@container (min-width: 40rem) {
			
		.scores {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.scores > *:nth-child(2n) {
				margin-top: var(--column-gap);
			}
		
	}
		
.score {
	display: flex;
	align-items: center;
	column-gap: .5em;
}

.score:has(+ *) {
	margin-bottom: 1em;
}

/* @end */

/* @group Audio-player */

.audio-player {
	position: relative;
	width: 3rem;
	height: 3rem;
	border: .1rem solid var(--color-light);
	border-radius: 50%;
}

.scores .audio-player {
	border-color: var(--color-light);
}

	.audio-player svg {
		width: 100%;
		height: auto;
	}

.progress-circle,
.play-button {
	width: 100%;
	height: 100%;
}

.progress-circle {
  transform: rotate(-90deg);
}
	
	.progress-circle .background {
	  fill: var(--color-primary);
	}
	
	.scores .progress-circle .background {
	  fill: transparent;
	}
	
	.progress-circle .progress {
		fill: var(--color-primary);
	  stroke: var(--color-primary);
	  stroke-width: 10;
	  stroke-dasharray: 283;
	  stroke-dashoffset: 283;
	  transition: stroke-dashoffset 0.25s;
	}
	
	.progress-circle .progress {
		fill: transparent;
	}

.play-button {
	position: absolute;
  top: 0;
  left: 0;
	color: var(--color-light);
	vertical-align: bottom;
	transition: color .15s ease-in-out 0s;
}

.scores .play-button {
	color: var(--color-light);
}

.scores .play-button:hover {
	color: var(--color-primary);
}

.play-button:hover {
	cursor: pointer;
}

/* @end */

/* @group Films & Film */

.films {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 2rem;
}

	.films img {
		width: 100%;
		height: auto;
		margin-bottom: .25rem;
	}
	
	.films h2 {
		font: var(--font);
		font-weight: var(--font-weight-bold);
	}
	
	.films p:has(+ *) {
		margin-bottom: .25em;
	}
	
	.films p:has(+ h2) {
		margin-bottom: unset;
	}

	.films p + h2 {
		margin-top: unset;
	}
	
	@media (min-width: 800px) {
		
		.films {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.films > *:nth-child(even) {
				margin-top: var(--column-gap);
			}
		
	}
	
	.main .film ul:not([class]) li {
		column-gap: .5em;
	}
		
		.main .film ul:not([class]) li::before {
			content: "";
			flex: 0 0 1.4em;
		  width: 1.4em;
		  height: 1.4em;
			padding-right: unset;
			-webkit-mask-image: url(../images/award.svg);
		  mask-image: url(../images/award.svg);
			-webkit-mask-size: cover;
		  mask-size: cover;
			background-color: currentColor;
		}

/* @end */

/* @group Background */

.background {
	position: fixed;
	z-index: -1;
  inset-block-start: 0;
	inset-inline: 0;
  height: 100vh;
	background-color: var(--color-tertiary);
}

	.background--image::before,
	.background--video::before {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		content: "";
		height: 10rem;
		background: linear-gradient(
	    #000 0%,
	    transparent 100%
	  );
		background-size: cover;
		opacity: .5;
	}

	.background img,
	.background__video {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		object-position: center top;  
	}

/* @end */

/* @group Footer */

.footer {
	display: flex;
	justify-content: flex-end;
	column-gap: 1.5em;
	padding-block: 1.5rem;
	padding-inline: var(--padding-inline);
	line-height: 1rem;
	font-stretch: var(--font-stretch);
}

	@container (max-width: 39.999999999rem) {
		
		.footer {
			padding-block-end: 3rem;
		}

	}

/* @end */