@font-face {
  font-family: 'Departure Mono';
  src: url('../fonts/departure-mono.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #030103;
  --bg-raised: #0c0616;
  --fg: #ddd6ec;
  --fg-dim: #6d5f8a;
  --purple-dark: #3a1a72;
  --purple: #6d28d9;
  --purple-mid: #9455f5;
  --purple-bright: #c9a4ff;
  --accent: #b088ff;
  --rule-color: rgba(58, 26, 114, 0.5);
  --font-display: 'Departure Mono', monospace;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

::selection {
  background: var(--purple);
  color: var(--fg);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 700px) {
  .wrap { padding: 3rem 1.5rem; }
}

.content {
  flex: 1 0 auto;
  padding: 0.25rem 0 4rem;
}

/* -------- header -------- */

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.banner-link {
  text-decoration: none;
  border-bottom: none;
}

.banner {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: normal;
  color: var(--purple-bright);
  margin: 0;
  letter-spacing: 0.5px;
}

.tagline {
  color: var(--fg-dim);
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  padding-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav a {
  color: var(--fg-dim);
  border-bottom: 1px solid transparent;
}

.nav a:hover, .nav a:focus {
  color: var(--purple-bright);
  border-bottom-color: var(--purple-bright);
}

.rule {
  border: none;
  border-top: 1px solid var(--rule-color);
  margin: 1rem 0;
}

.breadcrumb {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--fg-dim);
}

.breadcrumb a {
  color: var(--fg-dim);
}

.breadcrumb [aria-current="page"] {
  color: var(--purple-bright);
}

@media (max-width: 600px) {
  .banner, .post-title-full { font-size: 1rem; }
}

/* -------- links & text -------- */

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}

a:hover, a:focus {
  color: var(--purple-bright);
  border-bottom-color: var(--purple-bright);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-bright);
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 3rem 0 1.25rem;
}

h1 { margin-top: 0; }

h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--purple-dark);
  color: var(--fg-dim);
  background: var(--bg-raised);
}

/* -------- post list (index) -------- */

.post-list {
  display: flex;
  flex-direction: column;
}

.year {
  font-family: var(--font-mono);
  font-weight: normal;
  font-size: 0.8rem;
  color: var(--fg-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 2rem 0 0;
}

.year:first-child {
  margin-top: 0;
}

.year + .post-preview {
  padding-top: 0.75rem;
}

.post-preview {
  padding: 0.5rem 0;
}

.post-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: var(--fg);
  font-weight: bold;
  border-bottom: none;
}

.post-link:hover .post-title {
  color: var(--purple-bright);
}

.post-date {
  color: var(--fg-dim);
  font-weight: normal;
  font-size: 0.85rem;
  white-space: nowrap;
}

.post-excerpt {
  margin: 0.3rem 0 0;
  color: var(--fg-dim);
  font-size: 0.9rem;
}

/* -------- single post -------- */

.post-title-full {
  margin-top: 0;
  font-size: 1.6rem;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: normal;
  color: var(--fg);
}

.post-meta {
  color: var(--fg-dim);
  font-size: 0.85rem;
  margin-top: -0.5rem;
}


.post-content img {
  max-width: 100%;
  border: 1px solid var(--purple-dark);
}

.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: normal;
  margin: 2.25rem 0 0.85rem;
}

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

.back-link {
  margin-top: 2rem;
  color: var(--fg-dim);
}

/* -------- static pages (about, pgp) -------- */

.page-content h1 {
  font-size: 1.6rem;
}

.page-content h2 {
  font-family: var(--font-mono);
  font-weight: normal;
  font-size: 0.8rem;
  color: var(--fg-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 2.5rem 0 0;
}

.page-content ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.page-content li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
}

.page-content p {
  margin: 0.75rem 0 0;
}

.page-content h1 + p {
  margin-top: 1.25rem;
}

/* -------- code blocks -------- */

code {
  font-family: var(--font-mono);
  background: var(--bg-raised);
  padding: 0.1rem 0.35rem;
  color: var(--purple-bright);
  font-size: 0.9em;
  overflow-wrap: break-word;
  word-break: break-word;
}

pre {
  background: var(--bg-raised);
  border: 1px solid var(--purple-dark);
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  color: var(--fg);
  overflow-wrap: normal;
  word-break: normal;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  display: block;
  overflow-x: auto;
}

th, td {
  border: 1px solid var(--purple-dark);
  padding: 0.4rem 0.75rem;
  text-align: left;
}

.pgp-key {
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--bg-raised);
  border: 1px solid var(--purple-dark);
  padding: 1rem;
  margin: 0.75rem 0 0;
  color: var(--fg);
}

.highlight .c, .highlight .c1, .highlight .cm { color: #574a6e; font-style: italic; } /* comments */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kt { color: var(--purple-bright); font-weight: bold; } /* keywords */
.highlight .s, .highlight .s1, .highlight .s2 { color: #7dbf94; } /* strings */
.highlight .n, .highlight .nf, .highlight .nx { color: var(--fg); } /* names */
.highlight .mi, .highlight .mf { color: #c98a5e; } /* numbers */
.highlight .o { color: var(--accent); } /* operators */

/* -------- footer -------- */

.site-footer {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--fg-dim);
}

.site-footer p {
  margin: 0;
}

.site-footer .rule {
  margin-bottom: 1rem;
}

/* -------- 404 -------- */

.error-page {
  padding: 1rem 0;
}

/* -------- scrollbar -------- */

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--purple-dark);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--purple);
}

html {
  scrollbar-color: var(--purple-dark) var(--bg);
  scrollbar-width: thin;
}