/* Direcao "Metodo" realizada em codigo.
   Tokens, grid e componentes. Fonte unica de verdade do visual.
   dials: variance 0.2 (simetrico, sem breakout)
          density  0.35 (ar generoso)
          motion   0.15 (estatico; so feedback de hover) */

/* ----------------------------------------------------------------- Fontes */

/* Inter auto-hospedada, arquivo variavel: um woff2 cobre os pesos 100 a 900,
   que e o que a direcao usa para construir hierarquia sem escalar tamanho.
   Nada de <link> para o Google Fonts: sem requisicao a terceiros.

   O unicode-range faz o navegador baixar latin-ext apenas se a pagina tiver
   um caractere fora do latin basico. O portugues cabe inteiro no latin, entao
   na pratica so os 48 KB do primeiro arquivo sao carregados. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Tokens */

:root {
  /* Cor */
  --bg: #EFF1F4;
  --surface: #FFFFFF;
  --ink: #14161B;
  --muted: #6E7480;
  --accent: #1B3BFF;

  /* Cor dos links. Cinza escuro no lugar do cobalto: a afordancia fica por
     conta do sublinhado, nao da cor. Para voltar ao azul, basta apontar
     esta variavel para var(--accent). */
  --link: #3A4049;

  /* Vidro. Branco translucido em vez do fundo da pagina: o que constroi a
     superficie e o desfoque do que passa por tras, nao a cor. Afinar aqui
     ajusta barra e painel de uma vez. */
  --glass: rgba(255, 255, 255, 0.5);
  /* O painel de menu precisa de mais corpo que a barra: sobre um titulo
     preto e grande, so desfoque nao separa, e os itens do menu competem
     com o texto que fica atras. */
  --glass-forte: rgba(255, 255, 255, 0.88);
  --glass-blur: 28px;
  --glass-sat: 1.8;
  --line: rgba(20, 22, 27, 0.12);

  /* Tipografia */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --w-body: 400;
  --w-head: 600;
  --w-strong: 700;

  /* Espaco */
  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 32px;
  --s-lg: 64px;
  --s-xl: 128px;

  /* Grid */
  --columns: 12;
  --gutter: 30px;
  --margin: 56px;

  /* Forma. Regra declarada: estrutura reta, imagem levemente arredondada.
     Vale para toda midia do site, nunca so para uma foto. */
  --radius: 0px;
  --radius-media: 6px;

  /* A barra flutua: --header-gap e a distancia ate o topo da janela,
     --header-bar a altura da propria barra. --header-h e a soma, usada
     pelo conteudo para nao passar por baixo dela. */
  --header-gap: 16px;
  --header-bar: 68px;
  --header-h: calc(var(--header-gap) + var(--header-bar));
}

@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --margin: 16px;
    --header-gap: 10px;
    --header-bar: 56px;
  }
}

/* ----------------------------------------------------------------- Reset */

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

:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
  padding: 0;
}

:where(ul, ol) { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Com a barra fixa, um salto para ancora pararia com o alvo escondido
     atras dela. Isto reserva a altura dela no calculo do salto. */
  scroll-padding-top: calc(var(--header-h) + var(--s-sm));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ Grid */

.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 var(--margin);
  column-gap: var(--gutter);
}

.wrap .wrap { padding: 0; }

.col { flex: 1; }

.col[class*="c-"] {
  flex: none;
  width: calc(
    (100% - var(--gutter) * (var(--columns) / var(--span) - 1)) /
    (var(--columns) / var(--span))
  );
}

.c-1  { --span: 1; }
.c-2  { --span: 2; }
.c-3  { --span: 3; }
.c-4  { --span: 4; }
.c-5  { --span: 5; }
.c-6  { --span: 6; }
.c-7  { --span: 7; }
.c-8  { --span: 8; }
.c-9  { --span: 9; }
.c-10 { --span: 10; }
.c-11 { --span: 11; }
.c-12 { --span: 12; }

.col[class*="off-"] {
  margin-left: calc(
    (100% - var(--gutter) * (var(--columns) / var(--off) - 1)) /
    (var(--columns) / var(--off)) + var(--gutter)
  );
}

.off-1 { --off: 1; }
.off-2 { --off: 2; }
.off-3 { --off: 3; }

