/* ---------------------------------
   Index / Home (scoped + fluid)
   --------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap');

/* Base reset (no global font to avoid surprises) */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

:root{
  --ink:#2F4F4F;
  --rule:#4A4A4A;
  --text:#333;
  --link:#774b4b;
  --link-hover:#2E8B57;
  --bg:#f4f4f4;
}

/* Section fade-in utility */
.section{ opacity:0; transform:translateY(30px); transition:opacity .6s ease-out, transform .6s ease-out; }
.section.visible{ opacity:1; transform:translateY(0); }

body{
  background-color:var(--bg);
  margin:80px 0 0 0;
  font-family:"EB Garamond","Playfair Display",serif;
  color:var(--text);
  line-height:1.6;
}

/* Nav / Banner */
nav{
  background:#111;
  display:flex;
  flex-wrap:wrap;
  padding:5px;
  position:fixed; top:0; z-index:10; width:100%;
}

.banner_tab a{
  text-decoration:none; color:#fff; display:block; white-space:nowrap;
  padding:1vw; font-size:clamp(.9rem,2vw,1.1rem); text-align:center;
  transition:background-color .3s ease, color .3s ease, transform .3s ease;
}
.banner_tab a:hover{ font-weight:700; color:#fff; background:#4A4A4A; transform:scale(1.15); }
.banner_tab a:active{ color:#000; background:#2A2A2A; }

nav li{
  font-size:clamp(1rem,2vw,1.2rem);
  font-family:"Playfair Display",Georgia,serif;
  display:inline-block; text-align:center; color:#fff;
  margin:1vw; background:#111; line-height:30px;
}

/* Typography */
h1,h2{ font-family:"Playfair Display",serif; color:var(--ink); font-weight:700; }
h1{
  font-size:clamp(2rem,6vw,3.25rem);
  margin:2vw 0 1vw 2vw;
  letter-spacing:clamp(1px,.5vw,6px);
}
h2{
  font-size:clamp(1.5rem,4.2vw,2.5rem);
  margin:2vw 0; text-align:center;
  border-bottom:3px solid var(--rule); padding-bottom:.35rem;
}

p, li{ font-family:"EB Garamond","Playfair Display",serif; color:var(--text); }
a{ font-weight:500; transition:color .3s ease; color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }

/* Layout */
.nav-links{
  display:flex; justify-content:space-around; align-items:center;
  flex-wrap:nowrap; width:100%; margin:0 auto; padding:0; overflow:hidden;
}
.nav-links li{ flex-grow:0; text-align:center; padding:10px 15px; min-width:40px; }

.hamburger{ display:none; font-size:30px; cursor:pointer; color:#fff; padding:20px; }

/* Containers */
.container{
  width:90%; max-width:3500px; margin:0 auto; background:var(--bg);
  padding:10px 30px; display:flex; flex-direction:column; align-items:center;
  background-image:url('/resources/images/triangle_background.jpg');
  background-size:cover; background-attachment:fixed; background-position:center; background-blend-mode:color-dodge;
}

/* Hero blocks */
.hero{
  background-image:url('/resources/images/triangle_background.jpg');
  background-blend-mode:color-dodge; background-size:cover; background-attachment:fixed; background-position:center;
  height:80vh; display:flex; justify-content:center; align-items:center; text-align:center; color:#fff; z-index:10; flex-direction:column;
}
.hero h1{
  color:#fff; font-family:"Playfair Display",Georgia,serif; text-shadow:#2A2A2A 5px 5px;
  word-spacing:10px; letter-spacing:8px; font-size:clamp(2.2rem,10vw,4rem);
  opacity:0; animation:fadeIn 2s ease-in forwards;
}
.hero p{
  color:#fff; font-family:"Playfair Display",serif; text-shadow:#2A2A2A 3px 3px;
  font-size:clamp(1rem,3.5vw,1.3rem); line-height:1.5; opacity:0; animation:fadeIn 3s ease-in forwards;
}

@keyframes fadeIn{ to{ opacity:1; } }

/* Intro / second hero */
.intro p{ font-size:clamp(1rem,5vw,1.25rem); }

.intro h3,
#professional-journey h2,
#professional-journey h3,
.personal-interests h2,
.personal-interests h3,
.values-vision h2,
.values-vision h3{
  font-family:"Playfair Display",serif; color:var(--ink); font-weight:600;
}

.intro h3,
#professional-journey h3,
.personal-interests h3,
.values-vision h3{
  font-size:clamp(1.25rem,3.2vw,2rem);
  margin:1.25rem 0; text-align:center; border-bottom:3px solid var(--rule); padding-bottom:.35rem;
}

#professional-journey h2,
.personal-interests h2,
.values-vision h2{
  font-size:clamp(1.5rem,3.8vw,2.4rem);
  text-align:center; margin:1.25rem 0;
}

#second-hero{ z-index:9; }
#second-hero p{
  margin:2vw; color:#fff; text-shadow:#2A2A2A 3px 3px;
  line-height:1.5; font-size:clamp(1rem,3vw,1.2rem); padding:5vw;
}
#second-hero a{
  text-decoration:none; color:#fff;
  background-color:rgba(255,255,255,.2);
  background-image:url('/resources/images/triangle_background.jpg');
  background-blend-mode:overlay;
  padding:1vw 1.5vw; font-family:"Playfair Display",serif;
  font-size:clamp(1.1rem,7.5vw,2rem); letter-spacing:.2vw; border-radius:10px;
  text-shadow:#000 2px 2px; transition:background-color .3s ease, box-shadow .3s ease;
  box-shadow:0 8px 10px rgba(0,0,0,.5);
}
#second-hero a:hover{ background-color:rgba(255,255,255,.3); color:#A9DAB3; box-shadow:0 12px 16px rgba(0,0,0,.7); }
#second-hero a:active{ color:#2E8B57; background-color:rgba(255,255,255,.4); transform:translateY(3px); box-shadow:0 6px 8px rgba(0,0,0,.4); }

/* Breaks */
#break, #break2{
  background-image:url('/resources/images/triangle_background.jpg');
  background-size:cover; background-attachment:fixed; background-position:center;
  margin:0; display:flex; justify-content:center; align-items:center; text-align:center; z-index:9;
}
#break{ height:80vh; }
#break2{ width:100vw; height:15vw; padding:10px 30px; }
#break2 .text p{ visibility:hidden; }

