/* ============================================================
   A Trolha e o que distingue o Companheiro — tema reveal.js
   Identidade: "manual de pedra"
   Página impressa de um catecismo de oficina: pergaminho claro,
   tinta grafite, óxido (a mão · o uso) e ardósia (o olhar · o
   veredito). O fio visual é a COSTURA: o vão entre duas coisas
   que a argamassa preenche.
   ============================================================ */

:root {
  /* papel */
  --paper:       #f1ead9;
  --paper-deep:  #e9dfc9;
  --paper-panel: #ece3cf;

  /* tinta */
  --ink:         #2b2620;
  --ink-dim:     #6f6759;
  --ink-faint:   rgba(43, 38, 32, 0.42);
  --ink-ghost:   rgba(43, 38, 32, 0.16);

  /* acento mão — óxido (uso, verbo, a Trolha) */
  --ox:          #9c3f2c;
  --ox-deep:     #7c2f1f;
  --ox-soft:     rgba(156, 63, 44, 0.10);

  /* acento olhar — ardósia (medição, veredito) */
  --slate:       #56656f;
  --slate-deep:  #41505a;
  --slate-soft:  rgba(86, 101, 111, 0.09);

  --frame-1:     rgba(43, 38, 32, 0.32);
  --frame-2:     rgba(43, 38, 32, 0.15);
  --ghost:       rgba(43, 38, 32, 0.065);
  --line:        rgba(43, 38, 32, 0.22);
  --line-strong: rgba(43, 38, 32, 0.45);

  --display: "Spectral", "Iowan Old Style", Georgia, serif;
  --body:    "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

/* ---------- palco ---------- */
html, body { background: var(--paper); transition: background-color 0.75s ease; }
.reveal { font-family: var(--body); color: var(--ink); font-size: 38px; }
.reveal-viewport { background: var(--paper); transition: background-color 0.75s ease; }

/* grão de papel */
.reveal-viewport::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* profundidade de impressão: bordas levemente mais densas */
.reveal-viewport::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(130% 110% at 50% 45%, transparent 62%, rgba(74, 60, 40, 0.10) 100%);
}

/* moldura de prancha (página de livro impresso) — coordenadas no
   espaço do slide (1280×720): escala junto com o deck em qualquer tela */
#plate { position: absolute; inset: 0; pointer-events: none; z-index: 55; }
#plate::before {
  content: ""; position: absolute; inset: -16px; border: 1.5px solid var(--frame-1);
}
#plate::after {
  content: ""; position: absolute; inset: -10px; border: 1px solid var(--frame-2);
}

/* rodapé corrido (também no espaço do slide) */
#foot {
  position: absolute; left: 26px; right: 26px; bottom: 12px; z-index: 56;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); pointer-events: none;
}
#foot .mid { letter-spacing: 0.3em; }
.on-title #foot { display: none; }

.reveal .slides { text-align: left; }
.reveal .slides section { z-index: 1; height: 100% !important; box-sizing: border-box; }

/* a seção vira caixa; o conteúdo mora no .fitwrap, que se encolhe se precisar */
/* a seção é só a caixa: display e posição continuam com o reveal */
.reveal .slides section.slidebox { padding: 0; overflow: hidden; }
.fitwrap { position: absolute; inset: 0; transform-origin: 50% 0; }
.fitwrap.medindo::after, .fitwrap.medindo::before { content: none !important; }

/* overview (Esc): sem transição e sem camada viva — 72 slides de uma vez */
html.em-overview .reveal * { transition: none !important; animation: none !important; }
html.em-overview #ambient { display: none; }
html.em-overview .reveal-viewport::after { display: none; }

/* camada viva sob o papel (ambient.js) */
#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 1; transition: opacity 0.32s ease; }

/* a regra de seção do reveal (.present -> display:block) empata em
   especificidade e vem antes — !important encerra a discussão */
.reveal .slides section.sheet {
  display: flex !important; flex-direction: column; padding: 5.6% 7% 60px; box-sizing: border-box;
}

/* ---------- tipografia base ---------- */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--display); color: var(--ink); font-weight: 500;
  line-height: 1.06; letter-spacing: -0.005em; margin: 0; text-transform: none;
  text-shadow: none;
}
.reveal p { line-height: 1.45; margin: 0 0 0.5em; }
.reveal em { font-style: italic; }
.reveal strong { font-weight: 600; color: var(--ox); }

.t { font-style: italic; }                 /* termo alemão em linha */
.ox { color: var(--ox); }
.sl { color: var(--slate); }

/* ---------- pranchas fotográficas ---------- */
/* Duas modalidades, nunca véu uniforme:
   FG — painel/banda 100% stretched com borda seca; a junção com o texto
        é uma costura (filete de óxido ou ardósia: a argamassa do tema).
   BG — fullscreen com scrim DIRECIONAL (papel → imagem), o texto mora
        na zona de papel e a fotografia aparece inteira na dela. */
.plate-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
/* painel lateral do título: full-bleed até a borda da folha, corte seco */
.photo-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.photo-panel .junction {
  position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px;
}
/* banda horizontal: faixa 100% da largura, bordas secas em linha de tinta */
.photo-band {
  flex: 1; min-height: 8rem; margin: 1.1rem 0;
  background-size: cover; background-position: center;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}

/* ---------- kicker de seção (§ de documento) ---------- */
.kicker {
  font-family: var(--mono); font-size: 1.568rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: center; gap: 0.9em; margin: 0 0 1.1rem;
}
.kicker::before { content: ""; width: 1.9em; height: 3px; background: var(--ox); }
.kicker .rn { color: var(--ox); font-weight: 600; }

/* pincelada rústica: marca-texto pintado sob a palavra do título.
   Borda irregular via feTurbulence; pinta da esquerda p/ direita
   (clip-path) quando o slide entra. Óxido = termo de uso/alemão;
   ardósia = a palavra portuguesa posta em xeque. */
.brush { position: relative; z-index: 0; white-space: nowrap; }
.brush::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0.04em -0.18em -0.12em -0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-40%25' width='120%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.35' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%239c3f2c' fill-opacity='0.30' d='M4 24 C30 12 60 17 100 14 C140 12 176 16 196 20 L194 32 C160 37 120 32 80 35 C50 37 20 34 6 32 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(-12% 102% -12% -2%);
  transition: clip-path 0.85s cubic-bezier(.55, .06, .28, .99) 0.55s;
}
.brush.sl::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-40%25' width='120%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.3' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%2341505a' fill-opacity='0.26' d='M5 22 C34 14 70 15 104 13 C142 12 178 17 195 21 L193 33 C158 36 118 33 82 35 C48 36 18 33 6 31 Z'/%3E%3C/svg%3E");
}
section.present .brush:not(.fb)::before, .go .brush::before,
.fragment.visible .brush.fb::before,
.brush.fb.lit::before { clip-path: inset(-12% -2% -12% -2%); }
@media (prefers-reduced-motion: reduce) { .brush::before { transition: none; } }

/* ---------- folha ---------- */
/* fundo da folha em 60px: o conteúdo para em y≈660 e nunca entra
   na faixa do rodapé corrido (672–706) */
.sheet { height: 100%; display: flex; flex-direction: column; padding: 5.6% 7% 60px; box-sizing: border-box; }
.sheet.center { align-items: center; justify-content: center; text-align: center; }

.h-title { font-size: 3.8rem; font-weight: 500; letter-spacing: -0.01em; }
.h-sub   { font-family: var(--body); font-style: italic; font-size: 2.205rem; color: var(--ink-dim); }
.lead    { font-size: 2.52rem; color: var(--ink); max-width: 34ch; line-height: 1.42; }
.takeaway{ font-family: var(--body); font-style: italic; font-size: 2.468rem; color: var(--ink-dim); }

