/* Tokens vindos do Figma (gustaface / porfolio) */
:root {
  color-scheme: dark;

  --bg: #272624;
  --text: #ffffff;
  /* #6c6c6a do Figma fica abaixo de 4.5:1 em texto; usado só na linha */
  --line: #6c6c6a;
  --muted: #8f8e8b;
  --bullet: #d9d9d9;

  --column: 626px;
  --gutter: 16px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(255, 255, 255, 0.18);
}

p {
  margin: 0;
  text-wrap: pretty;
}

strong {
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 160ms ease;
}

a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Favicon discreto, no ritmo do texto — como nas listas de links da Floguo. */
.favicon {
  display: inline;
  width: 12px;
  height: 12px;
  margin-inline: 0.3em;
  vertical-align: middle;
  border-radius: 2px;
  transform: translateY(-1px);
}

/* Layout */

/* Navegação numa coluna à esquerda, conteúdo ao lado. A página encosta
   na esquerda em vez de centralizar. */
.shell {
  --edge: clamp(var(--gutter), 6vw, 56px);
  --top: 64px;
  /* Faixa do topo, igual em toda página: gustaface (120px) + respiro (27px).
     Nela fica só a gustaface ou o título da aba; navegação e conteúdo
     começam logo abaixo, então a navegação nunca muda de altura. */
  --band: 147px;
  --logo: 120px;
  /* Nome da aba ao lado da gustaface: um terço da logo (40px na de 120).
     Discreto, mas um passo acima do título de texto (32px), então deixa de
     parecer legenda e ainda não disputa com a gustaface. */
  --section-size: calc(var(--logo) / 3);
  --title-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);

  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 56px);
  padding: var(--top) var(--edge) 120px;
}

.page {
  flex: 1;
  min-width: 0;
  max-width: var(--column);
  display: flex;
  flex-direction: column;
}

.avatar {
  width: 120px;
  height: 120px;
  margin-bottom: 27px;
}

/* gustaface: anel e olhos são grupos separados para animar no futuro.
   A cor vem de data-skin. */
