/* DDR principal · Entre Rounds — território editorial
   Humano, íntimo, editorial, reflexivo, bastidor. Editorial independente + retrato + caderno de conversa:
   retrato P&B com grão e legenda (sem moldura de filme), papel, rótulos na margem como anotações, fios finos
   no lugar de cards. A numeração "nº" é a única referência de arquivo. Verde só no grifo de "O que fica".
   Escopo #ddr-base; sem motion. */
#ddr-base .ddr-er { --er-fio: rgba(24, 24, 24, .2); --er-fio-forte: rgba(24, 24, 24, .55); color: var(--ddr-charcoal); }
#ddr-base .ddr-er-rotulo { margin: 0; font: 600 12px/1.4 var(--ddr-body); letter-spacing: .08em; text-transform: uppercase; }
#ddr-base .ddr-er-kicker { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
#ddr-base .ddr-er-dek { margin-top: 14px; font-size: 18px; line-height: 1.5; max-width: 50ch; }
#ddr-base .ddr-er-assina { margin-top: 14px; font-size: 15px; line-height: 1.4; }
#ddr-base .ddr-er-assina b { font: 600 17px/1.3 var(--ddr-heading); letter-spacing: -.01em; }
#ddr-base .ddr-er-assina--grande b { font-size: 21px; }
#ddr-base .ddr-er a.ddr-er-ler, #ddr-base .ddr-er-fim a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
#ddr-base .ddr-er-vazio { margin-top: 32px; font-size: 17px; color: var(--ddr-text-muted); }

/* retrato: P&B com grão; legenda editorial abaixo, separada por um fio */
#ddr-base .ddr-er-retrato { display: grid; align-content: start; gap: 0; margin: 0; min-width: 0; }
#ddr-base .ddr-er-retrato__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--ddr-charcoal); }
#ddr-base .ddr-er-retrato__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%); filter: grayscale(1) contrast(1.1) brightness(.96); }
#ddr-base .ddr-er-retrato__img::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply; background-image: var(--ddr-grao); }
#ddr-base .ddr-er-retrato figcaption { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--er-fio); font-size: 13px; line-height: 1.4; color: var(--ddr-text-muted); }
#ddr-base .ddr-er-retrato--paisagem .ddr-er-retrato__img { aspect-ratio: 3 / 2; }
#ddr-base .ddr-er-retrato--mini .ddr-er-retrato__img { aspect-ratio: 1; }

/* ---------- /entre-rounds ---------- */
#ddr-base .ddr-er-cabeca { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 16px 48px; padding-bottom: 22px; border-bottom: 1px solid var(--er-fio-forte); }
#ddr-base .ddr-er-cabeca h1 { margin: 10px 0 0; font: 700 clamp(40px, 5cqw, 72px)/.98 var(--ddr-heading); letter-spacing: -.05em; text-wrap: balance; }
#ddr-base .ddr-er-apresenta { font-size: 16px; line-height: 1.55; max-width: 54ch; }
/* o título ocupa a largura toda, para a inserção de "além do" acontecer na mesma linha */
#ddr-base .ddr-er-cabeca > div:first-child { grid-column: 1 / -1; }
#ddr-base .ddr-er-edicao { align-self: end; justify-self: end; grid-column: 2; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
/* a abertura é uma abertura de matéria: foto e texto dividem a mesma altura, a frase fecha a coluna */
#ddr-base .ddr-er-abertura { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 44px; margin-top: 34px; }
#ddr-base .ddr-er-retrato--abertura .ddr-er-retrato__img { aspect-ratio: 5 / 4; }
#ddr-base .ddr-er-abertura__texto { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-top: 12px; border-top: 2px solid var(--ddr-charcoal); }
#ddr-base .ddr-er-abertura h2 { margin: 16px 0 0; font: 700 clamp(34px, 4.2cqw, 60px)/1.02 var(--ddr-heading); letter-spacing: -.045em; text-wrap: balance; }
#ddr-base .ddr-er-frase { margin: 0; }
#ddr-base .ddr-er-abertura .ddr-er-frase { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--er-fio-forte); }
#ddr-base .ddr-er-frase p { font: 600 clamp(23px, 2.2cqw, 30px)/1.24 var(--ddr-heading); letter-spacing: -.025em; text-wrap: pretty; }
#ddr-base .ddr-er-abertura .ddr-er-ler { display: inline-block; margin-top: 18px; }

