:root{
  --bg: #F4F1E8;
  --bg-panel: #ECE7DA;
  --bg-nav: rgba(244,241,232,0.85);
  --ink: #1B2027;
  --ink-soft: #545A66;
  --ink-faint: #626871;
  --accent: #3E6E58;
  --accent-strong: #2F5844;
  --accent-soft: #B7CFC1;
  --accent-wash: rgba(62,110,88,0.07);
  --line: #CBC4B0;
  --line-soft: #DDD7C6;
  --lift: 0 4px 14px rgba(27,32,39,0.10);
  --uline: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%206'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1%203.6C16%201.8%2031%204.9%2046%203.3%2062%201.7%2077%205%2096%203.5c8-.6%2015-.8%2023-.5'%20fill='none'%20stroke='%23B7CFC1'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --uline-hi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%206'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1%203.6C16%201.8%2031%204.9%2046%203.3%2062%201.7%2077%205%2096%203.5c8-.6%2015-.8%2023-.5'%20fill='none'%20stroke='%233E6E58'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --radius: 3px;
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --math: "STIX Two Text", "Times New Roman", serif;
}

:root[data-theme="dark"]{
  --bg: #15181D;
  --bg-panel: #1C2027;
  --bg-nav: rgba(21,24,29,0.85);
  --ink: #E9E5DA;
  --ink-soft: #A7ABB4;
  --ink-faint: #848991;
  --accent: #7FB49A;
  --accent-strong: #9CC7B1;
  --accent-soft: #3A5A4B;
  --accent-wash: rgba(127,180,154,0.08);
  --line: #333944;
  --line-soft: #262B33;
  --lift: 0 6px 20px rgba(0,0,0,0.28);
  --uline: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%206'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1%203.6C16%201.8%2031%204.9%2046%203.3%2062%201.7%2077%205%2096%203.5c8-.6%2015-.8%2023-.5'%20fill='none'%20stroke='%233A5A4B'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --uline-hi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%206'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1%203.6C16%201.8%2031%204.9%2046%203.3%2062%201.7%2077%205%2096%203.5c8-.6%2015-.8%2023-.5'%20fill='none'%20stroke='%237FB49A'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-contrast: more){
  :root{ --ink-soft: var(--ink); --ink-faint: #454B55; --line: #9A927C; }
  :root[data-theme="dark"]{ --ink-faint: #B3B8C0; --line: #59616E; }
}

*{ box-sizing: border-box; }

::selection{ background: var(--accent-soft); color: var(--ink); }

:root[data-lang="en"] .lang-pt{ display: none !important; }
:root:not([data-lang="en"]) .lang-en{ display: none !important; }

.skip-link{
  position: fixed;
  top: 0.6rem; left: 0.6rem;
  z-index: 80;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-250%);
}
.skip-link:focus{ transform: none; }

@keyframes focus-pop{ from{ outline-offset: 6px; outline-color: transparent; } }

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav-inner{
  max-width: var(--nav-w);
  margin: 0 auto;
  padding: 0.7rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.nav-brand{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-controls{
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ctrl-btn{
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.ctrl-btn:hover{ color: var(--accent); border-color: var(--accent); }
.ctrl-btn svg{ width: 13px; height: 13px; display: block; }

/* sigla do idioma-alvo (#lang-toggle): as duas letras ficam sempre no DOM,
   empilhadas, e o [data-lang] da raiz decide qual mostra, direto por CSS
   (não usa o display:none !important de .lang-pt/.lang-en, que é instantâneo
   e não dá pra fazer transição). As duas se movem na mesma direção, como um
   dígito de odômetro virando; sem cor nova, só opacidade e posição. */
.lt-stack{
  position: relative;
  display: inline-block;
  width: 2ch;
  height: 1em;
  overflow: hidden;
}
.lt-stack span{
  position: absolute;
  inset: 0;
  transition: transform .3s ease, opacity .3s ease;
}
:root:not([data-lang="en"]) .lt-en{ opacity: 1; transform: translateY(0); }
:root:not([data-lang="en"]) .lt-pt{ opacity: 0; transform: translateY(45%); }
:root[data-lang="en"] .lt-pt{ opacity: 1; transform: translateY(0); }
:root[data-lang="en"] .lt-en{ opacity: 0; transform: translateY(-45%); }

.hero{
  position: relative;
  border-bottom: 2.5px solid var(--ink);
}
.hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--ink);
}
.hero-inner{ max-width: 880px; margin: 0 auto; }

footer{
  position: relative;
  border-top: 2.5px solid var(--ink);
  margin-top: 3rem;
}
footer::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 5px;
  height: 1px;
  background: var(--ink);
}
.footer-inner{ max-width: 960px; margin: 0 auto; }

.to-top{
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 40;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 3px 7px 4px 6px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.to-top.show{ opacity: 1; visibility: visible; transform: none; }
.to-top:hover{ color: var(--accent); border-color: var(--accent); }

h1, h2, h3{ text-wrap: balance; }

@keyframes rise{ from{ opacity: 0; transform: translateY(12px); } }

:root[data-theme="dark"]{ scrollbar-color: var(--line) var(--bg); color-scheme: dark; }

/* 860px: ponto onde a nav de 6 links do index deixa de caber numa linha só */
@media (max-width: 860px){
  .ctrl-btn{
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.65rem;
  }
  .to-top{ width: 46px; height: 46px; }
}

/* hover fica preso após o toque em touchscreens, por isso exige ponteiro fino */
@media (hover: hover) and (pointer: fine){
  .card:hover{ transform: translateY(-2px); box-shadow: var(--lift); }
  .method:hover{ transform: translateY(-2px); box-shadow: var(--lift); border-left-width: 4px; }
  .method:hover .m-icon{ color: var(--accent); }
  .proj:hover .proj-media > .proj-shot,
  .proj-flow:hover .proj-media > .proj-shot{ transform: translateY(-2px); box-shadow: var(--lift); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

.eyebrow{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
}
.eyebrow::before{
  content: "";
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 1px;
  flex-shrink: 0;
}
/* animation: fica local em cada página (não aqui), senão vazaria pra max/projetos */
@keyframes wobble{ 30%{ transform: rotate(-9deg); } 60%{ transform: rotate(6deg); } 100%{ transform: rotate(0); } }
h1{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 1rem;
  letter-spacing: -0.012em;
}

main{ max-width: var(--main-w, 960px); margin: 0 auto; padding: 0 var(--main-pad, 1.5rem); }

.lede{ color: var(--ink-soft); }

h2::after{
  content: "";
  display: block;
  width: 100%;
  min-width: 72px;
  height: 7px;
  margin-top: 0.45rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%208'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2%205.5C18%203.2%2033%206.6%2049%204.4%2065%202.3%2079%206.2%2097%204.6c8-.7%2013-1.2%2021-.6'%20fill='none'%20stroke='%23000'%20stroke-width='2.7'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%208'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2%205.5C18%203.2%2033%206.6%2049%204.4%2065%202.3%2079%206.2%2097%204.6c8-.7%2013-1.2%2021-.6'%20fill='none'%20stroke='%23000'%20stroke-width='2.7'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

footer{ padding: 2.4rem 1.5rem 2.8rem; }

.fine-print{
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin: 0;
}

.see-also{
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.8rem;
}
.see-also a{ color: var(--ink-soft); text-decoration: none; }
.see-also a:hover{ color: var(--accent); }
.see-also a + a::before{ content: "·"; margin-right: 0.8rem; color: var(--ink-faint); }

#theme-toggle{ display: inline-grid; place-items: center; }
#theme-toggle svg{ grid-area: 1 / 1; transition: opacity .3s ease, transform .45s cubic-bezier(.22,.61,.36,1); }

/* não entra em 404.html, que tem body próprio */
body::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] body::before{ opacity: 0.04; }

/* =========================================================================
   ARQUIVO DE CAMPO · camada global (29/08/2026)
   Tokens de composição, largura de página, navegação global e primitivas
   documentais compartilhadas entre a home e /profissional. As páginas
   internas continuam com o layout antigo até serem repaginadas.
   ========================================================================= */

:root{
  --field-max: 1300px;
  --field-max-xl: 1560px;
  --nav-w: 1300px;
  --gut: clamp(1.15rem, 2.6vw, 2.4rem);
  --text-w: 66ch;
}
@media (min-width: 1700px){
  :root{ --field-max: var(--field-max-xl); --nav-w: var(--field-max-xl); }
}

/* a página é a folha; o texto tem largura própria */
.field{ width: 100%; max-width: var(--field-max); margin-inline: auto; padding-inline: var(--gut); }
.grid12{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.prose{ max-width: var(--text-w); }
.prose p{ margin: 0 0 1.05rem; }
.prose p:last-child{ margin-bottom: 0; }

/* metadata: mono só quando é dado, data, estado ou referência */
.meta{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
}
.meta-accent{ color: var(--accent); }
.rule-h{ border: 0; border-top: 1px solid var(--line); margin: 0; }

/* traço a caneta usado como marcação, nunca como preenchimento */
.pen{
  background-image: var(--uline-hi);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 5px;
  padding-bottom: 2px;
}

/* seta de leitura ("→ agora"), no lugar de botão de CTA */
.go{
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
  display: inline-block;
}
.go:hover{ border-bottom-color: var(--accent); }

/* ---------- navegação global ---------- */
.nav{
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.nav.scrolled{ border-bottom-color: var(--line-soft); }
.nav-brand{ letter-spacing: -0.01em; white-space: nowrap; }
.nav-brand .brand-short{ display: none; }
@media (max-width: 560px){
  .nav-brand .brand-full{ display: none; }
  .nav-brand .brand-short{ display: inline; }
}
.nav-links{
  display: flex;
  align-items: baseline;
  gap: 1.15rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.nav-links a{
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color: var(--accent); border-bottom-color: var(--accent-soft); }
.nav-links a.active,
.nav-links a[aria-current="page"]{ color: var(--accent); border-bottom-color: var(--accent); }
/* caminhos secundários: só existem dentro do menu aberto */
.nav-extra{ display: none; }
.nav-extra-label{ display: none; }
.ctrl-btn{
  letter-spacing: 0.04em;
  padding: 0.32rem 0.55rem;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.ctrl-btn:hover{ background: var(--accent-wash); }

/* o botão de menu só existe no layout compacto; o seletor precisa vencer o
   .ctrl-btn{display:inline-flex} que cada página ainda declara no <style> */
.nav .nav-menu-btn{ display: none; }
.nav-menu-btn span{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.nav-menu-btn svg{ width: 17px; height: 17px; grid-area: 1/1; }
.nav-menu-btn .menu-ic-close{ display: none; }
.nav-menu-btn[aria-expanded="true"] .menu-ic-open{ display: none; }
.nav-menu-btn[aria-expanded="true"] .menu-ic-close{ display: block; }

@media (max-width: 960px){
  html{ scroll-padding-top: 4.8rem; }
  .nav-inner{ gap: 0.9rem; position: relative; }
  .nav .nav-menu-btn{
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    padding: 0;
  }

  .nav-links{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 4.4rem);
    overflow-y: auto;
    background: var(--bg-nav);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--lift);
    padding: 0.3rem var(--gut) 0.8rem;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{
    padding: 0.95rem 0.1rem;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-extra{
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.1rem;
    padding-top: 0.9rem;
  }
  .nav-extra-label{
    display: block;
    width: 100%;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 0.35rem;
  }
  .nav-extra a{
    padding: 0.55rem 0.1rem;
    font-size: 0.84rem;
    border-bottom: none;
    color: var(--ink-faint);
  }
}

/* =========================================================================
   ARQUIVO DE CAMPO · camada de identidade visual (ETAPA 1, 01/09/2026)
   Guia completo: docs/DESIGN-GUIDE.md

   Tokens de paleta, tipografia, escala de tipo, espacamento e movimento.
   Sao a MESMA linguagem que a home (css/home.css) ja usa; aqui ficam
   nomeados e disponiveis para as paginas internas conforme forem
   repaginadas, uma por vez.

   NADA AQUI MUDA O QUE JA ESTA NO AR. Os primitivos --af-* sao inertes:
   so passam a valer quando <body class="af"> opta por eles (nenhuma pagina
   faz isso hoje). O tema antigo (:root acima, IBM Plex + #F4F1E8) continua
   sendo o que as paginas internas nao-repaginadas usam.

   "af" = Arquivo de Campo. Nao confundir com a utilitaria .field (largura
   de pagina): .field e um container, body.af e a identidade visual.

   Ordem de repaginacao: projetos . pesquisa/xai . ia . criacoes . sobre .
   profissional . cv . registro . max . agora . home (integracao final).
   ========================================================================= */

:root{
  /* --- paleta, tema claro: papel quente / carvao / verde-tinta --- */
  --af-paper:         #F1EEE5;  /* superficie principal (marfim quente) */
  --af-paper-cool:    #E9EDEA;  /* variacao fria: folha de laboratorio */
  --af-paper-mineral: #E6E2D8;  /* variacao mineral: arquivo, ficha */
  --af-panel:         #E4E0D5;  /* objeto/painel sobre o papel */
  --af-plate:         #191B18;  /* placa escura: cena em negativo */
  --af-on-plate:      #EFEBDF;  /* texto sobre a placa */
  --af-ink:           #191B18;  /* tinta principal (quase-preto quente) */
  --af-ink-soft:      #4C5049;  /* texto secundario */
  --af-ink-faint:     #5A5E55;  /* metadata, legenda */
  --af-line:          #CCC6B5;  /* borda real: folha, ficha, foto, painel */
  --af-line-soft:     #DED9CA;  /* filete discreto */
  --af-accent:        #285A43;  /* verde de marcacao (tinta): traco, sublinhado, foco, carimbo. Nunca preenchimento de card/botao */
  --af-accent-strong: #1D442F;
  --af-accent-soft:   #BBD0C2;
  --af-accent-wash:   rgba(40,90,67,0.08);
  /* secundarias: so quando o conteudo da pagina pedir, nunca por decoracao */
  --af-rust:          #96513E;  /* ferrugem: correcao, erro identificado */
  --af-tech-blue:     #3E5F72;  /* azul tecnico: diagrama, medicao */
  --af-marker:        #D8BB58;  /* marca-texto suave */
  /* sombra = profundidade fisica (foto levantando, folha sobre a mesa) */
  --af-lift:   0 10px 34px rgba(25,27,24,0.12);
  --af-shadow: 0 2px 4px rgba(25,27,24,0.05), 0 14px 40px rgba(25,27,24,0.10);

  /* --- tipografia: tres vozes com funcao --- */
  --af-display: "Newsreader Display", "Newsreader", Georgia, "Times New Roman", serif;         /* titulos editoriais, perguntas, momentos pessoais */
  --af-serif:   "Newsreader", Georgia, "Times New Roman", serif;                               /* narrativa curta, citacao */
  --af-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  /* leitura, navegacao, interface */
  --af-mono:    "IBM Plex Mono", ui-monospace, monospace;                                      /* dado, data, estado, arquivo, medida, label tecnico */
  --af-hand:    "Caveat", "Segoe Script", cursive;                                             /* intervencao manuscrita, rara */

  /* --- escala de tipo (a mesma da home) --- */
  --af-fs-cover:  clamp(2.65rem, 5.6vw, 4.6rem);   /* capa de pagina */
  --af-fs-scene:  clamp(2.25rem, 4.2vw, 3.55rem);  /* titulo de capitulo */
  --af-fs-title:  clamp(1.9rem, 2.9vw, 2.6rem);    /* titulo de bloco */
  --af-fs-intro:  clamp(1.24rem, 1.7vw, 1.6rem);   /* introducao curta / lede */
  --af-fs-body:   1.0625rem;
  --af-fs-body-l: 1.1875rem;
  --af-fs-cap:    0.8125rem;                        /* legenda */
  --af-fs-meta:   0.6875rem;                        /* metadata mono */
  --af-lh:        1.62;                             /* line-height de leitura */

  /* --- espacamento: escala pequena. "espaco cria relacao, nao vazio" --- */
  --af-space-3xs: 0.25rem;
  --af-space-2xs: 0.5rem;
  --af-space-xs:  0.75rem;
  --af-space-s:   1rem;
  --af-space-m:   1.5rem;
  --af-space-l:   2.5rem;
  --af-space-xl:  4rem;
  --af-space-2xl: 6rem;    /* respiro entre capitulos */

  /* --- movimento: primitivas, nao decoracao --- */
  --af-dur-fast: 0.15s;    /* hover, foco, toque */
  --af-dur:      0.25s;    /* troca de material */
  --af-dur-slow: 0.55s;    /* traco desenhando, folha assentando */
  --af-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"]{
  /* versao noturna do mesmo universo: grafite quente, sem preto puro nem neon */
  --af-paper:         #171916;
  --af-paper-cool:    #1B201F;
  --af-paper-mineral: #211F1A;
  --af-panel:         #22241F;
  --af-plate:         #0D0F0D;
  --af-on-plate:      #ECE8DC;
  --af-ink:           #ECE8DC;
  --af-ink-soft:      #ADAFA5;
  --af-ink-faint:     #93958C;
  --af-line:          #34372F;
  --af-line-soft:     #262922;
  --af-accent:        #84B59A;
  --af-accent-strong: #A6CDB6;
  --af-accent-soft:   #2E4A3B;
  --af-accent-wash:   rgba(132,181,154,0.09);
  --af-rust:          #C67C63;
  --af-tech-blue:     #6E9DB5;
  --af-marker:        #C6A94E;
  --af-lift:   0 10px 34px rgba(0,0,0,0.42);
  --af-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 16px 42px rgba(0,0,0,0.38);
}

/* opt-in: so as paginas repaginadas recebem class="af" no <body>.
   remapeia os apelidos herdados (--bg, --ink, --serif...) para a
   identidade nova, sem tocar nas paginas que ainda usam o tema antigo.
   O layout (nav, footer, .field, .grid12) ja e global em css/base.css. */
body.af{
  --bg:            var(--af-paper);
  --bg-panel:      var(--af-panel);
  --bg-nav:        var(--af-paper);
  --ink:           var(--af-ink);
  --ink-soft:      var(--af-ink-soft);
  --ink-faint:     var(--af-ink-faint);
  --line:          var(--af-line);
  --line-soft:     var(--af-line-soft);
  --accent:        var(--af-accent);
  --accent-strong: var(--af-accent-strong);
  --accent-soft:   var(--af-accent-soft);
  --accent-wash:   var(--af-accent-wash);
  --lift:          var(--af-lift);
  --shadow:        var(--af-shadow);
  --display:       var(--af-display);
  --serif:         var(--af-serif);
  --sans:          var(--af-sans);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--af-fs-body);
  line-height: var(--af-lh);
}
/* a textura de papel global sai: a materialidade vem da composicao de cada cena */
body.af::before{ display: none; }

@media (prefers-contrast: more){
  body.af{ --ink-soft: var(--ink); --ink-faint: #3B3F38; --line: #9C9682; }
  :root[data-theme="dark"] body.af{ --ink-faint: #C4C6BC; --line: #5B5F55; }
}

@media print{
  body.af{
    --bg: #fff; --bg-panel: #fff;
    --ink: #000; --ink-soft: #333; --ink-faint: #555;
    --accent: #2F5844; --accent-strong: #2F5844; --accent-soft: #999;
    --accent-wash: transparent; --line: #999; --line-soft: #ccc;
  }
}