@charset "UTF-8";
/* Main styles
 */
* {
  border: 0;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

svg {
  color: inherit; }

html {
  background-color: var(--body-bg-color);
  scrollbar-gutter: stable; }

body {
  font-family: var(--body-primary-font-family);
  font-size: var(--body-primary-font-size);
  line-height: 1.6em;
  color: var(--body-fg-color);
  background-color: var(--body-bg-color);
  max-width: 800px;
  margin: auto;
  /* iOS Safari will scroll down the size of SOME text WHENEVER IT FUCKING WANTS TO.
   * Sometimes that will happen differetly in two columns of a table,
   * or on two adjacent lines in highlighted code.
   * ... let's turn that shit off please and thank u
   */
  -webkit-text-size-adjust: none;
  /* I guess this isn't just iOS Safari
   */
  -moz-text-size-adjust: none;
  text-size-adjust: none; }

body.proofread-mode {
  font-family: var(--body-proofread-font-family);
  font-size: var(--body-proofread-font-size); }

@media (max-width: 750px) {
  body {
    font-size: 0.875em;
    padding: 0 1.25rem; } }

@media (max-width: 400px) {
  body {
    font-size: 0.75em; } }

p {
  margin: 1.25em 0; }

img {
  margin: 10px auto 10px auto;
  max-width: 100%;
  display: block; }

/* Chroma surrounds code blocks with a <div class="highlight"> element.
 */
pre, code, div.highlight {
  border-radius: 3px; }

/* Inline <pre> and <code> should have a reduced font size,
 * because monospace fonts are taller than non-mono fonts at the same size.
 */
pre, code {
  font-family: var(--body-monospace-font-family);
  font-weight: 500;
  font-size: 0.8125em;
  background-color: var(--code-bg-color);
  color: var(--code-fg-color); }

pre {
  margin-top: 0;
  margin-bottom: 1em;
  word-wrap: normal;
  padding: 1em;
  overflow: auto;
  line-height: 145%; }

/* Inline code elements, like inline `backticks` in Markdown, but not fenced code blocks.
 */
code:not(pre > code) {
  padding: 0 0.25em;
  font-weight: 600; }

/* Code fences
 */
pre code {
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0; }

pre code::before,
pre code::after {
  content: normal; }

aside#toc {
  background: var(--toc-bg-color);
  border-radius: 3px;
  font-size: 0.8em;
  float: right;
  max-width: 33%;
  padding: 0.5em;
  margin: 1em;
  line-height: 160%; }

em, q, em, dfn {
  font-style: italic; }

strong {
  font-weight: 600; }

q:before {
  content: "\201C"; }

q:after {
  content: "\201D"; }

del, s {
  text-decoration: line-through; }

blockquote {
  border-left: 10px solid var(--blockquote-left-border-color);
  margin: 1.5em 0.5em;
  padding: 0.5em 0.5em; }
  blockquote p {
    margin: 0; }

hr {
  width: 40%;
  height: 1px;
  background: #403c3b;
  margin: 25px auto; }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 1em 0;
  color: var(--header-fg-color); }

h1 {
  font-size: 180%; }

h2 {
  font-size: 150%; }

h3 {
  font-size: 120%; }

h4 {
  font-size: 100%; }

/* Ordered and unordered list styling
 *
 * In ul li:before, it needs display: inline-block but in ol li:before, it doesn't.
 * In the unordered case, without inline-block the first line of a multi-line list item
 * is de-indented slightly and looks off.
 * However, in the ordered case, WITH inline-block the first line of a multi-line list item
 * is indented slightly and looks off.
 */
ul {
  list-style-type: none; }
  ul li {
    padding-left: 2em; }
  ul li:before {
    content: "\00BB \0020";
    margin-left: -1em;
    width: 1em;
    display: inline-block;
    position: absolute; }

ol {
  list-style-type: none;
  counter-reset: item; }
  ol li {
    position: relative;
    padding-left: 2em; }
  ol li:before {
    content: counter(item) ".";
    counter-increment: item;
    position: absolute;
    margin-left: -1.5em;
    margin-right: 0.5em;
    width: 1em;
    font-size: 85%; }

button, input[type="submit"] {
  background-color: var(--button-bg-color);
  color: var(--button-fg-color);
  padding: 0.25em 0.5em;
  border-radius: 5px; }

footer {
  margin: 8rem 0 0 0; }
  footer p {
    margin: 1em 0;
    font-size: 0.5em; }

footer.newsletter-email-footer p {
  font-size: 1em; }

dl {
  margin: 1em 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 20% 80%;
  gap: 0.5em;
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
  border: 1px solid var(--body-fg-color-deemphasize-nontext); }
  dl dt {
    font-weight: bold; }
  dl dd {
    margin-left: 1em; }
  dl hr {
    grid-column: 1 / -1;
    border: none;
    height: 1px;
    background-color: var(--body-fg-color-deemphasize-nontext); }

.dark-mode-invert-image-color {
  filter: var(--dark-mode-image-inverter-filter); }

span.post-stamp {
  font-size: .6em;
  font-variant-caps: small-caps;
  font-weight: bold;
  padding: 0 0.25em;
  color: var(--button-bg-color-hover);
  border: 1px solid var(--button-bg-color-hover);
  border-radius: 4px;
  margin-left: 0.5em;
  vertical-align: middle; }

/* I use <span class="highlight"> to highlight text.
 * TODO: change this to the .mrlhilite class, Chroma uses .highlight for syntax highlighting.
 */
.highlight, .mrlhilite {
  background-color: var(--highlight-bg-color); }

details {
  padding: 0 .5em;
  margin: 0;
  background-color: var(--toc-bg-color);
  border-radius: 3px; }
  details summary {
    cursor: pointer;
    color: var(--body-fg-color-deemphasize-text); }