#ddr-base .ddr-er-arquivo { padding-top: 56px; }
#ddr-base .ddr-er-secao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 26px; padding-bottom: 12px; border-bottom: 1px solid var(--er-fio-forte); }
#ddr-base .ddr-er-secao h2 { font: 600 30px/1.1 var(--ddr-heading); letter-spacing: -.035em; }
/* índice: número, retrato pequeno (a folha de contato, pontual), título, quem, quando */
#ddr-base .ddr-er-indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--er-fio-forte); }
#ddr-base .ddr-er-indice a { display: grid; grid-template-columns: 76px 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--er-fio); }
#ddr-base .ddr-er-indice a:hover b { text-decoration: underline; text-underline-offset: 4px; }
#ddr-base .ddr-er-indice__num { font: 600 14px/1.2 var(--ddr-heading); letter-spacing: .02em; }
#ddr-base .ddr-er-indice__texto { display: grid; gap: 3px; min-width: 0; }
#ddr-base .ddr-er-indice__texto b { font: 600 20px/1.2 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-er-indice__texto small { font-size: 14px; color: var(--ddr-text-muted); }
#ddr-base .ddr-er-indice__data { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ddr-text-muted); }
#ddr-base .ddr-er-fim { margin-top: 36px; font-size: 16px; }

/* ---------- /entre-rounds/:slug ---------- */
#ddr-base .ddr-er-migalhas { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; }
#ddr-base .ddr-er-migalhas a { text-decoration: underline; text-underline-offset: 4px; }
#ddr-base .ddr-er-ep__abertura { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 28px 56px; margin-top: 26px; }
#ddr-base .ddr-er-ep h1 { margin: 14px 0 0; font: 700 clamp(40px, 5.2cqw, 78px)/1 var(--ddr-heading); letter-spacing: -.05em; text-wrap: balance; }
#ddr-base .ddr-er-retrato--ep { justify-self: end; width: 100%; max-width: 460px; }
/* folha: o rótulo fica na margem, como anotação de caderno */
#ddr-base .ddr-er-folha { padding-top: 44px; }
#ddr-base .ddr-er-bloco { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: 12px 40px; padding: 34px 0; border-top: 1px solid var(--er-fio); }
#ddr-base .ddr-er-folha > :first-child .ddr-er-bloco, #ddr-base .ddr-er-folha > .ddr-er-bloco:first-child { border-top: 0; padding-top: 8px; }
#ddr-base .ddr-er-bloco > .ddr-er-rotulo { padding-top: 5px; }
#ddr-base .ddr-er-bloco__corpo { grid-column: 2; min-width: 0; }
#ddr-base .ddr-er-bloco--largo .ddr-er-bloco__corpo { grid-column: 2 / 4; }
#ddr-base .ddr-er-intro { font-size: 20px; line-height: 1.55; max-width: 60ch; }
#ddr-base .ddr-er-intro b { font: 600 21px/1.3 var(--ddr-heading); letter-spacing: -.01em; }
#ddr-base .ddr-er-video { margin: 0; }
#ddr-base .ddr-er-video__quadro { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 2px; background: var(--ddr-charcoal); }
#ddr-base .ddr-er-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#ddr-base .ddr-er-video figcaption { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--er-fio); font-size: 13px; color: var(--ddr-text-muted); }
#ddr-base .ddr-er-semvideo { padding-left: 14px; border-left: 2px solid var(--er-fio-forte); font-size: 16px; line-height: 1.55; color: var(--ddr-text-muted); max-width: 56ch; }
#ddr-base .ddr-er-resumo p { margin: 0 0 16px; font-size: 18px; line-height: 1.68; max-width: 64ch; }
#ddr-base .ddr-er-resumo p:first-child::first-letter { float: left; margin: 7px 10px 0 0; font: 700 66px/.78 var(--ddr-heading); }
#ddr-base .ddr-er-pontos { list-style: none; margin: 0; padding: 0; }
#ddr-base .ddr-er-pontos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-top: 1px solid var(--er-fio); }
#ddr-base .ddr-er-pontos li:first-child { padding-top: 0; border-top: 0; }
#ddr-base .ddr-er-pontos__n { font: 600 16px/1.5 var(--ddr-heading); }
#ddr-base .ddr-er-pontos h3 { font: 600 21px/1.25 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-er-pontos p { margin-top: 6px; font-size: 16px; line-height: 1.55; }
/* o que fica: a lição em corpo grande, com um grifo; as notas do DDR como anotações numeradas; a assinatura */
#ddr-base .ddr-er-fica { padding-block: 60px 68px; }
#ddr-base .ddr-er-fica__grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 40px; }
#ddr-base .ddr-er-fica__grade > .ddr-er-rotulo { padding-top: 10px; }
#ddr-base .ddr-er-fica__licao { font: 700 clamp(34px, 4.6cqw, 66px)/1.04 var(--ddr-heading); letter-spacing: -.045em; text-wrap: balance; }
#ddr-base .ddr-er-grifo { background: linear-gradient(transparent 60%, var(--ddr-verde) 60%, var(--ddr-verde) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#ddr-base .ddr-er-fica__notas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 40px; counter-reset: nota; }
#ddr-base .ddr-er-fica__notas p { padding-top: 12px; border-top: 1px solid var(--er-fio-forte); font-size: 17px; line-height: 1.62; counter-increment: nota; }
#ddr-base .ddr-er-fica__notas p::before { content: 'Nota ' counter(nota); display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#ddr-base .ddr-er-fica__assina { margin-top: 28px; font: 600 16px/1.4 var(--ddr-heading); }
/* falas selecionadas: a primeira em destaque, as outras em duas colunas */
#ddr-base .ddr-er-falas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; margin: 0; padding: 0; }
#ddr-base .ddr-er-falas li:first-child { grid-column: 1 / -1; }
#ddr-base .ddr-er-falas p { font: 600 24px/1.25 var(--ddr-heading); letter-spacing: -.025em; text-wrap: pretty; }
#ddr-base .ddr-er-falas li:first-child p { font-size: clamp(28px, 3cqw, 40px); line-height: 1.16; letter-spacing: -.035em; }
#ddr-base .ddr-er-falas blockquote { margin: 0; }
#ddr-base .ddr-er-falas footer { margin-top: 10px; font-size: 14px; font-weight: 600; }
#ddr-base .ddr-er-falas footer a { text-decoration: underline; text-underline-offset: 3px; }
#ddr-base .ddr-er-seguir .ddr-er-fim { margin-top: 22px; }