/* ---------- marginalia / notas de rodapé de manual ---------- */
.note {
  font-family: var(--mono); font-size: 1.61rem; letter-spacing: 0.03em;
  line-height: 1.55; color: var(--ink-dim);
}
.note b { color: var(--ox); font-weight: 600; }
.note .sl { color: var(--slate-deep); }
.note-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.note-row .note { margin-bottom: 0; }

/* ---------- a COSTURA (fio visual do deck) ---------- */
/* fio de tinta que se preenche de óxido — a argamassa entrando na junta */
.seam { position: relative; background: var(--line); overflow: visible; }
.seam::after {
  content: ""; position: absolute; inset: -0.5px 0; background: var(--ox);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 1.3s cubic-bezier(.45, 0, .12, 1) 0.15s;
}
.seam.h::after { inset: 0 -0.5px; transform: scaleX(0); }
.seam.v::after { inset: -0.5px 0; transform: scaleY(0); transform-origin: 50% 0%; }
.seam.from-center::after { transform-origin: 50% 50%; }
.seam.from-ends::after { transform-origin: 50% 50%; }
/* gatilhos */
.go .seam.h::after, .go .seam.v::after,
.fragment.visible .seam.h::after, .fragment.visible .seam.v::after,
.seam.fragment.visible::after,
section.present .seam.pre-filled.h::after, section.present .seam.pre-filled.v::after {
  transform: scaleX(1) scaleY(1);
}
.seam.v::after { transform-origin: 50% 0%; }

/* ---------- duas vozes (VM / 1.º V) ---------- */
.qa { display: flex; flex-direction: column; gap: 1.15rem; }
.qa .turn p { margin-bottom: 0; }
.turn { display: grid; grid-template-columns: 6.2rem 1fr; column-gap: 1.6rem; align-items: baseline; }
.turn .who {
  font-family: var(--mono); font-size: 1.54rem; letter-spacing: 0.14em;
  color: var(--ink-dim); white-space: nowrap; text-align: right;
}
.turn .who b { color: var(--ink); font-weight: 600; }
.turn .ask { font-family: var(--display); font-weight: 500; font-size: 2.31rem; line-height: 1.28; color: var(--ink); }
.turn .ans { font-family: var(--body); font-style: italic; font-size: 2.152rem; line-height: 1.3; color: var(--ink); }
.turn.answer { position: relative; }
.turn.answer .ask, .turn.answer .ans { padding-left: 1.5rem; border-left: none; }
.turn.answer::before {
  content: ""; position: absolute; left: 0; top: 0.28em; bottom: 0.28em; width: 3px;
  background: var(--ox); opacity: 0.85;
}
.turn.answer .who { color: var(--ox); }

/* citação hero (pergaminho claro) */
.hero-quote { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.hero-quote .q {
  font-family: var(--body); font-style: italic; font-size: 3.05rem; line-height: 1.36;
  color: var(--ink); max-width: 30ch;
}
.hero-quote .src {
  font-family: var(--mono); font-size: 1.24rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
}
.hero-quote .takeaway { margin-top: 0.6rem; }
/* bloco, não inline-block: baseline de inline-block multilinha é a última
   linha interna e faz o grid içar o parágrafo sobre o texto de cima */
.morph-target { display: block; }

/* palavras-âncora (morph de forma) */
.anchor {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 8.2rem; line-height: 1.02; color: var(--ink); letter-spacing: -0.01em;
}

/* ---------- título (split hero: texto | fotografia) ---------- */
.title-photo { width: 41%; }
.title-world {
  position: relative; z-index: 1; width: 55%;
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; text-align: left;
}
.title-epi {
  font-family: var(--mono); font-size: 1.512rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 2.8rem;
}
.title-main {
  font-family: var(--display); font-weight: 300; font-size: 4.9rem; line-height: 1.1;
  color: var(--ink); letter-spacing: -0.01em;
}
.title-main .trolha { font-style: italic; font-weight: 400; color: var(--ox); }
.title-seam { width: 22rem; height: 1.5px; margin: 2.4rem 0 2rem; }
.title-sub { font-style: italic; font-size: 2.205rem; color: var(--ink-dim); }
.title-meta {
  margin-top: 3rem; font-family: var(--mono);
  font-size: 1.428rem; letter-spacing: 0.16em; color: var(--ink-dim); line-height: 2.1;
  text-transform: uppercase;
}
.title-meta .sig { color: var(--ink); font-weight: 600; }

/* ---------- cartório do catecismo (S3) ---------- */
.ledger { width: 100%; margin-top: 0.4rem; }
.ledger .lrow {
  display: grid; grid-template-columns: 3.2rem 14rem 1fr 17.5rem;
  column-gap: 1.6rem; align-items: baseline;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line);
}
.ledger .lhead {
  font-family: var(--mono); font-size: 1.54rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); border-bottom: 1px solid var(--line-strong); padding-bottom: 0.55rem;
}
.ledger .num { font-family: var(--mono); font-size: 1.54rem; color: var(--ink-faint); }
.ledger .inst { font-family: var(--display); font-weight: 500; font-size: 1.995rem; color: var(--ink); }
.ledger .ask { font-family: var(--body); font-size: 1.995rem; color: var(--ink); }
.ledger .ask .ghost { font-style: italic; color: var(--ink); transition: opacity 0.9s ease; }
.ledger .verb { font-family: var(--display); font-style: italic; font-size: 1.995rem; color: var(--ink-dim); }
/* erosão da elipse: o verbo herdado some linha a linha */
.ledger .lrow[data-e="1"] .ghost { opacity: 0.44; }
.ledger .lrow[data-e="2"] .ghost { opacity: 0.28; }
.ledger .lrow[data-e="3"] .ghost { opacity: 0.14; }
/* a quebra */
.ledger .lrow.break {
  border-bottom: none; background: var(--ox-soft);
  margin-top: 0.5rem; border-top: 1px solid var(--ox);
  padding: 0.85rem 0.9rem;
}
.ledger .lrow.break .num { color: var(--ox); font-weight: 600; }
.ledger .lrow.break .inst { color: var(--ox); }
.ledger .lrow.break .ask { font-family: var(--display); font-weight: 500; font-style: normal; font-size: 2.109rem; color: var(--ink); }
.ledger .lrow.break .verb { color: var(--ox); font-weight: 500; }
.ledger .lrow.break { position: relative; }
.ledger .lrow.break::after {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--ox);
}
/* entrada especial da linha da quebra */
.reveal .lrow.fragment.rise { transform: translateY(12px); opacity: 0; transition: all 0.55s cubic-bezier(.2,.7,.2,1); }
.reveal .lrow.fragment.rise.visible { transform: none; opacity: 1; }
.reveal .lrow.fragment.break-r { transform: translateX(-26px); opacity: 0; transition: all 0.7s cubic-bezier(.2,.8,.25,1); }
.reveal .lrow.fragment.break-r.visible { transform: none; opacity: 1; }

