/* ============================================================
   quase tudo — folha de estilo
   direção: ensaio editorial impresso, papel escuro, luz quente
   ============================================================ */

:root{
  --tinta:        #0C0B0A;
  --papel:        #14110F;
  --papel-alto:   #1C1815;
  --creme:        #F0E7DA;
  --creme-fraco:  #C9BCAC;
  --sussurro:     #857767;
  --brasa:        #C4553B;
  --brasa-fraca:  #8E4632;

  --serif:  "Instrument Serif", "Times New Roman", serif;
  --texto:  "Newsreader", Georgia, serif;
  --micro:  "Archivo", "Helvetica Neue", sans-serif;

  --margem: clamp(1.5rem, 6vw, 7rem);
  --curva:  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--papel);
  color:var(--creme);
  font-family:var(--texto);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .3vw,1.1rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--brasa); color:var(--tinta) }

/* ---------- atmosfera ---------- */

.grain{
  position:fixed; inset:-50%;
  z-index:9999; pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:tremor 8s steps(6) infinite;
}
@keyframes tremor{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-2%,1%) }
  40%{ transform:translate(1%,-2%) }
  60%{ transform:translate(-1%,-1%) }
  80%{ transform:translate(2%,2%) }
}

.vinheta{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%,  rgba(196,85,59,.10), transparent 55%),
    radial-gradient(100% 80% at 50% 50%, transparent 40%, rgba(6,5,4,.75) 100%);
}

/* ---------- capa ---------- */

.capa{
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:6rem var(--margem) 4rem;
  text-align:center;
  position:relative;
}

.balao{
  display:inline-block; position:relative;
  margin:0 0 clamp(2.4rem,6vh,3.6rem);
  padding:.8rem 1.5rem .9rem;
  background:#221C18;
  border:1px solid rgba(196,85,59,.32);
  border-radius:22px 22px 22px 5px;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.95), 0 1px 0 rgba(240,231,218,.05) inset;
  font-family:var(--texto); font-style:italic; font-weight:300;
  font-size:clamp(1rem,.95rem + .35vw,1.16rem);
  line-height:1.4; color:var(--creme);
  opacity:0;
  animation:balaoEntra .9s var(--curva) .12s forwards,
            flutua 5.5s ease-in-out 1.1s infinite;
}
.balao::after{
  content:""; position:absolute; left:22px; bottom:-7px;
  width:13px; height:13px; background:#221C18;
  border-right:1px solid rgba(196,85,59,.32);
  border-bottom:1px solid rgba(196,85,59,.32);
  border-bottom-right-radius:2px;
  transform:rotate(45deg);
}
@keyframes balaoEntra{
  from{ opacity:0; transform:translateY(12px) scale(.92) }
  60% { opacity:1; transform:translateY(0)    scale(1.03) }
  to  { opacity:1; transform:translateY(0)    scale(1) }
}
@keyframes flutua{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-6px) }
}

.capa__kicker{
  font-family:var(--micro);
  font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sussurro);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.9rem;
  margin-bottom:clamp(2rem,5vh,3.5rem);
  opacity:0; animation:sobe 1.1s var(--curva) .3s forwards;
}
.risco{ display:block; width:clamp(28px,7vw,64px); height:1px; background:var(--brasa-fraca) }

.capa__titulo{
  font-family:var(--serif);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.03em;
}
.linha--menor{
  font-size:clamp(1.5rem,6.5vw,3.6rem);
  letter-spacing:.01em;
  color:var(--creme-fraco);
  margin-bottom:.12em;
}
.linha--maior{
  font-size:clamp(2.6rem,16vw,11rem);
  line-height:.9;
}
.capa__titulo .linha{ display:block; overflow:hidden; padding:0 .06em }
.capa__titulo .linha > *,
.capa__titulo .linha{ will-change:transform }
.capa__titulo em{
  font-style:italic;
  color:var(--brasa);
  display:inline-block;
}
.capa__titulo .linha:nth-child(1){ opacity:0; animation:revela 1.4s var(--curva) .45s forwards }
.capa__titulo .linha:nth-child(2){ opacity:0; animation:revela 1.4s var(--curva) .62s forwards }