/* An element with the class rss-only should not be displayed in HTML at all.
 * RSS doesn't read CSS, so this is a way to hide elements from the RSS feed.
 * RSS readers sometime support limited inline styles,
 * so an element that should render only in RSS might also have a style="..." attribute.
 */
.rss-only {
  display: none; }

/* Blog post styling
 */
h1.p-name {
  display: table;
  line-height: 1.6em; }
  h1.p-name span.post-cistercian-date {
    display: table-cell;
    width: 2em; }
  h1.p-name span.title {
    display: table-cell; }

.blog-post-body-desc,
.blog-post-body-date {
  font-size: 0.8em;
  color: var(--body-metadata-fg-color); }
  .blog-post-body-desc time,
  .blog-post-body-date time {
    color: var(--body-metadata-fg-color); }

/* Blog Posts Listing */
h3.blog-posts-year-heading {
  color: var(--body-fg-color-deemphasize-text); }

ul.blog-posts-listing {
  margin-left: 2em;
  border-collapse: collapse; }
  ul.blog-posts-listing li:before {
    content: ""; }
  ul.blog-posts-listing li a {
    display: grid;
    grid-template-columns: 4em 1fr;
    grid-template-rows: auto auto;
    width: 100%;
    border: none; }
    ul.blog-posts-listing li a span.post-cistercian-date {
      grid-column: 1;
      text-align: right;
      width: 2em; }
    ul.blog-posts-listing li a span.post-title {
      grid-column: 2;
      font-weight: bold; }
    ul.blog-posts-listing li a span.post-classification {
      margin-left: 2em;
      font-size: 65%;
      color: var(--body-metadata-fg-color);
      display: block; }
    ul.blog-posts-listing li a span.post-description {
      grid-column: 2;
      grid-row: 2;
      font-size: 85%;
      color: var(--body-metadata-fg-color);
      display: block;
      margin: 0 0 0.75em 0; }

ul.til-posts-listing {
  margin-left: 2em;
  border-collapse: collapse; }
  ul.til-posts-listing li {
    display: grid;
    grid-template-columns: 4em 1fr;
    grid-template-rows: auto auto; }
    ul.til-posts-listing li:before {
      content: ""; }
    ul.til-posts-listing li span.post-cistercian-date {
      grid-column: 1;
      text-align: right;
      width: 2em; }
    ul.til-posts-listing li span.post-title {
      grid-column: 2;
      font-weight: bold; }
    ul.til-posts-listing li span.post-classification {
      grid-column: 2;
      grid-row: 2;
      font-size: 65%;
      color: var(--body-metadata-fg-color);
      display: block; }
      ul.til-posts-listing li span.post-classification a {
        padding: 0.25em;
        border: 1px solid var(--link-bg-color); }
    ul.til-posts-listing li span.post-description {
      grid-column: 2;
      grid-row: 2;
      font-size: 85%;
      color: var(--body-metadata-fg-color);
      display: block;
      margin: 0 0 0.75em 0; }

.project-taxonomy-related-posts-title {
  font-size: 75%;
  font-weight: normal; }

.books-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0; }
  .books-list li {
    aspect-ratio: 2/3;
    width: 100%;
    margin: 0;
    padding: 0; }
  .books-list li:before {
    content: ""; }
  .books-list a {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .books-list a:hover {
    z-index: 10;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
  .books-list a:hover,
  .books-list a:hover * {
    color: white;
    background-color: transparent; }
  .books-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0; }
  .books-list img.book-cover-unfinished {
    filter: grayscale(100%) brightness(50%); }

.book-cover-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  white-space: nowrap; }

/* Container to wrap the dl and img */
section.book-metadata {
  display: flex;
  gap: 2rem;
  align-items: flex-start; }
  section.book-metadata dl {
    margin: 0; }
    section.book-metadata dl li {
      padding-left: 1em; }
  section.book-metadata a:has(> img) {
    border: none; }
  section.book-metadata a:has(> img):hover {
    background-color: transparent; }
  section.book-metadata img {
    max-width: 200px;
    height: auto;
    margin-top: 0; }

@media (max-width: 600px) {
  section.book-metadata {
    flex-direction: column; }
    section.book-metadata dl {
      order: 2; }
    section.book-metadata a {
      order: 1;
      margin: 1em auto; } }

aside.callout {
  padding: 1em;
  margin: 1em 0;
  border: 1px solid var(--body-fg-color-deemphasize-nontext);
  border-radius: 3px; }
  aside.callout h3.callout-header {
    font-weight: bold;
    margin-top: 0; }

aside.callout-tip {
  background-color: var(--callout-tip-bg-color); }

aside.callout-warning {
  background-color: var(--callout-warning-bg-color); }

/* Cistercian CSS
 */
.cistercian {
  font-family: var(--body-cistercian-font-family);
  font-weight: normal;
  /* Bold doesn't work well with Claivo in Safari :/ */
  /* font-size: .9em; */ }

/* It's... compatible... it's a compat... table... ugh
 */
.compattable {
  display: table; }

.compattable-row-spacer {
  display: table-row;
  height: 2em; }

.compattable-row {
  display: table-row; }

.compattable-cell {
  display: table-cell;
  padding-left: 2em; }

.devmodenav {
  position: absolute;
  top: 0;
  left: 2em;
  justify-content: center;
  margin: 3em 0 0 0; }
  .devmodenav ul.devmodenav-links {
    padding: 0 1em 2em 0;
    margin: 0;
    border: 1px solid var(--devmode-emphasize-border-color); }
    .devmodenav ul.devmodenav-links li {
      list-style-type: none;
      font-size: 0.75em;
      line-height: 1.75em; }
      .devmodenav ul.devmodenav-links li.devmode-title {
        color: var(--devmode-emphasize-fg-color); }
      .devmodenav ul.devmodenav-links li#ogimage-item > img {
        display: none;
        pointer-events: none;
        object-fit: cover; }
      .devmodenav ul.devmodenav-links li a {
        color: var(--body-fg-color-deemphasize-text); }
    .devmodenav ul.devmodenav-links li:before {
      content: ""; }

