/* COPYRIGHT, META INFO
============================================================ */

.bc_copyright-block {
	margin-top: 32px;
	font-size: 12px;
	line-height: 16px;
	color: #666;
}

.bc_copyright-block:after {
	content: "2026 Brendan Cahill. All rights reserved."
}

@media (prefers-color-scheme: dark) {

	.bc_copyright-block {
		color: #aaa;
	}

}

/* BOX MODEL, RESET
====================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
}

body {
	margin: 0;
	padding: 0;
	background-color: #333;
}

p, div, a, li
{
	font-family: "Figtree", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

p, div, li {
	font-weight: 400;
	color: #111;
}

p {
	margin: 0 0 1.0em 0;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em 0;
}

h1, h2, h3, h4 {
	font-family: "Fugaz One", sans-serif;
	font-weight: 400;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 60px;
	line-height: 74px;
}

h2 {
	font-size: 48px;
	line-height: 56px;
}

h3 {
	font-size: 40px;
	line-height: 48px;
}

h4 {
	font-size: 24px;
	line-height: 32px;
}

a {
	font-weight: 500;
	text-underline-offset: 0.2em;
}

a,
a:visited {
	color: #96007a;
}

a:hover,
a:active {
	color: #aa0092;
}

b, strong {
	font-weight: 700;
}

img {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: bottom;
}

hr {
	height: 1px;
    color: #ccc;
    background: #ccc;
    font-size: 0;
    border: 0;
}

@media (max-width: 1023px) {

	h1 {
		font-size: 48px;
		line-height: 56px;
	}
	
	h3 {
		font-size: 32px;
		line-height: 40px;
	}
	
	h4 {
		font-size: 20px;
		line-height: 28px;
	}

}

@media (max-width: 767px) {

	h1 {
		font-size: 40px;
		line-height: 48px;
	}
	
	h2 {
		font-size: 32px;
		line-height: 40px;
	}

}

@media (prefers-color-scheme: dark) {

	body {
		background-color: #333;
	}

	p, div, li {
		color: #eee;
	}
	
	a,
	a:visited {
		color: #b797b7;
	}

	a:hover,
	a:active {
		color: #ccacc9;
	}

}


/* CONTAINERS
====================================================================== */

.bc_page-container {
	position: relative;
	max-width: 1600px;
	height: 100%;
	background-color: #f2f2f2;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
}

.bc_container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 1023px) {

	.bc_container {
		padding: 0 32px;
	}

}

@media (max-width: 767px) {

	.bc_container {
		padding: 0 20px;
	}

}

@media (prefers-color-scheme: dark) {

	.bc_page-container {
		background-color: #222;
	}

}


/* SECTIONS
====================================================================== */

.bc_home-header {
	margin-bottom: 80px;
}

.bc_subpage-header {
}

.bc_blade {
	margin: 80px 0;
}

.bc_portfolio {
	margin: 80px 0;
	background-color: #f2f2f2;
}

@media (max-width: 1023px) {

	.bc_home-header {
		margin-bottom: 60px;
	}

	.bc_blade {
		margin: 60px 0;
	}

	.bc_portfolio {
		margin: 60px 0;
	}

}

@media (max-width: 767px) {

	.bc_home-header {
		margin-bottom: 32px;
	}

	.bc_blade {
		margin: 32px 0;
	}
	
	.bc_portfolio {
		margin: 40px 0;
	}

}

@media (prefers-color-scheme: dark) {

	.bc_portfolio {
		background-color: #222;
	}

}


/* COPY BLOCKS AND TEXT
====================================================================== */

.bc_feature-block {
	max-width: 640px;
	margin: 0 auto;
}

.bc_feature-block *,
.bc_text-feature * {
	font-size: 20px;
	line-height: 28px;
}

.bc_text-subfeature {
	margin-bottom: 0.7em;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: #444;
}

.bc_text-footnote {
	font-size: 14px;
	line-height: 18px;
	color: #444;
}

@media (max-width: 1023px) {

	.bc_feature-block *,
	.bc_text-feature * {
		font-size: 18px;
		line-height: 26px;
	}

}

@media (prefers-color-scheme: dark) {

	.bc_text-subfeature {
		color: #bbb;
	}

	.bc_text-footnote {
		color: #bbb;
	}

}


