/* ==========================================================================
   STHEFANY — base
   base.css · v0.5.1
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sp-papel);
  color: var(--sp-tinta);
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-corpo);
  line-height: var(--sp-lh-corpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--sp-fonte-titulo);
  line-height: var(--sp-lh-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

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

/* O `<picture>` some do layout. Ele existe só para o navegador escolher entre
   AVIF, WebP e JPEG; deixá-lo como caixa inline acrescentaria uma linha de
   texto vazia dentro de cada moldura de foto e empurraria a imagem para
   baixo. Com `contents`, quem participa do grid ou do flex do pai continua
   sendo a `<img>`, como antes de o envelope existir. */
picture { display: contents; }

/* Sem sublinhado em lugar nenhum. O sinal de link neste projeto é a cor, o
   fio que cresce no hover ou o próprio botão — nunca o traço do navegador.
   Quando um link aparecer no meio de texto corrido, ele recebe `.sp-link`,
   que devolve o sublinhado onde ele de fato ajuda a distinguir. */
a {
  color: inherit;
  text-decoration: none;
}

.sp-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--sp-transicao);
}
.sp-link:hover { text-decoration-color: currentColor; }

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

.sp-pular {
  position: absolute;
  left: var(--sp-margem);
  top: -100%;
  z-index: 100;
  padding: var(--sp-e-3) var(--sp-e-5);
  background: var(--sp-acento);
  color: #fff;
  text-decoration: none;
  border-radius: var(--sp-raio);
  transition: top var(--sp-transicao);
}
.sp-pular:focus { top: var(--sp-e-4); }

/* Bloco escuro sobre a página branca. Redefine os tokens de texto e de linha
   no próprio escopo, para os componentes internos não precisarem saber em que
   superfície estão.

   Não usar em elemento que já tem fundo próprio — cabeçalho e barra de abas
   têm o deles e a classe sobrescreveria com um opaco. */
.sp-escuro {
  background: var(--sp-fundo);
  border-radius: var(--sp-raio-bloco);
  color: var(--sp-texto);
  --sp-tinta:       var(--sp-texto);
  --sp-tinta-2:     var(--sp-texto-2);
  --sp-tinta-3:     var(--sp-texto-3);
  --sp-linha-clara: var(--sp-linha);
  /* Só o acento EM TEXTO muda de superfície. `--sp-acento` continua o
     mesmo, porque ele também é fundo de botão: clareá-lo aqui derrubaria
     o contraste do branco por cima de 4,84 para 3,80 — consertaria o
     asterisco e quebraria o botão. */
  --sp-acento-texto: var(--sp-acento-claro);
}

/* O bloco escuro é recuado da janela nos quatro lados. Sem recuo a curva do
   topo encostaria na borda e não se veria — o arredondamento só existe porque
   há papel branco em volta. */
.sp-escuro { margin: var(--sp-recuo-bloco); }

/* Escape para bloco que deva sangrar de propósito. */
.sp-escuro--sangra { margin: 0; border-radius: 0; }

/* --- moldura alternável ----------------------------------------------------
   Os topos das páginas internas — artista, show, post, a agência — e o hero
   da home aceitam as duas molduras. No quadro o papel branco contorna o bloco
   e a curva aparece; sangrado ele encosta nas quatro bordas.

   É `data-moldura` e não uma classe porque a escolha é do cliente e o painel
   do protótipo precisa alterná-la ao vivo, lado a lado. No plugin vira um
   controle do widget.

   A escolha deve ser a MESMA em todas as telas: metade sangrando e metade em
   quadro lê como descuido, não como variedade. */
[data-moldura="sangra"] { margin: 0; border-radius: 0; }

/* Filho posicionado não é cortado pela curva do pai quando não há
   `overflow: hidden` — e a página do show não pode ter, porque o menu de
   agenda abre para fora. `inherit` resolve sem cortar nada: o fundo e o véu
   ganham a mesma curva do bloco, e zero quando ele sangra. */
[data-moldura] > [class$="__fundo"],
[data-moldura] > [class$="__veu"] { border-radius: inherit; }

/* E `border-radius` sozinho não corta o que está DENTRO: a curva no invólucro
   da fotografia não faz nada com a `<img>` lá dentro. O recorte precisa do
   `overflow`, e ele vai no invólucro — nunca no bloco, que na página do show
   deixa o menu de agenda abrir para fora. */
[data-moldura] > [class$="__fundo"] { overflow: hidden; }

/* Container de borda a borda: usa a margem do bloco, sem largura máxima.
   É o que cabeçalho e hero pedem — dentro de um bloco que sangra na tela,
   parar o conteúdo numa borda invisível de 84rem deixa ícone, botão e painel
   ilhados no meio, longe da borda que se vê. */
.sp-cheio {
  width: 100%;
  padding-inline: var(--sp-margem);
}

.sp-limite {
  width: 100%;
  max-width: var(--sp-largura);
  margin-inline: auto;
  padding-inline: var(--sp-margem);
}

