/* =========================================================
   GVERAS — Design system v2
   Colagem editorial, preto e branco estrito. Inspirado em
   generaladmission.house, sem copiar: tipografia monumental,
   composicao de imagens em colagem, textura tipografica de
   fundo, marcas graficas pequenas (asterisco, badges). Nenhuma
   cor alem de preto/branco/cinza — fotos permanecem coloridas.
   ========================================================= */

:root {
  /* --- Cor: estritamente preto, branco, cinza --- */
  --ink: #000000;
  --ink-soft: #585855;
  --paper: #fdfdfc;
  --paper-raised: #f0f0ee;
  --line: #d9d9d6;
  --line-strong: #000000;

  /* --- Tipografia --- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --step-fluid-xl: clamp(3.2rem, 1.6rem + 7.5vw, 9rem);
  --step-fluid-lg: clamp(2.2rem, 1.5rem + 3.4vw, 4.6rem);
  --step-fluid-md: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --step-fluid-sm: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --step-body: 1.0625rem;
  --step-small: 0.75rem;
  --step-micro: 0.6875rem;
  --step-tile: clamp(1.6rem, 1rem + 3vw, 3rem);

  /* --- Espacamento (escala consistente = sistema) --- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.6rem;
  --sp-7: 5.4rem;
  --sp-8: 8rem;
  --sp-9: 11rem;

  --container-max: 1560px;
  --edge: clamp(1.25rem, 4vw, 4.5rem);

  --dur-fast: 180ms;
  --dur-med: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

html { overflow-x: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Evita viuvas (uma unica palavra sozinha na ultima linha) em qualquer
   bloco de texto do site — regra global, nao so em pontos pontuais. */
p, li, h1, h2, h3, h4 { text-wrap: pretty; }

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

.skip-link {
  position: fixed; top: -100%; left: var(--edge); z-index: 200;
  background: var(--ink); color: var(--paper); padding: var(--sp-2) var(--sp-3);
  font-size: var(--step-small); letter-spacing: 0.04em;
}
.skip-link:focus { top: var(--sp-2); }

/* --- Layout helpers --- */
.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-fluid-md);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.hairline { border: 0; border-top: 1px solid var(--line); }

/* =========================================================
   Header / navegacao — sidebar fixa a esquerda (desktop),
   com submenus por hover/foco. Vira barra + overlay no mobile.
   ========================================================= */
:root {
  --sidebar-w: 14rem;
}

/* Tres faixas: topo (logo), meio (menu), base (Email/LinkedIn). As duas
   faixas 1fr sao sempre iguais entre si, entao a do meio fica no centro
   exato da altura da janela — independente de logo e rodape terem
   alturas diferentes. Antes isso era medido e corrigido no JS, o que
   fazia o menu dar um pulo quando a fonte/as imagens terminavam de
   carregar e a medicao rodava de novo. */
.site-header {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  width: var(--sidebar-w);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  /* O respiro de cima e de baixo vai nos proprios filhos, nao no
     container: com padding vertical assimetrico aqui, as duas faixas
     1fr ficariam centradas na caixa de conteudo, alguns pixels acima do
     centro real da janela. */
  padding: 0 var(--sp-4);
  border-right: 1px solid var(--line);
  background: var(--paper);
  overflow-y: auto;
}
.site-header > .site-header__bar { align-self: start; padding-top: var(--sp-4); }
.site-header > .nav { align-self: center; }
.site-header > .site-header__foot { align-self: end; padding-bottom: var(--sp-5); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.logo { display: inline-flex; white-space: nowrap; }
.logo img { height: 16px; width: auto; display: block; }

.nav { display: block; }
.nav__list { display: flex; flex-direction: column; gap: var(--sp-4); }
.nav__item { position: relative; }

.nav__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  display: inline-block;
  padding-block: var(--sp-1);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: right var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); }
.nav__link:hover::after, .nav__link:focus-visible::after { right: 0; }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__link[aria-current="page"]::after { right: 0; }

