/*
 * Narrow screens get a single column: headline, text, then the picture.
 * From 760 pixels up the page is laid out like the original 800 pixel
 * Flash stage, with positions in its coordinates (see the end of the file).
 */

:root {
	--red: #cc0033;
	--rotis: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #ffffff;
	color: #000000;
	font: 16px/1.55 Verdana, "DejaVu Sans", sans-serif;
}

.site {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 16px 48px;
}

a {
	color: inherit;
}

a:hover {
	color: var(--red);
}

img {
	max-width: 100%;
}

/* Header */

.site-header {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 14px;
	padding-top: 12px;
}

.logo {
	display: block;
	width: 150px;
	padding-right: 12px;
	border-right: 2px solid #000000;
}

.logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
}

.contact svg {
	display: block;
	width: auto;
	height: 1.05em;
	overflow: visible;
}

.counter {
	display: inline-flex;
	gap: 3px;
}

.counter > span {
	width: 18px;
	height: 18px;
	border: 1px solid #000000;
	overflow: hidden;
	font: 13px var(--rotis);
	line-height: 18px;
	text-align: center;
}

/* The last digit rolls from 2 to 3 in the opening animation. */
.counter .roll > span {
	display: block;
}

.sections {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 10px;
	margin-top: 12px;
	font-size: 20px;
}

/* Two rows of three rather than five and one */
@media (max-width: 479px) {
	.sections {
		display: grid;
		grid-template-columns: repeat(3, auto);
	}
}

.sections a {
	position: relative;
	padding: 8px 0;
}

.sections svg {
	display: block;
	width: auto;
	height: 1.05em;
	overflow: visible;
}

/* Flash buttons turned red under the mouse. */
a:hover svg {
	fill: var(--red);
}

/* A dot marks the current section. */
.sections a[aria-current]::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 1px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: #000000;
}

/* Pages */

.js .page:not(.current),
.js .sub:not(.current):not(.record) {
	display: none;
}

.page {
	padding-top: 28px;
}

/* Only one page shows at a time, so keep the header in view on #page links. */
.js .page {
	scroll-margin-top: 100vh;
}

/*
 * Rotis text is inline SVG (see index.html). It is drawn at its Flash size
 * and scales down with the width, or with the font size where it sits in
 * running text.
 */
h1 {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	/* The Rotis subset is bold already; don't embolden it again. */
	font-weight: normal;
}

h1 svg {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

svg text {
	white-space: pre;
}

/* Numbered links to older articles */
.pager {
	display: flex;
	gap: 10px;
	margin: -4px 0 20px;
	font: 16px/1 "Palatino Linotype", Palatino, Georgia, serif;
}

.pager a {
	display: block;
	width: 30px;
	height: 30px;
	border: 1px solid #000000;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
}

.page p {
	margin: 0 0 1em;
}

.page .byline {
	margin-bottom: 1.1em;
	font-size: 13px;
	line-height: 1.4;
}

.sub h2 {
	margin: 0 0 0.6em;
	font-size: 18px;
	line-height: 1.3;
}

/* Paragraphs of the mushroom column run on with an indent. */
.column p:not(.byline) {
	margin-bottom: 0;
}

.column p:not(.byline) + p {
	text-indent: 1em;
}

figure {
	margin: 28px 0 0;
}

figure img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
}

figcaption {
	margin-top: 8px;
	font-size: 14px;
	text-align: right;
}

/* The line breaks are for the wide layout. */
figcaption br {
	display: none;
}

/* Records */

.records {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	font-size: 22px;
}

.records a {
	display: block;
	padding: 7px 0;
}

.records svg {
	display: block;
	width: auto;
	height: 1.05em;
	overflow: visible;
}

.levykuva {
	display: none;
}

.record {
	margin-top: 44px;
	scroll-margin-top: 16px;
}

.record h2 {
	margin: 0 0 14px;
	padding-top: 12px;
	border-top: 2px solid #000000;
	font: 26px/1.15 var(--rotis);
}

.record .cover {
	display: block;
	width: auto;
	max-width: min(100%, 320px);
	height: auto;
	max-height: 320px;
	margin-bottom: 14px;
}

