/* ============================================================
   ZINE — layout de fotolivro impresso (papel, montagem, versos)
   ------------------------------------------------------------
   Carregado APENAS em páginas com `layout: zine` (ver default.html).
   Todas as regras são escopadas em `.zine` / `body.zine-page` para
   não vazarem para o restante do site (Tailwind + estilos globais).
   ============================================================ */

body.zine-page {
  --z-paper: #eff0ed;
  --z-ink: #191c1a;
  --z-soft: #8c948e;
  --z-line: #dbded7;
  --z-mount: #fbfbf9;
  --z-green: #1e5a45;
  --z-halo: rgba(250, 250, 248, 0.82);
  --z-pad: clamp(1.4rem, 5vw, 3.5rem);

  /* altura do header do site (h-16 / md:h-20) */
  --z-header: 4rem;

  background-color: var(--z-paper);
  /* o zine rola dentro do próprio wrapper, como em `layout: serie` */
  overflow: hidden;
}

@media (min-width: 768px) {
  body.zine-page {
    --z-header: 5rem;
  }
}

/* O header do site herda o papel para não brigar com o fundo do zine */
body.zine-page #site-header {
  background-color: var(--z-paper);
  border-bottom: 1px solid var(--z-line);
}

.zine,
.zine *,
.zine *::before,
.zine *::after {
  box-sizing: border-box;
}

/* ---------- wrapper de slides ----------
   Mesma arquitetura do `layout: serie`: um painel fixo abaixo do header
   com snap vertical, para que cada spread ocupe a tela inteira. */

.zine {
  position: fixed;
  top: var(--z-header);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background-color: var(--z-paper);
  color: var(--z-ink);
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

.zine::-webkit-scrollbar {
  display: none;
}

/* Altura útil de um slide, usada para dimensionar a moldura pela altura */
.zine .spread,
.zine .turn,
.zine .final {
  scroll-snap-align: start;
  min-height: 100%;
}

.zine img {
  display: block;
  max-width: 100%;
}

/* ---------- tipografia ---------- */

.zine .mono {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--z-soft);
  line-height: 1.6;
}

.zine .mono .g {
  color: var(--z-green);
}

.zine .verso {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.3rem, 3.4vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--z-ink);
  text-wrap: balance;
  margin: 0;
}

.zine .verso em {
  font-style: normal;
  color: var(--z-green);
}

/* Halo de leitura quando o texto fica sobre a foto */
.zine .on .verso,
.zine .on .mono {
  text-shadow: 0 1px 0 var(--z-halo), 0 0 14px var(--z-halo), 0 0 26px var(--z-halo);
}

.zine .on .pre {
  text-shadow: 0 1px 0 var(--z-halo), 0 0 18px var(--z-halo);
}

/* ---------- lombada ---------- */

.zine .spine {
  position: fixed;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--z-soft);
  /* abaixo do header do site (z-40), acima do conteúdo */
  z-index: 30;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .zine .spine {
    display: none;
  }
}

/* ---------- moldura / montagem ---------- */

.zine .spread {
  padding: clamp(0.9rem, 2.4vh, 2rem) var(--z-pad);
  display: flex;
  justify-content: center;
  align-items: center;

  /* Altura consumida por tudo que não é a foto, dentro do slide.
     Medido no navegador: padding do slide + passe-partout, mais folga. */
  --z-chrome: clamp(3rem, 7vh, 4.6rem);
}

.zine .spread.col {
  flex-direction: column;
  /* legenda de uma linha abaixo da foto */
  --z-chrome: clamp(5.5rem, 12vh, 8rem);
}

/* verso abaixo da foto ocupa muito mais altura que uma legenda de uma linha */
.zine .stack.has-verso {
  --z-chrome: clamp(11rem, 24vh, 16rem);
}

/* Altura disponível para a foto dentro do slide */
.zine .art {
  position: relative;
  width: 100%;
  margin: 0;
  /* 12px de folga: o passe-partout e o arredondamento do `clamp` variam
     alguns pixels e, em telas baixas, isso bastava para o slide estourar. */
  --z-availh: calc(100svh - var(--z-header) - var(--z-chrome) - 12px);
  /* `--z-ar` (largura/altura da foto) vem inline do front matter.
     A moldura cresce até o limite de largura OU até caber na altura da tela,
     o que vier primeiro — é isso que dá o enquadramento de slide. */
  max-width: min(var(--z-wmax, 100%), calc(var(--z-availh) * var(--z-ar, 1)));
}

.zine .art.p {
  --z-wmax: clamp(24rem, 56vw, 60rem);
}

.zine .art.p.big {
  --z-wmax: clamp(24rem, 66vw, 68rem);
}

.zine .art.l {
  --z-wmax: clamp(24rem, 88vw, 100rem);
}

.zine .mount {
  background: var(--z-mount);
  border: 1px solid var(--z-line);
  padding: clamp(0.5rem, 1.3vw, 0.95rem);
  box-shadow: 0 34px 66px -44px rgba(24, 34, 28, 0.5);
}

.zine .mount img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}

/* `image-protection.js` embrulha cada <img> em `.image-protected`, um
   inline-block sem largura. Dentro da montagem isso faria a foto assumir a
   largura intrínseca (1125–1500px) e estourar a moldura — daí o bloco fluido. */
