/* A personal journal, with a shared centered reading column. */
:root {
  color-scheme: dark;
  --bg: #080808;
  --text-primary: #eeeeee;
  --text-secondary: #b5b5b5;
  --text-muted: #909090;
  --border: #292929;
  --accent: #ffffff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }
a:hover { color: var(--accent); }
.hero, .section, .footer {
  width: min(100% - 48px, 680px);
  margin-inline: auto;
}
.hero {
  padding: 88px 0 64px;
  text-align: center;
}
.hero-content { display: flex; flex-direction: column; align-items: center; }
.hero-portrait {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--border);
  padding: 5px;
  margin-bottom: 28px;
}
.hero-greeting, .section-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
}
.hero-title, .section-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.hero-title { font-size: clamp(44px, 7vw, 64px); margin: 12px 0 22px; }
.hero-subtitle { max-width: 520px; color: var(--text-secondary); font-size: 17px; line-height: 1.85; }
.section { padding: 48px 0; border-top: 1px solid var(--border); }
.section-label { margin-bottom: 10px; }
.section-title { font-size: clamp(30px, 4vw, 38px); }
.journal-copy, .journal-intro, .personal-about-copy, .personal-contact-copy {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.85;
}
.journal-copy, .journal-intro, .personal-contact-copy { margin-top: 20px; }
.journal-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
}
.journal-link:hover { border-color: var(--accent); }
.personal-about-heading { margin-bottom: 24px; }
.personal-about-copy p + p { margin-top: 20px; }
.personal-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  list-style: none;
  margin-top: 24px;
}
.personal-socials a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-block: 4px;
}
.personal-socials a:hover { border-color: var(--accent); }
.personal-socials a span { color: var(--text-muted); font-size: 12px; }
.footer { padding: 28px 0 40px; border-top: 1px solid var(--border); text-align: center; }
.footer-text { color: var(--text-muted); font-size: 12px; }
@media (max-width: 600px) {
  .hero, .section, .footer { width: calc(100% - 40px); }
  .hero { padding: 56px 0 40px; }
  .hero-portrait { width: 80px; height: 80px; margin-bottom: 24px; }
  .section { padding-block: 36px; }
  .hero-subtitle, .journal-copy, .journal-intro, .personal-about-copy, .personal-contact-copy { font-size: 16px; }
  .personal-socials { gap: 12px 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Simple page tabs, kept in the document flow. */
.page-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 32px auto 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.page-tabs a {
  padding: 7px 20px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  min-width: 92px;
  text-align: center;
}
.page-tabs a:hover { color: var(--text-primary); background: #151515; }
.page-tabs a[aria-current="page"] { color: var(--accent); background: #202020; }
.hero { padding-top: 56px; }
@media (max-width: 600px) {
  .page-tabs { margin-top: 24px; }
  .hero { padding-top: 40px; }
}

/* Journal entries and long-form reading. */
.entry-meta { color: var(--text-muted); font-size: 12px; margin-bottom: 12px; }
.journal-entry { padding-top: 16px; }
.entry-title, .post-title, .post-body h2, .post-body h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--text-primary);
}
.entry-title { font-size: clamp(26px, 4vw, 32px); }
.entry-title a { text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }
.journal-post { width: min(100% - 48px, 680px); margin: 56px auto 64px; }
.post-back { display: inline-block; color: var(--text-secondary); font-size: 13px; margin-bottom: 32px; text-decoration: none; }
.post-title { font-size: clamp(34px, 5vw, 48px); margin: 14px 0 24px; overflow-wrap: break-word; }
.post-lede { font-size: 18px; line-height: 1.8; color: var(--text-secondary); }
.post-contents { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 24px 0; margin: 32px 0; border-block: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.post-body { color: var(--text-secondary); font-size: 17px; line-height: 1.85; overflow-wrap: break-word; }
.post-body p { margin: 20px 0; }
.post-body h2 { margin: 48px 0 20px; font-size: 30px; scroll-margin-top: 24px; }
.post-body h3 { margin: 32px 0 16px; font-size: 24px; }
.post-body a { color: var(--accent); }
.post-body code { font: .82em/1.6 ui-monospace, Consolas, monospace; color: var(--text-primary); }
.post-body p code, .post-body li code { background: #171717; padding: 2px 5px; border-radius: 4px; }
.post-body pre { max-width: 100%; overflow-x: auto; padding: 22px; margin: 28px 0; border: 1px solid var(--border); border-radius: 8px; background: #111111; line-height: 1.6; }
.post-body pre code { font-size: 13px; }
.post-body figure { margin: 32px 0; }
.post-body svg { display: block; width: 100%; height: auto; background: #151515; border: 1px solid var(--border); border-radius: 8px; font: 15px 'Inter', sans-serif; }
.post-body svg text { fill: var(--text-primary); }
.post-body figcaption { font-size: 12px; line-height: 1.7; margin-top: 12px; color: var(--text-muted); }
.post-body .table-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; }
.post-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13px; line-height: 1.7; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--border); }
.post-body th { color: var(--text-primary); font-weight: 500; }
.post-body ol { padding-left: 24px; }
.post-body li { margin: 16px 0; }
.post-end { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 24px; }
.post-end p { color: var(--text-muted); font-size: 12px; }
@media (max-width: 600px) {
  .journal-post { width: calc(100% - 40px); margin-top: 40px; }
  .post-body, .post-lede { font-size: 16px; }
  .post-body h2 { font-size: 26px; }
  .post-body pre { padding: 16px; }
}

.post-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.post-screenshot a { display: block; border-radius: 8px; }

/* Article navigation, code, and explanatory diagrams. */
.journal-post { position: relative; }
.post-sidebar { margin: 28px 0; }
.post-breadcrumbs { display: flex; flex-direction: column; gap: 8px; padding-left: 14px; border-left: 1px solid var(--border); font-size: 12px; }
.post-breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.post-breadcrumbs a:hover, .post-breadcrumbs [aria-current] { color: var(--accent); }
.post-outline { margin-top: 28px; }
.post-outline summary { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.post-contents { flex-direction: column; gap: 0; border: 0; border-left: 1px solid var(--border); padding: 0; margin: 14px 0 0; }
.post-contents a { padding: 6px 14px; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.5; text-decoration: none; }
.post-contents a:hover { color: var(--accent); }
.post-contents a[aria-current="location"] { border-left-color: var(--accent); color: var(--accent); }
@media (min-width: 1180px) {
  .post-sidebar { position: absolute; right: calc(100% + 48px); top: 0; bottom: 0; width: 174px; margin: 0; }
  .post-sidebar-inner { position: sticky; top: 32px; max-height: calc(100svh - 64px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 1179px) {
  .post-breadcrumbs { flex-direction: row; flex-wrap: wrap; padding: 0; border: 0; }
  .post-breadcrumbs > * + *::before { content: '/'; margin-right: 8px; color: var(--text-muted); }
  .post-contents { max-height: 240px; overflow-y: auto; }
}
.code-block { margin: 28px 0; background: #0e0e0e; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.code-label { padding: 10px 18px; background: #131313; border-bottom: 1px solid var(--border); color: #a6a6a6; font: 12px/1.6 ui-monospace, Consolas, monospace; }
.post-body .code-block pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 20px; tab-size: 4; }
.post-body pre code { font-size: 13px; line-height: 1.75; color: #dddddd; }
.syntax-comment { color: #929292; font-style: italic; }
.syntax-keyword { color: #d0b9dc; }
.syntax-function { color: #b9d3db; }
.syntax-number { color: #dcc6a9; }
.syntax-string { color: #c7d2b5; }
.syntax-constant { color: #d5c9e5; }
.syntax-operator { color: #b3b3b3; }
.diagram-frame { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: #0e0e0e; padding: 16px; }
.post-body svg.post-diagram {
  --diagram-panel: #171717;
  --diagram-border: #454545;
  --diagram-line: #d1d1d1;
  --diagram-muted: #757575;
  width: 100%; min-width: 560px; background: transparent; border: 0; border-radius: 0;
  font: 15px 'Inter', sans-serif;
}
.post-body svg.post-diagram text { fill: #c9c9c9; }
.post-body svg.post-diagram rect { rx: 10px; }
.post-body figcaption { padding-inline: 2px; color: #969696; }
.post-body p code, .post-body li code { background: #151515; border: 1px solid #252525; }
.post-body th { background: #111111; }
@media (max-width: 600px) { .post-body .code-block pre { padding: 16px; } .diagram-frame { padding: 10px; } }

.post-header .post-screenshot { margin-top: 32px; }
.post-header .post-screenshot figcaption { margin-top: 12px; color: var(--text-muted); font-size: 12px; line-height: 1.7; }