.nav__submenu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-left: var(--sp-3);
  margin-top: 0;
  border-left: 1px solid var(--line);
  transition: max-height var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease), margin-top var(--dur-fast) var(--ease);
}
.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu {
  max-height: 14rem;
  opacity: 1;
  margin-top: var(--sp-2);
}
.nav__sublink {
  font-size: var(--step-micro);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  line-height: 1.5;
}
.nav__sublink:hover, .nav__sublink:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.site-header__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--step-micro);
  color: var(--ink-soft);
}
.site-header__foot a:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  padding: var(--sp-1);
}
.nav-toggle span { display: block; height: 1px; width: 100%; background: var(--ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

body { padding-left: var(--sidebar-w); }

@media (max-width: 860px) {
  /* Altura da barra fixa do topo no celular — quem estiver logo abaixo
     dela precisa reservar esse espaco para nao comecar por baixo. */
  :root { --header-h: 4.25rem; }
  body { padding-left: 0; }
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    bottom: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--sp-3) var(--edge);
    border-right: 0;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease);
  }
  .site-header.is-scrolled { border-bottom-color: var(--line); }
  .site-header > .site-header__bar { width: 100%; padding-top: 0; }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0; top: 0; z-index: 90;
    /* Altura presa a tela (dvh acompanha a barra do navegador que
       aparece e some). Sem isso a caixa crescia junto com a lista, o
       overflow nunca virava rolagem e o fim do menu ficava inalcancavel
       — o body fica travado enquanto o menu esta aberto. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin-block: 0;
    background: var(--paper);
    display: flex; align-items: flex-start; justify-content: center;
    padding: calc(var(--header-h) + var(--sp-5)) var(--edge) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), visibility var(--dur-med);
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  /* O respiro do fim vai na lista: padding-bottom do proprio container
     de rolagem em flex nao e respeitado no fim do scroll. */
  .nav__list { flex-direction: column; gap: var(--sp-5); padding-bottom: var(--sp-8); }
  .nav__link { font-size: var(--step-fluid-sm); }
  .nav__submenu {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: var(--sp-2);
  }
  .nav__sublink { font-size: var(--step-small); }
  .site-header__foot { display: none; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5);
  margin-top: var(--sp-9);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step-small);
  color: var(--ink-soft);
}
.site-footer__social { display: flex; gap: var(--sp-3); }
.site-footer__social a { color: var(--ink-soft); }
.site-footer__social a:hover { color: var(--ink); }
/* Botao flutuante "voltar ao topo" — fixo no canto inferior direito
   em todas as paginas, aparece so depois de rolar um pouco. */
.back-to-top-fab {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 80;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    visibility var(--dur-fast), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.back-to-top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top-fab:hover, .back-to-top-fab:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
@media (max-width: 860px) {
  .back-to-top-fab { width: 2.6rem; height: 2.6rem; right: var(--sp-4); bottom: var(--sp-4); }
}

/* =========================================================
   Botoes / links tipograficos
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--ink);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--step-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.text-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: opacity var(--dur-fast) var(--ease);
}
.text-link:hover { opacity: 0.6; }

/* =========================================================
   Hero — texto fixo no topo (visivel na primeira tela) com uma
   galeria flutuante mais alta, para revelar imagens conforme
   o scroll, alem de reagir ao cursor.
   ========================================================= */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 100rem;
  padding-top: var(--sp-6);
  background: var(--paper);
}
/* hero__grid fica SEM position/z-index proprios de proposito: um
   novo contexto de empilhamento aqui isolaria o mix-blend-mode do
   headline e ele pararia de reagir as imagens atras. A ordem
   visual correta (texto acima das imagens) vem de .floating-gallery
   ter z-index negativo dentro do contexto criado por .hero. */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
  pointer-events: none;
}
.hero__grid > * { pointer-events: auto; }
/* Rotulo fica fixo no topo, alinhado com a base do logo (via CSS).
   O bloco de texto comeca na mesma coluna esquerda do rotulo — como as
   colunas se sobrepoem, o grid empurra o bloco para a linha de baixo
   automaticamente. Sua altura e alinhada ao "Bio" do menu, medida via
   JS, porque a posicao do menu depende da altura da janela. */
