@font-face {
  font-family: 'Reddit Sans';
  src: url('/fonts/RedditSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '0xProto';
  src: url('/fonts/0xProto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '0xProto';
  src: url('/fonts/0xProto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '0xProto';
  src: url('/fonts/0xProto-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --sidebar-width: 240px;
  --page-bg: #faf9f7;
  --sidebar-bg: #1a1a1a;
  --sidebar-text: #f2f0ec;
  --sidebar-muted: #a8a29e;
  --accent: #8f0000;
}

/* Base typography — duplicated from minimal.css so prod matches local even if
   minimal.css is cached or fails to load. */
a {
  color: var(--accent);
  text-decoration: none;
}

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

#content p,
.post .content p,
#about_me p,
.main-content p {
  line-height: 1.9;
}

#content p + p,
.post .content p + p,
#about_me p + p,
.main-content p + p {
  margin-top: 1.25rem;
}

#content ul,
.post .content ul,
#about_me ul,
.main-content ul {
  margin-left: 2.5rem;
  margin-top: 0.625rem;
  margin-bottom: 0.9375rem;
}

#content ul li,
.post .content ul li,
#about_me ul li,
.main-content ul li {
  line-height: 2;
  margin-top: 0.5rem;
  font-size: 0.9em;
}

#content p + ul,
.post .content p + ul,
#about_me p + ul,
.main-content p + ul {
  margin-top: -0.3125rem !important;
}

#content ol li,
.post .content ol li,
.main-content ol li {
  line-height: 1.6;
}

div.clear {
  clear: both;
}

#overview .left {
  width: 45%;
  float: left;
  margin-top: 30px;
}

#overview .right {
  width: 45%;
  float: right;
  margin-top: 30px;
}

html {
  font-family: 'Reddit Sans', system-ui, sans-serif;
}

body {
  font-family: 'Reddit Sans', system-ui, sans-serif !important;
  background: var(--page-bg);
  color: #505050;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea,
p,
li,
td,
th,
blockquote,
figcaption,
label,
h1,
h2,
h3,
h4,
h5,
h6,
#menu,
#menu a,
#content,
#overview,
#about_me,
#resume,
#home,
.entry,
.cv,
.talk,
.job,
.listinfo,
.postdate,
.post-after,
.tags,
.post,
.post h2,
.post .body,
.post .content,
.post .postdate,
div.caption,
.sidebar,
.sidebar-nav,
.sidebar #menu li a {
  font-family: 'Reddit Sans', system-ui, sans-serif !important;
}

pre,
pre code,
pre *,
pre.astro-code,
pre.astro-code *,
code,
kbd,
samp,
.hljs,
.highlight,
.highlight pre,
.highlight code,
div.pygments,
div.pygments pre,
div.pygments code,
#archive_calendar ul span.fixed,
.post pre:not(.mermaid),
.post pre:not(.mermaid) code,
.post pre:not(.mermaid) *,
.post code,
.post .content pre:not(.mermaid),
.post .content pre:not(.mermaid) *,
.post .content code,
p code {
  font-family: '0xProto', ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace !important;
}

/* Code blocks (Shiki / fenced markdown) */
.post .content pre:not(.mermaid),
#content pre:not(.mermaid),
.post .content pre.astro-code {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  padding: 1rem 1.15rem !important;
  border: 1px solid #e8e4de !important;
  border-radius: 4px !important;
  background: #f6f4f0 !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  white-space: pre !important;
  overflow-x: auto !important;
  tab-size: 4;
}

.post .content pre code,
#content pre code,
.post .content pre.astro-code code {
  font-size: inherit !important;
  background: transparent !important;
  padding: 0 !important;
}

.post .content pre:not(.mermaid) *,
.post .content pre.astro-code *,
#content pre:not(.mermaid) * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
}

/* Inline code */
.post .content :not(pre) > code,
#content :not(pre) > code,
.post .content p code,
#content p code,
.post .content li code,
#content li code {
  font-size: 0.875em !important;
  background: #eee !important;
  padding: 0.15em 0.35em !important;
  border-radius: 3px;
}

/* Mermaid diagrams — keep labels readable and sized to content */
.post .content pre.mermaid,
#content pre.mermaid,
.post .content .mermaid,
#content .mermaid {
  font-family: 'Reddit Sans', system-ui, sans-serif !important;
  white-space: normal !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 !important;
  font-size: 0.85rem !important;
  line-height: normal !important;
}

.post .content pre.mermaid *,
#content pre.mermaid *,
.post .content .mermaid *,
#content .mermaid * {
  font-family: inherit !important;
  white-space: normal !important;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.mermaid .nodeLabel,
.mermaid .label,
.mermaid foreignObject,
.mermaid foreignObject div,
.mermaid .actor,
.mermaid .messageText,
.mermaid .edgeLabel,
.mermaid .labelText {
  font-size: 0.85rem !important;
  overflow: visible !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mermaid svg text {
  font-size: 13px;
}

.site-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.sidebar-avatar-link {
  display: block;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.sidebar-avatar {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto;
  border-radius: 50%;
}

.sidebar-nav {
  flex: 1;
}

.sidebar #menu {
  float: none;
  margin: 0;
  padding: 0;
  font-family: 'Reddit Sans', system-ui, sans-serif !important;
}

.sidebar #menu li {
  display: block;
  margin: 0 0 0.35rem;
}

.sidebar #menu li a {
  float: none;
  display: block;
  margin: 0;
  padding: 0.45rem 0.6rem;
  color: var(--sidebar-text);
  text-transform: none;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
}

