/* inspired by https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css */

/* ===========================================================================
   THEME — "ink". Every color on the site is defined here; tweak the
   palette from this one block and it propagates everywhere via var(--name).
   (See CLAUDE.md for how to re-enable the dev theme switcher for exploring
   alternatives.)
   =========================================================================== */
:root {
  /* surfaces */
  --bg:           #121212;                /* page background */
  --bg-nav:       rgba(18, 18, 18, 0.95); /* sticky nav bar (translucent) */
  --bg-code:      #1a1a1a;                /* code block background */
  --bg-callout:   #1d1d1d;                /* callouts + tag pills */

  /* text */
  --text:         #e6e6e6;                /* body text */
  --text-muted:   #9a9a9a;                /* headers, h6, blockquotes, captions */
  --text-code:    #e6e6e6;                /* code block text */
  --text-callout: #e6e6e6;                /* callout text */
  --text-inline:  #7fd1c1;                /* inline `code` */

  /* links */
  --link:         #7aa2f7;                /* unvisited links */
  --link-visited: #5e7bbf;                /* visited links */
  --nav-link:     #e6e6e6;                /* top navigation links */
  --accent:       #7aa2f7;                /* hover accent (mistwatch) */

  /* lines */
  --rule:         #3a3a3a;                /* visible rules: hr, header underline */
  --border:       #2a2a2a;                /* subtle dividers + tag borders */
}

.markdown-body .post-list-header {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier;
  font-weight: normal;
  letter-spacing: 3px;
  text-transform: lowercase;
  font-size: 1.5rem;
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

.post-list-header::after {
  content: "";
  display: block;
  border: 1px solid var(--rule);
  width: 80%;
  text-align: left;
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.7;
  color: var(--text);
  font-family: Verdana, Georgia, sans-serif;
  word-wrap: break-word;
  box-sizing: border-box;
  min-width: 200px;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px 10px 40px;
  font-size: 16px;
}
body {
  margin: 0;
}

.navigation-header {
  display: flex;
  padding-top: 30px;
  padding-bottom: 15px;
  margin-bottom: 20px;

  background-color: var(--bg-nav);
  position: sticky;
  top: -15px;
}

@font-face {
  font-family: "CinzelDecorative";
  font-display: auto;
  src: url('data:font/woff2;base64,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') format('woff2');
}

.markdown-body a {
  background-color: transparent;
  color: var(--link);
  text-decoration: none;
  text-decoration: underline;
}

.markdown-body a:active,
.markdown-body a:hover {
  outline-width: 0;
  text-decoration: underline;
}

.markdown-body a:visited {
  color: var(--link-visited);
}

.navigation-header a.light-link.focused {
  text-decoration: underline;
  color: var(--text-muted);
}


.navigation-header a.light-link {
  font-size: 16px;
  display: inline-block;
  font-weight: normal;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier;
  letter-spacing: 5px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: var(--nav-link);
}


.navigation-header a:first-child {
  margin-right: auto;
}

.navigation-header a:not(:first-child):not(:last-child) {
  margin: 0 auto;
}

.navigation-header a:last-child {
  margin-left: auto;
}

.navigation-header {
  view-transition-name: --navigation-header;
}


a.mistwatch-link.light-link {
  -webkit-transition: color 500ms ease-out;
  -ms-transition: color 500ms ease-out;
  transition: color 500ms ease-out;
  text-shadow: 2px 2px black;
}

a.mistwatch-link.light-link:hover {
  color: var(--accent);
}


.navigation-header a.light-link:last-child {
  padding-right: 0;
}


.markdown-body strong {
  font-weight: bolder;
}

.markdown-body hr {
  box-sizing: content-box;
  border: 0;
  margin: 15px auto;
  max-width: 80%;
  overflow: hidden;
  height: 1px;
  padding: 0;
}

.markdown-body hr::before {
  display: table;
  content: "";
}

.markdown-body hr::after {
  display: table;
  clear: both;
  content: "";
}

@media screen and (max-width: 640px) {
  .navigation-header a.light-link {
    font-size: 14px;
    letter-spacing: 0;
  }
}

.markdown-body strong {
  font-weight: 600;
}

.markdown-body h1 {
  margin: 0.67em 0;
  font-weight: 600;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 {
  padding-bottom: 0.3em;
  font-size: 1.3em;
}

.markdown-body h2 {
  padding-bottom: 0.3em;
  font-size: 1.2em;
}

.markdown-body h3 {
  font-size: 1.1em;
}

.markdown-body h4 {
  font-size: 1em;
}

.markdown-body h5 {
  font-size: 0.875em;
}

.markdown-body h6 {
  font-size: 0.85em;
  color: var(--text-muted);
}

.markdown-body blockquote {
  margin: 0;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
  list-style-type: lower-alpha;
}

.markdown-body::before {
  display: table;
  content: "";
}

.markdown-body::after {
  display: table;
  clear: both;
  content: "";
}


.markdown-body > *:last-child {
  margin-bottom: 0 !important;
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: var(--text-muted);
  border-left: 0.25em solid var(--rule);
}

.markdown-body blockquote > :first-child {
  margin-top: 0;
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body li {
  word-wrap: break-word;
}

.markdown-body li > p {
  margin-top: 16px;
}

.markdown-body li + li {
  margin-top: 0.25em;
}

.markdown-body img {
  max-width: 80%;
  box-sizing: content-box;
  border-style: none;
}

p:has(> img) {
  text-align: center;
}

.markdown-body img[align="right"] {
  padding-left: 20px;
}

.markdown-body img[align="left"] {
  padding-right: 20px;
}

.markdown-body pre > code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: initial;
  line-height: inherit;

}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
}

.markdown-body code,
.markdown-body pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  font-size: 1em;
}

