/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html { font-size: 16px; }


/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, p, a { margin: 0; padding: 0; border: 0; }

body { background: #eee; background:rgb(254, 253, 253) }


/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container { max-width: 90rem; }
.container { margin:  auto; background: #eee; background: rgb(254, 253, 253) }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
	font-family: Homemade Apple;
	src: url(fonts/Homemade_Apple/HomemadeApple-Regular.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Montserrat-Light;
	src: url(fonts/Montserrat/static/Montserrat-Light.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Montserrat ExtraLight;
	src: url(fonts/Montserrat/static/Montserrat-ExtraLight.ttf);
	font-weight: normal;
	font-style: normal;
}


body		{ font-family: Montserrat-Light, Arial, sans-serif; }
h1, h2, h3	{ font-family: Homemade Apple, Arial, sans-serif; }
p			{ font-family: Montserrat-Light, Arial, sans-serif; }
figcaption	{ font-family: Montserrat-Light, Arial, sans-serif; }

body { color: rgb(176, 46, 52)}
h1, h2, h3 {color:rosybrown}
p {color:rgb(10, 10, 10)}


/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ padding: .5rem .5rem 2rem .5rem; min-height: 2rem; border-bottom: 2px #eee solid; }
nav h1	{ font-size: 1.75rem; margin-bottom: .5rem; }
nav a	{ white-space: nowrap; }

nav ul		{ list-style-type: none; }
nav ul li	{ font-family: Montserrat-Light, Arial, sans-serif; font-size: 1.75rem; display: inline-block; margin-right: 1.5rem; }


/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
	font-size: 2rem;
	line-height: 2.15rem;
	margin: 1rem .5rem 3rem;
}

/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container > figure { margin: 0 .5rem 2rem .5rem; }


/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section { margin:0; padding: 0 .5rem 1.5rem; }

section h3, section div h3 { font-size: 1.5rem; line-height: 2.25rem; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1rem; }

section div { margin-top: -0.375rem; }  /* to adjust type against images */


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; } /* max-width sets line length */
p { font-size: 1.5rem; line-height: 1.375em; }
/* p { line-height: 2.0625rem; } */ 


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ width: 100%; height: auto; }

video	{ width: 100%; }

.max 	{ max-width: 100%; }  /* max-width can stop img element going bigger than its actual size */


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: rgb(176, 46, 52); text-decoration: none; }
a:visited	{ color: rgb(176, 46, 52); }
a:hover		{ color: rgb(244, 244, 244); text-decoration: underline; }
a:active	{ color: rgb(176, 46, 52); }

nav a			{ color: rgb(176, 46, 52); text-decoration: none; }
nav a:visited	{ color: rgb(176, 46, 52) }
nav a:hover		{ color: rgb(244, 244, 244); text-decoration: underline; }
nav a:active	{ color: rgb(176, 46, 52); }

.contact p { font-size: 3rem; text-align: center; }

/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {


/*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
	.container { min-width: 60rem; min-width: 0; }

	.force-height { min-height: 100vh; }


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		background: rgb(237, 197, 204);
		border-bottom: 0 #eee none;
	}

	nav h1	{ font-size: 1.75rem; margin-bottom: .5rem; margin-top: 0; }

	nav ul { margin: 0; }
	nav ul li { font-size: 1.75rem; margin: 0 0 0 1.25rem; }


/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { 
		font-size: 3rem;
		line-height: 1.15em;
		margin: 3rem auto 4rem;
		text-align: center;
	}


/*  hero image
--------------------------------------------------------------------------------------- */
	h2 + figure { margin: 0; padding-bottom: 3rem; }
	h2 + figure img { display: block; }


/*  default desktop section styles
--------------------------------------------------------------------------------------- */
	section { padding: 0 .5rem 4rem; }

	section figure { margin: 0; }

	section h3 { margin-bottom: .5em; }


/*  section default 12 column grid
--------------------------------------------------------------------------------------- */
	section { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg dv dv dv dv dv dv dv dv";
	}

	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg; }
	section div		{ grid-area: dv; }


/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 3rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"hd hd hd"
		"dv dv fg";
	}

	section.three h3		{ grid-area: hd; }
	section.three figure	{ grid-area: fg; }
	section.three div		{ grid-area: dv; }
	section.three h3		{ margin-top: 1rem; }
	section.three div		{ margin-top: 0; }
	section.three h3  { 
		font-size: 2.5rem; 
		text-align: center;
	}
	section.three p {
		font-size: 1.2rem;
	}


