/* Página de artigo — mesma identidade do site (Manual G&C) */
:root{
  --bg:#EEE8DF; --surface:#FFFFFF; --title:#606062; --text:#3C3C3E; --muted:#6B6B6E;
  --line:#E6E6E6; --line-strong:#606062; --brand-dark:#202020; --brand-deep:#0B0B0B;
  --brand-fg:#FFFFFF; --brand-muted:#B4B4B6; --gold:#D2AE6D;
  --f-title:"Marcellus",Georgia,serif;
  --f-label:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Calibri,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#171717;--surface:#1F1F20;--title:#E9E9EA;--text:#CFCFD1;--muted:#9C9CA0;--line:#2E2E30;--line-strong:#8A8A8E;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171717;--surface:#1F1F20;--title:#E9E9EA;--text:#CFCFD1;--muted:#9C9CA0;--line:#2E2E30;--line-strong:#8A8A8E;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 19px/1.75 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

header.top{background:var(--brand-dark);border-bottom:1px solid #2E2E30}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand img{display:block;width:170px;height:auto}
.back{font:500 11.5px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--brand-muted)}
.back:hover{color:var(--gold)}

.article{max-width:720px;margin:0 auto;padding:72px max(20px,env(safe-area-inset-right,0px)) 88px max(20px,env(safe-area-inset-left,0px))}
.tag{font:500 12px/1.4 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px;margin:0}
.tag::before{content:"";width:36px;height:1px;background:var(--gold);flex:none}
.article h1{font:400 clamp(32px,4.6vw,48px)/1.15 var(--f-title);color:var(--title);text-wrap:balance;margin:18px 0 22px}
.meta{font:500 11.5px/1.6 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid var(--gold)}
.cover{margin:0 0 40px}
.cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.article p{margin:0 0 22px}
.article .lead{font:400 24px/1.5 var(--f-title);color:var(--title)}
.article h2{font:400 27px/1.3 var(--f-title);color:var(--title);margin:44px 0 16px}
.article ul,.article ol{margin:0 0 24px;padding-left:0;list-style:none;display:grid;gap:10px}
.article li{padding-left:26px;position:relative}
.article li::before{content:"";position:absolute;left:0;top:.85em;width:12px;height:1px;background:var(--gold)}
.article ol{counter-reset:n}
.article ol li{counter-increment:n;padding-left:40px}
.article ol li::before{content:counter(n);width:auto;height:auto;background:none;top:0;font:400 22px/1.5 var(--f-title);color:var(--gold)}
.cite{font-size:15.5px;color:var(--muted);border-left:1px solid var(--gold);padding:6px 0 6px 18px;margin:0 0 26px}
.closing{margin-top:48px;padding:32px;background:var(--brand-dark);color:var(--brand-muted);display:grid;gap:20px}
.closing p{margin:0;color:#D0D0D2}
.btn{display:inline-flex;justify-self:start;align-items:center;font:500 12.5px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 26px;border:1px solid var(--gold);background:var(--gold);color:var(--brand-dark);transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--brand-deep);color:var(--gold)}
.more{margin-top:40px;font:500 11.5px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.more a{text-decoration:none;color:var(--muted)}
.more a:hover{color:var(--title)}

footer{background:var(--brand-deep);color:var(--brand-muted);font-size:14px}
footer .wrap{padding-block:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer b{font:500 11px/1.6 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--brand-fg)}
@media (max-width:520px){.article{padding-top:48px}.closing{padding:24px}.back{display:none}}
