/* ============================================================
   A Turma do Sábado · visual japandi
   Uma família para tudo: Zen Kaku Gothic New.
   A serifa (Shippori Mincho) tem dois papéis e só dois:
   o título da página (h1) e a frase de destaque (.phrase).
   Nunca em rótulo, menu, botão, intertítulo ou texto corrido.
   Um só acento de cor: o azul-marinho da série. A cor de cada
   artigo aparece só num ponto (--c).
   ============================================================ */
:root{
  --washi:#F4F2ED; --washi-2:#ECE9E2; --sumi:#1E2226; --sumi-2:#5B6168; --sumi-3:#61676E;
  --rule:#D9D5CC; --ai:#123A7A; --ok:#2F6B4F; --bad:#9A3B2E;
  --measure:38rem; --measure-doc:46rem; --wide:72rem;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:104px;
  --ease:cubic-bezier(.25,.1,.25,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --washi:#15171A; --washi-2:#1C1F23; --sumi:#E6E2DA; --sumi-2:#A7A39B; --sumi-3:#8C8984;
  --rule:#2C3035; --ai:#9DB4DE; --ok:#8CC5A5; --bad:#E5A195; color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --washi:#15171A; --washi-2:#1C1F23; --sumi:#E6E2DA; --sumi-2:#A7A39B; --sumi-3:#8C8984;
    --rule:#2C3035; --ai:#9DB4DE; --ok:#8CC5A5; --bad:#E5A195; color-scheme:dark;
  }
}

/* compatibilidade: cores que o conteúdo antigo usa em style="" */
:root{
  --a0:#9A5B13; --a1:#6B7280; --a2:#0E8FA6; --a3:#1F6FD1; --a4:#E8761E; --a5:#5B3FB8;
  --e0:#6B7280; --e1:#8A5A12; --e2:#6A45C9; --e3:#1F6FD1; --e4:#10857A; --e5:#3E9A3A;
  --disc:#0E8FA6; --biz:#6A45C9; --val:#1F6FD1; --gtm:#E8761E; --prod:#3E9A3A; --grow:#10857A; --scale:#5B3FB8;
  --amber:#9A5B13; --navy:var(--ai); --soft:var(--sumi-2); --paper:var(--washi-2); --good:var(--ok); --warm:var(--c,var(--ai));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--washi); color:var(--sumi);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif; font-weight:400;
  font-size:17.5px; line-height:1.85; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0 0 1.2em}
hr{border:0; border-top:1px solid var(--rule); margin:var(--s5) 0}
.skip{position:absolute; left:-999px; top:8px; background:var(--sumi); color:var(--washi); padding:8px 14px; z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:1.5px solid var(--ai); outline-offset:4px}

/* rótulo: o único estilo de caixa-alta espaçada do site */
.label{font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--sumi-2); line-height:1.7}

/* serifa: papel 1, o título */
h1{font-family:"Shippori Mincho",serif; font-weight:400; font-size:clamp(40px,6.4vw,76px); line-height:1.18; letter-spacing:.02em; margin:0}
/* serifa: papel 2, a frase de destaque */
.phrase{font-family:"Shippori Mincho",serif; font-size:clamp(24px,2.6vw,31px); line-height:1.55; letter-spacing:.02em; margin:0 0 var(--s5); max-width:34rem}
.phrase em{font-style:normal; color:var(--ai)}

.link-arrow{font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:var(--sumi);
  padding:6px 0; border-bottom:1px solid var(--ai); transition:color .2s var(--ease), gap .2s; display:inline-flex; gap:10px}
.link-arrow:hover{color:var(--ai); gap:14px}
.stroke{width:32px; height:1px; background:var(--ai); margin:var(--s5) auto; border:0}