.hero__label { grid-column: 1 / 3; grid-row: 1; align-self: start; }
/* Desconstruido: o titulo fica a esquerda, o texto de apoio flutua a
   direita, ancorado pela base do titulo em vez de emparelhado com ele
   — nao formam um bloco unico, sao dois elementos soltos na mesma linha. */
.hero__body {
  grid-column: 1 / 13;
  grid-row: 2;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.hero__headline { grid-column: 1 / 7; }
.hero__meta { grid-column: 8 / 13; align-self: end; }
/* Todo o texto do hero usa mix-blend-mode: difference. Como as
   imagens circulam por baixo dele o tempo todo, isso mantem o texto
   legivel sobre qualquer imagem — a cor se inverte conforme o fundo.
   A cor declarada e a "fonte" da diferenca, nao o resultado:
   branco sobre papel resulta em quase preto. */
.hero__headline,
.hero__meta,
.hero__label .eyebrow {
  mix-blend-mode: difference;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.8rem + 5.4vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  /* Branco tambem aqui: e a cor-fonte mais segura para difference —
     um cinza claro sumiria justamente sobre as areas claras das fotos.
     A hierarquia vem do tamanho e da medida, nao do tom. */
  color: #fff;
  line-height: 1.7;
  /* text-wrap: pretty evita viuvas; o nbsp antes da ultima palavra
     garante o mesmo em navegadores sem suporte a pretty. */
  max-width: 30ch;
  text-wrap: pretty;
}
.hero__label .eyebrow {
  color: #fff;
  letter-spacing: 0.3em;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.hero__label .eyebrow:hover, .hero__label .eyebrow:focus-visible { opacity: 0.7; }
@media (max-width: 860px) {
  /* O cabecalho vira uma barra fixa no topo; sem esse respiro o
     "GABRIELLA VERAS" comeca por baixo dela e aparece cortado. */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--sp-5)); padding-bottom: var(--sp-6); }
  /* Uma coluna so: as 12 colunas do desktop nao cabem na largura do
     celular (11 vaos de --sp-5 sozinhos ja passam da tela) e faziam o
     conteudo vazar para fora, exigindo rolagem horizontal. */
  .hero__grid, .hero__body { grid-template-columns: 1fr; }
  .hero__label, .hero__body { grid-column: 1 / -1; }
  .hero__label { margin-bottom: var(--sp-3); }
  .hero__headline, .hero__meta { grid-column: 1 / -1; }
  .hero__meta { align-self: start; margin-top: var(--sp-3); max-width: none; }
  .hero__headline { font-size: clamp(2.4rem, 2rem + 7vw, 3.4rem); }
}

/* Galeria flutuante — imagens soltas que reagem ao cursor
   (paralaxe por mouse) e revelam novas conforme o scroll desce
   pela secao (reaproveita [data-reveal]). Profundidades via
   data-depth, lidas no JS. */
