.mt-l-xl {
  margin-top: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.flow-space-s-m {
  --flow-space: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
}

.flow-space-2xl-3xl {
  --flow-space: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}

.spot-color-primary {
  --spot-color: var(--brand-primary1);
}

.curve {
  display: block;
  height: 3.5em;
  width: 100%;
  color: var(--color-brand);
  transform: rotate(180deg);
  margin-top: -1px;
}

.header {
  background: var(--color-brand);
}

.header .menu-main {
  display: flex;
  flex-direction: row;
  margin: 1rem 0;
  justify-content: space-between;
}

.header .menu-main a {
  color: var(--color-light-neutral-9);
  font-size: var(--step-1);
}

.header .menu-main .logo {
  color: var(--color-light-neutral-9);
  font-size: var(--step-1);
  display: flex;
  align-items: center;
  border-radius: 100px;
  padding: var(--space-2xs);
  background: var(--color-light-neutral-1);
}

.header .menu-main a svg {
  height: 3rem;
  width: 3rem;
}

.header .menu-main div {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

article {
  margin-block-start: 3em;
}

article h2 {
  margin-block-start: 0.2em;
  margin-block-end: 0.2em;
  line-height: 1.1;
}

article p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  color: var(--color-neutral-3);
}

.site-foot {
  background: var(--color-dark);
  padding: var(--space-s-m) 0;
  margin: var(--space-s-m) 0;
}

.site-foot__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs-s);
}

.site-foot__inner nav {
  display: flex;
  gap: var(--space-xs-s);
}

.site-foot .rss {
  align-items: center;
  display: flex;
}

.site-foot img {
  height: var(--space-m);
  width: var(--space-m);
  filter: invert(var(--svg-image-filter-contrast));
}

.blog-colors {
  display: flex;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}

.blog-colors .color {
  width: var(--space-xl);
  height: var(--space-xl);
}

details.highlight {
  border: var(--space-2xs) solid var(--color-brand);
  border-radius: var(--space-s);
  margin-block-start: 3em;
}

details.highlight summary {
  cursor: pointer;
  font-size: var(--step-2);
  padding: var(--space-s);
}

details.highlight summary::marker,
details.highlight summary::-webkit-details-marker {
  color: var(--color-brand);
}

/* details.highlight summary span {
  color: var(--color-secondary-1);
  font-weight: 600;
  font-size: var(--step-1);
} */

details.highlight pre {
  padding: var(--space-s);
  margin: 0 var(--space-s) var(--space-s) var(--space-s);
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: var(--color-neutral-8);
  border-radius: var(--space-2xs);
}

details.highlight pre code {
  line-height: 1.4;
}

details p {
  padding: .5em var(--space-s);
  color: var(--color-neutral-3);
}

details summary code,
details p code {
  color: var(--color-neutral-1);
  background-color: var(--color-neutral-8);
  padding: 0px 7px;
  /* font-size: var(--step-0); */
  border: 1px solid var(--color-neutral-5);
  border-radius: 2px;
}

.services h1,
.services h2,
.services p,
.about h1,
.about h2,
.about p {
  margin-top: 1em;
}

.services li,
.services p {
  color: var(--color-neutral-3);
}

.about p {
  color: var(--color-neutral-3);
}