* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--surface);
  color:var(--text);
  font:400 var(--text-base)/1.6 var(--font-reading);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,h4,p,figure {
  margin:0
}
h1,h2,h3 {
  font-weight:400
}
h1,h2 {
  font-family:var(--font-display);
  line-height:1.04;
  letter-spacing:-.025em
}
p+p {
  margin-top:1.2em
}
::selection {
  background:var(--yellow);
  color:var(--black)
}
:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:6px
}
button:disabled {
  cursor:default
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(var(--width),calc(100% - var(--gutter)*2));
  margin-inline:auto
}
.detail {
  font:400 var(--text-sm)/1.5 var(--font-detail)
}
.eyebrow {
  font:400 var(--text-xs)/1.5 var(--font-detail);
  text-transform:uppercase;
  letter-spacing:.08em
}
.muted {
  color:var(--text-secondary)
}
.display {
  font:400 var(--display-lg)/1.02 var(--font-display);
  letter-spacing:-.025em
}
.prose {
  max-width:var(--reading)
}
.prose p,.prose li {
  color:var(--text-secondary)
}
.prose h3 {
  font-size:1.25rem;
  font-weight:500;
  margin:2rem 0 .75rem
}
.prose h3:first-child {
  margin-top:0
}
.prose ul {
  padding-left:1.2rem;
  margin:1rem 0 2rem
}
.prose li+li {
  margin-top:.8rem
}
.section-space {
  padding-block:var(--space-24)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--yellow);
  color:var(--black);
  padding:12px
}
.skip-link:focus {
  top:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:48px;
  padding:13px 21px;
  border:1px solid currentColor;
  border-radius:var(--radius-pill);
  font:400 var(--text-sm)/1.4 var(--font-detail);
  transition:background var(--duration-ui),color var(--duration-ui),gap var(--duration-ui);
  background:transparent;
  color:inherit
}
.button:hover {
  background:var(--text);
  color:var(--surface)
}
.button--solid {
  background:var(--black);
  color:var(--cream);
  border-color:var(--black)
}
.button--solid:hover {
  background:var(--cream);
  color:var(--black)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:1rem;
  min-height:44px;
  border-bottom:1px solid currentColor;
  font:400 var(--text-sm)/1.5 var(--font-detail)
}
.arrow {
  display:inline-block;
  transition:transform var(--duration-ui) var(--ease-out)
}
a:hover .arrow {
  transform:translate(3px,-3px)
}
.rule {
  border:0;
  border-top:1px solid var(--line)
}
@media(prefers-reduced-motion:no-preference) {
  .reveal.is-waiting {
    opacity:0;
    transform:translateY(28px)
  }
  .reveal {
    transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}