@charset "UTF-8";
/* CSS Document */

/*===================
BASELINE STYLES
======================*/
*{ box-sizing: border-box; }
	
html { overflow-anchor: none; }
/* Ensure the page can scroll vertically on mobile / baseline */
html, body {
	height: auto;
	min-height: 100%;
	overflow-x: hidden; 
	scroll-behavior: smooth;
	margin:0; 
	font-family:"DM Serif Text",serif;	
	line-height:1.6;
	color:rgb(100,50,50);
}
	
h1, h2, h3, h4, h5, h6 {margin: 0 0 5% 0;}

/*=========================
FLEX PANEL STYLES
=========================*/
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
.flex-line-break{width:100%;height:0px;margin:0;padding:0;}

/*======================
NAVBAR
========================*/
.navbar{
	position: fixed;      /* stays pinned to viewport */
	top: 0;
	left: 0;
	width: 100%;          /* safer than 100vw */
	text-align: center;
	z-index: 9999;        /* on top of everything */
	background: rgba(240, 190, 190, .9); /* optional backdrop */
	backdrop-filter: blur(8px);        /* optional polish */
	border-radius: 0 0 20% 20%;
	padding:2% 0 3% 0;
	box-shadow: inset 0 -10px 10px -8px rgba(100,50,50,.3);
}
/* Base navbar link style */
.navbar a {
	font-size:1.2em;
	color: white;                       /* always white text */
	text-decoration: none;              /* no underline */
	padding: 0rem 0.5rem 0.75rem 0.5rem;           /* some spacing */
	border-radius: 0;              /* rounded look (optional) */
	transition: background 0.3s ease, color 0.3s ease;
	}
/* Gradient background on hover */
.navbar a:hover {
background:linear-gradient(
  to bottom,
  rgba(87, 41, 3, .2) 40%,      /* top */
  rgba(240, 190, 190, .3) 80%,      /* top */
  rgba(240, 190, 190, 0) 100%   /* bottom */
	);
  color: white;                       /* stay white on hover */
}

/*=========================================
DEFAULT PANEL STYLES
===========================================*/	
.home,.bio,.socials,.reels,.contact{}
.bio,.socials,.reels,.contact{
	width:100%;
	padding-top:10%;
	background:linear-gradient(180deg,#f7dde3 30%,#fdeeee 100%);
	overflow: auto;
}

/*=========================
POLAROID DEFAULTS
==========================*/
.polaroid{
	display: block;
	width:80%;
	background-color: white;
	box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.10);
	border:10px solid white;
	border-radius: 8px;
	padding:0;
	margin:5% auto;
}

.polaroid-img{
	width:100%;
	height:30vh;
	margin:0 auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-color:#ccc;
}

.polaroid-caption{
	text-align: center;
}

.polaroid-icon , .polaroid-text{
	display: inline-block;
}

.polaroid-text{
	font-family: "Corinthia",cursive;
	font-size:2em;
	color: rgb(100,50,50);
	text-decoration: none;
}

	
/*=======================
HOME PANEL
========================*/
.home{
	height:100vh;
	width:100vw;
	background: url('../images/KTCornMazeSunset.jpg') no-repeat 50% 50% / cover;
	box-shadow: inset 0 -10px 30px -8px rgba(0,0,0,.5);
	}
	
.home-title{	
	padding-top:50vh;
	font-family: "Corinthia",cursive;
	color:#fff;
	font-weight: 700;
	width: 100vw;
  margin: 0 auto;
  text-align: center;
	}
	
.home-title h3 {
 white-space: nowrap;     /* keep the two words on one line */
  line-height: 1;
  font-size: clamp(24px, 20vw, 250px);
  padding: 0 1vw;
	}
	
.bio-title,.socials-title,.reels-title{
	font-family: "Corinthia",cursive;
	font-size:4em;
	color: rgba(255,255,255,1);
	line-height: 0.5;
	text-align: center;
	
}

