/* Shared styles for the blog index and every post. The pages themselves are
   generated by scripts/build-blog.mjs. */
:root { --ink:#0F1A23; --muted:#5B6B76; --green:#059669; --green-deep:#047857; --line:#EEF1F3; --border:#E6EBEE; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ink); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
:where(a):focus-visible, :where(button):focus-visible, :where(summary):focus-visible { outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }

/* Header, page frame, footer */
.cx-head { border-bottom:1px solid var(--line); }
.cx-headin { max-width:760px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cx-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.cx-logo { height:24px; width:auto; color:var(--green); }
.cx-brand span { font-weight:700; font-size:16px; }
.cx-headlink { color:var(--green-deep); text-decoration:none; font-weight:600; font-size:.9rem; }
.cx-headlink:hover { text-decoration:underline; }
.cx-doc { max-width:760px; margin:0 auto; padding:48px 24px 80px; }
.cx-back { margin-top:44px; padding-top:22px; border-top:1px solid var(--line); }
.cx-back a { color:var(--green-deep); text-decoration:none; font-weight:600; font-size:.95rem; }
.cx-back a:hover { text-decoration:underline; }
.cx-foot { border-top:1px solid var(--line); margin-top:8px; }
.cx-footin { max-width:760px; margin:0 auto; padding:22px 24px 40px; }
.cx-legal { font-size:.76rem; color:var(--muted); line-height:1.55; margin:0 0 8px; }
.cx-legal:last-child { margin:0; }
.cx-legal a { color:var(--muted); }
@media (max-width:640px){ .cx-doc { padding:32px 20px 64px; } }

/* Shared meta */
.cx-tag { color:var(--green-deep); background:#ECFDF5; border-radius:999px; padding:3px 10px; font-weight:600; letter-spacing:.01em; }
.cx-date, .cx-mins { color:var(--muted); }

/* Index */
.cx-title { font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800; letter-spacing:-.03em; margin:0 0 10px; }
.cx-sub { color:var(--muted); margin:0 0 40px; font-size:1.02rem; }
.cx-posts { display:flex; flex-direction:column; gap:14px; }
.cx-post { border:1px solid var(--border); border-radius:14px; transition:border-color .15s ease, transform .15s ease; }
.cx-post:hover { border-color:#CFDAD3; transform:translateY(-1px); }
.cx-post a.cx-postlink { display:block; padding:22px 24px; text-decoration:none; color:inherit; }
.cx-postmeta { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:.8rem; }
.cx-posth { font-size:1.16rem; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; line-height:1.35; }
.cx-postx { color:#26333C; margin:0 0 12px; font-size:.97rem; }
.cx-read { color:var(--green-deep); font-weight:600; font-size:.9rem; }

/* Post */
.cx-artmeta { display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:.8rem; }
.cx-lede { font-size:1.08rem; color:#26333C; margin:0 0 28px; }
.cx-arth1 { font-size:clamp(1.7rem,4vw,2.3rem); font-weight:800; letter-spacing:-.03em; margin:0 0 16px; line-height:1.2; }
.cx-toc { border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin:0 0 34px; background:#FBFDFC; }
.cx-toc > summary { cursor:pointer; font-weight:700; font-size:.9rem; letter-spacing:.01em; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.cx-toc > summary::-webkit-details-marker { display:none; }
.cx-toc > summary::after { content:"+"; color:var(--muted); font-weight:600; }
.cx-toc[open] > summary::after { content:"–"; }
.cx-toc ol { margin:12px 0 2px; padding-left:20px; }
.cx-toc li { margin:0 0 6px; }
.cx-toc a { color:var(--green-deep); text-decoration:none; font-size:.93rem; }
.cx-toc a:hover { text-decoration:underline; }
.cx-body h2 { font-size:1.18rem; font-weight:700; letter-spacing:-.01em; margin:38px 0 10px; scroll-margin-top:16px; }
.cx-body h3 { font-size:1.02rem; font-weight:700; margin:28px 0 8px; scroll-margin-top:16px; }
.cx-body p { margin:0 0 14px; color:#26333C; }
.cx-body ul, .cx-body ol { margin:0 0 14px; padding-left:22px; color:#26333C; }
.cx-body li { margin:0 0 6px; }
.cx-body strong { color:var(--ink); font-weight:600; }
.cx-body a { color:var(--green-deep); }
.cx-body pre { background:#F6F8F9; border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:0 0 16px; overflow-x:auto; white-space:pre-wrap; word-break:break-word; font-size:.82rem; line-height:1.5; }
.cx-body code { font-family:ui-monospace,Consolas,monospace; font-size:.9em; }
.cx-body pre code { font-size:inherit; }
.cx-note { border:1px solid var(--border); border-radius:12px; background:#FBFDFC; padding:16px 18px; margin:22px 0; }
.cx-note-t { font-weight:700; font-size:.82rem; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.cx-note p { margin:0; font-size:.95rem; }
.cx-fig { margin:26px 0; }
.cx-fig img { width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:12px; }
.cx-fig figcaption { margin:10px 0 0; font-size:.85rem; color:var(--muted); text-align:center; }
.cx-cta { border:1px solid var(--border); border-radius:14px; padding:24px; margin:36px 0 8px; text-align:center; background:#FBFDFC; }
.cx-cta h3 { margin:0 0 8px; font-size:1.08rem; font-weight:700; letter-spacing:-.01em; }
.cx-cta p { margin:0 0 16px; color:var(--muted); font-size:.95rem; }
.cx-btn { display:inline-block; background:var(--green); color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; padding:11px 22px; border-radius:10px; transition:background .15s ease; }
.cx-btn:hover { background:var(--green-deep); }

@media (prefers-reduced-motion:reduce){
  .cx-btn { transition:none; }
  .cx-post { transition:none; }
  .cx-post:hover { transform:none; }
}