:root {
  --header-height:90px;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:system-ui;
  background:#f8fafc;
  padding-top:var(--header-height);
  color:#0f172a;
}

/* HEADER */
#header {
  position:fixed;
  top:0;
  width:100%;
  height:var(--header-height);
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid #e5e7eb;
  z-index:999;
}

.header-left {
  display:flex;
  align-items:center;
  gap:10px;
}

#HIcon { width:48px; }
#HH1 { font-size:1.4rem; }

#hamburger {
  width:42px;
  height:42px;
  border-radius:10px;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  font-size:1.5rem;
}

/* SIDE NAV */
#nav {
  position:fixed;
  top:0;
  right:-320px;
  width:320px;
  height:100vh;
  background:white;
  padding:80px 20px;
  transition:.3s;
  box-shadow:-20px 0 40px rgba(0,0,0,.2);
  z-index:1000;
}

#nav.active { right:0; }

#navClose {
  position:absolute;
  top:20px;
  right:20px;
  background:none;
  border:none;
  font-size:1.5rem;
}

#nav ul { list-style:none; }
#nav li { margin-bottom:15px; }

/* TOOLBAR */
.toolbar {
  max-width:1100px;
  margin:30px auto;
  padding:0 20px;
}

/* GRID */
.grid {
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
  padding:20px;
}

/* CARD */
.post {
  background:#dbe8f5;
  border-radius:16px;
  padding:20px;
  animation:fade .6s ease;
}

.post h2 { margin-bottom:8px; }
.post span { font-size:.8rem; color:#475569; }

.markdown h1 { font-size:1.5rem; }
.markdown blockquote {
  border-left:4px solid #2563eb;
  padding-left:10px;
  background:#e0e7ff;
  border-radius:6px;
  margin:10px 0;
}

@keyframes fade {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:none; }
}