@media (max-width: 1200px) {
  .devmodenav {
    display: flex;
    position: static; } }

figure figcaption {
  font-size: 0.8em;
  color: var(--body-fg-color-deemphasize-text); }

/* Make the figure stand out from the background a bit */
figure.standout {
  text-align: center; }

figure.sidebyside > figcaption {
  margin-top: 2rem; }

figure.sidebyside .image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start; }
  figure.sidebyside .image-grid figure {
    display: flex;
    flex-direction: column;
    height: 100%; }
  figure.sidebyside .image-grid img, figure.sidebyside .image-grid svg {
    width: 100%;
    max-width: 100px;
    height: auto;
    object-fit: contain;
    margin: 1em auto;
    padding: 0;
    display: block;
    flex: 1; }
  figure.sidebyside .image-grid figcaption {
    margin-top: auto;
    padding-top: 10px; }

.font-mauibabe {
  font-family: "Sail", cursive;
  margin: 0 0.2em;
  font-size: 1.5em; }

/* For /foci
 */
main.focus-content {
  margin: 8em 0 0 0;
  font-size: 1rem;
  line-height: 1.5; }
  main.focus-content h1, main.focus-content h2 {
    text-align: center; }

.focus-preview {
  margin: 4em 0; }
  .focus-preview .focus-preview-label {
    font-size: 85%;
    color: var(--body-fg-color-deemphasize-text);
    display: block;
    text-align: center;
    margin: 0;
    padding: 0; }
  .focus-preview .focus-frame-grandparent {
    /* Set an aspect ratio for the iframe here.
    *
    * The iframe will be displayed in proportion to a normal screen size like 1920x1200,
    * scaled down to fit on the screen,
    * to give a preview of what the site might look like as a desktop background.
    *
    * The padding-bottom hack is used to maintain the aspect ratio of the iframe.
    */
    --screen-width: 1920px;
    --screen-height: 1200px;
    --screen-scale: 0.5;
    --scaled-height: calc(var(--screen-height) * var(--screen-scale));
    height: var(--scaled-height);
    display: flex;
    justify-content: center; }
    .focus-preview .focus-frame-grandparent .focus-frame-container {
      position: relative;
      margin: 0 auto;
      transform: scale(var(--screen-scale));
      transform-origin: top center; }
      .focus-preview .focus-frame-grandparent .focus-frame-container a {
        display: flex;
        border: 2px solid var(--link-bg-color);
        padding: 0;
        margin: 0; }
      .focus-preview .focus-frame-grandparent .focus-frame-container a:hover, .focus-preview .focus-frame-grandparent .focus-frame-container a:hover:visited {
        background-color: inherit; }
      .focus-preview .focus-frame-grandparent .focus-frame-container iframe {
        width: var(--screen-width);
        height: var(--screen-height);
        border: 2px solid var(--body-fg-color-deemphasize-nontext);
        margin: 0;
        padding: 0;
        pointer-events: none; }

/* Add media queries to adjust the scale of the iframe for smaller screens
 *
 * When doing this, we must recalculate the aspect ratio and the scaled height,
 * or it will use the original values from the parent!
 *
 * We also need to adjust the border width to keep it looking the same.
 */
@media (max-width: 1024px) {
  .focus-preview .focus-frame-grandparent {
    --screen-scale: 0.25;
    --scaled-height: calc(var(--screen-height) * var(--screen-scale)); }
    .focus-preview .focus-frame-grandparent .focus-frame-container iframe {
      border: 4px solid var(--body-fg-color-deemphasize-nontext); } }

@media (max-width: 512px) {
  .focus-preview .focus-frame-grandparent {
    --screen-scale: 0.125;
    --scaled-height: calc(var(--screen-height) * var(--screen-scale)); }
    .focus-preview .focus-frame-grandparent .focus-frame-container iframe {
      border: 8px solid var(--body-fg-color-deemphasize-nontext); } }

/* Show a link back to what this is for someone who stumbles across the page with no context */
.focus-explanation {
  position: relative; }
  .focus-explanation p {
    background-color: var(--body-bg-color);
    padding: 0.5em;
    position: fixed;
    bottom: 1em;
    left: 1em; }

ul.focus-categories {
  color: var(--color-micahrl-teal);
  text-align: center; }
  ul.focus-categories li {
    display: inline;
    margin: 0;
    padding: 0; }
  ul.focus-categories li::before {
    content: ""; }
  ul.focus-categories li:not(:last-child):after {
    content: ", "; }

/* Wrap any element with this class to have nice horizontal scroll behavior.
 *
 * For example: wide images, .mrl-simple-table-container, etc.
 */
.mrl-hscroll-container {
  margin: 2em 0 0 0;
  overflow-x: auto;
  overflow-y: auto;
  /* We need the container <div> and the notification <p> to have the exact same height,
    * because the <p> is _removed from normal document flow_ and no longer takes up space.
    * We want the page not to shift all later content up by the height of the <p>,
    * so we make its parent <div> its exact same height.
    */
  --notification-height: 2em;
  /* An element with this class is added by JavaScript automatically if the table overflows horizontally
  */ }
  .mrl-hscroll-container .mrl-hscroll-container-overflow-x-warning-container {
    padding: 0;
    margin: 0;
    height: var(--notification-height); }
    .mrl-hscroll-container .mrl-hscroll-container-overflow-x-warning-container .mrl-hscroll-container-overflow-x-warning {
      display: inline-block;
      height: var(--notification-height);
      background-color: var(--hscroll-overflow-bg-color);
      font-size: 0.825em;
      color: var(--hscroll-overflow-fg-color);
      padding: 0 2em;
      margin: 0; }
      .mrl-hscroll-container .mrl-hscroll-container-overflow-x-warning-container .mrl-hscroll-container-overflow-x-warning.mrl-hscroll-container-overflow-x-warning-sticky {
        position: fixed;
        top: 0; }

