/* ==============================================
   OICKOS · BLOG
   BRAND: #111111 · #F0EDE8 · #888888 · #666666
   FONTE: DM Sans 200 / 300 / 400 / 500
   Estilo alinhado à landing (index.html)
=============================================== */
:root{
  --p:#111111;
  --b:#F0EDE8;
  --c1:#888888;
  --c2:#666666;
  --brd:#222222;
  --brdl:#d8d5d0;
  --ink:#1a1a1a;
  --ink2:#444444;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
  background:var(--b);color:var(--ink);
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* NAV (igual à landing) */
nav{position:fixed;top:0;left:0;right:0;z-index:99;background:var(--p);border-bottom:1px solid var(--brd)}
.nw{max-width:1100px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.nm{display:flex;align-items:center;gap:14px;text-decoration:none}
.nn{font-size:13px;font-weight:300;letter-spacing:8px;color:var(--b)}
.nl{display:flex;gap:36px;list-style:none;align-items:center}
.nl a{font-size:12px;font-weight:300;letter-spacing:1px;color:var(--c1);text-decoration:none;transition:color .2s}
.nl a:hover{color:var(--b)}
.nl a.active{color:var(--b)}
.nright{display:flex;align-items:center;gap:28px}
.ncta{font-size:10px;font-weight:400;letter-spacing:3px;padding:10px 24px;background:var(--b);color:var(--p);border:none;cursor:pointer;text-decoration:none;transition:opacity .2s;white-space:nowrap}
.ncta:hover{opacity:.85}

/* WRAPPER GERAL */
.page{padding-top:64px}
.wrap{max-width:1100px;margin:0 auto;padding:0 40px}

/* CABEÇALHO DO BLOG (listagem) */
.bhead{padding:90px 0 56px;border-bottom:1px solid var(--brdl)}
.lbl{font-size:10px;font-weight:300;letter-spacing:4px;color:var(--c1);display:block;margin-bottom:22px}
.bhead h1{font-size:clamp(36px,5vw,64px);font-weight:200;line-height:1.05;letter-spacing:-1px;color:var(--p);margin-bottom:20px}
.bhead h1 span{color:var(--c1)}
.bhead p{font-size:16px;font-weight:300;color:var(--ink2);max-width:560px;line-height:1.85}

/* GRID DE POSTS */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px;background:var(--brdl);border:1px solid var(--brdl);margin:56px 0 100px}
.post-card{background:var(--b);padding:44px 40px;display:flex;flex-direction:column;gap:16px;text-decoration:none;transition:background .2s}
.post-card:hover{background:#e8e4dd}
.pc-cover{display:block;width:calc(100% + 80px);height:auto;margin:-44px -40px 18px;background:#111}
.pc-meta{display:flex;gap:14px;align-items:center;font-size:10px;font-weight:400;letter-spacing:2px;color:var(--c1);text-transform:uppercase}
.pc-tag{color:var(--p);border:1px solid var(--brdl);padding:3px 10px}
.post-card h2{font-size:23px;font-weight:300;line-height:1.25;letter-spacing:-.3px;color:var(--p)}
.post-card p{font-size:14px;font-weight:300;color:var(--ink2);line-height:1.8}
.pc-read{margin-top:auto;font-size:11px;font-weight:400;letter-spacing:2px;color:var(--p);text-transform:uppercase;border-bottom:1px solid var(--p);align-self:flex-start;padding-bottom:2px}

/* ARTIGO */
.article{padding:90px 0 40px}
.art-wrap{max-width:720px;margin:0 auto;padding:0 40px}
.crumbs{font-size:11px;font-weight:300;letter-spacing:1px;color:var(--c1);margin-bottom:32px}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.crumbs a:hover{border-color:var(--c1)}
.art-meta{display:flex;gap:14px;align-items:center;font-size:10px;font-weight:400;letter-spacing:2px;color:var(--c1);text-transform:uppercase;margin-bottom:22px}
.art-meta .pc-tag{color:var(--p);border:1px solid var(--brdl);padding:3px 10px}
.article h1{font-size:clamp(30px,4.4vw,46px);font-weight:200;line-height:1.12;letter-spacing:-.8px;color:var(--p);margin-bottom:24px}
.art-lead{font-size:18px;font-weight:300;color:var(--ink2);line-height:1.75;margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--brdl)}
.art-cover{display:block;width:100%;height:auto;border:1px solid var(--brdl);border-radius:4px;margin:8px 0 40px;background:#111}

/* PROSA */
.prose h2{font-size:26px;font-weight:300;letter-spacing:-.3px;color:var(--p);margin:48px 0 18px;line-height:1.25}
.prose h3{font-size:19px;font-weight:500;color:var(--p);margin:34px 0 12px}
.prose p{font-size:16px;font-weight:300;color:var(--ink);line-height:1.85;margin-bottom:20px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{font-size:16px;font-weight:300;color:var(--ink);line-height:1.8;margin-bottom:10px}
.prose strong{font-weight:500;color:var(--p)}
.prose a{color:var(--p);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c1)}
.prose blockquote{border-left:2px solid var(--p);padding:6px 0 6px 24px;margin:32px 0;font-size:20px;font-weight:300;font-style:italic;color:var(--ink2);line-height:1.5}
.prose hr{border:none;border-top:1px solid var(--brdl);margin:44px 0}
.callout{background:var(--p);color:var(--b);padding:32px 36px;border-radius:4px;margin:36px 0}
.callout p{color:var(--b);margin:0}
.callout strong{color:var(--b)}

/* CTA dentro do artigo */
.art-cta{margin:64px 0 24px;padding:48px 40px;background:var(--p);border-radius:4px;text-align:center}
.art-cta h2{font-size:26px;font-weight:200;color:var(--b);margin:0 0 12px;letter-spacing:-.3px}
.art-cta p{font-size:14px;font-weight:300;color:var(--c2);margin:0 0 28px}
.art-cta a{display:inline-block;font-size:10px;font-weight:400;letter-spacing:3px;padding:14px 36px;background:var(--b);color:var(--p);text-decoration:none;transition:opacity .2s}
.art-cta a:hover{opacity:.85}

/* FOOTER (igual à landing) */
footer{background:#0a0a0a;border-top:1px solid var(--brd);padding:48px 40px}
.fw{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.fm{display:flex;align-items:center;gap:12px}
.fnn{font-size:11px;font-weight:300;letter-spacing:7px;color:var(--b)}
.fc{font-size:10px;font-weight:300;color:#333;letter-spacing:1px;margin-top:6px}
.fn{display:flex;gap:36px;list-style:none}
.fn a{font-size:11px;font-weight:300;color:#333;letter-spacing:1px;text-decoration:none;transition:color .2s}
.fn a:hover{color:var(--c1)}

/* RESPONSIVO */
@media(max-width:760px){
  .posts{grid-template-columns:1fr}
  .nl{display:none}
}