.floating-gallery {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Opacidade e escala (o "surge, expande e volta ao tamanho normal")
   sao escritas pelo JS a cada frame, junto com a deriva — por isso nao
   ha transition aqui: um easing de overshoot calculado em JS (ver
   main.js) substitui a transition, e ela ficaria brigando com o valor
   escrito a cada frame. Comeca invisivel; o JS revela cada imagem no
   tempo certo (de cara, com atraso escalonado; as de baixo, quando
   entram na tela pelo scroll). */
.floating-gallery__item {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  background: var(--paper-raised);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  will-change: transform, opacity;
}
/* object-fit:contain (nao cover) por pedido explicito — a imagem
   nunca e cortada, so escalada; o fundo (--paper-raised) do item
   aparece nas sobras quando a proporcao da caixa nao bate exatamente
   com a da imagem. */
.floating-gallery__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Com "reduzir movimento" ligado no sistema, o JS nao anima nada — e sem
   ele as imagens ficariam invisiveis para sempre, porque quem escreve a
   opacidade e o loop. Aqui elas aparecem paradas, todas, e a composicao
   continua inteira. */
@media (prefers-reduced-motion: reduce) {
  .floating-gallery__item { opacity: 1; }
}

/* Espalhadas por toda a area, inclusive sob o texto — o mix-blend-mode
   do hero cuida da legibilidade. Escalas variadas reforcam profundidade.
   Posicoes so definem o ponto de partida: a partir dai o JS aplica uma
   deriva continua e as imagens circulam pela composicao. Cada
   aspect-ratio segue a proporcao real da propria imagem (nao um slot
   generico), pra manter o enquadramento original de cada uma. */
.floating-gallery__item:nth-child(1)  { top: 1%;  left: 4%;  width: 9rem;    aspect-ratio: 4/5; }
.floating-gallery__item:nth-child(2)  { top: 2%;  left: 38%; width: 8rem;    aspect-ratio: 1080/1450; }
.floating-gallery__item:nth-child(3)  { top: 1%;  left: 70%; width: 8rem;    aspect-ratio: 659/800; }
.floating-gallery__item:nth-child(4)  { top: 15%; left: 16%; width: 10rem;   aspect-ratio: 3/2; }
.floating-gallery__item:nth-child(5)  { top: 16%; left: 50%; width: 9rem;    aspect-ratio: 740/492; }
.floating-gallery__item:nth-child(6)  { top: 17%; left: 82%; width: 7.5rem;  aspect-ratio: 406/582; }
.floating-gallery__item:nth-child(7)  { top: 29%; left: 4%;  width: 7rem;    aspect-ratio: 328/407; }
.floating-gallery__item:nth-child(8)  { top: 30%; left: 34%; width: 8rem;    aspect-ratio: 4/5; }
.floating-gallery__item:nth-child(9)  { top: 28%; left: 66%; width: 8.5rem;  aspect-ratio: 4/5; }
.floating-gallery__item:nth-child(10) { top: 42%; left: 14%; width: 9rem;    aspect-ratio: 4/5; }
.floating-gallery__item:nth-child(11) { top: 43%; left: 46%; width: 10.5rem; aspect-ratio: 800/489; }
.floating-gallery__item:nth-child(12) { top: 41%; left: 78%; width: 9rem;    aspect-ratio: 800/510; }
.floating-gallery__item:nth-child(13) { top: 55%; left: 5%;  width: 9rem;    aspect-ratio: 3/2; }
.floating-gallery__item:nth-child(14) { top: 56%; left: 36%; width: 7rem;    aspect-ratio: 333/500; }
.floating-gallery__item:nth-child(15) { top: 54%; left: 66%; width: 7.5rem;  aspect-ratio: 518/800; }
.floating-gallery__item:nth-child(16) { top: 68%; left: 14%; width: 8rem;    aspect-ratio: 740/800; }
.floating-gallery__item:nth-child(17) { top: 69%; left: 46%; width: 10.5rem; aspect-ratio: 540/289; }
.floating-gallery__item:nth-child(18) { top: 67%; left: 76%; width: 7.5rem;  aspect-ratio: 327/437; }
.floating-gallery__item:nth-child(19) { top: 82%; left: 8%;  width: 9rem;    aspect-ratio: 785/450; }
.floating-gallery__item:nth-child(20) { top: 84%; left: 38%; width: 9rem;    aspect-ratio: 3/2; }
.floating-gallery__item:nth-child(21) { top: 83%; left: 66%; width: 8rem;    aspect-ratio: 4/5; }

@media (max-width: 1100px) {
  .floating-gallery__item:nth-child(3),
  .floating-gallery__item:nth-child(6),
  .floating-gallery__item:nth-child(9),
  .floating-gallery__item:nth-child(12),
  .floating-gallery__item:nth-child(15),
  .floating-gallery__item:nth-child(18),
  .floating-gallery__item:nth-child(21) { display: none; }
}
@media (max-width: 860px) {
  .hero { min-height: auto; }
  .floating-gallery { display: none; }
}

/* =========================================================
   Respostas rapidas (home)
   ========================================================= */
.quick-answers {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quick-answers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.quick-answers__item { display: flex; flex-direction: column; gap: var(--sp-2); }
.quick-answers__item p { font-size: var(--step-small); line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 860px) {
  .quick-answers__grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-5); }
}
@media (max-width: 560px) {
  .quick-answers__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Grid de trabalhos / parallax composicional
   ========================================================= */
.work-strip {
  position: relative;
  padding-block: var(--sp-8);
}
.work-strip__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.work-item {
  position: relative;
  overflow: hidden;
  background: var(--paper-raised);
}
.work-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-item--a { grid-column: 1 / 6; aspect-ratio: 4 / 5; align-self: start; transform: rotate(-1.2deg); }
.work-item--b { grid-column: 6 / 10; aspect-ratio: 3 / 4; align-self: end; margin-top: var(--sp-7); transform: rotate(0.8deg); z-index: 1; margin-left: calc(-1 * var(--sp-5)); }
.work-item--c { grid-column: 10 / 13; aspect-ratio: 1 / 1; align-self: start; margin-top: var(--sp-5); transform: rotate(-0.6deg); }
[data-parallax] { will-change: transform; }

.work-strip__mark {
  grid-column: 1 / 13;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-3);
}

