:root { color-scheme:light; background:#f6eddd; color:#291c13; font: 100%/1.55 system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; }
main { max-width:66rem; margin:auto; padding:clamp(.85rem,3vw,2rem); }
header { border-bottom:2px solid #9e6039; padding-bottom:.8rem; margin-bottom:1rem; }
h1,h2 { font-family:Georgia,serif; line-height:1.12; }
h1 { font-size:clamp(2rem,5vw,3.4rem); margin:.25rem 0 .65rem; }
p { margin:.3rem 0; }
a { color:#70391e; }
a:focus-visible,summary:focus-visible { outline:3px solid #70391e; outline-offset:3px; }
nav { display:flex; flex-wrap:wrap; gap:.55rem; margin:1rem 0; }
nav a,.livros a { display:flex; align-items:center; min-height:44px; padding:.55rem .8rem; background:#fffaf0; border:1px solid #bfa17e; border-radius:.55rem; }
.quadros,.livros { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
figure { margin:0; border:1px solid #bfa17e; border-radius:.65rem; background:#fffaf0; overflow:hidden; }
.painel { position:relative; overflow:hidden; background:#eee1cb; }
.painel img { position:absolute; max-width:none; }
figcaption { padding:.85rem 1rem 1rem; font-size:1.2rem; }
small { color:#70391e; font-size:.85rem; font-weight:600; }
aside,details { margin:1.2rem 0; padding:1rem; background:#fffaf0; border-radius:.55rem; }
summary { cursor:pointer; min-height:44px; display:list-item; padding:.55rem 0; font-weight:600; }
footer { margin-top:1.2rem; border-top:1px solid #bfa17e; padding-top:.7rem; }
@media(max-width:42rem) { .quadros,.livros { grid-template-columns:minmax(0,1fr); } }