/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */	
	section.right {
		display: grid;
		grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 1.5rem; grid-column-gap: 4rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}
	
	section.right h3		{ grid-area: hd; }
	section.right figure	{ grid-area: fg; }
	section.right div		{ grid-area: dv; }

	section.right h3		{ margin-top: 0; }
	section.right div		{ margin-top: 0; }


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
	section.wide {
		display: grid;
		grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg fg"
		"dv fg fg";
	}
	
	section.wide h3		{ grid-area: hd; }
	section.wide figure	{ grid-area: fg; }
	section.wide div	{ grid-area: dv; }



/*  intro
--------------------------------------------------------------------------------------- */
	section.intro {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0;
		grid-template-areas:
		"dv dv dv";
	}

	section.intro h3	{ grid-area: hd; }
	section.intro div	{ grid-area: dv; }

	section.intro div h3,
	section.intro div p	{ font-size: 2rem; }

	section.intro		{ margin-bottom: 4rem; }


/*  Aims/Into
--------------------------------------------------------------------------------------- */
section.two-space.colourbox.orange  {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 5rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2"
	"hd hd"
	"dv dv";
}

section.two-space h3						{ grid-area: hd; }
section.two-space figure					{ grid-area: f1; }
section.two-space figure:nth-of-type(2)	{ grid-area: f2; }
section.two-space div 						{ grid-area: dv; }


section.two-space p {font-size: 1.5rem; color: rgb(244, 244, 244);}
section.two-space h1 {font-size: 2rem; color: rgb(176, 46, 52);}
section.two-space h2 {font-size: 1.5rem; color: rgb(176, 46, 52);}



/*  images-two
--------------------------------------------------------------------------------------- */
	section.images-two {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2"
		"hd hd"
		"dv dv";
	}

	section { padding: 0.7rem 5rem; }

	section.images-two h3						{ grid-area: hd; }
	section.images-two figure					{ grid-area: f1; }
	section.images-two figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-two div 						{ grid-area: dv; }

	section.images-two div h3,
	section.images-two p { 
		font-size: 1.2rem; 
	}



/*  images-two
--------------------------------------------------------------------------------------- */
section.images-two-space {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 5rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2"
	"hd hd"
	"dv dv";
}

section.images-two-space {padding-bottom: 4rem;}

section.images-two-space h3						{ grid-area: hd; }
section.images-two-space figure					{ grid-area: f1; }
section.images-two-space figure:nth-of-type(2)	{ grid-area: f2; }
section.images-two-space div 						{ grid-area: dv; }

section.images-two-space div h3,
section.images-two-space div p { font-size: 1.5rem; }



	
/*  images-two
--------------------------------------------------------------------------------------- */
section.images-two-space-small {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem; 
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd hd hd"
	"f1 f2 dv"
	"f1 f2 dv";
}

section.images-two-space-small { padding-top: 4rem;}

section.images-two-space-small h3						{ grid-area: hd; }
section.images-two-space-small figure					{ grid-area: f1; }
section.images-two-space-small figure:nth-of-type(2)	{ grid-area: f2; }
section.images-two-space-small div 						{ grid-area: dv; }

section.images-two-space-small div h3,
section.images-two-space-small div p { 
	font-size: 1.3rem;
    color: rgb(244, 244, 244);
}

section.images-two-space-small figure {
    width: 70%;
	height: 70%;
	align-items: normal;
}

section.images-two-space-small h3  { 
	font-size: 2.5rem; 
	color: rgb(176, 46, 52);
	text-align: center;
}


	
/*  images-three
--------------------------------------------------------------------------------------- */
	section.images-three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd hd hd"
		"f1 f2 f3"
		"dv dv dv";
	}

	section.images-three {padding-top: 3rem;}

	section.images-three h3						{ grid-area: hd; }
	section.images-three figure					{ grid-area: f1; }
	section.images-three figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three div					{ grid-area: dv; }

	section.images-three h3 { 
		font-size: 2.5rem; 
		text-align: center;
	}
	section.images-three p { 
		font-size: 1.2rem; 
	    padding-top: 1rem;}