@container (max-width: 900px) {
  #ddr-base .ddr-er-retrato--abertura .ddr-er-retrato__img { aspect-ratio: 4 / 5; }
  #ddr-base .ddr-er-retrato--ep { justify-self: start; max-width: 420px; }
  #ddr-base .ddr-er-bloco { padding: 26px 0; }
}
@container (max-width: 550px) {
  #ddr-base .ddr-er-fica__notas, #ddr-base .ddr-er-falas { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-er-indice a { grid-template-columns: 52px 56px minmax(0, 1fr); gap: 12px; }
  #ddr-base .ddr-er-indice__data { grid-column: 3; margin-top: -6px; }
  #ddr-base .ddr-er-indice__texto b { font-size: 18px; }
  #ddr-base .ddr-er-dek, #ddr-base .ddr-er-resumo p { font-size: 17px; }
  #ddr-base .ddr-er-intro { font-size: 18px; }
}

/* ---------- personalidade: pessoas + conversas + reflexão ----------
   Vem da fotografia, das falas, do conteúdo e da composição: escala (uma fala que atravessa a página),
   superfícies e duas quebras em carvão (a conversa, no episódio; uma fala do arquivo, na lista). Minutos só
   onde têm função (levam ao momento do vídeo). Laranja só em marcas e sobre carvão; verde só em "O que fica". */
#ddr-base .ddr-er-frase footer { margin-top: 10px; font-size: 15px; font-weight: 600; }

#ddr-base .ddr-er-ficha__nome { align-self: end; font: 700 clamp(28px, 3.4cqw, 50px)/1 var(--ddr-heading); letter-spacing: -.04em; text-wrap: balance; }
#ddr-base .ddr-er-ficha__iniciais { font: 700 20px/1 var(--ddr-heading); letter-spacing: -.03em; }