@media (max-width: 860px) {
  .work-strip__grid { grid-template-columns: 1fr; }
  .work-strip__mark { grid-column: 1 / -1; }
  .work-item--a, .work-item--b, .work-item--c { grid-column: 1 / -1; margin-top: 0; margin-left: 0; aspect-ratio: 4/5; transform: none; }
  .work-strip__grid { row-gap: var(--sp-4); }
}

/* Asterisco — pequena marca grafica recorrente */
.mark-asterisk {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.4em;
  line-height: 1;
}

/* =========================================================
   Statement / pull quote (marca como sistema)
   ========================================================= */
.statement {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statement__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.statement__label { grid-column: 1 / 3; }
.statement__text {
  grid-column: 3 / 12;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-fluid-lg);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.statement__text strong { font-weight: 700; }
.statement__cta { grid-column: 3 / 12; margin-top: var(--sp-5); }
@media (max-width: 860px) {
  .statement__grid { grid-template-columns: 1fr; }
  .statement__label, .statement__text, .statement__cta { grid-column: 1 / -1; }
  .statement__label { margin-bottom: var(--sp-3); }
}

/* =========================================================
   Conteudo generico / prosa editorial
   ========================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-7) var(--sp-6);
}
.page-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.page-hero__title {
  grid-column: 1 / 9;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-fluid-lg);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.page-hero__intro {
  grid-column: 10 / 13;
  font-size: var(--step-small);
  color: var(--ink-soft);
  line-height: 1.7;
  align-self: end;
}
/* Indice clicavel do topo da pagina — fixo no canto superior direito,
   continua visivel durante a rolagem da pagina toda. Mesmo corpo e
   entrelinha do submenu lateral (.nav__sublink). */
.page-hero__toc {
  position: fixed;
  top: 6.5rem;
  right: var(--edge);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}
.page-hero__toc-link {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-size: var(--step-micro);
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: right;
  color: var(--ink-soft);
}
.page-hero__toc-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--ink);
  transition: right var(--dur-fast) var(--ease);
}
.page-hero__toc-link:hover, .page-hero__toc-link:focus-visible { color: var(--ink); }
.page-hero__toc-link:hover::after, .page-hero__toc-link:focus-visible::after { right: 0; }
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__title, .page-hero__intro, .page-hero__toc { grid-column: 1 / -1; }
  .page-hero__intro { margin-top: var(--sp-3); }
  /* Duas colunas em vez de quebra livre: com wrap solto os itens
     caiam 3 + 1 e o ultimo ficava sozinho numa linha. */
  .page-hero__toc {
    position: static;
    margin-top: var(--sp-3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: start;
    gap: var(--sp-3) var(--sp-5);
  }
  .page-hero__toc-link { text-align: left; }
}