/* ---------- veredito × aplicação (S4): duas pranchas de livro ---------- */
.plates { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.6rem; margin-top: 0.8rem; flex: 1; }
.plate-card { display: flex; flex-direction: column; min-height: 0; }
.plate-card .pc-photo {
  height: 7.6rem; background-size: cover; background-position: center;
}
/* a junção fotografia→texto é a costura, na cor do eixo */
.plate-card.medir .pc-photo { border-bottom: 3px solid var(--slate-deep); }
.plate-card.aplicar .pc-photo { border-bottom: 3px solid var(--ox); }
.plate-card .pc-body { padding-top: 0.9rem; }
.plate-card .side-label {
  font-family: var(--mono); font-size: 1.47rem; letter-spacing: 0.24em; text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.plate-card.medir .side-label { color: var(--slate-deep); }
.plate-card.aplicar .side-label { color: var(--ox); }
.plate-card .word { font-family: var(--display); font-style: italic; font-size: 3.4rem; line-height: 1.05; }
.plate-card.medir .word { color: var(--slate-deep); }
.plate-card.aplicar .word { color: var(--ox); }
.plate-card .tools { margin: 0.6rem 0 0.7rem; font-family: var(--display); font-size: 1.767rem; color: var(--ink-dim); line-height: 1.6; }
.plate-card .tools .hl { color: var(--ink); }
.plate-card .gloss { font-size: 1.961rem; line-height: 1.38; color: var(--ink); max-width: 34ch; }

/* ---------- um verbo, dois lados (S7): texto em chips sobre a fotografia ---------- */
.verw-stage { position: relative; flex: 1; margin: 0.6rem 0 0.4rem; }
.verw-stage .vs-side {
  position: absolute; top: 60%; transform: translateY(-50%); width: 36%;
  background: var(--chip); padding: 1.2rem 1.5rem;
  box-shadow: 0 0 0 1px var(--line);
}
.verw-stage .vs-left  { left: 0;  text-align: right; }
.verw-stage .vs-right { right: 0; }
.verw-stage .vs-word { font-family: var(--display); font-style: italic; font-size: 3.1rem; color: var(--ink); line-height: 1.05; }
.verw-stage .vs-gloss { margin-top: 0.7rem; font-size: 2.0rem; line-height: 1.34; color: var(--ink); max-width: none; }
.verw-stage .vs-de { margin-top: 0.8rem; font-family: var(--mono); font-size: 1.54rem; letter-spacing: 0.03em; color: var(--ink-dim); }
.verw-stage .vs-verb {
  position: absolute; top: 4%; left: var(--seam-x, 50%); transform: translateX(-50%);
  z-index: 2; background: var(--paper); padding: 0.22em 0.9em;
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 2.9rem; color: var(--ox);
  box-shadow: 0 0 0 1px var(--line);
}
.verw-chip {
  background: rgba(241, 234, 217, 0.93); box-shadow: 0 0 0 1px var(--line);
  padding: 0.6em 1.2em; align-self: center;
}

/* ---------- linhagem (S5) ---------- */
.lineage { position: relative; flex-shrink: 0; margin: 0.8rem 0 1rem; padding-top: 3.4rem; height: 7.6rem; box-sizing: content-box; }
.lineage .rail { position: relative; height: 1.5px; background: var(--line); }
.lineage .rail::after {
  content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0% 50%;
  transform: scaleX(0); transition: transform 1.6s cubic-bezier(.45,0,.12,1) 0.2s;
}
section.present .lineage .rail::after { transform: scaleX(1); }
.lineage .stops { position: absolute; top: calc(3.6rem - 7px); left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.lineage .stop { text-align: left; }
.lineage .stop:nth-child(2) { text-align: center; }
.lineage .stop:nth-child(3) { text-align: right; }
.lineage .stop .dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
  margin-bottom: 0.9rem;
}
.lineage .stop:nth-child(2) .dot { margin-left: auto; margin-right: auto; }
.lineage .stop:nth-child(3) .dot { margin-left: auto; }
.lineage .stop .y { font-family: var(--display); font-weight: 600; font-size: 2.9rem; color: var(--ink); }
.lineage .stop .w { font-family: var(--mono); font-size: 1.22rem; letter-spacing: 0.06em; color: var(--ink-dim); margin-top: 0.35rem; line-height: 1.5; }
.blockquote-artifact {
  border-left: 3px solid var(--ox); padding: 0.2em 0 0.2em 1.4em; max-width: 52rem; margin-bottom: 0.6rem;
  font-family: var(--body); font-style: italic; font-size: 2.363rem; line-height: 1.4; color: var(--ink);
}
.src-line { font-family: var(--mono); font-size: 1.18rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.9rem; }

/* ---------- nota dupla (Fähigkeit × Fertigkeit, S10) ---------- */
.wordpair { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; margin-top: 0.9rem; }
.wordpair .wp { border-top: 1px solid var(--line-strong); padding-top: 0.65rem; }
.wordpair .wp .w { font-family: var(--display); font-style: italic; font-size: 2.9rem; color: var(--ink-dim); }
.wordpair .wp .d { font-size: 1.938rem; line-height: 1.36; color: var(--ink-dim); margin-top: 0.4rem; }
.wordpair .wp .r { font-family: var(--mono); font-size: 1.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.35rem; }
.wordpair .wp.chosen { border-top: 3px solid var(--ox); }
.wordpair .wp.chosen .w { color: var(--ox); }
.wordpair .wp.chosen .d { color: var(--ink); }
.wordpair .wp.dimmed { opacity: 0.55; }

/* ---------- eco tipográfico (procurar, procurar — S11) ---------- */
.echo { position: relative; display: inline-block; }
.echo .e2 { position: absolute; left: 0.06em; top: 0.06em; color: var(--ox); opacity: 0.5; }

/* ---------- o fio (S12) ---------- */
.thread-world { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0.3rem; }
.thread-word { text-align: center; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 4.3rem; color: var(--ink); letter-spacing: -0.01em; }
.reveal p.thread-word { margin-bottom: 0.05em; }
.thread-cap {
  text-align: center; font-family: var(--body); font-style: italic; font-size: 1.938rem;
  color: var(--ink-dim); margin-top: 0.15rem;
}
.thread { position: relative; margin-top: 3.1rem; height: 1.5px; background: var(--line); }
.thread::after {
  content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0% 50%;
  transform: scaleX(0); transition: transform 1.8s cubic-bezier(.45,0,.12,1) 0.25s;
}
section.present .thread::after { transform: scaleX(1); }
.thread .stops { position: absolute; top: 0; left: 0; right: 0; height: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.thread .stop { position: relative; }
.thread .stop .dot {
  position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
}
/* rótulos ancorados no CENTRO da coluna (left:50%): sem isso o
   translateX(-50%) centrava na borda esquerda, meia coluna fora do dot */
.thread .stop .pg { position: absolute; left: 50%; top: -3.2rem; width: max-content; transform: translateX(-50%); font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.12em; color: var(--ink-dim); }
.thread .stop .root { position: absolute; left: 50%; top: 1.15rem; width: 11.5rem; text-align: center; transform: translateX(-50%); font-family: var(--mono); font-size: 1.12rem; line-height: 1.3; letter-spacing: 0.03em; color: var(--ink-dim); }
.thread .stop .pt {
  position: absolute; left: 50%; top: 3.1rem; width: max-content; transform: translateX(-50%);
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 2.257rem; color: var(--ox);
  white-space: nowrap;
}
.thread .stop .ctx { position: absolute; left: 50%; top: 5.6rem; width: 11.5rem; text-align: center; transform: translateX(-50%); font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.05em; line-height: 1.35; text-transform: uppercase; color: var(--ink-dim); }
/* escadinha: paradas pares descem um degrau — seis colunas respiram */
.thread .stop:nth-child(even) .pt { top: 6.9rem; }
.thread .stop:nth-child(even) .ctx { top: 9.5rem; }
.thread .stop:nth-child(even)::after {
  content: ""; position: absolute; left: 50%; top: 2.7rem; height: 3.9rem; width: 1px;
  background: var(--line);
}
.thread-verdict { margin-top: 12.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.thread-verdict p { margin-bottom: 0; }
.thread-verdict .big { font-family: var(--display); font-size: 2.835rem; color: var(--ink); }
.thread-verdict .sub { font-family: var(--body); font-style: italic; font-size: 2.152rem; color: var(--ink-dim); }

/* ---------- fecho (S14) ---------- */
.closing-qa { width: 52rem; margin: 0 auto; text-align: left; }
.closing-qa .turn { grid-template-columns: 4.6rem 1fr; }
.closing-qa .turn .ask { font-size: 2.109rem; }
.closing-qa .turn .ans { font-size: 2.052rem; }
.closing-seam { width: 30rem; height: 1.5px; margin: 0.8rem auto; }
.closing-final {
  font-family: var(--body); font-style: italic; font-size: 2.85rem; line-height: 1.28;
  color: var(--ink); text-align: center;
  /* halo de papel: a última linha beija a crista da pedra sem perder tinta */
  text-shadow: 0 0 16px rgba(241, 234, 217, 0.95), 0 0 5px rgba(241, 234, 217, 0.9);
}
.closing-final .ox { font-style: italic; }
.closing-sig { margin-top: 3rem; font-family: var(--mono); font-size: 1.512rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); background: rgba(241, 234, 217, 0.85); padding: 0.5em 1.2em; }

/* ---------- fragments ---------- */
.reveal .fragment.rise { transform: translateY(14px); opacity: 0; transition: all 0.55s cubic-bezier(.2,.7,.2,1); }
.reveal .fragment.rise.visible { transform: none; opacity: 1; }
.reveal .fragment.rise-slow { transform: translateY(20px); opacity: 0; transition: all 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal .fragment.rise-slow.visible { transform: none; opacity: 1; }
.reveal .fragment.fade { opacity: 0; transition: opacity 0.7s ease; }
.reveal .fragment.fade.visible { opacity: 1; }

/* ---------- rodapé/numeração ---------- */
.reveal .slide-number {
  background: transparent; color: var(--ink-faint);
  font-family: var(--mono); font-size: 0.868rem; letter-spacing: 0.15em;
}
.reveal .progress { color: var(--ox); height: 2px; top: 0; bottom: auto; }

/* ---------- modo debug ---------- */
.debug .reveal .slides section * { outline: 1px solid rgba(156, 63, 44, 0.18); }
.debug .reveal .slides section { outline: 2px solid rgba(86, 101, 111, 0.6); }
.debug .qa, .debug .ledger, .debug .split, .debug .sheet { outline: 1.5px dashed rgba(86, 101, 111, 0.55) !important; }

/* auto-animate suave */
.reveal [data-auto-animate] .anchor, .reveal [data-auto-animate] .thread-word { transition-timing-function: cubic-bezier(.4,0,.1,1); }

/* ---------- o termo de comparação (S9) ---------- */
/* linhas de cota, como em desenho técnico: o vão que o catecismo
   mede encurta de um grau para o outro. No 2.º, a referência é o
   próprio obreiro de pouco tempo atrás. */
.cmp-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.2rem; }
.cmp-row { position: relative; padding-bottom: 3.5rem; }
.cmp-head {
  font-family: var(--mono); font-size: 1.61rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1.15rem;
}
.cmp-line { position: relative; height: 1.5px; background: var(--line); }
/* traços de cota nas duas pontas */
.cmp-line::before, .cmp-line::after {
  content: ""; position: absolute; top: -10px; width: 1.5px; height: 21px; background: var(--line-strong);
}
.cmp-line::before { left: 0; }
.cmp-line::after { right: 0; }
.cmp-line.short::before, .cmp-line.short::after { background: var(--ox); }
/* a cota se desenha da esquerda para a direita, como as costuras */
.cmp-line .draw {
  position: absolute; inset: 0; background: var(--line-strong);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.45, 0, .12, 1) 0.1s;
}
.cmp-line.short .draw { background: var(--ox); }
.fragment.visible .cmp-line .draw { transform: scaleX(1); }
.cmp-line .cmp-a, .cmp-line .cmp-b {
  position: absolute; top: 0.85rem; font-family: var(--display); font-size: 2.223rem;
  color: var(--ink); white-space: nowrap;
}
.cmp-line .cmp-a { left: 0; }
.cmp-line .cmp-b { right: 0; }
.cmp-line.short .cmp-b { color: var(--ox); }
/* a glosa mora no vão que a segunda cota deixou livre */
.cmp-gloss {
  position: absolute; left: 100%; top: 0.08em; margin-left: 1.5em; white-space: nowrap;
  font-family: var(--body); font-style: italic; font-size: 1.995rem; color: var(--ink-dim);
}

/* ============================================================
   DECK UNIFICADO — quatro vozes, quinze perguntas (2026-09-04)
   Gramática nova: RESPIRO (entrada de cada irmão) · PERGUNTA→
   RESPOSTA (o coro da Loja) · COMENTÁRIO (o conteúdo do irmão).
   ============================================================ */

/* ---------- respiro (entrada de cada irmão) ---------- */
.sheet.respiro { justify-content: flex-start; padding: 4.2% 7% 58px; }
.resp-ord {
  font-family: var(--mono); font-size: 1.61rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ox); margin-bottom: 1.2rem;
}
.resp-name {
  font-family: var(--display); font-weight: 300; font-size: 4.2rem;
  line-height: 1.08; color: var(--ink); letter-spacing: -0.015em;
}
.resp-seam { width: 24rem; height: 1.5px; margin: 1.4rem 0 1.2rem; }
.resp-role { font-family: var(--body); font-style: italic; font-size: 2.205rem; line-height: 1.35; color: var(--ink-dim); }
.resp-qs { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.resp-qs p {
  display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1.2rem;
  font-family: var(--display); font-size: 2.052rem; line-height: 1.25; color: var(--ink); margin: 0;
}
.resp-qs p span { font-family: var(--mono); font-size: 1.61rem; color: var(--ox); letter-spacing: 0.1em; }

/* ---------- pergunta → resposta (o coro) ---------- */
/* numeral de página em fantasma: pseudo-elemento, fora do fluxo e
   invisível para o auditor (que só mede elementos reais) */
.sheet.qr::after {
  content: attr(data-n); position: absolute; right: 4.5%; bottom: 1.5%;
  font-family: var(--display); font-weight: 300; font-size: 14rem; line-height: 0.78;
  color: var(--ghost); pointer-events: none; z-index: 0;
}
.qr-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 60rem; }
.qr-ask {
  font-family: var(--display); font-weight: 500; font-size: 3.1rem;
  line-height: 1.2; color: var(--ink); margin: 0;
}
.qr-who {
  font-family: var(--mono); font-size: 1.61rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 0.9rem;
}
.qr-ans-wrap { position: relative; margin-top: 2.2rem; padding-left: 1.9rem; }
.qr-ans-wrap::before {
  content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.2em; width: 3px; background: var(--ox);
}
.qr-ans {
  font-family: var(--body); font-style: italic; font-size: 2.573rem;
  line-height: 1.34; color: var(--ink); margin: 0;
}

