/* Base typography */
:root{
  --bg:#f7f7f9;
  --text:#222;
  --muted:#666;
  --link:#ff6f00;
  --link-hover:#e65100;
  --card:#fff;
  --border:#e6e6e6;
  --maxw: 960px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Container */
main{
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 1.25rem;
}

h1,h2,h3{
  line-height: 1.25;
  margin: 0.2rem 0 0.6rem;
}

h1{ font-size: clamp(1.6rem, 2.5vw + 1rem, 2.25rem); }
h2{ font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem); }
h3{ font-size: 1.1rem; }

/* Links */
a{
  color: var(--link);
  text-decoration: none;
}
a:hover, a:focus{
  text-decoration: underline;
  color: var(--link-hover);
}
:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Blog list */
#blog-list article{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

#blog-list article h2{
  margin-bottom: 0.25rem;
}

#blog-list .meta{
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.read-more{
  display: inline-block;
  margin-top: 0.25rem;
  font-weight: 600;
}

/* Controls (if using search/new post) */
.blog-controls{
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}
.blog-controls input[type="search"]{
  flex: 1;
  min-width: 220px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.blog-controls button{
  padding: 0.6rem 0.9rem;
  border: none;
  border-radius: 8px;
  background: var(--link);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.blog-controls button:hover{ background: var(--link-hover); }

/* Post detail */
#post{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
#post #meta,
#post .meta{
  color: var(--muted);
  margin-bottom: 0.75rem;
}
#content p{ margin: 0 0 1rem; }
#content img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
#content ul, #content ol{ padding-left: 1.25rem; }
#content blockquote{
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--link);
  background: #fff8f0;
  border-radius: 6px;
}

/* Utility */
.hidden{ display: none !important; }

/* Responsive tweaks */
@media (max-width: 768px){
  main{ padding: 1rem; }
  #blog-list article, #post{ padding: 1rem; }
}