/* O site montado com as peças da biblioteca. Aqui só o que é da tela, não do componente. */

.secao { padding: clamp(56px, 7vw, 120px) var(--margem); }
.secao + .secao { border-top: 1px solid var(--linha); }
.secao__cab { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 56px); }
.secao__cab p { max-width: 54ch; color: var(--tinta-2); }
.secao__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }

/* ---------- PALCO DO SITE ---------- */
/* ele no meio, o letreiro atras dele e o trabalho por cima */
/* O letreiro preso a ALTURA do palco: a altura da caixa alta e exatamente uma linha do grid,
   em qualquer tela. A esquerda de cada linha senta numa coluna (2 e 3). */
.palco--site { container-type: size; }
.palco--site .palco__letreiro { position: absolute; inset: 0; z-index: 1; margin: 0; }
.palco--site .palco__letreiro span {
  position: absolute; display: block; white-space: nowrap; line-height: 1;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.04em;
  font-size: 35.7cqh;  /* caixa alta = 25cqh = uma linha */
}
.palco--site .palco__letreiro span:first-child { left: 16.667cqw; top: 20.2cqh; color: var(--tinta); }
.palco--site .palco__letreiro span + span { left: 33.333cqw; top: 45.2cqh; color: var(--vermelho); }
/* o tamanho e a posicao definitivos sao calculados no site.js, em cima da silhueta dele */
.palco--site .palco__letreiro span i { font-style: normal; display: inline-block; }
/* no desktop ele fica centrado na altura: a tinta do corpo vai de 10,63% a 96,14% da caixa (foto retocada),
   entao sobe 3,39% pra ter a mesma folga da cabeca ao topo e do pe a faixa (pedido dele, 21/09) */
