@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b9284b2d-6a3a-44fe-815d-5ee857118f05");
	@font-face{
		font-family:"Are You Shaw NF W01 Regular";
		src:url("/_css/_f/3fbfe02c-da38-4677-b1e4-73c167138133.woff2") format("woff2"),url("/_css/_f/3493c9f9-ae1e-40f2-958f-c2124d34d184.woff") format("woff");
	}
	@font-face{
		font-family:"Brandon Grotesque W01 Light";
		src:url("/_css/_f/138ac4ce-45a9-4715-bf9f-38bbeebeee58.woff2") format("woff2"),url("/_css/_f/b1726e10-1988-49fe-a8b7-bbe266f3760d.woff") format("woff");
	}
	@font-face{
		font-family:"Brandon Grotesque W01 Regular";
		src:url("/_css/_f/050663eb-e1cb-4e20-83bc-b6fbb0650136.woff2") format("woff2"),url("/_css/_f/3c904513-944e-4a14-9492-e7bd0f1d77c0.woff") format("woff");
	}
	@font-face{
		font-family:"Brandon Grotesque W01 Bold";
		src:url("/_css/_f/d849a1c9-784e-4774-af52-86b6dc52cae6.woff2") format("woff2"),url("/_css/_f/6a0d5f5e-3ccd-4763-9f8b-e93735b722bc.woff") format("woff");
	}
	@font-face{
		font-family:"Britannic W01 Medium1391060";
		src:url("/_css/_f/95434bf5-b37d-42d4-b964-f476d982d212.woff2") format("woff2"),url("/_css/_f/e24f9a13-25f4-4006-974d-f2af1b2db250.woff") format("woff");
	}


/*css.css*/
:root  {
     color-scheme:		light only;

	--trans:			transparent ; 
	--black:			#161925;
	--red:				#C1292E;
	--blue:				#235789;
	--yellow:			#FEFCCD;
	--white:			#FDFFFC;
	--white:			#FEFEFE;

	--pink:				#F1DDDE ; 
	--pink-dark:		#E6A3AC ; 
	--pink-darker:		#C5787B ; 

	--font:				'Brandon Grotesque W01 Light' ;
	--font-b:			'Brandon Grotesque W01 Regular' ;
	--font-hdr:			'Brandon Grotesque W01 Bold' ;
	--font-top:			"Are You Shaw NF W01 Regular" ;
	--font-size:		 1.1875rem ;

	--width-corner:		45vmin ; 
	--width-para:		38em;
	--pad:			 	2rem ;
	--width:			calc( 100vw - ( ( var(--width-corner) + ( var(--pad) * 2 ) )  * 2 ) );
	--min-height:		calc( var(--width-corner) + 3rem ) ;
	--margin-horz:		auto ;
	--margin-vert-big:	6rem;
	--margin-vert-small:6rem ;
	--text-center:  	center ; 
}

@media screen and (max-width: 1600px )  {
	:root  {
		--pad:			1.5rem ;
		--width-corner:	40vmin ; 
	}
}

@media screen and (max-width: 1240px )  {
	:root  {
		--pad:			1.25rem ;
		--width-corner:	35vmin ; 
	}
}
@media screen and (max-width: 1115px )  {
	:root  {
		--pad:			1rem ;
		--width-corner:	30vmin ; 
	}
}
@media screen and (max-width: 990px )  {
	:root  {
		--pad:			1rem ;
		--width-corner:	25vmin ; 
	}
}
@media screen and (max-width: 800px )  {
	:root  {
		--pad:			 1rem ;
		--width-corner:	 45vmin ; 
		--width:		calc( 100vw - ( ( ( var(--width-corner) * 0.825 ) + ( var(--pad) * 2 ) )  * 1 ) );
 		--margin-horz:  1rem ; 
 		--text-center:  left ; 
		--font-size: 	1rem ;
	}
	#c nt > :is(#socl) > .hdr  { display: none ; }
	#c nt > :is(#socl) > .cnt  { margin-top: calc( var(--pad) * 3 ) ; }
}
@media screen and (max-width: 640px )  {
	:root  {
		--pad:			 1rem ;
	}
}
@media screen and (max-width: 560px )  {
	:root  {
		--pad:			 1rem ;
		--width:		calc( 100vw - ( var(--pad) * 3 ) ) ;
		--margin-vert-big:		calc( var(--width-corner) + ( var(--pad) / 2 ) ) ;
		--margin-vert-small:	var(--pad) ; 
	}
	#cnt > :is(#intr,#work,#next,#bd25) > .cnt  { margin-bottom: var(--pad) ; }
}
@media screen and (max-width: 480px )  {
	:root  {
		--pad:			 1rem ;
	}
}