/* Link dentro de texto corrido, para termos que remetem a outra
   pagina/secao ou perfil (ex.: "design" -> Trajetoria; estudios no
   Instagram). Preto e sublinhado por padrao (nao azul-link generico),
   esmaece no hover para sugerir clique. */
a.link-strong {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.link-strong:hover, a.link-strong:focus-visible {
  color: var(--ink-soft);
}

.content-section {
  padding-block: var(--sp-8);
}
/* Bloco de texto "desconstruido": coluna estreita (nao estica ate a
   borda do content-grid__body), com bastante respiro vertical entre
   paragrafos — a citacao vira um bloco de destaque a parte, maior e
   com mais espaco ao redor, em vez do texto corrido tudo junto. */
.content-grid__body.prose--airy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 34rem;
}
/* Especificidade maior que .prose .pull de proposito: aqui o respiro
   extra antes da citacao precisa compensar o gap normal do container
   (bem menor que o var(--sp-6) que este bloco usava antes). */
.content-grid__body.prose--airy .pull {
  margin-top: var(--sp-4);
  margin-bottom: calc(var(--sp-6) + var(--sp-2));
}
.content-section + .content-section { border-top: 1px solid var(--line); }
.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4) var(--sp-5);
}
.content-grid__label { grid-column: 1 / 3; }
.content-grid__label .eyebrow { position: sticky; top: 6.5rem; }
.content-grid__body { grid-column: 3 / 11; max-width: 62ch; }
@media (max-width: 860px) {
  .content-grid { grid-template-columns: 1fr; }
  .content-grid__label, .content-grid__body { grid-column: 1 / -1; }
  .content-grid__label { margin-bottom: var(--sp-3); }
}

.prose { display: flex; flex-direction: column; gap: var(--sp-4); }
.prose p { font-size: 0.875rem; line-height: 1.75; color: var(--ink); }
.prose p.lede { font-family: var(--font-display); font-size: var(--step-fluid-sm); line-height: 1.4; }
.prose strong { font-weight: 600; }
.prose .pull {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-fluid-sm);
  line-height: 1.35;
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--ink);
}
.definition-list { display: flex; flex-direction: column; }
.definition-list__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.definition-list__item:last-child { border-bottom: 1px solid var(--line); }
.definition-list__num { font-family: var(--font-display); color: var(--ink-soft); font-size: var(--step-small); padding-top: 0.15em; }
.definition-list__text strong { font-weight: 600; }
.definition-list__text { font-size: 0.875rem; line-height: 1.65; }

.tag-line {
  font-family: var(--font-display);
  font-size: var(--step-fluid-sm);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
/* No celular cada trecho quebra inteiro, e nao no meio ("Entende /
   negocio"). No desktop os spans nao recebem estilo nenhum. */
@media (max-width: 860px) {
  .tag-line__part { white-space: nowrap; }
}

/* Topicos de repertorio — chips pequenos, em linha, do mesmo tamanho
   e cor que os antigos ".chip". O sublinhado (igual ao dos links de
   texto do site, ex. "Conheca mais sobre mim") fica sempre visivel e
   funciona como separador entre os topicos; no hover (ou foco via
   teclado) so esmaece um pouco, e os subtemas aparecem por baixo. */
.topic-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-5); }
.topic-list__item { padding-block: var(--sp-1); }
.topic-list__label {
  display: inline-block;
  width: fit-content;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--step-small);
  color: var(--ink-soft);
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topic-list__item:hover .topic-list__label,
.topic-list__item:focus-within .topic-list__label { color: var(--ink); opacity: 0.6; }

