/* Crônica de Bigorna: mesma família visual do mundo.html (pergaminho/expedição); aqui só o que é da página */

.hero-cronica {
  min-height: min(78vh, 760px);
  background:
    linear-gradient(180deg, rgba(20,17,15,.15) 0%, rgba(20,17,15,.65) 60%, var(--ink) 97%),
    url("/assets/totaladventure/lugares/ilha-da-vigilia.webp") center 40%/cover no-repeat;
}

/* ---------- eras: linha do tempo ---------- */
.eras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px,2vw,28px); position: relative; }
.eras::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--line-soft); }
.era { position: relative; padding-top: 34px; }
.era::before { content: ''; position: absolute; top: 3px; left: 0; width: 13px; height: 13px; border: 2px solid var(--rust-light); background: var(--ink); transform: rotate(45deg); }
.era--hoje::before { background: var(--rust-light); }
.era-nome { display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rust-light); margin-bottom: 12px; }
.era p { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; color: var(--text-soft); margin: 0 0 10px; text-wrap: pretty; }
.era .era-hoje { font-style: italic; font-size: 15px; color: var(--text-secondary); }
@media (max-width: 900px) {
  .eras { grid-template-columns: 1fr; gap: 26px; padding-left: 28px; }
  .eras::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .era { padding-top: 0; }
  .era::before { left: -28px; }
}

/* ---------- reino: ficha + forjas seladas ---------- */
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 auto clamp(40px,6vh,64px); }
.ficha > div { background: var(--panel); padding: 20px 22px; }
.ficha dt { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust-light); margin-bottom: 8px; }
.ficha dd { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--text-soft); }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }

.sub-titulo { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px,2vw,28px); color: var(--bone); margin: 0 0 10px; }
.descida { list-style: none; counter-reset: d; margin: 22px 0 22px; padding: 0; display: grid; gap: 8px; }
.descida li { counter-increment: d; display: grid; grid-template-columns: 52px minmax(0,190px) 1fr; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line-soft); }
/* cada degrau desce um pouco mais: descer é voltar no tempo */
.descida li:nth-child(2) { margin-left: 3%; } .descida li:nth-child(3) { margin-left: 6%; } .descida li:nth-child(4) { margin-left: 9%; }
.descida li::before { content: counter(d, upper-roman); font-family: var(--font-mono); font-weight: 700; color: var(--rust-light); }
.descida b { font-family: var(--font-serif); font-size: 19px; color: var(--bone); }
.descida span { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--text-secondary); }
@media (max-width: 640px) { .descida li { grid-template-columns: 34px 1fr; } .descida span { grid-column: 2; } .descida li:nth-child(n) { margin-left: 0; } }

/* ---------- abismo ---------- */
.band--abismo { background: radial-gradient(120% 80% at 50% 110%, #2a0f12 0%, var(--ink) 65%); }
.abismo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px,2vw,28px); }
.abismo li { border-left: 3px solid var(--rust); padding: 4px 0 4px 18px; }
.abismo b { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 22px; color: var(--bone); margin-bottom: 6px; }
.abismo span { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; color: var(--text-soft); }
@media (max-width: 760px) { .abismo { grid-template-columns: 1fr; } }

/* ---------- despertos: escada de títulos ---------- */
.titulos { list-style: none; margin: clamp(32px,5vh,52px) auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.titulos li { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--ink-on-parchment); padding: 7px 12px; border: 1px solid rgba(44,32,19,.35); }
.titulos li:not(:last-child)::after { content: '→'; margin-left: 12px; color: var(--rust); }
.titulos li:last-child { background: var(--rust); color: var(--parchment); border-color: var(--rust); }

/* ---------- vozes ---------- */
.vozes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px,1.6vw,22px); }
.voz { margin: 0; padding: 22px 22px 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.voz blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--bone); text-wrap: balance; }
.voz figcaption { display: grid; gap: 3px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.voz figcaption b { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust-light); }
.voz figcaption span { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-secondary); }

/* ---------- facções + glossário (no pergaminho) ---------- */
.duas-col { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(28px,5vw,80px); }
@media (max-width: 900px) { .duas-col { grid-template-columns: 1fr; } }
.lore-sub { font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--ink-on-parchment); margin: 18px 0 8px; }
.lore-par { font-family: var(--font-serif); font-size: 17px; line-height: 1.72; color: var(--ink-on-parchment); margin: 0 0 8px; text-wrap: pretty; }
.glossario { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; margin: 18px 0 0; }
.glossario dt { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: var(--rust); }
.glossario dd { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--ink-on-parchment); }
@media (max-width: 520px) { .glossario { grid-template-columns: 1fr; gap: 2px; } .glossario dd { margin-bottom: 10px; } }