/* =============================================================
   Carta a Cecília, antes do Carmelo
   Direção: "O Poema sobre Livro de Horas"
   Livro horizontal — páginas que passam, com portões por data.
   ============================================================= */

:root {
  --paper:        #F3E9D2;   /* creme base — papel do poema dela */
  --paper-2:      #ece0c3;   /* creme mais escuro */
  --paper-dark:   #d8c7a4;   /* dobra da página */
  --bordo:        #6B2E2A;   /* bordô — capitulares, acentos fortes */
  --bordo-dark:   #4a1e1b;
  --salvia:       #7A8A5B;   /* verde-sálvia — vinhas, folhas */
  --salvia-dark:  #5a6a3e;
  --maria:        #2D4B8A;   /* azul-mariano — Eucaristia, véu */
  --ouro:         #C9A55C;   /* dourado-envelhecido */
  --ouro-dim:     #a07a2f;
  --blush:        #E8C2C0;   /* rosa-blush — Teresinha, ternura */
  --ink:          #2a1e12;   /* tinta da caneta — escuro marrom, não preto */
  --ink-soft:     #4a3826;

  --serif-title:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --serif-body:   'EB Garamond', Georgia, serif;
  --serif-old:    'IM Fell English', 'EB Garamond', serif;
  --hand:         'Caveat', 'Homemade Apple', cursive;

  --page-max:     720px;
  --nav-height:   64px;

  /* Altura da "página": 100vh no desktop; nos navegadores que suportam,
     100dvh — atualiza com a barra do Safari/Chrome mobile, evitando
     que o rodapé seja cortado quando a URL-bar aparece/desaparece. */
  --page-h:       100vh;

  /* Respeitar o home-bar do iPhone e o notch: os elementos fixos
     (nav, rosário) somam isso ao seu offset de baixo. */
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);
}
@supports (height: 100dvh) {
  :root { --page-h: 100dvh; }
}

/* Base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 22px;
  line-height: 1.65;
  /* Ligaturas clássicas, kerning, numerais old-style (3 e 7 caem abaixo
     da linha de base — padrão de livro bem impresso). */
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1, "onum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paper grain fixed */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(42,30,18,0.35) 0 0.5px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, rgba(42,30,18,0.25) 0 0.5px, transparent 1px 4px),
    repeating-radial-gradient(circle at 44% 82%, rgba(42,30,18,0.2) 0 0.4px, transparent 1px 5px);
  mix-blend-mode: multiply;
  z-index: 0;
}
/* (A dobra do livro agora vive entre as duas colunas de cada página, não no body) */

a { color: var(--bordo); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--bordo-dark); }

/* ====================  LIVRO  (3D page-flip, hinge na esquerda)  ==================== */
main.book {
  position: relative;
  width: 100vw;
  height: var(--page-h);
  overflow: hidden;
  z-index: 1;
  perspective: 2400px;
  perspective-origin: 50% 50%;
  /* Fundo da "pilha" por trás das páginas — sombra da lombada */
  background:
    radial-gradient(ellipse 1400px 900px at 50% 50%, rgba(42,30,18,0.05), transparent 70%),
    linear-gradient(90deg, rgba(42,30,18,0.08) 0%, transparent 4%, transparent 96%, rgba(42,30,18,0.08) 100%);
}

main.book .page {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: var(--page-h);
  overflow: hidden;
  padding-bottom: calc(var(--nav-height) + 1.2rem + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* 3D */
  transform-origin: 0% 50%;          /* lombada à esquerda */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Curva de papel: começa devagar (folha descola), acelera no meio (cai)
     e desacelera no fim (pousa). 1100ms — ainda peso de livro, mas sem
     empacar quem quer voltar rápido. */
  transition:
    transform 1100ms cubic-bezier(0.45, 0.05, 0.25, 1),
    box-shadow 1100ms cubic-bezier(0.45, 0.05, 0.25, 1),
    filter 1100ms ease;
  will-change: transform, box-shadow;

  /* Fundo base + gradiente morno de página */
  background:
    radial-gradient(ellipse 1100px 700px at 50% 0%, rgba(255,250,235,0.6), transparent 60%),
    radial-gradient(ellipse 1300px 800px at 50% 100%, rgba(107,46,42,0.08), transparent 70%),
    var(--paper);

  /* Leve sombra na borda da "lombada" — sugere a costura do caderno */
  box-shadow:
    inset 9px 0 14px -8px rgba(42,30,18,0.22),
    0 0 0 transparent;
}

/* Estados de navegação — o JS muda .flipped / .current / .behind */
main.book .page.flipped {
  transform: rotateY(-178deg);
  box-shadow:
    inset -9px 0 14px -8px rgba(42,30,18,0.28),
    -14px 0 30px -8px rgba(42,30,18,0.30);
}
main.book .page.current {
  box-shadow:
    inset 9px 0 14px -8px rgba(42,30,18,0.22),
    4px 0 24px -8px rgba(42,30,18,0.18);
}
main.book .page.behind {
  /* páginas ainda por ler — ficam coladinhas por trás da atual */
  transform: rotateY(0deg);
  filter: brightness(0.985);
}

/* "Sombra de vinco" durante o giro — pseudo-elemento gradiente que escurece
   conforme a página dobra. Fica mais forte quando .flipped começa a rodar. */
main.book .page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(42,30,18,0.22) 0%,
    rgba(42,30,18,0.05) 10%,
    transparent 35%,
    transparent 100%);
  opacity: 0;
  transition: opacity 550ms ease;
  z-index: 5;
}
main.book .page.flipped::after { opacity: 1; }

/* Reverso da página (backface) — para quando dobrar além de 90°, mostrar o
   "verso" do papel em vez da página estranha. Usamos um véu visual via
   mask/filter no flip. Aqui, damos um tom creme ligeiramente mais escuro
   por trás, simulando papel visto do avesso. */
main.book .page.flipped > * { filter: brightness(0.92); }

/* Typographic primitives ------------------------------------ */
.kicker,
.chapter-kicker {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--ouro-dim);
  text-align: center;
  margin: 0 0 1rem;
}
.rule {
  width: 80px;
  height: 1px;
  background: var(--ouro);
  margin: 2rem auto 2.5rem;
  opacity: 0.5;
  border: 0;
}
.ornament {
  text-align: center;
  color: var(--ouro);
  font-size: 1.3rem;
  letter-spacing: 1em;
  margin: 2.5rem 0;
  opacity: 0.65;
  user-select: none;
}

/* Hand-written style (for her verses, signatures) */
.hand {
  font-family: var(--hand);
  font-size: 1.55em;
  line-height: 1.35;
  color: var(--bordo-dark);
  letter-spacing: 0.01em;
  /* Sangramento de tinta — letra de caneta em papel absorvente */
  text-shadow:
    0 0 0.6px rgba(107,46,42,0.35),
    0 0.4px 0.8px rgba(107,46,42,0.12);
}

/* ====================  VINHAS (SVG)  ==================== */
/* Hand-drawn vine frames at corners — echoing the poem's ink vines */
.vine {
  position: absolute;
  color: var(--salvia-dark);
  opacity: 0.6;
  pointer-events: none;
}
.vine.tl { top: 16px; left: 16px; width: 140px; height: 140px; }
.vine.tr { top: 16px; right: 16px; width: 140px; height: 140px; transform: scaleX(-1); }
.vine.bl { bottom: 16px; left: 16px; width: 140px; height: 140px; transform: scaleY(-1); }
.vine.br { bottom: 16px; right: 16px; width: 140px; height: 140px; transform: scale(-1, -1); }

/* Dried-flower accent slot */
.dried {
  position: absolute;
  width: 90px; height: 90px;
  pointer-events: none;
  opacity: 0.85;
  filter: saturate(0.85) contrast(1.05);
}

/* ====================  FRONTISPÍCIO  ==================== */
.frontis {
  padding: 3rem 2rem;
}
.frontis-inner {
  max-width: 620px;
  width: 100%;
  position: relative;
  text-align: center;
}
.frontis-mark {
  color: var(--ouro);
  font-size: 1.1rem;
  letter-spacing: 0.6em;
  opacity: 0.55;
  margin-bottom: 2.2rem;
}
h1.frontis-title {
  font-family: var(--serif-title);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.5vw, 4.4rem);
  line-height: 1.02;
  color: var(--bordo-dark);
  margin: 0 0 0.35rem;
  letter-spacing: -0.015em;
}
h1.frontis-title .capitular {
  font-family: var(--serif-title);
  font-weight: 600;
  font-style: italic;
  color: var(--ouro-dim);
  font-size: 1.24em;
}
.frontis-sub {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 2.6rem;
}
.frontis-rule {
  width: 60px;
  height: 1px;
  background: var(--ouro);
  opacity: 0.55;
  margin: 0 auto 1.4rem;
}
.frontis-year {
  font-family: var(--serif-old);
  font-variant: small-caps;
  letter-spacing: 0.32em;
  font-size: 0.78rem;
  color: var(--ouro-dim);
  margin-bottom: 2.2rem;
}
.frontis-author {
  font-family: var(--hand);
  font-size: 1.65rem;
  color: var(--bordo-dark);
  opacity: 0.85;
  margin-bottom: 2rem;
}
.frontis-author::before { content: "— "; color: var(--ouro); }
.frontis .scroll-hint {
  text-align: center;
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--ink-soft);
  opacity: 0.5;
  letter-spacing: 0.14em;
  margin-top: 0.4rem;
}
.frontis .scroll-hint::after { content: "  →"; color: var(--ouro); margin-left: 0.4rem; }