.homepage-container {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .homepage-container .homepage-avatar {
    margin: 4em 0;
    width: 10em; }
  .homepage-container h1.homepage-title {
    display: block;
    margin: 2em auto 0 auto; }

/* The home grid
 */
.homegrid {
  display: grid;
  grid-template-columns: 8em auto;
  padding: 0 2em; }
  .homegrid svg {
    font-size: 75%; }
  .homegrid > * {
    margin: 0;
    padding: 0; }
  .homegrid .homegrid-header {
    grid-column: span 2;
    margin: 2em 0 1em 1em;
    color: var(--body-fg-color-deemphasize-text);
    font-size: 85%; }

/* IndieWeb-related styling
 */
.invisible-h-card {
  display: none; }

/* kbd elements
 *
 * Adapted from https://dylanatsmith.com/wrote/styling-the-kbd-element
 */
kbd {
  font-family: var(--body-monospace-font-family);
  border: var(--body-fg-color) 1px solid;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0 1px var(--body-fg-color-deemphasize-nontext);
  cursor: default;
  line-height: 1em;
  min-width: 0.75rem;
  display: inline-block;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  top: -1px; }
  kbd:hover {
    box-shadow: 0 1px 0 0.5px var(--body-fg-color-deemphasize-nontext);
    top: 1px; }

/* Experiments in annotating links
 * Some links could change the underline/hover color
 * Some could add :after content
 * TODO: try annotating before, with a hardcoded per-site favicon. See also <https://www.zachleat.com/web/external-link-favicons/>
 */
.show-link-annotations a[href^="#"], .show-link-annotations a[href^="#"] * {
  text-decoration: none;
  border-bottom: 2px solid var(--on-page-link-bg-color); }

.show-link-annotations a[href^="#"]:hover, .show-link-annotations a[href^="#"]:hover * {
  text-decoration: none;
  background-color: var(--on-page-link-bg-color);
  color: var(--link-fg-color); }

.show-link-annotations .experiment-annotate-external-links a[href*="//"]:not([href*="me.micahrl.com"]):after,
.show-link-annotations .experiment-annotate-external-links a[href*="//"]:not([href*="localhost"]):after {
  content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); }

.show-link-annotations a[href^="https://en.wikipedia.org/"]:after {
  content: "WP";
  font-size: 60%;
  vertical-align: super; }

.show-link-annotations a[href$=".pdf"]:after {
  content: "PDF";
  font-size: 60%;
  vertical-align: super; }

a.mrlafl::after {
  content: "$";
  font-size: smaller;
  vertical-align: super;
  line-height: 0; }

a img {
  border: none; }

a {
  text-decoration: none;
  border-bottom: 2px solid var(--link-bg-color);
  color: inherit; }

a:hover, a:hover:visited, a:hover *, a:hover:visited * {
  text-decoration: none;
  background-color: var(--link-bg-color);
  color: var(--link-fg-color-hover); }

a:visited {
  color: inherit; }

a.no-link-underline {
  border-bottom: 0; }

a.no-link-hover:hover, a.no-link-hover:hover * {
  background-color: initial;
  color: initial; }

a.image-thumbnail {
  display: inline-block;
  border: 2px solid var(--link-bg-color);
  padding: 1px; }
  a.image-thumbnail img {
    border: 0;
    padding: 0;
    margin: 0; }

a.video-thumbnail {
  display: inline-block;
  border: 2px solid var(--link-bg-color);
  padding: 1px;
  margin: 2em;
  line-height: 0; }
  a.video-thumbnail video {
    border: 0;
    padding: 0;
    margin: 0; }
    a.video-thumbnail video source, a.video-thumbnail video img, a.video-thumbnail video p {
      border: 0;
      padding: 0;
      margin: 0; }

span.doublink {
  border-top: 2px solid var(--body-fg-color);
  border-left: 2px solid var(--body-fg-color);
  padding-left: 2px; }
  span.doublink a.doublink-clearnet:before {
    content: "⚠️\00a0";
    font-size: 0.75em;
    vertical-align: top; }
  span.doublink a.doublink-onion:before {
    content: "🧅\00a0";
    font-size: 0.75em;
    vertical-align: top; }

.clickable-element {
  cursor: pointer; }

sup {
  font-size: 75%;
  vertical-align: super; }

div.footnotes {
  font-size: 75%; }

/* Any time we jump to an on-page anchor, briefly highlight the element
 */
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
  animation: hlfadeinout 2.5s linear; }

@keyframes hlfadeinout {
  0% {
    background: var(--body-bg-color); }
  50% {
    background: var(--target-bg-color); }
  0% {
    background: var(--body-bg-color); } }

/* When we jump to an end-note, keep it highlighted
 * (unless we click on another on-page anchor)
 */
li[role=doc-endnote]:target {
  background: var(--target-bg-color);
  transition: all .8s; }

/* Styling of my /lists/ section
 */
.lists-section-pages-astable {
  border-collapse: collapse; }
  .lists-section-pages-astable td + td {
    border-left: 1px solid var(--body-fg-color-deemphasize-text); }

@keyframes spin {
  100% {
    transform: rotateY(360deg); } }

form.search {
  font-size: 1.5rem;
  border: 1px solid var(--body-fg-color-deemphasize-nontext);
  min-width: 1em;
  height: 1em;
  line-height: 1;
  border-radius: 1em;
  padding: 0.5em; }

