:root {
  --color-stone-50: #F8F4EE;
  --color-stone-100: #F1EAE0;
  --color-ink-900: #241F1B;
  --color-ink-700: #3C352E;
  --color-clay-500: #B5563A;
  --color-clay-600: #9A4530;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-stone-50);
}

/* ---------- Hero stagger reveal ---------- */
.hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-reveal.d1 { animation-delay: 0.05s; }
.hero-reveal.d2 { animation-delay: 0.22s; }
.hero-reveal.d3 { animation-delay: 0.4s; }
.hero-reveal.d4 { animation-delay: 0.56s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Media hover reveal ---------- */
.media-zoom { overflow: hidden; }
.media-zoom img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-zoom:hover img {
  transform: scale(1.045);
}

.caption-reveal {
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-zoom:hover .caption-reveal {
  transform: translateY(0);
}

/* ---------- Accordion ---------- */
.accordion-icon {
  transition: transform 0.35s ease;
}
.accordion-btn[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* ---------- Misc ---------- */
::selection {
  background: var(--color-clay-500);
  color: var(--color-stone-50);
}