* { box-sizing: border-box; }
:root{
  --ink:#111827; --muted:#64748b; --bg:#f2f3f5; --card:#ffffff;
  --link:#0077b6; --shadow:0 4px 12px rgba(0,0,0,.08);
  --nav:#1e1e2f; --nav-h:70px;
  
}
html { font-size:16px; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font: 400 18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  scroll-padding-top: var(--nav-h);
}

/* ---- site header & footer  */
.site-header{ background:var(--nav); position:sticky; top:0; z-index:1000; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.site-header .navbar{ height:var(--nav-h); display:flex; align-items:center; justify-content:center; }
.site-header .nav-list{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.site-header .nav-list a{ color:#f4f4f4; text-decoration:none; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.site-header .nav-list a:hover{ color:#4ecdc4; }

.site-footer{ background:var(--nav); color:#ccc; text-align:center; padding:16px; margin-top:60px; }
.site-footer a{ color:#4ecdc4; }
.site-footer a:hover{ text-decoration:underline; }

/* ---- article layout ---- */
.article{ width:min(920px,92%); margin:32px auto 64px; }
.article-top{
  background:var(--card); border:1px solid #e5e7eb; border-radius:12px;
  padding:16px 18px; box-shadow:var(--shadow);
}
.crumbs{ margin:0 0 6px; color:var(--muted); font-weight:600; }
.crumbs a{ color:var(--link); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

.article-top h1{
  margin:0 0 6px; font-weight:800; line-height:1.2;
  font-size: clamp(26px,4.2vw,40px); color:var(--ink);
  overflow-wrap:anywhere; word-break:break-word;
}
.byline{ display:flex; gap:.75rem; flex-wrap:wrap; color:var(--muted); font-weight:600; }
.tags{ display:inline-flex; gap:6px; }
.tag{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; background:#eef2f7; color:#334155; font-size:.75rem; line-height:1; }
.dek{ margin-top:6px; color:#475569; }

/* ---- prose ---- */
.prose{ margin-top:16px; }
.prose h2{ font-size:1.5rem; margin:24px 0 10px; line-height:1.25; color:var(--ink); }
.prose h3{ font-size:1.25rem; margin:18px 0 8px; color:#111827; }
.prose p{ margin:10px 0; }
.prose a{ color:var(--link); text-decoration:underline; }

.prose code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:#f3f4f6; padding:0 6px; border-radius:6px;
}
.prose pre{
  background:#0f172a; color:#e5e7eb; border-radius:10px; padding:14px 16px;
  overflow:auto; line-height:1.55; box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.prose pre code{ background:transparent; padding:0; }

/* --- Simple syntax tinting for JSX / JS / C# / SQL blocks because npm is bad and not allowed thanks GoDaddy--- */
.prose pre code span.keyword   { color: #93c5fd; font-weight: 600; } /* let, const, return */
.prose pre code span.func      { color: #86efac; }                   /* function names */
.prose pre code span.string    { color: #facc15; }                   /* "strings" */
.prose pre code span.comment   { color: #9ca3af; font-style: italic; } /* // comments */
.prose pre code span.tag       { color: #f472b6; }                   /* <div> tags */
.prose pre code span.attr      { color: #fdba74; }                   /* props or attrs */
.prose pre code span.num       { color: #c084fc; }                   /* numbers */

.prose blockquote{
  margin:14px 0; padding:10px 16px;
  border-left:4px solid var(--link); background:#f8fafc; border-radius:8px; color:#334155;
}




/* callouts (Tip/Note/Warning) */
.callout{ border-radius:12px; padding:12px 14px; margin:14px 0; border:1px solid; background:#f8fafc; }
.callout.tip{  border-color:#a7f3d0; background:#ecfdf5; color:#065f46; }
.callout.note{ border-color:#c7d2fe; background:#eef2ff; color:#1e3a8a; }
.callout.warn{ border-color:#fed7aa; background:#fff7ed; color:#92400e; }

/* ---- article footer buttons ---- */
.article-foot{ margin-top:18px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:10px 14px; border-radius:8px; font-weight:700; text-decoration:none; }
.btn-outline{ border:2px solid var(--link); color:var(--link); background:transparent; }
.btn-outline:hover{ background:var(--link); color:#fff; }

/* --- Media defaults inside articles --- */
.prose img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow: var(--shadow);
}

/* Figure + caption */
.figure{ margin:16px 0; }
.figure > img{ width:100%; }
.caption{ margin-top:6px; color:#6b7280; font-size:.9rem; text-align:center; }

/* Small centered figure (for posters, screenshots, etc.) */
.figure.small{ max-width:560px; margin-inline:auto; }

/* Optional floats (auto un-float on narrow screens) */
.float-left{ float:left; margin:0 16px 12px 0; max-width:46%; }
.float-right{ float:right; margin:0 0 12px 16px; max-width:46%; }
@media (max-width: 860px){
  .float-left, .float-right{ float:none; max-width:100%; margin:12px 0; }
}

/* Simple responsive gallery (2–3 across depending on width) */
.gallery{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gallery .figure{ margin:0; }   /* tighter in galleries */
.gallery img{ aspect-ratio: 4 / 3; object-fit: cover; }

/* Optional: YouTube/Vimeo responsive embed */
.embed{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }