@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

@import url("./variables.css");
@import url("./components.css");
@import url("./navbar.css");
@import url("./footer.css");
@import url("./responsive.css");
@import url("./home.css");
@import url("./work.css");
@import url("./about.css");
@import url("./archive.css");
@import url("./contact.css");

/* Base / Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background-color: var(--site-bg-base);
  background-image: radial-gradient(820px 620px at 74% 24%, var(--site-bg-glow-1), transparent 58%),
    radial-gradient(640px 480px at 70% 52%, var(--site-bg-glow-2), transparent 52%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--text-0);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* Layout shell */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-2);
  background: rgba(10, 15, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-0);
  transform: translateY(-140%);
  transition: transform 180ms var(--ease-out);
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0%);
}

.site-main {
  min-height: 60vh;
}

.container {
  width: min(var(--container-max), calc(100% - 2 * var(--container-gutter)));
  margin-inline: auto;
}