/* arquivo: quatro formatos reutilizáveis, escolhidos pelos dados de cada conversa */
#ddr-base .ddr-er-formatos { display: grid; }
#ddr-base .ddr-er-formato { display: grid; align-items: start; gap: 20px 44px; padding: 34px 0; border-top: 1px solid var(--er-fio); }
#ddr-base .ddr-er-formato:first-child { padding-top: 4px; border-top: 0; }
#ddr-base .ddr-er-formato__midia { display: block; min-width: 0; }
#ddr-base .ddr-er-formato__texto { display: grid; align-content: start; gap: 10px; min-width: 0; }
#ddr-base .ddr-er-formato h3 { font: 600 30px/1.08 var(--ddr-heading); letter-spacing: -.035em; text-wrap: balance; }
#ddr-base .ddr-er-formato h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
#ddr-base .ddr-er-formato h3.ddr-er-formato__titulo-grande { font-size: clamp(32px, 3.8cqw, 54px); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; }
#ddr-base .ddr-er-formato__dek { font-size: 16px; line-height: 1.5; max-width: 46ch; }
#ddr-base .ddr-er-formato__frase { font: 600 19px/1.35 var(--ddr-heading); letter-spacing: -.015em; color: var(--ddr-text-muted); }
#ddr-base .ddr-er-formato--fala { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
#ddr-base .ddr-er-formato--fala .ddr-er-formato__midia { max-width: 230px; }
#ddr-base .ddr-er-formato__fala { margin-bottom: 8px; font: 700 clamp(30px, 3.6cqw, 50px)/1.1 var(--ddr-heading); letter-spacing: -.04em; text-wrap: balance; }

/* quebras em carvão */
#ddr-base .ddr-er-carvao { --er-fio: rgba(246, 244, 239, .22); --er-fio-forte: rgba(246, 244, 239, .5); background: var(--ddr-charcoal); color: var(--ddr-offwhite); color-scheme: dark;
  box-shadow: 0 0 0 100vmax var(--ddr-charcoal); clip-path: inset(0 -100vmax); }
#ddr-base .ddr-er-carvao a:focus-visible { outline: 2px solid var(--ddr-offwhite); outline-offset: 3px; }
#ddr-base .ddr-er-interludio { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 14px 40px; margin: 0; padding-block: 64px 70px; }
#ddr-base .ddr-er-interludio > .ddr-er-rotulo { padding-top: 10px; color: rgba(246, 244, 239, .72); }
#ddr-base .ddr-er-interludio blockquote { margin: 0; }
#ddr-base .ddr-er-interludio blockquote p { font: 700 clamp(30px, 4cqw, 58px)/1.1 var(--ddr-heading); letter-spacing: -.04em; text-wrap: balance; }
#ddr-base .ddr-er-interludio footer { margin-top: 18px; font-size: 15px; color: rgba(246, 244, 239, .8); }
#ddr-base .ddr-er-interludio footer a:not(.ddr-er-tempo) { color: var(--ddr-offwhite); text-decoration: underline; text-underline-offset: 4px; }
#ddr-base .ddr-er-arquivo--fim { padding-top: 40px; }
#ddr-base .ddr-er-conversa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px 40px; padding-block: 56px 64px; }
#ddr-base .ddr-er-conversa > .ddr-er-rotulo { padding-top: 4px; color: rgba(246, 244, 239, .72); }
#ddr-base .ddr-er-conversa .ddr-er-video__quadro { box-shadow: 0 0 0 1px rgba(246, 244, 239, .16); }
#ddr-base .ddr-er-conversa .ddr-er-video figcaption { border-top-color: var(--er-fio); color: rgba(246, 244, 239, .72); }

/* uma fala que atravessa a página, em escala própria */
#ddr-base .ddr-er-forte { padding-block: 60px 56px; border-top: 1px solid var(--er-fio); }
#ddr-base .ddr-er-forte blockquote { margin: 0; }
#ddr-base .ddr-er-forte p { font: 700 clamp(40px, 6.6cqw, 104px)/1 var(--ddr-heading); letter-spacing: -.05em; text-wrap: balance; }
#ddr-base .ddr-er-forte footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; font-size: 16px; font-weight: 600; }


