:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --line:#eaeaea;
  --max:1080px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

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

a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--text); outline-offset:3px}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:20px; top:20px; width:auto; height:auto; padding:10px 12px; background:#fff; border:1px solid var(--line)}

.site-header{
  position:sticky; top:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:brightness(1.8);
  border-bottom:1px solid var(--line);
  z-index:10;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:132px}
.logo{height:120px; width:auto; display:block}

.nav{display:flex; gap:18px; font-size:14px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text)}

/* Hero with background image (homepage only) */
.hero{padding:0}
.hero-inner{
  position:relative;
  z-index:1;
  padding:72px 0 40px; /* comfortable spacing */
}
.hero-bg{
  position:relative;
  overflow:hidden;
  min-height:calc(50vh - 96px); /* full viewport minus sticky header */
  display:flex;
  align-items:center;
}
.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 60%, rgba(255,255,255,1) 100%),
    url("../assets/hero.jpg") center/cover no-repeat;
  transform:scale(1.02);
  /* Make the background image noticeably lighter for readability */
  filter: brightness(2.3);
}
h1{font-size:38px; letter-spacing:-0.02em; margin:0 0 8px}
.subtitle{margin:0 0 10px; color:var(--muted)}
.intro{max-width:none; width:100%; margin:0; color:var(--text); font-size: 27px; line-height:1.65; text-align:justify; text-justify:inter-word; hyphens:auto;}

.section{padding:40px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
h2{margin:0; font-size:20px}
.muted{color:var(--muted)}
.dot{padding:0 10px; color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
  margin-top:18px;
}

.card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

.card-meta{padding-top:10px}
.card-meta h3{margin:0; font-size:16px}
.card-meta p{margin:6px 0 0; font-size:13px}

.card:hover img{filter:brightness(0.98)}

.project{padding:32px 0 56px}
.back-link{display:inline-block; margin:14px 0 18px; color:var(--muted)}
.back-link:hover{color:var(--text)}
.project-summary{max-width:none;width:100%;text-align:justify;text-justify:inter-word;hyphens:auto}

.gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  margin-top:22px;
}
.gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

.contact{display:flex; flex-wrap:wrap; align-items:center; gap:0}

.site-footer{border-top:1px solid var(--line); padding:22px 0; margin-top:28px; font-size:13px}

@media (max-width: 900px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  h1{font-size:32px}
  .hero-inner{padding:64px 0 36px}
}
@media (max-width: 560px){
  .grid{grid-template-columns: 1fr;}
  .nav{gap:14px}
  .intro{font-size:16px}
}

/* Grouped galleries on home */
.group{margin-top:3.5rem;}
.group-head{margin-bottom:2.25rem;}
.group-head h3{font-size:1.15rem; letter-spacing:0.01em;}


.section-desc{max-width:none;width:100%;margin:0.75rem 0 1.25rem;color:#444;line-height:1.6;font-size:0.95rem;text-align:justify;text-justify:inter-word;hyphens:auto;}

.group-head{display:block;}


/* --- Static (no-JS) pages support --- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0 32px;}
.card{display:block;text-decoration:none;color:inherit;border:1px solid rgba(0,0,0,0.08);border-radius:14px;overflow:hidden;background:#fff;}
.card-media img{width:100%;height:180px;object-fit:cover;display:block;}
.card-body{padding:12px 14px;}
.card-title{font-weight:600;line-height:1.2;}
.card-subtitle{margin-top:6px;color:#555;font-size:0.95rem;}
.gallery-grid{display:flex;flex-direction:column;gap:18px;}
.gallery-item{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,0.06);}
.gallery-item img{width:100%;height:auto;display:block;background:#fff;}
.project-hero{padding:22px 0 8px;}
.project-title{margin:0 0 6px;}
.project-meta{color:#555;margin-bottom:12px;}
.project-desc{text-align:justify;text-justify:inter-word;hyphens:auto;}
.project-desc p{max-width:none;line-height:1.6;color:#333;margin:0 0 10px;}

.brand-logo{height:120px;width:auto;}

.hero-overlay{background:rgba(255,255,255,0.72); width:100%; height:100%; text-align:left;}

.hero-title{color:#111; text-align:left; width:100%;}

.hero-subtitle{color:#222; max-width:none; width:100%; text-align:justify; text-justify:inter-word; hyphens:auto; font-weight:700;}


/* --- Dynamic gallery enhancements --- */
.nav a{margin-left:14px;}
.nav a:first-child{margin-left:0;}
.nav a{color:inherit;text-decoration:none;opacity:0.9;}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}

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

/* Responsive grid (up to 4 per row when screen space allows) */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  margin:16px 0 32px;
}

/* Force 3-per-row layout (used for the Overseas Experience section) */
.cards-grid.three-col{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ .cards-grid.three-col{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .cards-grid.three-col{ grid-template-columns:1fr; } }

.card{
  display:block;
  width:100%;
  break-inside:avoid;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  animation:fadeUp 320ms ease both;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
  border-color:rgba(0,0,0,0.12);
}
.card-media img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
  transition:transform 220ms ease;
}
.card:hover .card-media img{transform:scale(1.03);}

.card-body{padding:12px 14px;}
.card-title{font-weight:650;letter-spacing:0.1px;line-height:1.25;}
.card-subtitle{margin-top:6px;color:#555;font-size:0.95rem;}

/* Project page gallery */
.gallery-grid{display:flex;flex-direction:column;gap:18px;}

.gallery-item{margin:0;animation:fadeUp 320ms ease both;}
.gallery-item img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:12px;
  transition:transform 160ms ease, box-shadow 160ms ease;
  background:#fff;
}
.gallery-item img:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,0.10);
}

/* Contact + buttons */
.contact{padding:46px 0 64px;}
.contact-inner{max-width:none;width:100%;}
.contact a{color:inherit;}
.contact-note{color:#555;}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.14);
  text-decoration:none;
  color:inherit;
}
.btn:hover{box-shadow:0 10px 28px rgba(0,0,0,0.10); transform:translateY(-1px);}
.muted{color:#666;}


/* --- Header alignment tweaks (brand left, nav right) --- */
.site-header .header-inner{position:relative;justify-content:space-between;min-height:78px;}
.site-header .brand{position:static;transform:none;margin:0;}
.site-header .nav{margin-left:0;}



/* --- My Role block --- */
.role-block{padding:18px 0 8px;}
.role-block h2{margin:0 0 12px;}
.role-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width: 900px){.role-grid{grid-template-columns:1fr 1fr;}}
.role-item{border:1px solid rgba(0,0,0,0.08);border-radius:14px;padding:14px 16px;background:#fff;}
.role-item h3{margin:0 0 8px;font-size:1rem;}
.role-item p{margin:0; text-align:justify; text-justify:inter-word; hyphens:auto;}
.role-item ul{margin:0; padding-left:18px;}
.role-item li{margin:6px 0; text-align:justify; text-justify:inter-word; hyphens:auto;}


/* --- Selected Projects heading + spacing --- */
.selected-projects-title{
  margin:3.5rem 0 0;
  font-size:1.35rem;
  letter-spacing:0.01em;
}

.group-head h2{font-size:1.15rem; letter-spacing:0.01em; margin:0;}

/* Larger gap between experience description and images */
.group .cards-grid{margin-top:2.25rem;}


/* Hero quick links */
.hero-links{
  margin: 10px 0 0;
  font-size: 0.95rem;
}
.hero-links a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}
.hero-links a:hover{
  border-bottom-color: rgba(0,0,0,0.6);
}