/* base.css: as cores, a letra e as peças miúdas do desenho 07, "Grafite e laranja": fundo grafite, cartões um tom
   acima, linhas discretas, texto claro e o laranja-queimado só no que se aperta (play, botão principal, tema marcado).
   Títulos em Anton (caixa alta, grandes), corpo em Inter.
   Depende de: as fontes Anton e Inter, do Google, no <head>. Telefone nas regras soltas, computador no @media do fim. */

:root {
  --fundo: #17191c;
  --cartao: #212429;
  --cartao-alto: #2a2e34;
  --linha: #2e3238;
  --linha-clara: rgba(242, 242, 240, .32);
  --texto: #f2f2f0;
  --texto-suave: #b8bcc2;
  --texto-fraco: #858b94;
  --laranja: #ff7a1a;
  --laranja-forte: #ff8f3f;
  --tinta-no-laranja: #17191c;

  --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-titulo: "Anton", "Impact", "Arial Narrow", sans-serif;

  --raio: 8px;
  --raio-pequeno: 4px;
  --largura: 1180px;
  --margem: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

/* ------------------------------------------------------------ miúdos */

.pular {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  padding: 10px 16px; border-radius: var(--raio-pequeno);
  background: var(--laranja); color: var(--tinta-no-laranja); font-weight: 600;
}
.pular:focus { left: 8px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.miolo { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto; }

/* ------------------------------------------------------------ títulos em Anton */

.titulo {
  font-family: var(--letra-titulo); font-weight: 400; line-height: .98;
  letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere;
}

/* o título de uma seção da página ("COMECE POR AQUI", "TODOS OS EPISÓDIOS") */
.titulo--secao { font-size: 32px; }

/* o título de um bloco dentro da seção ("CAPÍTULOS", "QUEM FAZ") */
.titulo--bloco { font-size: 24px; }

/* o rótulo pequeno em caixa alta que abre um cartão ("ÚLTIMO EPISÓDIO") */
.sobretitulo { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }

/* a cabeça de uma seção: o título à esquerda e uma nota à direita */
.secao__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }

.secao__nota { font-size: 15px; color: var(--texto-suave); }

/* ------------------------------------------------------------ botões e pílulas */

/* o botão laranja: a ação principal da página, uma por página */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--raio-pequeno);
  background: var(--laranja); color: var(--tinta-no-laranja);
  font-family: var(--letra-titulo); font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.botao:hover { background: var(--laranja-forte); }

/* o mesmo botão sem o laranja, só o contorno claro: as ações de apoio */
.botao--contorno { background: none; color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-clara); }
.botao--contorno:hover { background: var(--cartao-alto); }

/* a pílula: tema do episódio e filtro da lista; marcada, fica laranja */
.pilula {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--cartao); color: var(--texto);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pilula:hover { border-color: var(--linha-clara); }
.pilula[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--tinta-no-laranja); }

.pilula__total { font-weight: 400; color: var(--texto-fraco); }
.pilula[aria-pressed="true"] .pilula__total { color: inherit; opacity: .75; }

/* ------------------------------------------------------------ o endereço do feed com o botão de copiar */

.feed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feed code { font-size: 14px; overflow-wrap: anywhere; color: var(--texto-suave); }
.feed__copiar { min-height: 32px; padding: 0 12px; border: 1px solid var(--linha-clara); border-radius: 999px; background: none; font-size: 13px; }
.feed__copiar:hover { background: var(--cartao-alto); }

/* ------------------------------------------------------------ as janelas do comum */

/* o título da janela, na letra dos títulos do desenho */
.modal-titulo { font-family: var(--letra-titulo); font-size: 22px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }

/* a janela de compartilhar que o player.js monta (minuto, endereço, copiar e WhatsApp) */
.compartilhar { display: grid; gap: 14px; }

.compartilhar__minuto { display: flex; align-items: center; gap: 8px; font-size: 15px; accent-color: var(--laranja); }

.compartilhar__endereco {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px;
}

.compartilhar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.compartilhar__botao {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--linha-clara); border-radius: var(--raio-pequeno); background: none; color: var(--texto);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.compartilhar__botao:hover { background: var(--cartao-alto); }

.compartilhar__botao--zap { border-color: var(--laranja); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (min-width: 900px) {
  :root { --margem: 32px; }
  body { font-size: 17px; }
  .titulo--secao { font-size: 44px; }
  .titulo--bloco { font-size: 28px; }
  .secao__cabeca { margin-bottom: 28px; }
}