@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-nav {
  background: rgba(1, 45, 29, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.perspective-grid-offset {
  transform: translate(2rem, -2rem);
}

.perspective-grid-item {
  transform: translateZ(0);
  transition: transform 0.3s ease-out;
}

.perspective-grid-item:hover {
  transform: translateY(-8px);
}

.perspective-card {
  transition: transform 0.3s ease-out;
}

.perspective-card:hover {
  transform: translateY(-8px) rotateX(2deg);
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}