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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--face-paper);
  color: var(--face-text);
  font-family: var(--face-font-body);
  font-size: var(--face-fs-body);
  line-height: var(--face-lh-body);
  font-weight: var(--face-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.face-nav-open {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--face-transition-fast);
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--face-accent);
  outline-offset: 3px;
  border-radius: var(--face-radius-sm);
}

::selection {
  background: var(--face-accent);
  color: var(--face-ink-900);
}

.face-skip-link {
  position: absolute;
  inset-inline-start: var(--face-space-md);
  inset-block-start: -100%;
  z-index: var(--face-z-toast);
  background: var(--face-ink-900);
  color: var(--face-on-dark);
  padding: 0.75rem 1.25rem;
  font-family: var(--face-font-mono);
  font-size: var(--face-fs-meta);
  letter-spacing: var(--face-ls-meta);
  text-transform: uppercase;
  transition: inset-block-start var(--face-transition-fast);
}

.face-skip-link:focus {
  inset-block-start: var(--face-space-md);
}

.face-shell {
  width: 100%;
  max-width: var(--face-container);
  margin-inline: auto;
  padding-inline: var(--face-gutter);
}

.face-shell-narrow {
  width: 100%;
  max-width: var(--face-container-narrow);
  margin-inline: auto;
  padding-inline: var(--face-gutter);
}

.face-shell-flush {
  width: 100%;
  max-width: var(--face-container);
  margin-inline: auto;
  padding-inline: 0;
}

.face-section {
  position: relative;
  padding-block: var(--face-section-y);
  background: var(--face-surface);
  color: var(--face-fg);
}

.face-section-tight {
  padding-block: var(--face-section-y-tight);
}

.face-section-flush-top {
  padding-block-start: 0;
}

.face-section-flush-bottom {
  padding-block-end: 0;
}

.face-rule {
  border: 0;
  border-top: var(--face-border-hair) solid var(--face-rule);
  margin: 0;
  opacity: 1;
}

.face-grid {
  display: grid;
  gap: var(--face-space-xl);
}

.face-stack-xs > * + * { margin-block-start: var(--face-space-xs); }
.face-stack-sm > * + * { margin-block-start: var(--face-space-sm); }
.face-stack-md > * + * { margin-block-start: var(--face-space-md); }
.face-stack-lg > * + * { margin-block-start: var(--face-space-lg); }
.face-stack-xl > * + * { margin-block-start: var(--face-space-xl); }

.face-blueprint {
  position: relative;
  isolation: isolate;
}

.face-blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--face-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--face-grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

.face-theme-light.face-blueprint::before,
.face-theme-bone.face-blueprint::before {
  background-image:
    linear-gradient(to right, var(--face-grid-line-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--face-grid-line-light) 1px, transparent 1px);
}

.face-hairline-cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
  max-width: var(--face-container);
  margin-inline: auto;
  padding-inline: var(--face-gutter);
}

.face-hairline-cols span {
  border-inline-start: var(--face-border-hair) solid var(--face-rule-soft);
}

.face-hairline-cols span:first-child {
  border-inline-start: 0;
}

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

.face-noscroll-x {
  overflow-x: hidden;
}

.face-media {
  position: relative;
  overflow: hidden;
  background: var(--face-ink-700);
}

.face-media img,
.face-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.face-media > [data-parallax] {
  height: 120%;
  margin-block-start: -10%;
}

.face-ratio-16x9 { aspect-ratio: 16 / 9; }
.face-ratio-4x3 { aspect-ratio: 4 / 3; }
.face-ratio-3x2 { aspect-ratio: 3 / 2; }
.face-ratio-1x1 { aspect-ratio: 1 / 1; }
.face-ratio-4x5 { aspect-ratio: 4 / 5; }
.face-ratio-3x4 { aspect-ratio: 3 / 4; }
.face-ratio-21x9 { aspect-ratio: 21 / 9; }

.face-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 10, 0.15) 0%, rgba(7, 8, 10, 0.55) 55%, rgba(7, 8, 10, 0.88) 100%);
  pointer-events: none;
}

.face-scrim-soft::after {
  background: linear-gradient(180deg, rgba(7, 8, 10, 0) 30%, rgba(7, 8, 10, 0.62) 100%);
}

[id] {
  scroll-margin-block-start: var(--face-scroll-offset);
}

.face-anchor-scope [id] {
  scroll-margin-block-start: calc(var(--face-header-h-scrolled) + var(--face-anchornav-h) + 1.5rem);
}