/* Shared blog styles — reuses the homepage design tokens so /blog matches / exactly,
   plus blog-specific components (post header, figure cards, pillar callouts, post list). */
:root {
  --bg: #ffffff;
  --ink: #1b1a18;
  --ink-rgb: 27, 26, 24;
  --accent: var(--c-blue);
  --accent-rgb: var(--c-blue-rgb);
  --logo-stroke: #2b2b2b;
  --c-pink: #ef476f; --c-mint: #06d6a0; --c-orange: #f78c6b; --c-purple: #9b5de5;
  --c-teal: #0cb0a9; --c-yellow: #ffd166; --c-ocean: #118ab2;
  --c-blue-rgb: 106, 142, 234; --c-blue: rgb(var(--c-blue-rgb));
  --diag-accent: #eaf0fd;   /* solid fill for accented diagram nodes (light theme) */
  --text: 760px;   /* a comfortable reading column for long-form prose */
  --head: 1000px;
  --pad: 2.5rem;
}
html[data-theme="dark"] {
  --bg: #14151a;
  --ink: #ececf1;
  --ink-rgb: 236, 236, 241;
  --logo-stroke: #0d0e12;
  --c-pink: #f26889; --c-mint: #33ddb1; --c-orange: #f8a186; --c-purple: #ad7aea;
  --c-teal: #38beb8; --c-yellow: #ffd982; --c-ocean: #3c9fc0;
  --c-blue-rgb: 138, 166, 240;
  --diag-accent: #212636;   /* solid fill for accented diagram nodes (dark theme) */
}
*, *::before, *::after { transition: background-color 0.45s ease; }
.tri { transition: fill 0.3s ease, stroke 0.3s ease; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after, .tri { transition: none; } }
@media (max-width: 700px) { :root { --pad: 1.4rem; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); min-height: 100vh;
}

/* Header (same as home) */
header {
  display: flex; align-items: center; gap: 0.7rem;
  max-width: var(--head); margin: 0 auto; padding: 1.5rem var(--pad);
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand .logo { height: 44px; width: auto; display: block; overflow: visible; }
header .name { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
nav { margin-left: auto; display: flex; align-items: center; gap: 2.5rem; }
nav a { color: var(--ink); text-decoration: none; font-size: 1.2rem; opacity: 0.6; transition: opacity 0.15s ease; }
nav a:hover, nav a.here { opacity: 1; }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--ink); opacity: 0.6; transition: opacity 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Logo triangles: pop in with a staggered left-to-right colour sweep on page load (same as the home page). */
:root { --pop-dur: 0.55s; --pop-step: 0.09s; --pop-total: 0.4s; --color-dur: 0.4s; --color-step: 0.11s; }
.tri {
  stroke: var(--logo-stroke); stroke-width: 7; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  opacity: 0; fill: var(--c); fill-opacity: 0;
  animation:
    triIn var(--pop-dur) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * var(--pop-step)) forwards,
    colorIn var(--color-dur) ease calc(var(--pop-total) + var(--i, 0) * var(--color-step)) forwards;
}
@keyframes triIn {
  0%   { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes colorIn { 0% { fill-opacity: 0; } 100% { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tri { animation: none; opacity: 1; fill-opacity: 1; } }

/* Post layout */
main { max-width: var(--text); margin: 0 auto; padding: 0 var(--pad); }
.post-header { padding: 3.5rem 0 1.5rem; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.post-header .eyebrow {
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600; color: var(--accent); margin-bottom: 1.1rem;
}
.post-header h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
.post-header .meta { margin-top: 1.1rem; font-size: 0.92rem; color: rgba(var(--ink-rgb), 0.5); }
.post-header .dek { margin-top: 1.3rem; font-size: 1.2rem; line-height: 1.55; color: rgba(var(--ink-rgb), 0.72); }

article { padding: 1rem 0 2rem; }
article section { padding: 2.4rem 0; }
article section + section { border-top: 1px solid rgba(var(--ink-rgb), 0.07); }
.label { font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 1rem; }
article h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; }
article h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 2rem; }
article p { font-size: 1.09rem; line-height: 1.7; color: rgba(var(--ink-rgb), 0.82); margin-top: 1.15rem; }
article p strong { color: var(--ink); font-weight: 600; }
article em { font-style: italic; }
article a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.5); text-underline-offset: 3px; }
article a:hover { text-decoration-color: var(--accent); }
article ul { margin: 1.15rem 0 0 1.2rem; }
article li { font-size: 1.09rem; line-height: 1.65; color: rgba(var(--ink-rgb), 0.82); margin-top: 0.5rem; }