.markdown-body code {
  color: var(--text-inline);
}

#main {
  background: var(--bg);
}

html {
  overflow-y: scroll;
  scroll-padding-top: 80px;
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

.markdown-body {
  background: var(--bg);
  color: var(--text);
}
.markdown-body pre {
  background: var(--bg-code);
  border-radius: 10px;
  box-shadow: 2px 4px 10px #010101, inset -1px -1px 1px #010101;
}
.markdown-body pre code {
  color: var(--text-code);
  font-size: 14px;
}

body {
  background: var(--bg);
  min-height: 100vh;
}

.markdown-body hr {
  background-color: var(--rule);
}

.markdown-body a {
  font-weight: bold;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: var(--text-muted);
  border-left: 0.25em solid var(--rule);
}


/* CSS for block-quote updates */

.callout {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex: 1 1 0;
  width: 100%;
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--bg-callout);
  border-radius: 10px;
  box-shadow: 2px 4px 10px #010101, inset -1px -1px 1px #010101;
  color: var(--text-callout);
}


.callout p:last-child {
  margin-bottom: 0;
}

/* emoji column */
.callout-emoji {
  font-size: 1.6rem;
  width: 1.6rem;
  flex: 0 0 auto;
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
}

.callout-right {
  flex: 1 1 0;
  word-wrap: break-word;
  min-width: 0;
  margin-right: calc(26px + 0.75rem); /* trying to match size of emoji on left */
}

@media screen and (max-width: 640px) {
  .callout-right {
    margin-right: 0
   }

  .callout {
    display: block;
  }

  .callout-emoji {
    float: left;
    margin-right: 10px;
  }
  
}

/* optional title */
.callout-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

@media screen and (max-width: 640px) {
  .markdown-body {
    padding: 0 15px 15px 15px;
  }

}

@media screen and (max-width: 960px) {
  .markdown-body {
    font-size: 1.3em;
    padding: 0 20px 20px 20px;
  }


  .markdown-body img {
    max-width: 100%;
  }
}

@media screen and (max-width: 1200px) {
  .markdown-body {
    font-size: 1em;
  }
}

.post-tags {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.post-tags a {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.5rem;
  background: var(--bg-callout);
  border-radius: 3px;
  color: var(--text);
  text-decoration: none;
}
.post-tags a:hover {
  background: var(--border);
}

.tag-list {
  list-style: none;
  padding-left: 0;
}
.tag-list li {
  margin: 0.5rem 0;
}
.tag-count {
  color: var(--text-muted);
  font-size: 0.9rem;
}