/* ====================  SUMÁRIO label  ==================== */
.sumario-label {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.38em;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ouro-dim);
  margin: 0 0 1.2rem;
  opacity: 0.85;
}

/* ====================  CAPA  ==================== */
.capa {
  padding: 1.4rem 2rem 1rem;
}
.capa .capa-inner {
  max-width: var(--page-max);
  width: 100%;
  position: relative;
}
.capa .ornament-top {
  text-align: center;
  color: var(--ouro);
  font-size: 1.05rem;
  letter-spacing: 0.7em;
  margin-bottom: 0.9rem;
  opacity: 0.5;
}
.capa h1.title {
  font-family: var(--serif-title);
  font-weight: 500;
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  line-height: 1;
  margin: 0 0 0.18rem;
  text-align: center;
  color: var(--bordo-dark);
  letter-spacing: -0.015em;
}
.capa h1 .capitular {
  font-family: var(--serif-title);
  font-weight: 600;
  font-style: italic;
  color: var(--ouro-dim);
  font-size: 1.22em;
  line-height: 1;
}
.capa .subtitle {
  font-family: var(--serif-old);
  font-style: italic;
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 auto 0.9rem;
  letter-spacing: 0.02em;
}
.capa .divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ouro);
  justify-content: center;
  margin: 0.6rem 0 0.9rem;
  opacity: 0.7;
}
.capa .divider::before,
.capa .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro) 50%, transparent);
  max-width: 110px;
}
.capa .divider-glyph { font-size: 1.05rem; }

/* Index of chapters */
.capa ol.index {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 540px;
  font-size: 1rem;
}
.capa ol.index li {
  padding: 0;
  border-bottom: 1px dotted rgba(42,30,18,0.16);
  position: relative;
}
.capa ol.index li:last-child { border-bottom: none; }
/* O <a> é o container-grid: ocupa a linha inteira e recebe o clique
   em qualquer ponto da linha do sumário (antes ele era display:contents,
   e em Chrome/Safari o clique sumia no "não-box" do anchor). */
.capa ol.index a {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0.9rem;
  padding: 0.38rem 0;
  align-items: baseline;
  color: var(--ink);
  cursor: pointer;
}
.capa ol.index li.locked a { cursor: not-allowed; }
.capa ol.index li.locked .name em { color: var(--ink-soft); opacity: 0.55; }
.capa ol.index li.locked .num { opacity: 0.45; }
.capa ol.index li.locked .date { color: var(--ouro-dim); opacity: 0.75; }
.capa ol.index li.locked .lock {
  display: inline;
  margin-right: 0.4em;
  color: var(--ouro-dim);
  font-size: 0.85em;
}
.capa ol.index .num {
  font-variant: small-caps;
  color: var(--ouro-dim);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.capa ol.index .name em {
  font-family: var(--serif-title);
  font-style: italic;
  font-size: 1.05em;
  font-weight: 500;
  transition: color 0.2s ease;
}
.capa ol.index li:not(.locked):hover .name em,
.capa ol.index a:focus .name em { color: var(--bordo); }
.capa ol.index .date {
  font-family: var(--serif-old);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.88em;
  opacity: 0.7;
  white-space: nowrap;
}

/* Sumário — divisor entre capítulos e apêndices */
.sumario-sublabel {
  text-align: center;
  color: var(--ouro);
  letter-spacing: 0.6em;
  font-size: 0.95rem;
  margin: 0.6rem 0 0.3rem;
  opacity: 0.45;
  user-select: none;
}
.index-extras {
  margin-top: 0.2rem !important;
  padding-top: 0.2rem;
}
.index-extras li .num {
  color: var(--ouro);
  font-size: 0.75em;
  opacity: 0.75;
  letter-spacing: 0.2em;
}
.index-extras li .name em {
  font-size: 0.95em;
  color: var(--ink-soft);
}
.index-extras li .date {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--ouro-dim);
  font-size: 0.74em;
}

/* Cover epigraph (poem excerpt in her hand) */
.capa .epigraph {
  margin: 1rem auto 0;
  max-width: 520px;
  text-align: center;
  padding: 0 1rem;
}
.capa .epigraph .hand {
  font-size: 1.35rem;
  color: var(--bordo-dark);
  line-height: 1.35;
  margin: 0;
}
.capa .epigraph-attr {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-family: var(--serif-old);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  color: var(--ouro-dim);
  font-size: 0.74rem;
}

.capa .signature {
  text-align: right;
  margin-top: 1rem;
  font-family: var(--hand);
  font-size: 1.45rem;
  color: var(--bordo-dark);
  opacity: 0.85;
}
.capa .signature::before { content: "— "; color: var(--ouro); }

.capa .scroll-hint {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ink-soft);
  opacity: 0.55;
  letter-spacing: 0.14em;
}
.capa .scroll-hint::after {
  content: "  →";
  color: var(--ouro);
  margin-left: 0.4rem;
}

/* ====================  CAPÍTULO — livro aberto, 2 colunas  ==================== */
.capitulo {
  padding: 1.3rem 2.2rem calc(var(--nav-height) + 1rem);
  width: 100vw;
  height: var(--page-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.capitulo .capitulo-inner {
  max-width: 1480px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Cabeçalho mais enxuto — ganha espaço vertical pro corpo não vazar
   pra uma terceira coluna. Escopado em .capitulo pra não mexer nas
   outras páginas (capa, apêndice, orações, etc.). */
.capitulo .chapter-kicker { margin: 0 0 0.55rem; }
.capitulo .rule { margin: 0.9rem auto 1.1rem; }
.capitulo h2 { margin: 0 0 0.18em; }
.capitulo .dek { margin: 0 auto 0.3rem; }
.capitulo .chapter-epigraph { margin: 0.7rem auto 1rem; }
.capitulo .chapter-epigraph::before { margin: 0 auto 0.35rem; }
.capitulo .chapter-epigraph .hand { font-size: 1.4rem; }
.capitulo .chapter-epigraph cite { margin-top: 0.5rem; }
.capitulo .chapter-header { flex: 0 0 auto; }
.capitulo .chapter-footer { flex: 0 0 auto; }

/* Continuação label (for sub-pages 2+) */
.capitulo .chapter-cont {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ouro-dim);
  text-align: center;
  margin: 0 0 1.8rem;
  opacity: 0.75;
}
.capitulo h2 {
  font-family: var(--serif-title);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--bordo-dark);
  margin: 0 0 0.3em;
  letter-spacing: -0.015em;
  text-align: center;
}
.capitulo h2 em { font-style: italic; font-weight: 500; }
.capitulo .dek {
  font-family: var(--serif-old);
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 0 auto 0.4rem;
  max-width: 520px;
}

/* Poem-style epigraph at top of chapter */
.chapter-epigraph {
  margin: 1.2rem auto 1.8rem;
  max-width: 440px;
  text-align: center;
  position: relative;
  padding: 0 1rem;
}
/* Dingbat floral dourado centrado antes do verso-em-mão — pequeno sinal
   de "aqui começa uma voz que não é minha". */
.chapter-epigraph::before {
  content: "❦";
  display: block;
  color: var(--ouro);
  font-size: 0.95rem;
  opacity: 0.55;
  margin: 0 auto 0.5rem;
  letter-spacing: 0;
}
.chapter-epigraph .hand {
  font-size: 1.55rem;
  color: var(--bordo-dark);
  line-height: 1.35;
}
.chapter-epigraph cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-family: var(--serif-old);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  color: var(--ouro-dim);
  font-size: 0.76rem;
}

