/* ==========================================================================
   memori tty01 — Rendered markdown (cat output)
   A post is still text on a tube: no cards, no elevation, hairlines and
   ember only. Headings keep their literal # glyphs in faint ink so the
   source peeks through the render.
   ========================================================================== */

.md {
  color: var(--soft);
  max-width: 76ch;
}
.md > * + * {
  margin-top: 1em;
}

.md h1,
.md h2,
.md h3,
.md h4 {
  color: var(--cream);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.md h1 { font-size: 1.18em; margin-top: 1.6em; }
.md h2 { font-size: 1.08em; margin-top: 1.6em; }
.md h3 { font-size: 1em; margin-top: 1.4em; }
.md h4 { font-size: 1em; font-weight: 500; margin-top: 1.4em; }
.md h1::before,
.md h2::before,
.md h3::before,
.md h4::before {
  color: var(--faint);
  font-weight: 400;
  margin-right: 0.35em;
}
.md h1::before { content: "#"; }
.md h2::before { content: "##"; }
.md h3::before { content: "###"; }
.md h4::before { content: "####"; }

.md p {
  overflow-wrap: anywhere;
}
/* The one italic accent word per headline — the brand's serif trick,
   translated to the tube as ember italic. */
.md h1 em,
.md h2 em {
  font-style: italic;
  color: var(--accent-hi);
}

.md strong {
  color: var(--cream);
  font-weight: 600;
}
.md em {
  font-style: italic;
}

.md a {
  color: var(--accent-hi);
}
.md a::after {
  content: "↗";
  font-size: 0.8em;
  color: var(--faint);
  margin-left: 1px;
}

/* code — inline and fenced. Wells, hairlines, no syntax colors:
   the terminal already has an accent. */
.md code {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
}
.md :not(pre) > code {
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  border: 1px solid var(--hair);
  border-radius: var(--radius-s);
  padding: 0.05em 0.35em;
  color: var(--cream);
}
.md pre {
  background: var(--well);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  padding: 0.9em 1.1em;
  overflow-x: auto;
  line-height: 1.6;
}
.md pre code {
  color: var(--soft);
  white-space: pre;
}
.md pre .ln {
  color: var(--faint);
}

.md ul,
.md ol {
  padding-left: 1.6em;
}
.md ul {
  list-style: none;
}
.md ul > li {
  position: relative;
}
.md ul > li::before {
  content: "—";
  position: absolute;
  left: -1.6em;
  color: var(--accent);
}
.md ol {
  list-style: decimal;
}
.md ol > li::marker {
  color: var(--accent-hi);
}
.md li + li {
  margin-top: 0.35em;
}

.md blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.1em 0 0.1em 1.1em;
  font-style: italic;
  color: var(--cream);
}

.md hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 1.6em 0;
}

.md table {
  border-collapse: collapse;
  font-size: 0.94em;
  display: block;
  overflow-x: auto;
}
.md th,
.md td {
  border: 1px solid var(--hair);
  padding: 0.3em 0.8em;
  text-align: left;
}
.md th {
  color: var(--cream);
  font-weight: 600;
  border-bottom: 1px solid var(--hair-strong);
}

/* code fence language tag */
.md .pre-wrap-el {
  position: relative;
}
.md .lang {
  float: right;
  color: var(--faint);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}