/*=========================
BIO PANEL
===========================*/
/*Circle headshot image appears instead of a polaroid on mobile*/	
.bio-headshot{
	width:30%;
	aspect-ratio: 1 / 1;  /* height always equals width */
	border:5px solid white;
	border-radius:100%;
	background: url('../images/KTHeadshot1.jpg') no-repeat 50% 20% / cover;
	}	
/*Bio polaroid is hidden on mobile using the hide class below*/
.bio-polaroid-img{background: url('../images/KTHeadshot1.jpg') no-repeat 50% 50% / cover;}
	
.bio-title{align-self: center;}

.bio-text{width:100%;padding:5%;}	

/*============================
SOCIALS PANEL
=============================*/
/*Sets each image separtely on the polaroids*/	
.yt-polaroid-img{background-image: url('../images/KTNetflixPremiere.jpg');background-position: 100% 0%;}
.ig-polaroid-img{background-image: url('../images/KTHoco.jpg');background-position: 50% 20%;}
.tt-polaroid-img{background-image: url('../images/KTHairCare.jpg');background-position: 50% 30%;}
	
	
/*============================
REELS PANEL
=============================*/	
.reels-title{width:100%}
.youtube-embed {
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.10);
  border-radius: 8px;
	border:15px solid #fff;
  width: min(720px, 95%);  /* never exceed 720px, shrink on smaller screens */
  aspect-ratio: 16 / 9;     /* maintain 16:9 proportion */
  display: block;
	margin:5% 0;
}

	
/*============================
CONTACT PANEL
=============================*/	
.contact-headshot{
	width:30%;
	aspect-ratio: 1 / 1;  /* height always equals width */
	border:5px solid white;
	border-radius:100%;
	background: url('../images/KTHeadshot2.jpg') no-repeat 50% 0% / cover;
	}	

.contact-polaroid-img{background: url('../images/KTHeadshot2.jpg') no-repeat 50% 50% / cover;}	

.contact-title{
	font-family: "Corinthia",cursive;
	font-size:3em;
	color: rgba(255,255,255,1);
	line-height: 0.5;
	align-self: center;
	padding-left: 3%;
}

.contact-text{width:100%;padding:5%;text-align: center}	
	

/*========================
HERO IMAGES
========================*/	
.hero1{height:40vh;width:100vw;background: url('../images/KTPRBeach.jpg') no-repeat 50% 50% / cover;}
.hero2{height:40vh;width:100vw;background: url('../images/KTPennStationBridge.webp') no-repeat 50% 90% / cover;}
.hero3{height:40vh;width:100vw;background: url('../images/KTLincolnCtrStairs.jpg') no-repeat 50% 50% / cover;}
.hero4{height:40vh;width:100vw;background: url('../images/KTSmilingNYCStreet.webp') no-repeat 50% 50% / cover;}

/*Wrapper adds ragged edge png images above and below hero image divs*/	
.hero-wrap{position: relative;	overflow: hidden;}	

.hero-wrap::before, .hero-wrap-last::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 0;
  width: 100%;
  height: auto;
 aspect-ratio: 1920 / 230; /* use your image’s width/height */
  background: url('../images/pink-top.png') no-repeat top center / contain;
  pointer-events: none;                  /* makes it ignore mouse clicks */
}
.hero-wrap::after {
  content: "";
  position: absolute;
  bottom: -4%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 230;
  background: url('../images/pink-bottom2.png') no-repeat bottom center / contain;
  pointer-events: none;
}
/*Last hero only has ragged edge png ../images below*/	
.hero-wrap-last{position: relative;	overflow: hidden;}	