/* Body text — fluxo em 2 colunas (livro aberto) */
.capitulo .body {
  flex: 1 1 0;
  min-height: 0;
  column-count: 2;
  column-gap: 3.2rem;
  /* balance distribui o texto em exatamente 2 colunas; evita que a
     sobra escape pra uma terceira coluna à direita quando o capítulo
     é mais longo. overflow:hidden é rede de segurança. */
  column-fill: balance;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  padding: 0 0.3rem;
}
/* A dobra do livro — linha sutil entre as duas colunas */
.capitulo .body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(42,30,18,0.06) 18%, rgba(42,30,18,0.11) 50%, rgba(42,30,18,0.06) 82%, transparent);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.capitulo .body p {
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 0.85rem;
  line-height: 1.55;
  break-inside: avoid-column;
}
.capitulo .body p:last-child { margin-bottom: 0; }
.capitulo .body blockquote { break-inside: avoid-column; }

/* Blockquote */
.capitulo .body blockquote {
  border-left: 2px solid var(--ouro);
  padding: 0.2rem 0 0.2rem 1rem;
  margin: 0.8rem 0 0.9rem 0.4rem;
  font-family: var(--serif-title);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.capitulo .body blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--serif-old);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ouro-dim);
  margin-top: 0.5rem;
}
.capitulo .body blockquote .hand {
  font-family: var(--hand);
  font-style: normal;
  font-size: 1.5em;
  color: var(--bordo-dark);
  line-height: 1.35;
}

/* Inline figure */
.capitulo .body figure.inset {
  float: left;
  width: 42%;
  margin: 0.4rem 1.6rem 0.8rem 0;
}
.capitulo .body figure.inset.right {
  float: right;
  margin: 0.4rem 0 0.8rem 1.6rem;
}
.capitulo .body figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ink-soft);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 0 0 5px var(--paper),
    0 0 0 6px var(--ouro),
    0 10px 22px rgba(42,30,18,0.25);
}
.capitulo .body figure figcaption {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--ouro-dim);
  text-align: center;
  margin-top: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

/* Full-width plate (e.g., scan of the poem on Cap II) */
.capitulo .body figure.plate {
  width: 100%;
  margin: 2rem auto;
}
.capitulo .body figure.plate img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.clear { clear: both; }

/* Signature at end of chapter */
.chapter-signoff {
  margin-top: 0.8rem;
  padding-top: 0.55rem;
  border-top: 1px dotted rgba(42,30,18,0.2);
  text-align: right;
  font-family: var(--hand);
  font-size: 1.35rem;
  color: var(--bordo-dark);
  opacity: 0.78;
  position: relative;
}
/* Ornamento dourado acima da assinatura — mesmo dingbat floral, pequeno.
   Sinaliza "aqui acaba o capítulo" antes do risco pontilhado. */
.chapter-footer::before {
  content: "❦";
  display: block;
  text-align: center;
  color: var(--ouro);
  font-size: 0.85rem;
  opacity: 0.5;
  margin-bottom: 0.2rem;
  letter-spacing: 0;
}
/* "Continua" label at bottom of non-final sub-pages */
.turn-page {
  margin-top: 0.8rem;
  text-align: right;
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ouro-dim);
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.turn-page::after { content: "  →"; color: var(--ouro); }

/* Colophon — date/place line at very end */
.colophon {
  text-align: right;
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--ouro-dim);
  margin: 0.3rem 0 0;
  opacity: 0.75;
}
.chapter-signoff::before { content: "— "; color: var(--ouro); }

/* Locked chapter placeholder ------------------------------- */
.locked-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 4rem 2rem;
  text-align: center;
}
.locked-page .lock-icon {
  font-size: 3rem;
  color: var(--ouro-dim);
  opacity: 0.55;
  margin-bottom: 1rem;
}
.locked-page .lock-num {
  font-family: var(--serif-old);
  font-variant: small-caps;
  letter-spacing: 0.28em;
  color: var(--ouro-dim);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.locked-page .lock-title {
  font-family: var(--serif-title);
  font-style: italic;
  font-size: 2rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  opacity: 0.65;
}
.locked-page .lock-date {
  font-family: var(--hand);
  font-size: 1.3rem;
  color: var(--bordo);
  letter-spacing: 0.02em;
}
.locked-page .lock-date::before { content: "abre em  "; color: var(--ink-soft); opacity: 0.55; font-family: var(--serif-old); font-size: 0.88rem; letter-spacing: 0.14em; font-style: italic; }

/* ====================  BARRA DE NAVEGAÇÃO  ==================== */
.book-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  z-index: 10;
  background: linear-gradient(180deg, rgba(243,233,210,0) 0%, rgba(243,233,210,0.92) 45%, var(--paper) 100%);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.book-nav > * { pointer-events: auto; }
.book-nav .arrow {
  background: transparent;
  border: 1px solid rgba(160,122,47,0.45);
  color: var(--ouro-dim);
  font-family: var(--serif-title);
  font-size: 1.5rem;
  line-height: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-style: italic;
}
.book-nav .arrow:hover:not(:disabled) {
  background: rgba(160,122,47,0.12);
  border-color: var(--ouro-dim);
  color: var(--bordo);
}
.book-nav .arrow:disabled { opacity: 0.25; cursor: default; }
.book-nav .counter {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  min-width: 80px;
  text-align: center;
  user-select: none;
}
.book-nav .counter .of { color: var(--ouro-dim); margin: 0 0.3em; }

/* Side arrows (desktop) */
.side-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: transparent;
  border: 1px solid rgba(160,122,47,0.28);
  color: var(--ouro-dim);
  font-family: var(--serif-title);
  font-size: 1.9rem;
  font-style: italic;
  width: 46px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0.6;
}
.side-arrow:hover:not(:disabled) {
  opacity: 1;
  background: rgba(160,122,47,0.08);
  color: var(--bordo);
}
.side-arrow:disabled { opacity: 0.12; cursor: default; }
.side-arrow.prev { left: 0; border-left: none; border-radius: 0 4px 4px 0; }
.side-arrow.next { right: 0; border-right: none; border-radius: 4px 0 0 4px; }

/* ====================  FÓLIO (pagina currens) em cada capítulo  ==================== */
.folio {
  position: absolute;
  bottom: calc(var(--nav-height) + 18px + var(--safe-bottom));
  right: 2.6rem;
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: var(--ouro-dim);
  opacity: 0.6;
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 720px) {
  .folio { right: 1.2rem; bottom: calc(var(--nav-height) + 14px); }
}

/* ====================  MARCADOR DE FITA (ribbon bookmark)  ==================== */
.bookmark-ribbon {
  position: fixed;
  top: 0;
  right: 12%;
  width: 22px;
  height: 140px;
  z-index: 8;
  pointer-events: none;
  transform-origin: top center;
  animation: ribbonSway 7.5s ease-in-out infinite;
  /* V-cut no pé + sombra lateral de tecido */
  background:
    linear-gradient(180deg,
      #8a1b1b 0%,
      #7a1818 20%,
      #6b1e1e 55%,
      #4e1010 100%);
  box-shadow:
    inset 2px 0 2px rgba(255,255,255,0.08),
    inset -2px 0 3px rgba(0,0,0,0.25),
    1px 0 3px rgba(0,0,0,0.18),
    -1px 0 3px rgba(0,0,0,0.18),
    0 0 6px rgba(107,46,42,0.15);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  /* pregas verticais sutis como tecido */
  background-image:
    linear-gradient(180deg,
      #8a1b1b 0%, #7a1818 20%, #6b1e1e 55%, #4e1010 100%),
    repeating-linear-gradient(90deg,
      transparent 0 4px,
      rgba(0,0,0,0.08) 4px 5px);
  background-blend-mode: normal, multiply;
}
.bookmark-ribbon::before {
  /* costura na parte de cima — detalhe de livro real */
  content: "";
  position: absolute;
  top: 4px; left: 2px; right: 2px;
  height: 1px;
  background: rgba(0,0,0,0.25);
}
.ribbon-thread {
  /* pontinho dourado simulando o nó que prende a fita ao livro */
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--ouro);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(201,165,92,0.55);
}
@keyframes ribbonSway {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(0.8deg); }
  65%      { transform: rotate(-0.5deg); }
}
@media (max-width: 720px) {
  .bookmark-ribbon { right: 8%; width: 18px; height: 110px; }
}