.zine .mount .image-protected {
  display: block !important;
  width: 100%;
  line-height: 0;
}

.zine .art.color .mount img {
  filter: none;
}

/* ---------- legendas SOBRE a foto ---------- */

.zine .ov {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 46%;
}

.zine .ov.wide {
  max-width: 56%;
}

.zine .ov.tl {
  top: 7%;
  left: 7%;
}

.zine .ov.tr {
  top: 7%;
  right: 7%;
  text-align: right;
  align-items: flex-end;
}

.zine .ov.bl {
  bottom: 8%;
  left: 7%;
}

.zine .ov.ml {
  top: 50%;
  left: 7%;
  transform: translateY(-50%);
}

.zine .ov.ct {
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  align-items: center;
}

.zine .folio {
  position: absolute;
  z-index: 1;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(4rem, 13vw, 9rem);
  line-height: 0.7;
  color: var(--z-green);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

.zine .folio.br {
  bottom: 4%;
  right: 5%;
}

.zine .folio.tr {
  top: 4%;
  right: 6%;
}

.zine .tick {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  opacity: 0.5;
}

.zine .tick::before,
.zine .tick::after {
  content: "";
  position: absolute;
  background: var(--z-green);
}

.zine .tick::before {
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}

.zine .tick::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
}

.zine .tick.tl {
  top: 5.5%;
  left: 5.5%;
}

/* ---------- legendas FORA da foto ---------- */

.zine .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.2vh, 1.5rem);
  /* abraça a largura da moldura para que a legenda alinhe às bordas da foto */
  width: fit-content;
  max-width: 100%;
}

.zine .caprow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.zine .capcol {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.zine .duo {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
  max-width: clamp(24rem, 94vw, 104rem);
}

.zine .duo.rev {
  grid-template-columns: 0.88fr 1.12fr;
}

.zine .duo .art {
  --z-wmax: 100%;
}

.zine .duo .txt {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.zine .duo.rev .txt {
  order: -1;
}

@media (max-width: 720px) {
  .zine .duo,
  .zine .duo.rev {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .zine .duo.rev .txt {
    order: 0;
  }
}

@media (max-width: 560px) {
  .zine .ov {
    max-width: 60%;
  }

  .zine .ov.wide {
    max-width: 74%;
  }

  .zine .verso {
    font-size: clamp(1.15rem, 4.8vw, 1.55rem);
  }
}

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

.zine .capa .art.p {
  --z-wmax: clamp(24rem, 60vw, 62rem);
}

.zine .pre {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--z-green);
  margin-bottom: 0.6rem;
}

.zine .titulo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3rem, 11vw, 6.6rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--z-ink);
  margin: 0;
}

.zine .titulo .amp {
  font-style: italic;
  color: var(--z-green);
}

.zine .titulo .b {
  display: block;
  font-style: italic;
}

.zine .cap-top {
  position: absolute;
  top: 5%;
  left: 7%;
  right: 7%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  z-index: 2;
}

.zine .hint {
  animation: zine-pulse 2.8s ease-in-out infinite;
}

@keyframes zine-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zine .hint {
    animation: none;
    opacity: 0.6;
  }
}

/* ---------- virada de caderno ---------- */

.zine .turn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--z-pad);
}

.zine .turn .k {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--z-green);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* ---------- colofão ---------- */

.zine .final {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 6vh, 4rem) var(--z-pad);
  gap: clamp(1.4rem, 3.5vh, 2.4rem);
  border-top: 1px solid var(--z-line);
}

.zine .final .big-verso {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  line-height: 1.34;
  max-width: 30ch;
  color: var(--z-ink);
  text-wrap: balance;
  margin: 0;
}

.zine .final .big-verso em {
  font-style: normal;
  color: var(--z-green);
}

.zine .colo {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.zine .colo p {
  font-size: 0.66rem;
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: var(--z-soft);
  margin: 0;
}

.zine .colo a {
  color: var(--z-green);
  text-decoration: none;
  border-bottom: 1px solid var(--z-line);
}

.zine .assina {
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--z-green) !important;
}

/* Saída do zine — volta para a listagem de séries */
.zine .outro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.9rem;
}

.zine .outro a,
.zine .outro button {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--z-green);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--z-line);
  padding: 0 0 0.25rem;
  cursor: pointer;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

.zine .outro a:hover,
.zine .outro button:hover {
  border-color: var(--z-green);
  opacity: 0.75;
}

.zine .outro .sep {
  color: var(--z-soft);
}

.zine a:focus-visible,
.zine button:focus-visible {
  outline: 2px solid var(--z-green);
  outline-offset: 3px;
}

/* ---------- reveal ---------- */

.zine .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.05s ease, transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.zine .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .zine .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Sem JS o conteúdo não pode ficar invisível */
.zine.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- navegação por slides ---------- */

.zine-dots {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

@media (max-width: 640px) {
  .zine-dots {
    display: none;
  }
}

.zine-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid var(--z-soft);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.zine-dots button:hover {
  border-color: var(--z-green);
}

.zine-dots button.active {
  background: var(--z-green);
  border-color: var(--z-green);
  transform: scale(1.25);
}

.zine-dots button:focus-visible {
  outline: 2px solid var(--z-green);
  outline-offset: 3px;
}