/* Minimal dark theme layered on Bootstrap. */

:root,
[data-bs-theme="dark"] {
  --ink: #f5f5f4;
  --muted: #9a9a9f;
  --faint: #5f5f66;
  --hairline: rgba(255, 255, 255, 0.09);
  --bg: #0c0c0d;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--hairline);
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 245, 245, 244;
  --bs-link-hover-color: #fff;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
}

.container {
  max-width: 52rem;
}

::selection {
  background: rgba(255, 255, 255, 0.85);
  color: var(--bg);
}

/* Headings */

h1, h2, h3, .navbar-brand, .display-title, .page-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.display-title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.1;
}

.page-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
}

.lead {
  font-weight: 300;
  color: var(--muted);
}

/* Header and footer */

.site-nav {
  border-bottom: 1px solid var(--hairline);
}

.site-nav .navbar-brand {
  font-size: 1.35rem;
  color: var(--ink);
}

.site-nav .nav-link {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
  color: var(--ink);
}

.navbar-toggler {
  border: 0;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.site-footer {
  border-top: 1px solid var(--hairline);
  color: var(--faint);
}

.site-footer .text-body-secondary {
  color: var(--faint) !important;
}

/* Links and small controls */

a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.link-arrow,
.pager-link,
.tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.15s ease;
}

.link-arrow {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.25rem;
}

.link-arrow::after {
  content: " \2192";
}

.link-arrow:hover,
.pager-link:hover,
.tag:hover {
  color: #fff;
}

.d-flex:has(> .tag) {
  column-gap: 1.5rem !important;
  row-gap: 0.5rem !important;
}

.breadcrumb {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --bs-breadcrumb-divider-color: var(--faint);
  --bs-breadcrumb-item-active-color: var(--faint);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

/* Post list */

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

.post-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
}

.post-card .card-body {
  padding: 2rem 0;
}

.post-card .card-title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.post-card .stretched-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.post-card:hover .stretched-link {
  color: #fff;
  text-decoration: underline;
}

.post-card .card-text {
  font-weight: 300;
  line-height: 1.7;
}

.post-card .small,
.post-body header .text-body-secondary {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint) !important;
}

/* Post body */

.post-body {
  max-width: 40rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.85;
  color: #e7e7e5;
}

.post-body header {
  margin-bottom: 3rem !important;
}

.post-body > p,
.post-body > ul,
.post-body > ol {
  margin-bottom: 1.5rem;
}

.post-body > ul li + li,
.post-body > ol li + li {
  margin-top: 0.5rem;
}

.post-body strong {
  font-weight: 500;
  color: #fff;
}

.post-body nav.border-top {
  border-color: var(--hairline) !important;
}

.hero {
  max-width: 40rem;
  padding: 2rem 0 1rem;
}