.topic-list__sub {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease), margin-top var(--dur-fast) var(--ease);
}
.topic-list__item:hover .topic-list__sub,
.topic-list__item:focus-within .topic-list__sub {
  max-height: 10rem;
  opacity: 1;
  margin-top: var(--sp-2);
}
.topic-list__sub li {
  font-size: var(--step-micro);
  color: var(--ink-soft);
  white-space: nowrap;
}

.formation-list { display: flex; flex-direction: column; }
.formation-item {
  display: grid;
  grid-template-columns: minmax(9rem, 14ch) 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--step-small);
}
.formation-item:last-child { border-bottom: 1px solid var(--line); }
.formation-item__year { color: var(--ink-soft); }
.formation-item__what strong { font-weight: 600; font-size: var(--step-body); display: block; margin-bottom: 0.2em; }
@media (max-width: 620px) {
  .formation-item { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* =========================================================
   Trajetoria — timeline vertical com 3 capitulos, sempre revelada
   (sem hover-to-reveal). Numero grande do capitulo na coluna-label
   (mesma coluna 1/3 usada pelos eyebrows do site), com uma linha fina
   percorrendo a pagina toda ao fundo. O corpo de texto segue o mesmo
   padrao de BIO (.prose, 0.875rem/1.75).
   ========================================================= */
.v-chapter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4) var(--sp-5);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
}
.v-timeline > .v-chapter:first-child { border-top: 0; padding-top: var(--sp-4); }

.v-chapter__label { grid-column: 1 / 3; }
.v-chapter__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-fluid-lg);
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.v-chapter__period {
  display: block;
  width: fit-content;
  margin-top: var(--sp-4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--step-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.v-chapter__main { grid-column: 3 / 11; }
.v-chapter__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-fluid-md);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
}
.v-chapter__body { max-width: 34rem; }

/* Blocos do corpo do capitulo aparecem conforme entram na faixa central
   da tela ao rolar, e desaparecem de novo ao sair dela — nao e um
   reveal de uma vez so, e continuo em ambas as direcoes. */
[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease);
}
[data-scroll-reveal].is-in { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  .v-chapter { grid-template-columns: 1fr; gap: var(--sp-3); }
  /* Sem isso o rotulo continuava reservando 2 das 12 colunas antigas —
     virava uma caixa de ~20px e o "01" transbordava por cima do titulo. */
  .v-chapter__label, .v-chapter__main { grid-column: 1 / -1; }
  .v-chapter__label { display: flex; align-items: baseline; gap: var(--sp-3); }
  .v-chapter__period { margin-top: 0; writing-mode: horizontal-tb; transform: none; }
  .v-chapter__main { max-width: none; }
}

/* Mini-timeline dentro de um capitulo, para quando ha varias
   experiencias a contar dentro do mesmo periodo (ex: marketing e branding). */
.chapter-history__entry {
  /* padding-top compensa o gap do .prose entre este item e o anterior
     (que so existe acima da linha, nao abaixo), pra o respiro ficar
     igual dos dois lados da linha divisoria. */
  padding-top: calc(var(--sp-5) + var(--sp-4));
  padding-bottom: var(--sp-5);
  border-top: 1px solid var(--line);
}
.chapter-history__entry:first-of-type { border-top: 0; padding-top: 0; }
/* .prose so espaca seus filhos diretos via flex gap — os paragrafos
   soltos dentro de cada .chapter-history__entry (que nao sao filhos
   diretos do .prose) ficavam grudados uns nos outros sem isso. */
.chapter-history__entry p:not(:last-child) { margin-bottom: var(--sp-3); }
.chapter-history__entry ol:not(:last-child) { margin-bottom: var(--sp-3); }

