/**
 * The Monospace Web — adapted for prose.sh
 * Original by Oskar Wickström (MIT): https://github.com/owickstrom/the-monospace-web
 * Adapted to prose's DOM: body#post / body#blog, article.md, #posts.
 *
 * prose always loads /reset.css and /syntax.css before this file; this file
 * is loaded last and wins. with_styles:false (in _readme.md) drops prose's
 * own theme so only reset + syntax + this remain.
 **/
@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');

:root {
  --font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --line-height: 1.20rem;
  --border-thickness: 2px;
  --text-color: #000;
  --text-color-alt: #666;
  --background-color: #fff;
  --background-color-alt: #eee;

  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 800;

  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --text-color-alt: #aaa;
    --background-color: #000;
    --background-color-alt: #111;
  }
}

* {
  box-sizing: border-box;
}

* + * {
  margin-top: var(--line-height);
}

html {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  background: var(--background-color);
  color: var(--text-color);
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--line-height) 2ch;
  max-width: calc(min(1400px, round(down, 100%, 1ch)));
  line-height: var(--line-height);
  /* override prose reset.css body defaults */
  font-family: var(--font-family);
  overflow-x: hidden;
}

@media screen and (max-width: 480px) {
  :root { font-size: 14px; }
  body { padding: var(--line-height) 1ch; }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
  line-height: var(--line-height);
}

h1 {
  font-size: 2rem;
  line-height: calc(2 * var(--line-height));
  margin-bottom: calc(var(--line-height) * 2);
  text-transform: uppercase;
}
h2 { font-size: 1rem; text-transform: uppercase; }

/* Signature double-line rule */
hr {
  position: relative;
  display: block;
  height: var(--line-height);
  margin: calc(var(--line-height) * 1.5) 0;
  border: none;
  color: var(--text-color);
}
hr:after {
  display: block;
  content: "";
  position: absolute;
  top: calc(var(--line-height) / 2 - var(--border-thickness));
  left: 0;
  width: 100%;
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  height: 0;
}

a { text-decoration-thickness: var(--border-thickness); }
a:link, a:visited { color: var(--text-color); }

p {
  margin-bottom: var(--line-height);
  word-break: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

strong { font-weight: var(--font-weight-bold); }
em { font-style: italic; }

blockquote {
  border-left: var(--border-thickness) solid var(--text-color);
  padding-left: 2ch;
  margin-left: 0;
  color: var(--text-color-alt);
}

/* Tables rendered as ASCII-style boxes */
table {
  position: relative;
  top: calc(var(--line-height) / 2);
  width: calc(round(down, 100%, 1ch));
  border-collapse: collapse;
  margin: 0 0 calc(var(--line-height) * 2);
}
th, td {
  border: var(--border-thickness) solid var(--text-color);
  padding:
    calc((var(--line-height) / 2))
    calc(1ch - var(--border-thickness) / 2)
    calc((var(--line-height) / 2) - (var(--border-thickness)));
  line-height: var(--line-height);
  vertical-align: top;
  text-align: left;
}
table tbody tr:first-child > * {
  padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
}
th { font-weight: 700; }

img, video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  overflow: hidden;
}
img { color: var(--text-color-alt); }

details {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin-bottom: var(--line-height);
}
summary { font-weight: var(--font-weight-medium); cursor: pointer; }
details[open] summary { margin-bottom: var(--line-height); }
details ::marker { display: inline-block; content: '▶'; margin: 0; }
details[open] ::marker { content: '▼'; }
details :last-child { margin-bottom: 0; }

/* Code — plain monospace in a bordered box; neutralize syntax.css colors so
   it stays legible in dark mode and reads as monospace-plain. Delete the two
   .chroma rules below if you'd rather keep prose's syntax highlighting. */