.desc,
.tracks {
	font-style: italic;
}

.desc {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000000;
}

.page .desc p {
	margin: 0;
}

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

.connector {
	display: none;
}

/*
 * Wide screens: the layout of the 800 x 640 Flash stage. Pages start 120
 * pixels down the stage; positions inside a page are relative to that.
 */
@media (min-width: 760px) {
	body {
		font-size: 10px;
		line-height: 14px;
	}

	.site {
		width: 800px;
		padding: 0;
	}

	.site-header {
		display: block;
		position: relative;
		height: 120px;
		padding: 0;
	}

	.logo {
		position: absolute;
		left: 40px;
		top: 12px;
		z-index: 2;
		width: 180px;
		height: 91px;
		padding-right: 20px;
		border-right: 0;
	}

	.logo::after {
		content: "";
		position: absolute;
		left: 200px;
		top: 0.5px;
		width: 2px;
		height: 91px;
		background: #000000;
	}

	/* Covers what slides in from the left until it passes the rule. */
	.site-header::before {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 240px;
		height: 120px;
		background: #ffffff;
		pointer-events: none;
	}

	.logo svg {
		width: 180px;
		height: 100px;
		overflow: visible;
	}

	.contact {
		display: block;
	}

	.contact > * {
		position: absolute;
	}

	.site-header svg {
		height: auto;
	}

	.contact .email { left: 263px; top: 31px; }
	.contact .gsm { left: 403px; top: 30px; padding-left: 6px; border-left: 1px solid #000000; }
	.contact .gsm svg { margin-top: 1px; }
	.contact .counter { left: 518px; top: 28px; gap: 3.5px; }
	.contact .fania { left: 637px; top: 31px; }

	.sections {
		position: absolute;
		left: 262px;
		top: 92px;
		margin: 0;
		column-gap: 25px;
	}

	.sections a {
		padding: 0;
	}

	.sections a[aria-current]::before {
		top: -11px;
	}

	.page {
		position: relative;
		min-height: 520px;
		padding: 0 0 0 52px;
	}

	/* The headline's first baseline is 76 pixels down the page. */
	h1 {
		margin: 0 0 0 -6px;
		padding-top: 18px;
	}

	/* Above the headline, whose box covers this corner */
	.pager {
		position: absolute;
		z-index: 2;
		top: 131px;
		left: var(--pager-x);
		gap: 12px;
		margin: 0;
		font-size: 12px;
	}

	.pager a {
		width: 18px;
		height: 18px;
		line-height: 19px;
	}

	#uutiset { --pager-x: 375px; }
	#sienestys { --pager-x: 409px; }

	.page .byline {
		position: relative;
		margin: 3px 0 14px;
		white-space: nowrap;
		font-size: 10px;
		line-height: 14px;
	}

	/* The short rule at the left edge of the stage */
	.page .byline::before {
		content: "";
		position: absolute;
		left: -52px;
		top: 5px;
		width: 20px;
		border-top: 2px solid #000000;
	}

	.page > p,
	.sub {
		width: 275px;
	}

	.page p {
		margin-bottom: 14px;
	}

	.sub h2 {
		margin: -2px 0 9px;
		font-size: 14px;
		line-height: 18px;
	}

	figure {
		position: absolute;
		left: var(--fig-x);
		top: var(--fig-y);
		margin: 0;
	}

	figure img {
		width: auto;
		max-width: none;
	}

	figcaption {
		position: absolute;
		right: var(--cap-right);
		top: var(--cap-top);
		margin: 0;
		font-size: 10px;
		white-space: nowrap;
	}

	figcaption br {
		display: inline;
	}

	#etusivu { --fig-x: 382px; --fig-y: 132px; --cap-right: calc(100% + 9px); --cap-top: 263px; }
	#keikat { --fig-x: 397px; --fig-y: 41px; --cap-right: calc(100% - 64px); --cap-top: 364px; }
	#uutiset { --fig-x: 391px; --fig-y: 219px; }
	#galleria { --fig-x: 406px; --fig-y: 66px; --cap-right: calc(100% + 36px); --cap-top: 347px; }
	#sienestys { --fig-x: 374px; --fig-y: 140px; }

	#levyt h1 {
		padding-top: 33px;
	}

	#levyt > p {
		width: 295px;
	}

	.records {
		margin: 0;
	}

	.records li {
		height: 37px;
	}

	.records a {
		display: inline-block;
		padding: 0;
	}

	.records svg {
		height: auto;
	}

	.levykuva {
		display: block;
		position: absolute;
		left: 536px;
		top: 55px;
		width: 244px;
		height: auto;
	}

	.js #levyt.has-sub .levykuva,
	.js .record:not(.current) {
		display: none;
	}

	/* The record picked from the list, next to it */
	.record {
		position: absolute;
		left: 340px;
		top: 218px;
		display: grid;
		grid-template-columns: 172px 250px;
		grid-template-areas: "desc cover" "tracks cover";
		align-content: start;
		align-items: start;
		column-gap: 26px;
		margin: 0;
	}

	.record h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.record .cover {
		grid-area: cover;
		width: 250px;
		max-width: none;
		height: 250px;
		margin: 0;
		object-fit: contain;
		object-position: left top;
	}

	.desc {
		grid-area: desc;
		margin: 3px 0 14px;
		padding-bottom: 4px;
		text-align: right;
	}

	.tracks {
		grid-area: tracks;
		text-align: right;
	}

	.connector {
		display: block;
		position: absolute;
		border-top: 1px solid #000000;
		border-right: 1px solid #000000;
		pointer-events: none;
	}

	.connector.up {
		border-top: 0;
		border-bottom: 1px solid #000000;
	}

	.connector[hidden] {
		display: none;
	}
}

