/* Quark's Bar: every page is the bar. The blog list, a post, and the projects
   show up in the scene's own show() panel; this file only styles the page
   fallback and the site's markup inside that panel. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: #0b1020;
  overflow: hidden;
}
character-chat {
  display: block;
  height: 100svh;
}

/* The page's real content: only for search engines and no-JS visitors.
   With JavaScript the scene renders it instead; without, the scene is hidden
   and the page scrolls normally. */
.js .content {
  display: none;
}
html:not(.js) body {
  overflow: auto;
}
html:not(.js) character-chat {
  display: none;
}
.content {
  max-width: 44em;
  margin: 0 auto;
  padding: 1.5em 1em 3em;
  color: #f6efd8;
  font:
    17px/1.6 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}
.content a {
  color: #ffd166;
}
.content h1,
.content h2,
.content h3 {
  color: #ffd166;
  line-height: 1.25;
}
.content img {
  max-width: 100%;
  height: auto;
  border: 3px solid #f6efd8;
}
.content .menubar {
  display: flex;
  gap: 1.5em;
  margin-bottom: 2em;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 12px;
  text-transform: uppercase;
}
.content .menubar a {
  text-decoration: none;
}

/* ---------- the site's own markup inside the scene's panel ---------- */
/* Choice rows carry HTML (see bar.js); the scene draws the row, these style what is inside it. */
.character-chat .menu .meta {
  display: block;
  margin-top: 4px;
  color: #ffd166;
  font-size: 0.65em;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.9;
}
.character-chat .menu li.active .meta {
  color: #0b1020;
}
.character-chat .menu .blurb {
  display: block;
  margin-top: 6px;
  font-size: 0.8em;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.7;
}
.character-chat .menu li:has(> a > .spaced) {
  margin-top: 8px;
}
.character-chat .menu .next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* the chevron is a drawn triangle, not a glyph, so it centers exactly on the text */
.character-chat .menu .chev {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-left: 0.6em solid currentColor;
}

/* The article rendered through show({ html }). */
.character-chat .content-pane .date {
  color: #ffd166;
  opacity: 0.8;
  margin: 0 0 18px;
  font-size: 0.85em;
}