/* artigo "Mineração e terras raras" (Paulo Lopes): o céu da capa como forro de igreja mineira, resplendor de altar
   atrás da capa, e a leitura em papel de gravura com ornatos dourados */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --ceu-1: #2f434a;
  --ceu-2: #4f676e;
  --ceu-3: #7f979b;
  --aurora: #e2b48f;
  --terra: #a8402d;
  --ouro: #b88a35;
  --ouro-claro: #f1d698;
  --creme: #f3e7d0;
  --papel: #f1e8d6;
  --papel-2: #f7f1e4;
  --tinta: #1f1c18;
  --tinta-2: #3d3832;
  --apagado: #75695a;
  --linha: rgba(31, 28, 24, .16);
  --gravura: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --versal: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --corpo: 'Spectral', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: clamp(1.2rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

html { background: var(--ceu-1); scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--corpo); font-size: clamp(1.12rem, 1rem + .4vw, 1.32rem); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* papel de gravura: grão bem leve sobre a página inteira */
body::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .22; mix-blend-mode: multiply; background: url(../assets/brand/noise.png); background-size: 240px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
::selection { background: var(--terra); color: var(--papel-2); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

.vinheta { display: block; width: 12rem; height: auto; }
.ornato { display: grid; place-items: center; padding: 1.4rem 0; background: var(--papel-2); color: var(--ouro); }
.ornato .vinheta { width: min(22rem, 70vw); }

/* ---------- barra de leitura e topo ---------- */
.progresso { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; }
.progresso span { display: block; height: 100%; background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); transform: scaleX(0); transform-origin: 0 50%; }
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.1rem var(--pad); color: var(--creme); transition: background .5s, transform .5s var(--ease); }
.topo.is-solido { background: rgba(47, 67, 74, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.topo.is-escondido { transform: translateY(-100%); }
.topo__volta, .topo__pdf { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-family: var(--mono); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; }
.topo__volta i, .topo__pdf i { font-style: normal; transition: translate .5s var(--ease); }
.topo__volta:hover i { translate: -4px 0; }
.topo__pdf { justify-self: end; }
.topo__pdf:hover i { translate: 0 3px; }
.topo__marca img { width: 44px; }

/* ---------- abertura: o céu da capa, nuvens e o resplendor ---------- */
.abre { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem);
  min-height: 100vh; padding: 8.5rem var(--pad) 6rem; color: var(--creme);
  background: radial-gradient(ellipse 55% 50% at 74% 52%, rgba(241, 214, 152, .28), transparent 70%),
              linear-gradient(180deg, var(--ceu-1) 0%, var(--ceu-2) 38%, var(--ceu-3) 74%, #b9a48f 90%, var(--aurora) 100%); }
.nuvem { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(243, 231, 208, .55), rgba(243, 231, 208, .18) 45%, transparent 70%); }
.nuvem--a { left: -8vw; top: 10%; width: 48vw; height: 22vh; animation: nuvem 70s linear infinite alternate; }
.nuvem--b { right: -10vw; bottom: 14%; width: 46vw; height: 20vh; opacity: .6; background: radial-gradient(ellipse at 50% 55%, rgba(242, 196, 160, .6), transparent 70%); animation: nuvem 95s linear infinite alternate-reverse; }
@keyframes nuvem { from { transform: translateX(0); } to { transform: translateX(8vw); } }
.abre__txt { position: relative; z-index: 2; }
.abre__lema { display: inline-flex; align-items: center; gap: .9rem; font-family: var(--gravura); font-size: clamp(1.25rem, 1rem + .7vw, 1.7rem); color: var(--ouro-claro); }
.abre__lema svg { width: 2rem; height: 2rem; flex: none; color: #d2ab5c; }
.abre__titulo { margin-top: 1.5rem; font-family: var(--versal); font-weight: 400; font-size: clamp(2.8rem, 5.8vw, 6.6rem); line-height: .98; letter-spacing: .035em; text-shadow: 0 2px 30px rgba(31, 46, 52, .45); }
.abre__titulo span { display: block; max-width: 30ch; margin-top: 1.3rem; font-family: var(--gravura); font-style: italic; font-size: clamp(1.3rem, 1.05rem + .8vw, 1.95rem); line-height: 1.2; letter-spacing: 0; color: #cdd6d4; }
.abre__autor { display: grid; justify-items: start; gap: .7rem; margin-top: 2rem; font-family: var(--versal); font-size: clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing: .18em; }
.abre__autor .vinheta { color: #d2ab5c; }
.abre__sub { max-width: 46ch; margin-top: 1.4rem; font-size: clamp(1.12rem, 1.35vw, 1.35rem); line-height: 1.55; color: rgba(243, 231, 208, .9); }
.abre__meta { margin-top: 1.4rem; font-style: italic; font-size: 1rem; color: #cdd6d4; }
.abre__acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.abre__capa { position: relative; z-index: 1; justify-self: center; width: min(100%, 430px); }
.abre__capa img { position: relative; z-index: 1; border-radius: 2px; transform: rotate(-2deg); transition: transform 1.2s var(--ease);
  box-shadow: 0 0 0 1px rgba(241, 214, 152, .65), 0 0 0 7px rgba(47, 67, 74, .35), 0 0 0 8px rgba(241, 214, 152, .4), 0 60px 90px -30px rgba(20, 28, 31, .85); }
.abre__capa:hover img { transform: rotate(0deg); }
.gloria { position: absolute; left: 50%; top: 48%; z-index: 0; width: 280%; aspect-ratio: 1; margin: -140% 0 0 -140%; transform-origin: 50% 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(241, 214, 152, .34) 0deg 1.1deg, transparent 1.1deg 6deg),
              repeating-conic-gradient(from 3deg, rgba(241, 214, 152, .16) 0deg .5deg, transparent .5deg 6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 9%, #000 15%, rgba(0, 0, 0, .55) 32%, transparent 52%); mask-image: radial-gradient(circle, transparent 9%, #000 15%, rgba(0, 0, 0, .55) 32%, transparent 52%);
  animation: gloria 160s linear infinite; }
.abre__capa::before { content: ''; position: absolute; left: 50%; top: 48%; z-index: 0; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 190, .55) 0%, rgba(241, 214, 152, .2) 30%, transparent 62%); }
@keyframes gloria { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.botao { display: inline-flex; align-items: center; gap: 1rem; padding: 1.05rem 1.8rem; border: 1px solid transparent; border-radius: 3rem; background: linear-gradient(180deg, var(--ouro-claro), #d2ab5c); color: var(--tinta); text-decoration: none; font-family: var(--corpo); font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; box-shadow: 0 10px 30px -12px rgba(31, 26, 21, .5), inset 0 1px 0 rgba(255, 255, 255, .5); transition: translate .6s var(--ease), box-shadow .4s, background .4s, color .4s; }
.botao i { font-style: normal; }
.botao:hover { translate: 0 -3px; box-shadow: 0 16px 40px -12px rgba(31, 26, 21, .6), 0 0 36px rgba(241, 214, 152, .45); }
.botao--linha { background: none; box-shadow: none; color: var(--creme); border-color: rgba(243, 231, 208, .5); }
.botao--linha:hover { background: var(--creme); color: var(--tinta); }
.fim .botao--linha { color: var(--tinta); border-color: rgba(31, 28, 24, .45); }
.fim .botao--linha:hover { background: var(--tinta); color: var(--papel-2); }

/* ---------- leitura ---------- */
.leitura { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 44rem); justify-content: center; gap: clamp(2rem, 6vw, 7rem); padding: 4rem var(--pad) 6rem; background: var(--papel); }
.sumario { position: sticky; top: 7rem; align-self: start; }
.sumario__t { font-family: var(--versal); font-size: 1.15rem; letter-spacing: .16em; color: var(--terra); }
.sumario ol { margin: 1.2rem 0 0; padding: 0; list-style: none; border-left: 1px solid rgba(184, 138, 53, .45); }
.sumario a { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; padding: .5rem 0 .5rem 1.1rem; text-decoration: none; font-size: 1.02rem; line-height: 1.25; color: var(--apagado); transition: color .3s; }
.sumario a span { font-family: var(--versal); font-size: .95rem; padding-top: .05rem; color: var(--ouro); }
.sumario a::after { content: ''; position: absolute; left: -4px; top: .95rem; width: 7px; height: 7px; rotate: 45deg; background: var(--papel); border: 1px solid rgba(184, 138, 53, .7); transition: background .3s, box-shadow .3s; }
.sumario a:hover { color: var(--tinta); }
.sumario a.is-ativo { color: var(--tinta); }
.sumario a.is-ativo::after { background: var(--ouro); box-shadow: 0 0 0 3px rgba(241, 214, 152, .6); }

.texto { min-width: 0; }
.texto section { padding-bottom: 2.4rem; }
.texto section + section { position: relative; padding-top: 3.6rem; }
/* entre as partes, um pequeno losango dourado com dois traços, como num livro antigo */
.texto section + section::before { content: ''; position: absolute; top: 0; left: 0; width: 8rem; height: 14px;
  background: linear-gradient(var(--ouro), var(--ouro)) 0 50% / 3.2rem 1px no-repeat, linear-gradient(var(--ouro), var(--ouro)) 100% 50% / 3.2rem 1px no-repeat,
              linear-gradient(45deg, transparent 41%, var(--ouro) 41% 59%, transparent 59%) 50% 50% / 10px 10px no-repeat; }
.texto section + section::after { content: ''; position: absolute; top: 2px; left: calc(4rem - 5px); width: 10px; height: 10px; rotate: 45deg; background: var(--ouro); }
.texto h2 { display: grid; gap: .5rem; margin: .6rem 0 1.7rem; font-family: var(--gravura); font-weight: 400; font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.12; }
.texto h2 b { font-family: var(--versal); font-weight: 400; font-size: 1.05rem; letter-spacing: .12em; color: var(--terra); }
.texto p { line-height: 1.7; color: var(--tinta); }
.texto p + p { margin-top: 1.1em; }
.capitular::first-letter { float: left; margin: .08em .12em 0 0; font-family: var(--gravura); font-size: 4.6em; line-height: .78; color: var(--terra); }
.olho { position: relative; margin: 2.8rem 0 !important; padding: 2rem 0 1.8rem; text-align: center; font-family: var(--gravura); font-style: italic; font-size: clamp(1.45rem, 2.3vw, 2.05rem) !important; line-height: 1.24 !important; color: var(--tinta) !important;
  border-top: 1px solid rgba(184, 138, 53, .5); border-bottom: 1px solid rgba(184, 138, 53, .5); }
.assinatura { margin-top: 2.4rem !important; text-align: right; font-family: var(--versal); font-size: 1.35rem; letter-spacing: .14em; }

/* ---------- fim ---------- */
.fim { display: grid; justify-items: center; gap: 2rem; padding: 5rem var(--pad) 5rem; text-align: center; background: var(--papel-2); }
.fim__capa { width: min(200px, 48vw); box-shadow: 0 30px 50px -24px rgba(31, 28, 24, .55); transform: rotate(-2deg); }
.fim__frase { max-width: 24ch; font-family: var(--gravura); font-weight: 400; font-size: clamp(1.8rem, 3.8vw, 3.3rem); line-height: 1.1; }
.fim__frase span { display: block; font-style: italic; color: var(--terra); }
.fim__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.fim__logo { width: 60px; margin-top: 1.5rem; filter: brightness(.3) sepia(1) saturate(1.4) hue-rotate(-10deg); }

.js .surge { opacity: 0; translate: 0 26px; transition: opacity 1s var(--ease), translate 1.2s var(--ease); }
.js .surge.is-visto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .surge { opacity: 1; translate: none; transition: none; } .gloria, .nuvem { animation: none; } }

@media (max-width: 1000px) {
  .leitura { grid-template-columns: minmax(0, 44rem); }
  .sumario { position: static; padding-bottom: 2rem; border-bottom: 1px solid var(--linha); }
}
@media (max-width: 800px) {
  .abre { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6.5rem var(--pad) 4rem; gap: 2.8rem; min-height: 0; }
  .abre__capa { order: -1; width: min(64vw, 290px); }
  .abre__txt { display: grid; justify-items: center; }
  .abre__titulo { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .abre__titulo span { margin-inline: auto; }
  .abre__autor { justify-items: center; }
  .abre__acoes { justify-content: center; }
  .abre__acoes .botao { flex: 1 1 auto; justify-content: center; }
  .topo__volta span { display: none; }
  .topo__volta i { font-size: 1.2rem; }
}

/* ---------- artes: tratamento neoclássico, contido. Nenhuma arte fica atrás do texto do artigo ---------- */
/* o forro barroco aparece só na abertura, quase dissolvido no céu */
.abre::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .3; mix-blend-mode: soft-light;
  background: url(../assets/artigos/subsolo/forro.webp) center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 40%, transparent 92%); mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 40%, transparent 92%); }

/* pranchas: como numa folha de catálogo, com filete duplo fino e legenda em itálico */
.prancha { margin: 3.4rem 0 3.6rem; }
.prancha__moldura { padding: 12px; background: var(--papel-2); outline: 1px solid rgba(184, 138, 53, .55); outline-offset: -5px; box-shadow: 0 0 0 1px rgba(31, 28, 24, .1), 0 28px 50px -34px rgba(31, 28, 24, .45); }
.prancha__moldura img { width: 100%; height: auto; filter: saturate(.92) contrast(.97); }
.prancha figcaption { display: grid; justify-items: center; gap: .3rem; max-width: 36rem; margin: 1.2rem auto 0; text-align: center; font-style: italic; font-size: .95rem; line-height: 1.45; color: var(--apagado); }
.prancha figcaption b { font-family: var(--versal); font-style: normal; font-weight: 400; font-size: 1rem; letter-spacing: .16em; color: var(--terra); }
/* em telas largas a prancha respira um pouco além da coluna, para a direita (o sumário fica à esquerda) */
@media (min-width: 1200px) { .prancha { margin-right: -7rem; } }
.js .prancha { opacity: 0; translate: 0 30px; transition: opacity 1.4s var(--ease), translate 1.6s var(--ease); }
.js .prancha.is-visto { opacity: 1; translate: 0 0; }

/* o ornato rococó vira marca d'água fina nas margens, longe das linhas de texto */
.leitura { position: relative; overflow: hidden; }
.margem { position: absolute; width: 64px; height: auto; opacity: .38; pointer-events: none; display: none; }
.margem--a { right: 2.4vw; top: 14rem; }
.margem--b { right: 2.4vw; top: 52%; transform: scaleY(-1); }
@media (min-width: 1380px) { .margem { display: block; } }

/* Ouro Preto ao amanhecer abre o fim, dissolvendo no papel */
.fim { padding-top: 0; }
/* a gravura entra pelo céu (que se dissolve no papel) e termina num filete dourado reto, sem névoa cinza */
.fim__panorama { width: calc(100% + 2 * var(--pad)); max-width: none; margin: 0 calc(-1 * var(--pad)) 1.2rem; height: clamp(170px, 24vw, 360px); object-fit: cover; object-position: 50% 58%; opacity: .82;
  border-bottom: 1px solid rgba(184, 138, 53, .7); box-shadow: 0 6px 0 -5px rgba(184, 138, 53, .45);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%); }
@media (prefers-reduced-motion: reduce) { .js .prancha { opacity: 1; translate: none; transition: none; } }

/* ---------- v3: as artes viram estampa no próprio papel, vindo das bordas e sumindo antes do texto ---------- */
.prancha { display: none; }
.leitura > .sumario, .leitura > .texto { position: relative; z-index: 1; }
.estampa { position: absolute; z-index: 0; height: auto; pointer-events: none; mix-blend-mode: multiply; opacity: .9; }
/* a igreja sobre o morro, impressa no canto esquerdo: a torre fica na margem, o morro se dissolve antes do texto */
.estampa--igreja { left: max(-26vw, -380px); top: 14%; width: min(80vw, 1200px);
  -webkit-mask-image: radial-gradient(ellipse 46% 64% at 50% 40%, #000 0%, rgba(0, 0, 0, .7) 34%, transparent 70%);
          mask-image: radial-gradient(ellipse 46% 64% at 50% 40%, #000 0%, rgba(0, 0, 0, .7) 34%, transparent 70%); }
/* a nave entra pelo canto direito, mais abaixo */
.estampa--nave { right: max(-22vw, -320px); top: 54%; width: min(70vw, 1100px);
  -webkit-mask-image: radial-gradient(ellipse 48% 66% at 62% 45%, #000 0%, rgba(0, 0, 0, .65) 34%, transparent 70%);
          mask-image: radial-gradient(ellipse 48% 66% at 62% 45%, #000 0%, rgba(0, 0, 0, .65) 34%, transparent 70%); }
/* o sumário passa por cima da igreja: ganha um véu de papel atrás das linhas */
.sumario { background: radial-gradient(ellipse 80% 90% at 40% 50%, rgba(241, 232, 214, .9), rgba(241, 232, 214, .6) 60%, transparent 100%); padding: 1rem 1rem 1rem 0; }
@media (max-width: 1000px) {
  .estampa { opacity: .3; }
  .estampa--igreja { left: -40vw; width: 180vw; top: 8%; }
  .estampa--nave { right: -40vw; width: 180vw; top: 60%; }
}

/* ---------- v4: artes recortadas de verdade (fundo removido, bordas em aquarela), estampadas no papel ---------- */
.estampa, .margem { display: none; }
.orn { position: absolute; z-index: 0; height: auto; pointer-events: none; mix-blend-mode: multiply; }
/* o céu do forro, sem a moldura, abre a leitura bem de leve */
.orn--ceu { left: 50%; top: -3rem; width: min(120vw, 1900px); translate: -50% 0; opacity: .5; }
/* a igreja no morro, pousada na margem direita */
.orn--morro { right: max(-7vw, -110px); top: 9%; width: min(30vw, 460px); opacity: .95; }
/* o bloco geológico com a sonda, na margem esquerda */
.orn--bloco { left: 1.2vw; top: 31%; width: min(12vw, 180px); opacity: .95; }
/* o corte do morro de Ouro Preto, entrando pela direita */
.orn--corte { right: max(-12vw, -180px); top: 47%; width: min(36vw, 560px); opacity: .9; }
/* o retábulo com a glória, na margem esquerda, mais abaixo */
.orn--altar { left: max(-3vw, -40px); top: 68%; width: min(19vw, 290px); opacity: .9; }
/* o panorama já vem com o céu dissolvido: sem máscara nem filete */
.fim__panorama { -webkit-mask-image: none; mask-image: none; border-bottom: 0; box-shadow: none; opacity: 1; mix-blend-mode: multiply; object-position: 50% 70%; }
@media (max-width: 1100px) {
  .orn--morro, .orn--bloco, .orn--corte, .orn--altar { display: none; }
  .orn--ceu { width: 220vw; opacity: .4; }
}
/* v4.1: nada de faixas com cor diferente nem cortes retos */
.ornato { background: transparent; }
.fim { background: var(--papel); }
.sumario { background: none; padding: 0; }
.leitura { overflow: visible; overflow-x: clip; }
.orn--ceu { top: .5rem; opacity: .26; }
.orn--morro { right: max(-10vw, -150px); top: 9%; width: min(27vw, 410px); }
.orn--corte { right: max(-17vw, -250px); top: 47%; width: min(33vw, 520px); }
.orn--bloco { left: 1.6vw; width: min(11vw, 170px); }
.fim__panorama { height: auto; object-fit: initial; margin-top: -4rem; }
/* v4.2: o corte do morro solto no meio da leitura, como gravura impressa na folha (sem quadro) */
.gravura-meio { margin: 1rem -9rem 1.5rem -5rem; pointer-events: none; }
.gravura-meio img { width: 100%; height: auto; mix-blend-mode: multiply; }
@media (max-width: 1000px) { .gravura-meio { margin: .5rem -2rem 1rem; } }
/* o céu do forro, sem a moldura, mora na abertura */
.abre::before { background-image: url(../assets/artigos/subsolo/orn-ceu.webp?v=3); opacity: .45; mix-blend-mode: soft-light; }
.orn--altar { width: min(22vw, 330px); left: max(-2vw, -30px); }

/* ---------- v5: as gravuras ocupam a folha inteira, atrás do texto, bem claras (o texto continua com contraste alto) ---------- */
.orn, .gravura-meio { display: none; }
.leitura { position: relative; isolation: isolate; overflow-x: clip; }
.fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fd { position: absolute; height: auto; max-width: none; mix-blend-mode: multiply; opacity: .34; }
/* igreja no morro: grande, ocupando o alto da leitura, deslocada à direita */
.fd--morro { top: 1%; right: -6vw; width: min(78vw, 1250px); }
/* bloco geológico: alto e largo na esquerda, como uma prancha impressa por trás do texto */
.fd--bloco { top: 21%; left: -4vw; width: min(52vw, 820px); opacity: .28; }
/* corte do morro com a glória: atravessa a folha de lado a lado, no meio do artigo */
.fd--corte { top: 44%; left: 50%; margin-left: max(-50vw, -900px); width: min(100vw, 1800px); opacity: .32; }
/* retábulo: vertical, centrado sobre o fim do texto */
.fd--altar { top: 68%; right: 4vw; width: min(56vw, 860px); opacity: .3; }
.leitura > .sumario, .leitura > .texto { position: relative; z-index: 1; }
@media (max-width: 1000px) {
  .fd { opacity: .22; }
  .fd--morro { width: 160vw; right: -40vw; top: 2%; }
  .fd--bloco { width: 120vw; left: -30vw; }
  .fd--corte { width: 170vw; margin-left: -85vw; }
  .fd--altar { width: 140vw; right: -20vw; }
}

/* v6: o corte do morro volta a ficar solto no meio do texto */
.gravura-meio { display: block; }

/* v7: capa maior na abertura, texto um pouco menor */
.abre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.abre__capa { width: min(100%, 540px); }
.abre__titulo { font-size: clamp(2.5rem, 4.6vw, 5.2rem); }
.abre__titulo span { font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); }
.abre__sub { font-size: clamp(1.05rem, 1.15vw, 1.2rem); }
@media (max-width: 800px) { .abre { grid-template-columns: 1fr; } .abre__capa { width: min(74vw, 340px); } .abre__titulo { font-size: clamp(2.2rem, 9.6vw, 3rem); } }