@media (max-width: 768px) {
  .col[class*="c-"] { width: 100%; }
  .col[class*="off-"] { margin-left: 0; }
  .col[class*="cs-"] {
    width: calc(
      (100% - var(--gutter) * (var(--columns) / var(--span-s) - 1)) /
      (var(--columns) / var(--span-s))
    );
  }
  .cs-6  { --span-s: 6; }
  .cs-12 { --span-s: 12; }
}

/* ------------------------------------------------------------ Tipografia */

/* Hierarquia por peso e cor, nao por escala bruta.
   Display sempre com entrelinha apertada. */

h1, h2, h3 {
  font-weight: var(--w-head);
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
h3 { font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }

p { max-width: 68ch; }

.lead {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.45;
  max-width: 62ch;
}

.meta {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: none;
}

.label {
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: opacity 0.25s ease;
}

.link:hover { opacity: 0.6; }

/* Link reduzido ao sinal. Sem sublinhado: um traco sob o + lê como ruido,
   nao como link. A area de clique fica maior que o glifo para o alvo
   continuar confortavel no toque. */
.plus-link {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: var(--w-body);
  line-height: 1;
  padding: 4px 8px;
  margin-left: -8px;
  color: var(--ink);
  transition: color 0.25s ease;
}

.plus-link:hover { color: var(--ink); opacity: 0.6; }

/* --------------------------------------------------------------- Estrutura */

.section { padding-block: var(--s-xl); }

@media (max-width: 768px) {
  .section { padding-block: var(--s-lg); }
}

/* Titulo de secao com filete inferior. Unico ornamento estrutural do site. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  padding-bottom: 12px;
  margin-bottom: var(--s-md);
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------ Media */

.media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface);
}

.media img { width: 100%; height: 100%; object-fit: cover; }

.media.landscape { aspect-ratio: 1432 / 833; }
.media.portrait  { aspect-ratio: 833 / 1432; }
.media.square    { aspect-ratio: 1 / 1; }

/* Proporcao real do retrato. Existe para a foto nao ser cortada pelo slot
   .portrait, que e bem mais alto. */
.media.photo     { aspect-ratio: 4 / 5; }
.media.wide      { aspect-ratio: 16 / 9; }

/* Peca da galeria de case: mantem a propria proporcao em vez de ser cortada
   por um formato fixo, porque cada modulo do projeto tem a sua. */
.media.natural { aspect-ratio: auto; }
.media.natural img { height: auto; object-fit: contain; }

/* Video incorporado. O iframe preenche o bloco, que ja tem proporcao travada,
   entao nao ha deslocamento de layout enquanto o player carrega. */
.media.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Placeholder on-palette enquanto nao ha imagem definida.
   Mantem a proporcao e evita layout shift. */
.media.empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(27, 59, 255, 0.05), rgba(20, 22, 27, 0.04));
  border: 1px solid var(--line);
}

.media.empty::after {
  content: attr(data-name);
  color: var(--muted);
  font-size: 0.8125rem;
  padding: 0 var(--s-sm);
  text-align: center;
}

/* ---------------------------------------------------------------- Projeto */

/* Sem card, sem elevacao: imagem mais legenda. */
.project a { display: block; }

.project .media img { transition: opacity 0.3s ease; }
.project a:hover .media img { opacity: 0.82; }

.project .caption { padding-top: 12px; }

.project .name {
  font-weight: var(--w-body);
  font-size: 1.0625rem;
  transition: opacity 0.25s ease;
}

.project a:hover .name { opacity: 0.55; }

/* ---------------------------------------------------------------- Header */

/* Barra flutuante: fixa, descolada do topo e das laterais, para acompanhar
   a rolagem sem parecer colada na borda da janela. */
.site-header {
  position: fixed;
  inset: var(--header-gap) 0 auto 0;
  z-index: 100;
  padding: 0 var(--margin);
  pointer-events: none;
}

/* 1fr auto 1fr mantem o menu no centro da pagina independentemente da
   largura da marca ou do convite. Com flex, o centro escorregaria toda vez
   que um dos lados mudasse de tamanho. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-md);
  width: 100%;
  height: var(--header-bar);
  padding: 0 var(--s-md);
  pointer-events: auto;
  border-radius: var(--radius-media);
  position: relative;

  /* isolation cria contexto de empilhamento para o vidro do ::before ficar
     atras do conteudo da barra sem afundar para tras da pagina. */
  isolation: isolate;
}

