/*
	Tint: rgb(117, 20, 12)
	Cream: rgb(233, 227, 220)
	purple: #523e87
*/

@media (prefers-color-scheme: dark) {
	body {
		background: #334;
		color: #eee;
	}
}

@font-face {
	font-family: 'Blackletter';
	src: url('./fonts/Canterbury.ttf');
}

@font-face {
	font-family: 'Body Text';
	src: url('./fonts/hoefler-text.ttf');
}

body {
	font-family: 'Body Text';
	line-height: 150%;
	font-weight: 400;
	margin: unset;
}

a {
	color: dodgerblue;
}

h1, h2, h4, .row .name {
	font-family: 'Blackletter';
	font-style: normal;
	font-weight: normal;
}

h1 {
	font-size: 1cm;
}

h4 {
	font-size: 6mm;
}

header {
	position: relative;
	display: block;
	padding: 8mm;
	min-height: 6cm;
	background: rgb(233, 227, 220);
}

header img.background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.35;
	object-fit: cover;
	z-index: 0;
}

header div {
	line-height: 0.67cm;
}

header a {
	color: black;
	font-weight: 700;
}

header h1 {
	font-size: 1.5cm;
}

header h2 {
	font-size: 0.8cm;
	font-family: 'Body Text';
}

header .pane {
	max-width: 146.7mm;
	margin: auto;
}

header .book-table {
	float: right;
}

navigation {
	display: block;
	background: #523e87;
	padding: 8px;
	position: sticky;
	top: 0px;
	z-index: 2;
}

navigation div {
	text-align: center;
}

navigation a {
	color: white;
	text-decoration: unset;
	padding: 1mm 2mm;
}

.stretch {
	max-width: 146.7mm;
	display: flex;
	margin: auto;
	justify-content: space-between;
	align-items: center;
}

.stretch > * {
	display: flex;
}

article {
	max-width: 146.7mm;
	margin: 1cm auto;
	padding: 4mm;
}

article h1 {
	color: rgb(117, 20, 12);
}

table {
	width: 100%;
}

table tbody tr:nth-child(odd) {
	background: #eee;
}

table th, table td {
	vertical-align: top;
	padding: 1.6mm;
	text-align: left;
}

table tfoot td {
	background: #523e87;
	color: white;
	border-radius: 1mm;
}

.caps {
	text-transform: uppercase;
}

.center {
	text-align: center;
}

.right {
	text-align: right; 
}

hr {
	all: unset;
	display: block;
	margin: 1cm 0;
}

.row {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: dotted silver 2px;
	padding: 2mm 0 3mm;
}

.row .name {
	font-size: 7mm;
	margin: unset;
	padding: unset;
}

section {
	background: #011;
	color: white;
}

.spacer {
	min-width: 34%;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.gallery img {
	height: 3cm;
	width: 100%;
	object-fit: cover;
}

footer .grid {
	display: flex;
	grid-template-columns: repeat(3, 1fr);
	gap: 8mm;
	padding: 4mm;
	max-width: 20cm;
	margin: auto;
}

footer a {
	display: block;
	margin: 2mm 0;
}

footer a img {
	all: unset;
	width: auto;
	height: 65px;
	border-radius: 50%;
	padding: 1mm;
	background: white;
}

address {
	font-style: unset;
}

footer a.inline {
	display: unset;
}

.routes {
	height: 14cm;
}

.routes svg path {
	stroke: #011;
}

.routes h4 {
	text-align: center;
}

.dots {
	display: flex;
	justify-content: center;
	margin: 1cm 0;
}

.dots button {
	all: unset;
	margin: 1mm 2mm;
	width: 3mm;
	height: 3mm;
	border-radius: 2mm;
	border: solid black 0.5mm;
	opacity: 0.34;
	cursor: pointer;
}

.dots button:hover, .dots button[data-selected="true"] {
	opacity: 1;
	background: black;
}

.day {
	position: absolute;
	top: 1mm;
	right: 1mm;
}

@media screen and (max-width: 146.7mm) {
	table th, table td {
		display: block;
	}
	.row .spacer {
		display: none;
	}
	.gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
	}
	.gallery img {
		filter: grayscale(1);
		transition: filter 0.2s;
	}
	.gallery img:hover, .gallery img:active {
		filter: grayscale(0);
	}
	footer .grid {
		display: flex;
		flex-direction: column;
	}
	.extra {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {
	header {
		background: #223;
		color: white;
	}
	header a {
		color: white;
	}
	header h2 {
		color: #725ea7;
	}
	header strong {
		background-color: #523e87;
	}
	article h1, article h2 {
		color: hsl(194deg 30% 80%);
	}
	.routes svg path {
		stroke: white;
	}
	.dots button {
		background: white;
	}
	footer {
		background: #011;
	}
	table tbody tr:nth-child(odd) {
		background: #223;
	}
	selectable-item[data-selected="true"] .row { background: #523e87 }
}