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

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

:root {
  --bg:              #fafafa;
  --fg:              #1a1a1a;
  --muted:           #767676;
  --faint:           #e4e4e4;
  --link:            #4a72a8;
  --link-hover:      #2a52a8;
  --modeline-fg:     #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:              #1e1e1e;
    --fg:              #d0d0d0;
    --muted:           #888888;
    --faint:           #2d2d2d;
    --link:            #7090c8;
    --link-hover:      #90b0e0;
    --modeline-fg:     #d0d0d0;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-wrap {
  flex: 1;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Header ── */

.site-header {
  margin-bottom: 2.5rem;
}

.site-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-title:hover {
  color: var(--link);
}

/* ── Post list ── */

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-item {
  display: flex;
  gap: 1.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--faint);
  align-items: baseline;
}

.post-item time {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-item a {
  color: var(--fg);
  text-decoration: none;
}

.post-item a:hover {
  color: var(--link);
}

/* ── Single post ── */

.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--faint);
}

.post-header h1 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.post-header time {
  color: var(--muted);
  font-size: 0.85rem;
}

.post-content {
  line-height: 1.75;
  font-size: 0.95rem;
}

.post-content p {
  margin: 0 0 1.2rem;
}

.post-content h1::before { content: '# '; color: var(--muted); font-weight: 400; }
.post-content h2::before { content: '## '; color: var(--muted); font-weight: 400; }
.post-content h3::before { content: '### '; color: var(--muted); font-weight: 400; }
.post-content h4::before { content: '#### '; color: var(--muted); font-weight: 400; }
.post-content h5::before { content: '##### '; color: var(--muted); font-weight: 400; }
.post-content h6::before { content: '###### '; color: var(--muted); font-weight: 400; }

.post-content h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}

.post-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}

.post-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}

.post-content h4,
.post-content h5,
.post-content h6 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}

.post-content a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover {
  color: var(--link-hover);
}

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
  border: 1px solid var(--faint);
}

.post-content code {
  background: var(--faint);
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  font-family: inherit;
}

.post-content pre {
  background: var(--faint);
  border: 1px solid var(--faint);
  padding: 1rem;
  overflow-x: auto;
  margin: 1.2rem 0;
}

.post-content pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
}

.post-content blockquote {
  border-left: 2px solid var(--muted);
  margin: 1.2rem 0;
  padding: 0 1rem;
  color: var(--muted);
}

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
  margin: 0 0 1.2rem;
}

.post-content li {
  margin-bottom: 0.25rem;
}

.callout {
  border-left: 2px solid var(--link);
  background: var(--faint);
  padding: 0.75rem 1rem;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--faint);
  margin: 2rem 0;
}

.post-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--faint);
}

.post-footer a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.post-footer a:hover {
  color: var(--link);
}

/* ── Modeline ── */

.modeline {
  background: var(--faint);
  color: var(--modeline-fg);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.78rem;
  padding: 0 1.5rem;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  user-select: none;
}

