/* Shared styles: tokens, reset, navbar, tags — page-specific CSS stays inline
   in each page. See design-ref/STYLE-GUIDE.md for the palette and type rules. */

:root {
  --midnight-green: #104F55;
  --myrtle-green: #32746D;
  --verdigris: #5EAAA8;
  --burnt-sienna: #E07A5F;
  --sunset: #F2CC8F;
  --linen: #F4EAE0;
  --ink: #1E1E1E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--linen);
}

/* ---- Navbar (pill) ---- */
.navbar {
  width: min(1200px, calc(100% - 2rem));
  margin: 1.5rem auto;
  background: var(--verdigris);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 2rem;
  color: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.navbar .logo {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}
.navbar nav { display: flex; gap: clamp(1rem, 3vw, 2.2rem); flex-wrap: wrap; }
.navbar nav a {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
}
.navbar nav a:hover { color: var(--sunset); }
@media (max-width: 640px) {
  .navbar {
    flex-direction: column;
    gap: 0.6rem;
    border-radius: 28px;
    padding: 0.9rem 1.25rem;
  }
  .navbar nav { justify-content: center; row-gap: 0.3rem; }
}

/* ---- Tag pills ---- */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-size: 0.75rem; font-weight: 700;
  color: var(--midnight-green);
  background: rgba(94, 170, 168, 0.22);
  border-radius: 999px; padding: 0.25rem 0.75rem;
}