/* =========================================================================
   A SAGA DE TONINHO SAGATIBA
   Paleta e tipografia travadas em comunicacao/BIBLIA-DE-ARTE.md, secoes 4 e 5.

   DUAS familias, e o contraste entre elas E' o sistema:
     titulo   didone de alto contraste, a do master, desenhada em CONTORNO SVG
     corpo    grotesca neutra, corpo pequeno, entrelinha larga

   Sem sombra, sem gradiente, sem card, sem icone, sem biblioteca, sem
   requisicao externa.
   ========================================================================= */

/* ---------- 1. reset curto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* =========================================================================
   2. PALETA E OS TRES ESTADOS DE TEMA

   O visitante tem tres estados, e os tres precisam funcionar:
     a) claro explicito       :root[data-theme="light"]
     b) escuro explicito      :root[data-theme="dark"]
     c) padrao do sistema     raiz sem carimbo nenhum

   Por isso a paleta CLARA COMPLETA mora no :root puro, sem media query. O
   escuro do sistema so' redefine os tokens, e e' protegido contra o caso (a).
   O escuro explicito redefine os mesmos tokens de novo, para ganhar do sistema
   nos dois sentidos.
   ========================================================================= */
:root {
  color-scheme: light;

  /* tintas fechadas da biblia */
  --papel:       #F2EDE3;
  --papel-fundo: #E8E1D3;
  --tinta:       #171310;
  --tinta-fraca: #3A322B;
  --sepia:       #6E5942;   /* sepia da biblia levado ao contraste minimo em papel */
  --amarelo:     #E8B62C;
  --escuro:      #14110E;

  /* papeis funcionais */
  --fundo:       var(--papel);
  --texto:       var(--tinta);
  --texto-2:     var(--tinta-fraca);
  --texto-3:     var(--sepia);
  --linha:       rgba(23, 19, 16, .16);
  --linha-forte: rgba(23, 19, 16, .34);
  --foco:        var(--tinta);      /* 15,6:1 sobre o papel. O amarelo da 1,6:1 e reprova. */
  --grao:        .045;

  --fonte: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Roboto, Arial, sans-serif;

  --larg:       72rem;
  --texto-larg: 36rem;
  --gutter:     clamp(1.375rem, 5vw, 4rem);
  --secao:      clamp(3.5rem, 8vw, 6.5rem);
  --rotulo-col: 12rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo:       var(--escuro);
    --texto:       var(--papel-fundo);
    --texto-2:     #C9BFAD;
    --texto-3:     #A2937D;
    --linha:       rgba(232, 225, 211, .18);
    --linha-forte: rgba(232, 225, 211, .36);
    --foco:        var(--amarelo);   /* 10:1 sobre a tinta */
    --grao:        .06;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo:       var(--escuro);
  --texto:       var(--papel-fundo);
  --texto-2:     #C9BFAD;
  --texto-3:     #A2937D;
  --linha:       rgba(232, 225, 211, .18);
  --linha-forte: rgba(232, 225, 211, .36);
  --foco:        var(--amarelo);
  --grao:        .06;
}

/* ---------- 3. base ---------- */
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* grao de papel por cima de tudo, opacidade baixa, nunca uniforme */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: var(--grao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--amarelo); color: #171310; }

/* ---------- 4. tipografia do corpo ---------- */
.rotulo {
  font-size: .6875rem;
  line-height: 1.45;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--texto-3);
}

h1, h2, h3 { font-weight: 500; line-height: 1.1; }

.titulo-secao {
  font-size: clamp(1.375rem, 3.2vw, 2rem);
  letter-spacing: .01em;
  line-height: 1.18;
  max-width: 22ch;
}

.corpo { max-width: var(--texto-larg); }
.corpo p + p { margin-top: 1.15em; }
.corpo p { color: var(--texto-2); }

.destaque {
  font-size: clamp(1.0625rem, 2.1vw, 1.375rem);
  line-height: 1.45;
  color: var(--texto);
  max-width: 40ch;
}

.miudo { font-size: .875rem; line-height: 1.65; color: var(--texto-3); }
.miudo a { color: var(--texto-2); }

/* ---------- 5. o titulo, em contorno ----------
   A didone do filme e' a Didot do sistema, que nao tem licenca de incorporacao
   em pagina web, e nenhuma didone livre bate o desenho do master. A solucao e'
   a mesma da arte-final do cartaz e do logo: CONTORNO. O lockup, com "A saga
   de" em italico por cima, virou caminho vetorial em assets/img/tipo/, gerado
   por _work/scripts/titulo_svg.py com os mesmos numeros do cartaz
   (entressinal 0,08em, linha de cima a 30% do corpo, fio a 40% da largura).

   O SVG entra como MASCARA e a tinta e' `currentColor`, entao o titulo troca
   de cor com o tema sozinho, sem script e sem segundo arquivo. Se o navegador
   nao souber mascara, o texto de verdade continua na tela, na grotesca.

   O FIO e' desenhado aqui, e nao no SVG. No cartaz ele e' um filete de tres
   pixels em quatro mil; na largura de um celular a mesma proporcao daria
   0,41 px e o filete sumiria pela metade num antisserrilhado. Ele e' a
   assinatura grafica do filme e nao pode depender do tamanho da tela, entao
   tem a geometria exata do cartaz com um piso de um pixel. */
