/* ============================================================
   AFFAIRS RECORDS — 2026
   Cinco telas-cartaz. Fundo alterna entre tinta, papel e vermelho.
   Sem animacao de scroll: as telas sao cartazes, nao slides.
   Paleta e fontes do Affairs, inalteradas.
   ============================================================ */

@font-face{
  font-family:"Mozaic";
  src:url("/fonts/mozaichum-extrablack.otf") format("opentype");
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Mozaic";
  src:url("/fonts/mozaichum-light.otf") format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Junicode";
  src:url("/fonts/Junicode-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --affred:#ed220d;
  --title:#3a0d0a;   /* titulos das faixas e fundo do rodape */
  --footred:#d93f2a; /* texto do rodape sobre o --title */

  /* Uma curva so para o site inteiro. E o que faz a coreografia ler
     como sistema em vez de efeitos avulsos. */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-type:1.15s;
  --dur-block:1.3s;
  --dur-quiet:.72s;
  --signature:#831a13;
  --page:#320d09;
  --ink:#000;
  --paper:#fff;

  --gut:clamp(14px,2.6vw,34px);
  --rule:2px;
  --hair:1px;

  --f-display:"Mozaic","Arial Black",Impact,sans-serif;
  --f-body:"Mozaic","Arial",Helvetica,sans-serif;
  --f-serif:"Junicode",Georgia,"Times New Roman",serif;

  /* largura util de uma linha que sangra de ponta a ponta */
  --bleed:calc(100vw - (var(--gut) * 2));
  /* largura media do glifo do Mozaic ExtraBlack, em em, ja com o
     letter-spacing negativo aplicado. Usado para dimensionar cada
     linha pela contagem de caracteres. */
  --glyph:.545;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}

::selection{background:var(--affred);color:var(--paper)}
:focus-visible{outline:3px solid var(--affred);outline-offset:2px}

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

/* ---------- grao ---------- */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ============================================================
   TELAS
   ============================================================ */
.screen{
  position:relative;
  padding:0 var(--gut);
  overflow:hidden;
}
.screen--ink{background:var(--ink);color:var(--paper)}
.screen--paper{background:var(--paper);color:var(--affred)}
.screen--red{background:var(--title);color:var(--footred)}

/* ---------- barras de ponta a ponta ---------- */
.bar{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;
  padding:.85rem 0;
  font-family:var(--f-body);font-weight:300;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:clamp(8px,.72vw,11px);
  line-height:1;
}
.bar--top{border-bottom:var(--rule) solid currentColor}
.bar--bottom{border-top:var(--rule) solid currentColor}
.bar span:last-child{text-align:right}
.bar .mid{display:none}
@media (min-width:900px){
  .bar .mid{display:block;text-align:center}
}

/* ============================================================
   LINHA QUE SANGRA — tamanho vem da contagem de caracteres
   ============================================================ */
.line{
  display:block;
  /* o deslocamento lateral do JS (compensacao do side bearing) entra
     como left: nao afeta o fluxo, entao a medicao nao entra em deriva */
  position:relative;
  font-family:var(--f-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.05em;
  line-height:.79;
  white-space:nowrap;
  font-size:calc(var(--bleed) / (var(--c,10) * var(--glyph)));
}
.line--half{font-size:calc(var(--bleed) / (var(--c,10) * var(--glyph) * 2))}
/* involucro criado pelo JS: serve de regua para a medicao e de peca
   deslizante para a mascara da revelacao */
/* width:max-content e obrigatorio. Sem ele, quando a linha tem uma
   capa encaixada, o navegador reduz a caixa do inline-block a
   largura disponivel e o conteudo VAZA para fora dela: a medicao
   lia a caixa, achava que ja cabia, e o ultimo glifo saia cortado. */
.line__in{display:inline-block;white-space:nowrap;width:max-content}
/* marca da linha de base usada pela medicao. letter-spacing:0 para
   nao acrescentar entreletra depois dela e falsear a largura */
.line__b{display:inline-block;width:0;height:0;overflow:hidden;letter-spacing:0;vertical-align:baseline}
.line--ink{color:var(--ink)}
.line--red{color:var(--affred)}
.line--paper{color:var(--footred)}

/* imagem encaixada dentro da linha, no lugar de uma palavra */
.slot{
  display:inline-block;
  vertical-align:baseline;
  height:.74em;
  width:auto;
  object-fit:cover;
  transform:translateY(.045em);
}
.slot--wide{width:1.55em;height:.62em;transform:translateY(-.02em)}

/* ============================================================
   TELA 1 — HEADER
   ============================================================ */
.hero{
  min-height:100svh;
  padding-bottom:.2rem;
  display:flex;flex-direction:column;
  background:var(--ink);
}
/* folga extra: o parallax desloca o video para baixo, e sem esta
   margem abriria um vao no topo do header */
.hero__media{
  position:absolute;left:0;right:0;top:-14%;height:128%;
  z-index:0;background:var(--ink);
  will-change:transform;
}
.hero__media video{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.15) saturate(.9) brightness(.5);
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,rgb(58 13 10 / .28) 0%,rgb(20 4 3 / .82) 100%);
}
/* :not(.hero__media) e essencial — sem isso este seletor sobrescreve o
   position:absolute do video, que volta ao fluxo e empurra o header. */