/*====================
SVG ICONS
=====================*/
.home-icon{
  display:inline-block;
  transform:translateY(3px);
  height:26px;
  width:26px;
}
.youtube-svg-icon {
  display: inline-block;      /* makes alignment predictable */
  line-height: 0;             /* removes extra inline space */
  vertical-align: -15px;     /* adjust up/down: negative lifts it up */
  padding:0 0 0 10px;	

}
.youtube-svg-icon svg {
  width: 40px;
  height: auto;
  display: block;             /* prevents internal descender space */
	color:rgb(150,0,0);
}
.tiktok-svg-icon {
  display: inline-block;      /* makes alignment predictable */
  line-height: 0;             /* removes extra inline space */
  vertical-align: -8px;     /* adjust up/down: negative lifts it up */
  padding:0 0 0 10px;	
}
.tiktok-svg-icon svg {
  width: 30px;
  height: auto;
  display: block;             /* prevents internal descender space */
	color:rgb(150,0,0);
}
.insta-svg-icon {
  display: inline-block;      /* makes alignment predictable */
  line-height: 0;             /* removes extra inline space */
  vertical-align: -8px;     /* adjust up/down: negative lifts it up */
  padding:0 0 0 10px;	
}
.insta-svg-icon svg {
  width: 30px;
  height: auto;
  display: block;             /* prevents internal descender space */
	color:rgb(150,0,0);
}	
		
	

/*HIDE Bio and Contact polaroid DIVs on mobile*/
.hide{display:none;}	
 

	
	
	
/*===========================
-----------------------------	
DESKTOP BREAKPOINT STYLES
-----------------------------
=============================*/	
@media (min-width: 960px) {

	/*NAVBAR*/
	.navbar{padding:.7% 0px;}
	.navbar a{font-size:1.5em;padding: 0.75rem 1.25rem;}
	
	/*HOME PANEL*/
		
	/*BIO PANEL*/
	.bio{min-height:100vh;max-width: 100vw; padding-top:0;overflow-x: hidden;;justify-content: space-between}
	.bio-headshot{display:none;}
	.bio-polaroid{width:20%;height:350px;margin-top:7%}
	.bio-polaroid-img{background-position: 50% 10%;height:275px;}
	.bio-text{width:45%;margin-top:2%}
	.bio-title{padding:0;margin:0;font-size:6em;text-align: left}
	
	/*SOCIALS PANEL*/
	.socials{min-height:100vh;max-width: 100vw;overflow-x: hidden; padding-top:5%;padding-bottom:5%}
	.socials-title{width:100%;font-size: 6em;line-height: normal;margin:0}
	.socials-polaroids{width:100%}	
	.yt-polaroid{width:25%;min-height:350px;margin:0}
	.ig-polaroid{width:25%;min-height:350px;margin:0 20px}
	.tt-polaroid{width:25%;min-height:350px;margin:0}
	.yt-polaroid-img{width:100%;height:400px!important}
	.ig-polaroid-img{width:100%;height:400px!important}
	.tt-polaroid-img{width:100%;height:400px!important}
	
	
	/*REELS PANEL*/
	.reels{width:100%;max-width: 100vw;overflow-x: hidden; margin:0;padding:0;justify-content: space-between}
	.reels-title{padding:0;margin:5% auto;font-size:6em;}
	.youtube-embed-wrap{width:60%;overflow-x: hidden;padding:2% 5%;text-align: center;}
	.youtube-embed{ 
		width: min(720px, 100%);  /* never exceed 720px, shrink on smaller screens */
		aspect-ratio: 16 / 9;     /* maintain 16:9 proportion */
		margin:0 auto;
	}


	/*CONTACT PANEL*/
	.contact{width:100%;max-width: 100vw;overflow-x: hidden; margin:0;padding:0;justify-content: space-between}
	.contact-headshot{display:none;}
	.contact-polaroid{width:20%;height:350px;margin-top:7%}
	.contact-polaroid-img{background-position: 50% 10%;height:275px;}
	.contact-text{width:45%}
	
	/*POLAROIDS*/
	.polaroid-img{height:275px;}
	
	/*HERO IMAGES*/
	.hero1{width:30vw;height:100vh;background-position: 50% 100%}
	.hero2{display: none;}
	.hero3{width:30vw;height:100vh;background: url('../images/KTPennStationBridge.webp') no-repeat 50% 90% / cover;}
	.hero4{width:30vw;height:100vh;background-position: 50% 100%}

	
	/*SHOW HIDDEN POLAROIDS ON DESKTOP*/
	.hide{display:block;}
	
}