/* Reset and Base Styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{
 --midnight-purple:#1a0b2e;
 --midnight-purple-dark:#0f0519;
 --midnight-purple-light:#2d1b4e;
 --purple-accent:#7c3aed;
 --purple-accent-light:#a78bfa;
 --purple-accent-dark:#5b21b6;
 --purple-glow:#9333ea;
 --text-primary:#fff;
 --text-secondary:#e9d5ff;
 --text-muted:#c4b5fd;
 --bg-primary:var(--midnight-purple);
 --bg-secondary:var(--midnight-purple-light);
 --bg-card:rgba(45,27,78,0.6);
 --shadow-md:0 4px 16px rgba(124,58,237,0.2);
 --shadow-lg:0 8px 32px rgba(124,58,237,0.3);
 --shadow-glow:0 0 20px rgba(147,51,234,0.5);
 --transition:all .3s cubic-bezier(.4,0,.2,1)
}
html{scroll-behavior:smooth}
body{
 font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
 line-height:1.6;
 color:var(--text-primary);
 background:linear-gradient(180deg,var(--midnight-purple-dark),var(--midnight-purple),var(--midnight-purple-light));
 background-attachment:fixed;
 overflow-x:hidden;
 min-height:100vh;
}
body::before{
 content:'';
 position:fixed;inset:0;
 background-image:
  radial-gradient(circle at 20% 50%,rgba(147,51,234,.1) 0,transparent 50%),
  radial-gradient(circle at 80% 80%,rgba(124,58,237,.1) 0,transparent 50%),
  radial-gradient(circle at 40% 20%,rgba(167,139,250,.08) 0,transparent 50%);
 pointer-events:none;z-index:0
}
.container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}

/* Nav */
.navbar{
 position:fixed;top:0;left:0;right:0;
 background:rgba(26,11,46,.8);
 backdrop-filter:blur(20px);
 box-shadow:var(--shadow-md);
 z-index:1000;
 border-bottom:1px solid rgba(124,58,237,.2);
}
.nav-container{
 max-width:1200px;margin:0 auto;
 padding:1.25rem 2rem;
 display:flex;justify-content:space-between;align-items:center
}
.nav-logo a{
 font-size:1.5rem;font-weight:700;
 background:linear-gradient(135deg,var(--purple-accent-light),#fff);
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;
 text-decoration:none;transition:var(--transition)
}
.nav-logo a:hover{transform:translateY(-1px);text-shadow:0 0 12px rgba(167,139,250,.7)}
.nav-menu{display:flex;list-style:none;gap:2.5rem}
.nav-link{
 color:var(--text-secondary);
 text-decoration:none;font-weight:500;
 font-size:.95rem;position:relative;
 transition:var(--transition)
}
.nav-link::after{
 content:'';position:absolute;bottom:-5px;left:0;
 width:0;height:2px;
 background:linear-gradient(90deg,var(--purple-accent),var(--purple-accent-light));
 border-radius:2px;transition:var(--transition)
}
.nav-link:hover{color:var(--text-primary);text-shadow:0 0 8px rgba(167,139,250,.5)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:var(--text-primary)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:25px;height:3px;background:#fff;border-radius:2px;transition:var(--transition)}

/* Hero */
.hero{
 min-height:100vh;display:flex;flex-direction:column;
 justify-content:center;align-items:center;
 text-align:center;padding:8rem 2rem 4rem;
 position:relative;overflow:hidden;z-index:1
}
.hero::before{
 content:'';position:absolute;inset:0;
 background:
  radial-gradient(circle at 30% 30%,rgba(147,51,234,.2) 0,transparent 50%),
  radial-gradient(circle at 70% 70%,rgba(124,58,237,.15) 0,transparent 50%);
 z-index:-1
}
.hero-content{max-width:900px}
.hero-title{
 font-size:clamp(2.5rem,6vw,5rem);font-weight:700;
 margin-bottom:1.5rem;line-height:1.2
}
.greeting{
 display:block;font-size:clamp(1.25rem,3vw,1.75rem);
 font-weight:300;margin-bottom:.75rem;color:var(--text-secondary);letter-spacing:2px
}
.name{
 display:block;
 background:linear-gradient(135deg,#fff,var(--purple-accent-light),#fff);
 background-size:200% auto;
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;
 animation:shimmer 3s ease-in-out infinite
}
@keyframes shimmer{0%,100%{background-position:0% center}50%{background-position:200% center}}
.hero-subtitle{
 font-size:clamp(1.1rem,2.5vw,1.75rem);
 margin-bottom:3rem;color:var(--text-secondary);font-weight:300
}

/* Sections */
section{padding:6rem 0;position:relative;z-index:1}
.section-title{
 font-size:clamp(2.25rem,5vw,3.5rem);font-weight:700;text-align:center;
 margin-bottom:4rem;position:relative;
 background:linear-gradient(135deg,#fff,var(--purple-accent-light));
 -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.section-title::after{
 content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
 width:80px;height:4px;border-radius:2px;
 background:linear-gradient(90deg,var(--purple-accent),var(--purple-accent-light));
 box-shadow:0 0 10px var(--purple-glow)
}

/* Projects (index) */
.projects{background:rgba(15,5,25,.4);backdrop-filter:blur(10px)}
.projects-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
 gap:2.5rem
}
.project-card{
 background:var(--bg-card);border-radius:1.25rem;
 overflow:hidden;box-shadow:var(--shadow-md);
 border:1px solid rgba(124,58,237,.2);
 transition:var(--transition);position:relative
}
.project-card:hover{
 transform:translateY(-8px);box-shadow:var(--shadow-glow);
 border-color:rgba(124,58,237,.4)
}
.project-image{
 height:220px;background:linear-gradient(135deg,var(--purple-accent),var(--purple-accent-dark));
 display:flex;align-items:center;justify-content:center;color:#fff
}
.project-content{padding:2rem}
.project-title{font-size:1.5rem;margin-bottom:1rem}
.project-description{color:var(--text-secondary);margin-bottom:1.5rem}

/* Skills (index) */
.skills-grid{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.5rem
}
.skill-category{
 background:var(--bg-card);border-radius:1.25rem;
 padding:2.5rem;border:1px solid rgba(124,58,237,.2);
 box-shadow:var(--shadow-md);transition:var(--transition)
}
.skill-category:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.4)}
.skill-category-title{font-size:1.5rem;margin-bottom:1.5rem}
.skill-items{display:flex;flex-wrap:wrap;gap:1rem}

/* Contact / Footer */
.contact{background:rgba(15,5,25,.4);backdrop-filter:blur(10px)}
.contact-description{
 text-align:center;font-size:1.2rem;color:var(--text-secondary);
 max-width:700px;margin:0 auto 3rem
}
.footer{
 background:var(--midnight-purple-dark);
 color:var(--text-secondary);
 text-align:center;padding:2rem 0;
 border-top:1px solid rgba(124,58,237,.2)
}

/* ---- Portfolio Page Core Styles ---- */

/* Base section backgrounds for portfolio */
.portfolio-section {
  padding: 4rem 0;
  background: radial-gradient(circle at top left,
      rgba(155, 93, 229, 0.16),
      transparent 55%);
}

.portfolio-section:nth-of-type(even) {
  background: radial-gradient(circle at top right,
      rgba(248, 150, 255, 0.16),
      transparent 55%);
}

/* Cover letter text block */
.portfolio-section .text-block {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(13, 10, 24, 0.85);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(155, 93, 229, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.portfolio-section .text-block p + p {
  margin-top: 1.1rem;
}

/* Letter card */

.letter-card {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(13, 10, 24, 0.9);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(248, 150, 255, 0.35);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

.letter-meta {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.letter-date {
  text-align: right;
}

.letter-body p + p {
  margin-top: 1rem;
}

/* New Text / genre card */

.genre-card {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(13, 10, 24, 0.9);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(94, 234, 212, 0.35);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

.genre-header {
  margin-bottom: 1.25rem;
}

.genre-title {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  color: var(--text-primary);
}

.genre-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.genre-body p + p {
  margin-top: 1rem;
}

.genre-footer {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 0.85rem;
}

.genre-sources-note {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Photo essay section */

.photos {
  padding: 4rem 0;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.photo-card {
  background: rgba(13, 10, 24, 0.9);
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.photo-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.photo-content {
  padding: 1.5rem 1.5rem 1.75rem;
}

.photo-title {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.photo-content p + p {
  margin-top: 0.9rem;
}

/* Collage gallery (inside New Text) */

.collage-grid {
  /* Uses same card style as photo-grid but tuned for gallery */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.collage-grid .photo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.collage-grid .photo-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.collage-grid .photo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.collage-grid .photo-card:hover .photo-image img {
  transform: scale(1.06);
}

.collage-grid .photo-content {
  padding: 1.5rem 1.5rem 1.75rem;
}

/* Label connecting gallery to essay references */
.photo-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.collage-grid .photo-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Other authors' texts / sources */

.source-card .source-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* Works cited */

.works-card {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(13, 10, 24, 0.9);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

.works-note {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.works-list {
  padding-left: 1.25rem;
  line-height: 1.7;
}

.works-list li + li {
  margin-top: 0.35rem;
}

/* Responsive */
@media(max-width:768px){
 .nav-menu{
  position:fixed;left:-100%;top:70px;flex-direction:column;
  background:rgba(26,11,46,.95);backdrop-filter:blur(20px);
  width:100%;text-align:center;padding:2rem 0;
  transition:var(--transition)
 }
 .nav-menu.active{left:0}
 .hamburger{display:flex}
 .photo-grid,
 .collage-grid{
  grid-template-columns:1fr;
 }
 .letter-meta{flex-direction:column;text-align:left}
 .letter-date{text-align:left}
}