/* ====================  BRASÃO DO CARMO (fim de Nada te turbe)  ==================== */
.brasao-wrap {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.brasao-carmo {
  width: 54px;
  height: auto;
  color: var(--bordo-dark);
  opacity: 0.7;
}
.brasao-motto {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.28em;
  color: var(--ouro-dim);
  font-size: 0.68rem;
  margin: 0;
  opacity: 0.75;
}

/* ====================  VINHAS — refinamentos  ==================== */
/* A regra base já existe acima — aqui só afino tom e contraste */
.vine {
  opacity: 0.48;
  z-index: 2;
}
.vine circle { opacity: 0.55; }

/* ====================  ROSÁRIO (progresso)  ==================== */
/* Uma conta por página. A corrente = dourada. Contas grandes a cada 10,
   como num terço. Aparece colada ao nav. Clique navega. */
.rosary {
  position: fixed;
  bottom: calc(var(--nav-height) + 8px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 9;
  padding: 4px 10px;
  opacity: 0.72;
  transition: opacity 0.3s ease;
}
.rosary:hover { opacity: 1; }
.rosary .bead {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(160,122,47,0.5);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0.7;
}
.rosary .bead.big {
  width: 9px;
  height: 9px;
  border-color: rgba(107,46,42,0.55);
}
.rosary .bead:hover {
  background: rgba(201,165,92,0.3);
  opacity: 1;
  transform: scale(1.25);
}
.rosary .bead.read {
  background: rgba(201,165,92,0.55);
  border-color: rgba(160,122,47,0.7);
  opacity: 0.85;
}
.rosary .bead.now {
  background: var(--ouro);
  border-color: var(--bordo);
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 6px rgba(201,165,92,0.55);
}

/* ====================  SIGILO (lacre de cera) no Cap VII  ==================== */
.chapter-footer-final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.wax-seal {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-top: 0.6rem;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,220,200,0.5) 0%, transparent 40%),
    radial-gradient(circle at 65% 75%, rgba(42,0,0,0.4) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #8b1a1a 0%, #6b1e1e 55%, #4a1010 100%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.35),
    inset 2px 2px 4px rgba(255,180,160,0.25),
    0 3px 8px rgba(42,0,0,0.35),
    0 0 0 1px rgba(74,16,16,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  /* borda irregular — imitando cera que escorreu */
  clip-path: polygon(
    48% 2%, 60% 4%, 72% 8%, 85% 18%, 92% 28%, 97% 42%, 99% 55%,
    96% 68%, 90% 78%, 80% 88%, 68% 95%, 55% 98%, 42% 97%,
    28% 93%, 16% 85%, 8% 74%, 3% 60%, 1% 46%, 4% 32%, 12% 20%,
    22% 10%, 35% 4%
  );
}
.wax-seal .wax-letter {
  font-family: var(--serif-title);
  font-style: italic;
  font-weight: 600;
  font-size: 2rem;
  color: rgba(255,235,215,0.92);
  text-shadow:
    0 1px 1px rgba(0,0,0,0.4),
    0 -1px 0 rgba(255,180,140,0.18);
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateY(-1px);
}
.wax-seal .wax-drip {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 50% 30%, #7a1a1a 0%, #4a1010 80%);
  border-radius: 0 0 50% 50% / 0 0 80% 80%;
  clip-path: polygon(30% 0, 70% 0, 90% 60%, 65% 100%, 50% 90%, 35% 100%, 10% 60%);
  opacity: 0.85;
}

/* ====================  CRUZ CARMELITA (detalhe quase invisível)  ==================== */
.carmelite-mark {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 26px;
  height: 26px;
  color: var(--ouro-dim);
  opacity: 0.22;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.capa:hover .carmelite-mark { opacity: 0.55; }

/* Skip-link */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--bordo-dark);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* =============================================================
   Animações — subtis, primeira visita só (sem flash)
   ============================================================= */

/* Entrada de página — apenas primeira visita. O JS adiciona
   .first-view quando a página é vista pela primeira vez; ao sair,
   a .first-view é removida e revisitas NÃO reanimam. */

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main.book .page.current.first-view .capa-inner,
main.book .page.current.first-view .capitulo-inner,
main.book .page.current.first-view .frontis-inner,
main.book .page.current.first-view .locked-page {
  animation: pageFadeIn 650ms ease-out both;
}

/* ----- Handwriting reveal (primeira visita) ----- */
@keyframes handReveal {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
main.book .page.current.first-view .epigraph .hand,
main.book .page.current.first-view .chapter-epigraph .hand {
  animation: handReveal 1400ms cubic-bezier(0.3, 0.6, 0.3, 1) 450ms both;
}

/* ----- Capitular: pequeno glow dourado, primeira visita ----- */
@keyframes capitularGlow {
  0%   { text-shadow: 0 0 0 rgba(201,165,92,0); }
  50%  { text-shadow: 0 0 20px rgba(201,165,92,0.55); }
  100% { text-shadow: 0 0 0 rgba(201,165,92,0); }
}
main.book .page.current.first-view h1.title .capitular,
main.book .page.current.first-view h1.frontis-title .capitular {
  animation: capitularGlow 1800ms ease-in-out 600ms both;
  display: inline-block;
}

/* ====== FRONTISPÍCIO — sequência própria, mais teatral ====== */
@keyframes markDrop {
  from { opacity: 0; transform: translateY(-12px); letter-spacing: 0.2em; }
  to   { opacity: 0.55; transform: translateY(0);    letter-spacing: 0.6em; }
}
main.book .page.current.first-view .frontis-mark {
  animation: markDrop 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}
@keyframes titleReveal {
  from { opacity: 0; transform: scale(0.96); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
main.book .page.current.first-view h1.frontis-title {
  animation: titleReveal 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both;
  transform-origin: center;
}
@keyframes subFade {
  from { opacity: 0; transform: translateY(6px); letter-spacing: 0.08em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.02em; }
}
main.book .page.current.first-view .frontis-sub {
  animation: subFade 1100ms ease-out 900ms both;
}
@keyframes ruleGrow {
  from { width: 0; opacity: 0; }
  to   { width: 60px; opacity: 0.55; }
}
main.book .page.current.first-view .frontis-rule {
  animation: ruleGrow 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 1200ms both;
}
@keyframes fleuronReveal {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 0.75; transform: scale(1); }
}
main.book .page.current.first-view .ornate-rule,
main.book .page.current.first-view .tail-piece {
  animation: fleuronReveal 900ms ease-out 700ms both;
}
@keyframes softFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.book .page.current.first-view .frontis-year {
  animation: softFadeUp 900ms ease-out 1400ms both;
}
main.book .page.current.first-view .frontis-author {
  animation: softFadeUp 1000ms ease-out 1700ms both;
}
main.book .page.current.first-view .frontis .scroll-hint {
  animation: softFadeUp 900ms ease-out 2200ms both;
}

/* ====== SUMÁRIO — stagger dos itens do índice ====== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.book .page.current.first-view .sumario-label { animation: fadeUp 700ms ease-out 100ms both; }
main.book .page.current.first-view .dedicatoria  { animation: fadeUp 800ms ease-out 280ms both; }
main.book .page.current.first-view .capa .index li {
  animation: fadeUp 650ms ease-out both;
}
main.book .page.current.first-view .capa .index li:nth-child(1) { animation-delay: 480ms; }
main.book .page.current.first-view .capa .index li:nth-child(2) { animation-delay: 560ms; }
main.book .page.current.first-view .capa .index li:nth-child(3) { animation-delay: 640ms; }
main.book .page.current.first-view .capa .index li:nth-child(4) { animation-delay: 720ms; }
main.book .page.current.first-view .capa .index li:nth-child(5) { animation-delay: 800ms; }
main.book .page.current.first-view .capa .index li:nth-child(6) { animation-delay: 880ms; }
main.book .page.current.first-view .capa .index li:nth-child(7) { animation-delay: 960ms; }
main.book .page.current.first-view .capa .epigraph { animation: fadeUp 900ms ease-out 1200ms both; }

/* ====== CAPÍTULO — stagger dos elementos internos ====== */
main.book .page.current.first-view .chapter-header > *,
main.book .page.current.first-view .body > *,
main.book .page.current.first-view .chapter-footer > * {
  animation: fadeUp 700ms ease-out both;
}
main.book .page.current.first-view .chapter-header > *:nth-child(1) { animation-delay: 180ms; }
main.book .page.current.first-view .chapter-header > *:nth-child(2) { animation-delay: 280ms; }
main.book .page.current.first-view .chapter-header > *:nth-child(3) { animation-delay: 380ms; }
main.book .page.current.first-view .chapter-header > *:nth-child(4) { animation-delay: 480ms; }
main.book .page.current.first-view .chapter-header > *:nth-child(5) { animation-delay: 580ms; }
main.book .page.current.first-view .body > *:nth-child(1) { animation-delay: 700ms; }
main.book .page.current.first-view .body > *:nth-child(2) { animation-delay: 780ms; }
main.book .page.current.first-view .body > *:nth-child(3) { animation-delay: 860ms; }
main.book .page.current.first-view .body > *:nth-child(n+4) { animation-delay: 940ms; }
main.book .page.current.first-view .chapter-footer > * { animation-delay: 1100ms; }

/* ----- Vinhas: stroke-dashoffset draw-in, primeira visita ----- */
.vine path, .vine circle { stroke-dasharray: 400; stroke-dashoffset: 0; }
.vine g path { stroke-dasharray: 60; stroke-dashoffset: 0; }
.vine g circle { stroke-dasharray: 10; stroke-dashoffset: 0; }
main.book .page.current.first-view .vine path,
main.book .page.current.first-view .vine circle {
  animation: vineDraw 1600ms cubic-bezier(0.3, 0.7, 0.2, 1) 300ms both;
}
@keyframes vineDraw {
  from { stroke-dashoffset: 400; opacity: 0.2; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* ----- Scroll hint arrow — único elemento com nudge discreto ----- */
@keyframes hintNudge {
  0%,100% { transform: translateX(0); opacity: 0.45; }
  50%     { transform: translateX(5px); opacity: 0.75; }
}
.scroll-hint { animation: hintNudge 3.2s ease-in-out infinite; }

/* ----- Locked page: lock icon float (discreto) ----- */
@keyframes lockFloat {
  0%,100% { transform: translateY(0); opacity: 0.55; }
  50%     { transform: translateY(-3px); opacity: 0.7; }
}
.locked-page .lock-icon { animation: lockFloat 4.5s ease-in-out infinite; }

/* ----- Hover on TOC item: slight tilt on chapter name ----- */
.capa ol.index li:not(.locked) .name em { transition: color 220ms ease, transform 220ms ease; display: inline-block; }
.capa ol.index li:not(.locked):hover .name em { transform: translateX(3px); }

/* ----- Side arrow hover ----- */
.side-arrow { transition: all 0.35s ease; }
.side-arrow:hover:not(:disabled) {
  opacity: 1;
  background: rgba(160,122,47,0.1);
  color: var(--bordo);
  width: 54px;
}

/* ====================  DEDICATÓRIA (capa)  ==================== */
.dedicatoria {
  text-align: center;
  margin: 0 auto 1rem;
  max-width: 500px;
}
.dedicatoria .ded-pt {
  font-family: var(--serif-title);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--bordo-dark);
  margin: 0 0 0.35rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.dedicatoria .ded-latin {
  font-family: var(--serif-old);
  font-size: 0.7rem;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--ouro-dim);
  margin: 0 0 0.5rem;
  font-style: italic;
}
.dedicatoria::after {
  content: "·  ·  ·";
  display: block;
  color: var(--ouro);
  letter-spacing: 0.35em;
  opacity: 0.5;
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

/* =============================================================
   INTERCAPÍTULO — respiro (só voz dela, página em branco)
   ============================================================= */
.intercapitulo {
  padding: 3rem 2rem;
}
.intercapitulo-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
  position: relative;
}
.intercapitulo .inter-mark {
  color: var(--ouro);
  font-size: 1rem;
  letter-spacing: 0.6em;
  opacity: 0.55;
  margin-bottom: 1.8rem;
}
.intercapitulo .inter-kicker {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.38em;
  font-size: 0.82rem;
  color: var(--ouro-dim);
  margin: 0 0 2.4rem;
  opacity: 0.85;
}
.intercapitulo .inter-quote {
  border: none;
  padding: 0;
  margin: 0 auto;
  max-width: 520px;
  text-align: center;
  font-style: normal;
}
.intercapitulo .inter-quote .hand {
  font-family: var(--hand);
  font-size: 2rem;
  color: var(--bordo-dark);
  line-height: 1.4;
  display: block;
  margin-bottom: 1.6rem;
}
.intercapitulo .inter-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--serif-old);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--ouro-dim);
  font-size: 0.76rem;
}

/* =============================================================
   APÊNDICE — o poema inteiro da Ceci
   ============================================================= */
.apendice {
  padding: 1.8rem 2.4rem 1.4rem;
  width: 100vw;
  height: var(--page-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.apendice-inner {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.apendice-header { flex: 0 0 auto; text-align: center; }
.apendice-header h2 {
  font-family: var(--serif-title);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--bordo-dark);
  margin: 0 0 0.3em;
}
.apendice-header h2 em { font-style: italic; font-weight: 500; }
.apendice-header .dek {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin: 0 auto 0.3rem;
}
.apendice-intro {
  font-family: var(--serif-old);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0.4rem auto 0.6rem;
  line-height: 1.5;
}
.apendice-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 0.8rem;
  overflow: hidden;
}
.apendice-body .poem-scan {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
}
.apendice-body .poem-scan img {
  max-width: 100%;
  max-height: calc(var(--page-h) - 240px);
  width: auto;
  height: auto;
  display: block;
  border: 1px solid var(--ink-soft);
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 6px var(--ouro),
    0 14px 32px rgba(42,30,18,0.28);
}
.apendice-body .poem-scan figcaption {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--ouro-dim);
  margin-top: 0.7rem;
  text-align: center;
}
.apendice-body .poem-text {
  overflow-y: auto;
  max-height: calc(var(--page-h) - 200px);
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ouro-dim) transparent;
}
.apendice-body .poem-stanza {
  font-family: var(--serif-title);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.95rem;
  text-align: left;
}
.apendice-body .poem-signoff {
  margin-top: 1.5rem;
  text-align: right;
}
.apendice-body .poem-signoff .hand {
  font-family: var(--hand);
  font-size: 1.6rem;
  color: var(--bordo-dark);
  line-height: 1.25;
}

/* =============================================================
   ORAÇÕES — compromissos dele
   ============================================================= */
.oracoes {
  padding: 2.2rem 2.4rem 1.6rem;
  width: 100vw;
  height: var(--page-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.oracoes-inner {
  max-width: 760px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.oracoes-header { flex: 0 0 auto; text-align: center; }
.oracoes-header h2 {
  font-family: var(--serif-title);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  color: var(--bordo-dark);
  margin: 0 0 0.3em;
}
.oracoes-header h2 em { font-style: italic; font-weight: 500; }
.oracoes-intro {
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--ink);
  max-width: 560px;
  margin: 0.3rem auto 1.3rem;
  line-height: 1.55;
  text-align: center;
}
.oracoes-lista {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.2rem;
  max-width: 640px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ouro-dim) transparent;
}
.oracoes-lista li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.2rem;
  padding: 0.65rem 0;
  border-bottom: 1px dotted rgba(42,30,18,0.18);
  align-items: baseline;
}
.oracoes-lista li:last-child { border-bottom: none; }
.oracoes-lista .ora-data {
  font-family: var(--serif-old);
  font-variant: small-caps;
  font-style: italic;
  letter-spacing: 0.12em;
  color: var(--ouro-dim);
  font-size: 0.82rem;
  text-align: right;
}
.oracoes-lista .ora-corpo {
  font-family: var(--serif-body);
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.5;
}
.oracoes-lista .ora-corpo em {
  font-family: var(--serif-title);
  font-style: italic;
  color: var(--bordo);
}
.oracoes-fecho {
  font-family: var(--serif-title);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--bordo-dark);
  text-align: center;
  max-width: 560px;
  margin: 0.6rem auto 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(201,165,92,0.35);
  line-height: 1.5;
  flex: 0 0 auto;
}

