/* sidebar widget styles (video container, notepad).
   Extracted verbatim from sidebar.php on 2026-06-10 (audit PERF-07 stage C):
   same rules, same cascade position via an in-place <link>, now cacheable
   instead of re-sent inside every page's HTML. */

` inside the relevant `if (uku_sidebar_show(...))`
		 later if we want zero overhead. */ ?>

<style>
.video-container {
	position: relative;
	padding-bottom: 57.5%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin-bottom: 8px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 5px 5px;
	box-shadow: grey 5px 5px 10px;
}


.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* het ukutabs notitieblokje */
.notepad {
	position: relative;
	margin: 30px auto;
	padding: 0 23px 14px 35px;
	width: 100%;
	line-height: 28px;
	font-size: 14px;
	color: #333;
	text-shadow: 1px 1px 1px #fff;
	text-align: justify;
}

.notepad,
.notepad:before,
.notepad:after {
	background-color: #fdf9de;
	background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px),
		-webkit-linear-gradient(#f6abca 1px, transparent 1px),
		-webkit-linear-gradient(#e8e8e8 1px, transparent 1px);
	background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px),
		-moz-linear-gradient(#f6abca 1px, transparent 1px),
		-moz-linear-gradient(#e8e8e8 1px, transparent 1px);
	background-image: -o-linear-gradient(#f6abca 1px, transparent 1px),
		-o-linear-gradient(#f6abca 1px, transparent 1px),
		-o-linear-gradient(#e8e8e8 1px, transparent 1px);
	background-image: linear-gradient(#f6abca 1px, transparent 1px),
		linear-gradient(#f6abca 1px, transparent 1px),
		linear-gradient(#e8e8e8 1px, transparent 1px);
	background-size: 1px 1px, 1px 1px, 23px 28px;
	background-repeat: repeat-y, repeat-y, repeat;
	background-position: 22px 0, 24px 0, 0 50px;
	border-radius: 2px;
	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 0 1px rgba(103, 99, 59, 0.15),
		0 0 4px rgba(255, 252, 234, 0.5);
}

.notepad {
	position: relative;
	margin: 21px auto;
	padding: 0 23px 14px 35px;
	width: 100%;
	line-height: 28px;
	font-size: 15px;
	color: #333;
	text-shadow: 1px 1px 1px #fff;
	text-align: justify;
}

.notepad p,
.notepad blockquote {
	margin-bottom: 0px;
}

.notepad:last-child {
	margin-bottom: 0;
}

.notepad:before,
.notepad:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 100%;
	left: 3px;
	right: 3px;
	margin-top: 0;
	height: 3px;
	background-size: 1px 1px, 1px 1px, 0 0;
}

.notepad:before {
	z-index: -2;
	left: 6px;
	right: 6px;
	height: 6px;
	background-color: #eee;
}

.notepad-heading {
	padding-top: 5px;
	position: relative;
	margin: 0 -23px 0 -35px;
	height: 80px !important;
	background: #fdf9de;
	border-radius: 2px 2px 0 0;
	background-image: linear-gradient(#f6abca 1px, transparent 1px),
		linear-gradient(#f6abca 1px, transparent 1px);
	background-size: 1px 1px, 1px 1px;
	background-repeat: repeat-y, repeat-y;
	background-position: 22px 0, 24px 0;
}

.notepad-heading>h1 {
	line-height: 30px;
	font-size: 26px;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 0 #fff;
	font-family: "Lobster", Arial, sans-serif;
	color: #9f441d;
}

.notepad-heading:before,
.notepad-heading:after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 1px;
	right: 1px;
	height: 0;
}

.notepad-heading:after {
	bottom: 3px;
	border-color: #071c2c;
	border-color: rgba(0, 0, 0, 0.5);
}

/* Modern notepad — same look as the artist-page bio (templates/loop/standard.php).
   Used by the list-intro and bio sidebar widgets below. The legacy
   `.notepad` block above is kept untouched because other templates still
   rely on it; new sidebar widgets use the BEM `.uku-notepad__*` classes
   to opt in to this design. */
.uku-notepad {
	position: relative;
	margin: 0 0 25px;
	background-color: #fdf9de;
	/* Ruled-paper lines moved to .uku-notepad__body below, so the bg
	   cycle starts at body-top and stays in phase with the body's text
	   line cycle regardless of the head's actual rendered height (the
	   sidebar head doesn't add up to a clean multiple of 32px). See
	   the matching block in templates/loop/standard.php for the longer
	   explanation. */
	border-radius: 4px;
	box-shadow:
		0 1px 0 rgba(103, 99, 59, 0.15) inset,
		0 8px 18px rgba(103, 99, 59, 0.12),
		0 1px 3px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.uku-notepad::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 26px;
	width: 5px;
	z-index: 2;
	pointer-events: none;
	background-image: linear-gradient(
		to right,
		#f6abca 0, #f6abca 1px,
		transparent 1px, transparent 3px,
		#f6abca 3px, #f6abca 4px,
		transparent 4px
	);
}
/* Head sized to exactly 96px (= 3 × 32px rule cycles) so body text lands
   on grid. padding 16/16 + caption 32 + title 32 = 96.
   Left padding is tighter than the artist page's notepad (40px vs 50px)
   because the sidebar column is narrower — more text per line matters. */
.uku-notepad__head {
	position: relative;
	padding: 8px 16px 8px 40px;
	background: #fdf9de;
	text-align: center;
}
/* Caption + title: mirror the homepage hero (.notepad-tagline /
   .notepad-h1) and guides hub hero (.uku-guides__hero-eyebrow /
   .uku-guides__hero h1) — both italic, with the title considerably
   larger than the caption so the eyebrow reads as a subdued lead-in
   to the bigger headline. */
.uku-notepad__caption {
	display: block;
	font-family: 'Lobster Two', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 15px;
	color: #6e886c;
	margin: 0;
	padding: 2px 0 0;
	line-height: 1.3;
}
.uku-notepad__title {
	margin: 4px 0 0;
	font-family: 'Lobster Two', Georgia, serif !important;
	font-style: italic;
	font-weight: 700;
	font-size: 27px;
	color: #9f441d !important;
	line-height: 1.15;
	text-transform: capitalize;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}
/* Body owns the ruled-paper gradient so the rule cycle is in phase
   with the body's 32px line-height cycle from the first text line
   down. Each line's visual centre sits at body-pixel N*32 + 16,
   equidistant from rules at N*32 and (N+1)*32. See the matching
   block in templates/loop/standard.php for the longer geometry note. */
.uku-notepad__body {
	padding: 0 16px 0 40px;
	color: #2d2418;
	font-size: 14px;
	line-height: 32px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(127, 119, 86, 0.22) 0,
		rgba(127, 119, 86, 0.22) 1px,
		transparent 1px,
		transparent 32px
	);
}
.uku-notepad__body p,
.uku-notepad__body blockquote { margin: 0; line-height: 32px; }
.uku-notepad__body a {
	color: #5f0c0c;
	text-decoration: underline;
	text-decoration-color: rgba(95, 12, 12, 0.4);
	text-underline-offset: 2px;
}
.uku-notepad__body a:hover { color: #8a1f08; text-decoration-color: #8a1f08; }

/* Genres + CTA — opaque cream strips below the body, full width so the
   pink margin lines stay covered. Live as siblings of the body. */
.uku-notepad__genres,
.uku-notepad__cta {
	background: #fdf9de;
	border-top: 1px dashed rgba(127, 119, 86, 0.30);
}
.uku-notepad__genres {
	padding: 12px 16px 12px 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 6px;
}
.uku-notepad__genres-label {
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	color: #6b6a5e;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-right: 3px;
}
.uku-notepad__genres a {
	display: inline-block;
	padding: 2px 9px;
	background: #f4ecc8;
	border: 1px solid #d8cfa8;
	color: #5f0c0c !important;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	border-radius: 10px;
	text-decoration: none !important;
	text-transform: capitalize;
	text-shadow: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.uku-notepad__genres-empty {
	font-size: 11px;
	color: #6b6a5e;
	font-style: italic;
}
.uku-notepad__genres-empty a {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: #5f0c0c !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-transform: none;
}
.uku-notepad__genres-empty a:hover { color: #8a1f08 !important; background: none; border-color: transparent; }
.uku-notepad__genres a:hover {
	background: #ece8d8;
	border-color: #d4a73a;
	color: #8a1f08 !important;
}
.uku-notepad__cta {
	display: block;
	padding: 11px 20px 11px 50px;
	color: #5f0c0c !important;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	text-decoration: none !important;
	text-shadow: none;
	transition: color .15s ease;
}
.uku-notepad__cta:hover { color: #8a1f08 !important; }
.uku-notepad__cta i {
	margin-left: 6px;
	font-size: 11px;
	transition: transform .2s ease;
}
.uku-notepad__cta:hover i { transform: translateX(3px); }

/* Sidebar notepad on narrow viewports — pull the pink margin lines and
   the left padding in further so we don't waste horizontal space when
   the column already collapses into the mobile single-column flow. */
@media (max-width: 600px) {
	.uku-notepad::before        { left: 18px; }
	.uku-notepad__head          { padding-left: 30px; padding-right: 12px; }
	.uku-notepad__body          { padding: 0 12px 0 30px; }
	.uku-notepad__genres        { padding-left: 30px; padding-right: 12px; }
	.uku-notepad__cta           { padding-left: 30px; padding-right: 12px; }
}

/* album achtegrond: pattern externalized to a cached file 2026-06-10 (audit PERF-07 stage A);
   was a ~90 KB data URI re-sent in every page's HTML */
.album {
	background-color: #252525;
	background-image: url('/wp-content/themes/olympus/utimages/album-topo-dark.svg');
}

.thealbum a {
	margin-left: 6px !important
}

.albumcover {
	margin-left: -27px !important;
}

.thealbimg {
	margin: 4px 0 0 10px;
	max-width: 175px !important;
}

@media (max-width:1399px) {
	.albumcover {
		margin-left: -27px !important;
	}
}

@media (max-width:1198px) {
	.albumcover {
		width: 187px !important;
		height: 174px !important;
		margin-left: -21px !important
	}

	.thealbum {
		width: 150px !important
	}

	.cd-case {
		margin: auto 0 auto -27px !important
	}

	.thealbimg {
		margin-left: -2px
	}
}

@media (max-width:1023px) {
	.albumcover {
		width: 222px !important;
		height: 201px !important;
		margin-left: -27px !important;
	}

	.thealbum {
		width: 175px !important;
		height: 258px;
	}
}

@media (max-width:799px) {
	.albumcover {
		width: 222px !important;
		height: 201px !important;
		margin-left: -27px !important;
	}

	.thealbum {
		width: 175px !important
	}
}

@media (max-width:600px) {
	.albumcover {
		width: 222px !important;
		height: 201px !important;
		margin-left: -27px !important;
	}

	.thealbum {
		width: 175px !important
	}

	.cd-case {
		margin: auto 0 auto -15px !important;
	}

	.thealbimg {
		margin-left: 10px
	}
}


/* .accoalbum h3 a {
	display: block;
	color: #f5f1e4;
	padding: 8px 10px;
	font-size: 15px;
	font-weight: 400;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	-webkit-box-shadow: inset 0 1px 0 #c1885d;
	-moz-box-shadow: inset 0 1px 0 #c1885d;
	box-shadow: inset 0 1px 0 #c1885d;
	border-width: 1px 1px 0;
	border-color: #734f37;
	border-style: solid;
	background: #674f0c;
	background: -moz-linear-gradient(0deg, #52382b 0%, #865d3f 100%);
	background: -webkit-linear-gradient(0deg, #52382b 0%, #865d3f 100%);
	background: linear-gradient(0deg, #52382b 0%, #865d3f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#52382b", endColorstr="#865d3f", GradientType=1);
} */

/* youtube button subscribe hover wit maken */
.vc_btn3 a:hover,
.vc_btn3:hover {
	color: #fff !important
}