/* ===== Design tokens ===== */
:root{
  --bg: #f7f7f8;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent-ink: #1e3a8a;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.08);
  --wrap: 1120px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f18; --card:#0f172a; --text:#e6edf3; --muted:#9aa8be; --border:#1f2937;
    --accent:#60a5fa; --accent-ink:#93c5fd;
  }
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font: 16px/1.65 ui-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);

  /* Sticky footer layout */
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
main{
  flex:1 0 auto;
  display:block;
}
.site-footer{
  margin-top:auto;
}
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ===== Header ===== */
.site-header{
  background:#101214;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:10;
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 10px 18px rgba(0,0,0,.15);
}
.nav-wrap{
  display:flex; justify-content:space-between; align-items:center;
  min-height:92px;
  padding:0 .5rem;
}
.brand-block{ display:flex; align-items:center; gap:14px; color:#fff; }
.brand-link{ display:block; line-height:0; }
.logo{ height:80px; width:auto; display:block; }
.brand-text small{ display:block; font-size:.78rem; opacity:.85; margin-bottom:3px; }
.brand-text strong{ display:block; font-size:1.4rem; font-weight:800; letter-spacing:.25px; }

/* ===== Nav ===== */
.nav{ display:flex; gap:1.25rem; }
.nav a,
.nav a:visited{
  color:#fff; text-decoration:none; padding:.42rem .7rem; border-radius:8px;
  font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  position:relative; transition:color .2s ease;
}
.nav a:hover{ color:#ffb74d; }
.nav a.is-active{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
/* Underline effect */
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background:var(--accent); transition:width .25s ease;
}
.nav a:hover::after,
.nav a.is-active::after{ width:100%; }

/* ===== Page/grid ===== */
.page { margin:2.2rem auto 4rem; }
.page-grid { display:grid; grid-template-columns: 1fr 320px; gap:2rem; }
@media (max-width: 960px){ .page-grid{ grid-template-columns: 1fr; } }

/* ===== Content cards ===== */
.content > *:first-child{ margin-top:0; }
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

/* Headings / text */
h1,h2,h3{ line-height:1.25; margin: 1.15rem 0 .7rem; }
h1{ font-size: clamp(1.7rem, 2.4vw, 2.25rem); }
h2{ font-size: clamp(1.3rem, 2vw, 1.7rem); }
p{ margin:.75rem 0; color:var(--text); }
small{ color:var(--muted); }

/* Links */
a{ color: var(--accent); }
a:hover{ color: var(--accent-ink); }

/* ===== Blog index ===== */
.post-list{ list-style:none; margin:0; padding:0; }
.post-list li{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:1.25rem 1.5rem;
  margin-bottom:1rem;
}
.post-list h2{ margin:.1rem 0 .35rem; font-weight:800; }
.post-meta{ color:var(--muted); font-size:.9rem; margin-bottom:.25rem; }

/* ===== Single post ===== */
.post .post-body img{
  max-width:100%; height:auto; border-radius:10px; border:1px solid var(--border);
}

/* Code blocks */
pre, code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
pre{
  background:#0b1220; color:#e6edf3; padding:1rem; border-radius:12px;
  overflow:auto; border:1px solid #0d203a;
}
code{ background:rgba(148,163,184,.18); padding:.15rem .35rem; border-radius:6px; }
pre code{ background:transparent; padding:0; border-radius:0; }

/* Tables */
table{ width:100%; border-collapse:collapse; margin:1rem 0; }
th,td{ border:1px solid var(--border); padding:.5rem .6rem; }
th{ background: rgba(148,163,184,.12); text-align:left; }

/* Sidebar */
.sidebar{ display:flex; flex-direction:column; gap:1rem; }
.widget{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:1.25rem;
}
.widget h3{ margin:0 0 .75rem; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.profile{ display:flex; gap:.75rem; align-items:center; }
.profile img{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }

/* ===== Footer (dark) ===== */
.site-footer.dark{
  background:#0f1115;
  color:#cfd8e3;
  border-top:1px solid rgba(255,255,255,.06);
  padding:2rem 0 2.25rem;
}
.footer-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand{ display:flex; align-items:center; gap:.75rem; }
.footer-logo{ height:42px; width:auto; display:block; }
.footer-nav{ display:flex; gap:1rem; }
.footer-nav a{ color:#cfd8e3; text-decoration:none; font-weight:600; }
.footer-nav a:hover{ color:#60a5fa; }
.footer-bottom{
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding-top:1rem; color:#9aa8be;
}
.footer-bottom .muted{ color:#9aa8be; }

/* ===== Responsive ===== */
@media (max-width: 720px){
  .logo{ height:64px; }
  .nav{ gap:.9rem; }
  .footer-top{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.25rem; }
}
@media (max-width: 520px){
  .brand-text{ display:none; }
  .logo{ height:56px; }
}