html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.62)),
    url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1800&q=85");
  background-position: center;
  background-size: cover;
}

.campus-photo {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.18)),
    url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1400&q=85");
  background-position: center;
  background-size: cover;
}

.workshop-photo {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.16)),
    url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1400&q=85");
  background-position: center;
  background-size: cover;
}

.page-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(20, 184, 166, 0.18), transparent 34rem),
    radial-gradient(circle at 85% 5%, rgba(245, 158, 11, 0.14), transparent 28rem),
    #0f172a;
}

.focus-ring:focus-visible {
  outline: 3px solid #14b8a6;
  outline-offset: 3px;
}