/* OpenAssist blog — shared by the listing and every article.
 *
 * Dark only, deliberately. HomePage.tsx:358, ContactPage.tsx:15 and LoginPage.tsx:15 all
 * strip `.light` on mount; light mode is an in-app feature and the public surface is dark.
 * There is no `.light` block here and there must not be one.
 *
 * The --color-* names and values mirror index.css:5-15 so a palette change in one file is
 * legibly parallel to the other. They are NOT imported — the app's built CSS filename is
 * content-hashed (dist/assets/index-<hash>.css) and cannot be linked from a static file.
 */
:root{
  --color-aqua:188 225 230; --color-lagoon:100 128 161; --color-italian:73 46 133;
  --color-deep:20 42 98;    --color-cod:11 15 26;       --color-ember:245 158 11;
  --color-iris:141 121 179; --color-silky:246 243 230;  --color-slate:26 45 80;
  --color-surface:37 61 102;

  --ink:rgb(var(--color-aqua));
  --ink-2:rgb(var(--color-aqua) / .62);
  --ink-3:rgb(var(--color-aqua) / .40);
  --bg:rgb(var(--color-cod));
  --card:rgb(var(--color-surface) / .55);
  --line:rgb(var(--color-lagoon) / .25);
  --line-soft:rgb(var(--color-lagoon) / .12);
  --accent:rgb(var(--color-lagoon));

  --wrap:1100px;
  --measure:68ch;
  --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem;
  --ease:cubic-bezier(.2,.8,.3,1);

  /* index.css:125 names Inter but nothing ever loads it — no @font-face, no Google Fonts
   * link — so it resolves to -apple-system. Copy the stack verbatim and load NO webfont,
   * or the blog becomes the only page on the domain in a different typeface. */
  --f-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing, not boilerplate. Every article <img> carries width/height
   attributes for layout stability, and an explicit height attribute overrides CSS
   aspect-ratio — which silently rendered the 16:9 hero figure at 1036x900. The more
   specific .thumb/.post-thumb rules below still set height:100% and win. */
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:.25rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.label{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.3em;color:var(--ink-3)}

/* ── Header ────────────────────────────────────────────────────────
   A hand-written static lookalike of HomePage.tsx's React header. A static page cannot
   mount React without shipping the SPA bundle, which would defeat the point of this blog.
   THE TWO CAN DRIFT. If you restyle the header on HomePage.tsx, change it here too. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:2rem 0;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgb(var(--color-deep) / .6);backdrop-filter:blur(20px);
  border-bottom-color:rgb(var(--color-lagoon) / .1);padding:1rem 0;
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* OPENASSIST is one word. It is wrapped in `.mark` so the whole wordmark is a
   SINGLE flex item — as a bare text node plus the accent span it was two items,
   and the flex `gap` landed between them and split it into "OPEN ASSIST".
   The gap is 0 and the logo spacing is a margin on the image as well, so the
   mark survives either half of the pair being served from a stale cache
   (blog.css is unversioned and browser-cached for 4h).
   Sizing and tracking match the SPA header (text-xl/font-black/tracking-tighter). */
.wordmark{
  display:flex;align-items:center;gap:0;font-size:1.25rem;font-weight:900;
  color:var(--ink);letter-spacing:-.05em;
}
.wordmark:hover{text-decoration:none}
.wordmark img{height:2rem;width:2rem;object-fit:contain;margin-right:.75rem}
.wordmark .b{color:var(--accent)}
.nav-cta{
  background:rgb(var(--color-lagoon) / .2);color:var(--accent);
  border:1px solid rgb(var(--color-lagoon) / .3);
  padding:.75rem 1.5rem;border-radius:var(--r-md);
  font-size:.625rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  transition:all .3s var(--ease);
}
.nav-cta:hover{background:rgb(var(--color-lagoon));color:var(--ink);text-decoration:none;transform:scale(1.05)}

/* ── Shared pieces ─────────────────────────────────────────────── */
.pill{
  display:inline-block;padding:.25rem .75rem;border-radius:999px;
  background:rgb(var(--color-lagoon) / .15);border:1px solid rgb(var(--color-lagoon) / .3);
  color:var(--accent);font-size:.65rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.15em;
}
.meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--ink-3);font-size:.8rem;margin:0}
.meta .dot{opacity:.5}
.btn-primary{
  display:inline-block;background:linear-gradient(to right,rgb(var(--color-italian)),rgb(var(--color-lagoon)));
  color:var(--ink);padding:1rem 2rem;border-radius:var(--r-xl);
  font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  transition:transform .3s var(--ease);
}
.btn-primary:hover{text-decoration:none;transform:scale(1.05)}
.btn-ember{
  display:inline-block;background:linear-gradient(to right,rgb(var(--color-ember)),rgb(var(--color-ember) / .8));
  color:rgb(var(--color-deep));padding:1.15rem 2.5rem;border-radius:var(--r-xl);
  font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:.15em;
  box-shadow:0 10px 30px rgb(var(--color-ember) / .2);transition:transform .3s var(--ease);
}
.btn-ember:hover{text-decoration:none;transform:scale(1.05)}

