<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>{{.Title}}</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="alternate icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{if .Post.HTML}}
  <meta name="description" content="{{.Post.Description}}">
  <meta property="og:title" content="{{.Post.Title}}">
  <meta property="og:description" content="{{.Post.Description}}">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://chaosmith.systems/blog/posts/{{.Post.Slug}}">
  <meta property="og:image" content="https://chaosmith.systems{{.Post.OGImage}}">
  <meta property="og:site_name" content="Chaosmith Systems">
  <meta property="article:published_time" content="{{.Post.Date.Format " 2006-01-02T15:04:05Z07:00"}}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{.Post.Title}}">
  <meta name="twitter:description" content="{{.Post.Description}}">
  <meta name="twitter:image" content="https://chaosmith.systems{{.Post.OGImage}}">
  {{else}}
  <meta property="og:title" content="{{.Title}}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://chaosmith.systems/blog/">
  <meta property="og:site_name" content="Chaosmith Systems">
  <meta name="twitter:card" content="summary">
  {{end}}
  <link rel="stylesheet" href="/src/thirdparty/fonts/fonts.css" media="print" onload="this.media='all'">
  <link rel="alternate" type="application/rss+xml" title="Chaosmith Systems — Field Notes" href="/blog/feed.xml">
  <link rel="alternate" type="application/feed+json" title="Chaosmith Systems — Field Notes (JSON)"
    href="/blog/feed.json">

  <script src="/src/thirdparty/htmx.min.js.js"></script>
  <style>
    :root {
      --bg: #05030a;
      --accent: #b574ff;
      --accent-soft: rgba(181, 116, 255, 0.12);
      --text: #f3f0ff;
      --text-dim: #a9a3c4;
      --border: rgba(255, 255, 255, 0.06);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: radial-gradient(circle at top, #1a1035 0, #05030a 55%);
      color: var(--text);
      font-family: "Inter", system-ui, sans-serif;
      display: flex;
      justify-content: center;
    }

    .wrap {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1040px;
      padding: 32px 20px 40px;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding: 18px 22px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.35));
      backdrop-filter: blur(18px);
    }

    .logo-mark {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(181, 116, 255, 0.7);
      background: radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.25), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(181, 116, 255, 0.9), transparent 60%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "JetBrains Mono", monospace;
      font-weight: 600;
      font-size: 20px;
    }

    .logo-mark a {
      color: inherit;
      text-decoration: none;
    }

    nav {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    nav a {
      color: var(--text-dim);
      text-decoration: none;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    nav a:hover {
      color: var(--accent);
    }

    main {
      margin-top: 24px;
    }

    main.grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 20px;
    }

    @media (max-width: 820px) {
      main.grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

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

    .post-list li {
      padding: 12px 0;
      border-top: 1px solid var(--border);
    }

    .post-list li:first-child {
      border-top: 0;
    }

    .post-list a {
      color: var(--text);
      text-decoration: none;
      font-size: 16px;
    }

    .post-list a:hover {
      color: var(--accent);
    }

    .article h1 {
      font-size: 28px;
      margin: 0 0 4px;
    }

    .post-date {
      display: block;
      font-size: 13px;
      color: var(--text-dim);
      margin-bottom: 24px;
    }

    .post-date-inline {
      font-size: 12px;
      color: var(--text-dim);
    }

    .article p {
      line-height: 1.7;
      color: var(--text-dim);
    }

    .article pre {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      overflow-x: auto;
    }

    .article code {
      font-family: "JetBrains Mono", monospace;
      font-size: 13px;
    }

    .article a {
      color: var(--accent);
    }

    .article img {
      max-width: 100%;
      border-radius: 12px;
    }

    .article blockquote {
      border-left: 3px solid var(--accent);
      margin: 0;
      padding: 4px 16px;
      color: var(--text-dim);
    }

    .article h1 {
      color: var(--text);
    }

    .article h2,
    .article h3 {
      color: var(--accent);
    }

    .article ul,
    .article ol {
      color: var(--text-dim);
      line-height: 1.7;
    }

    .article details {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.4);
      margin: 20px 0;
      overflow: hidden;
    }

    .article details summary {
      cursor: pointer;
      padding: 14px 18px;
      font-size: 14px;
      color: var(--accent);
      user-select: none;
      line-height: 1.5;
      background: linear-gradient(135deg, rgba(181, 116, 255, 0.06), rgba(0, 0, 0, 0.5));
      list-style: none;
    }

    .article details summary::-webkit-details-marker {
      display: none;
    }

    .article details summary::before {
      content: '▸ ';
      font-size: 12px;
    }

    .article details[open] summary::before {
      content: '▾ ';
    }

    .article details summary:hover {
      color: var(--text);
    }

    .article details[open] summary {
      border-bottom: 1px solid var(--border);
    }

    .article details[open] {
      color: var(--text-dim);
      line-height: 1.7;
      font-size: 14px;
    }

    .article details[open]>*:not(summary) {
      display: block;
      padding: 14px 18px;
    }

    .landing-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 20px;
    }

    @media (max-width: 820px) {
      .landing-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* Landing page styles */
    .hero {
      padding: 22px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: radial-gradient(circle at 0 0, rgba(181, 116, 255, 0.18), transparent 60%),
        linear-gradient(145deg, rgba(0, 0, 0, 0.85), rgba(8, 4, 22, 0.95));
    }

    .hero-title {
      font-size: clamp(24px, 3.3vw, 30px);
      margin: 0 0 10px;
    }

    .hero-sub {
      margin: 0 0 18px;
      font-size: 14px;
      color: var(--text-dim);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }

    @media (max-width: 640px) {
      .hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .pill {
      padding: 9px 10px;
      border-radius: 13px;
      background: rgba(0, 0, 0, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 12px;
      color: var(--text-dim);
    }

    .pill span {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .hero-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 18px;
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      background: radial-gradient(circle at 0 0, #ffd0ff 0, #b574ff 40%, #5b38ff 100%);
      color: #05030a;
      text-decoration: none;
    }

    .btn-primary:hover {
      filter: brightness(1.05);
    }

    .subnote {
      font-size: 11px;
      color: var(--text-dim);
      max-width: 260px;
    }

    .side {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    @media (max-width: 820px) {
      .side {
        text-align: left;
      }
    }

    .card {
      border-radius: 16px;
      border: 1px solid var(--border);
      background: linear-gradient(150deg, rgba(8, 5, 20, 0.96), rgba(4, 3, 10, 0.96));
      padding: 16px 16px 14px;
    }

    .card h2 {
      margin: 0 0 8px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-dim);
    }

    .card p {
      margin: 0 0 12px;
      font-size: 13px;
      color: var(--text-dim);
    }

    .list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 13px;
    }

    .list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .list li:first-child {
      border-top: 0;
    }

    .list-label {
      color: var(--text);
    }

    .list-tag {
      font-size: 11px;
      color: var(--text-dim);
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--accent-soft);
    }

    .links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chip {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(0, 0, 0, 0.6);
    }

    .chip a {
      color: var(--accent);
      text-decoration: none;
    }

    footer {
      margin-top: 30px;
      font-size: 11px;
      color: var(--text-dim);
      display: flex;
      justify-content: space-between;
      padding: 4px 2px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <header>
      <div style="display:flex; gap:14px; align-items:center;">
        <div class="logo-mark"><a href="/" hx-get="/" hx-target="main" hx-push-url="true">CS</a></div>
        <nav>
          <a href="/" hx-get="/" hx-target="main" hx-push-url="true">Home</a>
          <a href="/blog/" hx-get="/blog/" hx-target="main" hx-push-url="true">Blog</a>
        </nav>
      </div>
      <a href="/blog/feed.xml"
        style="margin-left:auto; font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); text-decoration:none;"
        hx-boost="false">RSS</a>
    </header>
    <main>
      {{template "main-content" .}}
    </main>
    <script>
      function initPage() {
        if (typeof hljs === 'undefined') return;
        document.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el));
      }
      window.addEventListener('DOMContentLoaded', initPage);
      document.body.addEventListener('htmx:afterSettle', initPage);
    </script>
    <footer>
      <span>Running on self-hosted infrastructure.</span>
      <span>Chaosmith Systems</span>
    </footer>
  </div>
</body>

</html>