.gf {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.avatar[data-skin="cromatico"] path {
  fill: #1f1e1c;
  stroke: url(#gf-chroma);
  stroke-width: 16;
}

/* Vidro preto (Vector-6 / frame "gustaface - gradient - black - glass"):
   corpo quase preto com degradê sutil, fio de luz nas quinas de cima à
   direita e de baixo à esquerda, e uma sombra leve que descola do fundo. */
.avatar[data-skin="vidro"] path {
  fill: url(#gf-glass-fill);
  stroke: url(#gf-glass);
  stroke-width: 9;
}

/* O anel tem luz própria: quando ele gira, o script do clique gira a luz
   ao contrário (gradientTransform), então o brilho fica sempre em cima à
   direita e embaixo à esquerda e nenhum gomo parece mudar de forma. */
.avatar[data-skin="vidro"] .gf-ring path {
  fill: url(#gf-ring-glass-fill);
  stroke: url(#gf-ring-glass);
}

.avatar[data-skin="vidro"] .gf {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

/* Tons do vidro (data-tom): o material é o mesmo, só o corpo muda de cor,
   mais claro em cima à esquerda e fundo embaixo à direita. Sem data-tom é
   o vidro preto. A cor transiciona, então a troca não precisa de máscara. */
.gf-glass-a {
  stop-color: var(--vidro-a, #262520);
  transition: stop-color 220ms ease;
}

.gf-glass-b {
  stop-color: var(--vidro-b, #1f1e1a);
  transition: stop-color 220ms ease;
}

.avatar[data-tom="azul"] { --vidro-a: #4d5dff; --vidro-b: #1a1ab0; }
.avatar[data-tom="vermelho"] { --vidro-a: #ff5c64; --vidro-b: #b3121c; }
.avatar[data-tom="amarelo"] { --vidro-a: #eef27e; --vidro-b: #a9b018; }
.avatar[data-tom="chiclete"] { --vidro-a: #ff70d9; --vidro-b: #4655ff; }
.avatar[data-tom="branco"] { --vidro-a: #ffffff; --vidro-b: #c9c6be; }

.avatar[data-skin="preto"] path { fill: #1b1913; }
.avatar[data-skin="branco"] path { fill: #ffffff; }
.avatar[data-skin="vermelho"] path { fill: #ee2b36; }
.avatar[data-skin="azul"] path { fill: #1a1ae6; }
.avatar[data-skin="amarelo"] path { fill: #dfe84a; }
.avatar[data-skin="chiclete"] path { fill: url(#gf-bubble); }

/* Gustaface grande é um botão: cada clique troca o tom do vidro (script no
   build.mjs). A troca acontece no meio de uma piscada e o anel gira um
   gomo (36°, são 10) acumulando entre cliques, então clicar rápido só
   redireciona o giro. */
.avatar-toggle {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}

.avatar-toggle:active {
  transform: scale(0.96);
}

.avatar-toggle:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.avatar .gf-ring,
.avatar .gf-eye {
  transform-box: fill-box;
  transform-origin: center;
}

.avatar-toggle .gf-ring {
  transform: rotate(var(--giro, 0deg));
  transition: transform 600ms var(--ease-out);
}

.avatar-toggle.is-trocando .gf-eye {
  animation: gf-pisca 240ms var(--ease-in-out) both;
}

/* Ao chegar de outra aba, a gustaface da página nova faz o mesmo gesto do
   clique: gira um gomo e pisca. data-chegada vem do script no <head> e sai
   quando o giro termina, para não travar a piscada dos cliques seguintes. */
[data-chegada] .topo .avatar .gf-ring {
  animation: gf-gira 600ms var(--ease-out) both;
}

[data-chegada] .topo .avatar .gf-eye {
  animation: gf-pisca 240ms var(--ease-in-out) both;
}

@keyframes gf-gira {
  from {
    transform: rotate(-36deg);
  }
}

@keyframes gf-pisca {
  50% {
    transform: scaleY(0.15);
  }
}

/* Humor (data-humor, posto pelo script do clique). Sobrancelhas e olhos em X
   moram escondidos no SVG de toda gustaface; só a do Sobre muda de humor.
   - confuso: do 5º clique seguido em diante as sobrancelhas descem, a
     direita mais alta. Somem se a pessoa parar de clicar.
   - tonto: o 10º clique fecha a volta inteira do anel (10 gomos de 36°).
     Os olhos fecham e voltam em X, o anel dá mais uma volta e a cabeça
     balança, na cor de sempre. */
.avatar .gf-brow,
.avatar .gf-x {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.avatar .gf-brow {
  transform: translateY(24px);
  transition:
    opacity 140ms ease,
    transform 200ms var(--ease-out);
}

.avatar-toggle[data-humor="confuso"] .gf-brow {
  opacity: 1;
  transform: none;
}

.avatar .gf-x {
  transform: scale(0.4) rotate(-45deg);
  transition:
    opacity 100ms ease,
    transform 100ms ease;
}

.avatar-toggle .gf-eye {
  transition: transform 160ms var(--ease-out) 90ms;
}

.avatar-toggle[data-humor="tonto"] .gf-eye {
  transform: scaleY(0);
  transition: transform 110ms var(--ease-in-out);
}

.avatar-toggle[data-humor="tonto"] .gf-x {
  opacity: 1;
  transform: none;
  transition:
    opacity 120ms ease 100ms,
    transform 320ms var(--ease-out) 100ms;
}

.avatar-toggle[data-humor="tonto"] .gf-ring {
  transition-duration: 1400ms;
}

.avatar-toggle[data-humor="tonto"] .gf {
  animation: gf-zonzo 2400ms var(--ease-in-out) both;
}

@keyframes gf-zonzo {
  15% { transform: rotate(-9deg) translateX(-3px); }
  35% { transform: rotate(7deg) translateX(3px); }
  55% { transform: rotate(-5deg) translateX(-2px); }
  75% { transform: rotate(3deg) translateX(1px); }
}

/* Topo da página (gustaface, apresentação ou título da aba). Tem nome
   próprio para trocar no lugar ao mudar de página. */
.topo {
  display: flex;
  flex-direction: column;
  min-height: var(--band);
  view-transition-name: topo;
}

/* A gustaface sai da foto do topo: troca na hora, sem o fade de entrada, e
   a nova fica viva para girar e piscar enquanto o resto assenta */
.topo .avatar {
  view-transition-name: gustaface;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}

.intro-hello {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.012em;
}

/* Navegação
   Cada aba é uma página (/escritas, /leituras...). No computador é uma
   coluna à esquerda, alinhada à direita (encostada no texto), que começa
   na altura da gustaface e acompanha a rolagem. A aba atual é marcada só
   pela cor. No celular vira uma linha no topo que rola para o lado. */

/* Começa na altura do conteúdo e fica parada ali ao rolar */
.nav {
  position: sticky;
  top: calc(var(--top) + var(--band));
  margin-top: var(--band);
  flex: none;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.nav a {
  display: inline-block;
  padding: 3px 0;
  font-weight: 400;
  line-height: 22px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease;
}

.nav a[aria-current="page"] {
  color: var(--text);
}

/* Painel */

.panel {
  display: flex;
  flex-direction: column;
  gap: 27px;
  /* Altura mínima de uma tela: uma aba curta (Notas) ainda tem altura para
     manter a rolagem de quem veio de uma aba longa, sem a página "subir". */
  min-height: 100vh;
  view-transition-name: panel;
}

/* Filtro de grupos: Todos · Marketing · Produto e growth */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.875rem;
  view-transition-name: filters;
}

.filters a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.filters a[aria-current="page"] {
  color: var(--text);
}

/* Troca de página
   O navegador tira uma foto da página antiga e da nova e anima entre elas.
   Regra: conteúdo diferente nunca aparece sobreposto nem fora do lugar.
   Nada desliza (grupos sem animação).
   - root: só o fundo e a navegação, iguais em toda página; a cor da aba
     atual passa de uma para a outra.
   - Partes com nome: topo, filters, index (lista ao lado do texto
     aberto), panel e reader (o conteúdo).
   - Entre abas diferentes, a mesma parte pode estar em outra altura, e o
     navegador desenharia a foto velha já na posição nova. Então o velho
     some na hora e o novo entra assentando.
   - Na mesma aba (tipo "mesma-aba", posto pelo script no <head>), o que
     não muda (título, filtros, lista lateral) fica parado; o
     conteúdo sai em 100ms, no lugar, e só então o novo entra.
   Navegador sem suporte só troca de página, sem quebrar nada. */
@view-transition {
  navigation: auto;
}

::view-transition-group(panel),
::view-transition-group(reader),
::view-transition-group(topo),
::view-transition-group(filters),
::view-transition-group(index) {
  animation: none;
}

::view-transition-old(panel),
::view-transition-old(reader),
::view-transition-old(topo),
::view-transition-old(filters),
::view-transition-old(index) {
  animation: none;
  opacity: 0;
}

::view-transition-new(panel),
::view-transition-new(reader),
::view-transition-new(topo),
::view-transition-new(filters),
::view-transition-new(index) {
  animation: 220ms var(--ease-out) both panel-in;
}

::view-transition-group(gustaface),
::view-transition-new(gustaface) {
  animation: none;
}

::view-transition-old(gustaface) {
  animation: none;
  opacity: 0;
}

/* Mesma aba: o conteúdo sai no lugar e o novo entra depois */
:active-view-transition-type(mesma-aba)::view-transition-old(panel),
:active-view-transition-type(mesma-aba)::view-transition-old(reader) {
  animation: 100ms ease both panel-out;
  opacity: 1;
}

:active-view-transition-type(mesma-aba)::view-transition-new(panel),
:active-view-transition-type(mesma-aba)::view-transition-new(reader) {
  animation: 220ms var(--ease-out) 90ms both panel-in;
}

/* Mesma aba: partes presentes nas duas páginas trocam sem animar (a nova
   aparece já no lugar, a velha some na hora). Se só existe de um lado
   (:only-child), fica onde estava, então sai e entra como o conteúdo. */
:active-view-transition-type(mesma-aba)::view-transition-old(topo),
:active-view-transition-type(mesma-aba)::view-transition-old(filters),
:active-view-transition-type(mesma-aba)::view-transition-old(index) {
  animation: none;
  opacity: 0;
}

:active-view-transition-type(mesma-aba)::view-transition-new(topo),
:active-view-transition-type(mesma-aba)::view-transition-new(filters),
:active-view-transition-type(mesma-aba)::view-transition-new(index) {
  animation: none;
}

:active-view-transition-type(mesma-aba)::view-transition-old(topo):only-child,
:active-view-transition-type(mesma-aba)::view-transition-old(filters):only-child,
:active-view-transition-type(mesma-aba)::view-transition-old(index):only-child {
  animation: 100ms ease both panel-out;
  opacity: 1;
}

:active-view-transition-type(mesma-aba)::view-transition-new(topo):only-child,
:active-view-transition-type(mesma-aba)::view-transition-new(filters):only-child,
:active-view-transition-type(mesma-aba)::view-transition-new(index):only-child {
  animation: 220ms var(--ease-out) 90ms both panel-in;
}

/* Mesmo texto aberto nas duas páginas (de /notas/<título> para /notas):
   o texto fica parado, como o título e a lista */
:active-view-transition-type(mesmo-texto)::view-transition-old(reader) {
  animation: none;
  opacity: 0;
}

:active-view-transition-type(mesmo-texto)::view-transition-new(reader) {
  animation: none;
}

@keyframes panel-out {
  to {
    opacity: 0;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(2px);
  }
}

.hint {
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: -0.006em;
}

/* Sobre */

.prose {
  gap: 20px;
}

/* Mantém a aparência do antigo parágrafo com strong no Sobre. */
.prose > .about-heading {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-wrap: pretty;
}

/* Marca-texto que acompanha a quebra de linha (o círculo quebrava no celular) */
.annotation {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 38%;
  border-radius: 2px;
  box-decoration-break: slice;
}

/* Desenha só na primeira visita da sessão; depois já aparece marcado
   (o script do build.mjs põe data-visto no <html>) */
.annotation {
  animation: highlight 900ms var(--ease-in-out) 350ms forwards;
}

[data-visto] .annotation {
  animation: none;
  background-size: 100% 38%;
}

@keyframes highlight {
  to {
    background-size: 100% 38%;
  }
}

/* Listas (Notas, Escritas, Playground, Sites, Leituras) */

.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.group-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item {
  position: relative;
  padding-left: 24px;
}

/* bullet quadrado 5×5 do Figma, centrado na primeira linha */
.item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: calc(0.7em - 2.5px);
  width: 5px;
  height: 5px;
  background: var(--bullet);
}

.item.is-draft::before {
  background: var(--line);
}

.item-title {
  font-weight: 400;
}

.item.is-draft .item-title {
  color: var(--muted);
}

.item-meta {
  color: var(--muted);
  font-weight: 400;
}

.item-desc {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.tag {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
}

.star {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

a.item-title {
  text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
}

.item-date,
.reader-date {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.item-date {
  margin-top: 2px;
}

/* Texto aberto
   Lista da aba à esquerda (fica parada enquanto o texto rola) e o texto à
   direita. Em tela estreita a lista some e o × volta para ela. */

.page-reader {
  max-width: none;
  display: grid;
  /* coluna da esquerda com a mesma largura do Sobre, para nada mudar de
     tamanho ao trocar de aba; o texto fica à direita dela */
  grid-template-columns: minmax(0, var(--column)) minmax(0, 640px);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Coluna da esquerda: título da aba na faixa do topo e a lista abaixo, na
   linha da navegação. Coluna da direita: o texto sobe até o alto, com o
   título dele na mesma linha (e no mesmo tamanho) do título da aba. */
.page-reader > .topo {
  grid-column: 1;
  grid-row: 1;
}

.page-reader > .index {
  grid-column: 1;
  grid-row: 2;
}

.page-reader > .reader {
  grid-column: 2;
  grid-row: 1 / span 2;
  /* o título do texto na mesma linha do nome da aba, no meio da gustaface */
  padding-top: calc((var(--logo) - var(--title-size) * 1.15) / 2);
}

.index {
  view-transition-name: index;
  position: sticky;
  top: calc(var(--top) + var(--band));
  max-height: calc(100vh - var(--top) - var(--band));
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Título de aba (todas menos o Sobre): gustaface do mesmo tamanho da do
   Sobre, na cor da aba, preenchendo a faixa do topo, com o nome ao lado no
   meio da altura dela. Nada muda de tamanho ao trocar de aba. */
.section-title {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  font-size: var(--section-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.section-title a {
  text-decoration: none;
}

.avatar.avatar-aba {
  flex: none;
  width: var(--logo);
  height: var(--logo);
  margin: 0;
}

/* Na lista lateral só o texto aberto fica branco, com o bullet aceso */
.index a.item-title {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.index a.item-title[aria-current="page"] {
  color: var(--text);
}

.index .item::before {
  background: var(--line);
}

.index .item:has([aria-current="page"])::before {
  background: var(--bullet);
}

.reader {
  position: relative;
  min-width: 0;
  view-transition-name: reader;
}

/* Só aparece em tela estreita (ver @media 1280px): no computador a lista
   está sempre ao lado, não há o que fechar */
.reader-close {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background-color 160ms ease, transform 120ms var(--ease-out);
}

.reader-close:active {
  transform: scale(0.96);
}

.reader-date {
  margin-bottom: 8px;
}

.reader-title {
  margin: 0 0 24px;
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.reader-body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 65ch;
  line-height: 1.6;
}

.reader-body :is(h2, h3) {
  margin: 0.75em 0 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.reader-body :is(ul, ol) {
  margin: 0;
  padding-left: 1.25em;
}

.reader-body blockquote {
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  color: var(--muted);
}

/* Hover só onde existe mouse de verdade */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-color: currentColor;
  }

  .nav a:hover,
  .filters a:hover {
    color: color-mix(in srgb, var(--text) 80%, var(--muted));
  }

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

  .index a.item-title:hover {
    color: color-mix(in srgb, var(--text) 80%, var(--muted));
  }

  .index a.item-title[aria-current="page"]:hover {
    color: var(--text);
  }

  .reader-close:hover {
    color: var(--text);
    background-color: rgba(255, 255, 255, 0.06);
  }
}

/* Sem espaço para lista e texto lado a lado: a raiz da aba (/notas) mostra
   a lista; um texto (/notas/<título>) mostra o texto, com o × de volta. */
@media (max-width: 1280px) {
  .page-reader {
    grid-template-columns: minmax(0, 640px);
  }

  .page-reader > .topo,
  .page-reader > .index,
  .page-reader > .reader {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
  }

  .page-reader:not(.is-raiz) .index,
  .page-reader.is-raiz .reader {
    display: none;
  }

  .page-reader.is-raiz .index {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .reader-close {
    display: grid;
  }

  .page-reader:not(.is-raiz) .reader-title {
    margin-right: 44px;
  }
}

/* Celular: a coluna não cabe ao lado do texto, então a navegação vira
   uma linha no topo, que rola para o lado se as abas não couberem. */
@media (max-width: 640px) {
  /* Navegação vira linha no topo: sem faixa reservada, o título só
     respira até o conteúdo */
  .shell {
    --top: 40px;
    --band: 0px;
    --logo: 96px;
    /* Em tela estreita o nome mais longo ("Playground", ~4,7em) tem que
       caber ao lado da gustaface: limita pela largura que sobra */
    --section-size: min(calc(var(--logo) / 3), calc((100vw - 2 * var(--edge) - var(--logo) - 24px) / 4.8));

    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .section-title {
    margin-bottom: 24px;
  }

  /* Só o texto fica sr-only; a gustaface continua visível. */
  .section-title > .section-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .nav {
    position: static;
    margin-inline: calc(var(--edge) * -1);
    padding: 2px var(--edge);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav ul {
    display: flex;
    gap: 20px;
    width: max-content;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .avatar {
    width: 96px;
    height: 96px;
    margin-bottom: 24px;
  }
}

/* Movimento reduzido: troca deslocamento e desenho por fade curto */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(panel),
  ::view-transition-new(reader),
  ::view-transition-new(topo),
  ::view-transition-new(filters),
  ::view-transition-new(index),
  :active-view-transition-type(mesma-aba)::view-transition-new(topo):only-child,
  :active-view-transition-type(mesma-aba)::view-transition-new(filters):only-child,
  :active-view-transition-type(mesma-aba)::view-transition-new(index):only-child {
    animation: fade 160ms ease 90ms both;
  }

  .reader-close:active {
    transform: none;
  }

  .annotation {
    animation: none;
    background-size: 100% 38%;
  }

  /* Gustaface: troca o tom com o fade de cor, sem giro nem piscada */
  .avatar-toggle:active {
    transform: none;
  }

  .avatar-toggle.is-trocando .gf-eye,
  [data-chegada] .topo .avatar .gf-ring,
  [data-chegada] .topo .avatar .gf-eye,
  .avatar-toggle[data-humor="tonto"] .gf {
    animation: none;
  }

  /* Humor só troca por fade: sem sobrancelha descendo nem X girando */
  .avatar .gf-brow,
  .avatar .gf-x {
    transform: none;
  }

  @keyframes fade {
    from {
      opacity: 0;
    }
  }
}