@font-face{font-family:Alegreya;src:url(fonts/alegreya.woff2);font-weight:400 900;font-display:swap}
@font-face{font-family:Alegreya;src:url(fonts/alegreya-italic.woff2);font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --azul:#0e2347;--noite:#071431;--ouro:#d8a93c;--claro:#f6d98a;--parede:#f8f0dd;--tinta:#14203a;--bronze:#7f5210;
  --brilho:linear-gradient(105deg,#fbe9ab,#d8a93c 35%,#fff3c4 55%,#c8952f);
  --borda:max(1.5rem,calc(50% - 38rem));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem;scrollbar-color:var(--ouro) var(--noite)}
body{margin:0;font:400 1.1875rem/1.55 Alegreya,Georgia,serif;color:var(--parede);background:var(--azul)}
::selection{background:var(--ouro);color:var(--tinta)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
a:hover{color:var(--claro)}
:focus-visible{outline:3px solid var(--claro);outline-offset:3px}
p{margin:0 0 1em;max-width:68ch}
ul{margin:0;padding:0;list-style:none}
small{font-size:.8em}
.i{width:1.25em;height:1.25em;flex:none;color:var(--ouro)}

/* títulos: ouro metálico e o ornamento da cruz */
h1,h2,h3{font-style:italic;font-weight:700;line-height:1.08;margin:0 0 .7em;text-wrap:balance}
h1{font-size:clamp(3rem,5vw,4.75rem)}
h2{font-size:clamp(2.25rem,4.2vw,3.75rem)}
h1 b,h2 b,.azul>h2,.lema{font-weight:800;color:transparent;background:var(--brilho) text}
h1 b,h2 b{display:block}
h1::after,.cena h2::after,#paroquia>h2::after,.noticia h2::after{content:"";display:block;width:min(100%,26rem);height:1.5rem;margin-top:.5em;background:url(img/cruz.svg) center/auto 100% no-repeat,linear-gradient(90deg,transparent,var(--ouro) 12% 44%,transparent 44% 56%,var(--ouro) 56% 88%,transparent) center/100% 2px no-repeat}
.lema{display:block;font-style:italic;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2}

/* cabeçalho */
header{position:relative;z-index:2;display:flex;align-items:center;gap:1.5rem;padding:.5rem var(--borda);background:linear-gradient(var(--noite),var(--azul))}
header::after,.cena::after,footer::before{content:"";position:absolute;inset:auto 0 0;height:clamp(1.75rem,4.5vw,4rem);background:url(img/onda.svg) 0 0/100% 100%;pointer-events:none}
header::after{inset:100% 0 auto;height:clamp(1rem,2.2vw,2rem);transform:scaleY(-1)}
.marca{display:flex;align-items:center;gap:.75rem;margin-right:auto;font-size:1.5rem;font-weight:500;line-height:1.05;text-decoration:none;text-transform:uppercase}
.marca img{width:clamp(3.5rem,6vw,5.25rem)}
.marca span{white-space:nowrap;padding-left:.75rem;border-left:1px solid var(--ouro)}
.marca small{display:block;font-size:.62em;letter-spacing:.14em}
nav{inset:auto 1rem auto auto;top:4.5rem;margin:0;padding:.5rem 1.25rem;color:var(--parede);background:var(--noite);border:1px solid var(--ouro);border-radius:1rem}
nav a{display:block;padding:.5rem 0;text-decoration:none}
.abrir{order:2;padding:.5rem;font-size:1.3rem;line-height:0;background:none;border:1px solid var(--ouro);border-radius:.5rem}
.redes{display:none;gap:.75rem}
.redes .i{color:var(--parede)}
.redes a:hover .i{color:var(--claro)}

/* cena: foto dissolvendo no azul, como nas páginas do material */
.cena{position:relative;overflow:hidden;background:radial-gradient(60rem 40rem at 15% 40%,#16356b,var(--noite))}
.cena>img{width:100%;aspect-ratio:4/3;object-fit:cover;mask:linear-gradient(#000 75%,transparent)}
.cena>div{position:relative;padding:1rem var(--borda) clamp(5rem,9vw,8rem)}
.cena>div>:last-child{margin-bottom:0}

/* botão */
.botao{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.5rem;font-weight:700;color:var(--tinta);text-decoration:none;background:var(--brilho);border-radius:99rem;box-shadow:0 .4rem 1rem rgb(0 0 0/.35),inset 0 1px #fff9;transition:transform .2s,filter .2s}
.botao .i{color:var(--tinta)}
.botao:hover{color:var(--tinta);filter:brightness(1.1);transform:translateY(-2px)}

/* atalhos e pilares */
.azul{padding:clamp(2rem,4vw,3rem) var(--borda);background:var(--azul)}
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.atalhos>*{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;font-size:1.3rem;line-height:1.2;text-decoration:none;background:linear-gradient(135deg,#1a3566,var(--noite));border:1px solid var(--ouro);border-radius:1rem;box-shadow:0 .5rem 1.25rem rgb(0 0 0/.3);transition:transform .2s,border-color .2s}
.atalhos>a:hover{transform:translateY(-3px);border-color:var(--claro)}
.atalhos .i{width:2.5rem;height:2.5rem}
.atalhos small{display:block;margin-top:.25em;font-size:.8em;line-height:1.3}
.pilares{margin-top:2rem}
#paroquia{padding-block:clamp(4rem,7vw,6rem) 4rem}
#paroquia>p{font-size:1.3rem}

/* bloco principal em pergaminho */
.parede{padding:clamp(3rem,6vw,5rem) var(--borda);color:var(--tinta);background:radial-gradient(70rem 40rem at 50% 0,#fffdf6,var(--parede))}
.parede h2{font-size:clamp(1.9rem,2.8vw,2.5rem)}
.parede h2 b,.parede h3{color:var(--bronze);background:none}
.parede .lema{color:var(--tinta);background:none;font-weight:600;font-size:1.4rem}
.principal{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.5rem;align-items:center}
.escudo{margin:auto;filter:drop-shadow(0 .5rem .75rem rgb(60 40 0/.3))}
.moldura{width:100%;border:3px solid var(--ouro);border-radius:1.75rem;box-shadow:0 .75rem 1.5rem rgb(30 20 0/.3)}

.faixa{display:flex;flex-wrap:wrap;margin-top:2rem;padding:.75rem 1rem;color:var(--parede);line-height:1.2;background:linear-gradient(90deg,var(--noite),#132c5c,var(--noite));border:3px solid var(--ouro);border-radius:2.5rem;box-shadow:0 .75rem 1.5rem rgb(20 20 0/.3)}
.faixa>*{flex:1 1 13rem;display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;font-size:1.3rem}
.faixa .i{width:2.75rem;height:2.75rem}
.faixa p{margin:0}
.grande>*{flex-basis:20rem}
.grande b{display:block;font-size:clamp(1.5rem,2.3vw,2rem);font-style:italic;color:var(--claro)}
.missa{font-style:italic;font-size:1.6rem;line-height:1.15}
.selo{font-style:italic;font-weight:800;font-size:1.6rem;color:var(--tinta);background:var(--brilho);border-radius:.5rem 1.5rem;transform:skewX(-6deg)}
.selo .i{color:var(--tinta)}

/* padroeiro */
.padroeiro{position:relative;overflow:hidden;display:grid;gap:2rem;align-items:center;padding-block:0 3rem}
.padroeiro>img{width:100%;mask:linear-gradient(90deg,#000 75%,transparent)}
.padroeiro .botao{color:var(--parede);background:var(--azul)}
.padroeiro .botao .i{color:var(--claro)}
.arvore{display:block;width:100%;height:4rem;color:var(--ouro)}
.padroeiro .arvore{display:none;color:#2d5a3c}

/* notícia */
.noticia{display:grid;gap:2.5rem}
.data{display:flex;gap:.5rem;align-items:center}
.data .i{color:var(--bronze)}
.colunas{display:grid;gap:1.5rem}
.colunas img{width:100%;margin-bottom:1rem;border-radius:.5rem;box-shadow:0 .5rem 1rem rgb(0 0 0/.25)}
.painel{margin-bottom:1.5rem;padding:1.5rem;color:var(--parede);background:linear-gradient(160deg,#16356b,var(--noite));border-radius:1.25rem;box-shadow:0 .75rem 1.5rem rgb(20 20 0/.3)}
.painel h3{display:flex;gap:.5rem;align-items:center;font-size:1.75rem;color:var(--claro)}
.painel>img{width:100%;margin-bottom:1rem;border-radius:.75rem}
.painel>.medalha{width:9rem;margin:0 auto 1rem;border-radius:50%}

/* fatos da inauguração */
.fatos li{display:flex;gap:.75rem;padding-block:.6rem;font-size:1.05rem;line-height:1.3;border-bottom:1px solid #d8a93c55}
.fatos b{display:block;color:var(--claro)}
.cena .moldura{width:min(100%,20rem);margin-bottom:1.25rem}

/* rodapé */
footer{position:relative;display:grid;gap:2rem;padding:clamp(5rem,8vw,7rem) var(--borda) 2rem;color:var(--tinta);background:radial-gradient(70rem 40rem at 50% 100%,#fffdf6,var(--parede))}
footer::before{inset:0 0 auto;transform:scaleY(-1)}
footer h2{display:flex;gap:.6rem;align-items:center;margin-bottom:.6em;font-size:1.6rem;color:var(--bronze)}
footer .i{color:var(--bronze)}
footer address{margin-bottom:.75em;font-style:normal}
footer p{display:flex;gap:.5rem;align-items:center;margin-bottom:.4em}
footer p a{display:contents}
.fone{display:flex;gap:.5rem;align-items:center;font-size:1.6rem;font-style:italic;font-weight:800;text-decoration:none}
footer a:hover{color:var(--bronze)}
footer small{grid-column:1/-1;justify-self:center}
footer .arvore{grid-column:1/-1;color:var(--bronze)}

@media (min-width:52rem){
  .cena{display:flex;align-items:center;min-height:clamp(36rem,52vw,48rem)}
  .cena>img{position:absolute;inset:0 0 0 auto;width:62%;height:100%;aspect-ratio:auto;mask:linear-gradient(90deg,transparent,#000 30%)}
  .cena>div{width:calc(var(--borda) + 34rem);padding:5rem 0 6rem var(--borda)}
  .cena>.largo{width:calc(var(--borda) + 44rem)}
  .inv>img{inset:0 auto 0 0;mask:linear-gradient(270deg,transparent,#000 30%)}
  .inv>div{margin-left:auto;padding:5rem var(--borda) 6rem 0;width:calc(var(--borda) + 34rem)}
  .inv>.largo{width:calc(var(--borda) + 44rem)}
  .largo{background:linear-gradient(90deg,#071431e6 70%,transparent)}
  .inv>.largo{background:linear-gradient(270deg,#071431e6 70%,transparent)}
  .padroeiro{grid-template-columns:24rem 1fr 14rem;padding-bottom:0}
  .padroeiro .arvore{display:block;height:16rem}
  .heroi{min-height:40rem}
  .heroi>img{object-position:70% 0}
  .noticia{grid-template-columns:1fr 22rem}
  .colunas{grid-template-columns:1fr 1fr}
  footer{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:62rem){
  .abrir{display:none}
  .redes{display:flex}
  .principal{grid-template-columns:17rem 1.35fr 17rem 1fr}
  nav{display:flex;gap:1.25rem;position:static;padding:0;background:none;border:0;overflow:visible;white-space:nowrap}
  .faixa>*+*{border-left:1px solid #d8a93c88}
  .faixa>.selo{border-left:0;margin-left:1rem}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cena:not(.heroi)>img{animation:deriva linear both;animation-timeline:view()}
    @keyframes deriva{from{transform:scale(1.14)}to{transform:scale(1)}}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.botao,.atalhos>*{transition:none}}