.hero > *:not(.hero__media){position:relative;z-index:2}

/* logo a esquerda, assinatura a direita, na mesma altura */
.hero__core{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(2rem,6vh,5rem) 0;
}
/* logo inteiro, centralizado */
.hero__logo{
  display:block;
  width:min(100%,34vw);
  height:auto;
  filter:url(#tint-affred);
}
@media (max-width:860px){
  .hero__logo{width:min(100%,72vw)}
}

/* ============================================================
   TELA 2 — MANIFESTO (papel)
   ============================================================ */
.manifesto{padding-bottom:clamp(2rem,6vh,4rem)}
.stack{
  position:relative;
  padding:clamp(1.5rem,4vh,3rem) 0 clamp(1.5rem,4vh,3rem);
}
/* --gap: afastamento entre linhas gigantes empilhadas, lido pelo JS.
   A regra de margin-top abaixo e o equivalente para quem esta sem JS. */
.stack{--gap:.137}
.stack .line + .line{margin-top:.02em}

.cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem clamp(1rem,3vw,3rem);
  padding:clamp(1.4rem,3.5vh,2.4rem) 0;
  border-top:var(--rule) solid currentColor;
}
@media (min-width:900px){
  .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.col b{
  display:block;
  font-family:var(--f-body);font-weight:300;
  text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(8px,.7vw,10px);
  margin-bottom:.7rem;
  opacity:.55;
}
.col p{
  font-family:var(--f-body);font-weight:300;
  font-size:clamp(13px,.95vw,16px);
  line-height:1.4;
  letter-spacing:.01em;
}
.col--wide{grid-column:span 2}

/* ============================================================
   TELA 3 — RELEASES (tinta)
   ============================================================ */
.heads{padding:clamp(1.6rem,4vh,3rem) 0 0}
.head-rel{
  display:block;
  padding:.28em 0 clamp(.7rem,1.4vh,1.2rem);
  border-bottom:var(--hair) solid rgb(255 255 255 / .16);
  color:var(--title);
}
/* Sem transicao na cor do titulo gigante — e o que travava o hover.
   `color` nao e animavel pela placa de video: o navegador redesenha o
   texto a cada quadro durante a transicao, e acima de ~100px de corpo
   ele desenha cada letra como contorno vetorial em vez de usar o cache
   de glifos. Medido: a transicao multiplicava por dez o trabalho de
   rasterizacao. A troca instantanea da o mesmo destaque de graca. */
.head-rel:hover{color:var(--affred)}
.head-rel__meta{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0 clamp(.55rem,1vw,1rem);
  font-family:var(--f-body);font-weight:300;
  text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(8px,.7vw,10px);
  color:var(--affred);
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2.4rem) clamp(.7rem,1.4vw,1.4rem);
  padding:clamp(2rem,5vh,3.5rem) 0 clamp(1.5rem,4vh,3rem);
}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1400px){.grid{grid-template-columns:repeat(7,minmax(0,1fr))}}

.card{display:block}
.card__fig{position:relative;display:block;overflow:hidden;background:var(--title)}
.card__fig img{width:100%;aspect-ratio:1;object-fit:cover}
/* Sem mix-blend-mode: o modo de mesclagem obriga o navegador a
   rasterizar de novo todo o contexto de empilhamento a cada hover, e
   com 13 capas mais o grao fixo por cima isso trava. Um veu opaco
   comum da praticamente o mesmo resultado sobre capa escura. */
