/* Roboto Mono, variable weight, Latin subset (from Google Fonts) */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin.woff2') format('woff2');
}

/* Colors: light by default, dark from the OS setting unless the toggle says
   light, and dark whenever the toggle says dark. */
:root {
  --bg: #ffffff;
  --fg: #2a2830;
  --muted: #6b6875;
  --rule: #e6e3ec;
  --code-bg: #f4f3f7;
  --accent: #6d28d9;
  --code-string: #2b6b3f;
  --code-number: #9a4b00;
  --code-function: #1f4fa3;
  --code-type: #0f6e6e;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16161a;
    --fg: #e4e2ea;
    --muted: #9a97a3;
    --rule: #2c2b33;
    --code-bg: #1f1f25;
    --accent: #a78bfa;
    --code-string: #7cbf8e;
    --code-number: #e0a06a;
    --code-function: #7fa8f0;
    --code-type: #5fbfb4;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #16161a;
  --fg: #e4e2ea;
  --muted: #9a97a3;
  --rule: #2c2b33;
  --code-bg: #1f1f25;
  --accent: #a78bfa;
  --code-string: #7cbf8e;
  --code-number: #e0a06a;
  --code-function: #7fa8f0;
  --code-type: #5fbfb4;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

/* One centered column for everything. In rem rather than ch, so header and
   footer (smaller text) get the same width as the content. 45rem is about 70
   characters of body text plus the side padding. */
.wrap {
  max-width: 45rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header */
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}

/* Header and footer rules span the text column, not the side padding */
.site-header .wrap::after,
.site-footer .wrap::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
}

.site-header .wrap::after {
  bottom: 0;
  border-bottom: 1px solid var(--accent);
}

.site-footer .wrap::before {
  top: 0;
  border-top: 1px solid var(--rule);
}

.site-name {
  color: var(--fg);
  font-weight: 700;
}

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--muted);
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
}

.theme-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--accent);
}

/* Main */
main {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* Home: intro and post list */
.intro {
  margin-bottom: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule);
}

.intro p {
  margin: 0 0 0.75rem;
}

/* Shell-prompt headings: "$ whoami", "$ ls posts/" */
.prompt {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.prompt span {
  color: var(--accent);
}

/* 404: the requested path inside the prompt is plain text, not the accent $ */
.prompt .missing-path {
  color: inherit;
}

.intro .prompt {
  margin-bottom: 0.25rem;
}

main > .prompt {
  margin-bottom: 1.25rem;
  font-weight: 400;
}

.icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icons a {
  color: var(--muted);
}

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

.icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Post list, ls-style: date column on the left */
.post-list {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-list li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1.5rem;
}

.post-list time {
  padding-top: 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.post-list-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.post-list-desc {
  margin: 0.15rem 0 0;
}

.post-list-meta {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Phones: date goes back above the title */
@media (max-width: 32rem) {
  .post-list li {
    grid-template-columns: 1fr;
  }
}

/* Tag list: post count in a column on the left, like `uniq -c` */
.term-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.term-list li {
  display: contents;
}

.term-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Post / page */
.post-header {
  margin-bottom: 2rem;
}

.post-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.3;
  text-wrap: balance;
}

.post-meta {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.post-meta a {
  color: var(--muted);
}

.post-meta a:hover {
  color: var(--accent);
}

.post-content h2,
.post-content h3,
.post-content h4 {
  margin: 2.5rem 0 0.75rem;
  line-height: 1.35;
  text-wrap: balance;
}

.post-content h2 {
  font-size: 1.25rem;
}

.post-content h3 {
  font-size: 1.05rem;
}

.post-content h4 {
  font-size: 1rem;
  color: var(--muted);
}

.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote,
.post-content table,
.post-content pre {
  margin: 0 0 1.25rem;
}

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
}

.post-content li + li {
  margin-top: 0.25rem;
}

.post-content blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}

.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Wrapper div from the image shortcode */
.post-content .pager {
  margin: 1.5rem 0;
}

.post-content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.post-content table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.post-content th,
.post-content td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.post-content .footnotes {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Code. Browsers give code a generic monospace font at a smaller size by
   default, so set both explicitly. */
pre,
code {
  font-family: inherit;
  font-size: 0.875rem;
}

.post-content pre {
  padding: 0.9rem 1rem;
  background: var(--code-bg);
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.55;
  tab-size: 4;
}

.post-content pre code {
  font-size: inherit;
}

.post-content :not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--code-bg);
  border-radius: 3px;
}

/* Syntax highlighting: Chroma class names (markup.highlight.noClasses = false)
   mapped onto the code colors */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr,
.chroma .ow {
  color: var(--accent);
}

.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nd, .chroma .na {
  color: var(--code-type);
}

.chroma .nf, .chroma .fm, .chroma .nb, .chroma .bp {
  color: var(--code-function);
}

.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc,
.chroma .dl, .chroma .sd, .chroma .sh, .chroma .sx, .chroma .sr, .chroma .ss {
  color: var(--code-string);
}

.chroma .si, .chroma .se, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
.chroma .mi, .chroma .il, .chroma .mo {
  color: var(--code-number);
}

.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp,
.chroma .cpf {
  color: var(--muted);
  font-style: italic;
}

/* Footer */
.site-footer .wrap {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 2rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.site-footer a {
  color: var(--muted);
}