/*
 * The opening animation of the main Flash movie, at its 12 frames per
 * second: the logo slides in (frames 0-4), the rule drops (5-8), the
 * contact line and navigation slide in from behind the rule (9-13), the
 * rest and the page appear (14) and the fan counter rolls from 2 to 3
 * (34-43). Each animation runs from frame 0 to the frame it ends on, so
 * keyframe percentages are frame / last frame.
 */
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
	.logo svg {
		animation: intro-logo calc(5s / 12) step-end both;
	}

	.logo::after {
		animation: intro-rule calc(9s / 12) step-end both;
	}

	.contact .email,
	.contact .gsm,
	.sections {
		animation: intro-slide calc(14s / 12) step-end both;
	}

	.contact .counter,
	.contact .fania,
	main {
		animation: intro-show calc(14s / 12) step-end both;
	}

	.counter .roll > span {
		animation: intro-counter calc(43s / 12) step-end both;
	}
}

@keyframes intro-logo {
	0% { transform: translateX(213.55px); }
	20% { transform: translateX(160.15px); }
	40% { transform: translateX(106.75px); }
	60% { transform: translateX(53.4px); }
	80%, 100% { transform: none; }
}

@keyframes intro-rule {
	0% { visibility: hidden; }
	55.556% { visibility: visible; transform: translateY(-78.8px); }
	66.667% { transform: translateY(-52.55px); }
	77.778% { transform: translateY(-26.3px); }
	88.889%, 100% { visibility: visible; transform: none; }
}

@keyframes intro-slide {
	0% { visibility: hidden; }
	64.286% { visibility: visible; transform: translateX(-475px); }
	71.429% { transform: translateX(-380px); }
	78.571% { transform: translateX(-285px); }
	85.714% { transform: translateX(-190px); }
	92.857% { transform: translateX(-95px); }
	100% { visibility: visible; transform: none; }
}

@keyframes intro-show {
	0% { visibility: hidden; }
	100% { visibility: visible; }
}

@keyframes intro-counter {
	0% { transform: translateY(-18px); }
	79.07% { transform: translateY(-16.4px); }
	81.395% { transform: translateY(-14.8px); }
	83.721% { transform: translateY(-13.2px); }
	86.047% { transform: translateY(-11.6px); }
	88.372% { transform: translateY(-10px); }
	90.698% { transform: translateY(-8.4px); }
	93.023% { transform: translateY(-6.8px); }
	95.349% { transform: translateY(-5.2px); }
	97.674% { transform: translateY(-3.6px); }
	100% { transform: none; }
}