:root{
  --noite:#10222B; --mar:#1A3440; --pedra:#8E8A80; --pedra-escura:#6F6B62;
  --sal:#ECE6DA; --apagado:#A7B2B3; --sodio:#E3A33B; --linha:#2C4652;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--noite);color:var(--sal);font-family:var(--serif);font-size:1.125rem;line-height:1.75}
a{color:var(--sodio)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sodio);outline-offset:3px}
.pular{position:absolute;left:-9999px;top:8px;background:var(--sal);color:var(--noite);padding:8px 12px;z-index:10}
.pular:focus{left:12px}

.topo{max-width:1040px;margin:auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--ui);font-size:.95rem}
.topo a{color:var(--sal);text-decoration:none}
.topo .nome{font-family:var(--serif);font-size:1.15rem;font-style:italic}
.topo nav{display:flex;gap:20px}
.topo nav a{opacity:.8}
.topo nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* Abertura: o poste de sódio sobre a mureta */
.abertura{position:relative;max-width:1040px;margin:auto;padding:72px 24px 56px}
.abertura::before{content:"";position:absolute;right:-200px;top:-260px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,163,59,.28) 0%,rgba(227,163,59,.08) 45%,transparent 70%);pointer-events:none}
.abertura h1{font-weight:500;font-size:clamp(3rem,9vw,6.5rem);line-height:.95;margin:0 0 26px;letter-spacing:-.01em;max-width:9ch}
.abertura p{max-width:52ch;margin:0 0 14px;font-size:1.2rem}
.ficcao{font-family:var(--ui);font-size:.95rem;color:var(--apagado);max-width:60ch;border-left:3px solid var(--sodio);padding-left:14px;margin-top:22px}

/* A mureta: faixa de gnaisse que atravessa a página */
.mureta{height:34px;background:
  repeating-linear-gradient(90deg,transparent 0 118px,rgba(0,0,0,.28) 118px 121px),
  linear-gradient(180deg,#A29D92 0%,var(--pedra) 40%,var(--pedra-escura) 100%);
  box-shadow:0 -1px 0 #BDB8AD inset,0 10px 24px rgba(0,0,0,.35)}

main{max-width:1040px;margin:auto;padding:0 24px 72px}
.livro{padding-top:56px}
.livro h2{font-weight:500;font-size:1.9rem;margin:0 0 6px}
.livro .desc{color:var(--apagado);margin:0 0 26px;font-family:var(--ui);font-size:.95rem}
.contos{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.contos li{border-bottom:1px solid var(--linha)}
.contos a{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:22px 4px;text-decoration:none;color:var(--sal)}
.contos a:hover .t{color:var(--sodio)}
.contos .n{font-size:1.4rem;color:var(--pedra)}
.contos .t{font-size:1.45rem;line-height:1.25;display:block}
.contos .r{display:block;color:var(--apagado);font-size:1rem;margin-top:4px;max-width:60ch}
.contos .m{font-family:var(--ui);font-size:.85rem;color:var(--apagado);white-space:nowrap}
.vazio{padding:32px 0;color:var(--apagado);max-width:58ch}

.convite{margin-top:64px;background:var(--mar);padding:32px;border-radius:4px}
.convite h2{font-weight:500;font-size:1.7rem;margin:0 0 8px;line-height:1.25}
.convite p{margin:0 0 18px;max-width:60ch;color:var(--sal)}
.botao{display:inline-block;font-family:var(--ui);font-weight:600;background:var(--sodio);color:var(--noite);text-decoration:none;padding:12px 20px;border-radius:4px}
.botao.linha{background:transparent;color:var(--sal);border:1px solid var(--sal)}

.sobre{margin-top:64px;max-width:64ch}
.sobre h2{font-weight:500;font-size:1.6rem}

/* Página do conto */
.conto{max-width:38em;margin:auto;padding:48px 24px 32px}
.conto .ref{font-family:var(--ui);font-size:.9rem;color:var(--apagado)}
.conto h1{font-weight:500;font-size:clamp(2.3rem,6vw,3.6rem);line-height:1.05;margin:10px 0 18px}
.conto .aviso{font-family:var(--ui);font-size:.9rem;color:var(--apagado);border-left:3px solid var(--sodio);padding-left:12px;margin-bottom:34px}
.conto .texto p{margin:0 0 1.15em}
.conto .texto p:first-child::first-letter{font-size:3.4em;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--sodio)}
.conto audio{width:100%;margin:0 0 30px}
.fim{text-align:center;color:var(--pedra);margin:40px 0;letter-spacing:.6em}
.fundo{background:var(--mar);padding:22px 24px;border-radius:4px;margin-top:8px;font-size:1rem}
.fundo strong{font-family:var(--ui)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.proximo{display:block;margin-top:44px;border-top:1px solid var(--linha);padding-top:18px;text-decoration:none;color:var(--sal)}
.proximo span{display:block;font-family:var(--ui);font-size:.85rem;color:var(--apagado)}
.proximo b{font-weight:500;font-size:1.4rem}

footer{border-top:1px solid var(--linha);font-family:var(--ui);font-size:.85rem;color:var(--apagado)}
footer .in{max-width:1040px;margin:auto;padding:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--sal)}

@media (max-width:640px){
  .contos a{grid-template-columns:2.2rem minmax(0,1fr)}
  .contos .m{grid-column:2}
  .abertura{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}