/* Páginas de obra servidas do servidor: herdam a identidade do site. */
.obra-corpo{ background:var(--areia); color:var(--azul); }
/* O cabeçalho do site é fixo e mede 76 px: sem esta folga, as migalhas
   e o título passavam por baixo dele. */
.obra-pagina{ padding:clamp(7.5rem,6rem + 4vw,9.5rem) 0 clamp(3rem,6vw,6rem); }

.migalhas{ font-family:var(--corpo); font-size:.84rem; color:var(--cinza); margin-bottom:2rem; }
.migalhas a{ color:var(--cinza); text-decoration:none; }
.migalhas a:hover{ color:var(--laranja); }
.migalhas span[aria-current]{ color:var(--azul); font-weight:600; }

.obra-pagina h1{ font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); margin:.4rem 0 1.2rem; }
.obra-pagina h1 em{ color:var(--laranja); }
.obra-pagina__resumo{ max-width:62ch; font-size:1.06rem; line-height:1.7; color:var(--cinza-escuro); }

.obra-ficha{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--filete-cor,rgba(31,42,68,.16));
  border-block:1px solid rgba(31,42,68,.16); margin:2.4rem 0 3rem;
}
.obra-ficha > div{ background:var(--areia); padding:1rem 1.2rem; }
.obra-ficha dt{
  font-family:var(--corpo); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--laranja); margin-bottom:.35rem;
}
.obra-ficha dd{ margin:0; font-size:1rem; font-weight:500; }

.obra-album{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.6rem; }
.obra-media{ margin:0; }
.obra-media img, .obra-media video{
  width:100%; height:auto; display:block; background:var(--azul);
  border:1px solid rgba(31,42,68,.14);
}
.obra-media figcaption{
  margin-top:.6rem; font-size:.9rem; line-height:1.5; color:var(--cinza-escuro);
}
.obra-media figcaption small{ display:block; color:var(--cinza); font-size:.78rem; margin-top:.15rem; }
/* as páginas de álbum são largas: ocupam a linha toda */
.obra-media--video{ grid-column:span 1; }

.obra-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.8rem; margin:2.6rem 0 0; }
.obra-cartao{ text-decoration:none; color:inherit; display:block; border:1px solid rgba(31,42,68,.14); background:#fff; }
.obra-cartao img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.obra-cartao__texto{ padding:1.1rem 1.2rem 1.4rem; }
.obra-cartao__tipo{
  font-family:var(--corpo); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--laranja); display:block; margin-bottom:.4rem;
}
.obra-cartao strong{ font-family:var(--titulo); font-size:1.24rem; display:block; }
.obra-cartao__local{ color:var(--cinza); font-size:.92rem; }
.obra-cartao p{ margin:.7rem 0 0; font-size:.92rem; line-height:1.6; color:var(--cinza-escuro); }
.obra-cartao:hover{ border-color:var(--laranja); }

.obra-apelo{
  margin-top:clamp(3rem,6vw,5rem); padding:clamp(1.8rem,4vw,3rem);
  background:var(--azul); color:#fff;
}
.obra-apelo h2{ color:#fff; font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); margin:0 0 .8rem; }
.obra-apelo p{ color:rgba(255,255,255,.82); max-width:56ch; margin:0 0 1.6rem; }

.rodape-simples{ background:var(--azul); color:rgba(255,255,255,.68); padding:2.5rem 0; font-size:.9rem; }
.rodape-simples p{ margin:.3rem 0; }
.rodape-simples a{ color:#fff; }

.rodape-simples__autoria{ color:rgba(255,255,255,.42); font-size:.82rem; margin-top:.8rem !important; }
.rodape-simples__autoria strong{ color:rgba(255,255,255,.62); font-weight:600; }