.chapter-history__company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-fluid-sm);
  line-height: 1.15;
  margin-bottom: var(--sp-1);
}
p.chapter-history__role {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}

.v-chapter__list { display: flex; flex-direction: column; gap: var(--sp-3); counter-reset: v-item; }
.v-chapter__list li { position: relative; padding-left: 1.6rem; font-size: 0.875rem; line-height: 1.65; counter-increment: v-item; }
.v-chapter__list li::before {
  content: counter(v-item) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); color: var(--ink-soft);
}

/* =========================================================
   Cases
   ========================================================= */
.case {
  padding-block: var(--sp-8);
}
.case + .case { border-top: 1px solid var(--line); }
.case__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-6);
}
.case__index {
  grid-column: 1 / 3;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-fluid-lg);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.case__title-wrap { grid-column: 3 / 11; }
.case__eyebrow { margin-bottom: var(--sp-2); }
.case__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-fluid-lg); line-height: 1.1; letter-spacing: -0.015em; }
.case__client { color: var(--ink-soft); font-size: var(--step-fluid-sm); margin-top: var(--sp-2); font-family: var(--font-display); }
@media (max-width: 860px) {
  .case__head { grid-template-columns: 1fr; }
  .case__index, .case__title-wrap { grid-column: 1 / -1; }
  .case__index { margin-bottom: var(--sp-2); }
}

.case__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
}
.case__col-text { grid-column: 3 / 9; display: flex; flex-direction: column; gap: var(--sp-4); font-size: 0.875rem; line-height: 1.75; }
.case__col-media {
  grid-column: 9 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-5);
}
.case__col-media img {
  width: 100%;
  max-width: 16rem;
  height: auto;
  object-fit: cover;
  background: var(--paper-raised);
}
@media (max-width: 980px) {
  .case__grid { grid-template-columns: 1fr; }
  .case__col-text, .case__col-media { grid-column: 1 / -1; }
  .case__col-media { align-items: flex-start; }
}
.case__result {
  font-family: var(--font-display);
  font-size: var(--step-fluid-sm);
  line-height: 1.4;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* =========================================================
   Contato
   ========================================================= */
.contact-hero { position: relative; overflow: hidden; padding-block: var(--sp-8) var(--sp-6); }
.contact-hero > * { position: relative; z-index: 1; }
.contact-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-fluid-xl);
  letter-spacing: -0.03em;
  line-height: 0.94;
}
.contact-hero__sub { margin-top: var(--sp-4); font-size: var(--step-fluid-sm); color: var(--ink-soft); max-width: 40ch; font-family: var(--font-display); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
}
.contact-form { grid-column: 1 / 8; display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-channels { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--sp-5); }
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form, .contact-channels { grid-column: 1 / -1; }
}

.field { position: relative; }
.field label {
  display: block;
  font-size: var(--step-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-1);
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-2);
  font-size: var(--step-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-status { font-size: var(--step-small); }
.form-status[data-state="success"] { color: var(--ink); font-weight: 600; }

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.channel:first-child { border-top: 0; padding-top: 0; }
.channel__label { font-size: var(--step-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.channel__value { font-family: var(--font-display); font-size: var(--step-fluid-sm); }
.channel__value a:hover { opacity: 0.6; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   Placeholder de pendencia editorial (imagens/dados nao confirmados)
   ========================================================= */
.pending {
  border: 1px dashed var(--line);
  background: var(--paper-raised);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step-micro);
  color: var(--ink-soft);
  display: inline-block;
}

/* Mesma ideia do .pending, em formato de bloco — usado nos Cases onde
   ainda falta imagem. */
.timeline-entry__placeholder {
  border: 1px dashed var(--line);
  padding: var(--sp-4);
  font-size: var(--step-micro);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.timeline-entry__placeholder strong { display: block; color: var(--ink); font-size: var(--step-small); margin-bottom: var(--sp-1); text-transform: none; letter-spacing: 0; }