/* =============================================================
   NADA TE TURBE — bênção de Santa Teresa
   ============================================================= */
.nada-te-turbe {
  padding: 2.6rem 2rem 1.4rem;
}
.turbe-inner {
  max-width: 720px;
  width: 100%;
  text-align: center;
  position: relative;
}
.turbe-mark {
  color: var(--ouro);
  font-size: 1.1rem;
  letter-spacing: 0.6em;
  opacity: 0.55;
  margin-bottom: 1.4rem;
}
.turbe-title {
  font-family: var(--serif-title);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  color: var(--bordo-dark);
  margin: 0.2rem 0 0.3rem;
  letter-spacing: -0.01em;
}
.turbe-title em { font-style: italic; }
.turbe-attr {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--ouro-dim);
  font-size: 0.76rem;
  margin: 0;
}
.turbe-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.4rem;
  margin: 2rem auto;
  max-width: 600px;
  align-items: start;
  position: relative;
}
.turbe-cols::before {
  content: "";
  grid-column: 2;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201,165,92,0.45) 20%, rgba(201,165,92,0.45) 80%, transparent);
  justify-self: center;
  align-self: stretch;
}
.turbe-col { min-width: 0; }
.turbe-lang {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--ouro-dim);
  font-size: 0.72rem;
  margin: 0 0 0.9rem;
}
.turbe-text {
  font-family: var(--serif-title);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.turbe-text em { font-style: italic; color: var(--bordo-dark); }
.turbe-envio {
  font-family: var(--hand);
  font-size: 1.55rem;
  color: var(--bordo-dark);
  margin: 1.4rem auto 0.6rem;
  line-height: 1.3;
  max-width: 520px;
}
.turbe-colophon {
  font-family: var(--serif-old);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.28em;
  color: var(--ouro-dim);
  font-size: 0.7rem;
  margin-top: 0.6rem;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 720px) {
  body { font-size: 19px; }
  :root { --nav-height: 56px; }
  .side-arrow { display: none; }
  .vine { display: none; }
  .capa { padding: 2.6rem 1.2rem; }
  .capa ol.index a { grid-template-columns: 2.4rem 1fr; }
  .capa ol.index .date { grid-column: 2; font-size: 0.82em; margin-top: -0.2rem; }
  .capitulo { padding: 2.6rem 1.2rem 1.5rem; }
  /* Em mobile, 1 coluna só */
  .capitulo .body { column-count: 1; column-gap: 0; }
  .capitulo .body::before { display: none; }
  .capitulo .body figure.inset,
  .capitulo .body figure.inset.right {
    float: none; width: 78%;
    margin: 1rem auto 1.5rem; display: block;
  }
  /* Apêndice, orações, nada te turbe em mobile */
  .apendice, .oracoes, .nada-te-turbe { padding: 2rem 1.2rem 1.4rem; }
  .apendice-body { grid-template-columns: 1fr; gap: 1.5rem; overflow-y: auto; }
  .apendice-body .poem-scan img { max-height: 45vh; }
  .apendice-body .poem-text { max-height: none; padding-right: 0; }
  .oracoes-lista li { grid-template-columns: 1fr; gap: 0.2rem; }
  .oracoes-lista .ora-data { text-align: left; }
  .turbe-cols { grid-template-columns: 1fr; gap: 1.4rem; }
  .turbe-cols::before { display: none; }
  .intercapitulo .inter-quote .hand { font-size: 1.5rem; }
}

/* =============================================================
   ORNAMENTOS — sprite SVG, medalhões, réguas, cantoneiras,
   capitular iluminada, rosácea de vitral, flores prensadas.
   Tudo usando <use> do sprite — leve e escalonável.
   ============================================================= */

/* ---------- Régua ornamental: fleuron dourado no centro ---------- */
.ornate-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto 1.2rem;
  color: var(--ouro);
  opacity: 0.75;
  pointer-events: none;
}
.ornate-rule svg {
  width: 180px;
  height: 24px;
  display: block;
}
.capitulo .ornate-rule { margin: 0.75rem auto 1rem; }
.capitulo .ornate-rule svg { width: 160px; height: 22px; }
.frontis .ornate-rule {
  width: 220px;
  height: 28px;
  margin: 0 auto 1.4rem;
  opacity: 0.8;
}
.frontis .ornate-rule svg { width: 220px; height: 28px; }