.card__fig::after{
  content:"";position:absolute;inset:0;
  background:rgb(237 34 13 / .5);
  opacity:0;transition:opacity .16s linear;
}
.card:hover .card__fig::after{opacity:.55}
.card__n{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--title);color:var(--paper);
  padding:.22rem .45rem;
  font-family:var(--f-body);font-weight:300;
  font-size:9px;letter-spacing:.18em;line-height:1;
}
/* nao usar --title aqui: #3a0d0a sobre preto fica ilegivel neste corpo.
   A cor fica so nos titulos grandes, onde a massa do tipo sustenta. */
.card__t{
  display:block;margin-top:.55rem;
  color:var(--paper);
  font-family:var(--f-display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(11px,.92vw,14px);
}
.card__a{
  display:block;margin-top:.25rem;
  font-family:var(--f-body);font-weight:300;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:9px;line-height:1.3;
  color:var(--affred);
}

/* ============================================================
   TELA 4 — RADIO + LIVE (papel)
   ============================================================ */
.watch{
  display:block;
  padding:clamp(1.4rem,3.5vh,2.6rem) 0;
  border-bottom:var(--rule) solid currentColor;
  color:var(--affred);
}
.watch:last-of-type{border-bottom:0}
.watch__row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;
  /* a caixa da linha gigante agora termina na TINTA da letra, entao
     esta distancia e o espaco que se ve de verdade — antes ela era
     comida pela folga da caixa e o texto miudo encostava na maiuscula */
  padding-bottom:clamp(1rem,1.6vw,1.7rem);
  font-family:var(--f-body);font-weight:300;
  text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(8px,.7vw,10px);
}
.watch img.duo{filter:url(#duo)}
.watch:hover .line{color:var(--ink)}   /* sem transicao: ver .head-rel */

.films{
  display:grid;gap:clamp(1.2rem,2.5vw,2rem);
  padding:clamp(1.4rem,3.5vh,2.4rem) 0;
  border-top:var(--rule) solid currentColor;
}
@media (min-width:860px){.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
.film img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:url(#duo)}
.film__cap{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-top:.6rem;
  font-family:var(--f-body);font-weight:300;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(8px,.72vw,10px);
  color:var(--affred);
}
.film__t{
  display:block;padding-top:.35rem;
  font-family:var(--f-display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(14px,1.5vw,22px);
  color:var(--ink);
  transition:color .18s linear;
}
.film:hover .film__t{color:var(--affred)}

/* ============================================================
   TELA 5 — CONTATO (vermelho cheio)
   ============================================================ */
.knock{position:relative;display:inline-block;z-index:1}
/* inset generoso no topo/base: a caixa de linha e bem mais alta que a
   altura das maiusculas; sem isso os blocos de linhas vizinhas se
   encostam e viram um campo preto solido. */
.knock::before{
  content:"";position:absolute;inset:.17em 0 .21em 0;
  background:var(--ink);
  transform:translate(.045em,.05em);
  z-index:-1;
}

.contact{padding:clamp(2rem,5vh,4rem) 0 clamp(1.5rem,4vh,3rem)}
.contact__mail{
  display:block;
  color:var(--footred);
  transition:color .18s linear;
}
.contact__mail:hover{color:var(--paper)}

.social{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:var(--rule) solid currentColor;
}
@media (min-width:760px){.social{grid-template-columns:repeat(4,minmax(0,1fr))}}
.social a{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem;
  padding:1rem 1.4rem 1rem 0;
  font-family:var(--f-display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(13px,1.5vw,22px);
  line-height:1;
  transition:background-color .16s linear,color .16s linear,padding-left .16s linear;
}
.social a:hover{background:var(--footred);color:var(--title);padding-left:.5rem}

/* email a esquerda, assinatura pequena a direita — mesmo peso visual */
.foot__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem clamp(1.5rem,4vw,4rem);
  padding:clamp(1.4rem,3.5vh,2.4rem) 0 clamp(1rem,2.5vh,1.8rem);
}
/* flex:1 1 0 (base zero) e necessario: o .line se dimensiona medindo o
   proprio clientWidth, entao uma base "auto" viraria referencia circular
   com o white-space:nowrap e a linha colapsaria. */
.foot__row .contact__mail{padding:0;flex:1 1 0;min-width:0}
.foot__sig{
  display:block;
  width:min(42vw,420px);height:auto;
  flex:none;
  filter:url(#tint-footred);
}
@media (max-width:760px){
  .foot__row{flex-direction:column;align-items:stretch}
  .foot__sig{width:100%;margin-top:.4rem}
}


/* ---------- #3a0d0a nas telas de papel ----------
   Sobre branco a cor tem contraste de sobra, entao e aqui que ela
   pode carregar estrutura: fios, rotulos e metadados secundarios.
   Sobre preto ela quase some, por isso nao e usada como texto la. */
.screen--paper .bar{border-color:var(--title)}
.screen--paper .bar .mid,
.screen--paper .bar span:last-child{color:var(--title)}
.screen--paper .cols{border-top-color:var(--title)}
.screen--paper .col b{color:var(--title);opacity:1}
.screen--paper .watch{border-bottom-color:var(--title)}
.screen--paper .films{border-top-color:var(--title)}
.screen--paper .film__cap{color:var(--title)}
.screen--paper .watch__row{color:var(--title)}

/* na tela de tinta a cor entra como campo, nunca como texto */
.screen--ink .head-rel{border-bottom-color:rgb(58 13 10 / .85)}
.screen--ink .bar{border-color:rgb(58 13 10 / .9)}


/* ============================================================
   REVELACAO
   Progressive enhancement: o estado escondido so existe com a classe
   .js na raiz. Sem JS — ou se affairs.js falhar — tudo aparece
   normalmente em vez de a pagina ficar em branco.
   Cada bloco entra UMA vez. Nada volta a se mexer depois.
   ============================================================ */

[data-anim]{transition-delay:var(--d,0ms)}

/* wipe: mascara fixa, o texto sobe por dentro dela.
   O recuo negativo no topo e nas laterais evita cortar o desenho da
   letra; embaixo a mascara para na base da caixa de linha. */
.js [data-anim="wipe"]{clip-path:inset(-35% -5% -6% -5%)}
.js [data-anim="wipe"] .line__in{transform:translateY(106%)}
.js [data-anim="wipe"].is-in .line__in{
  transform:none;
  transition:transform var(--dur-type) var(--ease);
  transition-delay:var(--d,0ms);
}

/* chars: letra a letra, o "sendo escrito" sem virar maquina de escrever */
.js [data-anim="chars"] .line__in{white-space:nowrap}
.js [data-anim="chars"] .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(.34em);
}
.js [data-anim="chars"].is-in .ch{
  opacity:1;
  transform:none;
  transition:opacity .5s linear, transform .8s var(--ease);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * 26ms);
}

/* block: imagens e caixas, cortina de baixo para cima com um respiro */
.js [data-anim="block"]{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.04);
}
.js [data-anim="block"].is-in{
  clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path var(--dur-block) var(--ease),
             transform var(--dur-block) var(--ease);
  transition-delay:var(--d,0ms);
}

/* quiet: metadados e fios, so um respiro. Nao deve chamar atencao. */
.js [data-anim="quiet"]{
  opacity:0;
  transform:translateY(14px);
}
.js [data-anim="quiet"].is-in{
  opacity:1;
  transform:none;
  transition:opacity var(--dur-quiet) linear,
             transform var(--dur-quiet) var(--ease);
  transition-delay:var(--d,0ms);
}


/* Terminada a entrada, some com clip-path, transform e will-change.
   Mantê-los ativos deixa 48 contextos de composicao vivos para sempre,
   e qualquer repintura (um hover, por exemplo) fica cara. */
.js [data-anim].is-done,
.js [data-anim].is-done .line__in,
.js [data-anim].is-done .ch{
  clip-path:none!important;
  transform:none!important;
  opacity:1!important;
  transition:none!important;
  will-change:auto!important;
}

/* o header nao espera rolagem: entra assim que a fonte resolve */
.hero__core{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .js [data-anim],
  .js [data-anim] .ch{
    opacity:1!important;transform:none!important;clip-path:none!important;
    transition:none!important;
  }
}

/* ============================================================
   MOVIMENTO REDUZIDO / IMPRESSAO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .hero__media video{display:none}
}

@media print{
  .grain,.hero__media{display:none}
  .screen--ink,.screen--red{background:#fff;color:#000}
}