*  { box-sizing: border-box ; }
html  { overflow-y: scroll ; } 
body  { background-color: var(--white) ; color: var(--black) ; margin: 0 ; padding: 0 ; }

#cnt   { display: flex ; flex-flow: column nowrap ; }
#cnt   { font-family: var(--font) ; font-size: var(--font-size)  ; line-height: 150% ; letter-spacing: 0.0075em ;} 
#cnt > :is(header,section,footer)  { color: var(--colour-text) ; background-color: var(--colour-back) ; }
#cnt > :is(header,section,footer)  { background-image: var(--bkg_img) ; background-position: var(--pad) var(--pad) , calc( 100% - var(--pad) ) var(--pad) ; background-repeat: no-repeat ; background-size: var(--width-corner) ; }
#cnt > :is(header,section,footer)  { padding: 0 ; margin: 0 ; }
#cnt > :is(header,section,footer) > :is(.hdr,.cnt)  { max-width: var(--width) ; }
#cnt > :is(header,section,footer) > .hdr  { margin: var(--margin-vert-big) var(--margin-horz) var(--margin-vert-small); color: var(--colour-head) ; }
#cnt > :is(header,section,footer) > .cnt  { margin: var(--margin-vert-small) var(--margin-horz) var(--margin-vert-big); }
#cnt > :is(header,section,footer) > .cnt + .cnt  { margin-top: 0 ; }
#cnt > :is(header,section,footer) > .img + .cnt  { margin-top: var(--pad)  ; }


/* common */
#cnt h2  { font-size: 5em  ; font-family: var(--font-top) ; text-align: var(--text-center); font-weight: normal ; line-height: 1em ; margin: 0 ; padding: 0 ; }
#cnt h3  { font-size: 1.75em ; font-family: var(--font-hdr) ; text-align: var(--text-center); font-weight: normal ; line-height: 1em ; margin: 0 ; padding: 0 ; }
#cnt p { max-width: var(--width-para) ; margin: 0  var(--margin-horz) 1rem ; }
#cnt p a  { color: var(--colour-link) ; }
#cnt p a:is(:hover,:focus)  {  background-color: var(--colour-link) ; color: var(--colour-link-highlight);}


/* custom */
#cnt ul.menu--inline  { margin: 0  ; padding: 0 ; list-style-type: none ; display: flex ; flex-flow: row wrap; justify-content: space-between; }
#cnt ul.menu--inline li  { margin: 0 ; padding: 0 ; list-style-type: none ; display: block ;}
#cnt ul.menu--inline li a  { margin: 0 0.5em ; padding: 0.5em 2em ; display: block ; font-family: var(--font-b) ;text-decoration: none ; border-radius: 2em ; background-color: var(--colour-back) ;color: var(--colour-link) ;}
#cnt ul.menu--inline li a:is(:focus)  { /* color: var(--colour-back) ; background-color: var(--colour-link-highlight) ; */ }
#cnt ul.menu--inline li a:is(:hover)  { color: var(--colour-back) ; background-color: var(--colour-link-highlight) ; }


