/* reason.direct dispatch theme. No web fonts, no third-party requests. */
:root {
  --bg: #050507;
  --card: #0c0c10;
  --text: #d8d8de;
  --dim: #7c7c88;
  --border: #22222c;
  --magenta: #ff00ff;
  --cyan: #00ffff;
  --green: #00ff41;
  --mono: ui-monospace, "Share Tech Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--mono);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--magenta); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: 720px; margin: 0 auto; padding: 20px;
  border-bottom: 1px solid var(--border);
}
.brand { color: var(--magenta); font-weight: bold; letter-spacing: 0.04em; }
.bar-links a { margin-left: 18px; color: var(--dim); }
.bar-links a:hover { color: var(--magenta); }

.intro { padding: 48px 0 8px; }
.intro h1, .post h1 { margin: 0 0 8px; font-size: 1.8rem; letter-spacing: 0.04em; }
.intro p { margin: 0; color: var(--dim); }

.list { padding: 24px 0 48px; }
.item {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.item time, .post time { color: var(--dim); font-size: 0.85rem; }
.item h2 { margin: 4px 0 6px; font-size: 1.2rem; }
.item p { margin: 0; color: var(--text); }
.empty { color: var(--dim); }

.post { padding: 48px 0 24px; }
.content { margin-top: 24px; }
.content h2, .content h3 { margin-top: 2em; }
.content blockquote { margin: 1.5em 0; padding-left: 16px; border-left: 3px solid var(--magenta); color: var(--dim); }
.content pre, .content code { background: var(--card); border: 1px solid var(--border); }
.content code { padding: 1px 5px; }
.content pre { padding: 14px; overflow-x: auto; }
.content pre code { border: 0; padding: 0; }
.content img { max-width: 100%; height: auto; }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

.subscribe { margin: 28px 0; padding: 16px 20px; border: 1px solid var(--border); background: var(--card); }
.subscribe-label { display: block; margin-bottom: 8px; color: var(--dim); font-size: 0.85rem; }
.subscribe-row { display: flex; gap: 8px; }
.subscribe input {
  flex: 1; min-width: 0; padding: 9px 12px; font: inherit;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.subscribe input:focus { outline: 1px solid var(--cyan); }
.subscribe button {
  padding: 9px 16px; font: inherit; cursor: pointer;
  background: transparent; color: var(--green); border: 1px solid var(--green);
}
.subscribe button:hover { background: var(--green); color: var(--bg); }
.subscribe-msg { display: none; margin: 10px 0 0; font-size: 0.9rem; }
.subscribe.success .ok { display: block; color: var(--green); }
.subscribe.error .err { display: block; color: var(--magenta); }
.subscribe.loading button { opacity: 0.5; }

.after, .back { margin-top: 8px; }
.pagination, .foot { color: var(--dim); font-size: 0.85rem; }
.foot { display: flex; justify-content: space-between; padding: 32px 20px; border-top: 1px solid var(--border); margin-top: 32px; }
@media (max-width: 520px) { .subscribe-row { flex-direction: column; } }

/* Editor image widths (required by Ghost). */
.kg-width-wide { width: min(960px, 100vw - 40px); margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.kg-width-wide img, .kg-width-full img { width: 100%; }