/* componentes — todos consomem só token semântico */

/* A barra de topo vive na Camada 2, em .topbar / .tab. */

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 14px var(--s-3);
  border-radius: var(--radius-none);
  text-decoration: none;
  font-size: var(--type-body-sm-size);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  border: 1px solid var(--action-primary-bg);
}
.btn--primary:hover { background: var(--action-primary-bg-hover); border-color: var(--action-primary-bg-hover); color: var(--text-on-accent); }
.btn--ghost { background: transparent; color: var(--action-secondary-text); border: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-highlight); }
.btn--quiet {
  padding: 0; border: 0; background: none;
  color: var(--action-secondary-text);
  border-bottom: 2px solid var(--action-secondary-line);
  padding-bottom: 2px;
}
.btn--quiet:hover { color: var(--text-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- hero ---------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero__headline { max-width: 18ch; margin-bottom: var(--s-4); }
.hero__lead { margin-bottom: var(--s-5); }

/* faixa de evidência */
.evidence {
  border-block: var(--border-strong);
  padding-block: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--type-mono-size);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.evidence__item { display: flex; align-items: baseline; gap: var(--s-2); }
.evidence__item + .evidence__item::before { content: "·"; color: var(--text-accent); margin-right: var(--s-2); }

/* ---------- cabeçalho de seção ---------- */
.section__head { margin-bottom: var(--s-6); }
.section__head .display-m { max-width: 20ch; }

/* ---------- card de case ---------- */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border-top: var(--border-strong); }
.case-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-5);
  border-bottom: var(--border-strong);
  border-right: var(--border-hairline);
  text-decoration: none;
  background: var(--surface-page);
  transition: background var(--motion-base) var(--motion-ease);
  position: relative;
}
.case-card:hover { background: var(--surface-muted); }
.case-card:hover .case-card__cta { color: var(--text-accent); }
.case-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.case-card__title { font-size: 1.5rem; font-weight: var(--w-bold); letter-spacing: var(--type-heading-tracking); margin: 0; line-height: 1.1; }
.case-card__line { color: var(--text-secondary); font-size: var(--type-body-sm-size); margin: 0; }
.case-card__meta { margin-top: auto; padding-top: var(--s-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.case-card__cta {
  font-family: var(--f-mono); font-size: var(--type-mono-size);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-primary); margin-top: var(--s-3);
  transition: color var(--motion-fast) var(--motion-ease);
}
.case-card__cta::after { content: " →"; }

.tag {
  font-family: var(--f-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-accent); white-space: nowrap;
}
.tag--quiet { color: var(--text-muted); }

/* par chave/valor */
.kv { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-1) var(--s-3); align-items: baseline; }
.kv__k { font-family: var(--f-mono); font-size: var(--type-mono-size); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.kv__v { color: var(--text-primary); font-size: var(--type-body-sm-size); }

/* ---------- filtro ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 0; border: var(--border-strong); width: fit-content; margin-bottom: var(--s-5); }
.filter__btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 10px var(--s-3);
  font-family: var(--f-mono); font-size: var(--type-mono-size);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-right: var(--border-hairline);
}
.filter__btn:last-child { border-right: 0; }
.filter__btn[aria-pressed="true"] { background: var(--action-primary-bg); color: var(--action-primary-text); }

/* ---------- case detalhe ----------
   Arranjo da página de portfólio da Nebu Company, pedido dela em 08/11/2026.
   As medidas são as de lá numa largura útil de 1330px: o texto começa a 13,5%
   e a capa ocupa 28,5% a partir de 58,7%. */
.case-head { padding-block: var(--s-7) var(--s-5); }
.case-head .eyebrow a:not(:hover) { text-decoration: none; }
.case-head__title { margin-top: var(--s-3); color: var(--text-accent); overflow-wrap: anywhere; }

.project { display: flex; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-5) 0; border-top: var(--border-strong); }
.project__text { margin-left: 13.5%; width: 30%; min-width: 0; }
.project__role { margin: 0; font-weight: var(--w-bold); font-size: var(--type-body-size); }
.project__meta { margin: var(--s-1) 0 0; font-family: var(--f-mono); font-size: var(--type-mono-size); color: var(--text-muted); }
.project__desc { margin-top: var(--s-3); }
.project__desc .body { font-size: var(--type-body-sm-size); line-height: 1.55; color: var(--text-secondary); }
.project__desc > p + p { margin-top: var(--s-2); }
.project__link { margin: var(--s-3) 0 0; font-size: var(--type-body-sm-size); }
.project__cover { margin-left: auto; margin-right: 12.8%; width: 28.5%; flex: none; }
.project__pending { margin-top: var(--s-6); }

