*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
:root{
  --bg: #ffffff;
  --bg-soft:#f6f8fb;
  --card:#ffffff;
  --text: #111827;
  --muted:#6b7280;
  --accent: #003366;
  --accent-2: #1f5a99;
  --ring: #2563eb;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}
body{
  font-family: "Helvetica Neue", Helvetica, Arial, -apple-system, system-ui, Segoe UI, Roboto, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
.container{ width: min(1100px, 92vw); margin: 0 auto; padding: 20px 0; }
header{ position: sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(255,255,255,.85); border-bottom:1px solid #e5e7eb; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo-link{ display:inline-block; line-height:0; }
.site-logo{ height: 58px;px; width:auto; display:block; }
.menu{ display:flex; gap:10px; flex-wrap:wrap; }
.menu a{ text-decoration:none; color:var(--text); padding:8px 12px; border-radius:10px; border:1px solid transparent; }
.menu a[aria-current="page"]{ background: var(--accent); color:#fff; }
.menu a:hover{ border-color:#e5e7eb; background:#f3f6fb; }
.section{ padding:40px 0; }
.card{ background: var(--card); border:1px solid #e5e7eb; border-radius:20px; padding:18px; box-shadow: var(--shadow); }
.grid{ display:grid; gap:16px; }
.grid.cards{ grid-template-columns: repeat(12,1fr); }
.card.span-4{ grid-column: span 4; } .card.span-6{ grid-column: span 6; } .card.span-12{ grid-column: span 12; }
@media (max-width: 900px){ .grid.cards{ grid-template-columns:1fr; } .card.span-4,.card.span-6,.card.span-12{ grid-column:1 / -1; } }
.lede{ font-size: clamp(16px,2.2vw,20px); color:#374151; margin:10px 0 20px; }
.post-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.post-card{ grid-column: span 6; }
@media (max-width: 900px){ .post-card{ grid-column: 1 / -1; } }
.post-meta{ font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.tags{ display:flex; flex-wrap:wrap; gap: 6px; margin-top: 10px; }
.tag{ font-size: 12px; padding: 4px 8px; border-radius: 999px; border:1px solid #e5e7eb; background:#f8fafc; color:#374151; }
.read-more{ display:inline-block; margin-top: 10px; text-decoration:none; font-weight:600; color: var(--accent); }
.read-more:hover{ text-decoration: underline; }
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; border:1px solid #e5e7eb; padding:10px; border-radius:12px; background:#f8fafc; }
.filter-bar label{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; cursor:pointer; background:#fff; font-size:14px; }
.filter-bar input{ position:absolute; left:-9999px; }
.filter-bar input:checked + span{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color: transparent; padding:6px 10px; border-radius:999px; }
.posts .post-card{ display:block; }
#cat-all:checked ~ .posts .post-card{ display:block; }
#cat-updates:checked ~ .posts .post-card{ display:none; }
#cat-updates:checked ~ .posts .post-card[data-cat~="Updates"]{ display:block; }
#cat-design:checked ~ .posts .post-card{ display:none; }
#cat-design:checked ~ .posts .post-card[data-cat~="Design"]{ display:block; }
#cat-ux:checked ~ .posts .post-card{ display:none; }
#cat-ux:checked ~ .posts .post-card[data-cat~="UX"]{ display:block; }
#cat-howto:checked ~ .posts .post-card{ display:none; }
#cat-howto:checked ~ .posts .post-card[data-cat~="How-to"]{ display:block; }
footer{ border-top:1px solid #e5e7eb; color:#6b7280; padding:24px 0 60px; background:#fff; }
.visually-hidden{ position:absolute !important; clip:rect(1px,1px,1px,1px,); padding:0!important; border:0!important; height:1px!important; width:1px!important; overflow:hidden; }