@import "border.css";
/* fonts */
@font-face {
	font-family: "Limelight";
	font-style: normal;
	src:
		local( "Limelight")
		,url( "/fonts/Limelight-Regular.ttf" );
}
@font-face {
	font-family: "Federo";
	font-style: normal;
  font-weight: 400;
	src:
		local( "Federo")
		,url( "/fonts/Federo-Regular.ttf" );
}
:root {
	--bb-background-colour:  #E2DCD0;
	--bb-line-colour:  rgb(144, 125, 85);
	--bb-text-colour-dark: #396579;
	--bb-text-colour-light: rgb(89, 149, 175);
	--bb-font-family: Federo,sans-serif;
	--bb-brand-font-family: Limelight,sans-serif;
	--default-text-font-family:  var( --bb-font-family );
	--default-text-color: #262626;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* RESET */
html,body,div,span,section,main,aside,applet,object,nav,header,article,footer,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	background:transparent;
	border:0;
	box-sizing:border-box;
	font-size:100%;
	margin:0;
	padding:0;
	vertical-align:baseline;
}
html {
	scroll-behavior:smooth;
}
body {
	background-color: var( --bb-background-colour );
	color: var( --default-text-color );
	font-family: var( --default-text-font-family );
	font-size: 16px;
	line-height: 1.3;
}
h1,h2,h3 {
	color: var( --bb-text-colour-light );
	font-family: var( --bb-font-family );
	font-weight: 400;
	-webkit-text-stroke: 0.5px var( --bb-text-colour-dark );
	text-align: center;
}
h1 {
	font-size: 1.5rem;
}
h2 {
	font-size: 1.4rem;
}
h3 {
	font-size: 1.15rem;
}
blockquote {
	margin: 0;
	padding-left: 2em;
  position: relative;
  quotes: '\201c' '\201d';
}
blockquote::before{
  background: transparent;
  color: var( --bb-text-colour-light );
  content: open-quote;
  font: 3em/1.08em var( --bb-brand-font-family );
  height: 2rem;
  left: 0;
  position: absolute;
  text-align: left;
  top: 0;
  transform: translate(0, -30%);
  width: 3rem;
}
a {
	color: var( --bb-text-colour-dark );
	text-underline-offset: .25em;
	&:hover
	,&:focus {
		color: var( --bb-text-colour-light );
	}
	&.button {
		background-color: var( --bb-text-colour-light );
		border-radius: 8px;
		border-width: 0;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		font-weight: 700;
		font-weight: bold;
		letter-spacing: 0.7px;
		line-height: 26px;
		margin: 0 2px;
		padding: 0 23px;
		padding: 6px 16px;
		position: relative;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: all 0.15s ease 0s;
	}
	&.button:hover
	,&.button:focus {
		background-color: var( --bb-text-colour-dark );
	}

}
main section {
	display: grid;
	margin: 0 auto 2em;
	header {
		margin-bottom: 1em;
		width: 100%;
	}
	p {
		font-size: 20px;
		line-height: 1.45;
		margin-bottom: .75em;
	}
}
main img {
	border: thick double var( --bb-line-colour );
	object-fit: cover;
	padding: .5em;
	width: 100%;
}

/* utility classes */
.screenreader-only {
  position: absolute;
  transform: translateY( -1000% );
  transition: transform 325ms ease-in;
}
.screenreader-only:focus {
  transform: translateY( -250% );
}
/* layout */
.menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 1rem 0 2rem;
	padding: 0;
}
.menu ul > * {
	margin: 0 .5em;
	padding: .5em;
}
section h2 {
	border-bottom: thick double var( --bb-line-colour );
	border-top: thick double var( --bb-line-colour );
	font-size: 1.4em;
	padding: 0.5rem;
}
#branding {
	margin-bottom: 1em;
}
#branding h1 {
	border-bottom: thick solid var( --bb-line-colour );
	border-top: thick double var( --bb-line-colour );
	font-family: var( --bb-brand-font-family );
	font-size: 5rem;
	-webkit-text-stroke: 1.5px var( --bb-text-colour-dark );
	@media only screen and (min-width: 950px) {
		font-size:4rem;
/* 		letter-spacing: 0.05em;; */
	}
	padding: 0.5rem;
}
#strap-1 {
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
	@media only screen and (min-width: 950px) {
		text-align: start;
	}
}
#strap-2 {
	font-size: 1.1rem;
	margin-top: 0.25rem;
	@media only screen and (min-width: 950px) {
		text-align: end;
	}
}
.strapline {
	font-family: var( --bb-brand-font-family );
	text-align: center;
}
#about
,#christmas {
	justify-items: center;
}
#about img {
	margin-bottom: 2em;
}
#videos {
	grid-gap: 30px 10px;
}
#videos iframe {
	aspect-ratio: 16 / 9;
	min-height: 180px;
	min-width: 300px;
}
@media only screen and (min-width: 950px) {
	#videos {
 		grid-template-areas:	"heading heading heading"
													"showcase showcase showcase"
													"video video video"
													"link link link";
 		grid-template-columns: repeat( 3,1fr );
 		grid-template-rows: 1fr 357px 180px 30px;
	}

	#videos > header {
		grid-area: heading;
	}
	#videos iframe.showcase {
		grid-area: showcase;
		justify-self: center;
		max-width: 634px;
	}
	#videos .moreLink {
		grid-area: link;
		justify-self: center;

	}
}