/* ---------- cabeçalho ---------- */
header.site{position:sticky; top:0; z-index:40; background:var(--washi); border-bottom:1px solid transparent; transition:border-color .3s var(--ease)}
header.site.scrolled{border-bottom-color:var(--rule)}
.bar{max-width:var(--wide); margin:0 auto; padding:18px var(--s4); display:flex; align-items:center; gap:var(--s4)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand img{width:26px; height:26px; border-radius:50%}
.brand b{font-weight:500; font-size:12.5px; letter-spacing:.24em; text-transform:uppercase}
.bar .tx{background:none; border:0; padding:10px 0; font:inherit; font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sumi-2); cursor:pointer; text-decoration:none; transition:color .2s var(--ease)}
.bar .tx:hover,.bar .tx[aria-expanded="true"]{color:var(--sumi)}
.bar .tx.acc{color:var(--ai)}
nav.main ul{list-style:none; margin:0; padding:0; display:flex; gap:var(--s4)}
nav.main li{position:relative}
nav.main .sub{display:none; position:absolute; top:100%; left:-20px; min-width:320px; flex-direction:column; gap:0;
  background:var(--washi); border:1px solid var(--rule); padding:12px 0}
nav.main li.open>.sub{display:flex}
nav.main .sub a{display:block; padding:9px 20px; font-size:14.5px; line-height:1.5; text-decoration:none; color:var(--sumi-2); letter-spacing:.01em; transition:color .2s}
nav.main .sub a:hover,nav.main .sub a[aria-current="page"]{color:var(--sumi)}
nav.main .sub a[aria-current="page"]{box-shadow:inset 1px 0 0 var(--ai)}
nav.main .sub a span{display:inline-block; width:1.6em; color:var(--sumi-3); font-variant-numeric:tabular-nums}
.share{position:relative}
.share-panel{display:none; position:absolute; right:0; top:100%; width:260px; background:var(--washi); border:1px solid var(--rule); padding:16px 0 10px}
.share.open .share-panel{display:block}
.share-panel p{margin:0 20px 10px; font-size:13.5px; line-height:1.6; color:var(--sumi-2)}
.share-panel a,.share-panel button{display:block; width:100%; text-align:left; background:none; border:0; font:inherit; font-size:14.5px; color:var(--sumi); padding:8px 20px; cursor:pointer; text-decoration:none}
.share-panel a:hover,.share-panel button:hover{background:var(--washi-2)}
.menu-btn{display:none}
.progress{position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--ai); transform-origin:0 50%; transform:scaleX(var(--p,0))}

/* ---------- rodapé ---------- */
footer.site{padding:var(--s7) var(--s4) var(--s6); border-top:1px solid var(--rule); text-align:center}
footer.site .emblem{width:40px; height:40px; border-radius:50%; margin:0 auto var(--s4)}
footer.site p{font-size:13px; line-height:1.9; color:var(--sumi-2); margin:0 auto; max-width:36rem}
footer.site .note{margin-bottom:var(--s4)}
footer.site .social{display:flex; justify-content:center; gap:var(--s5); margin:0 auto var(--s5)}
footer.site .more-links{margin-top:var(--s3)}
footer.site .more-links a{color:var(--sumi-2); text-decoration:none; border-bottom:1px solid var(--rule); margin:0 8px}
footer.site .more-links a:hover{color:var(--sumi); border-color:var(--ai)}
.theme{margin-top:var(--s4)}
.theme button{background:none; border:0; cursor:pointer; padding:10px}
/* aviso de cookies: discreto, no pé da tela, sem sombra */
.cookies{position:fixed; left:50%; bottom:var(--s3); transform:translateX(-50%); z-index:60;
  width:min(40rem, calc(100% - 2*var(--s3))); background:var(--washi); border:1px solid var(--rule);
  padding:var(--s3) var(--s4); display:flex; gap:var(--s4); align-items:center}
.cookies p{margin:0; font-size:13px; line-height:1.7; color:var(--sumi-2)}
.cookies-acoes{display:flex; gap:var(--s2); flex-shrink:0}
.cookies button{font:inherit; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 14px; cursor:pointer; border:1px solid var(--ai); background:none; color:var(--ai); transition:background .2s var(--ease), color .2s var(--ease)}
.cookies button.cookies-sim{background:var(--ai); color:var(--washi)}
.cookies button:hover{background:var(--ai); color:var(--washi)}
.cookies button.cookies-nao:hover{background:none; color:var(--sumi); border-color:var(--sumi)}
@media (max-width:640px){ .cookies{flex-direction:column; align-items:stretch; gap:var(--s3); padding:var(--s3)} .cookies-acoes button{flex:1} }

/* ============================================================
   Home
   ============================================================ */