.sidebar #menu li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.sidebar .social {
  margin: 1.5rem 0 0;
  padding: 0 0.15rem;
  text-align: center;
  white-space: nowrap;
}

.sidebar .social li {
  display: inline-block;
  margin: 0 0.2rem !important;
}

.sidebar .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  color: var(--sidebar-muted);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar .social a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.sidebar .social svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
}

.main-content #content {
  width: auto;
  max-width: 52rem;
  margin: 2rem auto 3rem;
  padding: 0 2rem;
}

#header {
  display: none;
}

#container {
  width: 100%;
}

.post {
  border-left: none;
  padding: 0;
  margin: 0;
}

/* Home page: full-width intro, then .left / .right columns */
#about_me .home-intro {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#about_me .home-intro > p:first-child {
  text-indent: 20px;
  margin-top: 20px;
}

#about_me .home-intro > p {
  margin-bottom: 1rem;
}

#about_me .squished {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#about_me h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

#about_me .left > h3:first-of-type,
#about_me .right > h3:first-of-type {
  margin-top: 1.75rem;
}

#about_me ul {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#about_me ul li {
  margin-top: 0.35rem;
}

/* Home column lists: flush left, no bullets */
#home #about_me .squished ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

#home #about_me .squished p + ul {
  margin-top: 0.5rem !important;
}

#home #about_me .squished ul li {
  margin-left: 0;
  padding-left: 0;
}

#home #about_me .home-more-writing {
  text-align: right;
  margin-top: 0.15rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

#home #about_me .home-more-writing a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #7a756e;
  text-decoration: none;
}

#home #about_me .home-more-writing a:hover {
  color: var(--accent);
  text-decoration: none;
}

#home #about_me .home-more-writing svg {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}

/* Heading spacing */
.post > h2,
.post > h1,
#content > .post > h2 {
  margin-top: 0 !important;
}

#content h1,
.post .content h1,
#resume h1 {
  margin-top: 2.75rem !important;
  margin-bottom: 0.75rem !important;
}

#content h2,
.post .content h2,
#resume h2 {
  margin-top: 2.5rem !important;
  margin-bottom: 0.6rem !important;
}

#content h3,
.post .content h3,
#overview h3,
#about_me h3,
#resume h3 {
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

#content h4,
.post .content h4,
#resume h4 {
  margin-top: 1.6rem !important;
  margin-bottom: 0.5rem !important;
}

#content h5,
.post .content h5,
#content h6,
.post .content h6,
#resume h5,
#resume h6 {
  margin-top: 1.35rem !important;
  margin-bottom: 0.5rem !important;
}

#content .post .content > :first-child,
#content .post .content > :first-child:is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0 !important;
}

/* Blockquote spacing */
#content blockquote,
.post .content blockquote,
#resume blockquote {
  margin-top: 3.5rem !important;
  margin-bottom: 2.75rem !important;
  border-left: 4px solid #b8b0a4 !important;
  padding-left: 1.25rem !important;
}

#content div.quote {
  margin-top: 3.5rem !important;
  margin-bottom: 2.75rem !important;
}

/* Post figures — card treatment for images on white backgrounds */
.post .content figure.figure-card,
#content figure.figure-card {
  width: 75%;
  margin: 2rem auto;
  padding: 1rem 1.25rem 1.1rem;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(26, 26, 26, 0.04),
    0 6px 18px rgba(26, 26, 26, 0.06);
  text-align: center;
  box-sizing: border-box;
}

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

.post .content figure.figure-card figcaption,
#content figure.figure-card figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #6b6560;
}

/* Post footer tags */
.post .post-after {
  margin-top: 3.5rem !important;
  text-align: right !important;
}

.post .post-after .tags {
  font-size: 0.7rem !important;
  line-height: 1.4;
  color: #888;
  text-align: right !important;
}

/* Posts archive — year sections with month grid */
.posts-archive .posts-year {
  margin-top: 2.5rem;
}

.posts-archive .posts-year:first-of-type {
  margin-top: 1.5rem;
}

.posts-archive .posts-year > h3 {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  font-size: 1.35rem;
  color: #3a3a3a;
  border-bottom: 1px solid #e8e4de;
  padding-bottom: 0.35rem;
}

.posts-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.posts-month {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  padding: 0.85rem 1rem 1rem;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.03);
}

.posts-month-label {
  margin: 0 0 0.6rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a756e !important;
}

.posts-archive .posts-month ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.posts-archive .posts-month li {
  margin: 0 0 0.65rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid #f0ece6;
  font-size: 0.88rem;
  line-height: 1.45;
}

.posts-archive .posts-month li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.posts-archive .posts-month li a {
  display: block;
}

.posts-day {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: #a8a29e;
}

@media (max-width: 768px) {
  .site-layout {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
  }

  .sidebar-avatar-link {
    margin: 0;
  }

  .sidebar-avatar {
    width: 64px;
    height: auto;
    margin: 0;
  }

  .sidebar-nav {
    flex: 1 1 200px;
  }

  .sidebar #menu li {
    display: inline-block;
    margin-right: 0.5rem;
  }

  .sidebar .social {
    width: 100%;
    margin-top: 0;
  }

  .main-content {
    margin-left: 0;
  }

  .main-content #content {
    margin-top: 1.5rem;
    padding: 0 1rem;
  }

  #about_me .home-intro,
  #about_me .squished {
    width: 100%;
  }

  #about_me .left,
  #about_me .right {
    width: 100%;
    float: none;
    margin-top: 0;
  }

  .post .content figure.figure-card,
  #content figure.figure-card {
    width: 92%;
  }

  .posts-month-grid {
    grid-template-columns: 1fr;
  }
}