.titulo-obra {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.12;
}
.t-obra         { --lockup: url("../img/tipo/titulo-obra.svg"); --lockup-r: 11923 / 1668; --fio-w: 40.00%; --fio-h: 0.896%; }
.t-curadoria    { --lockup: url("../img/tipo/titulo-curadoria.svg"); --lockup-r: 7252 / 2793; --fio-w: 40.00%; --fio-h: 0.535%; }
.t-comprador    { --lockup: url("../img/tipo/titulo-comprador.svg"); --lockup-r: 11137 / 2977; --fio-w: 40.00%; --fio-h: 0.502%; }
.t-curadoria-en { --lockup: url("../img/tipo/titulo-curadoria-en.svg"); --lockup-r: 6555 / 2793; --fio-w: 40.00%; --fio-h: 0.535%; }
.t-comprador-en { --lockup: url("../img/tipo/titulo-comprador-en.svg"); --lockup-r: 9981 / 2781; --fio-w: 40.00%; --fio-h: 0.538%; }

@supports (mask-image: url(#a)) or (-webkit-mask-image: url(#a)) {
  .titulo-obra {
    position: relative;
    width: 100%;
    aspect-ratio: var(--lockup-r);
  }
  /* a mascara vive no ::before, e nao no h1: mascara aplicada no elemento
     recortaria tambem o fio do ::after, que nao esta no SVG. */
  .titulo-obra::before {
    content: "";
    position: absolute; inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--lockup) no-repeat left top / contain;
            mask: var(--lockup) no-repeat left top / contain;
  }
  .titulo-obra::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: var(--fio-w);
    height: max(1px, var(--fio-h));
    background: currentColor;
    opacity: .8;
  }
  /* o texto de verdade continua no documento, recortado a um pixel. Ele leva o
     fundo da pagina junto para nao herdar a tinta da mascara do titulo. */
  .titulo-obra > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
    background: var(--fundo); color: var(--texto);
  }
}

.sub .titulo-obra { max-width: 28rem; }

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

/* o sinal da produtora, monocromatico, herdando a cor do tema */
.marca-bb {
  display: block; width: 34px; aspect-ratio: 1249.72 / 1010.97;
  flex: none; color: var(--texto-3);
  background-color: currentColor;
  -webkit-mask: url("../img/marca-balba-bossa.svg") no-repeat center / contain;
          mask: url("../img/marca-balba-bossa.svg") no-repeat center / contain;
}

/* ---------- 6. links ---------- */
a { color: inherit; }
a:not(.limpo) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--linha-forte);
  transition: text-decoration-color .18s ease, color .18s ease;
}
a:not(.limpo):hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 1px;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--fundo); color: var(--texto);
  padding: .75rem 1rem; z-index: 20;
}
.pular:focus { left: var(--gutter); top: .5rem; }
#conteudo:focus { outline: none; }

/* ---------- 7. estrutura ---------- */
.faixa { border-top: 1px solid var(--linha); }
.faixa:first-of-type { border-top: 0; }

.envelope {
  width: 100%;
  max-width: var(--larg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao); }

/* uma grade so': rotulo na calha, conteudo na coluna */
.grade { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 56rem) {
  .grade {
    grid-template-columns: var(--rotulo-col) minmax(0, 1fr);
    gap: 3.5rem;
  }
  .grade > .rotulo { padding-top: .45rem; }
}

/* ---------- 8. controles de canto ----------
   Idioma e tema. Corpo minimo, cor de texto secundario, sem caixa e sem
   icone: eles existem para quem procura e nao competem com a obra. */
.controles {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1.5rem;
  padding-block: 1rem .25rem;
  font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-2);
}
.controles .grupo { display: flex; align-items: center; gap: .5rem; }
.controles [aria-current="true"] { color: var(--texto); text-decoration-color: currentColor; }
.controles a, .controles button { color: var(--texto-2); }
.controles button {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .3em; text-decoration-color: var(--linha-forte);
}
.controles button:hover { color: var(--texto); text-decoration-color: currentColor; }
.sep { color: var(--linha-forte); }

/* ---------- 9. abertura ----------
   Duas colunas, uma grade, uma borda direita: texto na coluna larga, cartaz
   na estreita. O rosto do Toninho entra na primeira tela, que e' onde ele
   precisa estar. */
