/* artigo "A Terra Prometida Desacreditada" — as cores e a faixa grega do mosaico da capa */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --creme: #e9d2a7;
  --creme-2: #f3e6c9;
  --creme-3: #dcc08c;
  --tinta: #1f1a15;
  --tinta-2: #3a3027;
  --terracota: #8a411e;
  --ocre: #c98a3e;
  --ceu: #4a3f2c;
  --apagado: #6e5c47;
  --linha: rgba(31, 26, 21, .2);
  --caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --verse: 'Cormorant Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: clamp(1.2rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.19, 1, .22, 1);
  /* faixa grega (meandro) em vetor, para repetir sem emenda */
  --meandro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 42h42V6H10v28h24V14H18v12' fill='none' stroke='%231f1a15' stroke-width='5'/%3E%3C/svg%3E");
}

html { background: var(--creme); scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--verse); font-size: clamp(1.18rem, 1.05rem + .45vw, 1.42rem); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* textura de tesselas: grade finíssima, como as pedras do mosaico */
body::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(31, 26, 21, .05) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(31, 26, 21, .04) 0 1px, transparent 1px 9px); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
::selection { background: var(--terracota); color: var(--creme-2); }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; }

.meandro { height: 30px; background: var(--meandro) 0 0 / 30px 30px repeat-x, var(--creme-2); border-top: 4px solid var(--tinta); border-bottom: 4px solid var(--tinta); }

/* ---------- 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: var(--terracota); 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); transition: background .5s, transform .5s var(--ease); }
.topo.is-solido { background: rgba(233, 210, 167, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--linha); }
.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; color: var(--tinta); }
.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; filter: brightness(.35) sepia(1) saturate(2) hue-rotate(-10deg); }

/* ---------- abertura ---------- */
.abre { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); min-height: 100vh; padding: 8.5rem var(--pad) 6rem; overflow: hidden; isolation: isolate; }
/* a paisagem da capa, bem clara, ao fundo */
.abre::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(233, 210, 167, .55), rgba(233, 210, 167, .97) 55%), url(../assets/artigos/terra/cena.jpg) 0 60% / cover; }
.abre__capa { justify-self: center; width: min(100%, 440px); }
.abre__capa img { width: 100%; border-radius: 2px 6px 6px 2px; box-shadow: 0 50px 80px -30px rgba(31, 26, 21, .7), 0 0 0 1px rgba(31, 26, 21, .15); transform: rotate(-2.5deg); transition: transform 1.2s var(--ease); }
.abre__capa:hover img { transform: rotate(0deg); }
.abre__kicker { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .82rem; letter-spacing: .34em; text-transform: uppercase; color: var(--terracota); }
.abre__kicker::before { content: ''; width: 3rem; height: 1px; background: currentColor; }
.abre__titulo { margin-top: 1.6rem; font-family: var(--caps); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 6rem); line-height: 1.02; letter-spacing: .01em; color: var(--tinta); }
.abre__titulo > span { display: block; }
/* o risco em terracota sobre "Prometida", como na capa */
.riscada { position: relative; display: inline-block; }
.riscada::after { content: ''; position: absolute; left: -2%; right: -2%; top: 50%; height: .16em; margin-top: -.06em; border-radius: .1em; background: var(--terracota); transform: rotate(-1.2deg) scaleX(var(--risco, 1)); transform-origin: 0 50%; }
.abre__autor { margin-top: 2rem; font-family: var(--caps); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.6rem); letter-spacing: .14em; }
.abre__sub { max-width: 34ch; margin-top: 1rem; font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.75rem); line-height: 1.3; color: var(--tinta-2); }
.abre__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.8rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); }
.abre__meta span + span::before { content: '·'; margin-right: 1.6rem; color: var(--terracota); }
.abre__acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