.search[data-running] .search-icon {
  animation: spin 1.5s linear infinite; }

form.search input {
  width: 10em;
  color: var(--body-fg-color);
  background-color: var(--body-bg-color); }

#lunr-search-results-title {
  margin-top: 6em; }

#lunr-search-results summary {
  color: var(--body-fg-color-deemphasize-text);
  font-size: 85%; }

@media (min-width: 600px) {
  form.search {
    font-size: 1rem; } }

div.multilink {
  display: inline;
  /* Optional: Style for the <summary> */ }
  div.multilink details {
    display: inline;
    position: relative; }
  div.multilink details[open] > div.multilink-overlay {
    position: absolute;
    /* Absolute positioning within the relative parent */
    z-index: 1000;
    /* High z-index to overlay on top of other content */
    background: white;
    /* Background color for the overlay */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    /* Shadow for a "floating" effect */
    padding: 20px;
    box-sizing: border-box;
    /* Adjust the width, top, and left as needed */
    width: 300px;
    /* Example width */
    top: 100%;
    /* Position just below the <summary> */
    left: 50%;
    /* Centering the box */
    transform: translateX(-50%);
    /* Adjust the horizontal position to truly center */ }
  div.multilink summary::marker, div.multilink summary::-webkit-details-marker {
    display: none; }
  div.multilink details[open] > summary::marker, div.multilink details[open] > summary::-webkit-details-marker {
    display: block; }
  div.multilink summary::before {
    content: "🔗";
    vertical-align: super;
    font-size: smaller; }
  div.multilink details[open] > summary::before {
    content: "❌"; }
  div.multilink summary {
    list-style: none;
    cursor: pointer; }

span.multilinkicons {
  position: relative; }
  span.multilinkicons .multilink-icon {
    vertical-align: super;
    font-size: smaller;
    margin: 0 0.125em; }
  span.multilinkicons .multilink-icon[data-hover-text]:hover::after {
    content: attr(data-hover-text);
    position: absolute;
    display: block;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; }

a.micahrl-open-editor-link {
  font-size: 75%;
  color: var(--body-metadata-fg-color); }

/* Styling for the list of tags on a page
 */
.page-relation-metadata-container {
  display: table; }

.page-relation-container {
  display: table-row;
  font-size: 0.8em; }
  .page-relation-container:before {
    content: "\00BB \0020"; }

.page-relation-list-cell {
  padding-left: 0.5rem;
  padding-top: 0.5rem;
  display: table-cell;
  line-height: 170%;
  color: var(--body-metadata-fg-color); }
  .page-relation-list-cell * {
    color: var(--body-metadata-fg-color); }

.page-relation-list-header-cell {
  font-weight: bold; }

.page-relation-item {
  display: inline-block; }
  .page-relation-item:before {
    content: ""; }

.links-to-all-tags-projects-footer {
  font-size: 0.85rem;
  color: var(--body-metadata-fg-color); }

.posts_listing {
  display: table;
  margin-left: 2em;
  border-collapse: collapse; }
  .posts_listing li {
    display: table-row;
    margin-bottom: 2em; }
    .posts_listing li h3 {
      font-size: unset;
      font-weight: bold;
      display: inline; }
    .posts_listing li #date, .posts_listing li #date time {
      font-size: 85%;
      color: var(--body-metadata-fg-color); }

.posts-listing-desc {
  font-size: 85%;
  color: var(--body-metadata-fg-color);
  display: block;
  margin: 0 0 0.75em 0; }

.project-taxonomy-related-posts-title {
  font-size: 75%;
  font-weight: normal; }

/* A project card
*/
.project-card-list {
  display: table; }

.project-card-li-parent {
  display: table-row;
  width: 100%;
  padding: 0;
  margin: 0; }
  .project-card-li-parent:before {
    content: ""; }

.project-card {
  display: table;
  margin: reset;
  padding: 1em;
  border-style: solid;
  border-width: 1px;
  border-color: var(--body-fg-color);
  border-radius: 0.2em;
  width: 100%; }
  .project-card .project-card-title {
    display: table-row;
    font-weight: bold; }
  .project-card .project-card-desc {
    display: table-row;
    font-size: 85%;
    color: var(--body-metadata-fg-color); }
  .project-card .project-card-date {
    margin-left: 0;
    padding-left: 0;
    font-size: 85%;
    color: var(--body-metadata-fg-color); }
    .project-card .project-card-date time {
      font-size: 85%;
      color: var(--body-metadata-fg-color); }
  .project-card .project-card-status {
    margin-right: 0;
    border-radius: 0.2em;
    padding: 0.2em 0.3em; }
  .project-card .project-card-status-released {
    background-color: var(--project-status-released-color); }
  .project-card .project-card-status-retired {
    background-color: var(--project-status-retired-color); }
  .project-card .project-card-status-unfinished {
    background-color: var(--project-status-unfinished-color); }
  .project-card .project-card-version {
    border-radius: 0.2em;
    padding: 0.2em 0.3em;
    border-width: 1px;
    border-style: solid; }
  .project-card .project-card-version-alpha, .project-card .project-card-version-beta {
    border-color: var(--project-card-version-alpha-fg-color);
    color: var(--project-card-version-alpha-fg-color); }
  .project-card .project-card-img-parent-outer {
    width: 20em;
    height: 10em;
    overflow: hidden; }
  .project-card .project-card-img-parent-inner {
    height: 100%;
    display: flex;
    align-items: center; }
  .project-card .project-card-img {
    height: auto;
    width: 100%;
    align-self: center; }
  .project-card > p {
    margin: 1em; }