.opening{min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:var(--s6) var(--s4) var(--s7)}
.opening .emblem{width:88px; height:88px; border-radius:50%; margin-bottom:var(--s5)}
.opening .label{margin-bottom:var(--s5)}
.opening .deck{max-width:30rem; margin:var(--s5) auto 0; font-size:17px; color:var(--sumi-2); line-height:1.9}
.home section{padding:var(--s7) var(--s4); border-top:1px solid var(--rule)}
.sec{max-width:var(--wide); margin:0 auto; display:grid; grid-template-columns:12rem 1fr; gap:var(--s5)}
.sec>header{padding-top:6px}
.sec>header .num{display:block; font-size:11.5px; letter-spacing:.24em; color:var(--sumi-3); margin-bottom:6px; font-variant-numeric:tabular-nums}
.sec>header h2{font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; margin:0; line-height:1.7}
.body{max-width:var(--measure)}
.body a:not(.link-arrow){text-decoration:none; border-bottom:1px solid var(--ai); transition:color .2s}
.body a:not(.link-arrow):hover{color:var(--ai)}
.index{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.index li{border-bottom:1px solid var(--rule)}
.index a{display:grid; grid-template-columns:3.5rem 1fr 15rem; gap:var(--s4); align-items:start; padding:var(--s5) 0; text-decoration:none}
.index .n{font-size:13px; color:var(--sumi-3); font-variant-numeric:tabular-nums; padding-top:4px; display:flex; align-items:center; gap:10px}
.index .n i{width:6px; height:6px; border-radius:50%; background:var(--c); display:inline-block}
.index .lv{margin-bottom:8px}
.index h3{font-size:21px; font-weight:500; line-height:1.4; letter-spacing:.01em; margin:0 0 10px; transition:color .2s var(--ease)}
.index p{font-size:15.5px; line-height:1.8; color:var(--sumi-2); margin:0}
.index img{width:100%; filter:saturate(.85); transition:filter .3s var(--ease)}
.index a:hover h3{color:var(--ai)}
.index a:hover img{filter:saturate(1)}
.steps{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start}
.steps figure{margin:0}
.dots{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:14px}
.dots a{position:relative; display:block; width:18px; height:18px}
.dots a::after{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--sumi-3); transition:background .2s, inset .2s}
.dots a.on::after{background:var(--ai); inset:5px}
.dots a span{position:absolute; right:28px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sumi-2); opacity:0; pointer-events:none; transition:opacity .2s}
.dots a:hover span,.dots a:focus-visible span{opacity:1}

/* ============================================================
   Páginas de leitura: artigos e documentos
   ============================================================ */
.pg-open{max-width:var(--wide); margin:0 auto; padding:var(--s7) var(--s4) var(--s6); text-align:center}
.pg-open .label{margin:0 0 var(--s4); display:inline-flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap}
.pg-open .label i{width:6px; height:6px; border-radius:50%; background:var(--c,var(--ai)); display:inline-block}
.pg-open h1{font-size:clamp(34px,5vw,58px); max-width:24ch; margin:0 auto}
.pg-open .deck{max-width:36rem; margin:var(--s4) auto 0; font-size:17px; line-height:1.9; color:var(--sumi-2)}
.pg-open .deck a{color:inherit; text-decoration:none; border-bottom:1px solid var(--ai)}
.pg-open .by{margin:var(--s5) auto 0; max-width:40rem}
.pg-open .emblem{width:120px; margin:0 auto var(--s5)}
.pg-open .emblem img{border-radius:50%}
.pg-hero{max-width:60rem; margin:0 auto var(--s7); padding:0 var(--s4)}
.pg-hero figure{margin:0}