/*  images-three-plus
--------------------------------------------------------------------------------------- */
	section.images-three-plus {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"f1 f2 f3"
		"d1 d2 d3";
	}

	section.images-three-plus figure				{ grid-area: f1; }
	section.images-three-plus figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three-plus figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three-plus div					{ grid-area: d1; }
	section.images-three-plus div:nth-of-type(2)	{ grid-area: d2; }
	section.images-three-plus div:nth-of-type(3)	{ grid-area: d3; }

	section.images-three-plus		{ padding: 0 0 2rem; }

	section.images-three-plus div h3,
	section.images-three-plus div p { font-size: 1.5rem; }
	


/* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
	section.full { display: block; padding: 1rem 0 0; }

	section.full figure {
		grid-area: auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-template-areas:
		"f1"
		"im";
	}

	section.full figure img			{ grid-area: im; }
	section.full figure figcaption	{ grid-area: f1; justify-self: center; }

	section.full					{ margin-bottom: 4rem; }
	section.full figure img			{ display: block; }
	section.full figcaption h3		{ font-size: 3rem; }


/* two columns
--------------------------------------------------------------------------------------- */
	section.two {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"fg hd"
		"fg dv";
	}


/* two columns right image
--------------------------------------------------------------------------------------- */
	section.two-right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd"
		"dv fg"
		"dv fg";
	}

	section.two-right {padding-bottom: 3rem;}
	section.two-right {padding-top: 3rem;}

	section.two-right h3  { 
		font-size: 2.5rem; 
		text-align: center;
	}
	section.two-right p {
		font-size: 1.2rem;
	}



/* two columns right image
--------------------------------------------------------------------------------------- */
section.one {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(2.5rem, auto);
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd"
	"dv dv";
}

section.one h3  { 
	font-size: 2.5rem; 
	text-align: center;
	color:rgb(176, 46, 52);
	padding-bottom: 2rem;
	padding-top: 2rem;
}
section.one p {
	font-size: 1.2rem;
	color:rgb(244, 244, 244);
	padding-left: 20rem;
}

/* two columns left image
--------------------------------------------------------------------------------------- */
section.two-left {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(2.5rem, auto);
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd"
	"fg dv"
	"fg dv";
}

    section.two-left { padding-top: 3rem;}
	section.two-left { padding-bottom: 3rem;}

    section.two-left h3		{ grid-area: hd; }
	section.two-left figure	{ grid-area: fg; }
	section.two-left div	{ grid-area: dv; }
	section.two-left h3		{ margin-top: 1rem; }
	section.two-left div	{ margin-top: 0; }
	section.two-left h3  { 
		font-size: 2rem; 
	}
    
	section.two-left h3 {
        font-size: 2.5rem;
		text-align: center;
}

	section.two-left p {
		font-size: 1.2rem;
	}



	/* two columns left image top heading
--------------------------------------------------------------------------------------- */
section.two-left-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(2.5rem, auto);
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd"
	"fg dv"
	"fg dv";
}

    section.two-left-top { padding-top: 2rem;}
	section.two-left-top { padding-bottom: 2rem;}

    section.two-left-top h3		{ grid-area: hd; }
	section.two-left-top figure	{ grid-area: fg; }
	section.two-left-top div	{ grid-area: dv; }
	section.two-left-top h3		{ margin-top: 1rem; }
	section.two-left-top div	{ margin-top: 0; }

	section.two-left-top h3  { 
		font-size: 2.5rem; 
		text-align: center;
	}
	section.two-left-top p {
		font-size: 1.2rem;
	}


/* pull quote
--------------------------------------------------------------------------------------- */
	section.pull {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-row-gap: 0;
		grid-template-areas:
		"dv";
	}
	

	.pull p { 
		font-size: 1.2rem; 
		text-align: center;
		margin-bottom: 4rem; 
	    margin-top: 2;
	}

	.pull h3 {
		font-size: 2.5rem;
		text-align: center;
		margin-bottom: 1rem;
	}

	.pull figcaption {
		font-size: 1.2rem;
		text-align: center;
		margin-bottom: 3rem;
		color: rgb(10, 10, 10);
	}



