/* =========================
       CSS Variables (Theming)
       ========================= */
    :root {
      --bg: #ffffff;
      --bg-elev: #f7f7f9;
      --text: #1b1f24;
      --text-muted: #5f6771;
      --border: #e5e7eb;
      --accent: #2f81f7;
      --accent-contrast: #ffffff;
      --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
      --radius: 12px;
      --container-max: 960px;
      --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    }

    :root[data-theme="dark"] {
      --bg: #0d1117;
      --bg-elev: #161b22;
      --text: #e6edf3;
      --text-muted: #8b949e;
      --border: #30363d;
      --accent: #58a6ff;
      --accent-contrast: #0d1117;
      --card-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }

    /* =========================
       Base Styles
       ========================= */
    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      line-height: 1.6;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

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

    a:hover {
      text-decoration: underline;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: var(--radius);
    }

    code, pre {
      font-family: var(--font-mono);
      font-size: 0.9em;
    }

    pre {
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem;
      overflow: auto;
    }

    /* =========================
       Layout
       ========================= */
    .container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 1.25rem;
    }

    header.site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(8px);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.9rem 0;
    }

    .site-title {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

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

    nav.main-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 1rem;
    }

    nav.main-nav a {
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    nav.main-nav a:hover {
      color: var(--text);
      text-decoration: none;
    }

    .tag-tech{
      max-width: 110px;
    }

        .tag-tech-60{
      max-width: 60px;
    }

    .image-row {
  display: flex;            /* Lines the images up in a row */
  justify-content: center;   /* Centers the images horizontally (options: space-between, space-around) */
  gap: 15px;                /* Adds spacing between the images */
}

.image-row img {
  width: 30%;               /* Adjusts size so all three fit perfectly in the row */
  height: auto;             /* Keeps the images proportional */
  object-fit: cover;        /* Ensures images scale cleanly without distorting */
}

    /* Base style for the entire link (Applies to "Logic ") */
.brand-link {
  font-family: 'Inter', sans-serif; /* Your first font */
  text-decoration: none;
  font-weight: 700;
}

/* Specific style override for "HQ" */
.brand-hq {
  font-family: 'Playfair Display', serif, italic; /* Your second font */
  font-weight: 300; /* Optional: differentiate the weights too */
  font-style: italic; 
}


.site-title {
  display: flex;
  align-items: center; /* Centers hamburger, logo, and text vertically */
  gap: 12px;           /* Adjusts spacing between elements */
}

/* Ensure the button and inner SVG align perfectly */
.theme-hamburger {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Give your brand logo SVG fixed, predictable sizing instead of 10% */
.site-logo-svg {
  width: 24px;   /* Match this closely to your typography size */
  height: 24px;
  display: block;
}



    .icons-col-theme{
      color: var(--text) !important;
    }

      .theme-hamburger {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text);
      padding: 0.4rem 0.6rem;
      border-radius: 0.7em;
      font-size: 0.85rem;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .theme-hamburger:hover {
      border-color: var(--accent);
    }

    .theme-hamburger .icon {
      width: 1.1em;
      height: 1.1em;
      display: inline-block;
    }


    /* Theme toggle */
    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: 1px solid var(--border);
      background: var(--bg-elev);
      color: var(--text);
      padding: 0.4rem 0.6rem;
      border-radius: 999px;
      font-size: 0.85rem;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .theme-toggle:hover {
      border-color: var(--accent);
    }

    .theme-toggle .icon {
      width: 1.1em;
      height: 1.1em;
      display: inline-block;
    }

    /* =========================
       Hero / Intro
       ========================= */
    .hero {
      padding: 2.5rem 0 1.5rem;
    }

    .hero h1 {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      margin: 0 0 0.5rem;
      letter-spacing: -0.02em;
    }

    .hero p {
      color: var(--text-muted);
      margin: 0;
      max-width: 60ch;
    }

    /* =========================
       Posts Grid
       ========================= */
    .posts {
      padding: 1rem 0 3rem;
    }

    .posts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.25rem;
    }

    .post-card {
      background: var(--bg-elev);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .post-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      border-color: var(--accent);
    }

    .post-card .post-image {
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, var(--bg-elev), var(--bg));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 0.9rem;
    }

    .post-card .post-content {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex: 1;
    }

    .art-link {
    text-decoration: none;
    color: #e5e7eb;
}
    /* Keep all your existing CSS the same, just add this at the bottom */

