/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--lbr-space-2);
  padding: var(--lbr-space-3) var(--lbr-space-6);
  border-radius: var(--lbr-radius-sm);
  font-weight: 500;
  background: var(--lbr-coral-deep);
  color: white;
  transition: transform var(--lbr-dur-1) var(--lbr-ease), box-shadow var(--lbr-dur-1) var(--lbr-ease), background var(--lbr-dur-1) var(--lbr-ease);
  box-shadow: var(--lbr-shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--lbr-shadow-md); background: #a8431f; color: white; }
.btn--ghost { background: transparent; color: var(--lbr-ink); border: 1.5px solid var(--lbr-ink); box-shadow: none; }
.btn--ghost:hover { background: var(--lbr-ink); color: var(--lbr-cream); }

/* ---------- Cards ---------- */
.card {
  background: white;
  border-radius: var(--lbr-radius-md);
  box-shadow: var(--lbr-shadow-sm);
  overflow: hidden;
  transition: transform var(--lbr-dur-2) var(--lbr-ease), box-shadow var(--lbr-dur-2) var(--lbr-ease);
  display: flex; flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lbr-shadow-md); }
.card__image { aspect-ratio: 3/2; overflow: hidden; background: var(--lbr-peach); }
.card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lbr-dur-3) var(--lbr-ease); }
.card:hover .card__image img { transform: scale(1.04); }
.card__body { padding: var(--lbr-space-6); display: flex; flex-direction: column; gap: var(--lbr-space-3); flex: 1; }
.card__title { font-family: var(--lbr-font-display); font-size: var(--lbr-step-2); }
.card__meta { color: var(--lbr-muted); font-size: var(--lbr-step--1); }

/* ---------- Badges (project status) ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--lbr-step--1);
  font-weight: 700;
  color: var(--lbr-ink);
}
.badge.is-active    { background: var(--lbr-leaf); }
.badge.is-completed { background: var(--lbr-peach); }

/* ---------- Audio player wrap ---------- */
.audio-abstract {
  background: var(--lbr-mint);
  border-radius: var(--lbr-radius-md);
  padding: var(--lbr-space-6);
  margin-block: var(--lbr-space-6);
}
.audio-abstract__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--lbr-space-3);
  font-family: var(--lbr-font-display);
  font-size: var(--lbr-step-1);
}
.audio-abstract audio { width: 100%; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--lbr-cream);
  border-bottom: 1px solid var(--lbr-line);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255,248,238,0.85);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lbr-space-6);
  padding-block: var(--lbr-space-4);
  flex-wrap: wrap;
}
.site-header__brand { display: flex; flex-direction: column; gap: 2px; }
.site-logo__title { font-family: var(--lbr-font-display); font-size: var(--lbr-step-2); font-weight: 600; }
.site-logo__subtitle { font-size: var(--lbr-step--1); color: var(--lbr-muted); }
.site-tagline { font-size: var(--lbr-step--1); color: var(--lbr-muted); margin-top: 4px; }
.site-header__actions { display: flex; align-items: center; gap: var(--lbr-space-3); }

.primary-nav { border-top: 1px solid var(--lbr-line); background: transparent; }
.primary-nav__list { display: flex; gap: var(--lbr-space-6); padding-block: var(--lbr-space-3); flex-wrap: wrap; }
.primary-nav__list a {
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--lbr-dur-1) var(--lbr-ease), color var(--lbr-dur-1) var(--lbr-ease);
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a { border-bottom-color: var(--lbr-coral); color: var(--lbr-ink); }

.nav-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 4px; }
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--lbr-ink); margin-inline: auto; transition: transform var(--lbr-dur-1) var(--lbr-ease); }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .primary-nav { display: none; }
  .primary-nav.is-open { display: block; }
  .primary-nav__list { flex-direction: column; gap: var(--lbr-space-3); }
}

/* ---------- Language switcher ---------- */
.lang-switcher { display: inline-flex; gap: var(--lbr-space-3); font-size: var(--lbr-step--1); }
.lang-switcher li.current-lang a { font-weight: 700; color: var(--lbr-coral); }

/* ---------- Footer ---------- */
.site-footer { background: var(--lbr-ink); color: var(--lbr-cream); padding-block: var(--lbr-space-12); margin-top: var(--lbr-space-16); }
.site-footer__inner { display: grid; gap: var(--lbr-space-6); align-items: center; }
.site-footer__title { font-family: var(--lbr-font-display); font-size: var(--lbr-step-2); }
.site-footer__subtitle { color: var(--lbr-mint); }
.site-footer__social { display: flex; gap: var(--lbr-space-6); flex-wrap: wrap; }
.site-footer__social a { color: var(--lbr-cream); border-bottom: 1px solid transparent; }
.site-footer__social a:hover { border-bottom-color: var(--lbr-coral); color: var(--lbr-coral); }
.site-footer__copy { color: var(--lbr-mint); font-size: var(--lbr-step--1); }

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--lbr-dur-3) var(--lbr-ease), transform var(--lbr-dur-3) var(--lbr-ease); }
.reveal.is-in { opacity: 1; transform: none; }