@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


/* ==========================================================================
   CUSTOM PROPERTIES
   ========================================================================== */

:root{

	/* Colours */
	--colour-text:#4a4543;
	--colour-text-light:#7a706d;
	--colour-heading:#695454;	
	--colour-primary:#8C7575;
	--colour-primary-rgb: 140 117 117;
	--colour-primary-hover: #574747;
	--colour-background:#fff;
	--colour-surface:#fff;
	--colour-surface-alt: #f6f2f0;
	--colour-footer:#222;

	/* Layout */

	--container-width:1100px;
	--container-padding:90%;

	--section-spacing:90px;

	/* Border Radius */

	--radius-small:10px;
	--radius-pill:30px;
	--radius-large:40px;

	/* Shadows */

	--shadow-header:0 2px 8px rgba(0,0,0,.08);
	--shadow-card:0 8px 25px rgba(0,0,0,.05);

}

/* ==========================================================================
   RESET
   ========================================================================== */

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

/* ==========================================================================
   BASE
   ========================================================================== */

html{
	scroll-behavior:smooth;
}

body{
	font-family:"Plus Jakarta Sans",sans-serif;
	color:var(--colour-text);
	font-weight: 300;
	font-size: 1em;
	line-height:1.7;
	background:var(--colour-background);
	font-optical-sizing: auto;
	letter-spacing: 0.02em;
	transition:
	background-color .6s ease,
	opacity .6s ease;
	opacity:0;
	
	&.portal-transition{
		opacity:0;
	}

}


p { margin: 0.5em 0; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4 { font-family: "Spectral", serif; font-weight: 400; letter-spacing: -0.05em; line-height: 1.2; color:var(--colour-heading); }

h2{
	margin-bottom:30px;
	font-size:2.5rem;
	text-align:center;
}

h3 { font-size: 1.5rem; color:var(--colour-primary); }

strong { font-weight: 600; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container{
	width:min(var(--container-width),90%);
	margin:auto;
}

section{
	scroll-margin-top: 140px;
	padding:var(--section-spacing) 0;

	&:not(.hero):nth-of-type(odd){
		background:var(--colour-surface-alt);
	}
}

/* ==========================================================================
   GENERIC COMPONENTS
   ========================================================================== */

.button,
button{
	
	display:inline-block;
	padding:14px 28px;
	border-radius:var(--radius-large);
	background-color: var(--colour-primary);
	color:var(--colour-surface);
	border:none;
	text-decoration:none;
	cursor:pointer;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:.08em;
	font-weight: 500;
	font-size: 1em;
	transition: background-color .25s ease-in-out;
	
	&:hover, &:focus {
		
		background-color: var(--colour-primary-hover);
		
	}
	
}


.cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:30px;

	& article{
		background:var(--colour-surface);
		padding:30px;
		border-radius:var(--radius-small);
		box-shadow:var(--shadow-card);
	}

	& h3{
		margin-bottom:15px;
	}
}

blockquote{
	max-width:700px;
	margin:30px auto;
	padding:25px;
	background:var(--colour-surface);
	border-left:5px solid var(--colour-primary);
	font-style:italic;
}

.visually-hidden{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}
/* ==========================================================================
   HEADER
   ========================================================================== */
   
   header{
	  
	 --logo-width-max:380px;
	 --logo-width-min:200px;
	 --logo-margin:48px;
	 --header-padding:36px;
	 
	 @media (max-width:479px){
		 --logo-width-max:260px;
		 --logo-width-min:140px;
		 --logo-margin:12px;
	 }
	 
	   position:sticky;
	   top:0;
	   background:var(--colour-surface);
	   box-shadow:var(--shadow-header);
	   z-index:100;
	   
		& .container{
			display:flex;
			flex-direction:column;
			align-items:center;
			padding:var(--header-padding) 0 24px;
		}
		
		
		h1{
		
			margin:0;
			text-align:center;
			transition: all .25s ease-in-out;
			
			.logo{
			
				width:100%;
				height:auto;
				max-width:var(--logo-width);
				margin-bottom:var(--logo-margin);
				display:block;
				pointer-events:none;
				
				@media (max-width:479px){ margin-bottom: 12px; } 
							
			}
		
		} 
   
   }

   nav{
   
	   display:flex;
	   justify-content:center;
	   align-items:center;
	   flex-wrap:wrap;
	   column-gap: 36px;
	   row-gap: 16px;
	   & a{
		   text-decoration:none;
		   text-transform:uppercase;
		   letter-spacing:.08em;
		   font-size:.9rem;
		   font-weight:500;
		   line-height: 1.2;
		   color:var(--colour-text-light);
		   transition:color .2s;
		   &:hover{
			   color:var(--colour-primary);
		   }
	   }
   
   }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
	min-height:60vh;
	padding: 60px 0;
	background:url("assets/hero.webp") center/cover;
	display:flex;
	align-items:center;
	justify-content:center;

	& .hero-overlay{
		background:rgba(255,255,255,.9);
		padding:60px;
		width: 90%;
		max-width:800px;
		text-align:center;
	}

	& h2{
		font-size:3rem;
		margin-bottom:20px;
	}

	& p{
		margin-bottom:30px;
	}
}

