*{box-sizing:border-box}
body{margin:0;background:#f4f6fb;color:#172033;font:16px/1.7 system-ui,sans-serif}
a{color:#3157d5;text-decoration:none}
.wrap{width:min(1160px,calc(100% - 32px));margin:auto}
.site-header{background:#11182a;color:#fff}
.header-row{display:flex;align-items:center;gap:24px;padding:18px 0}
.brand{font-size:25px;font-weight:900;color:#fff}
.site-header nav{display:flex;gap:15px;overflow:auto}
.site-header nav a{color:#dfe6ff;white-space:nowrap}

.hero,.category-hero{margin:32px 0;padding:42px;border-radius:24px;background:linear-gradient(135deg,#171f35,#604cff);color:#fff;overflow:hidden}
.hero h1,.category-hero h1{font-size:clamp(34px,6vw,62px);line-height:1.08}
.category-cover{display:block;width:100%;max-width:100%;height:clamp(210px,26vw,320px);object-fit:cover;border-radius:18px}

/* Duas colunas no desktop para mostrar mais conteúdo sem rolagem excessiva. */
.grid,.listing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:28px 0 48px}
.card{min-width:0;background:#fff;border:1px solid #e1e5ef;border-radius:18px;overflow:hidden}
.card img{display:block;width:100%;max-width:100%;height:220px;object-fit:cover}
.card div{padding:20px}
.card h2{font-size:22px;line-height:1.25}

.article{max-width:920px;background:#fff;margin:32px auto;padding:clamp(24px,5vw,64px);border-radius:24px;overflow:hidden}
.article h1{font-size:clamp(34px,5vw,58px);line-height:1.08}
.article h2{margin-top:2em}
.article figure{margin:30px auto;max-width:760px}
.article img{display:block;width:100%;max-width:760px;height:clamp(220px,35vw,420px);margin:auto;object-fit:cover;border-radius:18px}
.lead{font-size:20px;color:#475467}
.meta,figcaption{color:#667085}

.pagination{display:flex;justify-content:center;gap:8px;margin:40px;flex-wrap:wrap}
.pagination a,.pagination span{padding:9px 14px;background:#fff;border:1px solid #ddd;border-radius:8px}
.pagination span{background:#202b4b;color:#fff}
.prose{background:#fff;margin:32px auto;padding:48px;border-radius:24px;max-width:900px;overflow:hidden}
.prose img{max-width:100%;height:auto}
footer{margin-top:60px;padding:42px 0;background:#11182a;color:#dfe6ff}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:#fff}

@media(max-width:760px){
  .header-row{display:block}
  .grid,.listing{grid-template-columns:1fr}
  .hero,.category-hero{padding:24px}
  .category-cover{height:210px}
  .card img{height:180px}
  .article{padding:24px}
  .article img{height:240px}
  .prose{padding:24px}
}