/* Depois do Ex: one stylesheet for the site and the PDF (scripts/pdf.cjs). Paper and ink, a terracotta accent, dark at night. */
:root {
  --paper: #FBF7F2; --ink: #2B2522; --muted: #6F655E; --accent: #C2553D; --accent-ink: #FFFFFF;
  --line: #E8DFD5; --card: #FFFFFF; --shadow: 0 10px 30px rgba(43, 37, 34, .08); --err: #B42318;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not(.pdf-root) {
    --paper: #1C1917; --ink: #ECE6DF; --muted: #A89F97; --accent: #E07A5F; --line: #36302B; --card: #26221F;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35); --err: #F97066;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.7 var(--serif); }
a { color: var(--accent); }
img { max-width: 100%; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); font-family: var(--sans); }
.brand { display: flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 16px; }
.brand img { border-radius: 6px; }
.toc-btn { font: 600 14px var(--sans); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--ink); cursor: pointer; }
.toc { position: fixed; z-index: 6; top: 54px; left: 12px; right: 12px; max-width: 26rem; margin-left: auto; max-height: 72vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 16px 6px; box-shadow: var(--shadow); font: 15px/1.4 var(--sans); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.toc li .n { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.toc li.locked a { color: var(--muted); }
.toc li.locked .n { color: var(--muted); }
.toc-note, .toc-pdf { font-size: 13.5px; color: var(--muted); margin: 10px 0 8px; }

.page { max-width: 38rem; margin: 0 auto; padding: 28px 20px 40px; }
.kicker { font: 600 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
h1 { font: 700 2rem/1.2 var(--sans); letter-spacing: -.01em; margin: 0 0 12px; }
.byline { color: var(--muted); font-style: italic; margin: 0 0 30px; }
.chapter h2 { font: 700 1.28rem/1.3 var(--sans); margin: 2em 0 .6em; }
.chapter p { margin: 0 0 1.05em; }
.chapter ul, .chapter ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.chapter li { margin: .35em 0; }
.note { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; color: var(--muted); font-size: .92em; margin: 1.8em 0; }
.note p { margin: 0; }

.teaser { margin-top: 3.4em; border-top: 1px solid var(--line); padding-top: 2em; }
.teaser-title { font: 700 1.5rem/1.25 var(--sans); margin: 0 0 .8em; }
.fade { position: relative; max-height: 15.5em; overflow: hidden; }
.fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10em; background: linear-gradient(to bottom, transparent, var(--paper) 92%); }
.paywall { position: relative; margin-top: -.5em; padding: 24px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); font: 17px/1.55 var(--sans); }
.paywall h2 { font-size: 1.45rem; margin: 0 0 .5em; }
.incl { padding-left: 1.2em; margin: .8em 0 1.2em; }
.incl li { margin: .3em 0; }
.buy { display: block; width: 100%; border: 0; border-radius: 12px; padding: 15px 18px; background: var(--accent); color: var(--accent-ink);
  font: 700 17px var(--sans); cursor: pointer; }
.buy:disabled { opacity: .6; cursor: wait; }
.small { font-size: 14.5px; color: var(--muted); }
.paywall .small { margin: 14px 0 0; text-align: center; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.contents { margin-top: 16px; font-size: 15.5px; }
.contents summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.contents ol { margin: .6em 0 0; padding-left: 1.4em; }
.contents li.extra { list-style: none; margin-left: -1.4em; font-weight: 600; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 3em; font: 600 15px var(--sans); }
.pager a { color: var(--muted); }
.pager .next { background: var(--accent); color: var(--accent-ink); padding: 12px 16px; border-radius: 12px; text-decoration: none; text-align: right; }

.foot { max-width: 38rem; margin: 0 auto; padding: 22px 20px 48px; font: 13px/1.55 var(--sans); color: var(--muted); border-top: 1px solid var(--line); }
.foot p { margin: 0 0 6px; }
.foot a { color: var(--muted); }

dialog.sheet { border: 0; padding: 0; width: 100%; max-width: 30rem; max-height: 94vh; overflow: auto; margin: auto auto 0; border-radius: 20px 20px 0 0;
  background: var(--card); color: var(--ink); font: 16px/1.5 var(--sans); }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: 20px; } }
dialog::backdrop { background: rgba(20, 16, 14, .55); }
.step { position: relative; padding: 22px 20px 26px; }
.step h2 { font-size: 1.35rem; margin: 0 36px .4em 0; }
.step label { display: block; font-weight: 600; font-size: 15px; margin: 12px 0; }
.step input:not([type=checkbox]) { display: block; width: 100%; margin-top: 6px; padding: 12px; font: 17px var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.step input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.step .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; margin: 14px 0 16px; }
.step .check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.hint { font-size: 13.5px; color: var(--muted); margin: -4px 0 8px; }
.err { color: var(--err); font-size: 14.5px; margin: 0 0 12px; }
.x { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; }
.qr { display: block; margin: 14px auto; width: 220px; height: 220px; padding: 8px; background: #FFFFFF; border-radius: 12px; }
.copy { display: block; width: 100%; padding: 14px; border-radius: 12px; border: 2px solid var(--accent); background: transparent; color: var(--accent); font: 700 16px var(--sans); cursor: pointer; }
.wait { display: flex; gap: 10px; align-items: center; font-size: 15px; margin: 16px 0 6px; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.legal .chapter h2, .legal h2 { font-size: 1.1rem; }
.legal .chapter { font-size: 17px; }

/* the PDF */
body.pdf { font-size: 12pt; line-height: 1.6; background: #FFFFFF; color: #2B2522; }
body.pdf .cover { page-break-after: always; text-align: center; padding-top: 32vh; }
body.pdf .cover h1 { font-size: 34pt; }
body.pdf .cover .sub { font-style: italic; color: #6F655E; }
body.pdf .toc { position: static; box-shadow: none; border: 0; max-height: none; page-break-after: always; font-size: 12pt; }
body.pdf .toc ol { list-style: decimal; padding-left: 1.4em; }
body.pdf .chapter { page-break-before: always; }
body.pdf .chapter h1 { font-size: 22pt; }
body.pdf .colophon { page-break-before: always; text-align: center; color: #6F655E; font: 10pt var(--sans); padding-top: 40vh; }
@page { margin: 22mm 18mm; }