*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green-dark: oklch(32% 0.08 135);
  --green-mid: oklch(42% 0.10 135);
  --green-light: oklch(58% 0.09 135);
  --green-pale: oklch(94% 0.03 135);
  --brown-dark: oklch(30% 0.06 55);
  --brown-mid: oklch(48% 0.08 55);
  --brown-light: oklch(72% 0.07 55);
  --cream: oklch(97% 0.015 80);
  --cream-dark: oklch(92% 0.025 80);
  --gold: oklch(72% 0.12 80);
  --text-dark: oklch(22% 0.04 60);
  --text-mid: oklch(45% 0.04 60);
  --text-light: oklch(65% 0.03 60);
}
html { scroll-behavior: smooth; }
body { font-family: 'Karla', sans-serif; background: var(--cream); color: var(--text-dark); line-height: 1.6; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; color: inherit; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--brown-light); border-radius: 3px; }

.img-placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--cream-dark),
    var(--cream-dark) 10px,
    var(--cream) 10px,
    var(--cream) 20px
  );
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: 11px;
  color: var(--text-light); text-align: center; padding: 12px;
  letter-spacing: 0.03em;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-up { animation: fadeUp 0.6s ease both; }
.fade-in { animation: fadeIn 0.4s ease both; }