.old-life{

	transition:opacity .3s ease,text-decoration-color .3s ease;

}

.cult-mode .old-life{

	text-decoration:line-through;
	text-decoration-thickness:2px;
	text-decoration-color:var(--colour-primary);

}

/* ==========================================================================
   FOUNDER
   ========================================================================== */

.founder{
	display:grid;
	grid-template-columns:350px 1fr;
	gap:50px;
	align-items:start;
	
	& h2{
		text-align:left;
	}

	& img{
		width:100%;
		border-radius:var(--radius-small);
	}
}

/* ==========================================================================
   CENTRE
   ========================================================================== */

.gallery{
	display:grid;
	grid-template-columns:2fr 1fr;
	grid-template-rows:250px 250px 250px;
	gap:20px;
	margin-top:40px;

	& figure{
		margin:0;
		display:flex;
		flex-direction:column;
	}

	& img{
		width:100%;
		height:100%;
		object-fit:cover;
		border-radius:var(--radius-small);
		flex:1;
		
		&.primary { aspect-ratio: 900 / 700; }
		&.secondary { aspect-ratio: 600 / 350; }
		
	}

	& figcaption{
		padding:12px 0 0;
		font-size:.9rem;
		text-align:center;
		color:var(--colour-text-light);
	}

	& figure:first-child{
		grid-row:span 3;
	}
}

.location-note {
	max-width: 42rem;
	margin: 3rem auto 0;
	padding-top: 2rem;

	border-top: 1px solid var(--colour-surface-alt);

	text-align: center;
}

.location-note h3 {
	margin-bottom: 0.75rem;

}

.location-note p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--colour-text-light);
}

/* ==========================================================================
TESTIMONIALS
   ========================================================================== */


.testimonials{ margin-top: 2em;

	& article{
		text-align:center;
	}

	& img{
		width:110px;
		height:110px;
		border-radius:50%;
		object-fit:cover;
		margin-bottom:20px;
	}

	& .stars{
		color: var(--colour-primary);
		margin-bottom:15px;
		font-size:1.1rem;
	}

	& blockquote{
		margin:0 0 20px;
		padding:0;
		border:none;
		background:none;
		font-style:italic;
		max-width:none;
	}

	& footer{
		background:none;
		color:inherit;
		padding:0;
		font-size:.9rem;
		color:var(--colour-text-light);
	}
}

/* ==========================================================================
   JOURNEY
   ========================================================================== */

#journey{

	text-align:center;

	& .container{
		max-width:700px;
	}

	& h2{
		margin-bottom:25px;
	}

	& .intro{
		font-size:1.15rem;
		margin-bottom:20px;
	}

	& .boxout{
		margin: 72px 0 48px 0;
		background: rgb(var(--colour-primary-rgb) / 0.05);
		border-radius: var(--radius-small);
		padding: 20px;
	}	

}

@keyframes nudge{

	0%,100%{
		transform:translateX(0);
	}
	50%{
		transform:translateX(8px);
	}

}

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

footer{
   	min-height: 154px;
	   padding:30px 0 40px;
	   text-align:center;
	   font-size:.9rem;
	   color:var(--colour-text-light);
	   background:#eeece6;
	   
	   p {
		    @media (min-width:720px){ max-width: 500px; margin: 0 auto; }
			
		}
		
		p:not(.trigger) { font-size: 0.75rem; margin-top: 6px;}	
   
   }
   
/* ==========================================================================
CHAT BUTTON
========================================================================== */   
   
   .chat-button{

	   position:fixed;
	   right:30px;
	   bottom:30px;
	   z-index:1000;
	   display:flex;
	   align-items:center;
	   box-shadow:0 8px 30px rgb(var(--colour-primary-rgb) / .25);
	   gap: 8px;
	   opacity:0;
	   transform:translateY(20px);
	   pointer-events:none;
	   transition: opacity .25s ease, transform .25s ease, background-color .25s ease-in-out;
	   
	   &.visible{
		   opacity:1;
		   transform:translateY(0);
		   pointer-events:auto;
	   }
	   
	   &.footer-visible{
		   transform:translateY(-160px);
	   }
	   
   }
   
   .chat-button__icon{
	   width:30px;
	   height:30px;
	   flex:0 0 auto;
	   transform:scaleX(-1);
	   background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5C4 4.67 4.67 4 5.5 4h13c.83 0 1.5.67 1.5 1.5v9c0 .83-.67 1.5-1.5 1.5H10l-4.5 4v-4H5.5C4.67 16 4 15.33 4 14.5z' fill='none' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='10' r='0.9' fill='white'/%3E%3Ccircle cx='12' cy='10' r='0.9' fill='white'/%3E%3Ccircle cx='15' cy='10' r='0.9' fill='white'/%3E%3C/svg%3E");
   }
   
   @media (max-width:720px){
   
	   .chat-button{
		   right:20px;
		   bottom:20px;
	   }
   
   }
   