/* Colagem: cada peça entra por --x, --y e --w, calculados em views.js. */
.collage { position: relative; aspect-ratio: var(--ar); margin-top: var(--s-7); }
.collage__item { position: absolute; left: var(--x); top: var(--y); width: var(--w); }

.case-next { margin-top: var(--s-8); padding-block: var(--s-5) var(--s-7); border-top: var(--border-strong); }
.case-next__bar { display: flex; justify-content: space-between; gap: var(--s-3); }
.case-next__bar a:not(:hover) { text-decoration: none; }
.case-next__link { display: grid; gap: var(--s-3); margin-top: var(--s-2); text-decoration: none; color: inherit; }
.case-next__title { display: block; color: var(--text-accent); overflow-wrap: anywhere; }

/* ---------- slot de pendência ---------- */
.slot {
  display: inline-block;
  border: var(--border-pending);
  background: var(--surface-highlight);
  color: var(--text-accent);
  font-family: var(--f-mono); font-size: 0.75rem;
  padding: 2px 8px; letter-spacing: 0.02em;
}

/* ---------- lista de ofertas ---------- */
.offer { padding-block: var(--s-5); border-top: var(--border-hairline); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-5); }
.offer__price { font-family: var(--f-mono); font-size: 1rem; color: var(--text-primary); }

/* ---------- lista simples numerada ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; padding-block: var(--s-2); border-top: var(--border-hairline); display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-2); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--type-mono-size); color: var(--text-accent); }

/* ---------- tabela ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: var(--border-hairline); vertical-align: top; }
.table th { font-family: var(--f-mono); font-size: var(--type-mono-size); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: var(--w-medium); }
.table td { font-size: var(--type-body-sm-size); color: var(--text-secondary); }

/* ---------- formulário ---------- */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); margin-bottom: var(--s-3); max-width: 42rem; }
.field label { font-family: var(--f-mono); font-size: var(--type-mono-size); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.field input, .field textarea {
  font: inherit; font-size: var(--type-body-size);
  padding: 12px var(--s-2);
  border: var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-page); color: var(--text-primary);
}
.field textarea { min-height: 9rem; resize: vertical; }
.form-status { margin-top: var(--s-3); font-size: var(--type-body-sm-size); }

/* ---------- rodapé ---------- */
.footer { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--s-7) var(--s-5); }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-5); }
.footer a { color: var(--text-inverse-muted); text-decoration: none; display: block; padding-block: 4px; font-size: var(--type-body-sm-size); }
.footer a:hover { color: var(--text-inverse); }
/* Canais: o ícone faz o papel do rótulo, que segue escrito para leitor de tela. */
.footer .icon { display: inline-block; width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.125em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer__base { margin-top: var(--s-6); padding-top: var(--s-3); border-top: var(--border-inverse); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- bloco invertido ---------- */
.band { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--s-7); }
.band .lead { color: var(--text-inverse-muted); }

/* ---------- responsivo ---------- */
@media (max-width: 860px) {
  :root { --layout-section: var(--s-6); }
  .hero-media__row { flex-direction: column; gap: var(--s-1); }
  .footer__cols { grid-template-columns: 1fr; gap: var(--s-4); }
  .offer { grid-template-columns: 1fr; gap: var(--s-2); }
  .kv { grid-template-columns: 1fr; gap: 2px var(--s-2); }
  .kv__v { margin-bottom: var(--s-1); }
}

/* ============================================================
   CAMADA 2 — arquitetura guglieri + blocos tabulares strangefamily
   + cursor e revelações. Só token semântico, nada de valor cru.
   ============================================================ */

/* ---------- cursor próprio ---------- */

html.has-cursor, html.has-cursor * { cursor: none !important; }

.cur {
  position: fixed; top: 0; left: 0; z-index: var(--cursor-layer);
  width: var(--cursor-size); height: var(--cursor-size);
  pointer-events: none; opacity: 0;
  display: grid; place-items: center;
  transition: opacity var(--motion-base) var(--motion-ease);
}
.cur[data-on="true"] { opacity: 1; }

/* O cursor é o olho de dentro do coração da logo, pedido dela em 08/11/2026.
   O desenho vem do símbolo canônico do brandbook do nebu: as duas cores
   foram separadas e vetorizadas com potrace, o cílio em olho-cilio.svg e a
   pupila em olho-pupila.svg, no mesmo viewBox. Cada um entra como máscara
   para a cor continuar vindo do token. A bolinha só aparece quando vira
   barra de texto ou fundo de rótulo. */
.cur__dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--cursor-color);
  transform: scale(0);
  transition: transform var(--motion-base) var(--motion-ease-out),
              background-color var(--motion-base) var(--motion-ease);
}
.cur__eye {
  position: absolute; left: 50%; top: 50%;
  width: var(--cursor-eye-width); aspect-ratio: 830 / 310;
  translate: -50% -50%;
  /* A sombra preta desfocada atrás do olho saiu em 11/11/2026, a pedido dela. */
  transition: opacity var(--motion-fast) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease-out);
}
.cur__lash, .cur__pupil { position: absolute; inset: 0; }
.cur__lash {
  background: var(--cursor-color);
  -webkit-mask: url('/media/olho-cilio.svg') center / contain no-repeat;
          mask: url('/media/olho-cilio.svg') center / contain no-repeat;
}
.cur__pupil {
  background: var(--cursor-pupil-color);
  transition: background-color var(--motion-fast) var(--motion-ease);
  -webkit-mask: url('/media/olho-pupila.svg') center / contain no-repeat;
          mask: url('/media/olho-pupila.svg') center / contain no-repeat;
}
/* Sobre link, pedido dela em 08/11/2026: o olho fica e ganha ao lado uma
   pill preta escrita "Click", ou o rótulo de data-cursor quando o elemento
   tem um. O texto do link ganha sublinhado no mesmo hover. */