#testimonials {
	grid-gap: 15px 30px;
}
#testimonials img {
	display: block;
	justify-self: center;
	margin-bottom: 1em;
}
#testimonials .quote-group {
	blockquote {
		margin-bottom: 1em;
	}
}
#testimonials .quote-group {}
@media only screen and (min-width: 950px) {
	#testimonials {
		grid-template-areas:"heading heading heading"
												"quote-group1 quote-group1 image1"
												"image2 quote-group2 quote-group2";
		grid-template-columns: repeat( 3,1fr );
 		grid-template-rows: 1fr auto auto;

	}
	#testimonials > header {
		grid-area: heading;
	}
	#testimonials .quote-group:nth-child( 2 ) {
		grid-area: quote-group1;
	}
	#testimonials .quote-group:nth-child( 5 ) {
		grid-area: quote-group2;
	}
	#testimonials img:nth-child( 3 ) {
		grid-area: image1;
	}
	#testimonials img:nth-child( 4 ) {
		grid-area: image2;
	}
}
#musicians {
	grid-gap: 15px 30px;
}
#musicians .musician > img
,#musicians .musician > h3 {
	display: block;
	font-weight: normal;
	justify-self: center;
}
#musicians .musician > img {
	margin-bottom: 1em;
}
@media only screen and (min-width: 950px) {
	#musicians {
		grid-template-areas:"heading heading"
												"musician1 musician2";
		grid-template-columns: repeat( 2, 1fr );
	}
	#musicians > header {
		grid-area: heading;
	}
	#musicians:nth-child( 2 ) {
		grid-area: musician1;
	}
	#musicians:nth-child( 3 ) {
		grid-area: musician2;
	}
	#musicians .musician > img {
		height: 214px;
	}
}
#repertoire h3 {
	margin-bottom: .25em;
	text-align: start;
}
#repertoire ul {
	column-count: 2;
	column-gap: 2rem;
	column-rule: 4px dotted var(--bb-text-colour-light );
	list-style: none;
	@media only screen and (min-width: 950px) {
		column-count: 3;
	}
}

#gallery .gallery {
	align-items: center;
	display: grid;
	justify-items: center;
	@media only screen and (min-width: 950px) {
/* 		grid-template-columns: repeat( 5,auto ); */
		grid-template-columns: repeat( 8,auto );
		grid-template-rows: repeat(4, 5vw);
		grid-gap: 2.5em 1em;
	}
	a {
	}
	img {
		border: none;
		height: 100%;
		max-height: 116px;
		object-fit: cover;
		width: 100%;
	}
}

.gallery img {
/* ,.sl-image img { */
  filter: grayscale(1) blur(1px) contrast(1.2) sepia(1);
  -webkit-mask: radial-gradient(#000, #0009);
  padding: 0;
}

.gallery a {
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 3px 12px rgba( 0,0,0,0.2 );
  filter: saturate(70%) contrast(85%);
  position: relative;
}
.gallery a img {
  display: block;
  z-index: 1;
}

summary {
	color: var( --bb-text-colour-dark );
	cursor: pointer;
	font-size: 1.2em;
	padding: 0.5em 0;
}
main section details p {
	font-size: 1.2em;
	margin-left: 1em;
}