/* out of background
--------------------------------------------------------------------------------------- */
	section.colourbox {
		padding: 3rem;
		padding-bottom: 1rem;
		margin-bottom: 4rem;
	}

	.orange {
		background:  rgb(237, 197, 204);
		
	}

	.pink {
		background:  rgb(237, 197, 204);
		
	}


/*  custom section for about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns: minmax(24rem, 5fr) 4fr 3fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg dv dv";
	}

	section.about p {font-size: 1.2rem;}




	/*  custom section for contact pagr
--------------------------------------------------------------------------------------- */
section.contact {
	display: grid;
	grid-template-columns: minmax(24rem, 5fr) 4fr 3fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"dv"
	"dv"
	"dv";

	}

	section.contact div p {font-size: 1.2rem;}

/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video  {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 v1 v1"
		"t2 t2 t2 t2";
		align-items: center;
		justify-items: center;
	}


	section.video figure {
        grid-area: v1; 
		width: 100%;
		max-width: 800px;
		height: auto;
	}



	section.video div		{ grid-area: t2; }

	section.video figure	{ padding:0; }
	section.video div		{ background: transparent; }
	section.video p			{ max-width: 32rem; color: #777; }
	section.video h3		{ padding-top: 1rem; }


/*  home page auto grid
--------------------------------------------------------------------------------------- */		
section.home {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"h1 h1 h1"
	"h2 h3 h4";
}

section.home { padding: 0 .5rem 2rem; }

section.home figure.one   { grid-area: h1; }
section.home figure.two   { grid-area: h2; }
section.home figure.three { grid-area: h3; }
section.home figure.four  { grid-area: h4; }


/*  projects page auto grid
--------------------------------------------------------------------------------------- */		
section.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0rem;
	grid-template-areas:
	  "f1 f2"
	  "f3 f4";
  }
  
  
  .projects figure.one   { grid-area: f1; }
  .projects figure.two   { grid-area: f2; }
  .projects figure.three { grid-area: f3; }
  .projects figure.four  { grid-area: f4; }
  
 
  
  section.projects figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
  }
  
  section.projects figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s ease;
	z-index: 0;
	
  }
  
  section.projects figcaption { 
	font-size: 40px;
	color: #B22E34;
	position: absolute;
	inset: 32px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	justify-content: center;
	align-items: center;
	display: none;
	z-index: 1;
	padding: 10px;
	text-align: center;
	
  }
  
  section.projects figure:hover img {
	
	
	filter: opacity(30%);
  }
  
  section.projects figure:hover figcaption {
	display: grid;
  }
  

/*  project page reflection section
--------------------------------------------------------------------------------------- */		
section.reflection {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"rh rh"
	"d1 d2";
}

section.reflection h3		{ grid-area: rh; }
section.reflection div		{ grid-area: d1; }
section.reflection div.two	{ grid-area: d2; }

section.reflection div p a { display: block; }


} /* end 768px media query */



* {box-sizing:border-box}



/*  slider
--------------------------------------------------------------------------------------- */

section.heading
 h3 {
	font-size: 2.5rem; 
	text-align: center;
	padding-top: 3rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.slider {
    position: relative;
    max-width: 800px; /* Set a maximum width for the slider */
    margin: auto; /* Center the slider */
    overflow: hidden; /* Hide overflow to prevent scrollbars */
}

.slides {
    display: flex; /* Arrange slides in a row */
    transition: transform 0.5s ease; /* Smooth transition effect */
}

.slide {
    min-width: 100%; /* Each slide takes full width of the container */
    transition: opacity 0.5s ease; /* Smooth opacity transition */
}

.slide img {
    width: 100%; /* Make images responsive */
    display: block; /* Remove bottom space */
}

.navigation {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-button {
    cursor: pointer;
    height: 10px;
    width: 10px;
    background-color: #ccc; /* Default button color */
    border-radius: 50%; /* Make buttons circular */
    display: inline-block;
    margin: 0 5px; /* Space between buttons */
}
.nav-button:hover {
    background-color: #888; /* Darker color on hover */
}

input[type="radio"] {
    display: none; /* Hide radio buttons */
}

/* Display the corresponding slide based on checked input */
#slide1:checked ~ .slides {
    transform: translateX(0);
}

#slide2:checked ~ .slides {
    transform: translateX(-100%);
}

#slide3:checked ~ .slides {
    transform: translateX(-200%);
}



/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
	html { font-size: 24px; }
}