/* ---------- Tail-piece (fecho do capítulo) ---------- */
.tail-piece {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ouro);
  opacity: 0.7;
  margin: 0.6rem auto 0.4rem;
  pointer-events: none;
}
.tail-piece svg {
  width: 180px;
  height: 24px;
}
/* substitui o ❦ gerado pelo ::before original */
.chapter-footer::before { content: none; }

/* ---------- Medalhão do capítulo — numeral romano em moldura dourada ---------- */
.chapter-medallion {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0 auto 0.8rem;
  color: var(--ouro);
  display: flex;
  align-items: center;
  justify-content: center;
  /* brilho radial sutil atrás da moldura */
  filter: drop-shadow(0 0 3px rgba(201,165,92,0.25));
}
.chapter-medallion svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ouro);
}
.chapter-medallion .numeral {
  position: relative;
  font-family: var(--serif-title);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--bordo-dark);
  letter-spacing: 0.04em;
  text-shadow:
    0 0 1px rgba(255,248,230,0.65),
    0 1px 0 rgba(255,255,255,0.2);
  line-height: 1;
}
.chapter-medallion.final {
  filter: drop-shadow(0 0 6px rgba(201,165,92,0.4));
}
.chapter-medallion.final svg { color: var(--bordo); opacity: 0.9; }
.chapter-medallion.final .numeral { color: var(--bordo-dark); }
.chapter-medallion.inter .numeral {
  font-size: 1.2rem;
  color: var(--ouro-dim);
  font-style: normal;
}

/* ---------- Cantoneiras (frontispício, apêndice) ---------- */
.corner {
  position: absolute;
  width: 96px;
  height: 96px;
  color: var(--ouro);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
.corner.tl { top: 28px; left: 28px; }
.corner.tr { top: 28px; right: 28px; transform: scaleX(-1); }
.corner.bl { bottom: 28px; left: 28px; transform: scaleY(-1); }
.corner.br { bottom: 28px; right: 28px; transform: scale(-1,-1); }

/* ---------- Fio de ouro na borda das páginas (douradura do miolo) ---------- */
main.book .page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background:
    linear-gradient(180deg,
      rgba(201,165,92,0) 0%,
      rgba(201,165,92,0.35) 8%,
      rgba(201,165,92,0.55) 50%,
      rgba(201,165,92,0.35) 92%,
      rgba(201,165,92,0) 100%);
  pointer-events: none;
  z-index: 4;
  opacity: 0.9;
}
main.book .page::after {
  /* não sobrescrever a sombra de vinco existente — ela é ::after também.
     a douradura está em ::before acima. */
}

/* ---------- Rosácea de vitral (atrás do "Nada te turbe") ---------- */
.rose-window-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(68vh, 680px);
  height: min(68vh, 680px);
  transform: translate(-50%, -50%);
  color: var(--bordo);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 24px rgba(201,165,92,0.35));
  animation: rosePulse 9s ease-in-out infinite;
}
@keyframes rosePulse {
  0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.18; transform: translate(-50%, -50%) scale(1.015); }
}
.nada-te-turbe .turbe-inner {
  position: relative;
  z-index: 1;
}

/* ---------- Flor prensada (apêndice — herbarium da Ceci) ---------- */
.pressed-flower {
  position: absolute;
  width: 74px;
  height: 110px;
  color: var(--salvia-dark);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  filter: saturate(0.85);
}
.pressed-flower.tl { top: 26px; left: 26px; transform: rotate(-8deg); }
.pressed-flower.tr { top: 26px; right: 26px; transform: scaleX(-1) rotate(-8deg); }
.pressed-flower.bl { bottom: 86px; left: 26px; transform: rotate(12deg); }
.pressed-flower.br { bottom: 86px; right: 26px; transform: scaleX(-1) rotate(12deg); }

/* A flor da direita tem tom mais avermelhado (amor-perfeito seco) */
.pressed-flower.br { color: var(--bordo); opacity: 0.42; }

/* ---------- Lírio mariano (acento Cap II — "no santo Carmelo") ---------- */
/* Posicionado na margem externa superior-direita, bem abaixo da vinha.tl
   que ocupa (16-156, 16-156). */
.lily-accent {
  position: absolute;
  top: 180px;
  right: 38px;
  width: 34px;
  height: 50px;
  color: var(--maria);
  opacity: 0.38;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(45,75,138,0.22));
}

/* ---------- Rosebud (acento Cap VI — rosa de Teresinha) ---------- */
.rose-accent {
  position: absolute;
  top: 180px;
  right: 38px;
  width: 32px;
  height: 46px;
  color: var(--bordo);
  opacity: 0.48;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(107,46,42,0.25));
}

/* desenhar-se com uma pequena animação de entrada */
@keyframes accentDraw {
  0%   { opacity: 0; transform: translateY(-6px) rotate(-4deg); }
  100% { opacity: var(--acc-op, 0.45); transform: translateY(0) rotate(0); }
}
main.book .page.current.first-view .lily-accent { --acc-op: 0.42; animation: accentDraw 1000ms ease-out 500ms both; }
main.book .page.current.first-view .rose-accent { --acc-op: 0.52; animation: accentDraw 1000ms ease-out 500ms both; }

/* ---------- Medalhão: glow suave na primeira visita ---------- */
@keyframes medalhaoReveal {
  0%   { transform: scale(0.7) rotate(-10deg); opacity: 0; filter: drop-shadow(0 0 0 rgba(201,165,92,0)); }
  60%  { filter: drop-shadow(0 0 14px rgba(201,165,92,0.55)); }
  100% { transform: scale(1) rotate(0);        opacity: 1; filter: drop-shadow(0 0 3px rgba(201,165,92,0.25)); }
}
main.book .page.current.first-view .chapter-medallion {
  animation: medalhaoReveal 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms both;
}

/* ---------- Cantoneiras: desenho progressivo ---------- */
@keyframes cornerDraw {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sx,1), var(--sy,1)) translate(-10px,-10px); }
  to   { opacity: 0.55; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sx,1), var(--sy,1)) translate(0,0); }
}
main.book .page.current.first-view .corner.tl { animation: cornerDraw 1100ms ease-out 300ms both; }
main.book .page.current.first-view .corner.tr { animation: cornerDraw 1100ms ease-out 400ms both; --sx: -1; }
main.book .page.current.first-view .corner.bl { animation: cornerDraw 1100ms ease-out 500ms both; --sy: -1; }
main.book .page.current.first-view .corner.br { animation: cornerDraw 1100ms ease-out 600ms both; --sx: -1; --sy: -1; }