/* trechos de transcrição: o minuto na margem, quem fala, o que foi dito */
#ddr-base .ddr-er-transcricao { list-style: none; margin: 0; padding: 0; }
#ddr-base .ddr-er-transcricao li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--er-fio); }
#ddr-base .ddr-er-transcricao li:first-child { padding-top: 0; border-top: 0; }
#ddr-base .ddr-er-transcricao__tempo { grid-row: 1 / span 2; padding-top: 2px; font-size: 15px; }
#ddr-base .ddr-er-transcricao__quem { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#ddr-base .ddr-er-transcricao__texto { font-size: 20px; line-height: 1.5; }

@container (max-width: 900px) {
  #ddr-base .ddr-er-formato--fala .ddr-er-formato__midia { max-width: 150px; }
}
@container (max-width: 550px) {
  #ddr-base .ddr-er-transcricao li { grid-template-columns: 58px minmax(0, 1fr); gap: 4px 12px; }
  #ddr-base .ddr-er-transcricao__texto { font-size: 18px; }
  #ddr-base .ddr-er-formato h3 { font-size: 25px; }
}

/* o Entre Rounds controla o próprio ritmo entre seções (a regra da Home encosta seções consecutivas) */
#ddr-base .base-content.ddr-er + .base-content.ddr-er > :first-child { padding-top: 0; border-top: 0; }
#ddr-base .base-content.ddr-er-folha { padding-top: 44px; }
#ddr-base .base-content.ddr-er-arquivo { padding-top: 56px; }
#ddr-base .base-content.ddr-er-arquivo--fim { padding-top: 40px; }
#ddr-base .base-content.ddr-er-conversa { padding-block: 56px 64px; }
#ddr-base .base-content.ddr-er-fica { padding-block: 60px 68px; }
#ddr-base .base-content.ddr-er-interludio { padding-block: 64px 70px; }
@container (max-width: 550px) {
  #ddr-base .base-content.ddr-er-folha { padding-top: 32px; }
}

/* minutos úteis: levam ao momento do vídeo */
#ddr-base .ddr-er-tempo { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: inherit; }
#ddr-base a.ddr-er-tempo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#ddr-base .ddr-er-carvao .ddr-er-tempo { color: var(--ddr-orange); }

/* sem foto: cartão tipográfico na linguagem do DDR — carvão, iniciais em escala, nome e a dobra E1 com o número */
#ddr-base .ddr-er-ficha { --e1-sup: var(--ddr-charcoal); --d: 76px; position: relative; aspect-ratio: 4 / 5; border-radius: 2px; }
#ddr-base .ddr-er-ficha--abertura { aspect-ratio: 5 / 4; }
#ddr-base .ddr-er-ficha--paisagem { aspect-ratio: 3 / 2; }
#ddr-base .ddr-er-ficha--retrato { --d: 56px; }
#ddr-base .ddr-er-ficha__sup { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; align-content: end; gap: 6px; padding: 7% 8%; border-radius: 2px; color: var(--ddr-offwhite); }
#ddr-base .ddr-er-ficha .ddr-er-ficha__iniciais { align-self: end; font: 700 clamp(64px, 11cqw, 176px)/.8 var(--ddr-heading); letter-spacing: -.06em; }
#ddr-base .ddr-er-ficha--retrato .ddr-er-ficha__iniciais { font-size: clamp(48px, 6cqw, 84px); }
#ddr-base .ddr-er-ficha .ddr-er-ficha__nome { align-self: end; padding-top: 10px; border-top: 1px solid rgba(246, 244, 239, .3); font: 600 clamp(15px, 1.4cqw, 19px)/1.25 var(--ddr-heading); letter-spacing: -.01em; }
#ddr-base .ddr-er-ficha--mini { display: grid; place-items: center; aspect-ratio: 1; background: var(--ddr-charcoal); color: var(--ddr-offwhite); }
#ddr-base .ddr-er-ficha--mini .ddr-er-ficha__iniciais { font: 700 19px/1 var(--ddr-heading); letter-spacing: -.03em; }