/* ---------- colunas de conceito (duo / trio / quatro) ---------- */
.duo, .trio { display: grid; flex: 1; align-content: center; column-gap: 3rem; }
.duo  { grid-template-columns: 1fr 1.5px 1fr; }
.trio { grid-template-columns: repeat(3, 1fr); }
.trio.four { grid-template-columns: repeat(4, 1fr); column-gap: 2.2rem; }
.duo .rule { background: var(--line); }
.col-word {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 3.05rem; line-height: 1.06; color: var(--ox); margin: 0;
}
.col-tag {
  font-family: var(--mono); font-size: 1.54rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0.55rem 0 0;
}
.col-gloss { font-size: 2.212rem; line-height: 1.4; color: var(--ink); margin: 0.75rem 0 0; }
.col { border-top: 3px solid var(--ox); padding-top: 0.85rem; }
.col.sl { border-top-color: var(--slate-deep); }
.col.sl .col-word { color: var(--slate-deep); }
.trio.four .col-word { font-size: 2.573rem; }
.trio.four .col-gloss { font-size: 2.052rem; }

/* ---------- pergunta hero (a pergunta que o irmão devolve) ---------- */
.bigq {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.bigq .q {
  font-family: var(--body); font-style: italic; font-size: 3.5rem; line-height: 1.24;
  color: var(--ink); max-width: 26ch; margin: 0;
}
.bigq .who {
  font-family: var(--mono); font-size: 1.61rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 2.4rem;
}

/* ---------- ritmo das batidas ---------- */
/* eixo de tempo real: a pausa longa antes das duas rápidas é o argumento */
.beats { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5rem; }
.beat-row { position: relative; display: grid; grid-template-columns: 17rem 1fr; align-items: center; column-gap: 2rem; }
.beat-row.solo { grid-template-columns: 1fr; }
.beat-lab {
  font-family: var(--mono); font-size: 1.568rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0; line-height: 1.4;
}
.beat-track { position: relative; height: 1.5px; background: var(--line); }
.beat-track .b {
  position: absolute; top: -38px; width: 5px; height: 76px; background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(.2, .8, .25, 1);
}
.fragment.visible .beat-track .b, .beat-row.lit .beat-track .b { transform: scaleY(1); }
.beat-track .b.slow { background: var(--slate-deep); width: 8px; height: 100px; top: -50px; }
.beat-track .b.fast { background: var(--ox); }
.beat-track .b i {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 0.9rem;
  font-family: var(--mono); font-style: normal; font-size: 1.75rem; letter-spacing: 0.12em;
  color: var(--ink-dim); white-space: nowrap;
}
.beat-span {
  position: absolute; top: -84px; height: 1.5px; background: var(--line-strong);
}
.beat-span::before, .beat-span::after {
  content: ""; position: absolute; top: -5px; width: 1.5px; height: 11px; background: var(--line-strong);
}
.beat-span::before { left: 0; } .beat-span::after { right: 0; }
.beat-span em {
  position: absolute; left: 50%; bottom: 0.55rem; transform: translateX(-50%);
  font-family: var(--body); font-style: italic; font-size: 2.31rem; color: var(--ink);
  white-space: nowrap;
}
.beat-row.dim { opacity: 0.42; }
.beat-row.dim .beat-track .b { background: var(--ink-dim); }

/* ---------- desenhos técnicos (cubo, régua, esquadro, graus) ---------- */
.viz-row { display: grid; flex: 1; align-content: center; column-gap: 3rem; }
.viz-row.three { grid-template-columns: repeat(3, 1fr); }
.viz-cell { text-align: center; }
.viz-cell svg { width: 100%; max-width: 13rem; height: auto; margin: 0 auto; display: block; }
.viz-num {
  font-family: var(--display); font-weight: 500; font-size: 3.2rem; color: var(--ox);
  margin: 0.9rem 0 0; line-height: 1;
}
.viz-cap {
  font-family: var(--mono); font-size: 1.568rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0.5rem 0 0;
}
.viz-note { font-size: 1.995rem; line-height: 1.36; color: var(--ink); margin: 0.6rem 0 0; }

/* régua graduada: 24 divisões desenhadas */
.ruler { margin: 1.2rem 0 0; }
.ruler svg { width: 100%; height: auto; display: block; }
.rd { display: grid; grid-template-columns: 12rem 1fr; column-gap: 1.8rem; align-items: baseline; margin-top: 1.5rem; }
.rd .g {
  font-family: var(--mono); font-size: 1.568rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ox);
}
.rd .t { font-family: var(--body); font-style: italic; font-size: 2.1rem; color: var(--ink); }
.rd .t b { font-style: normal; font-weight: 600; color: var(--ink); }

