/* PROSE - scoped to .prose-article only
   Colours pulled from site design system */
.prose-article {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #a1a1aa; /* zinc-400 */
}

.prose-article h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #34d399; /* emerald-400 */
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose-article h3 {
  font-size: 1.2rem; /* FIX #82: was 1.5rem same as h2 - flat hierarchy */
  font-weight: 500;
  color: #34d399;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose-article p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
  color: #a1a1aa;
}

.prose-article a {
  color: #34d399;
  text-decoration: underline;
  transition: color 150ms ease;
}

.prose-article a:hover {
  color: #6ee7b7; /* emerald-300 */
}

.prose-article strong {
  font-weight: 600;
  color: #f4f4f5; /* zinc-100 */
}

.prose-article ul,
.prose-article ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }

.prose-article li {
  margin-bottom: 0.5rem;
  color: #a1a1aa;
}

.prose-article blockquote {
  border-left: 3px solid #34d399;
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: #71717a;
  font-style: italic;
}

.prose-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.875em;
  color: #34d399;
  background: #09090b;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  border: 1px solid #27272a;
}

/* FIX #83: consolidated from duplicate .prose-article pre + .highlight */
.prose-article pre,
.highlight {
  background: #09090b;
  border-radius: 8px;
}

.prose-article pre {
  border: 1px solid #27272a;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.prose-article pre code {
  background: none;
  padding: 0;
  color: #f4f4f5;
  font-size: inherit;
  border: none;
}

.prose-article hr {
  border: none;
  border-top: 1px solid #27272a;
  margin: 2rem 0;
}

/* FIX #37: images inside blog posts */
.prose-article img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem 0;
  border: 1px solid #27272a;
}

/* FIX #37: tables inside blog posts */
.prose-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.prose-article th,
.prose-article td {
  padding: 0.75rem 1rem;
  border: 1px solid #27272a;
  text-align: left;
}

.prose-article th {
  background: #09090b;
  color: #f4f4f5;
  font-weight: 500;
}

.prose-article td {
  color: #a1a1aa;
}

/* FIX #37: keyboard key styling */
.prose-article kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.8em;
  color: #f4f4f5;
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 4px;
  padding: 0.15em 0.4em;
  box-shadow: 0 1px 0 #3f3f46;
}

/* FIX #3: hide ¶ permalink anchors generated by markdown.extensions.toc
   Show on heading hover so they're still useful but never visible by default */
.prose-article .headerlink {
  opacity: 0;
  margin-left: 0.5rem;
  font-size: 0.8em;
  text-decoration: none;
  color: #34d399;
  transition: opacity 150ms ease;
}

.prose-article :is(h2, h3, h4, h5, h6):hover .headerlink {
  opacity: 1;
}

/* PYGMENTS SYNTAX HIGHLIGHTING */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr { color: #c792ea; }

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss { color: #c3e88d; }

.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs { color: #546e7a; font-style: italic; }

.highlight .n,
.highlight .nx { color: #f4f4f5; }

.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .il { color: #f78c6c; }

.highlight .nb,
.highlight .nf,
.highlight .nn { color: #34d399; }

.highlight .na,
.highlight .nc,
.highlight .nt { color: #ffcb6b; }

.highlight .o,
.highlight .ow { color: #89ddff; }

.highlight .p  { color: #a1a1aa; }