/* O vidro vive num pseudo-elemento, e nao no .header-inner.

   Motivo: backdrop-filter cria bloco de contencao, e com ele no proprio
   elemento o painel de menu em position:fixed passava a se posicionar em
   relacao a barra, e nao a janela. Resultado: no celular o fundo cobria so
   a altura da barra e os itens vazavam sobre o conteudo.

   O desfoque e o fundo ficam FIXOS aqui (nunca dentro de um keyframe).
   Primeira versao animava backdrop-filter diretamente via scroll-timeline,
   e essa combinacao especifica tem suporte instavel entre navegadores —
   o resultado observado foi um fundo branco translucido sem desfoque
   nenhum, a animacao "rodando" mas o blur nunca aparecendo. Animar so a
   opacidade do pseudo-elemento inteiro (com o desfoque ja pronto por tras)
   e muito mais confiavel: opacity e uma das propriedades com suporte mais
   solido para animacao em qualquer navegador.

   Estado padrao com vidro ligado (opacity:1): e o que aparece em navegador
   sem suporte a animacao por rolagem, e continua correto ali. */
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  pointer-events: none;
  opacity: 1;
}

/* Com suporte, a barra nasce invisivel no topo da pagina e ganha o vidro
   conforme a rolagem avanca. Sem JavaScript: quem conduz e a propria
   posicao de rolagem do documento. */
@supports (animation-timeline: scroll()) {
  .header-inner::before {
    animation: header-vidro linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 96px;
  }

  /* Com o menu aberto o vidro da barra some: o painel atras ja cobre tudo,
     e duas camadas de desfoque sobrepostas turvam o logo e o X. */
  .menu-toggle:checked ~ .header-inner::before { animation: none; opacity: 0; }
}

@keyframes header-vidro {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.header-cta {
  justify-self: end;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.header-cta:hover,
.header-cta[aria-current="page"] { opacity: 0.6; }

/* A marca herda a cor do texto e responde ao hover como um link.
   Nenhuma segunda versao do SVG e necessaria: currentColor resolve. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: color 0.25s ease;
}

.brand:hover { opacity: 0.6; }

.brand-mark {
  display: block;
  height: 32px;
  width: auto;
}

/* display:contents dissolve o involucro no desktop: o menu e o convite
   continuam sendo colunas diretas do grid 1fr auto 1fr. No celular ele
   reaparece como painel. */
.header-menu { display: contents; }

/* O hambúrguer so existe no celular. */
.hamburger { display: none; }

/* Os canais sociais so aparecem no painel de tela cheia. */
.menu-social { display: none; }

.brand-text { font-weight: var(--w-head); letter-spacing: -0.02em; }

@media (max-width: 768px) {
  .brand-mark { height: 22px; }
}

.site-nav ul {
  display: flex;
  justify-content: center;
  gap: var(--s-md);
}

.site-nav a {
  font-size: 1.0625rem;
  color: var(--muted);
  transition: color 0.25s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }

/* No celular a barra guarda so a marca e o hamburguer. O menu vira um painel
   suspenso logo abaixo, com o mesmo vidro da barra. */
@media (max-width: 768px) {
  .header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-sm);
    padding: 0 var(--s-sm) 0 var(--s-md);
  }

  .brand-mark { height: 26px; }

  /* Tres barras. O bloco todo tem 44px de lado: alvo de toque confortavel,
     bem maior que o desenho que aparece. */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    margin-right: -6px;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.28s var(--ease-out), opacity 0.2s ease;
  }

  /* Aberto, as barras viram um X: a mesma peca indica fechar. */
  .menu-toggle:checked ~ .header-inner .hamburger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .menu-toggle:checked ~ .header-inner .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .header-inner .hamburger span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* O checkbox esta oculto, entao o foco de teclado precisa aparecer aqui. */
  .menu-toggle:focus-visible ~ .header-inner .hamburger {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Painel de tela cheia. Cobrir tudo evita o toque acidental no conteudo
     de tras, que e o defeito real de um menu suspenso pequeno. */
  .header-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: calc(var(--header-h) + var(--s-lg)) var(--margin) var(--s-lg);
    background: var(--glass-forte);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }

  .menu-toggle:checked ~ .header-inner .header-menu { display: flex; }

  /* Vale tambem onde nao ha animacao por rolagem: sem isto o vidro da barra
     se somaria ao do painel e turvaria o logo e o X. */
  .menu-toggle:checked ~ .header-inner::before { opacity: 0; }

  /* A marca e o hamburguer ficam acima do painel: o logo continua visivel e
     o X continua clicavel com o menu aberto. */
  .header-inner > .brand,
  .header-inner > .hamburger {
    position: relative;
    z-index: 2;
  }

  /* Trava a rolagem do fundo enquanto o menu esta aberto. Sem :has isto
     exigiria JavaScript; onde nao houver suporte, o fundo apenas rola. */
  html:has(.menu-toggle:checked),
  body:has(.menu-toggle:checked) {
    overflow: hidden;
  }

  /* Work, Sobre e Contato sao a mesma coisa: itens de navegacao. Ficam
     juntos, com o mesmo espacamento entre si. So os canais sociais descem
     para o rodape do painel.

     As duas margens automaticas, aqui e no .menu-social, dividem o espaco
     livre em partes iguais: o grupo de navegacao fica centrado na vertical
     e os sociais encostam embaixo. */
  .site-nav {
    margin-top: auto;
    width: 100%;
  }

  .site-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-md);
  }

  .site-nav a,
  .header-cta { display: block; }

  /* Itens grandes: alvo confortavel e hierarquia clara em tela cheia. */
  .site-nav a {
    font-size: clamp(2rem, 1.2rem + 5vw, 2.75rem);
    font-weight: var(--w-head);
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--ink);
  }

  .header-cta {
    justify-self: center;
    font-size: clamp(2rem, 1.2rem + 5vw, 2.75rem);
    font-weight: var(--w-head);
    letter-spacing: -0.022em;
    line-height: 1.1;
    text-decoration: none;
    margin-top: var(--s-md);
  }

  .menu-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-sm);
    width: 100%;
    margin-top: auto;
    padding-top: var(--s-md);
    border-top: 1px solid var(--line);
  }

  /* Alvo de 44px ao redor de um icone de 22: o desenho fica discreto sem
     que o toque fique dificil. */
  .menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--muted);
    transition: color 0.25s ease;
  }

  .menu-social a:hover { color: var(--ink); }

  .social-icon { display: block; }
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
  padding-top: var(--s-lg);
  padding-bottom: var(--s-md);
  border-top: 1px solid var(--line);
}