.palco__foto { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, -3.39%); bottom: 0; height: 100%; width: auto; aspect-ratio: 1200 / 1788; pointer-events: none; }
.palco__foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.palco--site .palco__grade {
  background-image:
    linear-gradient(to right, rgba(18, 18, 18, .11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 18, 18, .11) 1px, transparent 1px);
}
.palco--site .celula { padding: 12px 14px; justify-content: flex-start; }
/* o nome do projeto passa por cima da foto e do letreiro: o modo diferenca deixa ele legivel nos dois */
.palco--site .celula__rot, .palco--site .celula--palavra span { font-family: var(--fonte); color: #fff; mix-blend-mode: difference; }
.palco--site .celula:hover .celula__rot, .palco--site .celula:focus-visible .celula__rot { mix-blend-mode: normal; color: var(--tinta); background: var(--papel); box-shadow: 0 0 0 5px var(--papel); }
/* nome em cima de letra: caixa translucida, a palavra continua aparecendo por baixo */
.palco--site .celula__rot.is-chip { mix-blend-mode: normal; color: var(--tinta); background: rgba(236, 235, 231, .72); box-shadow: 0 0 0 5px rgba(236, 235, 231, .72); }
/* o projeto aberto sobe pra frente do letreiro, mas continua atras dele (a foto e z-index 2) */
.palco--site .celula:hover, .palco--site .celula:focus-visible { z-index: 1; }
/* a janelinha que abre sozinha no desktop tambem sobe pra frente das letras */
@media (min-width: 721px) {
  .palco--site .celula.is-hover { z-index: 1; }
  /* e o nome dela sai do modo diferenca, igual ao hover: senao a caixa de papel inverte a imagem (o "Ctrl+I") */
  .palco--site .celula.is-hover .celula__rot { mix-blend-mode: normal; color: var(--tinta); background: var(--papel); box-shadow: 0 0 0 5px var(--papel); }
}
.palco--site .celula--palavra:hover span { color: var(--vermelho); mix-blend-mode: normal; }
.palco--site .celula__rot b { font-size: clamp(13px, 1.55cqw, 26px); margin-top: 0; line-height: .92; }
.celula__ano { display: block; font-family: var(--fonte-mono); font-style: normal; font-size: 10px; letter-spacing: .05em; margin-top: 6px; opacity: 0; transition: opacity var(--d-2); }
.celula:hover .celula__ano, .celula:focus-visible .celula__ano { opacity: 1; }
.palco--site .celula--palavra span { font-weight: 300; font-size: clamp(18px, 2.4cqw, 40px); }
.palco__nome { position: absolute; left: var(--margem); bottom: 18px; z-index: 5; }
/* ---------- CELULAR: a home abre como capa de tela cheia ---------- */
/* Em pe, o grid nasce do nome (gradeEmPe no site.js): linhas, corpo da letra, largura (wdth),
   posicao dele e as 8 celulas saem da conta. As regras abaixo com --corpo valem pro deitado. */
@media (max-width: 720px) {
  .palco--site { aspect-ratio: auto; height: calc(100svh - 65px); min-height: 440px; max-height: none; }
  .palco--site .palco__grade {
    grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr);
    background-size: calc(100% / 4) 100%, 100% calc(100% / 6);
  }
  /* ele encostado na direita e com o pe no chao do palco: o recorte tem margem
     transparente (o corpo vive entre 22% e 78% da caixa, e do 10% ao 96% da altura),
     entao a caixa passa da tela de proposito e o deslocamento sai da propria medida. */
  .palco__foto {
    --corpo: min(103cqw, 71cqh);
    left: auto; right: calc(2cqw - .226 * var(--corpo));
    width: var(--corpo); height: auto; bottom: 0; transform: translateY(3.7%);
  }
  /* a biblioteca esconde celula sem --cm no celular; aqui quem coloca cada uma e o site.js */
  /* o nome desce pro pe da celula: a imagem e que tem que ser vista primeiro */
  .palco--site .celula { display: flex; padding: 8px 9px; justify-content: flex-end; }
  /* a miniatura recua g dentro da celula: a borda dela cai na mesma vertical da tinta das letras */
  .palco--site .celula__img {
    top: var(--g, 0px); left: var(--g, 0px);
    width: calc(100% - 2 * var(--g, 0px)); height: calc(100% - 2 * var(--g, 0px));
  }
  /* numa celula de celular nao cabe imagem e nome: quem fala e a imagem */
  .palco--site .celula__rot { display: none; }
  .palco--site .celula__rot b { font-size: 12px; margin-top: 2px; }
  .palco--site .bloco-tapa { display: none; }
  /* o topo mostra o nome e o que ele e, um sob o outro (so a primeira linha do papel) */
  .topo--site .topo__sub { display: block; max-height: 1.25em; overflow: hidden; border-left: 0; padding-left: 0; }
  .topo--site .topo__marca { flex-direction: column; align-items: flex-start; gap: 3px; }
}

@media (max-width: 380px) {
  .topo--site { gap: 8px; }
  .topo--site .topo__nome { font-size: 1rem; }
  .topo--site .idioma label { padding: 0 7px; min-height: 30px; }
}


/* ---------- TRABALHOS ---------- */
.trabalhos__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 24px; justify-content: space-between; }
.trabalhos__conta { color: var(--tinta-3); }
/* sem a coluna de categoria a lista fica com cinco colunas */
.indice__linha { grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) 24px; }

/* ---------- O QUE EU FACO: uma frase ---------- */
.oque__rot { color: var(--vermelho); margin-bottom: clamp(16px, 2vw, 28px); }
.oque__frase {
  margin: 0; font-weight: 850; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(2.1rem, 6.2vw, 6.5rem); line-height: .9; letter-spacing: -.01em;
}
.oque__frase span { display: block; }                   /* uma frente por linha */
.oque__frase b { font-weight: inherit; }
.oque__frase i { font-style: normal; color: var(--vermelho); }

