@charset "UTF-8";
/* CSS Document */
body{
	font-family: "DM Mono", monospace;
}

header{
	font-family: "Jost", sans-serif;
	text-transform: uppercase;
	font-size: 20px;
}

main{

}

footer{

}

video{
     max-height: 100%;
     max-width: 100%;
     display: flex;
}

.navbar{
	background-color: #DDDDDD;
}

.nav-item{
}

.nav-link{
	color: #621516;
}

.nav-link:hover{
	color: #c02426;
}

@keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }


    /* ── Left column ── */
    .left-col { padding-right: 2.5rem; }

    .greeting {
      font-family: "Jost", sans-serif;
      font-size: 48px;
      color: #621516;
      line-height: 1.1;
	  margin-top: 3.5rem;
      margin-bottom: 0;
    }

    .divider {
      border: none;
      border-top: 2.5px solid #621516;
      margin: 1.5rem 0 1.5rem;
      opacity: 1;
      width: 75%;
    }

    .section-label {
      font-family: "Jost", sans-serif;
      font-weight: 500;
      font-size: 36px;
      text-transform: uppercase;
      color: #621516;
      margin-bottom: 0.9rem;
    }

    .bio-text {
      font-family: "DM Mono", monospace;
      font-size: 18px;
      line-height: 1.75;
      color: #c02426;
    }

    .resume-link {
      display: inline-block;
      margin-top: 1.6rem;
      font-family: "DM Mono", monospace;
      font-size: 20px;
      color: #621516;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.2s, letter-spacing 0.2s;
    }

    .resume-link:hover {
      color: #c02426;
      letter-spacing: 0.04em;
    }

    .divider-bottom {
      border: none;
      border-top: 2.5px solid #621516;
      margin-top: 2.5rem;
      opacity: 1;
      width: 75%;
    }


    /* ── Photo ── */
    .photo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeUp 0.7s 0.15s ease both;
    }

    .photo-wrap img {
      width: 100%;
      max-width: 380px;
      border-radius: 18px;
      object-fit: cover;
      aspect-ratio: 3/3.6;
      box-shadow: 0 12px 40px rgba(107, 20, 20, 0.14);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .photo-wrap img:hover {
      transform: scale(1.02);
      box-shadow: 0 20px 55px rgba(107, 20, 20, 0.2);
    }


/* ── WORK ── */
.work-title { 
	font-family: "Jost", sans-serif; 
	font-size: clamp(2rem,4vw,2.8rem); 
	color: #621516; 
	text-align: center; 
	padding: 3rem 0 1.5rem;
}

.work-frame {
    background: #621516;
    padding: 2.5rem;
    position: relative;
}


/* Decorative side lines */
.work-frame::before, .work-frame::after {
    content: ''; 
	position: absolute;
	width: 2px;
	height: 140px;
    background: rgba(255,255,255,0.5);
}

.work-frame::before {
	left: 28px; 
	top: 45%;
	transform: translateY(-50%);
}
.work-frame::after {
	right: 28px;
	top: 60%;
	transform: translateY(-50%);
}

.project_style{
	font-family: "DM Mono", monospace;
	text-align: center;
}
.project_style ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.project_style li{
	width: 50%;
	float: left;
}

.project_style img{
	width: 100%;
	background-color: rgba(120,120,120,0.75);
	border-radius: 10px;
	border: double 1px rgba(126,126,126,0.5);
}

.subhead{
	margin: 25px;
	font-family: "DM Mono", monospace;
	font-size: 24px;
	color: #621516;
	text-align: left;
}

.proj_descr{
	margin: 25px;
	width: 75%;
	font-family: "DM Mono", monospace;
	font-size: 20px;
	color: #c02426;
	text-align: left;
}

.back_button{
	display: inline-block;
    margin-top: 1.6rem;
    font-family: "DM Mono", monospace;
    font-size: 1rem;
    color: #621516;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s, letter-spacing 0.2s;
}

.back_button:hover {
      color: #c02426;
      letter-spacing: 0.04em;
    }


/* 3×3 grid */
.work-grid {
    display: grid;
	grid-template-columns: repeat(3, auto);
}

.work-item {
    position: relative;
	display: flex;
	overflow: hidden;
	cursor: pointer;
    aspect-ratio: 1 / 1;
	background: #d0d0d0;
    border: 2px solid #c02426;
}

.work-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.work-item .overlay {
    position: absolute; inset: 0;
    background: rgba(74,13,13,0.84);
    display: flex; 
	flex-direction: column;
	align-items: center;
	justify-content: center;
    opacity: 0;
	transition: opacity 0.35s ease;
	padding: 1rem;
	text-align: center;
}

.work-item:hover img      { transform: scale(1.08); }
.work-item:hover .overlay { opacity: 1; }
.overlay-title { font-family: var(--serif); font-size: 1.1rem; color: #fff; margin-bottom: 0.3rem; }
.overlay-sub   { font-family: var(--mono); font-size: 0.7rem; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.9rem; }
.overlay-btn   { font-family: var(--mono); font-size: 0.75rem; color: var(--maroon-dark); background: #fff; border: none; padding: 0.35rem 1rem; border-radius: 3px; cursor: pointer; transition: background 0.2s; }
.overlay-btn:hover { background: #f0d0d0; }

.frame-line { display: block; height: 2px; background: rgba(255,255,255,0.5); }
.frame-line.top    { width: 55%; margin: 0 auto 1.4rem auto; }
.frame-line.bottom { width: 42%; margin: 1.4rem 0 0 0; }

    /* ── Modal ── */
.modal-header { border-bottom: 2px solid var(--maroon); }
.modal-title  { font-family: var(--serif); color: var(--maroon); }
.modal-body img { width: 100%; border-radius: 8px; margin-bottom: 1rem; }
.modal-body p   { font-family: var(--mono); font-size: 0.85rem; color: #c02426; }



.jumbocap{
	font-family: "Jost", sans-serif;
	text-shadow: 2px 2px 8px #000000;
}

.cap_sub{
	font-family: "Jost", sans-serif;
	text-shadow: 1px 1px 6px #000000;
}

 .divider{
    height: 4px;
    width: 250px;
    background-color: #621516;
}

.section-title{
	font-family: "Jost", sans-serif;
	font-weight: 600;
	font-size: 42px;
    letter-spacing: 2px;
    color: #4f666d;
}

.section-subtitle{
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 30px;
    letter-spacing: 2px;
    color: #4f666d;
}

.hero-title{
	font-family: "Jost", sans-serif;
	font-transform: uppercase;
	color: #621516;
	font-weight: 800;
}

.desat{
	filter: grayscale(50%);
}

.desat:hover{
	filter: grayscale(0%);
	transition: .25s ease-in;
}

.bi_clr{
	color: #474747;
	font-size: 24px;
}

.bi_clr:hover{
	color: #c02426;
}

.cust_card{
	font-family: "Barlow", sans-serif;
	font-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 2px 2px 8px #000000;
	text-decoration: none;
}

/*Hover Blur Effect*/
.hover-white {
      color: #fff;
    }
    .hover-blur a {
      display: block;
      position: relative;
      overflow: hidden;
    }
    .hover-blur img {
      width: 100%;
      height: auto;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
    .hover-blur:hover img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
      -webkit-filter: grayscale(0.6) blur(1px);
      filter: grayscale(0.6) blur(1px);
    }
    .hover-blur a h2 {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 0px;
      margin-bottom: 0px;
      height: 100%;
      width: 100%;
      padding: 45% 20px;
      text-align: center;
      background-color: rgba(0,0,0,0.5);
      /*background dotted*/
      background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
      background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
      background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
      background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
      -webkit-background-size: 3px 3px;
      -moz-background-size: 3px 3px;
      background-size: 3px 3px;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .hover-blur:hover a h2 {
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
    .hover-blur .text-white {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .hover-blur:hover .text-white {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
      filter: alpha(opacity=1);
      opacity: 1;
    }
/*End Hover Blur Effect*/