@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');

:root { 
  --bg:#1f1f1f; 
  --card:#131313; 
  --muted:#9fb0c3; 
  --text:#eaf2f9; 
  --accent:#cb3b13; 
  --ring:#cb3b13; 
}

/* Light theme variables */
[data-theme="light"] {
  --bg: #fafafa;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #1f2937;
  --accent: #f8b749;
  --ring: #f8b749;
}

*{
  box-sizing:border-box
}

html,body{
  margin:0;
  height:100%
}

body{
  font-family:"Helvetica-Neue",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6
}

a{
  color:var(--accent);
  text-decoration:none
} 

a:hover{
  text-decoration:underline
}

.wrap{
  max-width:960px;
  margin:0 auto;
  padding:32px
}

header{
  position: relative;
  margin-bottom: 32px;
}

.top-nav{
  position: absolute;
  top: 0;
  right: 0;
}

.nav-controls{
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-header{
  text-align: left;
}

.profile-name{
  /* font-family: 'Playfair Display', Georgia, serif; */
  font-family:"Helvetica-Neue",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 500;
  /* font-style: italic; */
  margin: 0 0 12px 0;
  line-height: 1.1;
}

.profile-intro{
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  align-items: stretch;
  background: var(--card);
  border: 1px solid #1b2430;
  border-radius: 16px;
  padding: 18px;
}

[data-theme="light"] .profile-intro{
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .profile-intro {
    flex-direction: column;
    align-items: center;
  }

  .intro-text {
    width: 100%;
    margin: 0;
  }
  
  .profile-photo {
    align-self: center;
    width: min(260px, 100%);
    height: 240px;
  }
}

.profile-photo{
  width: 220px;
  height: auto;
  min-height: 220px;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  border: 1px solid #2a3847;
  margin-top: 0;
  align-self: stretch;
}

[data-theme="light"] .profile-photo{
  border-color: #e5e7eb;
}

.intro-text{
  flex: 1;
}

.intro-text > :first-child{
  margin-top: 0;
}

.intro-text .section-title{
  margin-top: 0;
}

/* Keep intro photo centered when stacked on narrow screens */
@media (max-width: 768px) {
  .profile-intro .profile-photo {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Theme toggle button styles */
.theme-toggle{
  background: var(--card);
  border: 1px solid #2a3847;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  font-size: 16px;
}

.theme-toggle:hover{
  background: #1a2332;
}

[data-theme="light"] .theme-toggle{
  border-color: #d1d5db;
}

[data-theme="light"] .theme-toggle:hover{
  background: #f3f4f6;
}

h1{
  margin:0;
  font-size:clamp(28px,4vw,40px);
  line-height:1.1
}

.subtitle{
  /* font-family:'Playfair Display',Georgia,serif; */
  color:var(--muted);
  margin-top:4px
}

.btn, .back-btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid #2a3847;
  border-radius:10px;
  background:#0f141a;
  text-decoration:none;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn, [data-theme="light"] .back-btn{
  border-color: #d1d5db;
  background: #ffffff;
}

.btn{
  color:var(--text);
}

[data-theme="light"] .btn{
  color: var(--text);
}

.btn:hover{
  background:#1a2332;
  text-decoration:none;
  color:var(--accent);
}

[data-theme="light"] .btn:hover{
  background: #f3f4f6;
  color:var(--accent);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:28px
}

.card{
  background:var(--card);
  border:1px solid #1b2430;
  border-radius:16px;
  padding:18px;
  cursor:pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .card{
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card:hover{
  border-color:#2a3847;
  transform:translateY(-2px);
}

[data-theme="light"] .card:hover{
  border-color: #d1d5db;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card h3{
  margin:0 0 8px 0;
  font-size:18px;
  transition: color 0.3s ease;
}

.card:hover h3{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  font-style:italic;
  color:var(--accent);
}

.project-thumb{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:12px;
  border:1px solid #2a3847
}

[data-theme="light"] .project-thumb{
  border-color: #e5e7eb;
}

.tag{
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border:1px solid #2a3847;
  border-radius:999px;
  color:var(--muted);
  margin-right:6px;
  margin-top:6px
}

[data-theme="light"] .tag{
  border-color: #d1d5db;
  background: #f9fafb;
}

footer{
  margin-top:36px;
  color:var(--muted);
  font-size:14px
}

.section-title{
  margin-top:28px;
  margin-bottom:8px;
  font-size:20px
}

.list{
  margin:0;
  padding-left:18px
}

.contact-list{
  margin:0;
  padding:0;
  list-style:none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.contact-list li {
  display: inline;
}

.contact-list li:not(:last-child)::after {
  content: " • ";
  margin: 0 8px;
  color: var(--muted);
}

#contact {
  text-align: center;
  margin-top: 50px;
}

/* Write-up page specific styles */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  padding:8px 12px;
  color:var(--muted);
}

.back-btn-icon{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('img/logo_dark.ico');
}

[data-theme="light"] .back-btn-icon{
  background-image:url('img/logo_light.ico');
}

.back-btn:hover{
  background:#1a2332;
  color:var(--accent);
}

[data-theme="light"] .back-btn:hover{
  background: #f3f4f6;
  color:var(--accent);
}

.back-btn-absolute{
  position:absolute;
  top:24px;
  left:24px;
  z-index:10;
}

.project-banner{
  position:relative;
  width:100%;
  height:400px;
  overflow:hidden;
  margin-bottom:0;
}

.banner-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.banner-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding:40px;
  color:#fff;
}

[data-theme="light"] .banner-overlay{
  background:linear-gradient(to top, rgba(255,255,255,0.95), transparent);
  color:#1f2937;
}

.banner-title{
  font-size:clamp(38px,5vw,58px);
  margin:0 0 8px 0;
  font-weight:800;
}

.banner-subtitle{
  font-size:18px;
  opacity:0.9;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  font-style:italic;
}

.project-header{
  margin-bottom:32px;
}

.project-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:32px;
}

.content-section{
  margin-bottom:40px;
}

.content-section h2{
  font-size:24px;
  margin:0 0 16px 0;
  color:var(--text);
}

.content-section p{
  margin-bottom:16px;
  color:var(--text);
}

/* Gallery styles for project pages */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:32px 0;
}

.gallery-item{
  background:var(--card);
  border:1px solid #1b2430;
  border-radius:16px;
  overflow:hidden;
  transition: all 0.2s ease;
}

[data-theme="light"] .gallery-item{
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gallery-item:hover{
  border-color:#2a3847;
  transform:translateY(-2px);
}

[data-theme="light"] .gallery-item:hover{
  border-color: #d1d5db;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gallery-image{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.gallery-caption{
  padding:12px 16px;
  font-size:14px;
  color:var(--muted);
  line-height:1.4;
}

/* Single column gallery variant */
.gallery-single{
  grid-template-columns:1fr;
}

/* Two column gallery variant */
.gallery-two{
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
}

@media (max-width: 768px) {
  .gallery-two {
    grid-template-columns:1fr;
  }
}