/* ---------- SOBRE ---------- */
.sobre--site { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.sobre--site .sobre__foto img { aspect-ratio: 900 / 1342; }   /* a foto inteira: com 3/4 o pe dele era cortado */
.sobre__texto { display: grid; gap: 20px; align-content: start; max-width: 62ch; }
.sobre__dado { color: var(--tinta-3); }

/* ---------- CONTATO: cartao de visita ---------- */
.contato--site { display: grid; gap: 12px; padding-block: clamp(32px, 4vw, 56px); }
.contato--site .contato__links { gap: 8px 28px; }

/* ---------- PROJETO ---------- */
.proj__topo { padding: clamp(24px, 4vw, 48px) var(--margem) 0; }
.proj__cab { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(24px, 4vw, 48px) var(--margem) clamp(32px, 4vw, 56px); }
.proj__texto { max-width: 62ch; }
.proj__meta { display: grid; grid-template-columns: auto 1fr; gap: 0; border-top: 1px solid var(--tinta); }
.proj__meta dt, .proj__meta dd { padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-corpo-p); }
.proj__meta dt { font-family: var(--fonte-mono); font-size: var(--t-rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); padding-right: 24px; align-self: center; }
.proj__imagens { display: grid; gap: clamp(32px, 5vw, 72px); padding: 0 var(--margem) clamp(48px, 6vw, 96px); }
.proj__fig { display: grid; gap: 10px; }
.proj__legenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; color: var(--tinta-3); }
.proj__ficha { padding: 0 var(--margem) clamp(48px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.proj__ficha .ficha { grid-column: 2; }
@media (max-width: 860px) {
  .proj__cab, .proj__ficha { grid-template-columns: 1fr; }
  .proj__ficha .ficha { grid-column: 1; }
}

/* ---------- IDIOMA ---------- */
.idioma { display: inline-flex; border: 1px solid var(--linha); }
.idioma label { position: relative; display: inline-flex; align-items: center; padding: 0 10px; min-height: 32px; cursor: pointer; font-family: var(--fonte-mono); font-size: var(--t-rotulo); letter-spacing: .06em; text-transform: uppercase; }
.idioma label + label { border-left: 1px solid var(--linha); }
.idioma input { position: absolute; opacity: 0; pointer-events: none; }
.idioma label:has(input:checked) { background: var(--tinta); color: var(--papel); }
.idioma label:hover:not(:has(input:checked)) { background: var(--papel-2); }

/* o topo do site é mais quieto que o da biblioteca: nome, navegação, idioma e contato */
.topo--site { grid-template-columns: auto 1fr auto; }
.topo--site .topo__sub { white-space: pre-line; }
/* BRUNO CLOSS mais colado em todo lugar (ordem dele, 21/09) */
.topo--site .topo__nome { letter-spacing: -.055em; }
.rodape__nome { letter-spacing: -.035em; }
@media (max-width: 980px) {
  .topo--site { grid-template-columns: 1fr auto auto; }
  .topo--site .topo__nav { display: none; }
  .topo--site .topo__menu { display: inline-flex; }
}

.voltar { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); text-decoration: none; }
.voltar:hover { color: var(--tinta); }
.voltar .ico { width: 18px; height: 18px; }

/* a faixa de clientes: metade do tamanho, com o logo quando tiver */
.faixa__item { font-size: clamp(.9rem, 1.7vw, 1.5rem); padding: 14px 10px; gap: 16px; }
.faixa__item::after { width: clamp(18px, 2.2vw, 36px); }
/* massa igual: a area de todo logo e massa x massa; a altura sai da proporcao (componentes.js poe --raiz) */
.faixa { --massa: clamp(26px, 2.6vw, 38px); }
.faixa__logo { height: calc(var(--massa) * var(--escala, 1) / var(--raiz, 2)); width: auto; object-fit: contain; display: block; }

/* ---------- TELA ESTREITA ---------- */
/* o site sobrescreve as colunas da biblioteca, entao a quebra do celular vem no fim */
@media (max-width: 860px) {
  .sobre--site { grid-template-columns: 1fr; }
  .sobre--site .sobre__foto { max-width: 280px; }

}

/* "Reduzir movimento" ligado (o iPhone dele): a biblioteca para tudo e a faixa virava um bloco de
   logos repetidos. No site a faixa continua uma fileira que passa devagar, e a cortina do mosaico
   continua abrindo. */
@media (prefers-reduced-motion: reduce) {
  .faixa .faixa__trilho { flex-wrap: nowrap; width: max-content; animation: faixa 60s linear infinite !important; animation-duration: 60s !important; animation-iteration-count: infinite !important; }
  .palco--site .celula__img { transition-duration: 420ms !important; }
}