/* ---------- Blockquote: letra inicial com um pingo dourado ---------- */
.capitulo .body blockquote {
  position: relative;
}
.capitulo .body blockquote::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.1rem;
  width: 4px;
  height: 4px;
  background: var(--ouro);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(201,165,92,0.6);
}

/* ---------- Sumário: setinha dourada ornamentada no hover ---------- */
.capa ol.index li:not(.locked) a::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--ouro);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s ease;
  opacity: 0.7;
}
.capa ol.index li:not(.locked):hover a::after { transform: translateY(-50%) scaleX(1); }

/* ---------- Responsive — ocultar detalhes pesados em mobile ---------- */
@media (max-width: 720px) {
  .corner { width: 64px; height: 64px; }
  .corner.tl, .corner.tr { top: 14px; }
  .corner.bl, .corner.br { bottom: 14px; }
  .corner.tl, .corner.bl { left: 14px; }
  .corner.tr, .corner.br { right: 14px; }
  .pressed-flower { width: 50px; height: 74px; }
  .pressed-flower.tl, .pressed-flower.tr { top: 14px; }
  .pressed-flower.bl, .pressed-flower.br { bottom: 64px; }
  .chapter-medallion { width: 56px; height: 56px; }
  .chapter-medallion .numeral { font-size: 1.15rem; }
  .ornate-rule svg { width: 140px; }
  .tail-piece svg { width: 140px; }
  main.book .page::before { display: none; }
  .rose-window-bg { width: 90vw; height: 90vw; opacity: 0.1; }
}

/* =============================================================
   FLORA — flores prensadas acumulativas por capítulo.
   Geradas via JS, distribuídas em cantos. mix-blend-mode faz o
   fundo creme da prancha se dissolver no papel. Acumula da I à VII.
   ============================================================= */
.flora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;        /* atrás do texto, na frente da textura de papel */
  overflow: hidden;
}
.flora .petal {
  position: absolute;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0));
  /* Mesmo com o cutout do _process.py, o bounding-box retangular da
     prancha ainda se insinua contra o papel. Multiply apaga tudo que é
     mais claro que o papel (halo/resíduo) e funde as cores escuras na
     textura — efeito de flor prensada, não colada. A máscara radial
     dissolve os cantos pra não sobrar forma de quadro. */
  mix-blend-mode: multiply;
  filter: saturate(0.85) contrast(1.04);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, rgba(0,0,0,0.65) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 55%, rgba(0,0,0,0.65) 78%, transparent 100%);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 700ms ease;
}
/* Quando a página é visitada, as flores aparecem em cascata suave. */
main.book .page.current .flora .petal {
  opacity: var(--op, 0.5);
  transition-delay: var(--delay, 120ms);
}

/* ---------- Humores (mood) ---------- */
/* .flora-veil — véu leve, flor desaturada */
.flora-veil .petal { filter: saturate(0.55) contrast(0.96) hue-rotate(-4deg); }

/* .flora-bloom — florescer natural, paleta quente */
.flora-bloom .petal { filter: saturate(0.98) contrast(1.02); }

/* .flora-wither — desvio: sepia, mais escuro, algumas caídas */
.flora-wither .petal {
  filter: sepia(0.55) saturate(0.75) brightness(0.88) hue-rotate(-8deg) contrast(1.05);
}

/* .flora-silence — quase nada, pétalas muito tênues */
.flora-silence .petal {
  filter: grayscale(0.55) sepia(0.25) saturate(0.7) brightness(0.95);
}

/* .flora-petal — só pétalas esparsas, rosa-pálido */
.flora-petal .petal {
  filter: saturate(0.72) contrast(0.98) hue-rotate(-2deg);
}

/* .flora-home — casa de Brazlândia: tons quentes */
.flora-home .petal {
  filter: saturate(0.95) contrast(1.03) hue-rotate(-4deg) brightness(1.02);
}

/* .flora-rich — profusão: cor cheia, drop-shadow sutil */
.flora-rich .petal {
  filter: saturate(1.02) contrast(1.04) drop-shadow(0 2px 4px rgba(107,46,42,0.12));
}

/* ---------- Assinaturas cumulativas ---------- */
/* A assinatura do capítulo atual fica mais presente — drop-shadow leve
   pra parecer recém-colada no papel. */
.flora .petal.petal-sig {
  filter: saturate(0.96) contrast(1.05) drop-shadow(0 1.5px 2.8px rgba(107,46,42,0.18));
  z-index: 2;
}
/* Assinaturas dos capítulos anteriores — envelhecidas, sépia, como se
   tivessem sido coladas há dias. Mais apagadas, sem sombra. */
.flora .petal.petal-ghost {
  filter: sepia(0.35) saturate(0.65) brightness(0.98) contrast(0.96);
  z-index: 1;
}

/* Quando a página tá virada (flipped) ou atrás, esconder as flores
   pra não aparecer no verso durante a rotação 3D. */
main.book .page.flipped .flora,
main.book .page.behind  .flora { opacity: 0; }

/* ---------- Ajuste mobile — menos flores, menor opacidade pra legibilidade ---------- */
@media (max-width: 720px) {
  .flora .petal { width: 78px !important; opacity: calc(var(--op, 0.5) * 0.7); }
  /* Em mobile, some flores podem invadir o texto — cortar as de meio */
  .flora .petal.zone-ml,
  .flora .petal.zone-mr { display: none; }
}

/* ---------- Z-index — garantir que texto fica em cima ---------- */
/* As peças de conteúdo ficam no stacking natural; força explícito pras
   páginas onde o flora pode encostar. */
.capitulo .capitulo-inner,
.capa .capa-inner,
.frontis .frontis-inner,
.intercapitulo .intercapitulo-inner,
.apendice .apendice-inner,
.oracoes .oracoes-inner,
.nada-te-turbe .turbe-inner { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  main.book .page {
    transition-duration: 0ms !important;
  }
  main.book .page.current .capa-inner,
  main.book .page.current .capitulo-inner,
  main.book .page.current .locked-page,
  main.book .page.current .apendice-inner,
  main.book .page.current .oracoes-inner,
  main.book .page.current .turbe-inner,
  main.book .page.current .intercapitulo-inner { animation: none; }
  main.book .page.current .chapter-medallion,
  main.book .page.current .corner,
  .rose-window-bg { animation: none !important; }
}

/* =============================================================
   MOBILE — refinamentos finos (além do bloco 720px acima)
   ============================================================= */