/* Styling for a blockquote with a figcaption.
 *
 * May be used with the quotefig.html shortcode,
 * or by adding a <figure.quotefig> element to your Markdown blockquote, like this:
 *
 *    <figure class="quotefig">
 *
 *    > The quotation goes here
 *
 *    <figcaption>
 *
 *    The attribution goes here
 *
 *    </figcaption>
 *
 *    </figure>
 *
 * Some notes on the Markdown approach (without the shortcode):
 *  - It uses a regular Markdown blockquote,
 *    surrounded by a <figure> element with the "quotefig" class.
 *  - The figcaption attribution is optional.
 *  - The newlines separating Markdown from HTML elements are required
 *    or else the Markdown will not be parsed to HTML.
 *    If you instead are willing to write the quotation and/or attribution as HTML,
 *    you can omit its newlines,
 *    but make sure to add <p> elements (see next item).
 *  - These newlines do create <p> elements when the Markdown is parsed,
 *    so the final structure turns into
 *    <figure><blockquote><p>...</p></blockquote><figcaption><p>...</p></figcaption></figure>.
 *
 * How are you supposed to cite quotes in HTML anyway? A few methods here.
 *    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
 *    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
 *    https://quentin-bellanger.com/blog/semantic-quotes/
 *    https://maedi.com/code/semantic-blockquote-html5/
 *
 * Somewhat inspired by quoteback.
 *    https://tomcritchlow.com/2020/06/09/quotebacks/
 *    https://quotebacks.net/
 */
figure.quotefig {
  margin: 1em 0;
  border: 1px solid var(--body-fg-color-deemphasize-nontext);
  border-radius: 3px; }
  figure.quotefig blockquote {
    border: 0;
    margin: 0.5em;
    padding: 0.5em 1.5em;
    position: relative; }
    figure.quotefig blockquote::before {
      content: "“";
      position: absolute;
      top: 0.5em;
      left: -0.0625em;
      font-size: 4em;
      line-height: 0.1em;
      color: var(--body-fg-color-deemphasize-nontext); }
    figure.quotefig blockquote::after {
      content: "”";
      position: absolute;
      bottom: 0;
      right: -0.0625em;
      font-size: 4em;
      line-height: 0.1em;
      color: var(--body-fg-color-deemphasize-nontext); }
    figure.quotefig blockquote p + p {
      margin-top: 1em; }
  figure.quotefig figcaption {
    font-style: italic;
    font-size: 0.9em;
    text-align: right;
    margin: 1em; }
    figure.quotefig figcaption p {
      margin: 0; }

/* This class is not tied to a <figure> element,
 * so it can be used with a regular Markdown blockquote
 * or with a <div> wrapper of anything, etc.
 */
.quotefig-serif {
  font-family: var(--body-serif-font-family);
  font-size: 20px;
  line-height: 1.5em; }

.redrum-noci-container {
  position: relative;
  float: right;
  bottom: 0.5em;
  font-size: 1.6em; }

a.redrum-noci-link {
  margin: 0;
  padding: 0;
  line-height: 1em; }
  a.redrum-noci-link svg {
    width: 1em;
    height: 1em;
    margin: 0;
    color: var(--color-micahrl-mint); }
  a.redrum-noci-link svg:hover {
    color: var(--body-fg-color); }

section.responses {
  font-size: 0.8em;
  margin: 2em 0; }
  section.responses h2, section.responses h3 {
    margin: 1em 0;
    padding: 0; }
  section.responses p {
    margin: 0; }
  section.responses .comments-explanation {
    color: var(--body-fg-color-deemphasize-text); }
  section.responses .webmentions {
    margin: 0 0 0 1em; }
    section.responses .webmentions p.webmention-private {
      color: var(--body-fg-color-deemphasize-text); }
    section.responses .webmentions ol.webmentions-list {
      list-style-type: none; }
      section.responses .webmentions ol.webmentions-list li:before {
        content: ""; }
      section.responses .webmentions ol.webmentions-list li {
        padding: 0;
        margin: 0;
        display: grid;
        padding: none;
        grid-template-columns: 3em 1em auto auto;
        gap: 1em; }
    section.responses .webmentions .wm-cistercian-date {
      font-size: .25rem;
      color: var(--body-fg-color-deemphasize-text); }
    section.responses .webmentions img.wm-author-photo {
      margin: 0;
      padding: 0;
      display: inline;
      max-height: 1em;
      max-width: 1em; }

/* For the webmentionsjs stuff only */
div#webmentions h2 {
  /* webmention.js adds h2 elements with "Responses" and "Reactions" sections.
     * It looks better without it imo, and h2 is the wrong heading level anyway.
     */
  display: none; }

/* I use a class 'mrl-simple-table-container' to provide a generic table style.
 * I can easily surround a Markdown table with <div class="mrl-simple-table-container">..</div>.
 * Any third party HTML I'm pulling in that uses tables isn't affected
 * (as it would be by a bare 'table {}' selector).
 * I just want something very simple that does the right thing say 75% of the time.
 *
 * NOTE: See also the .mrl-hscroll-container class, which pairs well with this one for tables that may be wider than the viewport.
 */
