*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
font-size:var(--fz,22px);line-height:1.72;transition:background .35s,color .35s}
/* ===== tokens por modo: a=imersivo b=claro c=escuro ===== */
body[data-modo="a"]{background:#0c0e12;color:#f4efe6}
body[data-modo="b"]{background:#f6f1e7;color:#241f1a}
body[data-modo="c"]{background:#14161b;color:#e7e1d5}
/* ===== pintura de fundo cobrindo tudo: SÓ no modo imersivo ===== */
.bg,.veil{position:fixed;inset:0;display:none}
body[data-modo="a"] .bg{display:block;z-index:0;background:var(--art) center/cover no-repeat fixed;transform:scale(1.04)}
body[data-modo="a"] .veil{display:block;z-index:1;
background:radial-gradient(120% 90% at 50% 8%,rgba(8,10,14,.30),rgba(8,10,14,.74) 78%),
linear-gradient(180deg,rgba(8,10,14,.34),rgba(8,10,14,.68))}
/* pintura CLARA (ex.: Friedrich): escurece mais o véu pra o texto claro não fundir */
body[data-modo="a"][data-surface="light"] .veil{
background:radial-gradient(120% 90% at 50% 8%,rgba(6,8,12,.46),rgba(6,8,12,.82) 78%),
linear-gradient(180deg,rgba(6,8,12,.52),rgba(6,8,12,.80))}
/* ===== topo / nav ===== */
header.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
gap:18px;flex-wrap:wrap;max-width:1100px;margin:0 auto;padding:24px 30px}
body[data-modo="b"] header.top{border-bottom:1px solid #d8cdb8}
body[data-modo="c"] header.top{border-bottom:1px solid #2a2e37}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:Didot,"Bodoni 72","Hoefler Text",Georgia,serif;
font-size:20px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:inherit}
.brand-logo{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
box-shadow:0 2px 10px -3px rgba(0,0,0,.5)}
body[data-modo="b"] .brand-logo{box-shadow:0 2px 10px -4px rgba(60,40,10,.5)}
@media(max-width:560px){.brand{font-size:17px;gap:9px}.brand-logo{width:32px;height:32px}}
nav a{text-decoration:none;font-size:16px;margin-left:22px;border-bottom:1px solid transparent;padding-bottom:3px;transition:.2s}
body[data-modo="a"] nav a{color:#cfc7b8} body[data-modo="a"] nav a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
body[data-modo="b"] nav a{color:#6b6157} body[data-modo="b"] nav a:hover{color:#241f1a;border-color:#241f1a}
body[data-modo="c"] nav a{color:#b3ac9e} body[data-modo="c"] nav a:hover{color:#fff;border-color:rgba(255,255,255,.45)}
/* ===== hero modo A (título sobre a pintura inteira) ===== */
.heroA{position:relative;z-index:3;text-align:center;padding:58px 24px 26px;display:none}
body[data-modo="a"] .heroA{display:block}
.heroA h1{font-family:Didot,"Bodoni 72","Hoefler Text",Georgia,serif;font-weight:400;
font-size:clamp(38px,6.4vw,64px);line-height:1.05;margin:0;
text-shadow:0 2px 22px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6)}
/* ===== hero modos B e C (faixa de pintura com título) — anti-fusão ===== */
.heroB{position:relative;height:330px;overflow:hidden;display:none}
body[data-modo="b"] .heroB,body[data-modo="c"] .heroB{display:block}
body[data-modo="b"] .heroB{border-bottom:1px solid #d8cdb8}
body[data-modo="c"] .heroB{border-bottom:1px solid #2a2e37}
.heroB img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.heroB .cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:42px 30px 26px}
/* a FAIXA (scrim) sobe da cor do modo: garante o título sobre a cor do tema, não sobre a pintura crua */
body[data-modo="b"] .heroB .cap{background:linear-gradient(180deg,rgba(246,241,231,0) 0%,rgba(246,241,231,.18) 30%,rgba(246,241,231,.72) 62%,rgba(246,241,231,.97) 100%)}
body[data-modo="c"] .heroB .cap{background:linear-gradient(180deg,rgba(20,22,27,0) 0%,rgba(20,22,27,.22) 30%,rgba(20,22,27,.76) 62%,rgba(20,22,27,.98) 100%)}
.heroB .cap .inner,.heroA .inner{max-width:960px;margin:0 auto;width:100%;position:relative}
.heroB h1{font-family:Didot,"Bodoni 72","Hoefler Text",Georgia,serif;font-weight:400;
font-size:clamp(34px,5.4vw,54px);line-height:1.06;margin:0}
/* HALO da cor do modo atrás das letras: mesmo sobre a pintura clara/escura, o texto nunca funde */
body[data-modo="b"] .heroB h1{color:#241f1a;text-shadow:0 1px 10px rgba(246,241,231,.98),0 0 26px rgba(246,241,231,.85)}
body[data-modo="c"] .heroB h1{color:#f0ebdf;text-shadow:0 1px 10px rgba(20,22,27,.98),0 0 26px rgba(20,22,27,.9)}
/* ===== corpo ===== */
.stage{position:relative;z-index:3}
.doc{max-width:960px;margin:0 auto}
body[data-modo="a"] .stage{padding:0 24px 120px}
body[data-modo="a"] .doc{background:rgba(16,18,24,.46);backdrop-filter:blur(14px) saturate(1.1);
-webkit-backdrop-filter:blur(14px) saturate(1.1);border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:50px 60px;margin-top:40px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
/* sobre pintura CLARA, painel mais opaco pra o texto claro ter contraste */
body[data-modo="a"][data-surface="light"] .doc{background:rgba(12,14,20,.66)}
body[data-modo="b"] .stage{padding:56px 26px 120px}
body[data-modo="c"] .stage{padding:56px 26px 120px}
.doc p{margin:0 0 1.2em;text-align:justify;hyphens:auto}
.doc h2,.doc h3,.doc h4{font-family:Didot,"Hoefler Text",Georgia,serif;font-weight:400;line-height:1.15;margin:1.4em 0 .4em}
.doc h2{font-size:1.5em} .doc h3{font-size:1.28em} .doc h4{font-size:1.1em}
.doc a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--art-accent)}
.doc blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.1em;border-left:2px solid currentColor;opacity:.92;font-style:italic}
.doc img{max-width:100%;height:auto;border-radius:8px;display:block;margin:1.4em auto}
.doc ul,.doc ol{padding-left:1.3em;margin:0 0 1.2em}
.doc li{margin:.2em 0}
.doc hr{border:0;height:1px;margin:42px 0}
body[data-modo="a"] .doc hr{background:rgba(255,255,255,.14)}
body[data-modo="b"] .doc hr{background:#d8cdb8}
body[data-modo="c"] .doc hr{background:#2a2e37}
/* ===== botão discreto de play (ouvir em voz alta) à direita do título ===== */
.heroA .inner{min-height:1.1em}
.playbtn{position:absolute;right:0;top:50%;transform:translateY(-50%);
width:46px;height:46px;border-radius:50%;flex:none;cursor:pointer;padding:0;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;border:1px solid currentColor;color:inherit;opacity:.55;
transition:opacity .18s,background .18s,transform .18s}
.playbtn:hover{opacity:1}
body[data-modo="a"] .playbtn:hover,body[data-modo="c"] .playbtn:hover{background:rgba(255,255,255,.12)}
body[data-modo="b"] .playbtn:hover{background:rgba(0,0,0,.06)}
.playbtn svg{width:20px;height:20px;fill:currentColor;display:block}
.playbtn .i-play{margin-left:2px}
.playbtn .i-pause{display:none}
.playbtn.is-playing{opacity:1}
.playbtn.is-playing .i-play{display:none}
.playbtn.is-playing .i-pause{display:block}
@media(max-width:680px){.playbtn{width:42px;height:42px}}
/* ===== TARJAS (tarja preta sólida e limpa) — visível em todos os modos ===== */
.redact{display:block;height:1.18em;background:#070707;border-radius:3px;margin:.34em 0}
.redact-inline{display:inline-block;height:.86em;vertical-align:baseline;margin:0}
.heroA .redact-inline,.heroB .redact-inline{height:.62em;border-radius:4px}
/* no escuro, preto sobre preto funde: contorno tênue mantém a forma da tarja */
body[data-modo="c"] .redact{background:#050608;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
/* ===== HOME ===== */
.home-doc{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;max-width:1080px;padding-top:6px}
.secs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 58px}
.secs .sec{display:flex;align-items:center;justify-content:center;text-align:center;min-height:158px;
text-decoration:none;color:inherit;border-radius:16px;font-family:Didot,"Hoefler Text",Georgia,serif;font-size:30px;
transition:transform .18s,background .18s,border-color .18s;padding:24px}
.recentes{font-family:Didot,"Hoefler Text",Georgia,serif;font-weight:400;font-size:24px;margin:0 0 14px;text-align:center}
.posts{list-style:none;padding:0;margin:0 auto;max-width:680px}
.posts li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 4px;border-bottom:1px solid}
.posts a{text-decoration:none;color:inherit;font-size:21px}
.posts a:hover{text-decoration:underline;text-underline-offset:3px}
.posts time{font-size:16px;font-style:italic;opacity:.7;white-space:nowrap}
/* ===== PÁGINAS DE ÍNDICE (poucas opções -> cartões grandes) ===== */
.index-doc{background:none!important;border:0!important;box-shadow:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
max-width:980px;padding:0!important;margin-top:36px;
min-height:calc(100vh - 360px);display:flex;flex-direction:column;justify-content:center}
.choices{display:flex;flex-direction:column;gap:18px;width:100%}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
text-decoration:none;color:inherit;border-radius:16px;padding:34px 28px;gap:6px;
transition:transform .18s,background .18s,border-color .18s,box-shadow .18s}
.ch-title{font-family:Didot,"Hoefler Text",Georgia,serif;font-size:clamp(26px,3.4vw,34px);line-height:1.1}
.ch-sub{font-size:16px;font-style:italic;opacity:.66}
.ch-note{font-size:16px;font-style:italic;opacity:.8;margin-top:2px}
.choices[data-n="1"] .choice{min-height:300px}
.choices[data-n="2"] .choice{min-height:190px}
.choices[data-n="3"] .choice{min-height:140px}
.choices[data-n="4"] .choice{min-height:120px}
.choice .redact-inline{height:.62em;border-radius:4px}
/* cartões + bordas/listas por modo */
body[data-modo="a"] .choice,body[data-modo="a"] .secs .sec{background:rgba(16,18,24,.46);border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);box-shadow:0 24px 60px -34px rgba(0,0,0,.7)}
body[data-modo="a"][data-surface="light"] .choice,body[data-modo="a"][data-surface="light"] .secs .sec{background:rgba(12,14,20,.62)}
body[data-modo="a"] .choice:hover,body[data-modo="a"] .secs .sec:hover{background:rgba(30,34,46,.62);border-color:rgba(255,255,255,.34);transform:translateY(-3px)}
body[data-modo="a"] .posts li{border-color:rgba(255,255,255,.12)}
body[data-modo="b"] .choice,body[data-modo="b"] .secs .sec{background:#fffdf8;border:1px solid #e3d9c4;box-shadow:0 10px 30px -20px rgba(60,40,10,.45)}
body[data-modo="b"] .choice:hover,body[data-modo="b"] .secs .sec:hover{border-color:#c9bb9c;transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(60,40,10,.5)}
body[data-modo="b"] .posts li{border-color:#e0d6c1}
body[data-modo="c"] .choice,body[data-modo="c"] .secs .sec{background:#1c1f27;border:1px solid #2c313b;box-shadow:0 16px 40px -26px rgba(0,0,0,.8)}
body[data-modo="c"] .choice:hover,body[data-modo="c"] .secs .sec:hover{background:#232732;border-color:#3c424f;transform:translateY(-3px)}
body[data-modo="c"] .posts li{border-color:#2a2e37}
/* ===== alternador de modo ===== */
.switch{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;gap:4px;padding:5px;border-radius:999px;
background:rgba(20,22,28,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.switch button{font:inherit;font-size:15px;border:0;cursor:pointer;padding:8px 15px;border-radius:999px;
background:transparent;color:#d7d2c7;transition:.18s;white-space:nowrap}
.switch button.on{background:#f4efe6;color:#1a1714;font-weight:600}
/* controle de tamanho da fonte (A- / A+) */
.fontctl{position:fixed;left:18px;bottom:18px;z-index:20;display:flex;gap:4px;padding:5px;border-radius:999px;
background:rgba(20,22,28,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.fontctl button{font:inherit;font-size:16px;line-height:1;border:0;cursor:pointer;width:38px;height:34px;border-radius:999px;
background:transparent;color:#d7d2c7;transition:.18s;font-family:Georgia,serif}
.fontctl button:hover{background:rgba(255,255,255,.12);color:#fff}
.fontctl button[data-fz="+"]{font-size:20px}
@media(max-width:680px){
.secs{grid-template-columns:1fr}
body[data-modo="a"] .doc{padding:30px 22px}
nav a{margin-left:14px;font-size:16px}
.switch button{padding:8px 12px;font-size:15px}
}