/* matéria: imagem e texto lado a lado; a inversa troca o lado para dar ritmo */
#ddr-base .ddr-er-formato--materia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
#ddr-base .ddr-er-formato--inversa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
#ddr-base .ddr-er-formato--inversa .ddr-er-formato__midia { order: 2; }
#ddr-base .ddr-er-transcricao__texto { font: 600 21px/1.35 var(--ddr-heading); letter-spacing: -.015em; }
#ddr-base .ddr-er-forte footer .ddr-er-tempo { font-weight: 600; }

/* ---------- o título: "dentro" é riscado e trocado por "além" no mesmo espaço; o "do" não se mexe ----------
   Um fio fino atravessa "dentro"; "dentro" sobe e sai enquanto "além" sobe e entra; a largura do espaço passa
   de uma palavra à outra (medida pelo script; sem ele, vale a medida de reserva na fonte do DDR). Uma vez, na
   entrada; terminada a animação o título volta ao fluxo natural. Quem pede menos movimento vê direto
   "O jogo além do jogo."; leitores de tela leem só a frase final. */
#ddr-base .ddr-er-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* no hero do sistema, span dentro de h1 vira a segunda linha em laranja; aqui não */
#ddr-base .ddr-er-titulo span { display: inline; color: inherit; }
#ddr-base .ddr-er-titulo .ddr-er-titulo__troca { --w-sai: 2.975em; --w-entra: 2.175em; position: relative; display: inline-block; vertical-align: top; overflow: hidden; margin: -.18em 0 -.04em; padding: .18em 0 .04em; }
#ddr-base .ddr-er-titulo .ddr-er-titulo__entra { display: inline-block; }
#ddr-base .ddr-er-titulo .ddr-er-titulo__sai { position: absolute; left: 0; top: .18em; white-space: nowrap; opacity: 0; }
#ddr-base .ddr-er-titulo .ddr-er-titulo__sai::after { content: ''; position: absolute; left: -.02em; right: -.02em; top: 56%; height: max(2px, .032em); border-radius: 2px; background: var(--ddr-orange); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  #ddr-base .ddr-er-titulo .ddr-er-titulo__troca { animation: ddr-er-largura .55s cubic-bezier(.45, 0, .2, 1) 1.05s backwards; }
  #ddr-base .ddr-er-titulo .ddr-er-titulo__sai { animation: ddr-er-sai .5s cubic-bezier(.45, 0, .2, 1) 1.05s backwards; }
  #ddr-base .ddr-er-titulo .ddr-er-titulo__sai::after { animation: ddr-er-risca .32s ease-out .55s backwards; }
  #ddr-base .ddr-er-titulo .ddr-er-titulo__entra { animation: ddr-er-entra .55s cubic-bezier(.2, 0, 0, 1) 1.12s backwards; }
}
@keyframes ddr-er-largura { from { width: var(--w-sai); } to { width: var(--w-entra); } }
@keyframes ddr-er-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.7em); } }
@keyframes ddr-er-risca { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ddr-er-entra { from { opacity: 0; transform: translateY(1.1em); } to { opacity: 1; transform: none; } }

/* ---------- celular e tablet: tudo empilha (bloco único e explícito, para não se perder em subtrações) ---------- */
@container (max-width: 900px) {
  #ddr-base .ddr-er-cabeca, #ddr-base .ddr-er-abertura, #ddr-base .ddr-er-interludio, #ddr-base .ddr-er-conversa,
  #ddr-base .ddr-er-formato--materia, #ddr-base .ddr-er-formato--inversa, #ddr-base .ddr-er-formato--fala,
  #ddr-base .ddr-er-ep__abertura, #ddr-base .ddr-er-bloco, #ddr-base .ddr-er-fica__grade { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-er-edicao, #ddr-base .ddr-er-conversa .ddr-er-video, #ddr-base .ddr-er-bloco__corpo, #ddr-base .ddr-er-bloco--largo .ddr-er-bloco__corpo { grid-column: auto; }
  #ddr-base .ddr-er-edicao { justify-self: start; }
  #ddr-base .ddr-er-formato--inversa .ddr-er-formato__midia { order: 0; }
}

/* ---------- episódio: conheço a pessoa → assisto à conversa → reflito ---------- */
#ddr-base .ddr-er-ep__intro { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--er-fio-forte); font-size: 18px; line-height: 1.6; max-width: 56ch; }
/* a conversa: o player é uma das peças dominantes da página */
#ddr-base .ddr-er-conversa { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#ddr-base .ddr-er-conversa > .ddr-er-rotulo { padding-top: 0; }
#ddr-base .ddr-er-conversa .ddr-er-video { grid-column: 1 / -1; }
#ddr-base .ddr-er-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 2px; background: #000; box-shadow: 0 0 0 1px rgba(246, 244, 239, .16); }
#ddr-base .ddr-er-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#ddr-base .ddr-er-player__capa { position: absolute; inset: 0; display: block; }
#ddr-base .ddr-er-player__capa img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.82); transition: filter .2s; }
#ddr-base .ddr-er-player__capa:hover img, #ddr-base .ddr-er-player__capa:focus-visible img { filter: grayscale(.2) brightness(.9); }
#ddr-base .ddr-er-player__play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 8cqw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--ddr-orange); transform: translate(-50%, -50%); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
#ddr-base .ddr-er-player__play::after { content: ''; position: absolute; left: 38%; top: 28%; width: 34%; height: 44%; background: var(--ddr-charcoal); clip-path: polygon(0 0, 100% 50%, 0 100%); }
#ddr-base .ddr-er-player__capa:focus-visible { outline: 3px solid var(--ddr-offwhite); outline-offset: -6px; }
#ddr-base .ddr-er-conversa .ddr-er-video figcaption { margin-top: 12px; }
/* falas selecionadas: a primeira em escala própria, as outras como trechos */
#ddr-base .base-content.ddr-er-falas-sel { padding-block: 56px 20px; }
#ddr-base .ddr-er-falas-sel .ddr-er-forte { margin: 18px 0 0; }
#ddr-base .ddr-er-forte p { font: 700 clamp(36px, 5.6cqw, 88px)/1.02 var(--ddr-heading); letter-spacing: -.05em; text-wrap: balance; }
#ddr-base .ddr-er-forte footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; font-size: 16px; font-weight: 600; }
#ddr-base .ddr-er-falas-sel .ddr-er-transcricao { margin-top: 40px; max-width: 860px; }
@container (max-width: 550px) { #ddr-base .ddr-er-ep__intro { font-size: 17px; } #ddr-base .base-content.ddr-er-falas-sel { padding-top: 40px; } }
@container (max-width: 550px) {
  #ddr-base .base-content.ddr-er-conversa, #ddr-base .base-content.ddr-er-fica, #ddr-base .base-content.ddr-er-interludio { padding-block: 44px 48px; }
}

/* ---------- celular: o título inteiro numa linha e a troca num espaço fixo ----------
   A frase "O jogo dentro do jogo." mede 9,425 em: a fonte é o que cabe na largura (menos as margens de 22 px),
   com folga de 3% e teto de 40 px. O espaço da troca tem a largura de "dentro" (a palavra mais larga);
   "dentro" sai e "além" entra nesse mesmo espaço, sem animação de largura — "O jogo" e "do jogo." ficam parados
   do primeiro ao último quadro. Sem animação (menos movimento), a frase fica natural, sem espaço reservado. */
@container (max-width: 550px) {
  #ddr-base .ddr-er-cabeca h1.ddr-er-titulo { font-size: min(40px, calc(10.29cqw - 4.53px)); white-space: nowrap; text-wrap: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
  @container (max-width: 550px) {
    #ddr-base .ddr-er-titulo .ddr-er-titulo__troca { width: var(--w-sai); text-align: center; animation: none; }
  }
}

/* rascunho: só a administração vê (aviso no topo) */
#ddr-base .ddr-er-rascunho { margin: 16px auto 0; padding: 10px 14px; border: 1px solid rgba(24,24,24,.24); border-radius: 8px; background: #FFF4D6; color: var(--ddr-charcoal); font-size: 14px; font-weight: 600; }

/* Capa de vídeo preserva o quadro 16:9; fotos de pessoas mantêm retrato. */
#ddr-base .ddr-er-retrato--video .ddr-er-retrato__img { aspect-ratio: 16 / 9; }