.cur__label {
  position: absolute; top: 50%;
  left: calc(50% + var(--cursor-eye-width) * 0.68 + var(--s-1));
  white-space: nowrap; padding: var(--cursor-pill-padding);
  border-radius: var(--cursor-pill-radius);
  background: var(--cursor-pill-bg); color: var(--cursor-pill-text);
  font-family: var(--f-grotesk); font-size: var(--type-mono-size); font-weight: var(--w-bold);
  letter-spacing: var(--cursor-pill-tracking); text-transform: uppercase; line-height: 1.2;
  opacity: 0; translate: 0 -50%; transform: scale(0.6); transform-origin: left center;
  transition: opacity var(--motion-fast) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease-out),
              background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}

.cur[data-state="link"]  .cur__label { opacity: 1; transform: scale(1); }
.cur[data-state="text"]  .cur__eye { opacity: 0; transform: scale(0.4); }
.cur[data-state="text"]  .cur__dot   { transform: scale(0.35, 2.2); border-radius: var(--radius-none); }
.cur[data-press="true"]  .cur__eye { transform: scale(0.8); }
/* Sobre fundo escuro a pupila clareia e a pill inverte; a sombra preta atrás
   do olho, pedida em 08/11/2026, segura o contorno nos dois casos. */
.cur[data-dark="true"]   .cur__pupil { background: var(--cursor-pupil-on-dark); }
.cur[data-dark="true"]   .cur__label { background: var(--cursor-pill-text); color: var(--cursor-pill-bg); }

/* sublinhado de hover: todo link de texto. Link que embrulha imagem e
   legenda sublinha só o título. */
a:hover { text-decoration-line: underline; text-decoration-thickness: var(--link-underline-thickness); text-underline-offset: var(--link-underline-offset); }
a:is(.btn, .feed__item, .strip__item, .case-card, .case-next__link, .tab[aria-current="page"]):hover { text-decoration-line: none; }
.feed__item:hover .feed__ttl,
.case-card:hover .case-card__title,
.case-next__link:hover .case-next__title {
  text-decoration-line: underline; text-decoration-thickness: var(--title-underline-thickness); text-underline-offset: var(--title-underline-offset);
}

/* ---------- barra de topo (guglieri) ---------- */

/* Em 08/11/2026 ela pediu a barra quase invisível. O fundo da página entra
   com a opacidade de --surface-veil em todas as páginas. O desfoque de 10px
   que havia aqui saiu em 10/11/2026, a pedido dela: o efeito de vidro foi
   embora e a barra ficou mais transparente ainda. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.1);
  background: var(--surface-veil);
  border-bottom: var(--border-hairline);
}
/* Na home a barra deita sobre a peça, sem régua e sem empurrar. */
body[data-home="true"] .topbar {
  position: absolute; top: 0; left: 0; right: 0;
  border-bottom: 0;
}
/* Uma linha só, na altura de uma barra de navegação comum: assinatura à
   esquerda e abas à direita. A descrição que ficava ao lado da assinatura
   saiu em 16/10, a pedido dela, porque esticava a barra para três linhas.
   Na home essa linha flutua sobre a peça, que ocupa a tela toda — é o
   arranjo do strangefamily.co. O relógio desceu para o pé da peça. */
