/* ══ PORTA ODONTO — clínica MADURA (dor de entrada D1+D2).
   Caminho B: prancha PRESA, página CLARA. O capítulo gruda enquanto se rola,
   a cena troca, o texto fica AO LADO — nunca por cima. Sem véu, sem escurecer.
   O cinema vem do pin e da troca, não do sangramento.
   Pele: saúde = claro (decisão 17/08). Gramática: Direção C. ══ */

@font-face{font-family:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url('/assets/fonts/caveat-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#FBFBF8; --paper-field:#F1F0EA;
  --ink:#232220; --ink-2:#55524B;
  --rule:#CFCDC4; --rule-strong:#A29E92;
  --on-ink:#FBFBF8;
  --limao:#C6D82E;
  --prancha:#1C1B18;
  --serif:'Bodoni Moda',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --mao:'Caveat',cursive;
  --g:clamp(1.15rem,5vw,4.5rem);
  --barra:3.1rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

/* ── barra de capítulos ───────────────────────────────────────────────── */
.capitulos{position:sticky;top:0;z-index:30;height:var(--barra);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
  display:flex;align-items:center}
.capitulos ol{display:flex;gap:clamp(.9rem,2.4vw,2rem);list-style:none;margin:0;
  padding:0 var(--g);overflow-x:auto;scrollbar-width:none;width:100%}
.capitulos ol::-webkit-scrollbar{display:none}
.capitulos a{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding-bottom:.18rem;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.capitulos a:hover,.capitulos a[aria-current]{color:var(--ink);border-color:var(--limao)}

/* ── CAPA: a tela que enquadra antes do corredor ──────────────────────
   Três faixas empurradas pros extremos (rótulos em cima, tese no meio,
   instrução embaixo) — é o que dá a leitura de "página de rosto" em vez
   de "topo de LP". Sem imagem: a composição inteira é tipografia e ar. */
.abertura{position:relative;overflow:hidden;
  min-height:calc(100svh - var(--barra));
  padding:clamp(1.8rem,4vw,3rem) var(--g) clamp(1.5rem,3vw,2.3rem);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(2.4rem,6vw,4rem);border-bottom:1px solid var(--rule)}
/* a cena das 07h40 atrás da capa, com o mesmo véu de papel do corredor —
   mais forte aqui, porque o título mora no meio da tela e não embaixo */
.abertura__fundo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
/* Véu de CANTO, não banho geral. Um véu uniforme lavava a cena inteira e o
   resultado não era nem foto nem papel — era borrão. Aqui a densidade se
   concentra onde o texto mora (embaixo à esquerda) e a imagem fica limpa em
   cima e à direita. Dois eixos multiplicando: ~99% no canto do texto, ~0 no
   canto oposto. */
.abertura::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,
      rgba(251,251,248,.96) 0%,
      rgba(251,251,248,.88) 34%,
      rgba(251,251,248,.42) 62%,
      rgba(251,251,248,0)   88%),
    linear-gradient(to right,
      rgba(251,251,248,.86) 0%,
      rgba(251,251,248,.55) 30%,
      rgba(251,251,248,.12) 58%,
      rgba(251,251,248,0)   78%)}
.abertura__topo,.abertura__meio,.abertura .dica{position:relative;z-index:2;
  max-width:1240px;margin-inline:auto;width:100%}
.abertura__topo{display:flex;flex-wrap:wrap;gap:.55rem clamp(1.1rem,3vw,2.6rem);
  padding-bottom:.85rem;border-bottom:1px solid var(--rule)}
.tit--capa{font-size:clamp(2.4rem,6.2vw,4.7rem);max-width:13ch;margin-top:0}
.apoio--capa{font-size:clamp(1.05rem,1.75vw,1.28rem);max-width:50ch;margin-top:1.5rem}
.dica{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin:0}

/* ── MANIFESTO: prosa, coluna estreita, nenhuma imagem ────────────────
   O contraste com o corredor é o ponto — depois de seis capítulos de
   frase curta ao lado de cena, um bloco de texto corrido faz o leitor
   desacelerar antes do convite. */
.env--prosa{max-width:760px}
.manifesto p{font-size:clamp(1.04rem,1.65vw,1.2rem);color:var(--ink-2);
  max-width:58ch;margin:1.35rem 0 0}
.manifesto p em{font-style:italic;color:var(--ink)}
.manifesto__fecho{color:var(--ink);border-left:2px solid var(--limao);
  padding-left:1.15rem;margin-top:2.2rem!important}

/* ── O CORREDOR: UM palco só ──────────────────────────────────────────
   Antes eram seis capítulos altos, cada um com a sua prancha: a moldura
   PISCAVA a cada troca — entrava, saía, entrava de novo. Folhear, não
   caminhar. Agora existe um palco preso e as seis cenas ficam empilhadas
   na MESMA célula do grid, trocando por opacidade. A moldura não sai mais
   da tela: o dia passa DENTRO dela, que é a espinha da narrativa
   ("uma clínica, um dia, do vazio ao cheio") virando mecânica.

   O empilhamento é só do desktop. No celular `grid-area:auto` desfaz a
   pilha e as mesmas seis cenas voltam a ser uma lista — por isso o texto
   e a prancha moram JUNTOS dentro de `.cena`, e não em duas colunas
   separadas: assim a ordem de leitura já nasce certa.

   ⚠️ TELA CHEIA (17/08, 2ª correção). A versão anterior punha a cena numa
   prancha de 58% ao lado do texto. Estava errado: a referência que o
   Alessandro aponta desde o começo (Oficina do Tempo, Mesa 6) tem a mídia
   ocupando a TELA INTEIRA com o texto por cima. Eu tinha decidido não
   sangrar por achar que contrariava o sistema — não era minha decisão a
   tomar. Agora a cena cobre o palco e o texto mora sobre ela, com véu de
   PAPEL (não escuro): a pele clara de saúde continua valendo. ────── */
.trilho{position:relative}
.palco{display:grid}

.cena{width:100%}

@media (min-width:900px){
  /* pista de scrub por capítulo: quanto mais alto, mais lento o movimento */
  :root{--cap:170vh}
  .trilho{height:calc(6 * var(--cap) + 100svh)}
  /* top:0 e não var(--barra): a cena passa POR BAIXO da barra de capítulos,
     que já é translúcida com blur. Descontar a barra deixaria uma tira de
     papel no topo e matava o "tela cheia". */
  .palco{position:sticky;top:0;height:100svh;overflow:hidden}
  .cena{grid-area:1/1;position:relative;height:100svh;
    opacity:var(--o,0);visibility:hidden;will-change:opacity}
  .cena[style*="--o:1"]{visibility:visible}  /* 1º quadro antes do JS rodar */

  /* a mídia É o palco */
  .cena .prancha{position:absolute;inset:0;margin:0;aspect-ratio:auto;
    border:0;overflow:hidden}

  /* Véu de papel: sem ele o texto grafite morre em cima da foto clara.
     Denso embaixo (onde o texto mora), some no meio da tela pra a cena
     respirar. É o equivalente claro do véu escuro da referência. */
  .cena .prancha::before{content:"";position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(to top,
        rgba(251,251,248,.96) 0%,
        rgba(251,251,248,.86) 24%,
        rgba(251,251,248,.38) 48%,
        rgba(251,251,248,0)   72%),
      linear-gradient(to right,
        rgba(251,251,248,.84) 0%,
        rgba(251,251,248,.50) 32%,
        rgba(251,251,248,.10) 60%,
        rgba(251,251,248,0)   80%)}

  /* CONTINUIDADE 1 — a câmera não reseta. Cada clipe tem o seu próprio
     movimento interno (o scrub), mas o CONTÊINER faz um único afastamento
     lento do começo ao fim do corredor, dirigido pelo progresso GLOBAL. Sem
     isso o movimento zerava a cada troca e o olho lia "outra foto"; com isso
     lê "ainda andando". */
  .cena .prancha{transform:scale(calc(1.055 - .055 * var(--gp,0)));
    transform-origin:58% 50%;will-change:transform}

  /* a legenda por cena sai: quem conta a hora agora é o fio, que não pisca */
  .cena .prancha figcaption{display:none}

  /* CONTINUIDADE 2 — O FIO DO DIA. Vive no palco, não na cena: atravessa as
     seis dissoluções sem nunca sumir. É o que faz "outra imagem" virar
     "mais tarde no mesmo dia". */
  .fio{position:absolute;z-index:3;right:var(--g);bottom:clamp(3.4rem,7vh,5.2rem);
    display:flex;flex-direction:column;align-items:flex-end;gap:.42rem;
    font-family:var(--mono);text-align:right;pointer-events:none}
  .fio__hora{font-size:clamp(1.5rem,2.3vw,2.1rem);color:var(--ink);
    letter-spacing:.02em;line-height:1}
  .fio__nota{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2)}
  .fio__barra{display:block;width:clamp(6rem,11vw,10rem);height:1px;
    background:var(--rule-strong);margin-top:.5rem;position:relative}
  .fio__barra i{position:absolute;left:0;top:-1px;height:3px;background:var(--limao);
    width:calc(var(--gp,0) * 100%)}

  /* texto por cima, ancorado embaixo à esquerda, como nas referências */
  .cena__texto{position:absolute;z-index:2;left:0;right:0;bottom:0;
    padding:0 var(--g) clamp(3.4rem,7vh,5.2rem);
    max-width:1240px;margin-inline:auto}
  .cena__texto > *{max-width:min(52ch,62%)}
  .cena .tit{font-size:clamp(2.4rem,4.9vw,4rem);max-width:16ch}
  .cena .apoio{font-size:clamp(1.04rem,1.35vw,1.22rem);color:var(--ink);
    max-width:54ch}

  /* a legenda vai pro canto OPOSTO: o texto agora mora embaixo à esquerda,
     e as duas coisas no mesmo canto viravam pilha */
  .cena .prancha figcaption{left:auto;right:0;bottom:0;z-index:2;
    background:none;backdrop-filter:none;color:var(--ink-2)}
  /* o filete curto era cota da prancha emoldurada; sem moldura não há o que cotar */
  .cena .prancha::after{display:none}
}
@media (max-width:899.98px){
  /* sem palco no celular: prender tela pequena atrapalha em vez de ajudar.
     O fio do dia tambem sai: sem dissolucao nao ha o que costurar, e a
     legenda de cada cena volta a fazer o trabalho. */
  .fio{display:none}
  .palco{padding:0 var(--g)}
  .cena{padding:clamp(3rem,9vw,4.5rem) 0;border-top:1px solid var(--rule);
    display:grid;gap:clamp(1.6rem,3.5vw,3.4rem)}
  .cena:first-child{border-top:0}
}