/* ==========================================================================
 LOGIN MODAL
 ========================================================================== */
  
  .login-modal{

	  position:fixed;
	  inset:0;
  
	  display:flex;
	  align-items:center;
	  justify-content:center;
  
	  padding:30px;
  
	  background:rgb(255 255 255 / .65);
	  backdrop-filter:blur(8px);
  	
	  visibility:hidden;
	  opacity:0;
	  pointer-events:none;
  
	  transition:
	  opacity .25s ease,
	  visibility 0s linear .25s;
  
	  z-index:2000;
  
	  &.open{
  		
		  visibility:visible;
		  opacity:1;
		  pointer-events:auto;
		  transition:
		  opacity .25s ease,
		  visibility 0s;
  
	  }
  
  }
  
  .login-dialog{
  
	  position:relative;
	  width:min(460px,90vw);
	  padding:40px;
  	  background:var(--colour-surface);
  	  border-radius:var(--radius-small);
  	  box-shadow:var(--shadow-card);
  	  text-align:center;
  	  transform:translateY(12px) scale(.98);
	  opacity:0;
		transition:
			transform .25s ease,
			opacity .25s ease;
		
		
  
	  .login-modal.open &{
  
		  transform:none;
		  opacity:1;
  
	  }
  
	  h2{
  
		  margin-bottom:16px;
  
	  }
  
	  p{
  
		  margin-bottom:30px;
		  color:var(--colour-text-light);
  
	  }
  
	  form{
  
		  display:flex;
		  flex-direction:column;
		  gap:20px;
  
	  }
  
	  input{
  
		  width:100%;
  
		  padding:16px 18px;
  
		  font:inherit;
  
		  border:1px solid #ddd;
		  border-radius:var(--radius-small);
  
		  background:#fff;
  
		  transition:border-color .2s;
  
		  &:focus{
  
			  outline:none;
			  border-color:var(--colour-primary);
  
		  }
  
	  }
  
	  .login-buttons{
  
		  display:flex;
		  justify-content:flex-end;
		  gap:12px;
  
	  }
  
	  .login-error{
  
		  min-height:1.4em;
		  margin:0;
  
		  font-size:.9rem;
		  color:#b34848;
  
	  }
  
  }
  
  .login-loading{
  
	  display:none;
	  text-align:center;
  
  }
  
  .login-dialog{
  
	  &.loading{
  
		  .login-close,
		  .login-content,
		  #login-form{
  
			  display:none;
  
		  }
  
		  .login-loading{
  
			  display:block;
  
		  }
  
	  }
  
  }
  
  .login-close{
  
	  position:absolute;
	  top:16px;
	  right:16px;
  
	  width:36px;
	  height:36px;
  
	  padding:0;
  
	  display:grid;
	  place-items:center;
  
	  border:none;
	  border-radius:50%;
  
	  background:none;
  
	  color:var(--colour-text-light);
  
	  font-size:1.5rem;
	  line-height:1;
  
	  cursor:pointer;
  
	  transition:background-color .2s;
  
	  &:hover{
  
		  background:var(--colour-surface-alt);
  
	  }
  
  }
  
  .button-secondary{
  
	  background:transparent;
	  color:var(--colour-primary);
  
	  border:1px solid rgb(var(--colour-primary-rgb) / .25);
  
	  &:hover{
  
		  background:rgb(var(--colour-primary-rgb) / .08);
		  color:var(--colour-primary);
  
	  }
  
  }
  
  @media (max-width:720px){
  
	  .login-dialog{
  
		  padding:30px;
  
		  .login-buttons{
  
			  flex-direction:column-reverse;
  
			  button{
  
				  width:100%;
  
			  }
  
		  }
  
	  }
  
  } 

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:720px){

	header{

		& .container{
			flex-direction:column;
			gap:20px;
		}
	}

	.hero{

		& h2{
			font-size:2.2rem;
		}

		& .hero-overlay{
			padding:40px;
		}
	}
	
	.gallery{
		grid-template-columns:1fr;
		grid-template-rows:auto;
		gap:30px;
		& figure:first-child{
			grid-row:auto;
		}
		& img{
			height:auto;
		}
	}

	.founder{
		grid-template-columns:1fr;
	}
}