.pg{max-width:var(--wide); margin:0 auto; padding:0 var(--s4) var(--s7); display:grid; grid-template-columns:13rem minmax(0,var(--measure)); gap:0 var(--s6); justify-content:center}
.pg.doc{grid-template-columns:13rem minmax(0,var(--measure-doc))}
.pg.solo{grid-template-columns:minmax(0,var(--measure-doc))}
.pg-toc{grid-column:1; grid-row:1 / span 99}
.pg-text{grid-column:2; min-width:0}
.pg.solo .pg-text{grid-column:1}
.pg-toc details{position:sticky; top:96px; max-height:calc(100vh - 120px); overflow:auto; scrollbar-width:thin}
.pg-toc summary{list-style:none; cursor:pointer; margin:0 0 var(--s3)}
.pg-toc summary::-webkit-details-marker{display:none}
.pg-toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--rule)}
.pg-toc a{display:block; padding:6px 0 6px 16px; margin-left:-1px; border-left:1px solid transparent; font-size:13px; line-height:1.55; color:var(--sumi-2); text-decoration:none; transition:color .2s, border-color .2s}
.pg-toc a:hover{color:var(--sumi)}
.pg-toc a.on{color:var(--sumi); border-left-color:var(--ai)}

/* texto */
.pg-text h2{font-size:21px; font-weight:500; letter-spacing:.01em; line-height:1.45; margin:var(--s7) 0 var(--s4)}
.pg-text>h2:first-child{margin-top:0}
.pg-text h3{font-size:17.5px; font-weight:500; line-height:1.5; margin:var(--s5) 0 var(--s3)}
.pg-text h4{font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sumi-2); margin:var(--s5) 0 var(--s3)}
.pg-text.artigo{counter-reset:sec}
.pg-text.artigo h2{counter-increment:sec}
.pg-text.artigo h2::before{content:counter(sec,decimal-leading-zero); display:block; font-size:11.5px; letter-spacing:.24em; color:var(--sumi-3); margin-bottom:10px; font-variant-numeric:tabular-nums}
.pg-text a{text-decoration:none; border-bottom:1px solid var(--ai); transition:color .2s}
.pg-text a:hover{color:var(--ai)}
.pg-text em{font-style:italic}
.pg-text strong,.pg-text b{font-weight:500}
.pg-text ul,.pg-text ol{padding-left:1.3em; margin:0 0 1.2em}
.pg-text li{margin-bottom:.45em}
.pg-text li::marker{color:var(--sumi-3)}
figure{margin:var(--s6) 0}
figure img{width:100%}
figcaption{margin-top:12px; font-size:13.5px; line-height:1.7; color:var(--sumi-2); max-width:var(--measure)}
code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:.86em; background:var(--washi-2); padding:1px 5px}
pre{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:13.5px; line-height:1.7; background:var(--washi-2); padding:var(--s3) var(--s4); overflow-x:auto; white-space:pre-wrap; margin:0 0 var(--s4)}
pre code{background:none; padding:0; font-size:inherit}
.pg-text blockquote{margin:var(--s5) 0; padding:var(--s4) var(--s5); background:var(--washi-2); border:0}
.pg-text blockquote p:last-child{margin-bottom:0}

/* tabelas */
.table-wrap{overflow-x:auto; margin:var(--s4) 0 var(--s5)}
table{border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.6}
th,td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--rule)}
th{font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sumi-2)}
td.yes{color:var(--ok)} td.no{color:var(--bad)}

/* chamadas de fonte */
sup.c{font-size:10.5px; line-height:0; margin-left:1px}
sup.c a{border:0; color:var(--ai); font-variant-numeric:tabular-nums; padding:0 2px}
.gl a.more{border:0}

/* artigo: cartão de consulta */
.pg-text.artigo blockquote{margin:var(--s6) 0; padding:var(--s5)}
.pg-text.artigo blockquote .label{margin-bottom:var(--s3)}
.pg-text.artigo blockquote p:not(.label){margin:0; padding:12px 0; border-top:1px solid var(--rule); font-size:16px; line-height:1.7}
/* artigo: você está aqui */
.here{margin:var(--s7) 0; padding:var(--s5) 0; border-top:1px solid var(--sumi); border-bottom:1px solid var(--rule)}
.here .label{margin-bottom:var(--s3); display:flex; align-items:center; gap:10px}
.here .label:first-child::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--c,var(--ai))}
.here .ask{margin:var(--s5) 0 0}
.here .phrase{margin:var(--s2) 0 0; font-size:clamp(22px,2.3vw,27px)}
/* artigo 0: lista de conteúdos */
.contents{margin:var(--s5) 0}
.contents div{padding:14px 0; border-bottom:1px solid var(--rule)}
.contents b{display:block; font-weight:500}
.contents i{color:var(--sumi-2)}

