@font-face {
  font-family:'Clash Grotesk';
  src:url('../fonts/ClashGrotesk-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-display:swap
}
@font-face {
  font-family:Geist;
  src:url('../fonts/Geist-Variable-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:'Geist Mono';
  src:url('../fonts/GeistMono-Variable-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:100px;
  scrollbar-color:var(--color-border-strong) var(--color-bg)
}
body {
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font:400 1.0625rem/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p,figure,ul,ol,dl,dd {
  margin:0
}
h1,h2,h3 {
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.035em;
  text-wrap:balance
}
h1 {
  font-size:clamp(2.6rem,5.5vw,6rem)
}
h2 {
  font-size:clamp(2.2rem,4.2vw,4.5rem)
}
h3 {
  font-size:clamp(1.4rem,2.3vw,2.3rem)
}
p {
  max-width:68ch;
  text-wrap:pretty
}
a {
  color:inherit;
  text-underline-offset:.25em
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
ul[role=list],ol[role=list] {
  padding:0;
  list-style:none
}
svg {
  flex-shrink:0
}
::selection {
  background:var(--color-brand);
  color:#fff
}
:focus-visible {
  outline:2px solid var(--color-brand-light);
  outline-offset:5px
}
button:disabled {
  cursor:wait;
  opacity:.6
}
[hidden] {
  display:none!important
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip-link {
  position:fixed;
  top:1rem;
  left:1rem;
  padding:1rem;
  background:var(--color-paper);
  color:var(--color-ink);
  z-index:1000;
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
.surface-paper {
  background:var(--color-paper);
  color:var(--color-ink)
}
.surface-paper :focus-visible {
  outline-color:var(--color-brand)
}
.surface-paper p {
  color:#61584f
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

}

html {
  color-scheme:dark
}
a,button {
  touch-action:manipulation;
  -webkit-tap-highlight-color:#bc9df833
}
main:focus {
  outline:none
}
.metric__value {
  font-variant-numeric:tabular-nums
}
.mobile-nav {
  overscroll-behavior:contain
}
.admin-bar .site-header {
  top:32px
}
@media(max-width:782px) {
  .admin-bar .site-header {
  top:46px
}

}
@media(max-width:600px) {
  .admin-bar .site-header {
  top:0
}

}