/* Personal interests text (fix leaking selector) */
.personal-interests p,
.personal-interests figcaption{
  font-family:"EB Garamond","Playfair Display",serif;
  line-height:1.5; font-size:clamp(1rem,4vw,1.125rem); color:var(--text);
}
.personal-interests a{ text-decoration:none; font-weight:700; color:var(--link); }
.personal-interests a:hover{ color:var(--link-hover); }

/* Responsive nav / images */
@media (max-width:768px){
  .nav-links{ flex-direction:column; position:absolute; top:50px; max-height:0; right:0; opacity:0; background:#111; width:100%; transition:max-height .3s ease-in-out; text-align:center; }
  .nav-links.active{ transform:translateY(2vh); max-height:60vh; opacity:1; }
  .hamburger{ display:block; }
  .nav-links li a{ font-size:clamp(1rem,4vw,1.1rem); }
  .hero, #second-hero, #break{ background-attachment:scroll; background-size:contain; background-position:center top; }
  img{ max-width:100%; height:auto; display:block; margin:2vh auto; }
}
@media (min-width:768px){
  .nav-links{ display:flex; flex-direction:row; justify-content:space-around; width:100%; }
  .nav-links li{ flex-grow:1; }
  .container{ flex-grow:1; }
  img{ max-width:80%; height:auto; }
}

/* Utility */
figcaption{ text-align:center; color:#2A2A2A; }
#profile img{ width:100%; max-width:300px; height:auto; margin:0 auto; text-align:center; }