:root{
  --sidebar-w: 260px;      
  --pad: 0px;             
  --brand-size: 20px;      
  --text: #111;            
  --muted: #666;
  --bg: #fff;
  --sidebar-bg: #f7f7f8;   
  --border: #e5e5e9;
  --item-radius: 0px;      
  --item-hover: #ececf1;   
  --item-active: #000000;  
  --font: system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
}

/* ===== Sidebar ===== */
.aside {
  display: flex;
  flex-direction: column;   /* stack from top to bottom */
  padding: var(--pad);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}

/* Brand at very top */
.brand {
  font-size: var(--brand-size);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 20px;      /* gap below brand */
}
.brand:hover { background: var(--item-hover); }

/* Navigation stacked below brand */
.nav {
  display: flex;
  flex-direction: column;   /* vertical list */
  gap: 6px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* container for Year / Type / Location */
.nav-subfilters {
  display: none;
  margin-left: 16px;   /* indent under Projects */
  font-size: 14px;
  flex-direction: column;
  gap: 2px;
}

/* show submenu when mouse is over the Projects group */
.nav-projects:hover .nav-subfilters {
  display: flex;
}

/* style for the small subtitles */
.nav-sub-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  color: #555;
  cursor: pointer;
}

.nav-sub-link:hover {
  color: #111;
  text-decoration: underline;
}
/* ===== Hero Image ===== */
.home-hero-image {
  display: block;
  width: 100%;
  max-width: 900px;      
  height: auto;          /* Ensures aspect ratio is kept on mobile */
  margin: 0 auto 24px;   
}

/* ===== Description Text ===== */
.home-description {
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 0 15px;       /* Prevents text from hitting screen edges on mobile */
  text-align: center;
}

.index-text {
  max-width: 700px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: 1rem;       /* Uses relative units for better scaling */
  line-height: 1.7;
  color: #444;
}

/* ===== Gallery: Responsive 3-column grid ===== */
.home-gallery {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 15px;
}

.home-gallery .thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 32px;             /* Space between items */
  list-style: none;
  padding: 0;
  margin: 0 ;
  max-width: 1100px;       /* Keeps it within main container */
  width: 100%;
}

/* Base Card Style (3 per row) */
.home-gallery .person {
  /* Calculation: (100% / 3 items) minus a bit for the gap */
  flex: 0 1 calc(33.333% - 32px); 
  min-width: 250px;      /* Prevents cards from getting TOO small */
  max-width: 330px;      /* Matches your original design intent */
  text-align: center;
  margin-bottom: 20px;
}

/* Mobile Adjustment (1-2 per row) */
@media (max-width: 600px) {
  .home-gallery .person {
    flex: 0 1 100%;      /* 1 per row on small phones */
    max-width: 400px;    /* Let it be slightly larger if centered */
  }
  
  .index-text {
    font-size: 14px;     /* Smaller text for small screens */
  }
}

.home-gallery .person img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;    /* Optional: subtle rounded corners */
}

.home-gallery .caption {
  display: block;
  margin-top: 10px;
  font-weight: 500;
  text-decoration: none;
  color: #111;
}

/* ===== People Page Gallery (5 per row) ===== */
.people-gallery {
  width: 100%;
  margin-top: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text);
}

.people-gallery .thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Aligns to left like the reference */
  gap: 48px;                   /* Smaller gap for 5 items */
  list-style: none;
  padding: 0;
  margin: 0;
}

.people-gallery .person {
  /* Calculation: 100% / 5 items = 20% */
  flex: 0 1 calc(33% - 48px); 
  min-width: 140px;            /* Minimum width before it wraps */
  margin-bottom: -10px;
  text-align: left;            /* Left aligned text like reference */
}

.people-gallery .person img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;         /* Standardizes image shapes */
  object-fit: cover;
  display: block;
}

.people-gallery .caption {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
  line-height: 1.2;
}

/* Mobile: shrink to 2 per row on small screens */
@media (max-width: 600px) {
  .people-gallery .person {
    flex: 0 1 calc(50% - 16px);
  }
}

/* Nav items (ChatGPT-like buttons) */
.nav-item {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--item-radius);
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
}
.nav-item:hover { background: var(--item-hover); }
.nav-item.active {
  background: var(--item-active);
  border-color: #000000;
  color:#ffffff;
}

/* Dot placeholder like ChatGPT’s sidebar icons */
.nav-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa0a6;
}

/* ===== Main content ===== */
.main {
  padding: 24px;
  overflow: auto;
}

.main h1 {
  margin: 0 0 12px;
  font-size: 20px;
}

.main p { color: var(--muted); }

/* ===== Responsive ===== */
@media (max-width: 720px){
  :root{ --sidebar-w: 84px; }
  .brand { font-size: 16px; margin-bottom: 10px; }
  .nav-item { justify-content: center; }
  .nav-item span { display: none; } /* hide text, keep dot as icon */
}

/* ===== Projects grid ===== */
.gallery{
  --gap: 16px;           /* TUNE: space between tiles */
  --card-w: 360px;       /* TUNE: tile width */
  --card-h: 240px;       /* TUNE: tile height */
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  /* limit to max 4 columns, center within main area */
  max-width: calc(4 * var(--card-w) + 3 * var(--gap));
}

.tile{
  width: var(--card-w);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #f1f3f5;
}

.tile-figure{
  width: 100%;
  height: var(--card-h);
  position: relative;
  background: #e9ecef; /* placeholder */
}

.tile-figure img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill 360×240 nicely */
}

.tile-caption{
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  border-top: 1px solid var(--border);
  background: #fff;
  display: grid;
  gap: 2px;
}
.tile-caption .sub{ color: var(--muted); font-size: 12px; }

/* make it nice on small screens */
@media (max-width: 1200px){
  .gallery{ max-width: calc(3 * var(--card-w) + 2 * var(--gap)); }
}
@media (max-width: 820px){
  .gallery{ max-width: calc(2 * var(--card-w) + 1 * var(--gap)); }
}
@media (max-width: 480px){
  .gallery{ max-width: var(--card-w); }
}