.mrl-simple-table-container {
  /* For e.g. adding a description to a cell
   */
  /* If the container div is also tagged with this class, make more whitespace
   */
  /* If the container div is also tagged with this class,
   * make horizontal lines between rows
   */
  /* If the individual th/td cells are tagged with these classes, center their contents
   */
  /* If the whole container div is tagged with this class, center elements in all cells
   */ }
  .mrl-simple-table-container th {
    font-weight: bold;
    background: var(--table-header-bg-color); }
  .mrl-simple-table-container th, .mrl-simple-table-container td {
    margin: 0;
    padding: 0 2em 0 2em; }
  .mrl-simple-table-container p.description {
    font-size: 85%;
    color: var(--body-metadata-fg-color);
    margin: 0 0 0.75em 0;
    font-weight: normal; }
  .mrl-simple-table-container.mrl-simple-table-container-separate > table {
    border-collapse: separate;
    border-spacing: 0 1em; }
  .mrl-simple-table-container.mrl-simple-table-container-horizontal-separators > table {
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid var(--body-fg-color);
    border-bottom: 1px solid var(--body-fg-color); }
    .mrl-simple-table-container.mrl-simple-table-container-horizontal-separators > table tr {
      border-top: 1px solid var(--body-fg-color);
      border-bottom: 1px solid var(--body-fg-color); }
  .mrl-simple-table-container th.mrl-simple-table-cell-center, .mrl-simple-table-container td.mrl-simple-table-cell-center {
    vertical-align: middle;
    text-align: center; }
  .mrl-simple-table-container.mrl-simple-table-cell-center td, .mrl-simple-table-container.mrl-simple-table-cell-center th {
    vertical-align: middle;
    text-align: center; }

.sitenav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 3em 0 0 0; }
  .sitenav .sitenav-sidecontent {
    flex: 1;
    min-width: 1em;
    padding: 0;
    margin: 0; }
    .sitenav .sitenav-sidecontent-left {
      text-align: right; }
    .sitenav .sitenav-sidecontent-right {
      text-align: left; }
  .sitenav .sitenav-links-container {
    margin: .5em 0 0 0;
    list-style-type: none; }
    .sitenav .sitenav-links-container li {
      padding: 0;
      margin: 0;
      font-size: 0.75em;
      line-height: 1.75em; }
      .sitenav .sitenav-links-container li:before {
        content: ""; }
      .sitenav .sitenav-links-container li a {
        color: var(--nav-fg-color); }
  .sitenav .sitenav-img-link {
    flex: 0 0 auto;
    display: block;
    padding: 0;
    margin: 0 1em;
    position: relative;
    border-bottom: 0;
    width: 6em;
    height: 6em; }
    .sitenav .sitenav-img-link svg {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      color: var(--color-micahrl-mint); }
      .sitenav .sitenav-img-link svg:hover {
        color: var(--body-fg-color); }

@media (max-width: 750px) {
  .sitenav li {
    font-size: 12px; } }

@media (max-width: 400px) {
  .sitenav li {
    font-size: 10px;
    padding: 0 0.5em; } }

.parent-section-link {
  font-size: 75%; }

form.embeddable-buttondown-form input[type="email"] {
  border-bottom: 2px solid var(--link-bg-color);
  margin: 0 1em; }

/* WARNING: THIS STYLING DOES NOT APPLY TO RSS READERS
 * RSS readers can take inline styles, like:
 *    <span style="display:inline-block;">...</span>
 * But they usually/always ignore external CSS,
 * so styles in this file apply only to browser display, not RSS.
 */
svg.spritecore {
  height: 1em;
  width: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.1em;
  margin: 0 0.2em; }

/* Inline sprites, embedded <svg> elements
 *
 * These can take a currentColor.
 */
.svg-sprite-inline {
  height: 1em;
  width: 1em;
  color: currentColor;
  stroke: currentColor;
  fill: currentColor; }

h2.taxonomy-term-subhead {
  font-size: 1rem;
  font-weight: 600;
  margin: 2.5rem 0 1rem 0; }

/* Timeline styling
 *
 * Use 1em as the unit and calculate all sizes based on that.
 * This allows the timeline to scale with the font size.
 *
 * It's safe to customize padding, margin, and border.
 * Note that the circular event markers take up 0.5em
 * to the left of the <ol>'s content box,
 * so it's recommended to add a margin of at least that much to the left.
 */
ol.mrl-timeline {
  /* Width of the timeline line.
   * Make it divisible by 2 for centering.
   */
  --timeline-width: 2px;
  /* Margin between each timeline entry.
   * It's used for calculations so we need to define it here.
   */
  --timeline-entry-margin: 2em;
  /* Colors for the timeline.
   * It's nice to set these here because otherwise
   * customizing them would require overriding ::before and ::after on <li> elements, etc.
   */
  --timeline-color: var(--body-fg-color-deemphasize-nontext);
  --timeline-marker-color: var(--body-fg-color);
  padding: 1em 2em 0 2em;
  margin: 1em;
  /* Styling past this point is required to make the timeline look right */
  position: relative;
  list-style-type: none; }

ol.mrl-timeline li {
  position: relative;
  padding-left: 1em;
  margin-left: calc(var(--timeline-width) / 2);
  /* Center the marker on the line */
  margin-bottom: var(--timeline-entry-margin); }

/* Draw a circle to mark each event on the timeline */
ol.mrl-timeline li::before {
  content: '';
  position: absolute;
  left: 1em;
  top: .4em;
  /* Adjust to align with the first line of text */
  width: 1em;
  height: 1em;
  background: var(--timeline-marker-color);
  border-radius: 50%;
  z-index: 1;
  /* Ensure the line is drawn behind the circle */ }

/* Draw the line segment */
ol.mrl-timeline li::after {
  content: '';
  position: absolute;
  /* Center the line on the marker */
  left: calc(var(--timeline-width) / 2 * -1);
  /* Draw a line between this item's marker and the next.
   * Start just below the marker.
   * Extend to the top of the next item.
   * The height must account for the margin as well.
   */
  top: 0.5em;
  height: calc(100% + var(--timeline-entry-margin));
  width: var(--timeline-width);
  background: var(--timeline-color);
  /*z-index: 2; /* Draw the line in front of the circle when debugging */ }

/* Remove the line segment from the last item */
ol.mrl-timeline li:last-child::after {
  display: none; }

ol.mrl-timeline time {
  display: block;
  font-weight: bold;
  margin-bottom: .3em; }

ol.mrl-timeline p {
  margin: 0; }

