/* Layout: uma coluna de leitura, como um documento fundador; o único elemento gráfico é a constelação de nós (herança do logo "moving networks") */
:root{
  --paper:#f4f5f2; --ink:#16201e; --muted:#5c6966; --line:#d7ddd8; --signal:#0b7a66; --soft:#e5ece8;
  --f-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --f-sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#0e1413;--ink:#e3e9e6;--muted:#93a29d;--line:#26322f;--signal:#45c2a6;--soft:#17231f;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0e1413;--ink:#e3e9e6;--muted:#93a29d;--line:#26322f;--signal:#45c2a6;--soft:#17231f;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 var(--f-serif);padding-inline:20px;padding-block:0 80px}
.col{max-width:680px;margin:0 auto}
header{max-width:680px;margin:0 auto;padding-block:28px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;font:600 18px var(--f-sans);letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
nav{display:flex;gap:18px;flex-wrap:wrap;font:500 13.5px var(--f-sans)}
nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--ink)}
.abre{padding-block:72px 40px;border-bottom:1px solid var(--line)}
.abre svg{display:block;width:100%;max-width:680px;height:auto;margin-bottom:28px}
.abre svg .no{fill:var(--ink)} .abre svg .no.s{fill:var(--signal)} .abre svg .fio{stroke:var(--line);stroke-width:1.2}
h1{font:500 clamp(38px,7vw,58px)/1.05 var(--f-serif);letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
h1 em{font-style:italic;color:var(--signal)}
.lede{font-size:20px;line-height:1.55;color:var(--ink);margin:0}
.k{font:500 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
section{padding-block:44px 8px}
h2{font:500 30px/1.15 var(--f-serif);letter-spacing:-.01em;margin:6px 0 18px;text-wrap:balance}
h3{font:600 16px/1.3 var(--f-sans);margin:28px 0 6px}
p{margin:0 0 16px}
strong{font-weight:700}
.nota{font:14px/1.55 var(--f-sans);color:var(--muted)}
.camadas{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-block:8px 18px}
.camadas div{padding-block:14px 10px;padding-inline:0 14px;font:14px/1.5 var(--f-sans);min-width:0}
.camadas div+div{padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.camadas b{display:block;font:500 15px var(--f-mono);color:var(--signal);margin-bottom:4px}
.linha{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font:15px/1.55 var(--f-sans)}
.linha .a{font:500 15px var(--f-mono);color:var(--signal)}
.art{padding:14px 0;border-bottom:1px solid var(--line)}
.art .n{font:500 12px var(--f-mono);color:var(--muted);letter-spacing:.08em}
.art p{margin:4px 0 0}
.camada{font:600 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:30px 0 4px}
blockquote{margin:22px 0;padding-block:4px;padding-inline:18px 0;border-inline-start:2px solid var(--signal);font-size:20px;line-height:1.5}
footer{max-width:680px;margin:56px auto 0;padding-top:18px;border-top:1px solid var(--line);font:13px/1.6 var(--f-sans);color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
a{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media (max-width:600px){
  body{font-size:16.5px}
  .camadas{grid-template-columns:1fr}
  .camadas div+div{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line)}
}
/* seletor de idioma: bandeira + código, sempre legível mesmo onde a bandeira emoji não aparece (Windows) */
.idiomas{display:flex;gap:4px;font:500 12.5px var(--f-sans)}
.idiomas a{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid transparent;border-radius:999px;color:var(--muted);text-decoration:none}
.idiomas a:hover{color:var(--ink);border-color:var(--line)}
.idiomas a[aria-current="true"]{color:var(--ink);border-color:var(--line);background:var(--soft)}
.idiomas .bandeira{font-size:14px;line-height:1}
.topo-dir{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* chinês: as fontes latinas não têm os caracteres; usa as do sistema */
:lang(zh) body,:lang(zh) .lede{font-family:"Songti SC","Noto Serif SC","Source Han Serif SC",serif}
:lang(zh) h1,:lang(zh) h2,:lang(zh) blockquote{font-family:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;letter-spacing:0}
:lang(zh) h3,:lang(zh) .camadas div,:lang(zh) .linha,:lang(zh) .nota,:lang(zh) nav,:lang(zh) footer{font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
:lang(zh) em{font-style:normal}
/* hindi (devanágari) e árabe: fontes próprias; o árabe espelha o layout pelo dir="rtl" e pelas propriedades lógicas acima */
:lang(hi) body,:lang(hi) h1,:lang(hi) h2,:lang(hi) blockquote{font-family:"Noto Serif Devanagari","Kohinoor Devanagari",serif;letter-spacing:0}
:lang(hi) h3,:lang(hi) .camadas div,:lang(hi) .linha,:lang(hi) .nota,:lang(hi) nav,:lang(hi) footer{font-family:"Noto Sans Devanagari","Kohinoor Devanagari",sans-serif}
:lang(ar) body,:lang(ar) h1,:lang(ar) h2,:lang(ar) blockquote{font-family:"Noto Naskh Arabic","Geeza Pro",serif;letter-spacing:0}
:lang(ar) h3,:lang(ar) .camadas div,:lang(ar) .linha,:lang(ar) .nota,:lang(ar) nav,:lang(ar) footer{font-family:"Noto Sans Arabic","Geeza Pro",sans-serif}
:lang(ar) em,:lang(hi) em{font-style:normal}
:lang(ar) .k,:lang(ar) .art .n,:lang(ar) .camada{letter-spacing:0}
