/* spleen: a terminal. Monospace everywhere, dark by default, light only for a
   reader whose system asks for it. No script: the theme has nothing to toggle
   that CSS cannot answer on its own. */

:root {
  --measure: 52rem;
  --bg: #0d0f12;
  --fg: #c8ccd2;
  --dim: #6d7580;
  --accent: #9ece6a;
  --accent-alt: #e0af68;
  --rule: #232830;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbf9;
    --fg: #24282e;
    --dim: #6a7280;
    --accent: #3f7d20;
    --accent-alt: #9a6700;
    --rule: #e0e2e0;
    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Mono", Menlo, monospace;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

.masthead,
.screen,
.footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-alt);
}

:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-block: 1.75rem 1rem;
  border-bottom: 1px dashed var(--rule);
}

/* Off the top of the viewport rather than off to the side, and moved by a
   transform: taking it out of the flow and putting it back reflows the header
   under the reader the moment they tab into the page. */
.skip {
  position: absolute;
  z-index: 20;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transform: translateY(-250%);
}

.skip:focus {
  transform: none;
}

.prompt {
  margin-right: auto;
}

.user {
  color: var(--accent);
}

.at,
.cwd {
  color: var(--dim);
}

.host {
  color: var(--accent-alt);
  text-decoration: none;
  font-weight: 700;
}

.nav {
  display: flex;
  gap: 1rem;
}

.cmd {
  color: var(--dim);
  text-decoration: none;
}

.cmd::before {
  content: "$ ";
  color: var(--rule);
}

.cmd:hover {
  color: var(--fg);
}

/* The language switcher, written the way a shell would offer a choice. */

.langs {
  display: flex;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.bracket {
  color: var(--rule);
}

.lang {
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
}

.lang + .lang::before {
  content: "|";
  margin-inline-end: 0.35rem;
  color: var(--rule);
}

.lang:hover {
  color: var(--fg);
}

.lang.active {
  color: var(--accent);
}

/* Screen ------------------------------------------------------------------ */

.screen {
  padding-block: 2rem 3rem;
}

h1 {
  font-size: 1.4rem;
  line-height: 1.35;
  margin-block: 0 0.35rem;
  font-weight: 700;
}

h2,
h3 {
  margin-block: 1.9rem 0.4rem;
  font-size: 1.1rem;
}

.hash {
  color: var(--dim);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-block: 0 1.75rem;
  color: var(--dim);
  font-size: 0.85rem;
}

.tags {
  display: flex;
  gap: 0.4rem;
}

.tag {
  text-decoration: none;
}

.post img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* The lead image, boxed like everything else here. */
.cover {
  margin: 0 0 1.75rem;
}

.cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.authors {
  display: flex;
  gap: 0.25rem;
}

.author {
  color: var(--accent-alt);
  text-decoration: none;
}

.dim {
  color: var(--dim);
}

blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--rule);
  color: var(--dim);
}

pre {
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  overflow-x: auto;
}

code {
  font-family: inherit;
}

:not(pre) > code::before,
:not(pre) > code::after {
  content: "`";
  color: var(--dim);
}

/* Highlight palette. Typst bakes its colours inline; `html { highlight }` turns
   each sentinel from `highlight/palette.tmTheme` into one of these classes, so
   the colours live here, where the light variant can reach them too. */

:root {
  --sx-comment: #5f6b74;
  --sx-string: #9ece6a;
  --sx-number: #e0af68;
  --sx-keyword: #bb9af7;
  --sx-function: #7dcfff;
  --sx-variable: #c8ccd2;
  --sx-type: #2ac3de;
  --sx-punctuation: #6d7580;
}

@media (prefers-color-scheme: light) {
  :root {
    --sx-comment: #6a7280;
    --sx-string: #3f7d20;
    --sx-number: #9a6700;
    --sx-keyword: #7d3fa8;
    --sx-function: #0b6a8f;
    --sx-variable: #24282e;
    --sx-type: #0f766e;
    --sx-punctuation: #6a7280;
  }
}

