@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #434b1f;
  --on-primary: #ffffff;
  --surface: #fbf9f8;
  --surface-container-low: #f5f3f3;
  --surface-container: #efeded;
  --on-surface: #1b1c1c;
  --on-surface-variant: #47483c;
  --outline-variant: #c8c7b9;
  --tertiary-container: #715c33;
  --on-tertiary-container: #f3d6a2;
}

body {
  background-color: var(--surface);
  color: var(--on-surface-variant);
  font-family: 'Manrope', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-headline {
  font-family: 'Newsreader', serif;
}

.glass-nav {
  background: rgba(251, 249, 248, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.strata-bg {
  background: linear-gradient(180deg, transparent 0%, rgba(239, 237, 237, 0.4) 100%);
}

.museum-card {
  background-color: var(--surface-container-low);
  border-radius: 1.5rem; /* XL corners */
  transition: transform 0.3s ease;
}

/* Sedimentary layers - no 1px borders rule */
.sediment-section {
  background-color: var(--surface-container);
  padding: 4rem 2rem;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeInUp 0.8s ease forwards;
}

/* Custom Scrollbar for the vintage feel */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--surface);
}
::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--on-surface-variant);
}
/* Image Sharpening & Quality Optimization */
.museum-card img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Ensure smooth scaling while maintaining detail */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.museum-card:hover img {
  filter: contrast(1.05) brightness(1.02);
}