@media (min-width: 600px) {
  .post-card--featured {
    grid-column: span 2;
  }
}

    .post-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .post-title {
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
      line-height: 1.35;
    }

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

    .post-excerpt {
      font-size: 0.92rem;
      color: var(--text-muted);
      margin: 0;
      flex: 1;
    }

    .post-link {
      font-size: 0.85rem;
      font-weight: 600;
      margin-top: auto;
    }

    /* =========================
       Footer
       ========================= */
    footer.site-footer {
      max-height: 3rem;
      border-top: 1px solid var(--border);
      padding: 1.5rem 0 2.5rem;
      color: var(--text-muted);
      font-size: 0.7rem;
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
    }

    .footer-links {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: var(--text-muted);
    }

    .footer-links a:hover {
      color: var(--text);
      text-decoration: none;
    }

    /* =========================
       Responsive tweaks
       ========================= */
    @media (max-width: 640px) {
      .header-inner {
        flex-wrap: wrap;
        gap: 0.6rem;
      }

      nav.main-nav ul {
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      .hero {
        padding-top: 1.5rem;
      }
    }
 
      .chart-container-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
      }
      .chart-header {
        white-space: pre-wrap;
        word-break: break-word;
        display: none;
        padding: 16px 16px 0 16px;
        flex-shrink: 0;
        font-size: 16px;
        font-weight: bold;
        color: #E8E8E8;
        font-family: 'Google Sans', Roboto, Arial, sans-serif;
      }
      #chart-container {
        
        flex-grow: 1;
        min-height: 0;
        
        position: relative;
        padding: 8px 16px 16px 16px;
        box-sizing: border-box;
      }
      canvas {
        width: 100% !important;
        height: 100% !important;
      }

        
        .art-body {
            max-width: 1012px;
            margin: 0 auto;
            padding: 45px;
            /* border: 1px solid #d0d7de; */
            border: 1px solid var(--border);
            border-radius: 6px;
        }
        h2 {
            font-size: 1.5em;
            font-weight: 600;
            padding-bottom: 0.3em;
            border-bottom: 1px solid var(--border);
            margin-top: 24px;
            margin-bottom: 16px;
        }
        h3 {
            font-size: 1.25em;
            font-weight: 600;
            margin-top: 24px;
            margin-bottom: 16px;
            display: inline;
        }
        p {
            margin-top: 0;
            margin-bottom: 16px;
        }
        ul {
            padding-left: 2em;
            margin-top: 0;
            margin-bottom: 16px;
        }
        li {
            margin-top: 0.25em;
        }
        li + li {
            margin-top: 0.25em;
        }
        code {
            padding: 0.2em 0.4em;
            margin: 0;
            font-size: 85%;
            white-space: break-spaces;
            background-color: rgba(175,184,193,0.2);
            border-radius: 6px;
            font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
        }
        img {
            max-width: 100%;
            box-sizing: content-box;
            /* background-color: #ffffff; */
        }
        details {
            display: block;
            padding: 16px;
            margin-bottom: 16px;
            /* background-color: #f6f8fa; */
            border: 1px solid var(--border);
            border-radius: 6px;
        }
        details summary {
            cursor: pointer;
            font-weight: 600;
            list-style: none;
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        details summary::before {
            content: "► ";
            font-size: 0.8em;
            color: #57606a;
            margin-right: 4px;
        }
        details[open] summary::before {
            content: "▼ ";
        }
        details[open] summary {
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 8px;
        }
        .highlight {
            font-weight: 600;
        }