:root {
  --paper: #EFE5CF; --ink: #1A1612; --rubric: #9B2C1C;
  --eased: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; box-sizing: border-box; }
body {
  background: var(--ink); color: var(--paper);
  font-family: "Crimson Pro", serif; min-height: 100vh;
  display: flex; justify-content: center;
}
.sala { max-width: 560px; padding: 48px 20px 80px; text-align: center; }
.sobrescrito { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.3em; opacity: 0.6; }
h1 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(32px, 6vw, 44px); margin-top: 8px; }
.subtitulo { opacity: 0.6; font-size: 15px; margin-top: 4px; }

.lamina {
  position: relative; width: min(340px, 80vw); margin: 40px auto 24px;
  aspect-ratio: 720 / 1035; cursor: pointer;
  transform-style: preserve-3d; transition: transform 0.9s var(--eased);
}
.lamina.virada { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.frente { transform: rotateY(180deg); }
.legenda { max-width: 460px; margin: 0 auto; padding: 8px 4px; opacity: 0; transition: opacity 0.6s var(--eased) 0.35s; }
.lamina.virada + .legenda { opacity: 1; }
.legenda h2 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 24px; }
.jp { font-size: 13px; opacity: 0.7; margin-top: 2px; }
.qualidade { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--rubric); margin-top: 8px; letter-spacing: 0.15em; }
.leitura { font-size: 16px; line-height: 1.55; margin-top: 10px; opacity: 0.92; }

.volte { font-size: 13px; opacity: 0.5; }
.selo { margin-top: 48px; border-top: 1px solid rgba(239, 229, 207, 0.2); padding-top: 20px; font-size: 14px; line-height: 1.6; opacity: 0.85; }
.selo a { color: var(--paper); }
.selo p + p { margin-top: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-top: 32px; }
.grid img { width: 100%; display: block; opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .lamina { transition: none; }
  .lamina.virada { transform: none; }
  .lamina.virada .verso { display: none; }
}