@font-face{font-family:"Stardos";src:url(../fonts/StardosStencil-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/CourierPrime-Regular.ttf);font-display:swap}
@font-face{font-family:"Gelasio";src:url(../fonts/Gelasio.ttf);font-weight:400 700;font-display:swap}
@font-face{font-family:"Gelasio";src:url(../fonts/Gelasio-Italic.ttf);font-style:italic;font-weight:400 700;font-display:swap}
:root{--fundo:#4a4a45;--tinta:#f7f5ef;--cinza:#9d9d96;--escuro:#3a3a36}
*{box-sizing:border-box}
html{background:var(--fundo);color:var(--tinta);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Gelasio,Georgia,serif;font-size:1.05rem;line-height:1.55;min-height:100vh;min-height:100dvh}
a{color:inherit}
.stencil{font-family:Stardos,"Stencil",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.maquina{font-family:"Courier Prime","Courier New",monospace;letter-spacing:.06em}
.pagina{max-width:42rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
header.capa{text-align:center;padding-top:1rem}
header.capa h1{font-size:clamp(2.6rem,11vw,5.2rem);margin:0 0 .6rem}
header.capa .autores{font-size:.95rem;color:#dedcd4;margin:0 0 2rem}
header.capa img.motivo{width:min(62%,320px);height:auto;display:block;margin:0 auto 1.6rem}
.frase{font-style:italic;font-size:1.15rem;text-align:center;max-width:34rem;margin:0 auto 2.6rem;color:#e9e7df}
section{margin:0 0 2.4rem}
section h2{font-size:1rem;letter-spacing:.14em;margin:0 0 .8rem;color:var(--cinza)}
p{margin:0 0 1rem}
.marcas{display:flex;justify-content:space-between;font-size:.95rem;color:#dedcd4;margin:2.2rem 0}
.botao{display:inline-block;border:2px solid var(--tinta);padding:.7rem 1.4rem;text-decoration:none;font-size:1.1rem}
.botao:hover{background:var(--tinta);color:var(--fundo)}
.atos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem;margin:1rem 0 0}
.atos a{border:2px solid var(--tinta);padding:1rem;text-align:center;text-decoration:none}
.atos a span{display:block;font-size:.8rem;margin-top:.4rem;color:#dedcd4}
figure{margin:1rem 0}figure img{width:100%;height:auto;display:block}figcaption{font-size:.85rem;color:var(--cinza);margin-top:.4rem}
footer{font-size:.85rem;color:var(--cinza);border-top:1px solid #6a6a64;padding-top:1.2rem;margin-top:3rem}
footer a{text-decoration:none}
/* páginas dos atos */
.ato{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:2rem 1.25rem;text-align:center}
.ato h1{font-size:clamp(2.4rem,12vw,4.5rem);margin:0 0 .4rem}
.ato .sub{color:#dedcd4;margin:0 0 2.2rem;font-size:1.05rem}
.ato img.motivo{width:min(55%,260px);height:auto;margin:0 0 2.4rem}
.tocar{width:6.2rem;height:6.2rem;border-radius:50%;border:2px solid var(--tinta);background:transparent;color:var(--tinta);cursor:pointer;display:grid;place-items:center;padding:0}
.tocar:hover{background:var(--tinta);color:var(--fundo)}
.tocar svg{width:2.6rem;height:2.6rem;fill:currentColor}
.barra{width:min(70%,320px);height:2px;background:#6a6a64;margin:1.6rem 0 0;position:relative}
.barra i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--tinta)}
.ato .tempo{font-size:.85rem;color:var(--cinza);margin-top:.8rem;min-height:1.2em}
.ato nav{margin-top:3rem;font-size:.85rem;color:var(--cinza)}
.ato nav a{text-decoration:none;margin:0 .5rem}
.ouvir .atos{max-width:28rem;margin:1rem auto 0}