/* barras dos três pés (medida real em escala) */
.bars { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.1rem; }
.bar-row { display: grid; grid-template-columns: 13rem 1fr 7.5rem; column-gap: 1.6rem; align-items: center; }
.bar-row .nm { font-family: var(--display); font-size: 2.1rem; color: var(--ink); }
.bar-row .nm em { font-style: italic; color: var(--ink-dim); }
.bar-row .val { font-family: var(--mono); font-size: 1.71rem; color: var(--ox); text-align: right; }
.bar-row .bar { height: 26px; background: var(--slate); opacity: 0.55; transform-origin: 0 50%; }
.bar-row.max .bar { background: var(--ox); opacity: 0.72; }
.reveal .bar-row.fragment { opacity: 0; transform: translateX(-14px); transition: all 0.5s cubic-bezier(.2,.7,.2,1); }
.reveal .bar-row.fragment.visible { opacity: 1; transform: none; }

/* ---------- a escada da pedagogia (síntese do Ir. Alan) ---------- */
/* degraus de verdade: cada piso é um filete de acento e cada espelho
   desce até o piso anterior. A leitura sobe da esquerda para a direita. */
.stair {
  --rise: 62px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: start; align-content: end; flex: 1;
  margin-top: 1.2rem; padding-bottom: 0.4rem;
}
.stair .tread {
  position: relative; border-top: 3px solid var(--ox);
  padding: 0.85rem 0.7rem 0 1.1rem;
}
.stair .tread + .tread::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 3px; height: var(--rise); background: var(--ox); opacity: 0.55;
}
.stair .tread:nth-child(1) { margin-top: calc(var(--rise) * 4); }
.stair .tread:nth-child(2) { margin-top: calc(var(--rise) * 3); }
.stair .tread:nth-child(3) { margin-top: calc(var(--rise) * 2); }
.stair .tread:nth-child(4) { margin-top: var(--rise); }
.stair .tread:nth-child(5) { margin-top: 0; }
.stair .n {
  display: block; font-family: var(--mono); font-size: 1.4rem;
  letter-spacing: 0.18em; color: var(--ox);
}
.stair .w {
  display: block; margin-top: 0.4rem; font-family: var(--display);
  font-weight: 600; font-size: 1.85rem; line-height: 1.12; color: var(--ink);
  hyphens: auto; overflow-wrap: break-word;
}
.stair .g {
  display: block; margin-top: 0.45rem; font-family: var(--body);
  font-size: 1.75rem; line-height: 1.3; color: var(--ink-dim);
}

/* ---------- os três pés (medida real, com o vão marcado) ---------- */
.feet {
  flex: 1; display: grid; grid-template-columns: 14rem 1fr 8.5rem;
  column-gap: 1.7rem; row-gap: 1.8rem; align-content: center; margin: 0.8rem 0;
}
.feet .nm { font-family: var(--display); font-size: 2.109rem; line-height: 1.25; color: var(--ink); align-self: center; }
.feet .nm em { font-style: italic; color: var(--ink-dim); }
.feet .trk { position: relative; height: 30px; align-self: center; }
.feet .trk .bar {
  position: absolute; left: 0; top: 0; bottom: 0; background: var(--slate); opacity: 0.5;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s cubic-bezier(.45,0,.12,1);
}
.feet .trk .bar.max { background: var(--ox); opacity: 0.62; }
.trk.fragment.visible .bar, .fragment.visible .trk .bar { transform: scaleX(1); }
.feet .val { font-family: var(--mono); font-size: 1.653rem; color: var(--ox); align-self: center; text-align: right; }
/* o vão entre a menor e a maior régua de 24 polegadas */
.feet .trk .band {
  position: absolute; top: -238px; bottom: -14px; pointer-events: none;
  background: rgba(156, 63, 44, 0.09);
  border-left: 1.5px dashed var(--ox); border-right: 1.5px dashed var(--ox);
}

