/* Harness Index theme: the data sheet to direx's card catalog.
   Same paper, ink and carmine, opposite hand: direx is serif display,
   outlined stamps and hairlines; this is mono display, filled tags,
   filled table headers and sharp corners. Covers blg's markup and the
   hand-written hub page at /. */

:root {
  color-scheme: light dark;
  --paper: #fbf9f4;
  --paper-2: #f3efe6;
  --ink: #211d18;
  --soft: #6d675d;
  --line: #e3ddd1;
  --line-2: #c9c2b4;
  --accent: #a02c25;
  --accent-deep: #7c1f1a;
  --band-bg: #211d18;
  --band-fg: #fbf9f4;
  --band-dim: #b3aa99;
  --band-line: #4a4234;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17140f;
    --paper-2: #211d16;
    --ink: #ece5d8;
    --soft: #a49b8c;
    --line: #2e2921;
    --line-2: #4a4234;
    --accent: #e0604f;
    --accent-deep: #e8847a;
    --band-bg: #0d0b08;
    --band-fg: #ece5d8;
    --band-dim: #8d8574;
    --band-line: #38322a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.6;
}

a { color: inherit; }
a:link, a:visited { text-decoration-color: var(--line-2); text-underline-offset: 2.5px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

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

/* masthead band: ink, closed with a double carmine rule */

.site-header {
  background: var(--band-bg);
  color: var(--band-fg);
  padding: 1.7rem 1.25rem 1rem;
  border-bottom: 3px solid var(--accent);
  box-shadow: inset 0 -6px 0 -5px var(--band-line);
}

.site-header site-title {
  display: block;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-header site-title a { color: var(--band-fg); text-decoration: none; }
.site-header site-title a:hover { color: var(--band-fg); }

.site-header tag-line {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--band-dim);
}

nav {
  background: var(--band-bg);
  padding: 0.7rem 1.25rem 1rem;
  border-top: 1px solid var(--band-line);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--band-dim);
  text-decoration: none;
  padding-bottom: 0.15rem;
}

nav a:hover { color: var(--band-fg); }
nav a.active {
  color: var(--band-fg);
  box-shadow: inset 0 -2px var(--accent);
}

.search-form { margin-left: auto; }

.search-form input {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--band-fg);
  background: transparent;
  border: 1px solid var(--band-line);
  border-radius: 0;
  padding: 0.25em 0.9em;
  width: 11rem;
}

.search-form input::placeholder { color: var(--band-dim); }
.search-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* content: data sheet measure, wide for the hub */

main { padding: 2.6rem 1.25rem 3rem; }

article.post,
article.page {
  max-width: 66ch;
  margin-inline: auto;
}

article.page.hub { max-width: 74rem; }

/* datelines: filled carmine tags, sharp corners */

article.post > time,
.post-list time {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--paper);
  background: var(--accent);
  padding: 0.18em 0.65em 0.14em;
  margin-bottom: 0.9rem;
}

/* display type: mono, where direx goes serif */

h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1.2rem;
  max-width: 30ch;
}

h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 2.8rem 0 0.9rem;
  padding-left: 1rem;
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.55em;
  height: 0.55em;
  background: var(--accent);
}

h3 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2.2rem 0 0.6rem;
}

.content p, .preview p { margin: 0 0 1.05rem; }

/* prose links read as data: carmine, not underlined until hovered */

.content a { color: var(--accent-deep); text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content a.external::after { content: " \2197"; color: var(--accent); }

/* ledger tables: filled header band, right-aligned numerals */

.content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1.6rem 0 2rem;
  font-variant-numeric: tabular-nums;
}

.content caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--soft);
  padding-bottom: 0.55rem;
}

.content th {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--ink);
  text-align: left;
  padding: 0.5rem 0.65rem;
}

.content td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.content tbody tr:hover td { background: var(--paper-2); }
.content td a { font-weight: 600; text-decoration: none; }
.content td a:hover { color: var(--accent); }

.hub table td:nth-child(2),
.hub table th:nth-child(2) { text-align: right; }

/* blog index: the wire feed */

.post-list {
  list-style: none;
  max-width: 66ch;
  margin: 0 auto;
  padding: 0;
}

.post-list li { border-top: 1px solid var(--line); }

.post-list .post-link {
  display: block;
  padding: 1.4rem 0.4rem;
  text-decoration: none;
}

.post-list .post-link:hover { background: var(--paper-2); }

.preview h1, .preview h2 {
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 0.55rem 0 0.5rem;
}

.preview h2 { padding-left: 0; }
.preview h2::before { display: none; }

.preview p {
  color: var(--soft);
  font-size: 0.95rem;
  margin: 0;
}

.post-list .post-link:hover .preview h1,
.post-list .post-link:hover .preview h2 { color: var(--accent-deep); }

/* code and quotes */

.content code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper-2);
  padding: 0.08em 0.35em;
}

.content pre {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  padding: 0.95rem 1.15rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

.content pre code { background: none; padding: 0; font-size: 1em; }

.content blockquote {
  margin: 1.3rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--soft);
  font-style: italic;
}

.content hr { border: 0; border-top: 1px solid var(--line-2); margin: 2.2rem 0; }
.content img { max-width: 100%; }

/* tags, pagination, search: sharp, filled where active */

.tags {
  font-family: var(--mono);
  font-size: 0.72rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.tags a {
  display: inline-block;
  border: 1px solid var(--line-2);
  padding: 0.1em 0.6em;
  text-decoration: none;
}

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

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  max-width: 66ch;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
}

.pagination a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.pagination .current {
  color: var(--paper);
  background: var(--accent);
  font-weight: 700;
  padding: 0 0.45em;
}
.pagination .disabled, .pagination .ellipsis { color: var(--soft); }

.search-message {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--soft);
  max-width: 66ch;
  margin: 0 auto 1.5rem;
}

/* footer: the other bookend, ruled like the masthead */

footer {
  margin-top: 3rem;
  background: var(--band-bg);
  color: var(--band-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.8;
  padding: 1.5rem 1.25rem 2.6rem;
  border-top: 3px solid var(--accent);
}

footer a { color: var(--band-fg); text-decoration-color: var(--band-line); }
footer a:hover { color: var(--accent); }
footer p { max-width: 78ch; margin: 0 0 0.4rem; }

.footer-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  padding: 0;
  margin: 0 0 1rem;
}

.footer-nav a {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}