/* --- botões ------------------------------------------------------------ */

.sp-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
  padding: 0.9375rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--sp-raio-botao);
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-peq);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--sp-transicao), border-color var(--sp-transicao),
              color var(--sp-transicao);
}

.sp-botao--cheio {
  background: var(--sp-acento);
  color: #fff;
}
.sp-botao--cheio:hover { background: var(--sp-acento-esc); }

/* O contorno deriva da cor do texto do contexto, então o mesmo botão serve
   o bloco escuro e a página branca sem variante. */
.sp-botao--linha {
  border-color: color-mix(in srgb, currentColor 26%, transparent);
  color: inherit;
}
.sp-botao--linha:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

/* Botão compacto, para barra de ferramentas e blocos de consulta — o tamanho
   normal é de chamada para ação e pesa demais ao lado de um seletor. */
.sp-botao--peq {
  padding: var(--sp-e-2) var(--sp-e-4);
  font-size: var(--sp-t-mini);
}

/* Sobre fotografia o contorno sozinho não segura. A foto de palco tem faixas
   de luz e áreas quase brancas, e o botão que cair numa delas some — o
   "Compartilhar" da página do show lia como desabilitado. Dentro de bloco
   escuro ele ganha corpo translúcido: sobre foto, é o que garante a leitura;
   sobre bloco sem foto — rodapé, newsletter — a diferença é imperceptível,
   então não precisa de variante própria. */
.sp-escuro .sp-botao--linha {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(11, 5, 5, .46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sp-escuro .sp-botao--linha:hover {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(11, 5, 5, .68);
}

.sp-botao i { font-size: 1.125em; }

/* --- ícone -------------------------------------------------------------------
   Os ícones eram a fonte Phosphor servida do unpkg: dois CSS e duas fontes,
   cerca de 443 KB de um domínio de terceiro para usar 60 glifos de perto de
   nove mil — e com `font-display: block`, que deixa o ícone invisível até a
   fonte chegar. Mais pesado que o embutido de YouTube que a fachada existe
   para evitar, e a única coisa do projeto que contradizia a regra de não
   carregar terceiro.

   Agora cada página traz uma folha `<svg class="sp-icones">` com apenas os
   símbolos que ela usa, e cada ícone é um `<use>` apontando para ela.

   O elemento continua sendo `<i>` de propósito: vinte seletores pelo site
   dimensionam e colorem o ícone por `font-size` e `color` no `<i>`. Com o
   SVG em `1em` dentro dele e `fill: currentColor`, todos continuam valendo
   sem uma linha de mudança. Trocar o `<i>` pelo `<svg>` obrigaria a reescrever
   os vinte. */

.sp-icones { display: none; }

.sp-i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sp-i svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* --- foto: placeholder do protótipo ------------------------------------
   Bloco que simula fotografia de palco. No site real vira <img>. Mantido
   como classe própria para sumir de uma vez quando as fotos chegarem. */

.sp-foto {
  position: relative;
  overflow: hidden;
  background: var(--sp-fundo-alto);
}

.sp-foto--simulada::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 22% 8%, rgba(224, 27, 23, .38), transparent 62%),
    radial-gradient(70% 80% at 82% 26%, rgba(142, 35, 28, .55), transparent 68%),
    radial-gradient(90% 60% at 50% 108%, rgba(11, 5, 5, .96), transparent 70%),
    linear-gradient(168deg, #2A100D 0%, #120707 58%, #0B0505 100%);
}

.sp-foto--simulada::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(112deg,
      rgba(255, 255, 255, .045) 0 1px, transparent 1px 7px);
}

.sp-foto__rotulo {
  position: absolute;
  left: var(--sp-e-4);
  bottom: var(--sp-e-4);
  z-index: 2;
  padding: var(--sp-e-1) var(--sp-e-3);
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: var(--sp-raio);
  font-size: var(--sp-t-mini);
  color: var(--sp-texto-3);
  letter-spacing: .04em;
}

/* Rótulo visível só para leitor de tela. Campo sem label é a falha de
   acessibilidade mais comum em formulário; placeholder não é rótulo. */
.sp-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   Sessão de imprensa
   --------------------------------------------------------------------------
   A credencial vale em todo o site, não só na área de imprensa: é na página
   de cada artista que o material dela aparece. O estado é `data-imprensa` no
   `<html>`, e estas duas regras são tudo o que as páginas precisam saber.

   Isto é o DESENHO dos dois estados, não a proteção deles. No protótipo os
   itens de credenciado estão no HTML e o CSS os revela; no WordPress quem
   decide é o servidor, e o HTML do visitante nunca contém aqueles links.

   `display: none` genérico, sem `!important`: um bloco que precise nascer em
   `grid` ou `flex` redeclara o próprio `display` na regra de baixo.
   ========================================================================== */

[data-imprensa="nao"] [data-so-credenciado],
[data-imprensa="sim"] [data-so-visitante] { display: none; }