/* ---------- paredes: no esquadro × torcida ---------- */
.walls { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; flex: 1; align-content: center; }
.walls .wc { text-align: center; }
.walls svg { width: 100%; max-width: 22rem; height: auto; margin: 0 auto; display: block; }
.walls .wl {
  font-family: var(--mono); font-size: 1.61rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 1rem 0 0;
}
.walls .wc.ok .wl { color: var(--slate-deep); }
.walls .wc.bad .wl { color: var(--ox); }
.walls .wg { font-size: 1.995rem; line-height: 1.35; color: var(--ink); margin: 0.55rem 0 0; }

/* ---------- os dois instrumentos, três posições ---------- */
.grades { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3.4rem; flex: 1; align-content: center; }
.grades .gc { text-align: center; }
.grades svg { width: 100%; max-width: 13.2rem; height: auto; margin: 0 auto; display: block; }
.grades .gl {
  font-family: var(--display); font-weight: 500; font-size: 2.205rem; color: var(--ink); margin: 0.9rem 0 0;
}
.grades .gg { font-family: var(--mono); font-size: 1.568rem; letter-spacing: 0.14em; color: var(--ink-dim); margin: 0.45rem 0 0; line-height: 1.45; }
.grades .gc.on .gl { color: var(--ox); }

/* ---------- cartório de três colunas (censo de palavra) ---------- */
.ledger.tri .lrow { grid-template-columns: 6.5rem 1fr 17.5rem; padding: 0.45rem 0.9rem; }
.ledger.tri .de { font-family: var(--body); font-style: italic; font-size: 1.87rem; color: var(--ink); }
.ledger.tri .pt { font-family: var(--display); font-size: 1.87rem; color: var(--ink); }
.ledger.tri .lrow.break .pt { font-family: var(--display); font-weight: 600; color: var(--ox); font-size: 2.109rem; }
.ledger.tri .lrow.break .de { color: var(--ink); }
/* o código de cor da família da palavra tem de vencer a cor base da coluna */
.ledger.tri .de.ox, .ledger.tri .pt.ox { color: var(--ox); }
.ledger.tri .de.sl, .ledger.tri .pt.sl { color: var(--slate-deep); }
.legenda {
  display: flex; gap: 2.4rem; font-family: var(--mono); font-size: 1.54rem;
  letter-spacing: 0.04em; color: var(--ink-dim); margin: 0.9rem 0 0;
}
.legenda span::before {
  content: ""; display: inline-block; width: 1.6em; height: 3px;
  margin-right: 0.6em; vertical-align: 0.25em;
}
.legenda .l-ox::before { background: var(--ox); }
.legenda .l-sl::before { background: var(--slate); }

/* ============================================================
   TEMPLATES POR IRMÃO (2026-09-04)
   Quatro sistemas de composição sobre uma identidade só. O que
   nunca muda: papel, tinta, óxido (mão/uso), ardósia (olhar/
   medição), Spectral/Crimson/IBM Plex, a moldura de prancha, o
   rodapé corrido e o numeral fantasma. O que muda na virada de
   apresentador é a arquitetura da página, e ela vem do assunto
   de cada Irmão.
   ============================================================ */

/* ---------- ALAN · o retábulo ---------- */
/* eixo central, faixa no alto, cartões contornados: a gramática do
   material dele, traduzida para a paleta do deck. O assunto é
   reconhecimento e pertencimento, e a página se compõe como um exame
   formal: simétrica, emoldurada, com a resposta do ritual em epígrafe. */
.sheet[data-t="alan"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--ox); z-index: 3;
}
.sheet[data-t="alan"]:not(.qr):not(.respiro) { align-items: center; text-align: center; }
.sheet[data-t="alan"]:not(.qr):not(.respiro) .kicker { align-self: center; }
.sheet[data-t="alan"]:not(.qr):not(.respiro) .h-title { text-align: center; }
/* filete curto sob o título, como o sublinhado dourado das lâminas dele */
.sheet[data-t="alan"]:not(.qr):not(.respiro) .h-title::after {
  content: ""; display: block; width: 11rem; height: 2.5px; background: var(--ox);
  margin: 1.1rem auto 0;
}
.sheet[data-t="alan"] .col {
  border: 1.5px solid var(--line-strong); border-top-width: 1.5px;
  padding: 1.5rem 1.3rem; text-align: center;
}
.sheet[data-t="alan"] .col.sl { border-color: var(--line); }
.sheet[data-t="alan"] .col-tag { color: var(--ox); }
.sheet[data-t="alan"] .duo .rule { background: transparent; }
/* o remate em bloco cheio, no lugar do chip escuro do original */
.sheet[data-t="alan"] .takeaway {
  background: var(--ink); color: var(--paper); font-style: normal;
  font-family: var(--display); font-size: 2.1rem; line-height: 1.32;
  padding: 1rem 1.6rem; max-width: 62rem; margin-left: auto; margin-right: auto;
}
.sheet[data-t="alan"] .hero-quote .q { margin-left: auto; margin-right: auto; }
.sheet[data-t="alan"] .note-row { text-align: left; }

/* ---------- AGUINALDO · as fiadas ---------- */
/* juntas em vez de contornos: um fio horizontal separa cada bloco e um
   fio vertical separa cada coluna, como as fiadas de uma parede
   assentada. O assunto é a pedra regular e um ritmo de uma batida e
   duas, e a página se compõe em cursos alinhados. */
.sheet[data-t="aguinaldo"]::before {
  content: ""; position: absolute; left: 3.2%; top: 0; bottom: 0; width: 1px;
  background: var(--line); z-index: 1;
}
.sheet[data-t="aguinaldo"]:not(.qr):not(.respiro) .h-title {
  border-top: 1px solid var(--line-strong); padding-top: 1.2rem; margin-top: 0.2rem;
}
.sheet[data-t="aguinaldo"] .col {
  border-top: none; border-left: 1px solid var(--line-strong); padding: 0.1rem 0 0.1rem 1.4rem;
}
.sheet[data-t="aguinaldo"] .col.sl { border-left-color: var(--line); }
.sheet[data-t="aguinaldo"] .duo { column-gap: 0; }
.sheet[data-t="aguinaldo"] .duo .rule { background: transparent; }
.sheet[data-t="aguinaldo"] .trio { column-gap: 2.4rem; }
.sheet[data-t="aguinaldo"] .col-word { color: var(--ink); }
.sheet[data-t="aguinaldo"] .col-tag { color: var(--ox); }

/* ---------- CARLOS · a folha técnica ---------- */
/* marcas de canto, cota com traços de ponta, número em mono: a página é
   uma prancha de desenho. O assunto são três instrumentos de medida e
   uma história de tolerâncias, e a folha declara isso antes da primeira
   palavra. */
