@charset "utf-8";

@font-face {
	font-family: "FjallaOne Regular";
	src: url("webfont/FjallaOne-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Arvo";
	src: url("webfont/Arvo-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Arvo";
	src: url("webfont/Arvo-Bold.ttf") format("truetype");
	font-weight: bold;
}
@font-face {
	font-family: "Arvo";
	src: url("webfont/Arvo-Italic.ttf") format("truetype");
	font-style: italic;
}
@font-face {
	font-family: "Arvo";
	src: url("webfont/Arvo-BoldItalic.ttf") format("truetype");
	font-weight: bold;
	font-style: italic;
}

/* ==========================================================================
   GLOBALS & BASE STYLES
   ========================================================================== */
:root {
	--nav-pad-top: 0.44em;
	--nav-pad-bottom: 0.38em;
	--nav-line-gap: -.2em;
	--nav-pad-side: 0.5em;
}

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
a {
	text-decoration: none;
}
a:link, a:visited {
	color: #BF6163;
}
a:hover {
	color: #9E4446;
	text-decoration: underline;
}
a:active {
	color: #FF0004;
}

table {
	table-layout: fixed;
}
img.fillwidth {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Typography & Layout Utility Classes */
.bod {
	font-family: "Arvo", serif;
}
.bod2 {
	font-family: "Arvo", serif;
	font-size: 18px;
	color: #673637;
	line-height: 1.7em;
}
.bod3 {
	font-family: "Arvo", serif;
	font-size: 12px;
	color: #626262;
	line-height: 1.2em;
}
.bod3 p {
	margin-top: 0;
	margin-bottom: 0.5em;
}
.tit {
	font-family: "FjallaOne Regular", sans-serif;
	font-size: 35px;
	color: #000000;
	line-height: 39px;
	text-decoration: none;
}
.lyricnav {
	padding-left: 20px;
	padding-right: 12px;
	padding-top: 35px;
	padding-bottom: 10px;
}
.padz {
	padding: 20px;
}
.padz25 {
	padding: 20px 25%;
	line-height: 1.4;
}
.colz {
	width: 75%;
	margin: auto;
	column-count: 2;
	column-gap: 20px;
}
.mid {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   NAVIGATION BAR (Global Dreamweaver Library Item)
   - Desktop & Wide (>1020px): Single fluid line
   - Narrow / Portrait (<=1020px): 2 lines holding 35px down to ~545px
   - Mobile Landscape (<=500px tall): Single compact line
   ========================================================================== */
.stripe {
	background-color: #000000;
	padding-top: var(--nav-pad-top);
	padding-bottom: var(--nav-pad-bottom);
	padding-left: var(--nav-pad-side);
	padding-right: var(--nav-pad-side);
	box-sizing: border-box;
}
.navbig {
	font-family: "FjallaOne Regular", sans-serif;
	font-size: clamp(35px, 3.6vw, 70px);
	color: #BF6163;
	line-height: 1.05;
	text-decoration: none;
	text-align: center;
	overflow: visible;
	white-space: nowrap;
}
.navbig a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
.navwee {
	font-size: 0.5714em;
	line-height: 1.05;
}

.navgroup {
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;
}
.navgroup1 {
	margin-bottom: 0;
}
.navgroup2 {
	margin-bottom: 0;
}

/* Backward compatibility for legacy pages with un-grouped navstripe */
.navwee a.linkdownloadstore::before {
	content: "\A";
	white-space: pre;
}
.navgroup2 .navwee a.linkdownloadstore::before {
	content: none;
}

@media (max-width: 1020px) {
	.navbig {
		font-size: clamp(14px, 6.4vw, 35px);
		line-height: 1.05;
		white-space: normal;
	}
	.navgroup {
		display: block;
		text-align: center;
		white-space: nowrap;
	}
	.navgroup1 {
		margin-bottom: var(--nav-line-gap);
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	.navbig {
		font-size: clamp(16px, 3.4vw, 34px);
		line-height: 1.02;
		white-space: nowrap;
	}
	.navgroup {
		display: inline-block;
		vertical-align: baseline;
		white-space: nowrap;
	}
	.navgroup1 {
		margin-bottom: 0;
	}
	.stripe {
		padding-top: calc(var(--nav-pad-top) * 0.6);
		padding-bottom: calc(var(--nav-pad-bottom) * 0.6);
	}
}

/* ==========================================================================
   LOCKED VIEWPORT DUAL-SCROLL LAYOUT (Home page: index_test.html)
   ========================================================================== */
body.locked-split-page {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
body.locked-split-page .stripe.navbig {
	flex: 0 0 auto;
}
.split-layout {
	flex: 1 1 auto;
	display: flex;
	width: 100%;
	min-height: 0;
}
.col-left {
	flex: 0 0 66%;
	width: 66%;
	height: 100%;
	overflow: hidden;
}
.col-left iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.col-right {
	flex: 0 0 34%;
	width: 34%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* ==========================================================================
   SIDEBAR: FEATURED ITEM & BANNER TEXT
   ========================================================================== */
.featured-item {
	width: 100%;
}
.banny {
	font-family: "FjallaOne Regular", sans-serif;
	font-size: clamp(15px, 2.95vw, 25px);
	line-height: 1.25;
	text-align: center;
	padding: 0;
	margin: 0.5em 0 0.8em 0;
}

/* ==========================================================================
   SIDEBAR: SOCIAL MEDIA ICON GRID
   - Default (>845px): 4 columns (2 rows of 4)
   - 845px down to 550px: 3 columns (3 / 3 / 2)
   - 550px and down: 2 columns (4 rows of 2)
   ========================================================================== */
.social-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	padding-left: 1.25%;
	padding-right: 1.25%;
	margin-bottom: 0.8em;
}
.social-grid a {
	display: block;
	line-height: 0;
}
.social-grid img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 845px) {
	.social-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 550px) {
	.social-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   SIDEBAR: MASTODON FEED (mastodon-feed.js)
   - Scales smoothly between 620px and 425px
   ========================================================================== */
.toots {
	max-width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: "Arvo", serif;
	font-size: clamp(0.8rem, calc(0.364rem + 1.64vw), 1rem);
	color: #000000;
}
.toot {
	border-bottom: 1px solid #ccc;
	padding: 1em;
	box-sizing: border-box;
}
.toot .user {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 0.6em;
	text-decoration: none;
	color: inherit;
}
.toot .avatar {
	width: 2.875em;
	height: 2.875em;
	border-radius: 4px;
	flex-shrink: 0;
}
.toot .user-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.toot .display-name {
	font-weight: bold;
	font-size: 1em;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.toot .display-name:hover {
	text-decoration: underline;
}
.toot .permalink {
	font-size: 0.72em;
	line-height: 1.3;
	color: #999999;
	text-decoration: none;
	margin-top: 0.15em;
}
.toot .permalink:hover {
	text-decoration: underline;
}
.toot .body {
	clear: both;
	margin-top: 0.8em;
	line-height: 1.45;
}
.toot .body p {
	margin: 0 0 0.6em 0;
}
.toot .body p:last-child {
	margin-bottom: 0;
}
.toot .body a {
	overflow-wrap: anywhere;
}
.toot a.attachment {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 0.75em;
}
.toot a.attachment img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   SIDEBAR: PAYPAL SUBSCRIPTION BOX

   ========================================================================== */
.paypal-box {
	margin: 0;
	padding: 6px 1.25%;
	text-align: center;
	box-sizing: border-box;
	font-family: "Arvo", serif;
	font-size: clamp(0.8rem, calc(0.364rem + 1.64vw), 1rem);
	color: #673637;
}
.paypal-box p.paypal-title {
	margin-top: 0;
	margin-bottom: 0.5em;
	line-height: 1.45;
	font-size: 1em;
}
.paypal-box p.paypal-sub {
	margin: 0.5em 0;
	font-weight: bold;
	font-size: 1em;
}
.paypal-select-wrap {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.paypal-box select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-family: "Arvo", serif;
	font-size: 0.9em;
	padding: 0.4em 0.6em;
	margin-bottom: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #ffffff;
	color: #333333;
}
.paypal-button {
	display: inline-block;
	font-family: "FjallaOne Regular", sans-serif;
	font-size: 1.1em;
	background-color: #FFC439;
	color: #000000;
	border: 1px solid #E0A820;
	border-radius: 4px;
	padding: 0.45em 1.2em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.paypal-button:hover {
	background-color: #F2BA36;
}

/* ==========================================================================
   SIDEBAR: KIT (CONVERTKIT) RESPONSIVE OVERRIDES
   ========================================================================== */
.formkit-form[data-uid="535aedf1c2"] {
	max-width: 100% !important;
	border: none !important;
	box-sizing: border-box !important;
}
.formkit-form[data-uid="535aedf1c2"] [data-style="minimal"] {
	padding: 10px 1.25% !important;
	box-sizing: border-box !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-header {
	margin: 0 0 6px 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-header h2 {
	font-family: "FjallaOne Regular", sans-serif !important;
	font-size: clamp(16px, 2.6vw, 22px) !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	color: #4d4d4d !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-subheader {
	margin: 4px 0 10px 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-subheader p {
	font-family: "Arvo", serif !important;
	font-size: clamp(12px, 1.8vw, 15px) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-fields {
	margin: 8px auto 0 auto !important;
	width: 100% !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-field {
	min-width: 0 !important;
	width: 100% !important;
	margin: 0 0 8px 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-input {
	font-family: "Arvo", serif !important;
	font-size: clamp(12px, 1.8vw, 15px) !important;
	padding: 6px 8px !important;
	height: auto !important;
	width: 100% !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-submit {
	width: 100% !important;
	margin: 0 0 10px 0 !important;
	border-radius: 4px !important;
	padding: 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-submit > span {
	display: block !important;
	font-family: "FjallaOne Regular", sans-serif !important;
	font-size: clamp(13px, 2.2vw, 17px) !important;
	padding: 6px 8px !important;
	letter-spacing: 0.03em !important;
	text-align: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-guarantee {
	margin: 6px 0 8px 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-guarantee p {
	font-family: "Arvo", serif !important;
	font-size: clamp(10px, 1.6vw, 12px) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	color: #626262 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-powered-by-convertkit-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin: 6px 0 0 0 !important;
}
.formkit-form[data-uid="535aedf1c2"] .formkit-powered-by-convertkit,
.formkit-form[data-uid="535aedf1c2"] .formkit-powered-by-convertkit[data-variant="dark"] {
	display: block !important;
	width: clamp(80px, 16vw, 120px) !important;
	height: calc(clamp(80px, 16vw, 120px) * 0.27) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}


/* ==========================================================================
   AUDIO PAGE: TOP SECTION (audio.html)
   - 3% side padding, 10px top/bottom
   - 1 row of 9 icons down to 530px
   - At <=530px: splits into centered 5-on-top, 4-on-bottom rows
   - Holds icon size flat at 55px until pressured by 3% padding (<=295px)
   - Text box centered, taking up the middle third of horizontal space
   ========================================================================== */
.audio-top-section {
	padding: 10px 3%;
	box-sizing: border-box;
	width: 100%;
}

.audio-icon-grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	width: 100%;
	max-width: 1457px;
	margin: 0 auto;
	gap: 0;
}

.audio-icon-grid a {
	display: block;
	line-height: 0;
}

.audio-icon-grid img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 530px) {
	.audio-icon-grid {
		grid-template-columns: repeat(10, 1fr);
		width: 100%;
		max-width: 277px;
		margin: 0 auto;
	}
	.audio-icon-grid a {
		grid-column: span 2;
	}
	/* Starts row 2 at column 2, leaving columns 1 and 10 empty for perfect centering */
	.audio-icon-grid a:nth-child(6) {
		grid-column: 2 / span 2;
	}
}

/* ==========================================================================
   Internal Pages: TEXT BOX (developed first for audio.html)
   - 33.333% wide on screens >= 667px
   - Locks flat at 259px below 667px so side margins diminish instead
   ========================================================================== */
.int-text-box {
	width: 33.333%;
	min-width: 259px;
	max-width: 100%;
	margin: 20px auto 0 auto;
	box-sizing: border-box;
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.45;
}

.int-text-box p {
	margin-top: 0;
	margin-bottom: 0.6em;
}

.int-text-box p.int-title {
	text-align: center;
	margin-bottom: 0.8em;
	font-size: 1.05em;
}

/* ==========================================================================
   AUDIO PAGE: BANDCAMP EMBEDDED PLAYERS (audio.html)
   - Centered column capped at 500px
   - Overrides default browser iframe sizing (300x150) to 100% x 42px
   ========================================================================== */
/* ==========================================================================
   AUDIO PAGE: BANDCAMP EMBEDDED PLAYERS (audio.html)
   - Centered column capped at 500px below 1030px viewport width
   - Splits into two 500px columns (1010px total) at >= 1030px
   ========================================================================== */
.bc-embedder-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px 10px 40px 10px;
}

.bc-embedder {
	width: 100%;
	max-width: 500px;
	box-sizing: border-box;
}

.bc-song {
	margin-bottom: 5px;
	width: 100%;
}

.bc-song iframe {
	display: block;
	width: 100%;
	height: 42px;
	border: 0;
}

@media (min-width: 1030px) {
	.bc-embedder {
		max-width: 1010px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 10px;
		row-gap: 5px;
	}
	.bc-song {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   VIDEO PAGE: YOUTUBE SUBSCRIBE BUTTON (video.html)
   ========================================================================== */
.yt-sub-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1.4em 0 0.8em 0;
	min-height: 42px;
}

.yt-sub-wrap > div {
	transform: scale(1.5);
	transform-origin: center center;
}

/* ==========================================================================
   VIDEO PAGE: RESPONSIVE GRID & EMBEDS (video.html)
   - Single column stack below 800px
   - 2-column grid capped at 1250px (approx 612px per video) at >=800px
   - Single-item sections (G4 & trailer) match the exact size of 2-column videos
   ========================================================================== */
.video-section-title {
	font-family: "FjallaOne Regular", sans-serif;
	font-size: clamp(20px, 3vw, 28px);
	text-align: center;
	color: #000000;
	margin: 2.5em 0 0.8em 0;
	line-height: 1.1;
}

.video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
	max-width: 1250px;
	margin: 0 auto 30px auto;
	box-sizing: border-box;
	padding: 0 12px;
}

.video-grid iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	display: block;
}

/* Single-video sections: centered horizontally */
.video-grid.single-item {
	display: flex;
	justify-content: center;
}

@media (min-width: 800px) {
	.video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Prevent 2-column split on single items; match width of 1 column (50% minus half the 20px gap) */
	.video-grid.single-item {
		display: flex;
	}
	.video-grid.single-item iframe {
		width: calc(50% - 10px);
	}
}