*
{
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  -ms-box-sizing     : border-box;
  -o-box-sizing      : border-box;
  box-sizing         : border-box;
}

html
{
  scroll-behavior    : smooth;
  scroll-padding-top : 30px;
}

body
{
  margin           : 0 0 0 0;
  background-color : var(--bg);
  color            : var(--text);
  font             : 15px/1.65 var(--sans);
}

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

button, input
{
  font : inherit;
}

button
{
  cursor : pointer;
  color  : inherit;
}

button, a, input
{
  touch-action : manipulation;
}

button
{
  border     : 0;
  background : none;
}

button:hover, a:hover
{
  color : var(--accent);
}

:focus-visible
{
  outline        : 2px solid var(--accent);
  outline-offset : 4px;
}

html.focus-managed :focus-visible:not([data-tab-focus])
{
  outline : none;
}

::selection
{
  background-color : var(--selection-color);
}

button:disabled
{
  cursor : default;
}

h1, h2, h3, p
{
  margin-top : 0;
}

a, button
{
  transition : color 0.15s, background 0.15s;
}

.muted
{
  color : var(--muted);
}

.accent
{
  color : var(--accent);
}

.brand
{
  display        : flex;
  align-items    : center;
  gap            : 13px;
  font-size      : 25px;
  font-weight    : 650;
  letter-spacing : -1px;
  margin         : 0 9px 31px 9px;
}

.brand-mark
{
  font  : 40px/1 var(--mono);
  color : var(--accent);
}

html.search-open
{
  overflow : hidden;
}

kbd
{
  font          : 10px var(--mono);
  border        : 1px solid var(--border);
  border-radius : 3px 3px 3px 3px;
  padding       : 2px 6px 2px 6px;
  color         : var(--faint);
}

.eyebrow
{
  font           : 10px/1.6 var(--mono);
  letter-spacing : 1.6px;
  color          : var(--muted);
}

blog-content
{
  display : block;
}

.fallback
{
  max-width : 950px;
  margin    : auto auto auto auto;
  padding   : 35px 35px 35px 35px;
}

.fallback nav
{
  display       : flex;
  align-items   : center;
  gap           : 25px;
  margin-bottom : 60px;
}

.fallback nav .brand
{
  margin    : 0 auto 0 0;
  font-size : 20px;
}

.fallback footer
{
  margin-top : 50px;
  font       : 11px var(--mono);
  color      : var(--muted);
}

.fallback .post-row h2
{
  font-size : 22px;
}

.fallback .post-row p
{
  color : var(--muted);
}

.fallback .post-row
{
  display               : grid;
  grid-template-columns : 80px minmax(0, 1fr);
  gap                   : 24px;
  padding               : 24px 0 24px 0;
  border-bottom         : 1px solid var(--border);
}

.fallback .intro
{
  padding : 40px 0 40px 0;
}

.fallback .intro-quote
{
  display     : flex;
  flex-wrap   : wrap;
  align-items : baseline;
  gap         : 4px 12px;
  margin      : 0 0 0 0;
  color       : var(--muted);
  font-size   : 14px;
  line-height : 1.9;
}

.fallback .quote-attribution
{
  font        : 11px var(--mono);
  white-space : nowrap;
}

.fallback .quote-attribution cite
{
  font-style : normal;
}

@media all and (max-width: 760px)
{

.fallback
{
  padding : 24px 24px 24px 24px;
}

}
@media all and (max-width: 760px)
{

.fallback nav
{
  gap : 15px;
}

}
@media all and (max-width: 760px)
{

.fallback nav .muted
{
  display : none;
}

}
@media all and (prefers-reduced-motion: reduce)
{

html
{
  scroll-behavior : auto;
}

}
@media all and (prefers-reduced-motion: reduce)
{

*
{
  transition : none !important;
}

}
@media all and (prefers-reduced-motion: reduce)
{

*::before
{
  transition : none !important;
}

}
@media all and (prefers-reduced-motion: reduce)
{

*::after
{
  transition : none !important;
}

}
@media all and (max-width: 760px)
{

.fallback .intro-quote
{
  font-size : 13px;
}

}

/* Generated with Clay, http://fvisser.nl/clay */