/* Simple centered layout and small fade animation */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #0ea5a4; /* teal */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:2rem;
}

/* Header / Navigation */
.site-header{
  width:100%;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:var(--bg);
}
.site-header .container{
  max-width:960px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1rem;
}
.logo{font-weight:700; color:var(--text); text-decoration:none}
.site-nav a{margin-left:1rem; color:var(--muted); text-decoration:none; font-weight:500}
.site-nav a:hover, .site-nav a[aria-current="page"]{color:var(--text)}

/* Container used on pages */
.container{padding:2rem; max-width:960px; margin:0 auto}

/* Page spacing adjustments so header doesn't overlap */
.page-home{padding-top:4.5rem}
.page-about, .page-projects, .page-gallery, .page-achievements{padding-top:2.5rem}

/* Projects and gallery layouts */
.projects-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.project{padding:1rem; border-radius:8px; background:rgba(0,0,0,0.03)}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0.75rem}
.gallery-grid img{width:100%; height:160px; object-fit:cover; border-radius:8px}

.gallery-grid a{display:block; overflow:hidden; border-radius:8px}
.gallery-grid a img{width:100%; height:160px; object-fit:cover; display:block}

.achievements-list{list-style:disc inside}

/* Top banner shown when a section is active */
.top-banner{
  position:fixed;
  left:0;
  right:0;
  top:0;
  background:rgba(255,255,255,0.96);
  border-bottom:1px solid rgba(0,0,0,0.06);
  transform:translateY(-100%);
  transition:transform 280ms ease;
  z-index:40;
}
.top-banner.show{transform:translateY(0)}
.top-banner .container{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem}
.banner-logo{font-weight:700;color:var(--text);text-decoration:none}
.banner-title{color:var(--muted);font-weight:600}

/* Responsive tweaks for hero and navigation */
@media (min-width:1024px){
  .name{font-size:clamp(3rem,6vw,6rem)}
  .page-home{min-height:68vh}
  .container{max-width:1100px}
}

@media (max-width:420px){
  .bottom-nav{gap:0.5rem; flex-wrap:wrap}
  .bottom-nav a{padding:0.75rem 1rem; font-size:0.95rem; flex:1 1 calc(50% - 0.5rem); min-width:120px; text-align:center}
  .banner-title{font-size:0.9rem}
  .top-banner .container{padding:0.4rem 0.75rem}
  .gallery-grid img{height:120px}
}

@media (max-width:320px){
  .name{font-size:2rem}
}

/* One-time section hint */
.section-hint{position:fixed;left:50%;top:64px;transform:translateX(-50%) translateY(-8px);background:rgba(0,0,0,0.8);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.12);opacity:0;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease;z-index:70;max-width:min(92%,520px);display:flex;align-items:center;gap:10px;font-size:0.95rem}
.section-hint.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.section-hint .section-hint-close{background:transparent;border:0;color:inherit;font-weight:700;cursor:pointer;padding:0 6px;font-size:1rem}
@media (max-width:420px){.section-hint{top:56px;padding:9px 12px;font-size:0.9rem}}

/* Hero collapse (shrink to small banner effect) */
#hero{transition:padding-top 280ms ease}
#hero.collapsed{padding-top:3.5rem}
#hero.collapsed .name{font-size:1rem; transform:translateY(-2px); margin:0}
#hero.collapsed .role{font-size:0.875rem; color:var(--muted); margin-top:0}

/* Bottom inline nav */
.bottom-nav{margin-top:1.4rem; display:flex; gap:0.75rem; justify-content:center}
.bottom-nav a{padding:0.5rem 0.9rem; border-radius:999px; background:rgba(17,24,39,0.04); color:var(--text); text-decoration:none; font-weight:600}
.bottom-nav a:hover{background:rgba(14,165,164,0.12); color:var(--accent)}

/* Content sections (hidden by default, fade in when active) */
.content-section{opacity:0; transform:translateY(10px); transition:opacity 320ms ease, transform 320ms ease; max-width:960px; margin:1.25rem auto; padding:0 1rem; display:none}
.content-section.active{display:block; opacity:1; transform:translateY(0)}

/* Make sure hero remains visually centered on home */
.page-home{min-height:72vh}
/* Theme palettes for sections - these change the page feel when a section is active */
:root{--page-bg:transparent; --page-text:var(--text); --page-muted:var(--muted)}
.theme-about{--page-bg:#f0fdfa; --page-text:#054f4f; --page-muted:#0f766e; --accent:#0ea5a4}
.theme-projects{--page-bg:#f8fafc; --page-text:#0f172a; --page-muted:#475569; --accent:#2563eb}
.theme-gallery{--page-bg:#fff7ed; --page-text:#7c2d12; --page-muted:#92400e; --accent:#f97316}
.theme-achievements{--page-bg:#f8fafc; --page-text:#0b1220; --page-muted:#334155; --accent:#7c3aed}

/* Apply theme variables to active content and banner */
.content-section.active{background:var(--page-bg); color:var(--page-text)}
.top-banner.show{background:var(--page-bg)}
.top-banner .banner-title{color:var(--accent)}

/* Ensure links inside themed pages use accent */
.content-section.active a{color:var(--accent)}
.name{
  margin:0;
  font-weight:700;
  line-height:1;
  font-size:clamp(2.5rem, 8vw, 5rem);
}
.role{
  margin:0.5rem 0 0;
  font-weight:500;
  color:var(--muted);
  font-size:clamp(1.25rem, 4vw, 2rem);
}
.cursor{
  display:inline-block;
  margin-left:8px;
  color:var(--accent);
  animation:blink 1s steps(2,end) infinite;
}
@keyframes blink{50%{opacity:0}}

/* fade in/out for the role text */
#role{
  display:inline-block;
  transition:opacity 300ms ease;
  opacity:1;
}
#role.hidden{opacity:0}

/* Quote styling */
.quote-section{margin-bottom:1rem}
.quote{border-left:4px solid var(--accent); padding-left:1rem; color:var(--muted); font-style:italic;}
#role.hidden{opacity:0}

/* Site logo in banner */
.site-logo{height:28px; display:inline-block; vertical-align:middle}

/* About grid: photo + content */
.about-grid{display:grid;grid-template-columns:140px 1fr;gap:1rem;align-items:start}
.about-photo{display:flex;align-items:flex-start;justify-content:center}
.profile-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid rgba(0,0,0,0.06);box-shadow:0 6px 20px rgba(2,6,23,0.08)}

@media (max-width:720px){
  .about-grid{grid-template-columns:1fr; text-align:left}
  .about-photo{justify-content:flex-start}
  .profile-photo{width:110px;height:110px}
}

/* Social links */
.social{
  margin-top:1.25rem;
  display:flex;
  gap:0.75rem;
  align-items:center;
  justify-content:center;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:rgba(17,24,39,0.04);
  color:var(--text);
  text-decoration:none;
  transition:transform 160ms ease, background 160ms ease, color 160ms ease;
}
.social-link svg{width:20px;height:20px}
.social-link:hover{transform:translateY(-3px); background:rgba(14,165,164,0.12); color:var(--accent)}
.social-link:focus-visible{outline:3px solid rgba(14,165,164,0.18); outline-offset:3px}


/* mobile friendly small tweaks */
@media (max-width:420px){
  .name{font-size:2.25rem}
}