.topbar__row {
  display: flex; align-items: center; gap: var(--s-5);
  padding-block: var(--s-2);
}
.topbar__mark {
  flex: none;
  font-size: 1.5rem; font-weight: var(--w-bold); line-height: 1.05;
  letter-spacing: var(--type-heading-tracking);
  color: var(--text-primary); text-decoration: none;
}
.topbar__tabs {
  flex: none; margin-left: auto;
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline;
}
.tab {
  font-family: var(--f-mono); font-size: var(--type-mono-size);
  letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase;
  color: var(--text-primary); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.tab[aria-current="page"] { border-bottom-color: var(--text-accent); }

/* ---------- declaração com revelação palavra a palavra ---------- */

.statement {
  margin: 0; max-width: 24ch;
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  font-weight: var(--w-bold);
  color: var(--text-primary);
}
.statement--body {
  margin-top: var(--s-5); max-width: 34ch; font-size: var(--type-display-s-size);
  line-height: 1.25; font-weight: var(--w-regular);
  letter-spacing: var(--type-heading-tracking);
}
[data-words] > [data-w] {
  opacity: var(--reveal-floor);
  transition: opacity 90ms linear;
}
[data-words] > [data-w].accent { color: var(--text-accent); }

/* ---------- primeira tela: a peça ocupa tudo ----------
   A home abre com um trabalho em tela cheia — foto, vídeo ou gif — e o
   resto do site desce abaixo dela. Enquanto não existe arquivo no repo,
   o palco é uma pendência explícita do tamanho da tela, nunca um
   placeholder bonito que se passe por entrega. */
.hero-media {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
}
/* O vídeo ocupa as duas linhas e o pé deita sobre ele, com o mesmo véu da
   barra de cima, a pedido dela em 08/11/2026. */
.hero-media__stage { position: relative; display: grid; grid-row: 1 / -1; grid-column: 1; }
.hero-media__stage > .frame { aspect-ratio: auto; height: 100%; }
.hero-media__stage video, .hero-media__stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* O pé da primeira tela: lugar e hora, como as cidades da referência. */
.hero-media__foot {
  grid-row: 2; grid-column: 1; position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  background: var(--surface-veil);
  font-family: var(--f-mono); font-size: var(--type-mono-size);
  color: var(--text-secondary);
}
.hero-media__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); flex-wrap: wrap;
  padding-block: var(--s-3);
}
.hero-media__foot b { color: var(--text-primary); font-weight: var(--w-regular); }

/* Os balões do símbolo são peça de marca, não informação. A ninhada fica fora
   da moldura observada, para não atrapalhar a revelação por recorte, não
   recebe ponteiro e sai da árvore de acessibilidade. Passa por baixo do véu do
   pé, que tem camada 1. O recorte da ninhada segura quem sobe pela borda.

   A posição de cada balão é escrita em transform por js/motion.js, que também
   põe o --balao-f de cada um. Aqui fica o tamanho: a base responsiva vezes o
   fator do bicho. */
.hero-media__stage .baloes {
  position: absolute; inset: 0; z-index: var(--float-layer);
  overflow: hidden; pointer-events: none;
}
.baloes .balao {
  position: absolute; left: 0; top: 0;
  width: calc(var(--balao-base) * var(--balao-f, 1));
  height: auto; object-fit: contain;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(10, 10, 10, 0.26));
}

/* ---------- feed de trabalho (guglieri) ---------- */

.feed {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  /* Sem isto o item estica até a altura da linha e as faixas internas
     dividem a sobra, abrindo um vão entre moldura e legenda. */
  align-items: start;
}
/* A coluna precisa ser declarada. Sem ela a trilha implícita vale `auto`,
   cresce até o max-content da legenda e estoura o item para fora da grade. */
.feed__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); text-decoration: none; color: inherit; }
.feed__item--wide { grid-column: 1 / -1; }

/* Moldura em duas camadas. A externa só reserva o espaço e é o que o
   observador enxerga; a interna é a que se corta ao entrar na tela.
   Cortar a caixa observada trava a revelação: ela se esconde de quem a observa. */
.frame { position: relative; aspect-ratio: 4 / 3; }
.frame__in {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--surface-muted);
  border: var(--border-hairline);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--motion-slow) var(--motion-ease-out);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.frame.is-in .frame__in { clip-path: inset(0 0 0 0); }