.sheet[data-t="carlos"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='720' viewBox='0 0 1280 720'%3E%3Cg fill='none' stroke='%23eceee7' stroke-width='1.5' stroke-opacity='0.6'%3E%3Cpath d='M22 52 L22 22 L52 22'/%3E%3Cpath d='M1228 22 L1258 22 L1258 52'/%3E%3Cpath d='M22 628 L22 658 L52 658'/%3E%3Cpath d='M1258 628 L1258 658 L1228 658'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
.sheet[data-t="carlos"]:not(.qr):not(.respiro) .h-title::after {
  content: ""; display: block; width: 17rem; height: 13px; margin-top: 1rem;
  border-left: 1.5px solid var(--slate-deep); border-right: 1.5px solid var(--slate-deep);
  background: linear-gradient(var(--slate-deep), var(--slate-deep)) 0 50% / 100% 1.5px no-repeat;
}
.sheet[data-t="carlos"]:not(.qr):not(.respiro):has(.ruler) .h-title::after,
.sheet[data-t="carlos"]:not(.qr):not(.respiro):has(.feet) .h-title::after,
.sheet[data-t="carlos"]:not(.qr):not(.respiro):has(.walls) .h-title::after { display: none; }
.sheet[data-t="carlos"] .col { border-top-color: var(--slate-deep); }
.sheet[data-t="carlos"] .col-word { color: var(--slate-deep); }
.sheet[data-t="carlos"] .col.sl .col-word { color: var(--ox); }
.sheet[data-t="carlos"] .col-tag { font-family: var(--mono); color: var(--ink-dim); }
.sheet[data-t="carlos"] .kicker::before { background: var(--slate-deep); }
.sheet[data-t="carlos"] .kicker .rn { color: var(--slate-deep); }

/* ============================================================
   OS QUATRO CAPÍTULOS (2026-09-04)
   Um livro só, quatro oficinas de impressão. Cada capítulo troca
   papel, tinta, acento e letra. O fio invisível que costura os
   quatro:
     · a moldura de prancha e o rodapé corrido, idênticos
     · o kicker com o § e a marginália em IBM Plex Mono
     · a altura-x travada em 0.49: letras diferentes, medida ótica igual
     · os quinze slides de pergunta e resposta, que são a voz do
       ritual e não a de ninguém — mesma geometria no deck inteiro
   O <html> recebe a classe do capítulo (deck.js) e tudo reage.
   ============================================================ */

/* altura-x travada na do Spectral: letras diferentes, medida ótica igual.
   O capítulo do Leonardo é a referência e fica sem ajuste. */
html.w-alan .reveal, html.w-aguinaldo .reveal, html.w-carlos .reveal { font-size-adjust: 0.49; }

/* ---------- I · ALAN · a prancheta do arquiteto ---------- */
/* Navy e ouro, as cores do material dele. Linhas de desenho, arcos de
   construção, cotas: o assunto é o Templo, as Colunas, o Átrio. */
html.w-alan {
  --paper:       #122740;
  --paper-deep:  #0d1c30;
  --paper-panel: #182f4d;
  --ink:         #f2e7cd;
  --ink-dim:     #b6a888;
  --ink-faint:   rgba(242, 231, 205, 0.42);
  --ink-ghost:   rgba(242, 231, 205, 0.14);
  --ox:          #d3a851;
  --ox-deep:     #e8be69;
  --ox-soft:     rgba(211, 168, 81, 0.13);
  --slate:       #8aa5c4;
  --slate-deep:  #a9c0d8;
  --slate-soft:  rgba(138, 165, 196, 0.13);
  --line:        rgba(242, 231, 205, 0.26);
  --line-strong: rgba(242, 231, 205, 0.5);
  --frame-1:     rgba(211, 168, 81, 0.42);
  --frame-2:     rgba(242, 231, 205, 0.16);
  --ghost:       rgba(242, 231, 205, 0.07);
  --display:     "Cormorant Garamond", Didot, Georgia, serif;
  --body:        "Lora", Georgia, serif;
}
/* papel milimetrado de prancheta: a grade só se insinua */
html.w-alan .reveal .slides section.sheet {
  background-image:
    linear-gradient(rgba(211,168,81,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211,168,81,0.055) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: -1px -1px;
}
html.w-alan .h-title, html.w-alan .resp-name, html.w-alan .qr-ask {
  font-weight: 600; letter-spacing: 0.005em;
}
html.w-alan .reveal-viewport::before { background: radial-gradient(130% 110% at 50% 40%, transparent 55%, rgba(0,0,0,0.35) 100%); }
html.w-alan .reveal-viewport::after { opacity: 0.22; }

/* ---------- II · AGUINALDO · a pedra ---------- */
/* Calcário claro e frio, tinta basalto, acento ferro. A página é
   maciça: lápide serifada, poucas palavras, intervalos largos. */
html.w-aguinaldo {
  --paper:       #dfdccf;
  --paper-deep:  #d2cec0;
  --paper-panel: #d8d4c6;
  --ink:         #1d1c1a;
  --ink-dim:     #5b584f;
  --ink-faint:   rgba(29, 28, 26, 0.42);
  --ink-ghost:   rgba(29, 28, 26, 0.14);
  --ox:          #3a5468;
  --ox-deep:     #2b4152;
  --ox-soft:     rgba(58, 84, 104, 0.10);
  --slate:       #8b8477;
  --slate-deep:  #6b655a;
  --slate-soft:  rgba(139, 132, 119, 0.12);
  --line:        rgba(29, 28, 26, 0.20);
  --line-strong: rgba(29, 28, 26, 0.46);
  --frame-1:     rgba(29, 28, 26, 0.34);
  --frame-2:     rgba(29, 28, 26, 0.14);
  --ghost:       rgba(29, 28, 26, 0.07);
  --display:     "Zilla Slab", Rockwell, Georgia, serif;
  --body:        "Zilla Slab", Rockwell, Georgia, serif;
}
html.w-aguinaldo .h-title, html.w-aguinaldo .resp-name { font-weight: 600; letter-spacing: -0.015em; }
html.w-aguinaldo .col-word, html.w-aguinaldo .anchor,
html.w-aguinaldo .thread-word, html.w-aguinaldo .bigq .q { font-style: normal; font-weight: 600; }
html.w-aguinaldo .takeaway, html.w-aguinaldo .qr-ans { font-style: normal; }

/* ---------- III · CARLOS · a ardósia ---------- */
/* Quadro-negro de sala de aula: giz sobre lousa, o mundo onde se
   demonstra uma medida. Tipos técnicos, mono no display. */
html.w-carlos {
  --paper:       #23302c;
  --paper-deep:  #1b2521;
  --paper-panel: #2a3833;
  --ink:         #eceee7;
  --ink-dim:     #a8b0a6;
  --ink-faint:   rgba(236, 238, 231, 0.42);
  --ink-ghost:   rgba(236, 238, 231, 0.14);
  --ox:          #e2c877;
  --ox-deep:     #f0da95;
  --ox-soft:     rgba(226, 200, 119, 0.12);
  --slate:       #93b0a6;
  --slate-deep:  #b3cbc2;
  --slate-soft:  rgba(147, 176, 166, 0.12);
  --line:        rgba(236, 238, 231, 0.26);
  --line-strong: rgba(236, 238, 231, 0.5);
  --frame-1:     rgba(236, 238, 231, 0.3);
  --frame-2:     rgba(236, 238, 231, 0.14);
  --ghost:       rgba(236, 238, 231, 0.07);
  --display:     "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --body:        "IBM Plex Sans", "Helvetica Neue", sans-serif;
}
html.w-carlos .h-title, html.w-carlos .resp-name, html.w-carlos .qr-ask {
  font-weight: 500; letter-spacing: -0.028em; line-height: 1.14;
}
html.w-carlos .col-word, html.w-carlos .thread-word, html.w-carlos .bigq .q,
html.w-carlos .takeaway, html.w-carlos .qr-ans, html.w-carlos .hero-quote .q { font-style: normal; }
html.w-carlos .col-word { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
html.w-carlos .note { font-size: 1.54rem; }
html.w-carlos .reveal-viewport::after { opacity: 0.3; }
html.w-carlos .reveal-viewport::before { background: radial-gradient(130% 110% at 50% 42%, transparent 52%, rgba(0,0,0,0.32) 100%); }

/* ---------- IV · LEONARDO · o pergaminho ---------- */
/* O :root já é este capítulo. Nada a declarar. */

/* ---------- a pincelada segue o acento do capítulo ---------- */
html.w-alan .brush::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-40%25' width='120%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.35' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23d3a851' fill-opacity='0.34' d='M4 24 C30 12 60 17 100 14 C140 12 176 16 196 20 L194 32 C160 37 120 32 80 35 C50 37 20 34 6 32 Z'/%3E%3C/svg%3E");
}
html.w-aguinaldo .brush::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-40%25' width='120%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.35' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%233a5468' fill-opacity='0.26' d='M4 24 C30 12 60 17 100 14 C140 12 176 16 196 20 L194 32 C160 37 120 32 80 35 C50 37 20 34 6 32 Z'/%3E%3C/svg%3E");
}
html.w-carlos .brush::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-40%25' width='120%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.35' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23e2c877' fill-opacity='0.30' d='M4 24 C30 12 60 17 100 14 C140 12 176 16 196 20 L194 32 C160 37 120 32 80 35 C50 37 20 34 6 32 Z'/%3E%3C/svg%3E");
}
html.w-alan .brush.sl::before, html.w-aguinaldo .brush.sl::before, html.w-carlos .brush.sl::before {
  filter: grayscale(0.4) opacity(0.85);
}