/* fim de página */
.pg-end{max-width:var(--wide); margin:0 auto; padding:0 var(--s4)}
.pn{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.pn a{padding:var(--s5) var(--s4) var(--s5) 0; text-decoration:none; transition:color .2s}
.pn a+a{border-left:1px solid var(--rule); padding:var(--s5) 0 var(--s5) var(--s4); text-align:right}
.pn .label{display:block; margin-bottom:8px}
.pn b{font-weight:500; font-size:19px; line-height:1.45}
.pn a:hover b{color:var(--ai)}
.refs{text-align:center; padding:var(--s6) 0 0; margin:0}

/* ============================================================
   Documentos: referências e bastidores
   ============================================================ */
.q,.lead{color:var(--sumi-2); font-size:16px}
.note{font-size:14.5px; color:var(--sumi-2)}
.caption{font-size:14.5px; color:var(--sumi-2)}
.letters{display:flex; flex-wrap:wrap; gap:4px 14px; margin:var(--s3) 0 var(--s4); font-size:12.5px; letter-spacing:.14em}
.letters a{border:0; color:var(--sumi-2)}
.letters a:hover{color:var(--ai)}
.era{margin:var(--s5) 0; padding-left:var(--s4); border-left:1px solid var(--rule); position:relative}
.era::before{content:""; position:absolute; left:-4px; top:.8em; width:7px; height:7px; border-radius:50%; background:var(--c,var(--ai))}
.book{padding:var(--s3) 0; border-bottom:1px solid var(--rule)}
.book:last-child{border-bottom:0}
.book p{margin:0 0 6px}
.book .ref{font-weight:500; line-height:1.5}
.book .ref .yr{display:inline-block; min-width:3.2em; color:var(--sumi-3); font-variant-numeric:tabular-nums; font-weight:400}
.meta{font-size:13px; color:var(--sumi-2)}
.book .meta{margin:0}
dl{margin:0 0 var(--s4)}
.gloss dt{font-weight:500; margin-top:var(--s4); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px}
.gloss dd{margin:4px 0 0; color:var(--sumi)}
.gloss .meta{display:block; margin-top:4px}
button.back{background:none; border:0; border-bottom:1px solid var(--rule); padding:0; margin-left:6px; font:inherit; font-size:12px; letter-spacing:.06em; color:var(--sumi-2); cursor:pointer}
button.back:hover{color:var(--ai); border-color:var(--ai)}
.sources,ol.sources{font-size:14.5px; line-height:1.7}
.sources li{margin-bottom:10px}
/* galerias e cartões */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--s3); margin:var(--s4) 0}
.gal figure{margin:0}
.gal figcaption{font-size:12.5px}
.gal .fn,.fn{display:block; font-size:11px; letter-spacing:.08em; color:var(--sumi-3); margin-bottom:4px}
.ph{border:1px dashed var(--sumi-3); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s3); font-size:13px; color:var(--sumi-2)}
.gal .ph{aspect-ratio:4/3; font-size:12px}
.card,.art,.article,.img-card,.dec{margin:var(--s5) 0; padding:var(--s4) 0 var(--s4) var(--s4); border-left:1px solid var(--c,var(--rule)); position:relative}
.card h3,.art h3,.article h3,.img-card h3,.dec h3{margin-top:0}
.card dt,.art dt,.article dt,.img-card dt{font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sumi-2); margin-top:var(--s3)}
.card dd,.art dd,.article dd,.img-card dd{margin:2px 0 0}
.art .lvl,.lbl,.dec .tag,.rule{font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sumi-2); margin:0 0 6px}
.art .dk{color:var(--sumi-2)}
.check{list-style:none; padding-left:0}
.check li{position:relative; padding-left:28px}
.check li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border:1px solid var(--sumi-3)}
.sw{display:inline-block; width:12px; height:12px; vertical-align:middle; margin-right:6px; border:1px solid var(--rule)}
.opt{font-size:15px; line-height:1.6; margin:0 0 10px; padding-left:34px; position:relative}
.opt b.l{position:absolute; left:0; top:1px; width:22px; height:22px; border:1px solid var(--sumi-3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:500}
.rec{font-size:15px; background:var(--washi-2); padding:12px 16px; margin:var(--s3) 0}
.rec strong{color:var(--ok)}
.tl{border-left:1px solid var(--rule); margin:var(--s3) 0 var(--s4) 4px; padding-left:var(--s4)}
.tl p{position:relative}
.tl p::before{content:""; position:absolute; left:calc(-1 * var(--s4) - 4px); top:.7em; width:7px; height:7px; border-radius:50%; background:var(--ai)}
.cycle{display:flex; flex-wrap:wrap; gap:8px; margin:var(--s3) 0 var(--s4)}
.cycle span{border:1px solid var(--rule); padding:4px 12px; font-size:13px}
.part{margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--sumi)}
.essay{background:var(--washi-2); padding:var(--s5); margin:var(--s4) 0}
.essay h1{font-size:clamp(28px,4vw,40px); margin-bottom:var(--s4)}
.item{padding:var(--s3) 0; border-bottom:1px solid var(--rule)}
.item a{font-weight:500; font-size:18px}
.item p{margin:4px 0 0; color:var(--sumi-2); font-size:15.5px}
.status{font-size:14.5px; background:var(--washi-2); padding:12px 16px}
.pg-text nav.toc,.pg-text ol.toc{display:none}

