/* Eryndor: livro de registro de Alvorada. Ver DIRECAO.md */
:root{
  --perg:#e8dcc0; --perg2:#dccfae; --tinta:#2a2018; --tinta-suave:#5a4a3a;
  --lacre:#8a2d25; --ardosia:#2f4b6a; --terra:#1b1510; --papel-escuro:#2a211a; --ouro:#a98532;
  --titulo:"IM Fell English","Iowan Old Style",Georgia,serif;
  --texto:"Alegreya",Georgia,"Times New Roman",serif;
  --ruido:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1rem}
body{margin:0;background:var(--perg);background-image:var(--ruido);color:var(--tinta);font-family:var(--texto);font-size:1.15rem;line-height:1.55;display:grid;grid-template-columns:230px minmax(0,1fr)}
img{max-width:100%;height:auto;display:block}
a{color:var(--lacre);text-underline-offset:3px}
a:hover{color:var(--ardosia)}
:focus-visible{outline:3px solid var(--ardosia);outline-offset:3px}
.pular{position:absolute;left:-999px;top:0;background:var(--tinta);color:var(--perg);padding:.6rem 1rem;z-index:50}
.pular:focus{left:0}

/* ---------- índice ---------- */
.indice{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;padding:1.4rem 1rem 1rem 1.4rem;background:var(--terra);background-image:var(--ruido);color:var(--perg);border-right:6px double var(--ouro);display:flex;flex-direction:column}
.marca{display:flex;align-items:center;gap:.6rem;color:var(--perg);text-decoration:none;font-family:var(--titulo);font-size:1.9rem;margin-bottom:1.6rem}
.marca:hover{color:#fff}
.indice ol{list-style:none;margin:0;padding:0}
.indice li a{display:block;color:#d7c8a6;text-decoration:none;font-size:1.02rem;padding:.28rem 0 .28rem .7rem;border-left:3px solid transparent;line-height:1.25}
.indice li a i{font-family:var(--titulo);font-style:normal;color:var(--ouro);display:inline-block;width:2.1em}
.indice li a:hover{color:#fff;border-left-color:var(--ouro)}
.indice li a[aria-current="true"]{color:#fff;border-left-color:var(--lacre);background:rgba(138,45,37,.28)}
.rodape-indice{margin-top:auto;font-size:.9rem;color:#a99a7c;font-style:italic;padding-top:1rem}

/* ---------- estrutura ---------- */
main{min-width:0}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.08;margin:0}
.rotulo{font-family:"IM Fell English SC",var(--titulo);letter-spacing:.08em;color:var(--lacre);margin:0 0 .6rem;font-size:1.05rem}
.folha{padding:4.5rem clamp(1.2rem,5vw,4.5rem);border-top:1px solid rgba(42,32,24,.35);position:relative}
.folha>*{max-width:1040px}
.folha h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:1.6rem;display:flex;align-items:baseline;gap:.9rem}
.num{font-size:.55em;color:var(--lacre);border:1.5px solid var(--lacre);border-radius:999px;min-width:2.1em;padding:0 .55em;height:2.1em;display:inline-flex;align-items:center;justify-content:center;flex:none;transform:translateY(-.12em)}
.escura{background:var(--papel-escuro);background-image:var(--ruido);color:#eadfc4;border-top:none}
.escura a{color:#e9b0a6}
.escura .num{color:#e9b0a6;border-color:#e9b0a6}
.escura .abre{color:#fff}
.papel2{background-color:var(--perg2)}
.abre{font-size:1.38rem;line-height:1.4;font-family:var(--titulo);font-style:italic;margin-top:0;max-width:34em}
.texto p{max-width:62ch}
.duas{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:2.6rem;align-items:start}
.margem{border-left:2px solid var(--lacre);padding-left:1rem;font-size:1rem;color:var(--tinta-suave);margin-top:.4rem}
.escura .margem{color:#cdbf9f;border-color:#e9b0a6}
.margem p{margin:.2rem 0 .8rem}
.nota-pe{font-size:.98rem;font-style:italic;color:var(--tinta-suave);margin:.8rem 0 0}
.escura .nota-pe{color:#c9bb9b}
.aviso{margin-top:1.6rem;padding:.8rem 1rem;border:1.5px solid var(--lacre);border-left-width:8px;background:rgba(138,45,37,.07);max-width:62ch;font-size:1.02rem}
.escura .aviso{border-color:#e9b0a6;background:rgba(233,176,166,.08)}

/* ---------- topo ---------- */
.topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,520px);gap:3rem;align-items:center;padding:4rem clamp(1.2rem,5vw,4.5rem) 4.5rem;min-height:100vh}
.topo h1{font-size:clamp(4.4rem,11vw,9.6rem);letter-spacing:-.01em;margin:.1em 0 .15em;color:var(--tinta)}
.subtitulo{font-family:var(--titulo);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.25;max-width:22em;margin:0 0 1.4rem}
.topo-texto p{max-width:50ch}
.plataformas{font-family:"IM Fell English SC",var(--titulo);letter-spacing:.05em;color:var(--ardosia);margin-top:1.4rem}
.selo-estado{margin-top:1.4rem;border-top:1px solid var(--tinta);padding-top:.8rem}
.selo-estado span{display:inline-block;border:2px solid var(--lacre);color:var(--lacre);font-family:"IM Fell English SC",var(--titulo);letter-spacing:.15em;padding:.05rem .6rem;transform:rotate(-3deg);margin-right:.6rem;font-size:.95rem}
.carta{margin:0}
.carta-disco{position:relative;border-radius:50%;aspect-ratio:1;overflow:hidden;border:3px solid var(--tinta);outline:1px solid var(--tinta);outline-offset:8px;background:#6f8c5a}
.carta-disco img{width:100%;height:100%;object-fit:cover;filter:sepia(.3) saturate(.8) contrast(1.05)}
.carta-disco .rosa{position:absolute;inset:0;width:100%;height:100%}
.carta figcaption{margin:1.5rem 0 0 .5rem;font-size:.98rem;font-style:italic;color:var(--tinta-suave);max-width:38ch}

/* ---------- pranchas ---------- */
.prancha{margin:2rem 0;background:#f2e9d0;padding:.7rem .7rem .5rem;border:1px solid var(--tinta);outline:1px solid rgba(42,32,24,.4);outline-offset:4px;transform:rotate(-.4deg)}
.prancha:nth-of-type(even){transform:rotate(.35deg)}
.prancha img{width:100%;border:1px solid rgba(42,32,24,.6)}
.prancha figcaption{font-size:.92rem;line-height:1.35;color:var(--tinta-suave);padding:.5rem .2rem .1rem;font-style:italic}
.prancha figcaption b{font-style:normal;color:var(--lacre);font-family:"IM Fell English SC",var(--titulo);letter-spacing:.04em;font-weight:400}
.prancha.larga{max-width:640px}
.escura .prancha{background:#d9cba8;color:var(--tinta)}

/* ---------- alvorada ---------- */
.alvorada-grade{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:3rem;align-items:start}
.alvorada-grade .prancha.castelo{margin-top:0}
.bairros{margin:1.4rem 0 0;display:grid;grid-template-columns:9.5rem 1fr;gap:.5rem 1rem;max-width:62ch;border-top:1px solid #7b6c55;padding-top:1rem}
.bairros dt{font-family:var(--titulo);font-style:italic;color:#f0c98a}
.bairros dd{margin:0}
.par-pranchas{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.4rem;align-items:end;margin-top:1rem}
.par-pranchas .prancha.menor{margin-bottom:5rem}

/* ---------- povos ---------- */
.povo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2.4rem;align-items:center;margin:2.8rem 0;padding-top:2rem;border-top:1px dashed rgba(42,32,24,.45)}
.povo:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.povo:nth-of-type(3){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-left:-1.5rem}
.povo h3{font-size:2rem;margin-bottom:.5rem}
.povo h3::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.45em;background:var(--lacre);transform:rotate(45deg) translateY(-.05em)}
.povo.elfo h3::before{background:#4c7a45}.povo.anao h3::before{background:var(--ardosia)}.povo.ogro h3::before{background:#8a7a30}.povo.gigante h3::before{background:#6a6f78}
.povo .prancha{margin:0}
.bonus{list-style:none;padding:0;margin:.8rem 0;border-top:1px solid var(--tinta)}
.bonus li{padding:.25rem 0;border-bottom:1px solid rgba(42,32,24,.3)}

/* ---------- tabelas ---------- */
table.pauta{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:1.05rem;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2.1rem,rgba(42,32,24,.08) 2.1rem,rgba(42,32,24,.08) calc(2.1rem + 1px))}
table.pauta caption{text-align:left;font-family:var(--titulo);font-style:italic;font-size:1.3rem;padding-bottom:.4rem;color:var(--ardosia)}
table.pauta th,table.pauta td{padding:.38rem .6rem;border-bottom:1px solid rgba(42,32,24,.35);text-align:left;vertical-align:top}
table.pauta thead th{font-family:"IM Fell English SC",var(--titulo);font-weight:400;letter-spacing:.05em;border-bottom:2px solid var(--tinta);color:var(--lacre)}
table.pauta tbody th{font-weight:500}
table.pauta td:last-child{font-variant-numeric:tabular-nums}
.caixas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;align-items:start}
.caixas table td{text-align:right;white-space:nowrap;font-weight:700}
#classes table.pauta tbody th{color:var(--ardosia);font-family:var(--titulo);font-size:1.15rem}
.simples{padding-left:1.1rem}

/* ---------- clã ---------- */
.degraus{list-style:none;margin:0;padding:0;counter-reset:d}
.degraus li{margin-left:calc(var(--i,0)*1.4rem);padding:.7rem 1rem;border:1.5px solid #e9b0a6;margin-bottom:.9rem;display:grid;gap:.1rem;counter-increment:d;position:relative}
.degraus li:nth-child(1){--i:0}.degraus li:nth-child(2){--i:1}.degraus li:nth-child(3){--i:2}.degraus li:nth-child(4){--i:3}
.degraus b{font-family:var(--titulo);font-size:1.5rem;font-weight:400;color:#fff}
.degraus span{font-size:.92rem;color:#e9b0a6;font-family:"IM Fell English SC",var(--titulo);letter-spacing:.05em}
.degraus em{font-size:.98rem}

#cla .duas{grid-template-columns:1fr}
#cla .degraus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:end;margin-top:1.5rem;max-width:1040px}
#cla .degraus li{margin:0;border-left-width:0;min-height:calc(6.5rem + var(--i)*2.6rem);align-content:start}
#cla .degraus li:first-child{border-left-width:1.5px}
.noturna img{filter:brightness(1.9) contrast(.95)}
/* ---------- guerra ---------- */
.regras-guerra{list-style:none;padding:0;margin:1.2rem 0;counter-reset:r;max-width:62ch}
.regras-guerra li{padding:.7rem 0 .7rem 3.2rem;border-bottom:1px solid rgba(42,32,24,.35);position:relative;counter-increment:r}
.regras-guerra li::before{content:counter(r,upper-roman);position:absolute;left:0;top:.5rem;font-family:var(--titulo);color:var(--lacre);font-size:1.5rem}

/* ---------- feras ---------- */
.mosaico{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.4rem 2rem;align-items:start}
.mosaico .a{grid-column:1 / span 7;margin:0}
.mosaico .b{grid-column:8 / span 5;padding-top:1rem}
.mosaico .c{grid-column:2 / span 6;margin:1rem 0 0}
.mosaico .d{grid-column:8 / span 5;margin:3rem 0 0}

/* ---------- entrar ---------- */
.entrada{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:2rem 0;border:1.5px solid var(--tinta)}
.entrada>div{padding:1rem 1.2rem;border:.5px solid var(--tinta)}
.entrada dt{font-family:"IM Fell English SC",var(--titulo);color:var(--ardosia);letter-spacing:.05em}
.entrada dd{margin:.2rem 0 0}
.entrada small{color:var(--tinta-suave)}
.passos{counter-reset:p;list-style:none;padding:0;max-width:62ch}
.passos li{counter-increment:p;padding:.4rem 0 .4rem 2.6rem;position:relative}
.passos li::before{content:counter(p);position:absolute;left:0;top:.2rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--lacre);color:var(--perg);display:grid;place-items:center;font-family:var(--titulo)}
code{font-family:Consolas,"Courier New",monospace;background:rgba(42,32,24,.1);padding:.05em .35em;font-size:.9em}

/* ---------- leis ---------- */
.leis{max-width:66ch;padding-left:1.4rem}
.leis li{margin-bottom:.9rem;padding-left:.4rem}
.leis b{color:#fff;font-family:var(--titulo);font-weight:400;font-size:1.2rem}

/* ---------- galeria ---------- */
.grade-galeria{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;max-width:1040px}
.grade-galeria button{padding:0;border:1px solid var(--tinta);background:#f2e9d0;cursor:zoom-in;display:block;font:inherit}
.grade-galeria button:nth-child(1){grid-column:span 4}.grade-galeria button:nth-child(2){grid-column:span 2}
.grade-galeria button:nth-child(3){grid-column:span 2}.grade-galeria button:nth-child(4){grid-column:span 2}.grade-galeria button:nth-child(5){grid-column:span 2}
.grade-galeria button:nth-child(6){grid-column:span 6}
.grade-galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;padding:5px}
.grade-galeria button:nth-child(6) img{aspect-ratio:21/8}
dialog{border:3px double var(--ouro);background:var(--terra);color:var(--perg);padding:1rem;max-width:min(94vw,1200px);width:100%}
dialog::backdrop{background:rgba(10,7,4,.85)}
dialog img{width:100%;max-height:78vh;object-fit:contain}
dialog p{margin:.6rem 0 0;font-style:italic}
.fechar{background:var(--lacre);color:var(--perg);border:0;padding:.5rem 1rem;font:inherit;cursor:pointer;margin-bottom:.8rem}

/* ---------- rodapé ---------- */
.pe{padding:2.4rem clamp(1.2rem,5vw,4.5rem);background:var(--terra);color:#bfb190;font-size:.95rem;border-top:6px double var(--ouro)}
.pe p{margin:.2rem 0;max-width:70ch}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  body{display:block;font-size:1.08rem}
  .indice{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;align-items:center;padding:.5rem .8rem;border-right:0;border-bottom:4px double var(--ouro);overflow-x:auto;gap:1rem}
  .marca{margin:0;font-size:1.4rem;flex:none}.marca svg{width:26px;height:26px}
  .indice ol{display:flex;gap:.2rem;flex:none}
  .indice li a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:.3rem .5rem}
  .indice li a[aria-current="true"]{border-bottom-color:var(--lacre)}
  .indice li a i{display:none}
  .rodape-indice{display:none}
  html{scroll-padding-top:4rem}
  .topo{grid-template-columns:1fr;min-height:0;padding-top:2rem;gap:2.2rem}
  .carta{max-width:420px}
  .duas,.alvorada-grade,.povo,.povo:nth-of-type(even),.povo:nth-of-type(3),.par-pranchas,.caixas{grid-template-columns:1fr;margin-left:0}
  .povo.anao,.povo.gigante{display:flex;flex-direction:column-reverse}
  .mosaico{display:block}.mosaico>*{margin-bottom:1.4rem!important}
  .entrada{grid-template-columns:1fr}
  .grade-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade-galeria button:nth-child(n){grid-column:span 1}
  .grade-galeria button:nth-child(1),.grade-galeria button:nth-child(6){grid-column:span 2}
  .bairros{grid-template-columns:1fr;gap:.1rem}.bairros dd{margin-bottom:.6rem}
  .par-pranchas .prancha.menor{margin-bottom:1rem}
  #cla .degraus{grid-template-columns:1fr}#cla .degraus li{min-height:0;border-left-width:1.5px;margin-bottom:.6rem}
  table.pauta{font-size:.95rem}
  #classes{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (min-height:1600px){.topo{min-height:0}}

.par-pranchas.inverso{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;margin-top:3rem}
.pequeno{font-size:1.4rem;margin:.2rem 0 .5rem}
@media (max-width:980px){.par-pranchas.inverso{grid-template-columns:1fr}}

.participar{margin:2rem 0;padding:1.2rem 1.4rem;border:1.5px solid var(--lacre);border-left-width:8px;max-width:62ch;background:rgba(138,45,37,.06)}
.participar h3{font-size:1.7rem;margin-bottom:.4rem}
.botao{display:inline-block;background:var(--lacre);color:var(--perg);padding:.55rem 1.2rem;text-decoration:none;font-family:"IM Fell English SC",var(--titulo);letter-spacing:.06em;border:2px solid var(--tinta)}
.botao:hover{background:var(--tinta);color:var(--perg)}
.email-texto{margin-left:1rem;font-size:1rem;color:var(--tinta-suave)}

/* ---------- crônicas ---------- */
.topo-cronica{min-height:0;grid-template-columns:1fr;padding-bottom:3rem}
.topo-cronica h1{font-size:clamp(3.6rem,9vw,7.5rem)}
.topo-cronica .aviso{max-width:62ch}
.indice li.subnav a{padding-left:1.8rem;font-size:.95rem}
.cronica article{margin:2rem 0;max-width:68ch}
.cronica article.reino-cron{border-left:4px solid var(--lacre);padding-left:1.4rem;margin:3rem 0;max-width:72ch}
.escura .reino-cron{border-color:#e9b0a6}
.cronica h3{font-size:2.1rem;margin-bottom:.8rem}
.cronica p{max-width:68ch}
.cronica p strong{font-family:var(--titulo);font-weight:400;color:var(--lacre);font-size:1.08em}
.escura.cronica p strong{color:#e9b0a6}
.lenda{margin:1.2rem 0 0;padding:.8rem 1.2rem;border:1px dashed var(--tinta-suave);font-style:italic;background:rgba(42,32,24,.05)}
.lenda strong{font-style:normal}
.escura .lenda{border-color:#c9bb9b;background:rgba(255,255,255,.04)}
@media (min-height:1600px){.topo-cronica{min-height:0}}
.cronica .prancha{max-width:560px}
.pe a{color:#e9b0a6}
@media (max-width:700px){
  #classes table.pauta{background:none}
  #classes table.pauta thead{display:none}
  #classes table.pauta tbody,#classes table.pauta caption{display:block}
  #classes table.pauta tr{display:grid;grid-template-columns:repeat(3,1fr);gap:0 .5rem;border-bottom:1px solid rgba(42,32,24,.4);padding:.5rem 0}
  #classes table.pauta th,#classes table.pauta td{border:0;padding:.1rem .3rem}
  #classes table.pauta tbody th{grid-column:1/-1}
  #classes table.pauta tbody th:empty{display:none}
  #classes table.pauta td:nth-child(2){grid-column:1/-1;font-weight:700}
  #classes table.pauta td:nth-child(3)::before{content:"Nível ";color:var(--tinta-suave)}
  #classes table.pauta td:nth-child(4)::before{content:"Mana ";color:var(--tinta-suave)}
  #classes table.pauta td:nth-child(5)::before{content:"Recarga ";color:var(--tinta-suave)}
  #classes table.pauta td:nth-child(6){grid-column:1/-1;font-style:italic}
}