:root{
  --wrap: 720px;
  --pad: 16px;
  --text: #111;
  --muted: #555;
  --line: #e7e7e7;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:#fff;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.site-header{
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#fff;
  z-index:10;
}

.header-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
}

.logo{ font-weight:700; }

.menu-toggle{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-size:14px;
}

.site-nav{ display:none; }
.site-nav.open{ display:block; }
.menu{ list-style:none; padding:0; margin:10px 0 12px; }
.menu li{ margin:6px 0; }

.main{ padding: 16px 0 40px; }

.page-title{
  font-size: 1.6rem;
  line-height:1.2;
  margin: 12px 0 16px;
}

.list{ display:flex; flex-direction:column; gap:16px; }
.card{ padding: 12px 0; border-bottom:1px solid var(--line); }
.card-title{ font-size:1.15rem; margin:0 0 6px; line-height:1.3; }
.card-meta{ font-size:0.9rem; color:var(--muted); }
.card-excerpt{ margin:8px 0 0; color:var(--muted); }

.article-title{ font-size:1.9rem; line-height:1.15; margin: 0 0 10px; }
.subtitle{ margin: 0 0 10px; color: var(--muted); font-size: 1.05rem; }
.article-meta{ color:var(--muted); font-size:0.92rem; }
.dot{ margin:0 6px; }

.featured{ margin:16px 0; }
.featured img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}

.article-content img{
  max-width:100%;
  height:auto;
}

.site-footer{
  border-top:1px solid var(--line);
  padding: 20px 0;
  color: var(--muted);
}

.small{ font-size: 0.9rem; }

@media (min-width: 900px){
  :root{ --wrap: 760px; }
  .site-nav{ display:block; }
  .menu-toggle{ display:none; }
  .menu{ display:flex; gap:14px; margin:0; }
  .menu li{ margin:0; }
}