.abertura { padding-top: clamp(1.5rem, 5vh, 3rem); padding-bottom: var(--secao); }
.abertura .marca { margin-bottom: clamp(1.75rem, 5vw, 3rem); }
.abertura .titulo-obra { margin-bottom: 1.6rem; }

.dobra { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 62rem) {
  .dobra {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: center;
  }
}

.linha-formato {
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.logline { max-width: none; }

.cartaz img { width: 100%; height: auto; }
.cartaz figcaption { margin-top: .9rem; }

/* ---------- 10. video ----------
   Elemento nativo, preload="none": zero byte antes de o visitante pedir, e
   nenhum rotulo por cima da foto, que e' onde o contraste morria. */
.video {
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--fundo);
  border: 1px solid var(--linha);
}
.video + .miudo { margin-top: 1.1rem; max-width: 54ch; }

/* ---------- 11. ficha ---------- */
.ficha { border-top: 1px solid var(--linha); }
.ficha > div {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 40rem) {
  .ficha > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; align-items: baseline; }
}
.ficha dt {
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: var(--texto-3); padding-top: .28rem;
}
.ficha dd { color: var(--texto-2); }
/* rotulo interno de campo longo, como o "Em produção:" de Materiais disponíveis.
   Sobe para a tinta cheia e fica no peso 500 do resto da pagina: e' marcador de
   bloco, nao enfase gritada. */
.ficha dd strong { color: var(--texto); font-weight: 500; }

/* ---------- 12. os seis ----------
   Retrato frontal em cada ficha. Foto vende personagem, texto nao. */
.seis { display: grid; grid-template-columns: 1fr; gap: 2.5rem 2.5rem; }
@media (min-width: 34rem) { .seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seis img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1rem; }
.seis .nome {
  font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; margin-bottom: .5rem; color: var(--texto);
}
.seis p { font-size: .9375rem; line-height: 1.6; color: var(--texto-2); }

/* ---------- 13. contato ---------- */
.contato-bloco { display: grid; gap: .1rem; }
.contato-bloco .nome-pessoa { font-size: 1.125rem; letter-spacing: .02em; }

.acoes { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2rem; }
.acao {
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .35em; text-decoration-color: var(--linha-forte);
}

/* ---------- 13b. formulário ----------
   Só existe na página quando a porta da cópia de visionamento existe de fato.
   O rótulo fica colado no PRÓPRIO campo, e o respiro grande vai entre um campo
   e o rótulo seguinte: o olho tem que agrupar filete com rótulo certo. */
.form { max-width: 30rem; }
.campo { display: grid; gap: .3rem; margin-bottom: 2.25rem; }
.campo label {
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 500;
}
.campo input {
  font: inherit; color: var(--texto);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--texto-3);
  padding: .5rem 0; font-size: 1rem; border-radius: 0; width: 100%;
}
.campo input:focus { border-bottom-color: var(--texto); }
.botao {
  border: 1px solid var(--texto-3);
  color: var(--texto);
  padding: .8rem 1.6rem;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  border-radius: 0;
  transition: border-color .18s ease;
}
.botao:hover { border-color: var(--texto); }
.aviso { margin-top: 1rem; font-size: .875rem; color: var(--texto-2); }
.aviso:empty { margin-top: 0; }

/* ---------- 14. listas de documento ---------- */
.lista-simples li {
  border-top: 1px solid var(--linha);
  padding-block: .9rem;
  color: var(--texto-2);
}
.lista-simples li:last-child { border-bottom: 1px solid var(--linha); }

.subtitulo {
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: var(--texto-3); margin-top: 2.75rem;
}
.subtitulo:first-child { margin-top: 0; }

/* ---------- 15. portas de mercado ---------- */
.portas { display: flex; flex-wrap: wrap; gap: .6rem 2.25rem; margin-top: 2.5rem; }
.portas a {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-3);
  text-decoration-color: var(--linha);
}
.portas a:hover { color: var(--texto); }

/* ---------- 16. rodape ---------- */
.rodape { border-top: 1px solid var(--linha); padding-block: clamp(2.5rem, 6vw, 4rem); }
.rodape-nota { font-size: .8125rem; line-height: 1.7; color: var(--texto-3); max-width: 46ch; }
.assinatura {
  display: flex; align-items: center; gap: 1.75rem;
  margin-top: 2.5rem;
}
.rodape-fim {
  font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-3);
}

/* ---------- 17. sub-rotas ---------- */
.voltar {
  display: inline-block;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.sub { padding-top: clamp(1rem, 3vh, 2rem); padding-bottom: var(--secao); }
.sub .destaque { margin-top: 1.75rem; }

.oculto { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  body::before, .controles, .portas, .video { display: none; }
}