/* Flits — terminal stylesheet
   Pure black, monospace, markdown-rendered-as-plaintext aesthetic. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: #000;
  color-scheme: dark;
}

body {
  background: #000;
  color: #e8e8e8;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #8a8df8; color: #000; }

.term {
  max-width: 74ch;
  margin: 0;
  padding: 64px 24px 120px 56px;
}

@media (max-width: 520px) {
  body { font-size: 13.5px; }
  .term { padding: 48px 18px 88px; }
}

/* ---- Title with blinking block cursor ---- */

.title {
  font-size: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cursor {
  display: inline-block;
  width: 0.65ch;
  height: 1.05em;
  margin-left: 0.4ch;
  background: #e8e8e8;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ---- Section separator: ~~~ ---- */

.sep {
  margin: 1.9em 0;
  color: #e8e8e8;
  user-select: none;
}

/* ---- Lines ---- */

.kv {
  margin: 0;
  text-transform: uppercase;
}

.li {
  margin: 0 0 0 1ch;
  padding-left: 2ch;
  text-indent: -2ch;
}

.note { color: #8a8a8a; }

.rip { text-decoration: line-through; }

.sub {
  margin-left: 3ch;
  color: #8a8a8a;
}

/* ---- Markdown-style links: [Label](url) — only the url is "live" ---- */

a.md {
  color: inherit;
  text-decoration: none;
}

a.md .u {
  color: #8a8df8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
}

a.md:hover .u,
a.md:focus-visible .u {
  color: #b9bbff;
}

a.plain {
  color: inherit;
  text-decoration: none;
}

a.plain:hover,
a.plain:focus-visible {
  color: #b9bbff;
}

/* ---- Prose (notes, privacy, imprint) ---- */

.prose p {
  margin: 0 0 1.7em;
  max-width: 68ch;
}

.prose h2,
.prose h3 {
  font-size: inherit;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 1.7em;
}

.prose h3 { color: #a8a8a8; }

.prose p.kv { margin: 0; }

.prose em { font-style: italic; }

.prose .li { margin-bottom: 0; }

pre.code {
  font-family: inherit;
  font-size: inherit;
  color: #a8a8a8;
  margin: 0 0 1.7em;
  overflow-x: auto;
}

/* ---- Images ---- */

.frame {
  margin: 0 0 1.7em;
}

.frame img {
  display: block;
  max-width: 100%;
  border: 1px solid #2a2a2a;
  filter: grayscale(1) contrast(1.05);
}

.frame.portrait img { max-width: 220px; }

.frame figcaption {
  color: #8a8a8a;
  margin-top: 0.4em;
}