: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: #968e85;
	color: #272727;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.9px;
}

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

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

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;
}

main h3 span {
	font-size: 50%;
}

a {
	cursor: pointer;
}






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

header {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 50px 0 20px;
	margin: 0 5% 30px 5%;
	background: rgba(150, 142, 133, 0);
	transition: background .4s ease;
}

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;
}

header:hover {
	background: rgba(150, 142, 133, 1);
}

/* === */

h1 {
	font-size: 26px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	line-height: 0.58em; /* pre2026-07 was 0.5em */
	position: relative;
	top: 2px;
	text-align: right;
}

h1 span {
	font-family: var(--font-body);
	font-size: 12px;
	text-transform: none;
	opacity: 0.4;
	letter-spacing: 2.38px; /* Cinematography . Steadicam . Photography - since 2026-09 */
	/* letter-spacing: 1.49px; Steadicam Operator . 2nd Unit Cinematographer - since 2026-07 */
	/* letter-spacing: 1.5px; STEADICAM . CAMERA OPERATING . CINEMATOGRAPHY */
}

/* === */

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: #000;
	transition: width .2s ease;
}

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

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:#000;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h2 span {
	color: #888;
}

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

.kolmen-kollaasi-flex > div {
	width: 50%; /* Distribute width for 2 columns, accounting for gap */
	/* width: calc(100% / 3 - 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.76/1;
}

.video-kollaasi a {
	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: 0; /*-- Poistin 2026-08-17 koska ei vaikuta tarpeelliselta jos on keskella --*/
	left: 0;
	/* transform: translate(-50%, -50%); vain jos on keskella */
	z-index: 1; /* Ensure it appears on top of the video */
	text-align: left;
	padding: 0;
	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 */
	line-height: 0.8em;
}

.keskelle-vanhempaa h2 {
	margin: 0 0 5px 0;
	font-size: 1.7em;
	letter-spacing: 1.9px;
	background-color: #968e85;
	padding: 11px 12px;
}

.keskelle-vanhempaa p {
	display: none;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: none;
	opacity: 0.4;
}

.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: #272727 !important;
}

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

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

main.kuva-kollaasi-flex .kolme-kaistaa > *, 
main.kuva-kollaasi-flex .kaksi-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.8em;
	text-transform: uppercase;
	margin: 2em 0 0.5em;
    /* border-bottom: 1px solid; pre-20260912 */
	color:#000;
}

h4 {
	font-size: 1.3em;
	text-transform: uppercase;
	margin: .5em 0 -0.7em;
}

.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%);
}
main.kuva-kollaasi-flex .kaksi-kaistaa > * {
	width: calc(100% / 2 - 1%);
}

.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: 1050px) { /* oli 960px 09/09/2026 */
	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: 640px) { /* oli 500px 09/09/2026 */
	.nav-normal {
		display: none;
	}
	.nav-shortened {
		display: inline-block;
	}
	.kolmen-kollaasi-flex {
		padding: 10px;
	}
}


/*  jeespoks  */