:root{
  --ink:#22252a; --muted:#6b7280; --accent:#0b5cad; --accent-dark:#084a8a;
  --bg:#ffffff; --soft:#f6f7f9; --line:#e5e7eb; --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:17px;padding-top:67px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:6px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.site-header{border-bottom:1px solid var(--line);background:#fff;
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:transform .3s ease}
.site-header.header-hidden{transform:translateY(-100%)}
.site-header.nav-open{transform:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);
  border-radius:8px;color:var(--ink);cursor:pointer;font-size:1.25rem;
  line-height:1;padding:6px 12px;margin-left:auto}
.nav-toggle:hover{border-color:var(--accent);color:var(--accent)}
.site-header .wrap{display:flex;align-items:center;gap:24px;
  flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;
  font-size:1.35rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{height:42px;width:auto;border-radius:0}
.main-nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.main-nav a{color:var(--ink);font-size:.98rem}
.main-nav a:hover{color:var(--accent);text-decoration:none}
.hero{background:var(--soft);border-bottom:1px solid var(--line);
  padding:52px 0 44px;text-align:center}
.hero h1{font-size:2.4rem;margin:0 0 10px;line-height:1.2}
.hero p{color:var(--muted);font-size:1.15rem;margin:0 auto;max-width:640px}
main{padding:36px 0 56px}
article h1{font-size:2.1rem;line-height:1.25;margin:0 0 10px}
.meta{color:var(--muted);font-size:.92rem;margin:0 0 22px}
.meta a{color:var(--muted);text-decoration:underline}
.featured{margin:0 0 26px}
article .content h2{margin-top:1.6em;line-height:1.3}
article .content h3{margin-top:1.4em}
article .content ul,article .content ol{padding-left:1.4em}
article .content table{border-collapse:collapse;width:100%;overflow-x:auto;
  display:block}
article .content td,article .content th{border:1px solid var(--line);
  padding:8px 10px}
article .content blockquote{border-left:4px solid var(--accent);
  margin:1.2em 0;padding:.2em 1em;background:var(--soft);color:#374151}
article .content iframe{max-width:100%}
article .content figure{margin:1.2em 0}
article .content figcaption{color:var(--muted);font-size:.9rem;
  text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;margin:26px 0}
.card{border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card img{width:100%;height:180px;object-fit:cover;border-radius:0}
.card .card-body{padding:16px 18px 18px;display:flex;flex-direction:column;
  gap:8px}
.card h3{margin:0;font-size:1.12rem;line-height:1.35}
.card h3 a{color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card .cat{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.section-title{font-size:1.6rem;margin:38px 0 4px}
.cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;margin:22px 0}
.cat-card{border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;background:var(--soft)}
.cat-card h3{margin:0 0 6px}
.cat-card p{margin:0;color:var(--muted);font-size:.95rem}
.related{border-top:1px solid var(--line);margin-top:44px;padding-top:8px}
.home-content{margin-bottom:8px}
.site-footer{border-top:1px solid var(--line);background:var(--soft);
  color:var(--muted);font-size:.92rem;padding:28px 0;margin-top:20px}
.site-footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.site-footer nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.site-footer a{color:var(--muted)}
@media (max-width:768px){
  .nav-toggle{display:block}
  .main-nav{display:none;flex-basis:100%;flex-direction:column;
    flex-wrap:nowrap;gap:0;margin-left:0;padding-top:6px}
  .site-header.nav-open .main-nav{display:flex}
  .main-nav a{padding:10px 2px;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .hero h1{font-size:1.9rem}
  article h1{font-size:1.7rem}
  .main-nav{margin-left:0}
}