/* #head */
#cnt #head  { order: 10 ; grid-area: head ; --colour-text: var(--black) ; --colour-back: var(--trans) ; --colour-head: var(--black) ; --colour-link: var(--white) ;--colour-link-highlight: var(--black) ; }
#cnt #head  { --bkg_img: url(/_css/_i/corners/r8.svg) , url(/_css/_i/corners/l8.svg) , url(/_css/_i/corners/r8w.svg) , url(/_css/_i/corners/l8w.svg) ; background-position: var(--pad) var(--pad) , calc( 100% - var(--pad) ) var(--pad) , var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ; background-size: var(--width-corner) ; }
#cnt #head   { position: relative ; padding: 0 ; }
#cnt #head .hdr  { display: flex ; flex-flow: column nowrap ; width: 100% ; padding: 0 ; max-width: unset ; }
#cnt #head .hdr  { min-height: 100vh ; margin: 0 auto ; align-items: center ; justify-content: center; position: relative ; font-size: 1vw ; }
#cnt #head .hdr h1  { font-family: var(--font-top) ; font-size: 15em ; line-height: 0.625em ; display: block ; text-align: center; font-weight: normal ; margin: 0 ; padding: 0 ;}
#cnt #head .hdr h1 span  { display: block ; font-size: 0.6em ; }
#cnt #head .hdr p  { font-family: var(--font-hdr) ; margin: 1em auto 0 ; font-size: 2em ; line-height: 0.625em ; max-width: 100% ; }
@media screen and (max-width: 800px )  {  #cnt #head .hdr  { font-size: 1.25vw ; }  }
@media screen and (max-width: 560px )  {  #cnt #head .hdr  { font-size: 1.5vw ; }  }
@media screen and (max-width: 800px )  {
	#cnt #head .hdr p  { font-size: 3em ; }
}


/* #menu */
#cnt #menu  { order: 20 ; grid-area: menu ; --colour-text: var(--white) ; --colour-back: var(--black) ; --colour-link: var(--white) ;--colour-link-highlight: var(--yellow) ; }
#cnt #menu  { --bkg_img: none ; }
#cnt #menu  { position: sticky ; top: 0px ; z-index: 20 ; min-height: 5rem ; right: 0 ; left: 0 ; padding: 0 ; display: flex ; flex-flow: row nowrap ; align-items: center ; }
#cnt #menu .ins  { margin: 0 auto; padding: 0 ; max-width: 100% ; }
#cnt #menu .menu--on--box ,
#cnt #menu > .ins :is(.menu--on ,.menu--off)  { display: none; }
@media screen and (max-width: 990px )  {
	#cnt #menu > .ins  { display: flex ; flex-flow: column wrap ; align-items: center; justify-content: space-around ; width: 100% ; margin: 0 ; padding: 0 ; }
	#cnt #menu > .ins :is(.menu--on ,.menu--off)  { display: flex ; flex-flow: row wrap ; align-items: center; justify-content: center ; gap: 0 0.5rem ; width: 100% ; height: 5rem ; cursor: pointer ; }
	#cnt #menu > .ins :is(.menu--on ,.menu--off):is(:hover)  { text-decoration: underline ; }
	#cnt #menu > .ins :is(.menu--on ,.menu--off) img  { width: 1.25rem ; height: 1.25rem ; display: inline-block ; }
	#cnt #menu > .ins .menu--off  { display: none ; }
	#cnt #menu > .ins .menu--inline	{ display: none ; padding: 0 0 0.5rem ; }
	#cnt #menu > .ins .menu--inline li   { padding: 0.25rem 0 ; }
	#cnt #menu > .ins .menu--on--box:checked ~ .menu--inline  { display: flex ; justify-content: center ; }
	#cnt #menu > .ins .menu--on--box:checked ~ .menu--on  { display: none ; }
	#cnt #menu > .ins .menu--on--box:checked ~ .menu--off  { display: flex ; }
}



/* #intr */
#cnt #intr  { order: 30 ; grid-area: intr ; --colour-text: var(--black) ; --colour-back: var(--white) ; --colour-head: var(--black) ; --colour-link: var(--white) ;--colour-link-highlight: var(--yellow) ; }
#cnt #intr  { --bkg_img: url(/_css/_i/corners/r3--black.svg) , url(/_css/_i/corners/l3--black.svg) ; }
#cnt #intr  { display: block ; }
#cnt #intr .hdr  { display: block ; order: 1; }
#cnt #intr .cnt  { display: block ; order: 3; }
#cnt #intr .img  { display: block ; order: 2; padding: var(--pad) ; }
#cnt #intr .img img  { display: block ; margin: 0 auto ; border-radius: 2rem ; max-width: var(--width-para) ; width: calc( 100% - ( var(--pad) * 2 ) ) ; }
@media screen and (max-width: 990px ) {
/*
    #cnt #intr  { display: flex; flex-flow: column wrap ; align-items: center ;  width: 100% ; }
    #cnt #intr :is(.hdr,.cnt,.img)  { width: calc( 100% - ( var(--pad) * 2 ) ) ; padding: 0  ;  }
    #cnt #intr .img  { width: calc( 100% - ( var(--pad) * 2 ) );  padding: 0 var(--pad) ;  }
    #cnt #intr .img img { width: 100% ; }
*/
}


/* #work */
#cnt #work  { order: 40 ; grid-area: work ; --colour-text: var(--black) ; --colour-back: var(--pink) ; --colour-head: var(--pink-darker) ; --colour-link: var(--white) ;--colour-link-highlight: var(--yellow) ; }
#cnt #work  { --bkg_img: url(/_css/_i/corners/r4.svg) , url(/_css/_i/corners/l4.svg) ; }
#cnt #work > .cnt.stack--four   { display: grid ; grid-template-columns: repeat(2,1fr) ; grid-template-rows: auto ; grid-gap: 2rem ; width: 100% ; padding: 0 ; }
#cnt #work > .cnt.stack--four h3  {  min-height: 3.5em ; }
#cnt #work > .cnt.stack--four > .ins   { display: flex ; flex-flow: column wrap; justify-content: space-between;  text-align: var(--text-center) ; background: var(--white) ;  border: 0.5rem double var(--pink-dark) ; padding: var(--pad) ; }
@media screen and (max-width: 1400px ) {
    #cnt #work > .cnt.stack--four   { grid-template-columns: 1fr ; grid-gap: 1rem ;}
}
@media screen and (max-width: 990px ) {
    #cnt #work > .cnt.stack--four   { grid-template-columns: 2fr ; grid-gap: 2rem ;}
}
@media screen and (max-width: 800px ) {
    #cnt #work > .cnt.stack--four   { grid-template-columns: 1fr ; grid-gap: 1rem ;}
}


/* #imgs */
#cnt #imgs  { order: 50 ; grid-area: imgs ; --colour-text: var(--white) ; --colour-back: var(--pink-dark) ; --colour-head: var(--pink-darker) ; --colour-link: var(--white) ;--colour-link-highlight: var(--yellow) ; }
#cnt #imgs  { --bkg_img: url(/_css/_i/corners/r0w.svg) , url(/_css/_i/corners/l0w.svg) ; background-position: var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ;}
#cnt #imgs .hdr    { display: none ; }
#cnt #imgs ul   { display: grid ; grid-template-columns: repeat(4, 1fr);  gap: 1rem; grid-auto-rows: auto; list-style-type: none ; margin: 0 ; padding: 0 0 3rem ; }
#cnt #imgs ul li  { display: none ; list-style-type: none ; margin: 0 ; padding: 0 ; position: relative ; }
#cnt #imgs ul li.on  { display: block ; }
#cnt #imgs ul li img   { display: block ; width: 100% ; height: 100% ; border-radius: 1rem; }
#cnt #imgs ul li p  { opacity: 0 ; display: flex ; text-align: center; align-items: center ;  justify-content: space-around; position: absolute ; top: 0 ;left:0 ; right: 0 ; bottom: 0 ; padding: 1rem ; margin: 0 ; color: var(--colour-text) ; background-color: var(--colour-back)  ; font-family: var(--font-hdr); text-transform: uppercase ; transition: 0.5s ease-out opacity ; line-height: 107.5% ; }
#cnt #imgs ul li:hover p  { opacity: 1 ; }
@media screen and (max-width: 1240px ) { #cnt #imgs ul  { grid-template-columns: repeat(4, 1fr);} }
@media screen and (max-width: 990px  ) { #cnt #imgs ul  { grid-template-columns: repeat(3, 1fr);} }
@media screen and (max-width: 560px  ) { #cnt #imgs ul  { grid-template-columns: repeat(2, 1fr);} }
@media screen and (max-width: 460px  ) { #cnt #imgs ul  { grid-template-columns: repeat(2, 1fr);} }


/* #next */
#cnt #next  { order: 60 ; grid-area: next ; --colour-text: var(--black) ; --colour-back: var(--white) ; --colour-head: var(--pink-dark) ; --colour-link: var(--black) ;--colour-link-highlight: var(--yellow) ; }
#cnt #next  { --bkg_img: url(/_css/_i/corners/r7.svg) , url(/_css/_i/corners/l7.svg) , url(/_css/_i/corners/r7w.svg) , url(/_css/_i/corners/l7w.svg) ; background-position: var(--pad) var(--pad) , calc( 100% - var(--pad) ) var(--pad) , var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ;}
#cnt #next > .cnt.stack--three   { display: grid ; grid-template-columns: repeat(3,1fr) ; grid-template-rows: auto ; grid-gap: 1rem ; width: 100% ; padding: 0 ; }
#cnt #next > .cnt.stack--three h3  {   min-height: 3.5em ;  }
#cnt #next > .cnt.stack--three > .ins   { display: flex ; flex-flow: column wrap; justify-content: space-between; text-align: var(--text-center) ; background: var(--yellow) ;  border: 1rem double var(--white) ; padding: var(--pad) ; }
@media screen and (max-width: 1400px ) {
    #cnt #next > .cnt.stack--three   { grid-template-columns: 1fr ; grid-gap: 1rem ;}
}
@media screen and (max-width: 990px ) {
    #cnt #next > .cnt.stack--three   { grid-template-columns: 3fr ; grid-gap: 1rem ;}
}
@media screen and (max-width: 800px ) {
    #cnt #next > .cnt.stack--three   { grid-template-columns: 1fr ; grid-gap: 1rem ;}
}


/* #bd25 */
#cnt #bd25  { order: 70 ; grid-area: bd25 ; --colour-text: var(--black) ; --colour-back: var(--yellow); --colour-head: var(--black) ; --colour-link: var(--white) ;--colour-link-highlight: var(--yellow) ; }
#cnt #bd25  { --bkg_img: url(/_css/_i/corners/r6.svg) , url(/_css/_i/corners/l6.svg) ; }


/* #socl */
#cnt #socl  { order: 80 ; grid-area: socl ; --colour-text: var(--black) ; --colour-back: var(--white) ; --colour-head: var(--pink-dark) ; --colour-link: var(--white) ;--colour-link-highlight: var(--pink-dark) ; min-height: var(--min-height)  ; }
#cnt #socl  { --bkg_img: url(/_css/_i/corners/r1w.svg) , url(/_css/_i/corners/l1w.svg) ; background-position: var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ;}
#cnt #socl .cnt p   { font-size: 1.75em ; font-family: var(--font-hdr) ; text-align: var(--text-center); font-weight: normal ; line-height: 1.5em ; margin: 0 auto 3em ; padding: 0 1rem ; }
#cnt #socl .cnt p span   { display: block ; }
#cnt #socl .cnt ul   { display: grid ; grid-template-columns: repeat(3, 1fr);  gap: 1rem; grid-auto-rows: auto; list-style-type: none ; margin: 0 ; padding: 0 ; }
#cnt #socl .cnt ul li  { list-style-type: none ; margin: 0 ; padding: 0 ; position: relative ; }
#cnt #socl .cnt ul li a   { display: flex ; flex-flow: row nowrap ; align-items: space-around ; justify-content: center ; }
#cnt #socl .cnt ul li img   { display: block ; width: 100% ; height: 100% ; max-width: 120px ; }
#cnt #socl .cnt ul li p  { opacity: 0 ; display: flex ; text-align: center; align-items: center ;  justify-content: space-around; position: absolute ; top: 0 ;left:0 ; right: 0 ; bottom: 0 ; padding: 1rem ; margin: 0 ; color: var(--colour-text) ; background-color: var(--colour-back)  ; font-family: var(--font-hdr); text-transform: uppercase ; transition: 0.5s ease-out opacity ; line-height: 107.5% ; }
#cnt #socl .cnt ul li:hover p  { opacity: 1 ; }
@media screen and (max-width: 800px) {  #cnt #socl .cnt ul  { grid-template-columns: repeat(3, 1fr) ; } }



#cnt #plea  { position: absolute ;bottom: 1rem ; right: calc( 50% - 60px ) ; width: 100% ; height: 100% ; max-height: 120px; max-width: 120px; z-index: 200 ; display: flex ; flex-flow: row wrap ; align-items: center; justify-content: space-around ; color: var(--pink-dark) ; }
#cnt #plea  { opacity: 0.0001 ; }
#cnt #plea img  { width: 100% ; max-width: 90px ; cursor: pointer ; }
#cnt #plea span  { display: none ; font-size: 0.825rem ; cursor: pointer ; }


@media screen and (max-width: 800px )  {
	#cnt #intr  { --bkg_img: none , url(/_css/_i/corners/l3--black.svg) ; }
	#cnt #work  { --bkg_img: none , url(/_css/_i/corners/l4.svg) ; }
	#cnt #imgs  { --bkg_img: none , url(/_css/_i/corners/l0w.svg) ; }
	#cnt #next  { --bkg_img: none , url(/_css/_i/corners/l7.svg) , none , url(/_css/_i/corners/l7w.svg) ; }
	#cnt #bd25  { --bkg_img: none , url(/_css/_i/corners/l6.svg) ; }
	#cnt #socl  { --bkg_img: none , url(/_css/_i/corners/l1w.svg) ; }
}


/*
#cnt #intr  { --bkg_img: url(/_css/_i/corners/r3--black.svg) , url(/_css/_i/corners/l3--black.svg) ; }
#cnt #work  { --bkg_img: url(/_css/_i/corners/r4.svg) , url(/_css/_i/corners/l4.svg) ; }
#cnt #imgs  { --bkg_img: url(/_css/_i/corners/r0w.svg) , url(/_css/_i/corners/l0w.svg) ; background-position: var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ;}
#cnt #next  { --bkg_img: url(/_css/_i/corners/r7.svg) , url(/_css/_i/corners/l7.svg) , url(/_css/_i/corners/r7w.svg) , url(/_css/_i/corners/l7w.svg) ; background-position: var(--pad) var(--pad) , calc( 100% - var(--pad) ) var(--pad) , var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ;}
#cnt #bd25  { --bkg_img: url(/_css/_i/corners/r6.svg) , url(/_css/_i/corners/l6.svg) ; }
#cnt #socl  { --bkg_img: url(/_css/_i/corners/r1w.svg) , url(/_css/_i/corners/l1w.svg) ; background-position: var(--pad) calc( 100% - var(--pad) ) , calc( 100% - var(--pad) ) calc( 100% - var(--pad) ) ;}


body #cnt #intr  { --bkg_img: url(/_css/_i/corners/r3--black.svg) , none; }
body #cnt #work  { --bkg_img: url(/_css/_i/corners/r4.svg) , none ; }
body #cnt #imgs  { --bkg_img: url(/_css/_i/corners/r0w.svg) , none ; }
body #cnt #next  { --bkg_img: url(/_css/_i/corners/r7.svg) , none , url(/_css/_i/corners/r7w.svg) , none ; }
body #cnt #bd25  { --bkg_img: url(/_css/_i/corners/r6.svg) , none ; }
body #cnt #socl  { --bkg_img: url(/_css/_i/corners/r1w.svg) , none ; }
*/