/* ── texto ────────────────────────────────────────────────────────────── */
.cota{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);display:block}
h1.tit,h2.tit{font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,4.3vw,3.3rem);line-height:1.07;letter-spacing:-.012em;
  margin:.9rem 0 0;max-width:15ch;text-wrap:balance}
h1.tit em,h2.tit em{font-style:italic}
.apoio{font-size:clamp(1rem,1.55vw,1.12rem);color:var(--ink-2);max-width:44ch;margin:1.05rem 0 0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.tags li{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);padding:.4rem .68rem}

/* O texto tem curva PRÓPRIA (--t, escrita pelo JS), mais seca que a da
   cena: sai antes da troca começar e volta depois dela terminar. Se
   seguisse o --o, dois textos ficariam meio-visíveis um sobre o outro na
   mesma coluna e viraria borrão. Na troca a coluna fica limpa. */
.cena__texto{opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 14px))}
@media (max-width:899.98px){.cena__texto{opacity:1;transform:none}}

/* ── prancha: a cena, emoldurada pelo grid ────────────────────────────── */
.prancha{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--prancha);
  border:1px solid var(--rule-strong)}
.prancha img,.prancha video{width:100%;height:100%;object-fit:cover;display:block}
/* SCRUB: o movimento é função do scroll, não do relógio. O JS escreve --p
   (0 a 1) em cada capítulo; aqui só se traduz isso em transform. Sem
   transition de propósito — transition atrasaria o dedo do visitante. */