/* ── Listing ───────────────────────────────────────────────────── */
.hero{padding:11rem 0 4rem;text-align:center}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:0 0 1.5rem}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{color:var(--ink-2);font-size:1.25rem;max-width:44ch;margin:0 auto;font-weight:500}
.lead-card{
  display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center;
  background:var(--card);border:1px solid rgb(var(--color-lagoon) / .25);
  border-radius:var(--r-xl);padding:2rem;margin:4rem 0 3rem;
  transition:border-color .3s var(--ease);
}
.lead-card:hover{border-color:rgb(var(--color-lagoon) / .5);text-decoration:none}
.lead-card .thumb{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:rgb(var(--color-slate))}
.lead-card .thumb img{width:100%;height:100%;object-fit:cover}
.lead-card h2{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:.75rem 0;color:var(--ink)}
.lead-card p{color:var(--ink-2);margin:0 0 1rem;font-size:.95rem}
.post-list{list-style:none;margin:0;padding:0}
.post-row{border-top:1px solid var(--line-soft)}
.post-row:first-child{border-top:1px solid var(--line)}
.post-link{display:grid;grid-template-columns:220px 1fr;gap:2rem;padding:2rem .5rem;align-items:start;border-radius:var(--r-lg);transition:background .2s var(--ease)}
.post-link:hover{background:rgb(var(--color-lagoon) / .06);text-decoration:none}
.post-link:hover .post-title{color:var(--accent)}
.post-thumb{aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft);background:rgb(var(--color-slate))}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-title{font-size:1.35rem;font-weight:900;letter-spacing:-.015em;line-height:1.25;margin:.5rem 0 .5rem;color:var(--ink);transition:color .2s var(--ease)}
.post-dek{margin:0 0 .75rem;color:var(--ink-2);font-size:.9rem;max-width:66ch}
.cta-band{margin:6rem 0 0;padding:5rem 0;text-align:center;border-top:1px solid var(--line-soft);background:rgb(var(--color-deep) / .2)}
.cta-band h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:900;letter-spacing:-.02em;margin:0 0 1.5rem}
.cta-band h2 em{font-style:italic;color:var(--accent)}

/* ── Article ───────────────────────────────────────────────────── */
.article{padding:9rem 0 0}
.backlink{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3)}
.backlink:hover{color:var(--accent)}
.title-block{max-width:var(--measure);margin:0 auto}
.title-block h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:1.5rem 0 1rem;text-wrap:balance}
.title-block .summary{color:var(--ink-2);font-size:1.2rem;margin:0 0 1.5rem;font-weight:500}
figure.hero-figure{margin:3rem auto;max-width:var(--wrap)}
figure.hero-figure img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:var(--r-xl);border:1px solid var(--line-soft)}
figure figcaption{color:var(--ink-3);font-size:.8rem;margin-top:.75rem;text-align:center}
.takeaways{
  max-width:var(--measure);margin:0 auto 3rem;padding:1.5rem 1.75rem;
  background:rgb(var(--color-slate) / .5);border:1px solid var(--line-soft);
  border-left:3px solid var(--accent);border-radius:var(--r-md);
}
.takeaways .label{margin-bottom:.75rem}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{margin:.4rem 0;color:var(--ink-2);font-size:.95rem}
.prose{max-width:var(--measure);margin:0 auto}
.prose h2{font-size:1.7rem;font-weight:900;letter-spacing:-.02em;line-height:1.25;margin:3rem 0 1rem;text-wrap:balance}
.prose h3{font-size:1.25rem;font-weight:800;margin:2rem 0 .75rem}
.prose p{margin:0 0 1.4rem}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.4rem}
.prose li{margin:.5rem 0}
.prose strong{color:var(--ink);font-weight:800}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:3rem 0}
.prose blockquote{
  margin:2.5rem 0;padding:.25rem 0 .25rem 1.75rem;border-left:3px solid var(--accent);
  font-size:1.35rem;font-style:italic;line-height:1.5;color:var(--ink);
}
.prose blockquote p{margin:0}
.prose code{font-family:var(--f-mono);font-size:.88em;background:rgb(var(--color-slate) / .7);padding:.15em .4em;border-radius:.25rem}
.prose pre{
  background:rgb(var(--color-slate) / .7);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:1.25rem;overflow-x:auto;margin:0 0 1.4rem;
}
.prose pre code{background:none;padding:0;font-size:.85rem;line-height:1.6}
.prose figure{margin:2.5rem 0}
.prose figure img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:var(--r-lg);border:1px solid var(--line-soft)}
/* Tables and nested lists exist for the legal pages, which are ported verbatim and do
   contain both. Articles should still avoid tables — see the supported-element list in
   the design spec. Tables scroll inside their own container rather than widening the page. */
