:root{ --red:#D11A2A; --black:#000; --yellow:#F2D10A; --bg:#fff; --text:#111; --muted:#6b7280 }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif; line-height:1.6; color:var(--text); background:var(--bg); margin:0}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px; margin:0 auto; padding:0 16px}
header{background:var(--black); color:#fff}
header .container{display:flex; align-items:center; justify-content:space-between; padding:12px 16px}
.logo{color:#fff; font-weight:800; letter-spacing:0.3px}
.logo span{color:var(--yellow)}
.site-nav a{color:#fff; margin-left:16px}
.menu-toggle{display:none; background:none; border:1px solid #333; color:#fff; padding:6px 10px; border-radius:8px}
@media (max-width:800px){
  .site-nav{display:none}
  .menu-toggle{display:block}
  .nav-open .site-nav{display:block; position:absolute; top:56px; left:0; right:0; background:#111; padding:12px 16px}
  .site-nav a{display:block; padding:8px 0}
}
main .container{padding-top:12px}
h1{font-size:clamp(24px,3vw,34px)}
.lead{font-size:1.1rem; color:var(--muted)}
.cards{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.cards li{border:1px solid #eee; padding:12px; border-radius:12px}
.breadcrumb{font-size:14px; color:#6b7280; margin:14px 0}
.breadcrumb ol{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.breadcrumb a{color:#6b7280}
footer{background:#111; color:#bbb; margin-top:40px; padding:20px 0}
footer a{color:#fff}
.search input{padding:8px 10px; border-radius:8px; border:1px solid #333; background:#0b0b0b; color:#fff; margin-left:10px}
.btn{display:inline-block; background:var(--red); color:#fff; padding:10px 14px; border-radius:10px; margin:8px 8px 0 0; border:2px solid var(--red)}
.btn.ghost{background:transparent; color:var(--red)}
.hero{padding:24px 0 8px}
.hero h1{font-size:clamp(28px,4vw,40px); line-height:1.2; margin:0 0 8px}
.meta{color:var(--muted); font-size:0.9rem}
.ph{background:#d1d5db; border:1px dashed #b6b6b6; border-radius:10px; width:100%; height:0; padding-bottom:56.25%}
.related ul{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.related li{border:1px solid #eee; padding:12px; border-radius:10px}