/* Typography + markdown content styling for posts */

.prose{
  max-width: 820px;
  margin: 0 auto;
  padding-top: 10px;
}

.prose .meta{
  color: rgba(240,244,248,.62);
  margin: 8px 0 22px;
}

.prose h1{
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.prose h2{
  margin-top: 30px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.prose h3{
  margin-top: 22px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.prose p{
  margin: 0 0 14px;
  color: rgba(240,244,248,.70);
  line-height: 1.75;
}

.prose ul, .prose ol{
  padding-left: 1.2rem;
  margin: 0 0 14px;
}

.prose li{
  margin: 6px 0;
  color: rgba(240,244,248,.70);
}

.prose a{
  color: rgba(240,244,248,.92);
  text-decoration: underline;
  text-decoration-color: rgba(0,187,249,.55);
  text-underline-offset: 3px;
}
.prose a:hover{
  text-decoration-color: rgba(0,245,212,.65);
}

.prose img{
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(34,46,66,.65);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  margin: 14px 0;
}

.prose blockquote{
  margin: 18px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(0,187,249,.6);
  background: rgba(17,24,39,.55);
  border-radius: 14px;
  color: rgba(240,244,248,.70);
}

.prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  background: rgba(17,24,39,.7);
  border: 1px solid rgba(34,46,66,.55);
  padding: .15em .45em;
  border-radius: 10px;
}

.prose pre{
  background: rgba(17,24,39,.72);
  border: 1px solid rgba(34,46,66,.65);
  padding: 14px 16px;
  border-radius: 16px;
  overflow:auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  margin: 16px 0;
}

.prose pre code{
  background: transparent;
  border: 0;
  padding: 0;
}

.prose hr{
  border:0;
  height:1px;
  background: rgba(34,46,66,.55);
  margin: 28px 0;
}