:root {
  --color-black: #111111;
  --color-white: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-border: #d6dade;
  --color-placeholder: #e3eaf0;   /* card image background */
  --color-highlight: #fde047;     /* yellow hover highlight */
  --color-logo-bg: #2f4a3e;       /* placeholder logo colour */

  --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1400px;
  --gutter: 40px;
}

/* ---- Reset / base ---------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

.wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header / nav ------------------------------------------
   position: sticky keeps it in normal document flow (so page
   content simply starts below it — no overlap to fix), but it
   sticks to the top of the viewport once you scroll past it.
------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
}

.navbar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-bottom: 5px solid var(--color-black);
}

.logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--color-logo-bg);
  /* TODO: replace with your actual logo (img/svg) */
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-links a {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.nav-links a.active {
  /* current page indicator — tweak as you like */
  color: var(--color-black)
}

/* ---- Intro text -------------------------------------------- */
.intro {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px var(--gutter) 32px;
}

.intro p {
  font-size: 1.15rem;
  line-height: 1.5;
  max-width: 98%;
  margin: 0;
}

/* ---- Filters -------------------------------------------------- */
.filters {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.filters-label {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-right: 4px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag {
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tag:hover {
  border-color: var(--color-black);
}

.tag.active {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* ---- Project grid ---------------------------------------------- */
.project-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  row-gap: 52px;
}

.project-card {
  display: block;
}

.project-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-placeholder);
  border-radius: 2px;
  filter: grayscale(70%);
  transform: scale(1);
  transition: filter 0.25s ease, transform 0.25s ease;
  margin-bottom: 20px;
}

.project-card:hover .project-image {
  filter: grayscale(0%);
  transform: scale(1.01);
}

.project-title {
  margin: 20px 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
  display: inline;
  /* box-decoration-break lets the highlight wrap cleanly if the
     title spans two lines */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.project-card:hover .project-title {
  background-color: var(--color-highlight);
}

.project-date {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 10px;
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  .navbar {
    padding: 16px var(--gutter);
  }

  .logo-placeholder {
    width: 44px;
    height: 44px;
  }

  .nav-links {
    gap: 24px;
  }

  .intro {
    padding-top: 36px;
  }

  .intro p {
    font-size: 1.05rem;
  }

  .project-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

/* ---- Simple placeholder page styling (about.html / project.html) */
.placeholder-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px var(--gutter);
}

.placeholder-page h1 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.placeholder-page p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 640px;
}