.botao { display: inline-flex; align-items: center; gap: 1rem; padding: 1.1rem 1.9rem; border: 2px solid var(--tinta); background: var(--tinta); color: var(--creme-2); text-decoration: none; font-family: var(--mono); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; transition: translate .6s var(--ease), background .4s, color .4s; }
.botao i { font-style: normal; font-size: 1rem; }
.botao:hover { translate: 0 -3px; background: var(--terracota); border-color: var(--terracota); }
.botao--linha { background: none; color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--creme-2); border-color: var(--tinta); }

/* ---------- leitura ---------- */
.leitura { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 46rem); justify-content: center; gap: clamp(2rem, 6vw, 7rem); padding: 4.5rem var(--pad) 6rem; background: var(--creme-2); }
.sumario { position: sticky; top: 7rem; align-self: start; }
.sumario__t { font-family: var(--mono); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--terracota); }
.sumario ol { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: s; border-left: 1px solid var(--linha); }
.sumario li { counter-increment: s; }
.sumario a { position: relative; display: grid; grid-template-columns: 2rem 1fr; padding: .5rem 0 .5rem 1.2rem; text-decoration: none; font-size: 1.05rem; line-height: 1.25; color: var(--apagado); transition: color .3s; }
.sumario a::before { content: counter(s, upper-roman); font-family: var(--caps); font-size: .78rem; padding-top: .15rem; }
.sumario a::after { content: ''; position: absolute; left: -1px; top: .4rem; bottom: .4rem; width: 3px; background: var(--terracota); transform: scaleY(0); transition: transform .4s var(--ease); }
.sumario a:hover { color: var(--tinta); }
.sumario a.is-ativo { color: var(--tinta); font-weight: 600; }
.sumario a.is-ativo::after { transform: scaleY(1); }

.texto { min-width: 0; }
.texto section { padding-bottom: 2.4rem; }
/* entre as seções, um pedaço de faixa grega no lugar de uma linha */
.texto section + section { padding-top: 3rem; background: var(--meandro) 50% 0 / 22px 22px repeat-x; background-size: 22px 22px; background-repeat: repeat-x; background-position: 0 0; }
.texto section + section::before { content: ''; display: block; height: 0; }
.texto h2 { display: grid; gap: .5rem; margin: 1.2rem 0 1.8rem; font-family: var(--caps); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: .01em; }
.texto h2 b { font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--terracota); }
.texto p { line-height: 1.62; font-weight: 500; color: var(--tinta); }
.texto p + p { margin-top: 1.15em; }
.texto strong { font-weight: 700; }
.texto i { font-style: italic; }
.texto sup { font-family: var(--mono); font-size: .62em; line-height: 0; }
.texto sup a { text-decoration: none; color: var(--terracota); padding: 0 .1em; }
.capitular::first-letter { float: left; margin: .06em .14em 0 0; font-family: var(--caps); font-weight: 700; font-size: 4.4em; line-height: .8; color: var(--terracota); }

.fala { margin: 2rem 0; padding: .4rem 0 .4rem 1.8rem; border-left: 3px solid var(--terracota); }
.fala p { font-style: italic; font-size: 1.1em; line-height: 1.48; color: var(--tinta-2); }
.fala p + p { margin-top: .8em; }
.fala cite { display: block; margin-top: .9rem; font-family: var(--mono); font-style: normal; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--apagado); }
.fala--grande { margin: 2.8rem 0; padding: 2.4rem 1.6rem; border: 0; text-align: center; background: var(--creme); outline: 3px solid var(--tinta); outline-offset: -10px; box-shadow: inset 0 0 0 16px var(--creme), inset 0 0 0 18px var(--tinta); }
.fala--grande p { font-family: var(--caps); font-style: normal; font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; color: var(--tinta); }