.frame__in > img, .frame__in > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.08);
  transition: transform var(--motion-slow) var(--motion-ease-out);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.frame.is-in .frame__in > img, .frame.is-in .frame__in > video { transform: scale(1); }
.feed__item:hover .frame__in > img, .feed__item:hover .frame__in > video { transform: scale(1.04); }

/* Moldura sem arquivo: pendência explícita, nunca imagem inventada.
   Enquanto não existe imagem nenhuma, a moldura vazia encolhe para marcador —
   senão a página inteira vira caixa vazia. A proporção cheia volta sozinha
   quando o arquivo entrar. */
.frame--empty { aspect-ratio: 5 / 2; }
.frame--empty .frame__in {
  display: grid; place-items: center; padding: var(--s-3);
  border: var(--border-pending); background: var(--surface-highlight);
}
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--portrait { aspect-ratio: 4 / 5; }

/* ---------- faixa "Da casa" ----------
   Quatro fotos lado a lado, mesma proporção, sem legenda por foto: o texto
   do case vem uma vez só, embaixo da faixa. */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.strip__item { display: block; text-decoration: none; color: inherit; }
.strip__item:hover .frame__in > img { transform: scale(1.04); }
.strip__note {
  margin: var(--s-4) 0 0; max-width: 60ch;
  font-size: var(--type-body-sm-size); line-height: 1.55; color: var(--text-secondary);
}

.feed__cap {
  display: flex; justify-content: space-between; gap: var(--s-2);
  align-items: baseline; border-top: var(--border-hairline); padding-top: var(--s-1);
}
.feed__ttl { font-size: var(--type-body-size); font-weight: var(--w-medium); letter-spacing: var(--type-heading-tracking); }
.feed__date { font-family: var(--f-mono); font-size: var(--type-mono-size); color: var(--text-muted); white-space: nowrap; }
.feed__line { margin: 0; font-size: var(--type-body-sm-size); color: var(--text-secondary); line-height: 1.45; }
.feed__item:hover .feed__ttl { color: var(--text-accent); }

/* ---------- bloco tabular (strangefamily) ---------- */

.tbl { border-top: var(--border-hairline); }
.tbl__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: var(--border-hairline);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--motion-slow) var(--motion-ease-out),
              transform var(--motion-slow) var(--motion-ease-out);
}
.tbl__row.is-in { opacity: 1; transform: none; }
.tbl__label {
  font-size: var(--type-body-size); font-weight: var(--w-medium);
  letter-spacing: var(--type-heading-tracking); color: var(--text-primary);
}
.tbl__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3) var(--s-4); align-items: start;
}
.tbl__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; }
.tbl__head {
  font-family: var(--f-mono); font-size: var(--type-mono-size);
  letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase;
  color: var(--text-accent); margin-bottom: var(--s-1);
}
.tbl__item { font-size: var(--type-body-sm-size); color: var(--text-secondary); line-height: 1.5; }
.tbl__item b { color: var(--text-primary); font-weight: var(--w-medium); }
.tbl__note { margin: 0; font-size: var(--type-body-sm-size); color: var(--text-secondary); line-height: 1.55; max-width: 56ch; }

/* ---------- responsivo das camadas novas ---------- */

@media (max-width: 860px) {
  /* Em tela estreita a linha única não cabe: a assinatura fica na primeira
     faixa e as abas na segunda, podendo quebrar. Estas regras moram aqui,
     depois das regras base da barra; antes ficavam no bloco responsivo do
     começo do arquivo e perdiam para elas, abrindo 48px entre as faixas. */
  .topbar__row { flex-wrap: wrap; gap: var(--s-2); }
  .topbar__mark { font-size: 1.25rem; }
  .topbar__tabs { flex: 1 1 100%; margin-left: 0; gap: var(--s-2); }
  .topbar__meta { grid-template-columns: 1fr; gap: var(--s-2); }
  .tab--end { margin-left: 0; }
  .feed { grid-template-columns: 1fr; gap: var(--s-4); }
  .feed__item--wide { grid-column: auto; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .tbl__row { grid-template-columns: 1fr; }
  .statement { max-width: none; }
  .project { flex-direction: column; gap: var(--s-3); }
  .project__text { margin-left: 0; width: auto; }
  .project__cover { margin: 0; width: 70%; }
  .collage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); align-items: start; margin-top: var(--s-5); }
  .collage__item { position: static; width: auto; }
}