pre {
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  margin: var(--line-height) 0;
  padding: var(--line-height) 1ch;
  border: var(--border-thickness) solid var(--text-color);
  background: var(--background-color-alt);
}
pre, code { font-family: var(--font-family); }
code { font-weight: var(--font-weight-medium); }
:not(pre) > code {
  background: var(--background-color-alt);
  padding: 0 0.5ch;
}
/* prose wraps code in .chroma on the <pre>, with syntax.css token colors, a
   per-theme background, and display:flex on each .line. Give the box one flat
   fill, drop token colors for plain mono, cancel the global sibling-margin
   inside code (otherwise every line double-spaces), and keep line numbers dim. */
pre.chroma { background: var(--background-color-alt) !important; }
.chroma * { background: transparent !important; margin-top: 0; }
.chroma, .chroma span { color: inherit !important; }
.chroma .ln {
  color: var(--text-color-alt) !important;
  border-right: 1px solid var(--text-color-alt);
}

figure { margin: calc(var(--line-height) * 2) 3ch; overflow-x: auto; overflow-y: hidden; }
figcaption { display: block; font-style: italic; margin-top: var(--line-height); }

ul, ol { padding: 0; margin: 0 0 var(--line-height); }
ul { list-style-type: square; padding: 0 0 0 2ch; }
ol { list-style-type: none; counter-reset: item; padding: 0; }
ol ul, ol ol, ul ol, ul ul { padding: 0 0 0 3ch; margin: 0; }
ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: var(--font-weight-medium);
}
li { margin: 0; padding: 0; }
li::marker { line-height: 0; }

::-webkit-scrollbar { height: var(--line-height); }

/* ───────────────────────────── prose-specific ───────────────────────────── */

/* Blog index + post meta header */
header h1 { margin-top: 0; }

/* article footer "last updated" + site footer */
article.md > footer p,
body > footer {
  color: var(--text-color-alt);
}

/* post metadata as a single-row table: [ date | cyclicircuit's blog | description ].
   The <p> holds: <time>, a "·" span (time + span), <a> blog link, <br>, then the
   description span (br + span). */
article.md > header p {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 var(--line-height);
  padding: 0;
  border: var(--border-thickness) solid var(--text-color);
  color: var(--text-color);
}
article.md > header p > time,
article.md > header p > a,
article.md > header p > br + span {
  margin: 0;
  padding: calc(var(--line-height) / 2) 1ch;
  line-height: var(--line-height);
}
article.md > header p > time,
article.md > header p > a {
  border-right: var(--border-thickness) solid var(--text-color);
  white-space: nowrap;
}
article.md > header p > br + span {
  flex: 1 1 20ch;
  color: var(--text-color-alt);
}
article.md > header p > time + span,   /* the middot separator */
article.md > header p > br { display: none; }

/* table of contents as a boxed table: title cell above, list cell below.
   DOM is <h2 id="toc">…</h2> followed by <ul id="toc-list">…</ul> (siblings). */
#toc {
  margin: calc(var(--line-height) * 1.5) 0 0;
  padding: calc(var(--line-height) / 2) 1ch;
  border: var(--border-thickness) solid var(--text-color);
  background: var(--background-color-alt);
  font-size: 1rem;
}
#toc-list {
  margin: 0 0 calc(var(--line-height) * 2);
  padding: calc(var(--line-height) / 2) 1ch calc(var(--line-height) / 2) 3ch;
  border: var(--border-thickness) solid var(--text-color);
  border-top: none;
}
#toc-list ul { margin: 0; }

/* blog index nav (rss, etc.) */
body#blog nav { margin-top: var(--line-height); }
body#blog nav a { margin-right: 2ch; }

/* blog index: post list as date + title rows */
#posts ul[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
#posts li { margin: 0; padding: 0; }
#posts article.post {
  display: flex;
  gap: 2ch;
  align-items: baseline;
  margin: 0;
  line-height: var(--line-height);
  padding: calc(var(--line-height) / 4) 0;
}
#posts article.post > * { margin: 0; }
#posts article.post time {
  flex: 0 0 11ch;
  color: var(--text-color-alt);
}

@media screen and (max-width: 480px) {
  #posts article.post { flex-direction: column; gap: 0; }
  #posts article.post time { flex-basis: auto; }
}

/* site footer: "published with prose.sh" */
body > footer { margin-top: calc(var(--line-height) * 2); }