.capa__dedicatoria{
  margin-top:clamp(2rem,5vh,3.2rem);
  font-family:var(--texto);
  font-style:italic; font-weight:200;
  font-size:clamp(1.05rem,1rem + .5vw,1.4rem);
  color:var(--creme-fraco);
  opacity:0; animation:sobe 1.2s var(--curva) .95s forwards;
}
.capa__dedicatoria [data-nome]{
  color:var(--creme); font-style:normal; font-family:var(--serif);
  font-size:1.15em; letter-spacing:.01em;
}
.capa__dedicatoria::before{
  content:""; display:block; width:30px; height:1px;
  background:var(--brasa-fraca); margin:0 auto 1.3rem;
}

@keyframes sobe   { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes revela { from{ opacity:0; transform:translateY(.9em) } to{ opacity:1; transform:none } }

/* ---------- galeria ---------- */

.galeria{
  padding:clamp(3rem,10vh,8rem) var(--margem) 0;
  display:flex; flex-direction:column;
  gap:clamp(6rem,16vh,13rem);
  max-width:1280px; margin-inline:auto;
}

.placa{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,6vw,5.5rem);
}
.placa:nth-child(even) .placa__foto{ order:2 }
.placa:nth-child(even) .placa__texto{ order:1; text-align:right }
.placa:nth-child(even) .placa__numero{ justify-content:flex-end }

/* respiro: a terceira e a última ficam centrais e maiores */
.placa--solo{
  grid-template-columns:minmax(0,1fr);
  justify-items:center; text-align:center;
  gap:clamp(1.8rem,4vw,3rem);
}
.placa--solo .placa__texto{ text-align:center !important; max-width:46ch }
.placa--solo .placa__numero{ justify-content:center !important }
.placa--solo .placa__moldura{ max-width:min(430px,78vw) }
/* nas placas centrais a foto vem sempre antes da frase */
.placa--solo .placa__foto { order:1 !important }
.placa--solo .placa__texto{ order:2 !important }

/* --- foto --- */

.placa__foto{ perspective:1400px }

.placa__moldura{
  position:relative;
  display:block;
  max-width:min(390px,80vw);
  margin-inline:auto;
  border-radius:2px;
  overflow:hidden;
  background:var(--papel-alto);
  aspect-ratio:9/16;
  box-shadow:
    0 1px 0 rgba(240,231,218,.07) inset,
    0 30px 60px -20px rgba(0,0,0,.85),
    0 8px 22px -12px rgba(0,0,0,.6);
  transform:rotate(var(--tilt,-1.4deg));
  transition:transform 1s var(--curva), box-shadow 1s var(--curva);
}
.placa:nth-child(even) .placa__moldura{ --tilt:1.4deg }

.placa__moldura::after{           /* luz de vidro por cima da foto */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(240,231,218,.10), transparent 42%, rgba(12,11,10,.42));
  mix-blend-mode:soft-light;
}

.placa__moldura img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.04) brightness(.96);
  transition:filter 1s var(--curva), transform 1.4s var(--curva);
}

.placa__moldura:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:
    0 1px 0 rgba(240,231,218,.1) inset,
    0 44px 80px -24px rgba(0,0,0,.9),
    0 0 0 1px rgba(196,85,59,.22);
}
.placa__moldura:hover img{ filter:saturate(1.02) contrast(1.02) brightness(1); transform:scale(1.035) }

/* estado de foto faltando */
.placa__vazio{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.5rem; text-align:center;
  border:1px dashed rgba(196,85,59,.4);
  font-family:var(--micro); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sussurro);
}
.placa__vazio strong{ color:var(--brasa); font-weight:500; letter-spacing:.08em }