.footer-cta { padding-bottom: var(--s-lg); }

.footer-cta p {
  font-weight: var(--w-head);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  max-width: 20ch;
}

.footer-cta .cta-mail { margin-top: var(--s-sm); }

.footer-cols { padding-bottom: var(--s-md); }
.footer-cols li + li { margin-top: 4px; }
.footer-cols .label { display: block; margin-bottom: 10px; }

.footer-base {
  padding-top: var(--s-sm);
  border-top: 1px solid var(--line);
}

@media (max-width: 768px) {
  .footer-cols .col + .col { margin-top: var(--s-md); }
}

/* ------------------------------------------------------------ Utilitarios */

.stack-xs > * + * { margin-top: var(--s-xs); }
.stack-sm > * + * { margin-top: var(--s-sm); }
.stack-md > * + * { margin-top: var(--s-md); }

.right { text-align: right; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- Hero */

/* Um momento so: titulo, uma linha de apoio, um CTA.
   Cabe na primeira dobra. Com variance 0.2 a composicao e contida:
   nada sangra, nada gira, nada se sobrepoe. */

/* O hero nao ocupa a dobra inteira de proposito: a folga deixa as primeiras
   capas assomarem por baixo, o que anuncia o portfolio sem precisar de
   titulo nem de um "role a pagina". A folga so funciona junto com o
   padding reduzido de .work-peek, senao o que aparece e espaco vazio. */
.hero {
  min-height: calc(100svh - 190px);
  padding-top: calc(var(--header-h) + var(--s-lg));
  padding-bottom: var(--s-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section.work-peek { padding-top: var(--s-md); }

.hero h1 { max-width: 18ch; }

/* Entrada da pagina, ao estilo do gesto de abertura do berrielbrands.com —
   mas contida ao registro deste site (motion: 0.15, quase estatico): um
   unico fade com leve subida, sem o escalonamento extenso do original.
   O header entra primeiro, o titulo do hero logo depois, num intervalo
   curto. CSS puro, sem JavaScript; para quem prefere sem movimento, o
   conteudo aparece direto na posicao final, sem a animacao. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes entrada-header {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes entrada-hero {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }

  /* Um atraso curto antes de comecar: num servidor local a pagina pinta
     quase instantaneamente, e uma animacao que comeca junto com o pintar
     tende a passar despercebida — o atraso da um instante para o olho se
     assentar na tela antes do movimento comecar. */
  .header-inner { animation: entrada-header 0.9s var(--ease-out) 0.1s both; }

  .hero h1 { animation: entrada-hero 1s var(--ease-out) 0.35s both; }
}

@media (max-width: 768px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--s-md));
    padding-bottom: var(--s-md);
  }

  .hero h1 { max-width: none; }
}

