/* ============================================================
   Brutalist Paper — article prose (rendered markdown bodies)
   demo-v3 had no article body (ITboost is marketing-only), so this
   is the one authored sheet. Scoped to `.prose`. Uses only var()
   tokens from tokens.css — no hard-coded hex.
   Markdown renderer extensions: extra, tables, sane_lists, toc.
   ============================================================ */

.prose {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  max-width: 72ch;
}

/* Vertical rhythm: every direct child separated by space. Headings get
   more air above (they announce a new beat). */
.prose > * + * { margin-top: var(--space-5); }
.prose > h2 + *,
.prose > h3 + * { margin-top: var(--space-4); }
.prose > h2 { margin-top: var(--space-8); }
.prose > h3 { margin-top: var(--space-7); }

/* Headings inherit base.css Archivo 900 UPPERCASE. Prose adds a thick
   top rule under h2 so sections announce themselves like the site motif. */
.prose h2 {
  padding-top: var(--space-5);
  border-top: var(--border-thick);
  max-width: 24ch;
}
.prose h3 {
  max-width: 30ch;
}
.prose h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lead);
  text-transform: none;
  letter-spacing: 0;
}

.prose p {
  max-width: 65ch;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Inline emphasis */
.prose strong,
.prose b { font-weight: 700; color: var(--ink); }
.prose em,
.prose i { font-style: italic; }

/* Links — electric blue, underline grows on hover (snappy). */
.prose a {
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-fast), color var(--t-fast);
}
.prose a:hover {
  color: var(--accent-strong);
  background-size: 100% 2px;
  background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
}

/* Lists — ink square markers (brutalist, not bullets). */
.prose ul,
.prose ol {
  max-width: 65ch;
  padding-left: var(--space-5);
}
.prose ul { list-style: none; }
.prose ul > li {
  position: relative;
  padding-left: var(--space-4);
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ink);
}
.prose ol { list-style: none; counter-reset: brutalist-ol; }
.prose ol > li {
  counter-increment: brutalist-ol;
  position: relative;
  padding-left: var(--space-6);
}
.prose ol > li::before {
  content: counter(brutalist-ol, decimal-leading-zero) '/';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--accent-strong);
}
.prose li + li { margin-top: var(--space-3); }
.prose li::marker { color: var(--ink); }

/* Blockquote — thick left border, mono accent label feel, soft tint. */
.prose blockquote {
  margin-inline: 0;
  padding: var(--space-5) var(--space-6);
  border: var(--border-thin);
  border-left: var(--border-thick);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.prose blockquote p { max-width: none; }
.prose blockquote p + p { margin-top: var(--space-3); }

/* Tables — exposed grid, mono header row (ink fill), thick cell borders. */
.prose table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  border: var(--border-thick);
  font-size: var(--fs-small);
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
@media (max-width: 600px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 4px 0 var(--ink);
  }
}
.prose thead th {
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin);
  border-color: var(--bg);
}
.prose tbody th,
.prose tbody td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin);
  vertical-align: top;
  text-align: left;
}
.prose tbody th {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2);
}
.prose tbody td { word-break: break-word; }
.prose tbody tr:nth-child(even) td { background: var(--surface); }

/* Inline code — mono, surface chip, thin border. */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  background: var(--surface-2);
  border: var(--border-thin);
  color: var(--ink);
  white-space: nowrap;
}

/* Code blocks — ink fill, paper text, hard shadow, mono. */
.prose pre {
  margin: 0;
  padding: var(--space-5);
  background: var(--ink);
  color: var(--bg);
  border: var(--border-thick);
  box-shadow: 6px 6px 0 var(--accent);
  overflow-x: auto;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  white-space: pre;
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* Images — thick border + hard offset shadow, block. */
.prose img {
  width: 100%;
  max-width: none;
  border: var(--border-thick);
  box-shadow: 6px 6px 0 var(--ink);
  margin-inline: 0;
}
.prose figure { margin: 0; }
.prose figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Horizontal rule — thick ink bar (exposed grid motif). */
.prose hr {
  border: 0;
  height: var(--border-thick);
  background: var(--ink);
  margin-block: var(--space-7);
}