/* Prancha com FOTO: o --p vira transform (o movimento é o zoom).
   Prancha com VÍDEO: o --p vira currentTime, no JS — o vídeo NÃO leva
   transform, senão o movimento contaria duas vezes. */
.prancha img{
  transform:scale(calc(1.14 - 0.14 * var(--p,0)))
            translate3d(0, calc((0.5 - var(--p,0)) * -2.2%), 0);
  will-change:transform}
.prancha video{will-change:auto}
/* a legenda acompanha o texto, não a cena: duas datas empilhadas no mesmo
   canto durante a troca viravam uma palavra só, ilegível */
.prancha figcaption{opacity:var(--t,1);position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;
  color:#D8D5CE;background:color-mix(in srgb,#0E0D0C 70%,transparent);
  padding:.36rem .62rem;backdrop-filter:blur(3px)}
/* cota de prancha: o filete curto da Direção C */
.prancha::after{content:"";position:absolute;left:-1px;top:-13px;width:60px;height:1px;
  background:var(--rule-strong)}

/* ── seções normais (fim do corredor) ─────────────────────────────────── */
.faixa{padding:clamp(3.6rem,8vw,7rem) var(--g);border-top:1px solid var(--rule)}
.faixa--campo{background:var(--paper-field)}
.env{max-width:1240px;margin-inline:auto}
.mao{font-family:var(--mao);font-size:1.42rem;color:var(--ink-2);margin:1.7rem 0 0}
.btn{display:inline-flex;align-items:center;margin-top:1.6rem;padding:1rem 1.8rem;
  background:var(--ink);color:var(--on-ink);text-decoration:none;font-weight:500;
  border:1px solid var(--ink);transition:background .16s,color .16s,transform .16s}
.btn:hover{background:var(--limao);color:#232220;border-color:var(--limao);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--limao);outline-offset:3px}

.indice__linha{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
@media(min-width:820px){.indice__linha{grid-template-columns:3.2rem 14rem 1fr auto}}
.indice__n{font-family:var(--mono);font-size:.7rem;color:var(--rule-strong)}
.indice__t{font-family:var(--serif);font-size:1.26rem}
.indice__d{color:var(--ink-2);font-size:.92rem}
.indice__e{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rule-strong)}

.rodape{padding:2.6rem var(--g);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;
  gap:.8rem 2rem;justify-content:space-between;font-size:.82rem;color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cena__texto,.prancha img{transform:none}
}