/* --- texto --- */

.placa__numero{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--micro); font-size:.66rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--sussurro);
  margin-bottom:1.4rem;
}
.placa__numero b{ color:var(--brasa); font-weight:500 }
.placa__numero i{ display:block; width:26px; height:1px; background:var(--brasa-fraca); font-style:normal }

.placa__frase{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,1.15rem + 1.7vw,2.65rem);
  line-height:1.22; letter-spacing:-.015em;
  color:var(--creme);
  max-width:22ch;
}
.placa:nth-child(even) .placa__frase{ margin-left:auto }
.placa--solo .placa__frase{ margin-inline:auto }
.placa__frase em{ font-style:italic; color:var(--brasa) }

/* --- entrada por scroll --- */

.placa__foto, .placa__texto{
  opacity:0; transform:translateY(34px);
  transition:opacity 1.1s var(--curva), transform 1.1s var(--curva);
}
.placa__texto{ transition-delay:.16s }
.placa.visivel .placa__foto,
.placa.visivel .placa__texto{ opacity:1; transform:none }

/* ---------- carta ---------- */

.carta{
  padding:clamp(7rem,20vh,14rem) var(--margem);
  display:flex; justify-content:center;
  position:relative;
}
.carta::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(560px,70vw); height:1px;
  background:linear-gradient(90deg,transparent,var(--brasa-fraca),transparent);
}

.carta__interna{
  max-width:56ch; text-align:center;
  opacity:0; transform:translateY(28px);
  transition:opacity 1.3s var(--curva), transform 1.3s var(--curva);
}
.carta.visivel .carta__interna{ opacity:1; transform:none }

.carta__marca{
  font-family:var(--serif); font-size:2.4rem; color:var(--brasa);
  line-height:1; margin-bottom:2.5rem;
}

.carta__corpo p{
  font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
  line-height:1.85; color:var(--creme-fraco);
  margin-bottom:1.6rem;
  text-wrap:pretty;
}
.carta__corpo p:first-child{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);
  line-height:1.3; color:var(--creme); margin-bottom:2rem;
}
.carta__fecho{
  font-family:var(--serif) !important;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem) !important;
  line-height:1.35 !important;
  color:var(--creme) !important;
  margin-top:2.6rem !important;
}
.carta__fecho em{ font-style:italic; color:var(--brasa) }

.carta__assinatura{
  margin-top:3rem;
  font-family:var(--serif); font-style:italic;
  font-size:1.35rem; color:var(--creme-fraco);
}
.carta__assinatura::before{
  content:""; display:block; width:34px; height:1px;
  background:var(--brasa-fraca); margin:0 auto 1.4rem;
}

/* ---------- rodapé ---------- */

.rodape{
  padding:0 var(--margem) 4rem;
  text-align:center;
  font-family:var(--micro); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--sussurro);
}

/* ---------- responsivo ---------- */

@media (max-width:860px){
  .placa,
  .placa:nth-child(even){
    grid-template-columns:minmax(0,1fr);
    gap:2.2rem;
  }
  .placa:nth-child(even) .placa__foto{ order:1 }
  .placa:nth-child(even) .placa__texto{ order:2; text-align:left }
  .placa:nth-child(even) .placa__numero{ justify-content:flex-start }
  .placa:nth-child(even) .placa__frase{ margin-left:0 }
  .placa__moldura{ max-width:min(340px,82vw) }
  .placa__frase{ max-width:26ch }
  .placa--solo .placa__texto{ text-align:center !important }
}

@media (hover:none){
  .placa__moldura:hover{ transform:rotate(var(--tilt,-1.4deg)); box-shadow:0 30px 60px -20px rgba(0,0,0,.85) }
  .placa__moldura:hover img{ transform:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .balao,.capa__kicker,.capa__titulo .linha,.capa__dedicatoria,