:root {
  --bg: #d8d8d8;
  --panel: #f8f8f8;
  --line: #7f7f7f;
  --line-dark: #4d4d4d;
  --ink: #101010;
  --muted: #666;
  --link: #0033cc;
  --visited: #551a8b;
  --rss: #f68b1f;
  --accent: #ffffcc;
  --cream: #fffef2;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background:
    linear-gradient(#ececec, #d3d3d3 120px, #d8d8d8 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 3px);
}
.page-wrap {
  width: min(1180px, calc(100% - 24px));
  margin: 14px auto;
  border: 1px solid var(--line-dark);
  background: #cfcfcf;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
}
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  background: linear-gradient(to bottom, #ffffff 0%, #ececec 100%);
  border-bottom: 1px solid var(--line-dark);
}
.site-header h1 {
  margin: 0 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1;
}
.site-header h1 a { color: #000; text-decoration: none; }
.tiny-label, .post-meta {
  font-size: 11px;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: .04em;
}
.tagline { margin: 0; font-size: 16px; }
.rss-badge {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 78px;
  min-height: 78px;
  border: 1px solid #9a5604;
  background: linear-gradient(to bottom, #ffbb69 0%, var(--rss) 100%);
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}
.rss-badge span { font-size: 12px; }
.rss-badge strong { font-size: 24px; }
.top-nav {
  display: flex;
  flex-wrap: wrap;
  background: #bcbcbc;
  border-top: 1px solid #fff;
  border-bottom: 1px solid var(--line-dark);
}
.top-nav a {
  padding: 8px 14px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  text-transform: lowercase;
  font-size: 13px;
}
.top-nav a:hover { background: #eaeaea; }
.layout {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) 240px;
  gap: 12px;
  padding: 12px;
}
.single-main { grid-template-columns: minmax(0,1fr); }
.sidebar-box, .post {
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 12px;
}
.sidebar-box { padding: 12px; }
.post { padding: 14px 16px; }
.hero-post { background: linear-gradient(to bottom, var(--cream) 0%, #f8f8f8 100%); }
.sidebar-box h2, .post h2, .post h3 { margin-top: 0; }
.sidebar-box h2 {
  font-size: 13px;
  text-transform: lowercase;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 6px;
}
.lead { font-size: 18px; line-height: 1.6; }
.accent-box { background: var(--accent); }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.button {
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid var(--line-dark);
  background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  color: #000;
  text-decoration: none;
  font-size: 13px;
}
.button:hover { background: linear-gradient(to bottom, #fff7c5 0%, #eadb8f 100%); }
a { color: var(--link); }
a:visited { color: var(--visited); }
ul { padding-left: 18px; }
.badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mini-badge {
  display: inline-block;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  background: linear-gradient(to bottom, #5a5a5a 0%, #222 100%);
  border: 1px solid #000;
}
.mini-badge.orange { background: linear-gradient(to bottom, #ffb45d 0%, #e06d00 100%); }
.mini-badge.black { background: linear-gradient(to bottom, #222 0%, #000 100%); }
.project-card { background: #fcfcfc; }
.wide-content { max-width: 880px; }
.site-footer {
  border-top: 1px solid var(--line-dark);
  background: #efefef;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .left-column { order: 2; }
  .content { order: 1; }
  .right-column { order: 3; }
}
@media (max-width: 540px) {
  .site-header { flex-direction: column; }
  .rss-badge {
    width: 100%;
    min-height: 58px;
    flex-direction: row;
    gap: 8px;
  }
  .lead { font-size: 16px; }
  .badge-grid { grid-template-columns: 1fr; }
}