/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

* {
	box-sizing: border-box;
}

			@font-face {
  font-family: Urbanist;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
  src: url("/public/fonts/Urbanist-VariableFont_wght.ttf");
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-Thin.ttf") format("truetype");
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-ThinItalic.ttf") format("truetype");
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-LightItalic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-BoldItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: "Lato";
	src: url("/public/fonts/lato/Lato-BlackItalic.ttf") format("truetype");
	font-weight: 900;
	font-style: italic;
}

:root{
	/* lol WAT */
	/* https://mskelton.dev/bytes/20231006081950 */
	color-scheme: dark;
	--font-normal: Urbanist, Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 100%;

	/* --- */

	font-size: 100%;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

@media screen and (max-width: 768px) {
	:root {
		/* --panel-padding: 0.5rem; */
	}
}


html {
	background: rgb(7, 7, 7);
	color: rgb(250, 250, 250);

	/* https://www.frontend.fyi/tutorials/finally-a-fix-for-100vh-on-mobile */
	min-height: 100dvh;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

* {
	color: var(--color-text-primary);
	font-family: var(--font-normal);
	box-sizing: border-box;
	font-weight: 500;
}

h1, h2, h3, h4, h5, h6, p, li, a, input, textarea, div, select, article, main {

}

h1 {
	margin-top: 0;
}

p > code {
	background: var(--color-bg-code);
	margin: 0 0.125rem;
	padding: 0 0.125rem;
	white-space: pre-wrap;
	word-wrap: break-word;
	tab-size: 2;
}

pre {
	/* background: var(--color-bg-code); */
	border: var(--panel-border) dotted var(--color-bg-border-accent);
	padding: 1rem;
	white-space: auto;
	overflow-x: auto;
	word-wrap: nowrap;
	tab-size: 2;
}

a:hover {
	color: var(--color-text-accent);
}

ul li p,
ol li p {
	margin: 0;
}

img {
	max-width: 100%;
}

::selection {
	color: var(--color-highlight-text);
	background: var(--color-highlight-bg);
}

table {
	border-collapse: collapse;
	overflow: hidden;
	border: var(--underline-width) solid var(--color-text-secondary);
	padding: var(--underline-width);
}
th,
td {
	padding: 0.25rem 0.5rem;
	color: #fff;
}
td:nth-child(even) {
	background: var(--color-bg-200);
}
th {
	text-align: left;
}

thead th {
	background-color: var(--color-text-secondary);
	color: var(--color-bg);
}

			.main {
	max-width: 30rem;
	width: fit-content;
	margin: 2rem auto;

	/* zoom: 1.25; */
	line-height: 1.5;
}

.discography {
	list-style-type: none;
	list-style-position: inside;

	display: flex;
	flex-direction: column;
	gap: 1rem;
}
	.discography__title {
		font-size: 2rem;
		font-weight: 700;
		text-decoration: none;
		display: inline-block;
		line-height: 1;
	}

	.discography__title:hover {
		text-decoration: underline;
	}

	.discography h2, .discography p {
		line-height: 1.25;
	}


/* release / release--albumNameSlugified */
	/* release__border */
		/* release__content */

			/* release__cover / cover */
				/* cover__wrapper */
					/* cover__a */
						/* cover__img */

			/* release__info / info */
				/* info */
					/* info__title */
					/* info__subtitle */

					/* info__songs / songs */
						/* songs__entry */
							/* songs__entry */
								/* songs__index */
								/* songs__spacer */
								/* songs__title */
								/* songs__length */

					/* info__links / links */
						/* links__li */
							/* links__a */

		/* release__utility (unused) */

.releases {
	margin: 0;
	padding: 0;
	/* line-height: 0; */
}

.release {
	width: 100%;
	min-height: 100dvh;
	max-height: 100dvh;

	/* insert css variables here */

	--border: 4px solid gray;
	--border-gap: 2rem;

	--color-text: white;
	--color-text-accent: DarkTurquoise;
	--color-text-quiet: RoyalBlue;

	--background: black;

	--info-width: 20rem;

	--cover-border: 2px solid var(--color-bg-accent);

	--hover-color: black;
	--hover-background: white;

	--hover-color-accent: white;
	--hover-background-accent: purple;

	padding: var(--border-gap);

	background: var(--background);
}

	@media screen and (max-width: 1024px) {
		.release {
			padding: 0;
		}
	}
	.release__border {
		border: var(--border);
		width: 100%;
		height: calc(100dvh - calc(var(--border-gap) * 2));
		max-height: calc(100dvh - calc(var(--border-gap) * 2));
	}

	@media screen and (max-width: 1024px) {
		.release__border {
			border: none;
		}
	}

	.release__content {
		min-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2rem;
		padding: 2rem;
	}

	@media screen and (max-width: 1024px) {
		.release__content {
			flex-direction: column;
			padding: 1rem;
		}
	}


.cover {

}

	.cover__wrapper {
		max-width: 400px;
		border: var(--cover-border);
		padding: 5px;
	}

	.cover__a {
		filter: none;
	}

	.cover__a:hover {
		filter: brightness(90%) grayscale(20%);
	}

.info {
	line-height: 1;
	/* min-width: var(--info-width); */
	width: var(--info-width);
	max-width: var(--info-width);
}

	.info__title {
		color: var(--color-text);
		font-size: 2rem;
		font-weight: 700;
		margin-bottom: 0.25rem;
		text-decoration: none;
		display: inline-block;
	}

	.info__title--solo {
		pointer-events: none;
	}

	.info__title:hover {
		padding: 0 1rem;
		color: var(--hover-color);
		background: var(--hover-background);
	}

	.info__subtitle {
		color: var(--color-text-quiet);
		margin-bottom: 1rem;
	}

	.break {
		border: 1px solid var(--color-text-quiet);
		display: block;
		margin: 1rem 0;
	}

	.info__p {
		color: var(--color-text-quiet);
		margin: 0;
	}

	.info__p:after {
		content: ".";
		visibility: hidden;
		max-width: 0;
	}


.songs {
	list-style-type: none;
	list-style-position: inside;
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: 2px;

	margin-bottom: 1rem;

}
	.songs__entry {
		display: flex;
		flex-direction: row;
		width: 100%;
		gap: 2px;
		text-decoration: none;
		justify-content: center;
	}

	.songs__index  { flex-grow: 0; padding: 0.125rem 0rem;    text-align: left;   color: var(--color-text);}
	.songs__spacer { flex-grow: 1; padding: 0.125rem 0.25rem; text-align: center; color: var(--color-text);}
	.songs__title  { flex-grow: 0; padding: 0.125rem 0.5rem;  text-align: right;  color: var(--color-text);}
	.songs__length { flex-grow: 0; padding: 0.125rem 0.5rem;  text-align: left;   color: var(--color-text-accent); }

	.songs__spacer {
		color: var(--color-text-quiet);
		background: var(--color-text-quiet);
		max-height: 2px;
		line-height: 0;
		padding: 0 2rem;
		margin: 0 0.5rem;
		position: relative;
		top: 0.5rem;
	}

	.songs__entry:hover .songs__index {
		color: var(--hover-color);
		background: var(--hover-background);
		padding: 0.125rem 0.25rem;
	}

	.songs__entry:hover .songs__spacer {
		color: var(--hover-color-accent);
		background: var(--hover-background-accent);
		max-height: 2px;
		line-height: 0;
		padding: 0 2rem;
		margin: 0 0.5rem;
		position: relative;
		top: 0.5rem;
	}

	.songs__entry:hover .songs__title {
		color: var(--hover-color);
		background: var(--hover-background);
	}

	.songs__entry:hover .songs__title::before {
		content: "🕪 ";
	}

	.songs__entry:hover .songs__length {
		color: var(--hover-color-accent);
		background: var(--hover-background-accent);
	}

.links {
	list-style-type: none;
	list-style-position: inside;
	padding: 0;
	margin: 1rem 0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

	.links__a {
		text-decoration: none;
		color: var(--color-text-accent);
	}

	.links__a:hover {
		color: var(--hover-color);
		background: var(--hover-background);
		outline: 0.25rem solid var(--hover-background);
	}

			.release--kioku {
	--color-text: rgb(240, 240, 240);
	--color-text-accent: rgb(182, 125, 222);
	--color-text-quiet: rgb(189, 189, 189);

	--background: rgb(7, 7, 7);

	--border: 4px solid var(--color-text-quiet);
	--border-gap: 2rem;

	--cover-border: 2px solid var(--color-text-quiet);

	--info-width: 22rem;

	--hover-color: rgb(7, 7, 7)
	--hover-background: rgb(240, 240, 240);

	--hover-color-accent: rgb(7, 7, 7)
	--hover-background-accent: #230033;
}


.release--pathos {
	--color-text: white;
	--color-text-accent: #FDB011;
	--color-text-quiet: #ce781b;

	--background: linear-gradient(140deg,rgb(6, 1, 1) 0%, rgb(9, 5, 1) 44%, rgb(2, 0, 0) 100%);

	--border: 4px solid #fdae1131;
	--border-gap: 2rem;

	--cover-border: 2px solid #573b04;

	--info-width: 22rem;

	--hover-color: #000000;
	--hover-background: #FFF;

	--hover-color-accent: #000000 ;
	--hover-background-accent: #FDB011;
}

.release--bearbear-and-the-boys {
	--color-text: #010;
	--color-text-accent: rgb(8, 16, 63);
	--color-text-quiet: rgb(52, 111, 111);
	--background: #EEE;

	--border: 0px solid #010;
	--border-gap: 2rem;

	--cover-border: 4px solid #010;

	--info-width: 25rem;

	--hover-color: #000000;
	--hover-background: #1dd4f0;

	--hover-color-accent: #000000 ;
	--hover-background-accent: #11b2fd;
}