/* ---------- painel fotográfico dos respiros ---------- */
.resp-photo { width: 37%; }
.sheet.respiro.com-foto { padding-right: 42%; }


/* ---------- chip de papel sobre fotografia ---------- */
/* a regra do deck: nunca véu uniforme sobre a imagem. Onde o texto cai
   em cima da parte fotográfica, ele anda numa lasca de papel. */
:root            { --chip: rgba(241, 234, 217, 0.94); }
html.w-alan      { --chip: rgba(18, 39, 64, 0.93); }
html.w-aguinaldo { --chip: rgba(223, 220, 207, 0.94); }
html.w-carlos    { --chip: rgba(35, 48, 44, 0.93); }
.chip {
  background: var(--chip); box-shadow: 0 0 0 1px var(--line);
  padding: 0.85em 1.2em; border-radius: 1px;
}
.note-row.chip { padding: 0.9em 1.2em; }
.bigq.chip { padding: 1.4em 1.6em; align-self: center; }


/* ---------- texto que cai sobre a parte fotográfica ---------- */
/* contorno na cor do papel desenhado ATRÁS do preenchimento (paint-order),
   mais sombra projetada: legenda de cinema, legível sobre qualquer imagem
   sem precisar de véu por cima da fotografia. */
.sobre-foto {
  -webkit-text-stroke: 3.5px rgba(12, 11, 10, 0.92);
  paint-order: stroke fill;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.8), 0 0 22px rgba(255, 255, 255, 0.45),
               0 2px 4px rgba(0, 0, 0, 0.35);
}
/* nos capítulos escuros a letra já é clara: o brilho branco brigaria com
   ela. Ali o destaque é só o contorno escuro e uma sombra funda. */
html.w-carlos .sobre-foto, html.w-alan .sobre-foto {
  -webkit-text-stroke-width: 3px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 26px rgba(0, 0, 0, 0.6);
}
.sobre-foto.fina { -webkit-text-stroke-width: 2.5px; }


/* ---------- banda fotográfica dentro da coluna ---------- */
/* o padrão do slide "depois de medir, alguém ainda precisa assentar":
   a fotografia em cima da caixa de texto, com o filete do eixo na junção. */
.col > .col-foto {
  height: 8.4rem; margin: -0.1rem 0 1.05rem;
  background-size: cover; background-position: center;
  border-bottom: 3px solid var(--ox);
}
.col.sl > .col-foto { border-bottom-color: var(--slate-deep); }
.duo .col > .col-foto, .trio .col > .col-foto { margin-top: 0.6rem; }


/* ---------- os desenhos do Carlos são de giz ---------- */
/* Na ardósia o traço técnico é riscado à mão: turbulência leve deslocando
   o contorno e um grão claro por cima. Mantém a exatidão do desenho (as
   contagens e os ângulos continuam certos) e ganha a matéria do capítulo. */
/* os três graus voltaram para o giz: a quebra de linha agora é vão de
   verdade (stroke-dasharray no ponto do cruzamento), não halo pintado. */
html.w-carlos .grades svg,
html.w-carlos .walls svg,
html.w-carlos .viz-cell svg,
html.w-carlos .ruler svg { filter: url(#giz); }
html.w-carlos .walls svg g,
html.w-carlos .grades svg path,
html.w-carlos .viz-cell svg path { stroke-linecap: round; stroke-linejoin: round; }

/* ---------- o objeto da pergunta ---------- */
/* Seis das quinze perguntas nomeiam uma ferramenta. Elas ganham a banda do
   objeto sempre no mesmo lugar, com o filete de óxido em cima: a composição
   da pergunta não muda, a banda é um estrato a mais. */
/* o numeral fantasma sobe para não cair sobre a banda do objeto */
.sheet.qr:has(.q-objeto)::after { bottom: 10.4rem; }
.q-objeto {
  flex: 0 0 auto; height: 9.2rem; margin-top: auto;
  background-size: cover; background-position: center;
  border-top: 3px solid var(--ox);
}


/* ---------- as linhas de prumo convergem (pergunta 13) ---------- */
.prumo-viz { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; margin: 0.6rem 0 0.2rem; }
.prumo-viz svg { height: 19rem; width: auto; max-width: 100%; display: block; flex: 0 0 auto; }
.prumo-cap {
  font-family: var(--mono); font-size: 1.24rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ox); margin: 0.3rem 0 0;
}

/* ---------- A CAPA ---------- */
/* A capa não é capítulo de ninguém: é a pedra antes de qualquer ferramenta.
   Escura, quente e bruta, para não se confundir com o calcário frio do
   Ir. Aguinaldo nem com o pergaminho do Ir. Leonardo. */
html.w-capa {
  --paper:       #18150f;
  --paper-deep:  #12100b;
  --paper-panel: #201c14;
  --ink:         #f3ead7;
  --ink-dim:     #bdb29b;
  --ink-faint:   rgba(243, 234, 215, 0.5);
  --ink-ghost:   rgba(243, 234, 215, 0.14);
  --ox:          #c8603a;
  --ox-deep:     #dd7549;
  --slate:       #8d9aa0;
  --slate-deep:  #aab6bb;
  --line:        rgba(243, 234, 215, 0.28);
  --line-strong: rgba(243, 234, 215, 0.5);
  --frame-1:     rgba(243, 234, 215, 0.3);
  --frame-2:     rgba(243, 234, 215, 0.13);
  --ghost:       rgba(243, 234, 215, 0.07);
}
html.w-capa .reveal-viewport::before {
  background: radial-gradient(130% 110% at 40% 45%, transparent 48%, rgba(0,0,0,0.5) 100%);
}
html.w-capa .reveal-viewport::after { opacity: 0.26; }
.sheet[data-t="capa"] .title-world { width: 64%; }
.sheet[data-t="capa"] .title-main {
  font-size: 4.7rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72), 0 0 42px rgba(0, 0, 0, 0.5);
}
.sheet[data-t="capa"] .title-seam { width: 27rem; }
.sheet[data-t="capa"] .title-meta {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
  font-size: 1.16rem; line-height: 2.15;
}
.sheet[data-t="capa"] .title-meta .sig { font-size: 1.22rem; }