/* --------------------------------------------------------- Grade da home */

.section .wrap { row-gap: var(--s-md); }

.see-all { padding-top: var(--s-xs); }

.empty-note { padding-top: var(--s-xs); }

@media (max-width: 768px) {
  .about-text { margin-top: var(--s-md); }
}

/* ---------------------------------------------- Paginas internas e /work */

/* Sem hero, o conteudo comeca abaixo do header fixo. */
.page-top { padding-top: calc(var(--header-h) + var(--s-lg)); }

@media (max-width: 768px) {
  .page-top { padding-top: calc(var(--header-h) + var(--s-md)); }
}

/* Respiro dobrado em relacao ao padrao do site (--s-md, 32px): entre as
   linhas da grade de projetos, mais ar separa cada projeto como um momento
   proprio, em vez de uma parede densa de miniaturas. Referencia direta:
   mouthwash.studio/work usa um vao ainda maior (12rem) entre linhas — aqui
   fica mais contido, para nao brigar com density:0.35 da direcao do site.

   O seletor precisa das duas classes juntas (.wrap.work-grid): a regra geral
   ".section .wrap" tem especificidade maior que uma classe so, e vencia
   independente da ordem no arquivo. */
.wrap.work-grid { row-gap: var(--s-lg); }

/* Filtros sem JavaScript: radios ocultos mais seletor de irmao.
   As regras por categoria sao geradas no template, a partir dos termos reais. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-md);
  padding-bottom: 12px;
  margin-bottom: var(--s-md);
  border-bottom: 1px solid var(--line);
}

.filter-bar label {
  font-size: 1.0625rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

.filter-bar label:hover { color: var(--ink); }

/* ------------------------------------------------------------------- Case */

.case-summary { margin-top: var(--s-sm); }

.case-meta > * + * { margin-top: var(--s-sm); }
.case-meta .label { display: block; margin-bottom: 2px; }

.case-cover { margin-top: var(--s-md); }

.case-block {
  padding-block: var(--s-lg);
  border-top: 1px solid var(--line);
}

/* O rotulo da secao usa o peso do corpo e a cor secundaria: ele orienta,
   nao compete com o texto que apresenta. */
.case-label {
  font-size: 1rem;
  font-weight: var(--w-body);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--muted);
}

.strategy > * + * { margin-top: var(--s-sm); }
.strategy dt { margin-bottom: 2px; }
.strategy dd { margin: 0; }

.case-gallery {
  row-gap: var(--gutter);
  margin-top: var(--s-md);
}

.case-next {
  padding-block: var(--s-lg);
  border-top: 1px solid var(--line);
}

/* Duas colunas simetricas: anterior a esquerda, proximo a direita. Com so
   um dos dois presente, a coluna sozinha ocupa a largura normal — o texto
   nao estica para preencher o vazio, o que ficaria desproporcional. */
.case-next .wrap { row-gap: var(--s-md); }

.case-nav-next { text-align: right; }

.next-link { display: block; }
.next-link .label { display: block; margin-bottom: var(--s-xs); }

.next-title {
  font-weight: var(--w-head);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  transition: color 0.25s ease;
}

.next-link:hover .next-title { opacity: 0.55; }

@media (max-width: 768px) {
  /* Empilhado, os dois voltam a alinhar a esquerda: texto a direita numa
     coluna de largura total fica com aparencia de erro, nao de intencao. */
  .case-nav-next { text-align: left; }
  .case-nav-next { margin-top: var(--s-sm); }
}

/* ------------------------------------------------------- Sobre e contato */

.manifesto {
  font-weight: var(--w-head);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  max-width: 20ch;
}

.belief { padding-block: var(--s-lg); border-top: 1px solid var(--line); }

.numbers { display: flex; flex-wrap: wrap; gap: var(--s-lg); }

.numbers-note { margin-top: var(--s-md); }

.numbers .n {
  font-weight: var(--w-head);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (max-width: 768px) {
  .case-meta { margin-top: var(--s-md); }
  .case-label { margin-bottom: var(--s-sm); }
  .case-block { padding-block: var(--s-md); }
  .numbers { gap: var(--s-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}