/* ==========================================================================
   MAIN STYLESHEET
   Loaded on every page. Pulls in the shared base/layout/component
   modules, then defines a few global, site-wide rules.
   ========================================================================== */

/* Base */
@import url("base/reset.css");
@import url("base/variables.css");
@import url("base/typography.css");
@import url("base/animations.css");

/* Layout */
@import url("layout/header.css");
@import url("layout/footer.css");
@import url("layout/grid.css");

/* Components */
@import url("components/buttons.css");
@import url("components/cards.css");
@import url("components/tags.css");
@import url("components/panels.css");
@import url("components/live-workflow.css");
@import url("components/scroll-top.css");

/* Global, site-wide rules that don't belong to a single component */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 300;
  background: var(--ink);
  color: var(--ground);
  padding: 12px 18px;
  font-weight: 800;
  font-size: 13px;
}

.skip-link:focus {
  left: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[data-reveal] {
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}