/* Styling for the discontinuity marker */
ol.mrl-timeline li .mrl-timeline-discontinuity {
  border: none;
  margin: 0;
  padding: 0;
  height: 1em;
  width: 3em;
  position: relative;
  overflow: visible;
  background: transparent;
  /* Don't show the <hr> itself */ }

ol.mrl-timeline li .mrl-timeline-discontinuity::before {
  content: '';
  position: absolute;
  left: -1.5em;
  top: 50%;
  /* Center the marker vertically */
  width: 1em;
  height: 0.2em;
  border-top: 1px solid var(--timeline-marker-color);
  border-bottom: 1px solid var(--timeline-marker-color);
  z-index: 1;
  /* Ensure the line is drawn behind the discontinuity marker */ }

/* Remove default marker discontinuity items */
ol.mrl-timeline li:has(.mrl-timeline-discontinuity)::before {
  display: none; }

/* Styling for the warchive section
 */
ul.warchive-list li.warchive-page {
  margin: 1em 0; }
  ul.warchive-list li.warchive-page p {
    margin: 0;
    font-size: .8em; }

ul.warchive-list li.warchive-url {
  color: var(--body-fg-color-deemphasize-text);
  font-size: .8em; }

body.webgarden-body {
  width: 250px;
  height: 250px;
  margin: 0;
  padding: 0;
  font-family: "Lato Regular", sans-serif;
  font-size: 12px;
  line-height: 1.25em;
  color: var(--body-fg-color);
  background-color: var(--body-bg-color);
  /* iOS Safari will scroll down the size of SOME text WHENEVER IT FUCKING WANTS TO.
    * Sometimes that will happen differetly in two columns of a table,
    * or on two adjacent lines in highlighted code.
    * ... let's turn that shit off please and thank u
    */
  -webkit-text-size-adjust: none;
  position: relative; }
  body.webgarden-body p {
    margin: 0; }
  body.webgarden-body section {
    margin: 0; }
  body.webgarden-body #webgarden-stamp {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    padding: 0;
    display: flex;
    justify-content: center; }
  body.webgarden-body #webgarden-avatar {
    position: absolute;
    margin: auto 0;
    left: 0;
    right: 0;
    padding: 0;
    top: 10px; }
  body.webgarden-body #webgarden-birthday {
    color: var(--body-fg-color);
    font-size: 0.75rem;
    margin: 0 auto 15px auto;
    padding: 0;
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    text-align: center; }
  body.webgarden-body #webgarden-reservations {
    font-size: 0.75em;
    position: absolute;
    bottom: 10px;
    left: 20px; }
  body.webgarden-body #webgarden-redrum-noci-container {
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 30px; }
    body.webgarden-body #webgarden-redrum-noci-container .redrum-noci-svg {
      width: 2em;
      height: 2em; }

.webgarden-pot {
  border: solid var(--body-fg-color); }

/* webmentsion.js
 */
#webmentions {
  margin: 0;
  position: relative;
  z-index: 100;
  line-height: 1.2em; }
  #webmentions img {
    all: unset; }
  #webmentions .comments {
    font-size: 80%; }
  #webmentions img.missing {
    background: var(--body-bg-color);
    border: dashed var(--body-fg-color) 1px; }
  #webmentions ul {
    list-style-type: none;
    margin: 0;
    padding: 4px; }
  #webmentions li {
    text-indent: -1em;
    padding-left: 1em; }
    #webmentions li::before {
      content: initial; }
  #webmentions a.reaction {
    position: relative;
    text-decoration: none;
    text-shadow: 0px 0px 3px var(--body-bg-color);
    margin-right: 0.5em; }
    #webmentions a.reaction img {
      max-height: 1.3em;
      border-radius: 25%;
      display: inline-block; }
    #webmentions a.reaction sub {
      font-size: 50%; }
  #webmentions .comments li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
    #webmentions .comments li .text {
      color: var(--body-fg-color-deemphasize-text);
      font-style: italic;
      text-decoration: none; }
    #webmentions .comments li .name {
      color: var(--body-fg-color); }

/* Styling for the portfolio partial
 */
.mrl-portfolio {
  border-spacing: 0 0.5em; }
  .mrl-portfolio th {
    font-weight: bold;
    background-color: var(--table-header-bg-color); }
  .mrl-portfolio td.mrl-portfolio-item-name {
    font-weight: bold; }
  .mrl-portfolio td.mrl-portfolio-item-topics {
    font-size: 0.825em; }
  .mrl-portfolio th, .mrl-portfolio td {
    padding: 0.25em 2em; }
  .mrl-portfolio .mrl-portfolio-section-name-row {
    margin: 3em 0; }
  .mrl-portfolio .mrl-portfolio-item-description-row td {
    color: var(--body-metadata-fg-color); }

/* Dealing with youtube embeds

Can be used with HTML and JS like this:
    <div
        class="youtube-embed-image-container"
        onclick="document.getElementById('hmos-yt').style.display='block'; this.style.display='none'"
    >
        <img
            alt="Hit me on Signal (screenshot from the music video)"
            width="460"
            height="293"
            src="signal.png"
        />
    </div>
    <div class="youtube-embed-iframe-container" id="hmos-yt">
        <iframe
            width="450"
            height="283"
            src="https://www.youtube.com/embed/wYObKoGMXWg?wmode=transparent&autoplay=1"
            frameborder="0"
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
    </div>

What it does:
When the page loads, it _just_ loads the image.
However, when the image is clicked, it is hidden and the youtube embed is shown instead.
*/
.youtube-embed-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  /* Adjust based on your preferred max-width */
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden; }
  .youtube-embed-container img, .youtube-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .youtube-embed-container img {
    cursor: pointer; }
  .youtube-embed-container iframe {
    display: none; }