.sx-comment {
  color: var(--sx-comment);
  font-style: italic;
}
.sx-string, .sx-escape { color: var(--sx-string); }
.sx-number, .sx-constant { color: var(--sx-number); }
.sx-keyword, .sx-operator { color: var(--sx-keyword); }
.sx-function, .sx-tag, .sx-heading, .sx-label { color: var(--sx-function); }
.sx-variable, .sx-parameter, .sx-property, .sx-attribute { color: var(--sx-variable); }
.sx-type, .sx-namespace { color: var(--sx-type); }
.sx-punctuation { color: var(--sx-punctuation); }
.sx-invalid { color: var(--sx-keyword); text-decoration: underline wavy; }
.sx-strong { font-weight: 700; }
.sx-emph { font-style: italic; }
.sx-link { text-decoration: underline; }
.sx-raw { font-style: normal; }

/* A terminal draws tables with rules, not boxes: dashes for the body, a solid
   line under the header, and figures in a tabular column. */

/* A table wider than the column scrolls rather than crushing its cells. The
   block box caps at the column while its contents keep their natural width,
   which is what makes the overflow scrollable without a wrapper element the
   theme has no way to add. */
table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: 1.5rem;
}

th,
td {
  padding: 0.3rem 1.5rem 0.3rem 0;
  text-align: left;
  border-bottom: 1px dashed var(--rule);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

thead th {
  border-bottom: 1px solid var(--rule);
  color: var(--accent-alt);
  font-weight: 700;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* Listing ----------------------------------------------------------------- */

.listing {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
  padding-block: 0.35rem;
}

.listing.dated .entry {
  grid-template-columns: 6.5rem 1fr;
}

.entry .date {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.entry-title {
  text-decoration: none;
}

.entry-title::before {
  content: "./";
  color: var(--rule);
}

.count,
.entry-summary {
  grid-column: -2;
  color: var(--dim);
  font-size: 0.85rem;
}

/* Not found --------------------------------------------------------------- */

h1.error {
  font-weight: 400;
  margin-block: 0 1.15rem;
}

.error .code {
  color: var(--accent-alt);
  font-weight: 700;
}

.notfound .listing {
  margin-bottom: 1.15rem;
}

/* Pager and footer -------------------------------------------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.9rem;
}

.pager .next {
  margin-left: auto;
  text-align: right;
}

.footer {
  padding-block: 0 2.5rem;
  color: var(--dim);
  font-size: 0.85rem;
}

.rule {
  display: block;
  color: var(--rule);
}

.footer-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

.feeds {
  display: flex;
  gap: 0.75rem;
}

/* The home page's recent list, from the `@baudelaire/pages` catalogue. */

.recent {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}

.cmd-line {
  margin-block: 0 0.5rem;
  color: var(--dim);
}

.sigil {
  color: var(--rule);
}

.recent .cmd-line:last-child {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Prose oddments ---------------------------------------------------------- */

hr {
  margin-block: 2rem;
  border: 0;
  border-top: 1px dashed var(--rule);
}

figure {
  margin-inline: 0;
}

figcaption {
  color: var(--dim);
  font-size: 0.85rem;
}

kbd {
  padding: 0 0.35em;
  border: 1px solid var(--rule);
  color: var(--accent-alt);
}

mark {
  background: var(--accent);
  color: var(--bg);
}

details {
  margin-block: 1.2rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--rule);
}

summary {
  cursor: pointer;
  color: var(--accent-alt);
}

/* Footnotes: baudelaire places the note list inside the article, so it wants a
   rule above it rather than nothing at all. */
[role="doc-endnotes"] {
  margin-top: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--rule);
  color: var(--dim);
  font-size: 0.85rem;
}

@media print {
  .masthead,
  .footer,
  .pager {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }
}