.prose .table-scroll{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line-soft);border-radius:var(--r-md)}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:32rem}
.prose thead th{text-align:left;font-weight:900;color:var(--ink);background:rgb(var(--color-slate) / .5);padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.prose td{padding:.7rem .9rem;vertical-align:top;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.prose tbody tr:last-child td{border-bottom:0}
.prose ul ul,.prose ol ol,.prose ul ol,.prose ol ul{margin:.5rem 0 0}

.callout{
  margin:2.5rem 0;padding:1.5rem 1.75rem;border-radius:var(--r-lg);
  background:rgb(var(--color-italian) / .18);border:1px solid rgb(var(--color-iris) / .35);
}
.callout b{display:block;margin-bottom:.4rem;color:var(--ink);font-weight:900}
.callout p{margin:0;color:var(--ink-2)}
.inline-cta{
  margin:3.5rem 0;padding:2.5rem;text-align:center;border-radius:var(--r-xl);
  background:var(--card);border:1px solid rgb(var(--color-lagoon) / .25);
}
.inline-cta h3{margin:0 0 .5rem;font-size:1.4rem;font-weight:900;letter-spacing:-.02em}
.inline-cta p{margin:0 0 1.5rem;color:var(--ink-2);font-size:.95rem}
.next{max-width:var(--wrap);margin:6rem auto 0;padding:3rem 2rem 0;border-top:1px solid var(--line-soft)}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}
.next-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.5rem;transition:border-color .2s var(--ease)}
.next-card:hover{border-color:rgb(var(--color-lagoon) / .45);text-decoration:none}
.next-card h4{margin:.5rem 0 .5rem;font-size:1.05rem;font-weight:900;line-height:1.3;color:var(--ink)}
.next-card p{margin:0;color:var(--ink-2);font-size:.85rem}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer{margin-top:6rem;padding:5rem 0 3rem;border-top:1px solid rgb(var(--color-lagoon) / .15);background:rgb(var(--color-deep) / .2)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4rem}
/* Same wordmark, same `.mark` wrapper, same reason as .wordmark above. The accent
   on ASSIST was scoped to `.wordmark .b`, so the footer mark rendered flat. */
.site-footer h2{font-size:1.5rem;font-weight:900;margin:0 0 1.5rem;display:flex;align-items:center;gap:0;letter-spacing:-.05em}
.site-footer h2 img{height:2rem;width:2rem;object-fit:contain;margin-right:.75rem}
.site-footer h2 .b{color:var(--accent)}
.site-footer .blurb{color:var(--ink-3);font-size:.9rem;max-width:34ch;margin:0}
.site-footer h4{margin:0 0 1.75rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.site-footer li a{color:var(--ink-3);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.site-footer li a:hover{color:var(--accent);text-decoration:none}
.copyright{margin-top:3rem;padding-top:2rem;border-top:1px solid rgb(var(--color-lagoon) / .1);text-align:center;color:rgb(var(--color-aqua) / .2);font-size:.75rem}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:820px){
  .wrap{padding:0 1.25rem}
  .lead-card,.post-link,.next-grid,.footer-grid{grid-template-columns:1fr}
  .lead-card{gap:1.5rem}
  .post-link{gap:1rem}
  .post-thumb{max-width:340px}
  .hero{padding:8rem 0 2rem}
  .article{padding:7rem 0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}