@media (max-width:1080px){
  .pg,.pg.doc{grid-template-columns:minmax(0,var(--measure-doc))}
  .pg:not(.doc){grid-template-columns:minmax(0,var(--measure))}
  .pg-toc{grid-column:1; grid-row:auto; margin-bottom:var(--s5); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:var(--s3) 0}
  .pg-toc details{position:static; max-height:none}
  .pg-toc summary{margin:0}
  .pg-toc summary::after{content:" +"; color:var(--sumi-3)}
  .pg-toc details[open] summary::after{content:" −"}
  .pg-toc details[open] summary{margin-bottom:var(--s3)}
  .pg-text{grid-column:1}
}

/* ---------- celular ---------- */
@media (max-width:900px){
  .dots{display:none}
  .sec{grid-template-columns:1fr; gap:var(--s4)}
  .index a{grid-template-columns:2.5rem 1fr}
  .index img{grid-column:2; grid-row:1; margin-bottom:var(--s3)}
  .index .txt{grid-column:2}
  .index .n{grid-row:1 / span 2}
  .steps{grid-template-columns:1fr; gap:var(--s5)}
}
@media (max-width:760px){
  body{font-size:17px}
  .bar{padding:14px 20px; gap:var(--s3)}
  nav.main{display:none}
  .menu-btn{display:inline-block}
  header.site.open nav.main{display:block; position:absolute; top:100%; left:0; right:0; background:var(--washi); border-bottom:1px solid var(--rule); padding:8px 20px 20px; max-height:calc(100svh - 60px); overflow:auto}
  header.site.open nav.main ul{flex-direction:column; gap:0}
  header.site.open nav.main .sub{position:static; display:flex; border:0; padding:0 0 12px; min-width:0}
  header.site.open nav.main .sub a{padding:9px 0}
  header.site.open nav.main .top{pointer-events:none; color:var(--sumi-3)}
  .home section{padding:var(--s6) 20px}
  .opening{padding:var(--s5) 20px var(--s6)}
  .pg-open{padding:var(--s6) 20px var(--s5)}
  .pg-hero,.pg,.pg-end{padding-left:20px; padding-right:20px}
  .pg-hero{margin-bottom:var(--s6)}
  .pg-text h2{margin-top:var(--s6)}
  .pg-text blockquote,.pg-text.artigo blockquote{padding:var(--s4)}
  .essay{padding:var(--s4) 16px}
  .pn{grid-template-columns:1fr}
  .pn a,.pn a+a{padding:var(--s4) 0; border-left:0; text-align:left}
  .pn a+a{border-top:1px solid var(--rule)}
  footer.site .social{gap:var(--s4)}
}
@media (max-width:430px){
  .bar{gap:12px; padding-left:16px; padding-right:16px}
  .brand{gap:9px}
  .brand b{font-size:11px; letter-spacing:.14em; white-space:nowrap}
  .bar .tx{font-size:10.5px; letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}
@media print{header.site,.dots,.theme,.pg-toc,.progress,.cookies{display:none !important} body{background:#fff; color:#000}}