/* Bíblia em Relevo: estilo comum do site (blocos 2D, pergaminho, nanquim e vinho do manto de Jesus) */
@font-face { font-family: "Inter"; src: url("/fontes/Inter.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fontes/Fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --perg: #F4EAE1; --perg-2: #E9DBCB; --perg-3: #FAF3EA;
  --nanq: #1A232A; --vinho: #8E2F2B; --vinho-e: #6E2320; --zimb: #3B5848;
  --ceu: #86B9E0; --sombra: rgba(26, 35, 42, .18);
}
* { box-sizing: border-box; }
html { background: var(--perg); overflow-x: hidden; }
body {
  margin: 0; color: var(--nanq); font: 400 17px/1.55 "Inter", system-ui, sans-serif;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
  background: var(--perg);
}
.miolo { max-width: 520px; margin: 0 auto; }
h1, h2, h3 { font-family: "Inter", sans-serif; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(30px, 8vw, 40px); }
h2 { font-size: 26px; }
.vinho { color: var(--vinho); }
.ref { font-family: "Fraunces", serif; font-weight: 700; color: var(--vinho); font-variant-numeric: lining-nums; }
p { margin: 0; }

/* bloco: frente chapada com o lado escuro e a sombra no chão, como os personagens */
.bloco {
  position: relative; display: block; background: var(--c, #fff); color: var(--t, var(--nanq));
  border: 0; border-radius: 0; text-decoration: none; font: 800 18px/1.25 "Inter", sans-serif;
  padding: 18px 20px; margin: 0 8px 8px 0; overflow-wrap: anywhere;
  box-shadow: 6px 6px 0 var(--lado, #d8c7b4), 12px 12px 0 var(--sombra);
}
.bloco.primario { --lado: var(--vinho-e); }
a.bloco:active, button.bloco:active { transform: translate(3px, 3px); box-shadow: 7px 7px 0 var(--sombra); }
.bloco.primario { --c: var(--vinho); --t: #fff; }
.bloco.claro { --c: #fff; }
.bloco small { display: block; font-weight: 500; font-size: 14px; opacity: .8; margin-top: 4px; }
button.bloco { width: calc(100% - 10px); text-align: left; cursor: pointer; }
.pilha { display: grid; gap: 14px; }
.nota { font-size: 13px; opacity: .7; }
:focus-visible { outline: 3px solid var(--zimb); outline-offset: 4px; }