/* BUTTONS
====================================================================== */

.bc_button-array {
	display: flex;
	flex-direction: row;
	margin: 60px -12px 0 -12px;
}

a.bc_button {
	display: inline-block;
	background-color: #96007a;
	color: #fff;
	text-decoration: none;
	padding: 20px 24px;
	border-radius: 8px;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
}

.bc_button-array a.bc_button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex: 1;
	margin: 0 12px;
}

@media (max-width: 1023px) {

	.bc_button-array {
		margin: 40px -8px 0 -8px;
	}

	a.bc_button {
		padding: 16px 20px;
		font-size: 16px;
		line-height: 24px;
	}

	.bc_button-array a.bc_button {
		margin: 0 8px;
	}

}

@media (max-width: 767px) {

	.bc_button-array {
		flex-direction: column;
		max-width: 335px;
		margin: 26px auto;
	}

	.bc_button-array a.bc_button {
		margin: 6px 0;
	}

}


/* HEADERS
====================================================================== */

.bc_header {
	padding: 40px 48px;
	background-color: #111;
}

.bc_subpage-header {
}

.bc_home-header .bc_header {
	text-align: center;
}

.bc_subpage-header .bc_header {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

.bc_logo {
	text-align: center;
	margin-right: 40px;
}

.bc_subpage-header .bc_logo {
	text-align: left;
}

.bc_header a {
	text-decoration: none;
}

.bc_home-header .bc_header h1 {
	font-size: 80px;
	line-height: 96px;
}

.bc_home-header .bc_header h2 {
	font-size: 32px;
	line-height: 40px;
}

.bc_header h1 {
	margin-bottom: 0;
	color: #eee;
}

.bc_header h2 {
	font-size: 24px;
	line-height: 32px;
}

.bc_header h2,
.bc_header h3,
.bc_header h4 {
	margin-bottom: 0;
	color: #ccc;
}

@media (max-width: 1023px) {

	.bc_header {
		padding: 24px 32px;
	}
	
	.bc_home-header .bc_header h1 {
		font-size: 60px;
		line-height: 74px;
	}
	
	.bc_home-header .bc_header h2 {
		font-size: 24px;
		line-height: 32px;
	}
	
	.bc_home-header .bc_header h1 {
		font-size: 48px;
		line-height: 56px;
	}

	.bc_home-header .bc_header h2 {
		font-size: 20px;
		line-height: 28px;
	}

}

@media (max-width: 767px) {

	.bc_header {
		padding: 20px;
	}
	
	.bc_subpage-header {
		overflow-y: hidden;
	}
	
	.bc_subpage-header .bc_logo {
		text-align: center;
	}
	
	.bc_subpage-header .bc_header {
		flex-direction: column;
		align-items: center;
		justify-content: normal;
		margin: -12px 0;
	}
	
	.bc_subpage-header .bc_header > div {
		margin: 12px 0;
	}
	
	.bc_home-header .bc_header h1 {
		font-size: 32px;
		line-height: 40px;
	}

	.bc_home-header .bc_header h2 {
		font-size: 18px;
		line-height: 26px;
	}

}


/* MAIN NAV
====================================================================== */

.bc_nav-main {
	display: flex;
	flex-direction: row;
	margin: 0 -20px;
}

.bc_nav-main-item {
	margin: 0 20px;
	color: #eee;
}

.bc_nav-main a {
	display: block;
}

.bc_nav-main-item,
.bc_nav-main-item a {
	font-size: 18px;
	line-height: 26px;
}

.bc_nav-main-item a,
.bc_nav-main-item a:visited {
	color: #b797b7;
}

.bc_nav-main-item a:hover,
.bc_nav-main-item a:active {
	color: #ccacc9;
}

@media (max-width: 1023px) {

	.bc_nav-main {
		margin: 0 -16px;
	}
	
	.bc_nav-main-item {
		margin: 0 16px;
	}
	
	.bc_nav-main-item,
	.bc_nav-main-item a {
		font-size: 16px;
		line-height: 24px;
	}

}

@media (max-width: 767px) {


}


/* FOOTER
====================================================================== */

.bc_footer {
	padding: 60px 0;
	text-align: center;
	background-color: #e5e5e5;
}

@media (max-width: 1023px) {

	.bc_footer {
		padding: 40px 0;
	}

}

@media (prefers-color-scheme: dark) {

	.bc_footer {
		background-color: #111;
	}

}


/* HOME FEATURE
====================================================================== */

.bc_home-feature {
	width: 100%;
}

.bc_home-feature img {
	width: 100%;
}


/* FEATURE VIDEO
====================================================================== */

.bc_feature-video {
	padding-bottom: 32px;
}

.bc_feature-video-poster {
	max-width: 944px;
	margin: 0 auto;
	text-align: center;
}

.bc_feature-video-poster img {
	width: 100%;
}

.bc_feature-video-poster a {
	text-decoration: none;
}

@media (max-width: 767px) {

	.bc_feature-video {
		padding-bottom: 24px;
	}

}


/* PORTFOLIO
====================================================================== */

.bc_portfolio-gallery {
	margin-bottom: 80px;
}

.bc_portfolio-header {
	text-align: center;
	margin-bottom: 32px;
}

.bc_portfolio-header h3 {
	margin-bottom: 0.3em;
}

.bc_portfolio-body {
	margin-bottom: 80px;
}

.bc_portfolio-subhead {
	margin-top: 56px;
	margin-bottom: 32px;
	text-align: center;
}

.bc_portfolio-type-design h4 {
	font-family: "Figtree", sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
}

.bc_portfolio-type-design .bc_portfolio-body {
	display: grid;
	grid-template-columns: repeat(2, 50%);
	margin: -32px -24px 0 -24px;
}

.bc_portfolio-type-comics .bc_portfolio-body {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	align-items: center;
	margin: -20px -16px 0 -16px;
}

.bc_portfolio-type-comics .bc_portfolio-body a {
	display: block;
}

.bc_portfolio-type-design .bc_portfolio-item {
	margin: 32px 24px;
/*		border: 1px solid #ccc;*/
}

.bc_portfolio-type-comics .bc_portfolio-item {
	margin: 20px 16px;
	text-align: center;
/*		border: 1px solid #ccc;*/
}

.bc_portfolio-item .bc_portfolio-item-description {
}

.bc_portfolio-item img {
	width: 100%;
}

.bc_portfolio-type-comics .bc_portfolio-item {
	aspect-ratio: 1;
}

.bc_portfolio-type-comics .bc_portfolio-item img {
	object-fit: scale-down;
	aspect-ratio: 1 / 1;	
}

.bc_portfolio-poster {
	position: relative;
}

.bc_portfolio-copy {
	margin-top: 16px;
}

.bc_portfolio-copy-header {
	margin-bottom: 0.7em;
}

.bc_portfolio-copy-header a {
	text-decoration: none;
}

.bc_portfolio-copy-header * {
	margin-bottom: 0;
}

.bc_portfolio-copy-role {
	margin-bottom: 0.7em;
}

.bc_portfolio-copy-description {
}

.bc_portfolio-copy p:last-child {
	margin-bottom: 0;
}

.bc_new-tab::after {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 40px;
	height: 40px;
	background-color: rgba(150,0,122,0.8);
	background-image: url('../images/icon-new-tab.svg');
	background-size: 24px 24px;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 12.5%;
	content: '';
}

@media (max-width: 1023px) {

	.bc_portfolio-gallery {
		margin-bottom: 60px;
	}
	
	.bc_portfolio-subhead {
		margin-top: 40px;
		margin-bottom: 24px;
	}

}

@media (max-width: 767px) {

	.bc_portfolio-gallery {
		margin-bottom: 40px;
	}

	.bc_portfolio-header {
		margin-bottom: 24px;
	}

	.bc_portfolio-type-design .bc_portfolio-body {
		grid-template-columns: repeat(1, 100%);
		place-items: center;
		margin: -24px -20px 0 -20px;
	}
	
	.bc_portfolio-type-comics .bc_portfolio-body {
		grid-template-columns: repeat(1, 100%);
		margin: -20px -8px 0 -8px;
	}
	
	.bc_portfolio-type-design .bc_portfolio-item {
		max-width: 576px;
		margin: 24px 20px;
	}
	
	.bc_portfolio-type-comics .bc_portfolio-item {
		margin: 20px 8px;
	}
	
}


/* DESIGN GALLERY PAGES
====================================================================== */

body.bc_iframe {
	background-color: #f2f2f2;
}

.bc_design-gallery {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.bc_design-gallery-section {
	margin: 80px auto 0 auto;
}

.bc_design-gallery-infographic {
	max-width: 1200px;
}

.bc_design-gallery-card {
	max-width: 800px;
}

.bc_design-gallery-section img {
	display: block;
	width: 100%;
	margin-bottom: 40px;
}

@media (prefers-color-scheme: dark) {

	body.bc_iframe {
		background-color: #333;
	}

}


/* FANCYBOX 
Some styling is done with variables in JS, but we need overrides here.
====================================================================== */

.fancybox__container .f-html {
	background: none;
}

.fancybox__container .fancybox__backdrop {
	background: rgba(221,221,221,0.95);
}

.f-spinner {
  --f-spinner-color-2: #111;
  --f-spinner-color-1: #999;
}

.fancybox__container .f-html .is-close-button,
.fancybox__container .f-button {
	width: 44px;
	height: 44px;
}


.fancybox__container .f-html .is-close-button,
.fancybox__container .f-html .is-close-button:visited,
.fancybox__container .f-carousel__toolbar .f-button,
.fancybox__container .f-carousel__toolbar .f-button:visited,
.fancybox__container .fancybox__carousel .is-prev,
.fancybox__container .fancybox__carousel .is-prev:visited,
.fancybox__container .fancybox__carousel .is-next,
.fancybox__container .fancybox__carousel .is-next:visited {
	color: #96007a;
	background: rgba(238,238,238,0.75);
}

.fancybox__container .f-html .is-close-button:hover,
.fancybox__container .f-html .is-close-button:active,
.fancybox__container .f-carousel__toolbar .f-button:hover,
.fancybox__container .f-carousel__toolbar .f-button:active,
.fancybox__container .fancybox__carousel .is-prev:hover,
.fancybox__container .fancybox__carousel .is-prev:active,
.fancybox__container .fancybox__carousel .is-next:hover,
.fancybox__container .fancybox__carousel .is-next:active {
	color: #111;
	background: rgba(238,238,238,0.75);
}

.fancybox__container .f-html .is-close-button {
	top: calc((var(--f-button-height) + 4.5px)* -1);
	margin: 12px 12px 0 0;
}

.fancybox__container .f-caption {
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
	color: #111;
}

.fancybox__container .f-counter,
.fancybox__container .f-counter, span {
	text-shadow: none;
}

@media (max-width: 767px) {

	.fancybox__container .fancybox__carousel button.is-prev,
	.fancybox__container .fancybox__carousel button.is-next {
		display: none;
	}

	.fancybox__container .f-counter {
		display: none;
	}

}

@media (prefers-color-scheme: dark) {

	.fancybox__container .fancybox__backdrop {
		background: rgba(34,34,34,0.95);
	}

	.f-spinner {
		--f-spinner-color-2: #fff;
		--f-spinner-color-1: #aaa;
	}
	
	.fancybox__container .f-html .is-close-button,
	.fancybox__container .f-html .is-close-button:visited,
	.fancybox__container .f-carousel__toolbar .f-button,
	.fancybox__container .f-carousel__toolbar .f-button:visited,
	.fancybox__container .fancybox__carousel .is-prev,
	.fancybox__container .fancybox__carousel .is-prev:visited,
	.fancybox__container .fancybox__carousel .is-next,
	.fancybox__container .fancybox__carousel .is-next:visited {
		color: #b797b7;
		background: rgba(68,68,68,0.75);
	}

	.fancybox__container .f-html .is-close-button:hover,
	.fancybox__container .f-html .is-close-button:active,
	.fancybox__container .f-carousel__toolbar .f-button:hover,
	.fancybox__container .f-carousel__toolbar .f-button:active,
	.fancybox__container .fancybox__carousel .is-prev:hover,
	.fancybox__container .fancybox__carousel .is-prev:active,
	.fancybox__container .fancybox__carousel .is-next:hover,
	.fancybox__container .fancybox__carousel .is-next:active {
		color: #ccacc9;
		background: rgba(68,68,68,0.75);
	}

	.fancybox__container .f-caption {
		color: #eee;
	}

}