/* o padrão que se repete: três passos */
.padrao { display: grid; gap: .8rem; margin: 2.2rem 0; padding: 0; list-style: none; counter-reset: p; }
.padrao li { counter-increment: p; display: grid; grid-template-columns: 3rem 1fr; align-items: center; padding: 1rem 1.2rem; background: var(--creme); border: 2px solid var(--tinta); font-weight: 600; font-size: 1.05em; }
.padrao li::before { content: counter(p, upper-roman); font-family: var(--caps); font-weight: 700; color: var(--terracota); }
.padrao li + li { position: relative; }

.destaque { margin: 2.6rem 0; padding: 2rem 0; border-top: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); font-family: var(--caps); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.9rem) !important; line-height: 1.3 !important; text-align: center; }
.destaque em { font-style: normal; color: var(--terracota); }

.notas { margin-top: 3rem; padding: 1.8rem 2rem; background: var(--creme); border: 2px solid var(--tinta); }
.notas h2 { margin: 0 0 1rem; font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--terracota); }
.notas ol { margin: 0; padding-left: 1.4rem; }
.notas li { margin-top: .7rem; font-size: .86em; line-height: 1.5; color: var(--tinta-2); }
.notas li:target { background: rgba(201, 138, 62, .2); }
.notas a { word-break: break-word; }

.assinatura { margin-top: 2.2rem !important; text-align: right; font-family: var(--caps); font-weight: 600; font-size: 1.3rem; letter-spacing: .12em; }

/* ---------- fim ---------- */
.fim { display: grid; justify-items: center; gap: 2rem; padding: 5.5rem var(--pad) 5rem; text-align: center; background: var(--creme); }
.fim__capa { width: min(220px, 52vw); box-shadow: 0 30px 50px -24px rgba(31, 26, 21, .6); transform: rotate(-2deg); }
.fim__frase { max-width: 22ch; font-family: var(--caps); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.12; }
.fim__frase em { font-style: normal; color: var(--terracota); }
.fim__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.fim__logo { width: 60px; margin-top: 1.5rem; filter: brightness(.35) sepia(1) saturate(2) 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; } }

@media (max-width: 1000px) {
  .leitura { grid-template-columns: minmax(0, 46rem); }
  .sumario { position: static; padding-bottom: 2rem; border-bottom: 1px solid var(--linha); }
}
@media (max-width: 800px) {
  .abre { grid-template-columns: 1fr; padding-top: 6.5rem; gap: 2.6rem; min-height: 0; }
  .abre::before { background: linear-gradient(180deg, rgba(233, 210, 167, .6), rgba(233, 210, 167, .97) 45%), url(../assets/artigos/terra/cena.jpg) 50% 0 / 220% auto no-repeat; }
  .abre__capa { width: min(68vw, 300px); }
  .abre__titulo { font-size: clamp(2.2rem, 10.5vw, 3.6rem); }
  .abre__acoes .botao { flex: 1 1 auto; justify-content: center; }
  .topo__volta span { display: none; }
  .topo__volta i { font-size: 1.2rem; }
  .fala { padding-left: 1.2rem; }
  .fala--grande { padding: 2rem 1.4rem; }
}

/* fotografias do mosaico, com crédito pequeno embaixo */
.foto { margin: 2.6rem 0; }
.foto img { width: 100%; border: 3px solid var(--tinta); outline: 1px solid var(--tinta); outline-offset: 5px; }
.foto figcaption { margin-top: 1rem; font-size: .82em; font-style: italic; line-height: 1.4; color: var(--tinta-2); }
.foto figcaption span { font-family: var(--mono); font-style: normal; font-size: .78em; letter-spacing: .08em; color: var(--apagado); }
.foto--larga { margin-left: -3rem; margin-right: -3rem; }
.fotos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 2.6rem 0; }
.fotos-par .foto { margin: 0; }
.fotos-par img { aspect-ratio: 5 / 4; object-fit: cover; }
@media (max-width: 1000px) { .foto--larga { margin-left: 0; margin-right: 0; } }
@media (max-width: 640px) { .fotos-par { grid-template-columns: 1fr; } }