@media (max-width: 720px) {
  /* Corpo dos capítulos: no mobile, 1 coluna + scroll dentro da página.
     Sem isso, capítulos longos eram cortados pela height fixa da page. */
  .capitulo .body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 2px;
  }
  .capitulo .body p { font-size: 1.02rem; line-height: 1.6; }
  .capitulo .body blockquote { font-size: 1.02rem; margin: 0.7rem 0 0.8rem 0.2rem; }
  .capitulo .body blockquote .hand { font-size: 1.35em; }

  /* Cabeçalho de capítulo mais comprimido no celular */
  .capitulo .chapter-medallion { margin-bottom: 0.5rem; }
  .capitulo h2 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .capitulo .dek { font-size: 0.92rem; }
  .capitulo .chapter-epigraph { margin: 0.5rem auto 0.8rem; }
  .capitulo .chapter-epigraph .hand { font-size: 1.2rem; }
  .capitulo .rule { margin: 0.6rem auto 0.8rem; }
  .capitulo .ornate-rule { margin: 0.5rem auto 0.7rem; }
  .capitulo .tail-piece { margin: 0.4rem auto 0.3rem; }

  /* Frontispício: tipografia que cabe em iPhone SE (375px) */
  .frontis { padding: 2.2rem 1.2rem 1rem; }
  h1.frontis-title { font-size: clamp(2.1rem, 10vw, 3.2rem); line-height: 1.05; }
  .frontis-sub { font-size: 1.1rem; margin-bottom: 1.8rem; }
  .frontis-author { font-size: 1.4rem; }
  .frontis-mark { font-size: 0.95rem; letter-spacing: 0.45em; margin-bottom: 1.6rem; }

  /* Capa / Sumário: menos ar, índice mais legível */
  .capa { padding: 2rem 1rem 1.2rem; }
  .capa h1.title { font-size: clamp(1.65rem, 7.5vw, 2.2rem); }
  .capa .subtitle { font-size: 0.95rem; }
  .capa ol.index { font-size: 0.94rem; }
  .capa ol.index a { padding: 0.42rem 0; grid-template-columns: 2rem 1fr; gap: 0.6rem; }
  .capa ol.index .name em { font-size: 1em; }
  .capa .epigraph .hand { font-size: 1.15rem; }
  .sumario-sublabel { letter-spacing: 0.42em; }

  /* Página travada: respira menos em tela pequena */
  .locked-page { padding: 2.6rem 1.2rem; }
  .locked-page .lock-title { font-size: 1.5rem; margin-bottom: 1.2rem; }
  .locked-page .lock-icon { font-size: 2.3rem; }

  /* Intercapítulo: encolher a citação em letra de caneta */
  .intercapitulo { padding: 2rem 1.2rem; }
  .intercapitulo .inter-quote .hand { font-size: 1.45rem; line-height: 1.35; }

  /* Oração: datas acima do corpo, spacing enxuto */
  .oracoes-lista li { padding: 0.55rem 0; }
  .oracoes-lista .ora-data { font-size: 0.74rem; }
  .oracoes-lista .ora-corpo { font-size: 0.95rem; }
  .oracoes-fecho { font-size: 0.95rem; }

  /* Apêndice: scan respira, poema logo abaixo */
  .apendice { padding: 1.6rem 1.1rem 1.2rem; }
  .apendice-header h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .apendice-intro { font-size: 0.88rem; }
  .apendice-body { gap: 1.2rem; }
  .apendice-body .poem-stanza { font-size: 0.98rem; line-height: 1.55; }

  /* Nada te turbe: tipografia do salmo bate certo */
  .nada-te-turbe { padding: 2rem 1.2rem 1.2rem; }
  .turbe-title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .turbe-text { font-size: 1rem; line-height: 1.65; }
  .turbe-envio { font-size: 1.35rem; }

  /* Navegação: toque >=44px (iOS HIG / Material) */
  .book-nav { gap: 1rem; }
  .book-nav .arrow { width: 44px; height: 44px; font-size: 1.4rem; }
  .book-nav .counter { font-size: 0.88rem; min-width: 70px; letter-spacing: 0.14em; }

  /* Rosário: contas menores cabem mais capítulos na largura do celular */
  .rosary { gap: 4px; padding: 4px 6px; }
  .rosary .bead { width: 7px; height: 7px; }
  .rosary .bead.big { width: 10px; height: 10px; }

  /* Fita do marcador: um pouco mais discreta */
  .bookmark-ribbon { right: 6%; }

  /* 3D page-flip: reduzir "peso" do giro no celular.
     Perspective menor suaviza artefatos de rendering em GPU mobile. */
  main.book { perspective: 1600px; }
  main.book .page { transition-duration: 800ms; }

  /* Brasões/selos: escala pra não dominar a tela estreita */
  .brasao-carmo { width: 44px; }
  .wax-seal { width: 52px; height: 52px; }
  .wax-seal .wax-letter { font-size: 1.7rem; }

  /* Acento floral lateral fica alto demais em tela pequena - recolhe */
  .lily-accent, .rose-accent { top: 120px; right: 20px; width: 26px; height: 38px; }

  /* Skip-link mais acessível */
  .skip-link:focus { left: 10px; top: 10px; }
}

/* Telas bem estreitas (iPhone SE 1a geração / Android antigo) */
@media (max-width: 400px) {
  body { font-size: 17.5px; }
  .capa { padding: 1.8rem 0.9rem 1rem; }
  .capitulo { padding: 2.2rem 1rem 1.2rem; }
  .capa ol.index a { grid-template-columns: 1.7rem 1fr; gap: 0.5rem; }
  .capa ol.index .num { font-size: 0.85em; }
  .rosary { gap: 3px; }
  .rosary .bead { width: 6px; height: 6px; }
  .rosary .bead.big { width: 9px; height: 9px; }
  .book-nav .counter { min-width: 56px; font-size: 0.82rem; }
  .frontis .scroll-hint, .capa .scroll-hint { font-size: 0.72rem; }
}

/* Landscape de celular — altura curta, layout compacto. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  :root { --nav-height: 48px; }
  .capitulo { padding: 1rem 2rem; }
  .capitulo .chapter-medallion { width: 44px; height: 44px; margin-bottom: 0.3rem; }
  .capitulo .chapter-medallion .numeral { font-size: 1rem; }
  .capitulo h2 { font-size: 1.4rem; margin-bottom: 0.1em; }
  .capitulo .dek { font-size: 0.82rem; }
  .capitulo .chapter-epigraph { margin: 0.3rem auto 0.6rem; }
  .capitulo .chapter-epigraph .hand { font-size: 1.05rem; }
  .capitulo .rule, .capitulo .ornate-rule { margin: 0.35rem auto 0.5rem; }
  .capitulo .body { column-count: 2; column-gap: 2rem; overflow-y: auto; }
  .capitulo .body::before { display: block; }
  .frontis { padding: 1rem 1.4rem; }
  h1.frontis-title { font-size: 2.1rem; }
  .frontis-sub { font-size: 0.95rem; margin-bottom: 1rem; }
  .frontis-mark { margin-bottom: 0.8rem; }
  .frontis-author { font-size: 1.2rem; margin-bottom: 0.8rem; }
  .capa { padding: 1rem 2rem; }
  .capa h1.title { font-size: 1.6rem; }
  .capa .epigraph { margin-top: 0.4rem; }
  .apendice, .oracoes, .nada-te-turbe { padding: 1rem 2rem 0.8rem; }
  .apendice-body { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .apendice-body .poem-scan img { max-height: 60vh; }
  .bookmark-ribbon { height: 90px; }
  .rose-window-bg { width: 60vh; height: 60vh; }
  .corner { width: 52px; height: 52px; }
}

/* iOS: evitar auto-zoom em inputs. */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px; }
}

/* =============================================================
   MOBILE — virar o "livro 3D" em scroll vertical normal.
   No celular: só a página atual aparece, o dedo rola o conteúdo,
   e a troca de página é exclusivamente pelas setas do rodapé.
   ============================================================= */
@media (max-width: 720px) {
  html, body {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  main.book {
    perspective: none;
    height: auto;
    min-height: var(--page-h);
    overflow: visible;
    background: var(--paper);
  }

  /* Página agora é um bloco normal, não uma carta empilhada em 3D */
  main.book .page {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: auto;
    min-height: var(--page-h);
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    overflow: visible;
    padding-bottom: calc(var(--nav-height) + 2rem + var(--safe-bottom));
  }
  main.book .page > * { filter: none !important; }

  /* Esconde páginas que não estão atuais — remove giro e encosto de dobra */
  main.book .page:not(.current) { display: none; }
  main.book .page::before,
  main.book .page::after { display: none; }

  /* Capítulo: layout de bloco, sem altura fixa nem flex vertical forçado.
     O conteúdo respira — o dedo rola a tela toda. */
  .capitulo {
    height: auto;
    min-height: var(--page-h);
    display: block;
    align-items: initial;
  }
  .capitulo .capitulo-inner {
    height: auto;
    display: block;
  }
  .capitulo .body {
    overflow: visible;
    overflow-y: visible;
    column-count: 1;
    column-gap: 0;
    height: auto;
    display: block;
    padding-right: 0;
  }
  .capitulo .body::before { display: none; }

  /* Apêndice, orações, nada te turbe — idem: bloco que cresce */
  .apendice, .oracoes, .nada-te-turbe {
    height: auto;
    min-height: var(--page-h);
    display: block;
    align-items: initial;
  }
  .apendice-inner, .oracoes-inner {
    height: auto;
    display: block;
    overflow: visible;
  }
  .apendice-body {
    display: block;
    overflow: visible;
    margin-top: 1rem;
  }
  .apendice-body .poem-scan { margin-bottom: 1.5rem; }
  .apendice-body .poem-scan img { max-height: 50vh; }
  .apendice-body .poem-text {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .oracoes-lista {
    overflow: visible;
    max-height: none;
    flex: initial;
  }

  /* Fólio fica no cantinho da página; com scroll natural,
     ancora no próprio conteúdo. */
  .folio { position: relative; bottom: auto; right: auto; text-align: right; margin-top: 1rem; padding-right: 0.4rem; }

  /* Fita do marcador: como a página agora pode rolar,
     prende a fita na viewport, não na página. */
  .bookmark-ribbon { position: fixed; }

  /* Nav fixo no rodapé (já é fixed) — scroll acontece por trás dele */
  .book-nav { background: linear-gradient(180deg, rgba(243,233,210,0) 0%, rgba(243,233,210,0.96) 35%, var(--paper) 70%); }

  /* Flora: limita à dobra visível pra não aparecer no meio do texto longo */
  main.book .page .flora { height: var(--page-h); }
}

/* Desktop: preserva 100vh rígido da experiência "livro horizontal".
   (regra implícita: fora do media-query acima, tudo fica como antes.) */