:root {
	/* Fonts updated 2024/01/25 */
    --font-body: 'Crimson Text', serif;
    --font-heading: 'DM Serif Display', serif;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	background: #272727;
	color: #eee;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.9px;
}

h1, h2, h3 {
	font-family: var(--font-heading);
    font-weight: normal; /* important for Safari to render this properly */
}

h1, a, a:visited, a:active, a:hover {
	color: #fff;
}

h1, a, a:visited, a:active, a:hover,
main h3, main p, main dl {
    transition: 0.2s;
}

a:hover, main a:hover, nav a.valittu,
main h3 span, main p span, main h3:hover, main p:hover, main dl:hover, main dd span {
	opacity: 0.5;
}

a {
	cursor: pointer;
}






/* ----------
2026 - header
---------- */

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 50px 5%;
}

header a, header a:hover, header a:active, header a:visited,
nav a, nav a:hover, nav a:active, nav a:visited {
	text-decoration: none;
}

/* === */

h1 {
	font-size: 26px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	line-height: 0.5em;
	position: relative;
	top: 2px;
}

h1 span {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 1.5px; /* STEADICAM . CAMERA OPERATING . CINEMATOGRAPHY */
	opacity: 0.5;
}

/* === */

nav {
	margin: 0;
	display: flex;
	align-items: flex-end;
}

nav a {
	margin: 0 11px;
	padding: 2px 3px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

nav a:first-of-type {
	margin-left: 0;
}

nav > a.bare_link {
	border: 0;
	margin: 0 2px 0 9px;
	padding: 0 2px;
}

nav > a.bare_link ~ a.bare_link {
	margin: 0 2px;
}

.nav-shortened {
	display: none;
}






/* -----------------
animoitu alleviivaus
----------------- */

nav a, main p a {
	position: relative;
}

nav a:not(.bare_link):after {
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	display: block;
	right: 0;
	background: #fff;
	transition: width .2s ease;
	-webkit-transition: width .2s ease;
}

nav a:not(.bare_link):hover:after {
	width: 100%;
	left: 0;
	background: #fff;
}

nav a.valittu:after {
	width: 100%;
	height: 2px;
}

main a, main a:visited, main a:active, main a:hover {
	text-decoration: underline;
}






/* ------------------
2026 - video kollaasi
------------------ */

h2 {
	font-size: 20px;
	line-height: 1.1em;
	margin: 10px auto 1px;
	color:#fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: .2s;
}

h2 span {
	color: #888;
}

.kolmen-kollaasi-flex {
	display: flex;
	flex-wrap: wrap; /* Allow items to wrap to the next line */
	justify-content: center;
	gap: 20px; /* Space between items */
	padding: 0 20px 20px 20px;
	width: 100%;
	box-sizing: border-box; /* Include padding in element's total width and height */
}

.kolmen-kollaasi-flex > div {
	width: calc(33.33% - 40px / 3); /* Distribute width for 3 columns, accounting for gap */
	position: relative; /* For absolute positioning of overlay */
	overflow: hidden; /* Hide any overflow from video or overlay */
	display: flex; /* Use flex to center the anchor tag if needed, though not strictly required with absolute video */
	justify-content: center;
	align-items: center;
	aspect-ratio: 1.85/1;
}

.video-kollaasi a {
	display: block; /* Make the anchor tag fill its parent div */
	width: 100%;
	height: 100%;
	position: relative; /* Crucial for positioning .keskelle-vanhempaa relative to the link */
	text-decoration: none;
	color: inherit; /* Inherit color for text inside link */
	display: flex; /* Use flex to center the video if needed */
	justify-content: center;
	align-items: center;
}

.video-kollaasi a:hover {
	opacity: 1 !important;
}

.video-kollaasi video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 'Contain' or 'Cover' */
	display: block; /* Remove any extra space below the video element */
}

.divide-divs > div {
	margin-bottom: 2em;
}

/* Centering for the overlay */
.keskelle-vanhempaa {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1; /* Ensure it appears on top of the video */
	text-align: center;
	padding: 15px;
	opacity: 0; /* Initially hidden */
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none; /* Allow clicks to pass through to the video/link below */
}

.keskelle-vanhempaa h2 {
  margin: 0 0 5px 0;
  font-size: 1.7em;
}

.keskelle-vanhempaa p {
	font-weight: 400;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.keskelle-vanhempaa p span {
	text-transform: none;
}

/* Show overlay on hover */
.video-kollaasi > div:hover .keskelle-vanhempaa {
	opacity: 1;
}






/* ---------
2024 - leipa
--------- */

.keskitetty {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 2em auto;
	width: 100%;
}

.keskitetty-pysty {
	align-items: center;
}

main {
	margin: 0 auto;
	max-width: 800px;
	padding: 0 5% 50px 5%;
}

main p a, main p a:visited, main p a:active {
	text-decoration: underline;
	color: #eee !important;
}

main p a:hover {
	text-decoration: none;
}

main.kuva-kollaasi-flex {
	max-width: 1200px;
}

main.kuva-kollaasi-flex .kolme-kaistaa > * {
	margin: calc(100% / 3 - 32.7%) 0;
}

main.kuva-kollaasi-flex a:hover {
	opacity: 1; /* 0.75 */
	/* transition: 0.3s; */
}

h3 {
	font-size: 1.5em;
	text-transform: uppercase;
	margin: 1.5em 0 0.5em;
    border-bottom: 1px solid;
}

.kuusi-kaistaa,
.kolme-kaistaa,
.kaksi-kaistaa,
.yksi-kaista {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

.kuusi-kaistaa > *,
.kolme-kaistaa > *,
.kaksi-kaistaa > * {
	margin: 0.5em 0;
}

.kuusi-kaistaa > * {
	width: calc(100% / 6 - 1%);
}

.kolme-kaistaa > * {
	width: calc(100% / 3 - 1%);
}

.kaksi-kaistaa > * {
	width: calc(100% / 2 - 2%);
}

.yksi-kaista > * {
	width: 100%;
}

img {
	object-fit: contain;
	max-width: 100%;
}

.julisteet img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}






/* ------------
2024 - vastaava
------------ */

@media (max-width: 1500px) {
	.kolmen-kollaasi-flex > div {
		flex: 0 0 calc(50% - 30px / 2); /* Distribute width for 2 columns, accounting for gap */
		height: 300px; /* Adjust height for larger items */
	}
	.kolme-kaistaa.vastaava > * {
		width: calc(100% / 2 - 1%);
	}
	.kuusi-kaistaa.vastaava > * {
		width: calc(100% / 3 - 1%);
	}
}

/* === */

@media all and (max-width: 960px) {
	header {
		flex-direction: column;
		margin-bottom: 20px;
		padding-top: 40px;
	}
	h1 {
		margin: 0;
	}
	header nav {
		margin: 2em 0 0 0;
	}
	.kolmen-kollaasi-flex > div {
		flex: 0 0 100%; /* Full width for 1 column */
		height: 280px; /* Adjust height for single column */
	}
	.kaksi-kaistaa.takaperin {
		flex-direction: column-reverse;
	}
	.kaksi-kaistaa > * {
		width: 100%;
	}
	.kolme-kaistaa.vastaava > * {
		width: calc(100%);
	}
	.kuusi-kaistaa.vastaava > * {
		width: calc(100% / 2 - 1%);
	}
}

/* === */

@media all and (max-width: 500px) {
	.nav-normal {
		display: none;
	}
	.nav-shortened {
		display: inline-block;
	}
	.kolmen-kollaasi-flex {
		padding: 10px;
	}
}


/*  jeespoks  */