/* ============================================
   Catppuccin — Latte (light) + Mocha (dark)
   https://catppuccin.com
   ============================================ */

:root {
  /* Latte */
  --ctp-mauve:    #8839ef;
  --ctp-red:      #d20f39;
  --ctp-peach:    #fe640b;
  --ctp-yellow:   #df8e1d;
  --ctp-green:    #40a02b;
  --ctp-teal:     #179299;
  --ctp-sky:      #04a5e5;
  --ctp-blue:     #1e66f5;
  --ctp-lavender: #7287fd;
  --ctp-text:     #4c4f69;
  --ctp-subtext1: #5c5f77;
  --ctp-subtext0: #6c6f85;
  --ctp-overlay1: #8c8fa1;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-base:     #eff1f5;
  --ctp-mantle:   #e6e9ef;
  --ctp-crust:    #dce0e8;

  /* Semantic tokens */
  --bg:          var(--ctp-base);
  --bg-alt:      var(--ctp-mantle);
  --border:      var(--ctp-crust);
  --text:        var(--ctp-text);
  --text-muted:  var(--ctp-subtext1);
  --text-faint:  var(--ctp-subtext0);
  --link:        var(--ctp-mauve);
  --link-hover:  var(--ctp-lavender);
  --code-bg:     var(--ctp-mantle);
  --code-border: var(--ctp-surface0);

  /* Syntax tokens */
  --syn-comment:  var(--ctp-overlay1);
  --syn-keyword:  var(--ctp-mauve);
  --syn-string:   var(--ctp-green);
  --syn-number:   var(--ctp-peach);
  --syn-builtin:  var(--ctp-sky);
  --syn-class:    var(--ctp-yellow);
  --syn-function: var(--ctp-blue);
  --syn-operator: var(--ctp-teal);
  --syn-punct:    var(--ctp-subtext1);

  /* Typography */
  --font-serif:   "Spectral", "New York", ui-serif, "Charter",
                  "Palatino Linotype", Palatino, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Segoe UI", system-ui, ui-sans-serif, sans-serif;
  --font-mono:    "Iosevka Charon", "Iosevka", "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --measure: 68ch;
  --gap:     1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ctp-mauve:    #cba6f7;
    --ctp-red:      #f38ba8;
    --ctp-peach:    #fab387;
    --ctp-yellow:   #f9e2af;
    --ctp-green:    #a6e3a1;
    --ctp-teal:     #94e2d5;
    --ctp-sky:      #89dceb;
    --ctp-blue:     #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text:     #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay1: #7f849c;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base:     #1e1e2e;
    --ctp-mantle:   #181825;
    --ctp-crust:    #11111b;

    --border:      var(--ctp-surface0);
    --code-border: var(--ctp-surface1);
  }
}

/* ============================================
   Reset & base
   ============================================ */

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

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  padding: 0 var(--gap);
}

/* ============================================
   Layout
   ============================================ */

.site-wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ============================================
   Header & nav
   ============================================ */

header.site-header {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-title {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

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

nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

nav a {
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  letter-spacing: -0.01em;
  transition: background 0.12s ease, color 0.12s ease;
}

nav a:hover {
  color: var(--text);
  background: var(--bg-alt);
}

/* ============================================
   Main & footer
   ============================================ */

main {
  min-height: 60vh;
}

footer.site-footer {
  margin-top: 6rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}

footer.site-footer a {
  color: var(--text-faint);
  text-decoration: none;
}

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

/* ============================================
   Hero
   ============================================ */

.hero {
  padding: 3rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 0.875rem;
}

.hero-desc {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44ch;
}

/* ============================================
   Post list (index / section)
   ============================================ */

.post-list {
  list-style: none;
}

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

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

.post-list-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
  white-space: nowrap;
  min-width: 8rem;
}

.post-list-title {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

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

/* ============================================
   Post header — Anthropic blog style
   ============================================ */

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

.post-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.post-title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.post-meta {
  font-size: 0.875rem;
  color: var(--text-faint);
  letter-spacing: -0.005em;
}

/* ============================================
   Post / page body
   ============================================ */

.post-content {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* Headings inside prose */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 2.75rem;
  margin-bottom: 0.625rem;
  color: var(--text);
}

.post-content h1 { font-size: 1.5rem; }
.post-content h2 { font-size: 1.1875rem; }
.post-content h3 { font-size: 1rem; }
.post-content h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.post-content p {
  margin-bottom: 1.5rem;
}

.post-content a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}

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

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

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

.post-content li::marker {
  color: var(--text-faint);
}

.post-content blockquote {
  border-left: 3px solid var(--ctp-mauve);
  padding: 0.25rem 0 0.25rem 1.375rem;
  margin: 2rem 0;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.65;
}

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

/* ============================================
   Images
   ============================================ */

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 2.5rem 0;
}

.post-content figcaption {
  font-size: 0.8125rem;
  color: var(--text-faint);
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
  font-style: italic;
  letter-spacing: -0.005em;
}

/* ============================================
   Code — inline
   ============================================ */

.post-content code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 5px;
  padding: 0.15em 0.4em;
  color: var(--ctp-mauve);
}

/* ============================================
   Code blocks
   ============================================ */

/* Chroma wraps in .highlight > pre, bare fenced blocks are just pre > code */
.post-content .highlight,
.post-content pre:not(.highlight pre) {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* Strip styling from the pre inside a highlight wrapper */
.post-content .highlight pre {
  background: none !important;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.post-content pre code,
.post-content .highlight code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--text);
}

/* Syntax — Catppuccin Chroma tokens */
.chroma .c,  .chroma .cm, .chroma .c1, .chroma .cs { color: var(--syn-comment); font-style: italic; }
.chroma .k,  .chroma .kd, .chroma .kn, .chroma .kp { color: var(--syn-keyword); }
.chroma .s,  .chroma .s1, .chroma .s2, .chroma .sb  { color: var(--syn-string); }
.chroma .mi, .chroma .mf, .chroma .mh                { color: var(--syn-number); }
.chroma .nb, .chroma .bp                             { color: var(--syn-builtin); }
.chroma .nc, .chroma .nn                             { color: var(--syn-class); }
.chroma .nf, .chroma .na                             { color: var(--syn-function); }
.chroma .o,  .chroma .ow                             { color: var(--syn-operator); }
.chroma .p                                           { color: var(--syn-punct); }
.chroma .err                                         { color: var(--ctp-red); }
.chroma .nt                                          { color: var(--ctp-mauve); }
.chroma .nx                                          { color: var(--text); }

/* ============================================
   Back link
   ============================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-decoration: none;
  margin-bottom: 2.5rem;
  letter-spacing: -0.005em;
  transition: color 0.1s ease;
}

.back-link:hover {
  color: var(--text);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 640px) {
  html { font-size: 17px; }

  header.site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.5rem 0 1.25rem;
    margin-bottom: 2.5rem;
  }

  nav {
    margin-left: 0;
    gap: 0;
  }

  nav a {
    padding: 0.25rem 0.5rem;
  }

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

  .post-list-date {
    font-size: 0.6875rem;
  }

  .post-header {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }

  .post-content {
    font-size: 1rem;
  }
}