.modeline-left {
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.modeline-right {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.social-link {
  color: var(--modeline-fg);
  opacity: 0.6;
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  transition: opacity 0.15s;
}

.social-link:hover {
  opacity: 1;
}

/* ── Syntax highlighting — catppuccin-latte (light) ── */

.chroma { background: var(--faint); color: var(--fg); }
/* Error */ .chroma .err { color:#d20f39 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#bcc0cc }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8c8fa1 }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8c8fa1 }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#8839ef }
/* KeywordConstant */ .chroma .kc { color:#fe640b }
/* KeywordDeclaration */ .chroma .kd { color:#d20f39 }
/* KeywordNamespace */ .chroma .kn { color:#179299 }
/* KeywordPseudo */ .chroma .kp { color:#8839ef }
/* KeywordReserved */ .chroma .kr { color:#8839ef }
/* KeywordType */ .chroma .kt { color:#d20f39 }
/* NameAttribute */ .chroma .na { color:#1e66f5 }
/* NameClass */ .chroma .nc { color:#df8e1d }
/* NameConstant */ .chroma .no { color:#df8e1d }
/* NameDecorator */ .chroma .nd { color:#1e66f5;font-weight:bold }
/* NameEntity */ .chroma .ni { color:#179299 }
/* NameException */ .chroma .ne { color:#fe640b }
/* NameLabel */ .chroma .nl { color:#04a5e5 }
/* NameNamespace */ .chroma .nn { color:#fe640b }
/* NameProperty */ .chroma .py { color:#fe640b }
/* NameTag */ .chroma .nt { color:#8839ef }
/* NameBuiltin */ .chroma .nb { color:#04a5e5 }
/* NameBuiltinPseudo */ .chroma .bp { color:#04a5e5 }
/* NameVariable */ .chroma .nv { color:#dc8a78 }
/* NameVariableClass */ .chroma .vc { color:#dc8a78 }
/* NameVariableGlobal */ .chroma .vg { color:#dc8a78 }
/* NameVariableInstance */ .chroma .vi { color:#dc8a78 }
/* NameVariableMagic */ .chroma .vm { color:#dc8a78 }
/* NameFunction */ .chroma .nf { color:#1e66f5 }
/* NameFunctionMagic */ .chroma .fm { color:#1e66f5 }
/* LiteralString */ .chroma .s { color:#40a02b }
/* LiteralStringAffix */ .chroma .sa { color:#d20f39 }
/* LiteralStringBacktick */ .chroma .sb { color:#40a02b }
/* LiteralStringChar */ .chroma .sc { color:#40a02b }
/* LiteralStringDelimiter */ .chroma .dl { color:#1e66f5 }
/* LiteralStringDoc */ .chroma .sd { color:#9ca0b0 }
/* LiteralStringDouble */ .chroma .s2 { color:#40a02b }
/* LiteralStringEscape */ .chroma .se { color:#1e66f5 }
/* LiteralStringHeredoc */ .chroma .sh { color:#9ca0b0 }
/* LiteralStringInterpol */ .chroma .si { color:#40a02b }
/* LiteralStringOther */ .chroma .sx { color:#40a02b }
/* LiteralStringRegex */ .chroma .sr { color:#179299 }
/* LiteralStringSingle */ .chroma .s1 { color:#40a02b }
/* LiteralStringSymbol */ .chroma .ss { color:#40a02b }
/* LiteralNumber */ .chroma .m { color:#fe640b }
/* LiteralNumberBin */ .chroma .mb { color:#fe640b }
/* LiteralNumberFloat */ .chroma .mf { color:#fe640b }
/* LiteralNumberHex */ .chroma .mh { color:#fe640b }
/* LiteralNumberInteger */ .chroma .mi { color:#fe640b }
/* LiteralNumberIntegerLong */ .chroma .il { color:#fe640b }
/* LiteralNumberOct */ .chroma .mo { color:#fe640b }
/* Operator */ .chroma .o { color:#04a5e5;font-weight:bold }
/* OperatorWord */ .chroma .ow { color:#04a5e5;font-weight:bold }
/* Comment */ .chroma .c { color:#9ca0b0;font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#acb0be;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#9ca0b0;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:#9ca0b0;font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#9ca0b0;font-style:italic }
/* CommentPreproc */ .chroma .cp { color:#9ca0b0;font-style:italic }
/* CommentPreprocFile */ .chroma .cpf { color:#9ca0b0;font-weight:bold;font-style:italic }
/* GenericDeleted */ .chroma .gd { color:#d20f39;background-color:#ccd0da }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#d20f39 }
/* GenericHeading */ .chroma .gh { color:#fe640b;font-weight:bold }
/* GenericInserted */ .chroma .gi { color:#40a02b;background-color:#ccd0da }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#fe640b;font-weight:bold }
/* GenericTraceback */ .chroma .gt { color:#d20f39 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }

/* ── Syntax highlighting — catppuccin-macchiato (dark) ── */

@media (prefers-color-scheme: dark) {
  .chroma { background: var(--faint); color: var(--fg); }
  /* Error */ .chroma .err { color:#ed8796 }
  /* LineHighlight */ .chroma .hl { background-color:#494d64 }
  /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8087a2 }
  /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8087a2 }
  /* Keyword */ .chroma .k { color:#c6a0f6 }
  /* KeywordConstant */ .chroma .kc { color:#f5a97f }
  /* KeywordDeclaration */ .chroma .kd { color:#ed8796 }
  /* KeywordNamespace */ .chroma .kn { color:#8bd5ca }
  /* KeywordPseudo */ .chroma .kp { color:#c6a0f6 }
  /* KeywordReserved */ .chroma .kr { color:#c6a0f6 }
  /* KeywordType */ .chroma .kt { color:#ed8796 }
  /* NameAttribute */ .chroma .na { color:#8aadf4 }
  /* NameClass */ .chroma .nc { color:#eed49f }
  /* NameConstant */ .chroma .no { color:#eed49f }
  /* NameDecorator */ .chroma .nd { color:#8aadf4;font-weight:bold }
  /* NameEntity */ .chroma .ni { color:#8bd5ca }
  /* NameException */ .chroma .ne { color:#f5a97f }
  /* NameLabel */ .chroma .nl { color:#91d7e3 }
  /* NameNamespace */ .chroma .nn { color:#f5a97f }
  /* NameProperty */ .chroma .py { color:#f5a97f }
  /* NameTag */ .chroma .nt { color:#c6a0f6 }
  /* NameBuiltin */ .chroma .nb { color:#91d7e3 }
  /* NameBuiltinPseudo */ .chroma .bp { color:#91d7e3 }
  /* NameVariable */ .chroma .nv { color:#f4dbd6 }
  /* NameVariableClass */ .chroma .vc { color:#f4dbd6 }
  /* NameVariableGlobal */ .chroma .vg { color:#f4dbd6 }
  /* NameVariableInstance */ .chroma .vi { color:#f4dbd6 }
  /* NameVariableMagic */ .chroma .vm { color:#f4dbd6 }
  /* NameFunction */ .chroma .nf { color:#8aadf4 }
  /* NameFunctionMagic */ .chroma .fm { color:#8aadf4 }
  /* LiteralString */ .chroma .s { color:#a6da95 }
  /* LiteralStringAffix */ .chroma .sa { color:#ed8796 }
  /* LiteralStringBacktick */ .chroma .sb { color:#a6da95 }
  /* LiteralStringChar */ .chroma .sc { color:#a6da95 }
  /* LiteralStringDelimiter */ .chroma .dl { color:#8aadf4 }
  /* LiteralStringDoc */ .chroma .sd { color:#6e738d }
  /* LiteralStringDouble */ .chroma .s2 { color:#a6da95 }
  /* LiteralStringEscape */ .chroma .se { color:#8aadf4 }
  /* LiteralStringHeredoc */ .chroma .sh { color:#6e738d }
  /* LiteralStringInterpol */ .chroma .si { color:#a6da95 }
  /* LiteralStringOther */ .chroma .sx { color:#a6da95 }
  /* LiteralStringRegex */ .chroma .sr { color:#8bd5ca }
  /* LiteralStringSingle */ .chroma .s1 { color:#a6da95 }
  /* LiteralStringSymbol */ .chroma .ss { color:#a6da95 }
  /* LiteralNumber */ .chroma .m { color:#f5a97f }
  /* LiteralNumberBin */ .chroma .mb { color:#f5a97f }
  /* LiteralNumberFloat */ .chroma .mf { color:#f5a97f }
  /* LiteralNumberHex */ .chroma .mh { color:#f5a97f }
  /* LiteralNumberInteger */ .chroma .mi { color:#f5a97f }
  /* LiteralNumberIntegerLong */ .chroma .il { color:#f5a97f }
  /* LiteralNumberOct */ .chroma .mo { color:#f5a97f }
  /* Operator */ .chroma .o { color:#91d7e3;font-weight:bold }
  /* OperatorWord */ .chroma .ow { color:#91d7e3;font-weight:bold }
  /* Comment */ .chroma .c { color:#6e738d;font-style:italic }
  /* CommentHashbang */ .chroma .ch { color:#5b6078;font-style:italic }
  /* CommentMultiline */ .chroma .cm { color:#6e738d;font-style:italic }
  /* CommentSingle */ .chroma .c1 { color:#6e738d;font-style:italic }
  /* CommentSpecial */ .chroma .cs { color:#6e738d;font-style:italic }
  /* CommentPreproc */ .chroma .cp { color:#6e738d;font-style:italic }
  /* CommentPreprocFile */ .chroma .cpf { color:#6e738d;font-weight:bold;font-style:italic }
  /* GenericDeleted */ .chroma .gd { color:#ed8796;background-color:#363a4f }
  /* GenericEmph */ .chroma .ge { font-style:italic }
  /* GenericError */ .chroma .gr { color:#ed8796 }
  /* GenericHeading */ .chroma .gh { color:#f5a97f;font-weight:bold }
  /* GenericInserted */ .chroma .gi { color:#a6da95;background-color:#363a4f }
  /* GenericStrong */ .chroma .gs { font-weight:bold }
  /* GenericSubheading */ .chroma .gu { color:#f5a97f;font-weight:bold }
  /* GenericTraceback */ .chroma .gt { color:#ed8796 }
  /* GenericUnderline */ .chroma .gl { text-decoration:underline }
}

/* ── Mobile ── */

@media (max-width: 480px) {
  .page-wrap {
    padding: 1.5rem 1rem;
  }

  .post-item {
    flex-direction: column;
    gap: 0.15rem;
  }

  .modeline {
    height: 40px;
    padding: 0 1rem;
  }

  .modeline-left {
    display: none;
  }

  .modeline-right {
    gap: 0.75rem;
    width: 100%;
    justify-content: space-around;
  }

  .social-link {
    font-size: 0.8rem;
    padding: 0.5rem 0.25rem;
  }
}