/* Figures — sit on a white card so the (white-background) plots read in both themes */
/* Figures sit on a white card (so the white-background plots read in both themes), centered, and kept
   modest so they don't dominate the prose. Single-panel plots are capped small; two-panel plots (train|val,
   baselines) fill the reading column. */
figure.fig { margin: 2rem auto 0.75rem; max-width: 500px; }
figure.fig.wide { max-width: 100%; }
figure.fig .frame { background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.10); border-radius: 10px; padding: 0.7rem; }
figure.fig img { width: 100%; height: auto; display: block; border-radius: 3px; }
figure.fig figcaption { margin-top: 0.7rem; font-size: 0.86rem; color: rgba(var(--ink-rgb), 0.55); line-height: 1.5; }

/* Pillar callout */
.pillar {
  margin: 1.8rem 0 0; padding: 1.1rem 1.3rem; border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.pillar .tag { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.pillar .body { margin-top: 0.35rem; font-size: 1rem; line-height: 1.55; color: rgba(var(--ink-rgb), 0.86); }
.pillar .body strong { color: var(--ink); }
.pillar.todo { background: rgba(var(--ink-rgb), 0.04); border-color: rgba(var(--ink-rgb), 0.14); }
.pillar.todo .tag { color: rgba(var(--ink-rgb), 0.5); }

/* Numbered pillar list in §2 */
ol.pillars { list-style: none; counter-reset: p; margin: 1.8rem 0 0; }
ol.pillars li { position: relative; padding: 0.9rem 0 0.9rem 3rem; border-top: 1px solid rgba(var(--ink-rgb), 0.09); }
ol.pillars li::before {
  counter-increment: p; content: counter(p);
  position: absolute; left: 0; top: 0.9rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.95rem;
}
ol.pillars .goal { display: block; font-weight: 600; color: var(--ink); }
ol.pillars .how { display: block; margin-top: 0.25rem; color: rgba(var(--ink-rgb), 0.62); }
ol.pillars .how b { color: var(--accent); font-weight: 700; }

/* Post list (blog index) */
.post-list { padding: 1rem 0 3rem; }
.post-card { display: block; padding: 1.8rem 0; border-top: 1px solid rgba(var(--ink-rgb), 0.09); text-decoration: none; color: var(--ink); }
.post-card:hover h2 { color: var(--accent); }
.post-card .date { font-size: 0.85rem; color: rgba(var(--ink-rgb), 0.5); }
.post-card h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.4rem; transition: color 0.15s ease; }
.post-card p { margin-top: 0.6rem; font-size: 1.02rem; line-height: 1.55; color: rgba(var(--ink-rgb), 0.68); }

/* TL;DR — shaded callout box at the top */
.tldr {
  margin: 2.2rem 0 0.5rem; padding: 1.4rem 1.6rem; border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.035); border: 1px solid rgba(var(--ink-rgb), 0.12);
}
.tldr .tldr-tag { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.tldr ul { list-style: none; margin: 0.9rem 0 0; }
.tldr li { position: relative; padding: 0.34rem 0 0.34rem 1.5rem; font-size: 1.02rem; line-height: 1.55; color: rgba(var(--ink-rgb), 0.85); margin: 0; }
.tldr li::before { content: ""; position: absolute; left: 0.1rem; top: 0.82rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tldr li strong { color: var(--ink); font-weight: 600; }

/* Result callout — for the standout numbers */
.result {
  margin: 1.9rem 0 0; padding: 1.15rem 1.4rem; border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.11); border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-left: 4px solid var(--accent);
}
.result .big { font-size: 1.18rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.result .body { margin-top: 0.3rem; font-size: 1rem; line-height: 1.55; color: rgba(var(--ink-rgb), 0.82); }

/* Dataset example montage */
figure.dataset { margin: 1.9rem auto 0.75rem; max-width: 440px; }
figure.dataset .frame { background: #fff; border: 1px solid rgba(var(--ink-rgb), 0.10); border-radius: 12px; padding: 0.6rem; }
figure.dataset img { width: 100%; height: auto; display: block; border-radius: 4px; }
figure.dataset figcaption { margin-top: 0.7rem; font-size: 0.86rem; color: rgba(var(--ink-rgb), 0.55); line-height: 1.5; }

/* SVG architecture diagram — theme-adaptive via the design tokens */
figure.diagram { margin: 2rem auto 0.75rem; max-width: 720px; }
figure.diagram svg { width: 100%; height: auto; display: block; }
figure.diagram figcaption { margin-top: 0.6rem; font-size: 0.86rem; color: rgba(var(--ink-rgb), 0.55); line-height: 1.5; text-align: center; }
.diagram .node { fill: var(--bg); stroke: rgba(var(--ink-rgb), 0.45); stroke-width: 1.6; }
.diagram .node.accent { fill: var(--diag-accent); stroke: var(--accent); }
.diagram .lab { fill: var(--ink); font: 600 14px -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .sub { fill: rgba(var(--ink-rgb), 0.6); font: 500 11.5px -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .edge { stroke: rgba(var(--ink-rgb), 0.5); stroke-width: 1.8; fill: none; }
.diagram .edgelab { fill: rgba(var(--ink-rgb), 0.6); font: 600 11px -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .arrowfill { fill: rgba(var(--ink-rgb), 0.5); }
.diagram .glyph { fill: var(--accent); }

/* Class-incremental timeline diagram */
figure.stream-svg .tile-num { fill: #fff; font: 700 15px -apple-system, "Segoe UI", Roboto, sans-serif; }
figure.stream-svg .divider { stroke: rgba(var(--ink-rgb), 0.38); stroke-width: 1.6; stroke-dasharray: 4 5; fill: none; }
figure.stream-svg .bracket { stroke: rgba(var(--ink-rgb), 0.28); stroke-width: 1.4; fill: none; }
figure.stream-svg .ell { fill: rgba(var(--ink-rgb), 0.55); font: 700 22px -apple-system, "Segoe UI", Roboto, sans-serif; }
figure.stream-svg .tilebox { fill: var(--bg); stroke: rgba(var(--ink-rgb), 0.14); stroke-width: 1.4; }
/* the stream tiles arrive one at a time (visible by default; the animation only enhances) */
html.js figure.stream-svg .stream-tile { transform-box: fill-box; transform-origin: center; }
@keyframes popTile { from { opacity: 0; transform: translateY(10px) scale(0.82); } to { opacity: 1; transform: none; } }
html.js figure.stream-svg.reveal.in .stream-tile { animation: popTile 0.5s cubic-bezier(.2,.7,.2,1) calc(var(--k, 0) * 0.14s) both; }
@media (prefers-reduced-motion: reduce) { html.js figure.stream-svg.reveal.in .stream-tile { animation: none; } }

/* Scroll-reveal: content is VISIBLE BY DEFAULT and merely animates in when .in is added. A blocked or
   failed script can therefore never hide anything; the animation is a pure enhancement. */
@keyframes revealIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.js .reveal.in { animation: revealIn 0.7s cubic-bezier(.2,.7,.2,1) both; }
/* diagram arrows draw themselves on reveal; solid and visible by default */
html.js figure.diagram .edge { stroke-dasharray: var(--len, 300); }
@keyframes drawEdge { from { stroke-dashoffset: var(--len, 300); } to { stroke-dashoffset: 0; } }
html.js figure.diagram.reveal.in .edge { animation: drawEdge 0.9s ease 0.15s both; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal.in, html.js figure.diagram.reveal.in .edge { animation: none; }
}

footer {
  max-width: var(--text); margin: 0 auto; padding: 2.5rem var(--pad);
  border-top: 1px solid rgba(var(--ink-rgb), 0.09); font-size: 0.85rem; color: rgba(var(--ink-rgb), 0.45);
}
@media (max-width: 640px) {
  header { padding: 1rem 1.25rem; gap: 0.5rem; }
  .brand .logo { height: 32px; } header .name { font-size: 1.2rem; }
  nav { gap: 1.4rem; } nav a { font-size: 1rem; }
}