/* ==========================================================================
   HOME V2 · "publicação pessoal"
   A home deixa de ser uma interface inspirada em arquivo e passa a ser uma
   publicação feita de fotografias, telas, documentos e experimentos reais.
   Quatro cenas, quatro materiais. Só esta página carrega este arquivo.
   ========================================================================== */

/* ---------- 1. materiais e tinta ---------------------------------------- */

body.home{
  --paper:         #F1EEE5;
  --paper-cool:    #E9EDEA;
  --paper-mineral: #E6E2D8;
  --plate:         #191B18;
  --plate-deep:    #101210;
  --on-plate:      #EFEBDF;
  --on-plate-2:    #A8AC9F;
  --green-plate:   #8FBFA4;
  --doc-paper:     #EDE9DE;
  --doc-ink:       #191B18;
  --doc-rule:      #C9C3B2;
  --probe-paper:   #E5E4D9;
  --tech-blue:     #3E5F72;
  --rust:          #96513E;
  --marker:        #D8BB58;

  --bg:            var(--paper);
  --bg-panel:      #E4E0D5;
  --bg-nav:        var(--paper);
  --ink:           #191B18;
  --ink-soft:      #4C5049;
  --ink-faint:     #5A5E55;
  --accent:        var(--ink-green);
  --accent-strong: var(--ink-green-strong);
  --accent-soft:   #BBD0C2;
  /* o verde de tinta escura: usado dentro de qualquer objeto de papel
     claro (fichas, notas, o dossiê), onde --accent seguiria o tema e
     ficaria claro demais. Vale nos dois temas porque o papel é o mesmo. */
  --ink-green:        #285A43;
  --ink-green-strong: #1D442F;
  --accent-wash:   rgba(40,90,67,0.08);
  --line:          #CCC6B5;
  --line-soft:     #DED9CA;
  --lift:          0 10px 34px rgba(25,27,24,0.12);
  --shadow:        0 2px 4px rgba(25,27,24,0.05), 0 14px 40px rgba(25,27,24,0.10);
  --phone-body:    #1E211D;
  --phone-detail:  rgba(255,255,255,0.16);
  /* a ficha grafite do Norte e a base sob os aparelhos: documento em
     negativo nos dois temas, para virar o foco da cena clara */
  --norte-doc-bg:      #191B18;
  --norte-doc-ink:     #EFEBDF;
  --norte-doc-faint:   #A8AC9F;
  --norte-doc-line:    rgba(236,232,220,0.14);
  --norte-doc-accent:  #8FBFA4;
  --norte-plinth-bg:   #191B18;
  --norte-plinth-op:   0.4;
  --norte-diagram-ink: #4C5049;
  /* ver bloco escuro para o papel de cada uma; parity só para não quebrar
     se o tema claro voltar */
  --norte-key:         #8C3B49;
  --norte-ground:      #E4E0D5;
  --norte-panel:       #191B18;

  /* dois níveis de sombra para os objetos soltos (nota, foto, ficha):
     pousado na mesa e levantado. Todo objeto solto usa um destes dois. */
  --sh-rest: 0 1px 2px rgba(25,27,24,0.10), 0 14px 32px -14px rgba(25,27,24,0.30);
  --sh-lift: 0 2px 5px rgba(25,27,24,0.16), 0 26px 50px -20px rgba(25,27,24,0.46);
  /* fita adesiva: um único material translúcido neutro em toda a home */
  --tape-fill: rgba(196,190,158,0.40);
  --tape-edge: rgba(120,116,90,0.22);

  --display: "Newsreader Display", "Newsreader", Georgia, "Times New Roman", serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --field-w: 1340px;
  --fs-cover: clamp(2.65rem, 5.6vw, 4.6rem);
  --fs-scene: clamp(2.25rem, 4.2vw, 3.55rem);
  --fs-title: clamp(1.9rem, 2.9vw, 2.6rem);
  --fs-intro: clamp(1.24rem, 1.7vw, 1.6rem);
  --fs-body:  1.0625rem;
  --fs-body-l:1.1875rem;
  --fs-cap:   0.8125rem;
  --fs-meta:  0.6875rem;
}

:root[data-theme="dark"] body.home{
  --paper:         #171916;
  --paper-cool:    #1B201F;
  --paper-mineral: #1E1C17;
  --plate:         #0D0F0D;
  --plate-deep:    #0E100D;
  --on-plate:      #ECE8DC;
  --on-plate-2:    #A9AAA1;
  --green-plate:   #84B59A;
  --doc-paper:     #DCD7C9;
  --doc-ink:       #1B1D19;
  --doc-rule:      #ADA795;
  --probe-paper:   #D9D8CC;

  --bg:            var(--paper);
  --bg-panel:      #22241F;
  --bg-nav:        var(--paper);
  --ink:           #ECE8DC;
  --ink-soft:      #ADAFA5;
  --ink-faint:     #93958C;
  --accent:        #84B59A;
  --accent-strong: #A6CDB6;
  --accent-soft:   #2E4A3B;
  --accent-wash:   rgba(132,181,154,0.09);
  --line:          #34372F;
  --line-soft:     #262922;
  --lift:          0 10px 34px rgba(0,0,0,0.42);
  --shadow:        0 2px 4px rgba(0,0,0,0.3), 0 16px 42px rgba(0,0,0,0.38);
  --phone-body:    #3E423A;
  --phone-detail:  rgba(255,255,255,0.22);
  --norte-doc-bg:      #24261F;
  --norte-doc-ink:     #ECE8DC;
  --norte-doc-faint:   #9EA096;
  --norte-doc-line:    rgba(236,232,220,0.12);
  --norte-doc-accent:  #84B59A;
  --norte-plinth-bg:   #000000;
  --norte-plinth-op:   0.5;
  --norte-diagram-ink: #9BA0A3;
  /* tinta de identidade só do bloco do Norte (bordô); o resto da cena e o
     painel dos Fundamentos seguem em --norte-doc-accent até uma rodada
     de paleta global. --norte-ground: chão grafite neutro e escuro, mais
     fundo que a cena; --norte-panel: a ficha "o que ele resolve", folha
     um tom acima do chão */
  --norte-key:         #A65563;
  --norte-ground:      #141413;
  --norte-panel:       #201E1D;

  --sh-rest: 0 1px 2px rgba(0,0,0,0.38), 0 16px 36px -14px rgba(0,0,0,0.60);
  --sh-lift: 0 2px 6px rgba(0,0,0,0.44), 0 28px 54px -20px rgba(0,0,0,0.72);
  --tape-fill: rgba(214,218,192,0.10);
  --tape-edge: rgba(255,255,255,0.08);
}

@media (prefers-contrast: more){
  body.home{ --ink-soft: var(--ink); --ink-faint: #3B3F38; --line: #9C9682; --on-plate-2: #D2D4C9; --norte-key: #8C3B49; }
  :root[data-theme="dark"] body.home{ --ink-faint: #C4C6BC; --line: #5B5F55; --norte-key: #C87883; }
}

/* um grão de papel muito baixo, comum a todas as superfícies claras, para
   elas não parecerem chapadas ao lado da prancha da capa (que tem o seu
   próprio, mais forte). Sobre a prancha escura o multiply não registra. */
body.home::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch' result='fine'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.32' numOctaves='2' seed='3' stitchTiles='stitch' result='fiber'/%3E%3CfeBlend in='fine' in2='fiber' mode='multiply' result='blended'/%3E%3CfeColorMatrix in='blended' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body.home::before{ opacity: 0.05; mix-blend-mode: screen; }
@media print{ body.home::before{ display: none; } }

body.home{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  overflow-x: clip;
}

/* ---------- 2. a régua da publicação ------------------------------------ */

main.canvas{ max-width: none; margin: 0; padding: 0; }

.scene{ position: relative; }
.scene-cover{ background: var(--paper); z-index: 3; }
.scene-build{ background: var(--paper-mineral); z-index: 2; }
/* chão da cena de projetos: grafite neutro, sem o puxado quente que lia como verde */
:root[data-theme="dark"] .scene-build{ --paper-mineral: #1C1C1E; }
.scene-plate{ background: var(--plate); color: var(--on-plate); z-index: 1; }
/* pesquisa: o chão sai do quase-preto para um azul-noite bem escuro, ecoando
   a folha de laboratório da página /pesquisa sem virar um tema fechado */
:root[data-theme="dark"] .scene-plate{ background: #0B0F1C; }
/* dossiê profissional: uma folha de documento pousada num chão grafite,
   entre a pesquisa e a cena pessoal. Alta rigidez, quase sem movimento. */
.scene-doc { background: var(--paper-cool); z-index: 1; }
:root[data-theme="dark"] .scene-doc{ background: #18171B; }
.scene-rest { background: var(--paper-cool); z-index: 0; }
/* o chão da última cena sai do cinza esverdeado para um grafite neutro
   escuro; os cards que pousam nele são um degrau mais claro */
:root[data-theme="dark"] .scene-rest{ background: #141418; }

/* no escuro as quatro superfícies ficam todas em torno do quase-preto e as
   costuras entre cenas somem. Um filete claríssimo no alto de cada cena
   devolve a virada de página sem acender uma linha na versão clara. */
:root[data-theme="dark"] .scene + .scene{ border-top: 1px solid rgba(236,232,220,0.06); }

/* número de folha: um fio condutor discreto entre cenas que têm layouts
   bem diferentes. Alinhado à margem direita do campo, mono, quase apagado. */
.scene-fol{
  position: absolute;
  top: clamp(3.6rem, 6vw, 6.2rem);
  right: max(1.5rem, calc((100% - var(--field-w)) / 2));
  z-index: 4;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  pointer-events: none;
}
.scene-cover .scene-fol{ color: var(--on-plate-2); }
.scene-plate .scene-fol{ color: var(--on-plate-2); }
@media (max-width: 1180px){ .scene-fol{ right: 1.5rem; } }
@media (max-width: 900px){ .scene-fol{ display: none; } }

/* grade única: 12 colunas úteis + duas margens que podem ser invadidas */
.stage{
  --side: max(0px, calc((100% - var(--field-w)) / 2));
  display: grid;
  grid-template-columns:
    [bleed-start] var(--side)
    [field-start] repeat(12, [c] minmax(0, 1fr))
    [field-end] var(--side) [bleed-end];
  column-gap: var(--gut);
  align-items: start;
}
@media (min-width: 1700px){
  body.home{ --field-w: 1500px; --fs-cover: clamp(4.6rem, 4.1vw, 5.5rem); --fs-scene: clamp(3.55rem, 3.2vw, 4.2rem); }
}

.h-prose{ max-width: 60ch; }
.h-prose p{ margin: 0 0 1.05em; }
.h-prose p:last-child{ margin-bottom: 0; }

/* mono é dado, data, estado, arquivo. Nunca "tecnologia". */
.dat{
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
}
.scene-plate .dat{ color: var(--on-plate-2); }

.cap{
  font-family: var(--sans);
  font-size: var(--fs-cap);
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 0.6rem 0 0;
}
.scene-plate .cap{ color: var(--on-plate-2); }

/* verde é marcação, não cor de link */
.h-prose a,
.h-lede a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .18s ease, color .18s ease;
}
.h-prose a:hover,
.h-lede a:hover{ color: var(--accent); border-bottom-color: var(--accent); }

.go2{
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease, gap .18s ease;
}
.go2::before{ content: "→"; color: var(--accent); font-family: var(--mono); font-size: 0.85em; line-height: 1; transform: translateY(0.02em); }
.go2:hover{ color: var(--accent); border-bottom-color: var(--accent); gap: 0.62rem; }
.scene-plate .go2{ color: var(--on-plate); border-bottom-color: rgba(236,232,220,0.28); }
.scene-plate .go2::before{ color: var(--green-plate); }
.scene-plate .go2:hover{ color: var(--green-plate); border-bottom-color: var(--green-plate); }

/* traço de marcação, o único gesto "à mão" que sobra. Duas passadas de
   espessura diferente, ligeiramente deslocadas, leem como pressão de caneta */
body.home .pen{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2013'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%208C26%204%2052%2010.5%2084%206.6C116%202.7%20150%209.4%20197%205.2'%20fill='none'%20stroke='%23285A43'%20stroke-width='3.6'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%2010.4C31%207.6%2058%2011.4%2092%208.2C124%205.2%20158%2010%20195%208.6'%20fill='none'%20stroke='%23285A43'%20stroke-width='1.9'%20stroke-linecap='round'%20opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.36em;
  padding-bottom: 0.06em;
}
.scene-plate .pen{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2013'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%208C26%204%2052%2010.5%2084%206.6C116%202.7%20150%209.4%20197%205.2'%20fill='none'%20stroke='%238FBFA4'%20stroke-width='3.6'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%2010.4C31%207.6%2058%2011.4%2092%208.2C124%205.2%20158%2010%20195%208.6'%20fill='none'%20stroke='%238FBFA4'%20stroke-width='1.9'%20stroke-linecap='round'%20opacity='0.5'/%3E%3C/svg%3E");
}
/* o traço se desenha uma vez ao entrar em viewport (JS arma .pen-arm só
   fora do reduced-motion; sem JS ou com reduced-motion, já nasce inteiro) */
.ask.pen-arm .pen{
  background-size: 0% 0.36em;
  transition: background-size .78s cubic-bezier(.62,.04,.29,1);
}
.ask.pen-arm.pen-drawn .pen{ background-size: 100% 0.36em; }

/* ---------- 3. cabeçalho ------------------------------------------------ */

body.home .nav{
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color .38s ease, border-color .38s ease, padding .38s ease, -webkit-backdrop-filter .38s ease, backdrop-filter .38s ease;
}
body.home .nav-inner{
  max-width: var(--field-w);
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  gap: 1.6rem;
  transition: padding .3s ease;
}
body.home .nav.scrolled{
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-bottom-color: var(--line-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.home .nav.scrolled{ background: var(--paper); }
}
body.home .nav.scrolled .nav-inner{ padding-top: 0.62rem; padding-bottom: 0.62rem; }

body.home .nav-brand{
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body.home .nav-brand .nb-slash{ color: var(--accent); }
body.home .nav-brand .nb-year{ color: var(--ink-faint); }

body.home .nav-links{
  font-family: var(--sans);
  font-size: 0.94rem;
  letter-spacing: 0;
  gap: 1.5rem;
}
body.home .nav-links a{ color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; }
body.home .nav-links a:hover{ color: var(--ink); border-bottom-color: var(--ink); }
body.home .nav-links a.active,
body.home .nav-links a[aria-current="page"]{ color: var(--accent); border-bottom-color: var(--accent); }
body.home .nav-extra-label{ font-family: var(--mono); }
body.home .ctrl-btn{ font-size: 0.7rem; border-color: var(--line); }

/* a capa (CENA 1) é sempre a prancha mais escura do site, nos dois temas;
   enquanto a nav não rolou e está transparente sobre ela, precisa dos
   tokens claros da prancha nos dois temas, não só no escuro. */
body.home .nav:not(.scrolled) .nav-brand{ color: var(--on-plate); }
body.home .nav:not(.scrolled) .nav-brand .nb-year{ color: var(--on-plate-2); }
body.home .nav:not(.scrolled) .nav-links a{ color: var(--on-plate-2); }
body.home .nav:not(.scrolled) .nav-links a:hover{ color: var(--on-plate); border-bottom-color: var(--on-plate); }
body.home .nav:not(.scrolled) .nav-links a.active,
body.home .nav:not(.scrolled) .nav-links a[aria-current="page"]{ color: var(--green-plate); border-bottom-color: var(--green-plate); }
body.home .nav:not(.scrolled) .ctrl-btn{ color: var(--on-plate); border-color: rgba(239,235,223,0.35); }
body.home .nav:not(.scrolled) .ctrl-btn:hover{ color: var(--green-plate); border-color: var(--green-plate); }

@media (max-width: 960px){
  body.home .nav.scrolled,
  body.home .nav-links{ background: var(--paper); }
  body.home .nav-links{ border-bottom-color: var(--line); box-shadow: var(--shadow); }
}

/* ---------- 4. CENA 1 · a capa ------------------------------------------ */
/* A capa é uma folha de rosto: nome, uma linha de apresentação, um convite
   discreto para descer. Sem colagem, sem retrato, sem ficha do "agora". É
   sempre a prancha mais escura do site, pra abrir a publicação com silêncio
   antes de a página clarear na cena seguinte (a bancada). O material dela é
   um campo de atenção (ver js/hero-attention.js): patches latentes que se
   organizam em torno de uma cabeça de atenção presa ao ponteiro. O nome
   ancora à esquerda; a superfície respira à direita, que é onde a query
   passa a maior parte do tempo. */
.scene-cover{
  background:
    radial-gradient(circle at 74% 48%,
      color-mix(in srgb, var(--green-plate) 4%, transparent),
      transparent 32%),
    var(--plate-deep);
  color: var(--on-plate);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* grão muito baixo, só nesta prancha; a textura global do body (bloco 1)
   segue suspensa aqui. Sempre a variante clara sobre fundo escuro
   (screen), já que a capa não muda mais de material com o tema. */
.scene-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch' result='fine'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.32' numOctaves='2' seed='3' stitchTiles='stitch' result='fiber'/%3E%3CfeBlend in='fine' in2='fiber' mode='multiply' result='blended'/%3E%3CfeColorMatrix in='blended' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* o campo de atenção: canvas 2D de fundo (js/hero-attention.js). Sem
   contexto 2D o script sai calado e sobra só o degradê que a .scene-cover
   já pinta. */
.cover-material{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* véu de leitura direcional: escurece a coluna do nome e deixa a direita
   aberta. Não é uma caixa atrás do texto, é um degradê de câmera, mais um
   fecho suave nas bordas de cima e de baixo. */
.hero-mask{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--plate-deep) 94%, transparent) 0%,
      color-mix(in srgb, var(--plate-deep) 82%, transparent) 18%,
      color-mix(in srgb, var(--plate-deep) 46%, transparent) 36%,
      color-mix(in srgb, var(--plate-deep) 12%, transparent) 54%,
      transparent 68%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--plate-deep) 40%, transparent) 0%,
      transparent 20%,
      transparent 72%,
      color-mix(in srgb, var(--plate-deep) 55%, transparent) 100%);
}

/* nome + linha + apresentação, ancorados à esquerda sobre a coluna coberta
   pelo véu. */
.cover-stage{
  position: relative;
  z-index: 3;
  padding-block: clamp(4rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem);
  justify-items: start;
}

.cover-copy{
  grid-column: field-start / c 9;
  display: block;
}

.hero-min-name{
  font-family: var(--display);
  font-weight: 440;
  font-size: var(--fs-cover);
  line-height: 0.9;
  letter-spacing: -0.032em;
  max-width: 9ch;
  margin: 0;
  color: var(--on-plate);
}
.hero-min-name .hmn-2{ display: block; padding-left: 0.03em; }

/* traço curto na cor de identidade, entre o nome e a linha: uma marca, não
   um separador de seção. Se desenha da esquerda na entrada. */
.cover-rule{
  display: block;
  width: 48px;
  height: 1px;
  margin-top: clamp(1.7rem, 4vh, 2.5rem);
  background: color-mix(in srgb, var(--green-plate) 92%, transparent);
  transform-origin: left;
}

.hero-min-lede{
  font-family: var(--sans);
  font-size: var(--fs-intro);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.011em;
  color: var(--on-plate-2);
  max-width: 34ch;
  margin: clamp(1.3rem, 3vh, 2rem) 0 0;
}

/* rótulo apagado da operação, ancorado na borda direita: a cena está
   desenhando query/key/attention, e o site sempre nomeia o mecanismo que
   mostra. Mono porque é dado, não enfeite. */
.attn-label{
  position: absolute;
  top: 42%;
  right: clamp(1.5rem, 4.5vw, 4.4rem);
  z-index: 3;
  transform: translateY(-50%);
  margin: 0;
  padding-left: 0.85rem;
  pointer-events: none;
}
.attn-label::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 42px;
  background: color-mix(in srgb, var(--green-plate) 26%, transparent);
}
.attn-label span{
  display: block;
  font-family: var(--mono);
  font-size: 0.48rem;
  line-height: 2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-plate) 17%, transparent);
}

/* convite discreto para descer: uma palavra e um fio com um pulso que
   escorre. Centralizado no pé da dobra. */
.hero-min-scroll{
  position: absolute;
  left: 50%;
  bottom: clamp(1.7rem, 4vw, 2.8rem);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-plate-2);
  text-decoration: none;
  transition: color .22s ease;
}
.hero-min-scroll:hover,
.hero-min-scroll:focus-visible{ color: var(--green-plate); }
.hms-label{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.hms-track{
  position: relative;
  width: 1px;
  height: 3rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--on-plate) 12%, transparent);
}
.hms-track::after{
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--green-plate) 74%, transparent);
  animation: hms-pulse 2.8s ease-in-out 1.3s infinite;
}
@keyframes hms-pulse{
  0%        { transform: translateY(0); }
  72%, 100% { transform: translateY(84px); }
}

/* entrada: a página se revela, não "anima". Opacity + um leve translateY
   + um leve blur indo a zero, nunca escondido de vez (o *{animation:none}
   do reduced-motion, em base.css, já cobre o caso sem movimento). Onde a
   entrada parte de um estado não-visível (o traço, os rótulos), o estado
   base é o visível e o keyframe só tem o "from", pra o reduced-motion
   pousar no lugar certo. */
@keyframes hero-in{
  from{ opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to  { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes cover-rule-in{ from{ transform: scaleX(0); } }
@keyframes hero-quiet{ from{ opacity: 0; } }

body.home .nav{ animation: hero-in .8s cubic-bezier(.22,.61,.36,1) both; }
.hero-min-name{ animation: hero-in .9s cubic-bezier(.22,.61,.36,1) .12s both; }
.hero-min-lede{ animation: hero-in .9s cubic-bezier(.22,.61,.36,1) .34s both; }
.cover-rule{ animation: cover-rule-in .7s cubic-bezier(.22,.61,.36,1) .58s both; }
.attn-label{ animation: hero-quiet .8s ease 1s both; }
.hero-min-scroll{ animation: hero-in .8s cubic-bezier(.22,.61,.36,1) .62s both; }

@media (max-width: 900px){
  .cover-stage{ padding-block: clamp(6rem, 18vw, 7.5rem) clamp(3rem, 8vw, 4rem); justify-items: center; }
  .cover-copy{ text-align: center; }
  .hero-min-name{ margin-inline: auto; }
  .cover-rule{ margin-inline: auto; }
  .hero-min-lede{ max-width: 36ch; margin-inline: auto; }
  .attn-label{ display: none; }
  .hero-min-scroll{ bottom: 1.4rem; }
}
@media (max-width: 480px){
  .hero-min-name{ letter-spacing: -0.02em; }
}

/* ---------- 5. CENA 2 · coisas que construo ----------------------------- */

.build{ padding-top: clamp(3.2rem, 5.4vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); row-gap: clamp(1.5rem, 2.4vw, 2.3rem); }

.scene-lead{
  font-family: var(--display);
  font-weight: 440;
  font-size: var(--fs-scene);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.build .scene-lead{ grid-column: c 1 / c 9; grid-row: 1; max-width: 18ch; }

/* — Norte: um spread editorial. O nome ocupa o alto à esquerda em corpo de
   capa, com um risco curto da cor de identidade sob o "N"; uma linha de
   lede; ao centro as três telas reais em profundidade sobre uma base escura,
   com a bússola a traço apagada subindo por trás; à direita a ficha do que
   o app resolve. Nada de mockup de loja: os moldes são desenhados no CSS do
   próprio site. — */
.norte-head{ grid-column: c 1 / c 9; grid-row: 1; position: relative; z-index: 1; }
/* respiro entre a metadata e o corpo de capa: sem ele as hastes altas do
   Newsreader Display sobem por cima da linha mono */
.norte-head > .dat{ margin-bottom: clamp(0.9rem, 1.8vw, 1.45rem); }
.norte-title{
  margin: 0 0 clamp(1.3rem, 2.6vw, 2rem);
}
.norte-name{
  display: inline-block;
  font-family: var(--display);
  font-weight: 460;
  font-size: clamp(4.2rem, 9.5vw, 8.5rem);
  line-height: 0.84;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.norte-tick{
  display: block;
  width: clamp(1.1rem, 2.6vw, 2.1rem);
  height: 3px;
  margin: clamp(0.32rem, 0.9vw, 0.55rem) 0 0 0.12rem;
  border-radius: 2px;
  background: var(--norte-key);
}
.h3-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
}
.norte-lede{
  font-family: var(--sans);
  font-size: var(--fs-body-l);
  line-height: 1.52;
  color: var(--ink);
  max-width: 44ch;
  margin: 0;
}

/* palco: contexto de posicionamento para a base e o diagrama */
.norte-stage{
  grid-column: c 1 / c 8;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin-top: clamp(0.8rem, 1.8vw, 1.4rem);
  padding: clamp(1rem, 2.2vw, 1.9rem) 0 clamp(1.2rem, 2.4vw, 1.8rem);
}

/* chão só do bloco do Norte: grafite com um traço do bordô, ocupando as
   duas primeiras linhas do grid da cena (cabeçalho + palco/ficha). Os
   Fundamentos, na linha 3, seguem no chão da cena. A borda de baixo some
   num fade para não deixar emenda dura no meio da cena. */
.norte-bg{
  grid-column: bleed-start / bleed-end;
  grid-row: 1 / 3;
  align-self: stretch;
  z-index: 0;
  background: var(--norte-ground);
  -webkit-mask-image: linear-gradient(transparent, #000 56px, #000 calc(100% - 104px), transparent);
          mask-image: linear-gradient(transparent, #000 56px, #000 calc(100% - 104px), transparent);
  pointer-events: none;
}

/* desenho técnico quase impresso no fundo: círculos concêntricos, cruz de
   orientação, um arco de ciclo com ponta e algumas marcas. Contraste baixo,
   sem HUD nem interface. */
.norte-diagram{
  position: absolute;
  top: clamp(-352px, -24vw, -206px);
  right: clamp(-6px, 0.6vw, 26px);
  left: auto;
  width: min(216px, 31%);
  transform: none;
  color: var(--norte-diagram-ink);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}
.norte-diagram svg{ display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .norte-diagram{ opacity: 0.13; }

/* base sob os aparelhos: não é pedra nem card, é um adensamento de sombra
   ancorado na base do grupo. Só impede que as telas pareçam flutuar. */
.norte-phones::after{
  content: "";
  position: absolute;
  left: 4%;
  right: 12%;
  bottom: -8px;
  height: clamp(44px, 6vw, 72px);
  background: radial-gradient(62% 100% at 45% 100%, var(--norte-plinth-bg) 0%, rgba(0,0,0,0) 72%);
  opacity: var(--norte-plinth-op, 0.42);
  transform: rotate(-0.6deg);
  z-index: -1;
  pointer-events: none;
}

/* três telas reais, moldura desenhada no CSS. A do disponível é a
   protagonista: maior, à frente, mais contraste. Previsão atrás e acima,
   deslocada. Assinaturas mais ao fundo, completando a composição. */
.norte-phones{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  margin-left: clamp(0px, 2.5vw, 32px);
  perspective: 1500px;
  transform-style: preserve-3d;
}
.phone{
  margin: 0;
  position: relative;
  transform: var(--base);
  transform-origin: bottom center;
  cursor: pointer;
}

/* selecionar uma tela (clique/toque, hover ou teclado) a tira de trás e
   mostra ela inteira, de frente, acima das outras. As não escolhidas recuam
   de verdade: encolhem, descem e desfocam, para não taparem nada. Vale para
   as três. O clique/toque trava a seleção (classe .is-front via JS); hover e
   foco por teclado dão a mesma prévia sem travar. */
.norte-phones.has-front .phone:not(.is-front){
  transform: var(--base) translateY(15px) scale(0.82);
  filter: blur(2px) brightness(0.7) saturate(0.68);
  opacity: 0.4;
}
.norte-phones:has(.phone:focus-visible) .phone:not(:focus-visible){
  transform: var(--base) translateY(15px) scale(0.82);
  filter: blur(2px) brightness(0.7) saturate(0.68);
  opacity: 0.4;
}
@media (hover: hover) and (pointer: fine){
  .norte-phones:hover .phone:not(:hover){
    transform: var(--base) translateY(15px) scale(0.82);
    filter: blur(2px) brightness(0.7) saturate(0.68);
    opacity: 0.4;
  }
}
.norte-phones .phone.is-front,
.norte-phones .phone:focus-visible,
.norte-phones .phone:hover{
  transform: rotateY(0deg) translateY(-8px) scale(var(--sel-scale, 1.1));
  filter: none;
  opacity: 1;
  z-index: 20;
  outline: none;
}
.norte-phones .phone:hover .phone-frame{ box-shadow: 0 0 0 1px var(--line), var(--sh-lift); }
.norte-phones .phone.is-front .phone-frame,
.norte-phones .phone:focus-visible .phone-frame{ box-shadow: 0 0 0 2px var(--norte-key), var(--sh-lift); }
.phone-frame{
  display: block;
  position: relative;
  padding: 7px;
  border-radius: 20px;
  transform-origin: bottom center;
  background: var(--phone-body);
  box-shadow:
    0 0 0 1px var(--line),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 22px 38px -20px rgba(25,27,24,0.55);
}
.phone-frame::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--phone-detail);
  transform: translateX(-50%);
}
.phone-screen{
  display: block;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  border-radius: 13px;
  background: var(--bg-panel);
}
.phone-screen img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* --sel-scale: quanto cada tela cresce ao ser escolhida. Calibrado para as
   três chegarem, selecionadas, ao mesmo tamanho da primeira (a razão entre
   as larguras de base é ~1.46 para a previsão e ~1.63 para as assinaturas). */
.phone-a{
  --base: rotateY(-3deg);
  --sel-scale: 1.04;
  width: clamp(190px, 19vw, 240px);
  z-index: 3;
}
.phone-b{
  --base: rotateY(-6deg) translateY(-32px);
  --sel-scale: 1.5;
  width: clamp(128px, 13vw, 168px);
  margin-left: clamp(-40px, -3.2vw, -24px);
  z-index: 2;
  filter: saturate(0.96) brightness(0.99);
}
.phone-c{
  --base: rotateY(-8deg) translateY(-14px);
  --sel-scale: 1.68;
  width: clamp(114px, 11.5vw, 150px);
  margin-left: clamp(-32px, -2.5vw, -18px);
  z-index: 1;
  filter: saturate(0.93) brightness(0.98);
}
.phone-b .phone-frame,
.phone-c .phone-frame{
  box-shadow: 0 0 0 1px var(--line), inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 24px -14px rgba(25,27,24,0.5);
}

/* legenda das três vistas, uma linha mono sob o grupo (sem depender de hover) */
.norte-views{
  position: relative;
  z-index: 1;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0 clamp(0px, 2.5vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.norte-views .nv + .nv::before{ content: "·"; margin-right: 0.9rem; color: var(--ink-faint); }

/* fecho do bloco: mora na coluna da ficha, logo abaixo dela; fica reto
   mesmo com a folha levemente torta */
.norte-tail{ margin-top: clamp(1rem, 2vw, 1.5rem); transform: rotate(0.6deg); }
.norte-tail .go2::before{ color: var(--norte-key); }
.norte-tail .go2:hover{ color: var(--norte-key); border-bottom-color: var(--norte-key); }

/* — a ficha do que o Norte resolve: um documento grafite nos dois temas,
   com um clipe no alto e a marca apagada de uma bússola ao fundo. Não é
   card de produto: é uma folha rígida com o mínimo de cenografia. — */
.norte-doc-wrap{
  grid-column: c 8 / field-end;
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 1;
  transform: rotate(-0.6deg);
}
.norte-doc{
  position: relative;
  overflow: hidden;
  padding: 1.55rem 1.45rem 1.6rem;
  background: var(--norte-panel);
  color: var(--norte-doc-ink);
  border: 1px solid var(--norte-doc-line);
  border-radius: 3px 9px 4px 8px;
  box-shadow: var(--sh-rest), inset 0 1px 0 rgba(255,255,255,0.05);
}
.norte-doc-clip{
  position: absolute;
  top: -0.95rem;
  right: 1.5rem;
  width: 18px;
  height: 44px;
  color: var(--norte-doc-faint);
  z-index: 3;
}
.norte-doc-clip svg{ display: block; width: 100%; height: 100%; }
.norte-doc-mark{
  position: absolute;
  right: -1.6rem;
  bottom: -1.9rem;
  width: 8.5rem;
  height: 8.5rem;
  color: var(--norte-doc-ink);
  opacity: 0.06;
  pointer-events: none;
}
.norte-doc-mark svg{ display: block; width: 100%; height: 100%; }
.norte-doc-h{
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--norte-doc-line);
  color: var(--norte-doc-faint);
}
.norte-doc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.norte-doc li{
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 0.85rem;
  row-gap: 0.24rem;
  align-items: start;
}
.nd-fig{
  grid-row: 1 / span 2;
  align-self: center;
  width: 26px;
  height: 26px;
  color: var(--norte-doc-faint);
}
.nd-fig svg{ display: block; width: 100%; height: 100%; }
.nd-mark{ stroke: var(--norte-key); }
.norte-doc .nn-term{
  position: relative;
  grid-column: 2;
  align-self: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--norte-doc-ink);
}
.norte-doc .nn-term::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--norte-key);
  transform: scaleX(0);
  transform-origin: left;
}
.norte-doc .nn-desc{
  grid-column: 2;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--norte-doc-faint);
  max-width: 32ch;
  margin: 0;
}

/* — Fundamentos: o conteúdo real do repositório vira um painel LEIA-ME,
   selecionável e legível nos dois temas. É documento de estudo, não print. */
.fund-doc{
  grid-column: c 1 / c 7;
  grid-row: 3;
  margin: clamp(2.8rem, 4.6vw, 4.4rem) 0 0;
  position: relative;
  z-index: 3;
}
.fund-panel{
  display: flex;
  background: var(--norte-doc-bg);
  color: var(--norte-doc-ink);
  border-radius: 4px 9px 5px 8px;
  box-shadow: var(--sh-rest);
  overflow: hidden;
}
:root[data-theme="dark"] .fund-panel{
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 24px 48px -18px rgba(0,0,0,.5), 0 0 0 1px var(--line);
}
.fund-panel-rail{
  flex: 0 0 auto;
  width: 2.35rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.15rem;
  padding: .95rem 0;
  border-right: 1px solid var(--norte-doc-line);
  color: var(--norte-doc-faint);
}
.fund-tab{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-left: 2px solid transparent;
  box-sizing: border-box;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.fund-tab svg{ width: 15px; height: 15px; display: block; }
.fund-tab.is-active{ color: var(--norte-doc-accent); border-left-color: var(--norte-doc-accent); }
.fund-panel-main{ flex: 1 1 auto; min-width: 0; }
.fund-panel-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--norte-doc-line);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--norte-doc-faint);
}
.fpb-tools{ display: inline-flex; align-items: center; gap: .6rem; }
.fpb-glyph{ letter-spacing: .05em; }
.fpb-dots{ display: inline-flex; gap: 4px; }
.fpb-dots i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--norte-doc-faint);
}
.fund-panel-body{ padding: 1.15rem 1.25rem 1.3rem; }
.fund-panel-h{ color: var(--norte-doc-faint); margin: 0 0 .75rem; }
.fund-panel-h + .fund-panel-h{ margin-top: 0; }
.fund-check{
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.fund-check li{
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--norte-doc-ink);
}
.fc-tick{
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .06rem;
  color: var(--norte-doc-accent);
  overflow: visible;
}
.fc-tick rect{ fill: none; stroke: var(--norte-doc-line); stroke-width: 1.5; }
.fc-tick path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 0;
}
.fund-check code{ font-family: var(--mono); font-size: .86em; color: var(--norte-doc-faint); }
.fund-lessons{ list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.fund-lessons li{
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .7rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--norte-doc-ink);
}
.fl-n{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--norte-doc-faint);
  padding-top: .06rem;
  transition: color .18s ease;
}
.fund-lessons li code{ font-family: var(--mono); font-size: .9em; color: var(--norte-doc-faint); }
.fund-lessons-more{
  display: inline-block;
  margin-top: .85rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--norte-doc-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--norte-doc-line);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.fund-lessons-more:hover{ color: var(--norte-doc-accent); border-color: var(--norte-doc-accent); }
.fund-doc figcaption{ margin: .9rem 0 0; max-width: 40ch; }
.fund-panel-view[hidden]{ display: none; }
.fund-panel-lede{ font-size: .9rem; line-height: 1.55; color: var(--norte-doc-ink); margin: 0 0 1rem; }
.fund-panel-note{ font-size: .82rem; line-height: 1.5; color: var(--norte-doc-faint); margin: 0 0 1.1rem; }
.fund-topics{ font-size: .84rem; line-height: 1.7; color: var(--norte-doc-ink); margin: 0 0 1.1rem; }
.fund-levels{ list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.fund-levels li{ display: grid; grid-template-columns: 3.6rem 1.6rem 1fr; gap: .6rem; align-items: baseline; font-size: .86rem; line-height: 1.45; color: var(--norte-doc-ink); }
.lv-label{ font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; color: var(--norte-doc-faint); }
.lv-n{ font-family: var(--mono); font-size: .78rem; color: var(--norte-doc-accent); }
.fund-extras{ list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; }
.fund-extras li{ display: grid; grid-template-columns: 7.4rem 1fr; gap: .7rem; font-size: .86rem; line-height: 1.45; color: var(--norte-doc-ink); }
.fx-label{ font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; color: var(--norte-doc-faint); padding-top: .06rem; }
.fund-kv{ display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: .5rem 1rem; margin: 0 0 1rem; }
.fund-kv dt{ font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; color: var(--norte-doc-faint); padding-top: .06rem; }
.fund-kv dd{ margin: 0; font-size: .86rem; line-height: 1.5; color: var(--norte-doc-ink); }

.fund-txt{ grid-column: c 8 / field-end; grid-row: 3; padding-top: calc(clamp(2.8rem, 4.6vw, 4.4rem) + 0.6rem); }
.fund-txt .h3-title{ margin: 0.55rem 0 1.1rem; }
.fund-txt p{ font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 42ch; }
.fund-txt p:first-of-type{ color: var(--ink); }
.fund-meta{ margin: 0 0 1.3rem; display: grid; gap: .45rem; }
.fund-meta .dat{ display: flex; align-items: center; gap: .5rem; }
.fm-i{ width: 13px; height: 13px; flex: 0 0 auto; color: var(--ink-faint); }
.fund-links{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; margin: 1.4rem 0 0; }

/* — Fundamentos: paleta própria, grafite + osso (sem o verde de identidade).
   Escopo local em .fund-doc / .fund-txt; o painel do Norte segue em --norte-doc-*.
   O painel fica um tom mais escuro que a cena; o trilho e a barra, um tom
   mais fechado ainda, como a moldura de uma janela. As marcações (aba ativa,
   ticks, filete do título, setas) passam a ser osso, não mais verde. */
.fund-doc{
  --norte-doc-bg:     #16171A;
  --norte-doc-accent: #E0DBCD;
  --norte-doc-line:   rgba(228,228,232,0.13);
  --line:             #47484C;
}
.fund-doc .fund-panel-rail,
.fund-doc .fund-panel-bar{ background: #121316; }
.fund-doc .fund-tab.is-active{ background: rgba(224,219,205,0.055); }
.fund-txt{ --accent: #E0DBCD; }
.fund-txt .h3-title{ margin-bottom: 0.7rem; }
.fund-txt .h3-title::after{
  content: "";
  display: block;
  width: clamp(1.6rem, 3vw, 2.3rem);
  height: 2px;
  margin: 0.8rem 0 0 0.1rem;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
}

/* ---------- 6. CENA 3 · coisas que tento entender ------------------------ */

.plate{ padding-top: clamp(3.4rem, 5vw, 5rem); padding-bottom: clamp(1.6rem, 2.6vw, 2.4rem); row-gap: clamp(2rem, 3vw, 3rem); }

.plate-meta{ grid-column: c 1 / c 8; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.plate-meta::before{
  content: "";
  width: 7px; height: 7px;
  margin-right: 0.2rem;
  background: var(--green-plate);
}
.plate-meta .dat{ display: inline; }
.plate-meta .dat + .dat::before{ content: "· "; color: var(--green-plate); }

.ask{
  grid-column: c 1 / c 7;
  grid-row: 2;
  align-self: start;
  font-family: var(--display);
  font-weight: 420;
  font-size: var(--fs-scene);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--on-plate);
  margin: 0;
  text-wrap: balance;
}

/* a coluna esquerda: corpo do texto, a nota "agora" presa com fita e o
   botão para o caderno. Largura de leitura confortável, não a da cena. */
.plate-txt{
  grid-column: c 1 / c 6;
  grid-row: 3;
  align-self: center;
  max-width: 34rem;
}
.plate-txt > p{ font-size: 0.99rem; line-height: 1.64; color: var(--on-plate-2); margin: 0 0 1.9rem; max-width: 40ch; }

/* nota de campo presa com fita. Até 06/09/2026 era um link pra página
   /agora (removida); agora é só uma nota estática, sem destino. */
.plate-now{
  position: relative;
  display: block;
  width: fit-content;
  max-width: 30rem;
  margin: 0 0 1.8rem;
  padding: 0.9rem 1.3rem 1rem 1.5rem;
  background: var(--probe-paper);
  color: #23261F;
  text-decoration: none;
  transform: rotate(-0.7deg);
  box-shadow: var(--sh-rest);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* a nota é papel quente nos dois temas (pousa sobre a prancha escura),
   então a tinta por dentro é sempre escura. só a sombra muda com o tema. */
:root[data-theme="dark"] .plate-now{ box-shadow: var(--sh-rest); }
/* uma única fita no alto, mesmo material do resto da mesa.
   Sem alfinete: ou pino, ou fita, não os dois. */
.plate-now::before{
  content: "";
  position: absolute;
  top: -8px; left: 16px;
  width: 46px; height: 17px;
  background: var(--tape-fill);
  border: 1px solid var(--tape-edge);
  transform: rotate(-4deg);
}
.plate-now-k{
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* a superfície da nota é sempre papel claro, então o verde é sempre o
     tom escuro, mesmo no tema noturno */
  color: var(--ink-green);
}
.plate-now-t{
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #23261F;
  max-width: 26ch;
}
.plate-now:hover{
  transform: rotate(-0.7deg) translateY(-2px);
  box-shadow: var(--sh-lift);
}
.plate-now:focus-visible{ outline: 2px solid var(--ink-green); outline-offset: 3px; }

.go2.go2-box{
  align-items: center;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--green-plate);
  border-radius: 1px;
}
.scene-plate .go2.go2-box{ border-color: rgba(143,191,164,0.6); }
.scene-plate .go2.go2-box:hover{
  border-color: var(--green-plate);
  background: rgba(143,191,164,0.12);
}

/* — a folha de experimento: superfície mineral clara pousada sobre a cena
   escura. Uma foto só do cão, e o Grad-CAM entra como uma lâmina de acetato
   deslizando por cima: à esquerda a foto crua, à direita a leitura do modelo.
   Não é card: é material de bancada sangrando pra margem. */
.probe{
  grid-column: c 7 / bleed-end;
  grid-row: 2 / 4;
  align-self: center;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(6rem, 9.5vw, 9.5rem);
  gap: clamp(0.4rem, 1.2vw, 1rem);
  align-items: center;
  margin: 0;
}

/* a folha: superfície mineral clara pousada sobre a cena escura, um pouco
   fora de esquadro, com um par de folhas por baixo. Não é card, é material
   de bancada sangrando pra margem. */
.probe-sheet{
  position: relative;
  padding: clamp(1.3rem, 2vw, 1.9rem) clamp(1.15rem, 1.9vw, 1.7rem) clamp(1.4rem, 2vw, 1.8rem);
  padding-right: calc(var(--gut) + clamp(0.4rem, 1vw, 1rem));
  background: var(--probe-paper);
  color: #23261F;
  border-radius: 2px 11px 3px 8px;
  transform: rotate(0.8deg);
  box-shadow: var(--sh-lift);
  --accent: var(--ink-green);
  --accent-strong: var(--ink-green-strong);
}
/* uma pilha de duas folhas por baixo: cada uma com rotação, deslocamento,
   corte e opacidade próprios, para ler como pilha e não como cópia deslocada */
.probe-sheet::before,
.probe-sheet::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--probe-paper);
  box-shadow: 0 0 0 1px rgba(35,38,31,0.14);
  z-index: -1;
}
.probe-sheet::before{ border-radius: 3px 9px 4px 12px; transform: rotate(-2.6deg) translate(-10px, 3px); opacity: 0.92; }
.probe-sheet::after{ border-radius: 5px 7px 9px 3px; transform: rotate(1.7deg) translate(11px, 12px); opacity: 0.55; }
:root[data-theme="dark"] .probe-sheet::before,
:root[data-theme="dark"] .probe-sheet::after{ box-shadow: 0 0 0 1px rgba(0,0,0,0.42); }
.probe .dat{ color: #54574D; }

.probe-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(0.65rem, 1.3vw, 0.95rem);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(35,38,31,0.16);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #55584E;
}
.probe-head-r{ position: relative; white-space: nowrap; }
.probe-head-r::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* o carimbo de data: um selo circular, não mais uma linha de texto solta */
.probe-stamp{
  display: flex;
  justify-content: flex-end;
  margin: 0.75rem 0 0;
}
.probe-stamp-ring{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1.5px dashed var(--accent);
  border-radius: 50%;
  transform: rotate(-8deg);
  font-family: var(--mono);
  color: var(--accent-strong);
  line-height: 1.05;
}
.probe-stamp-l1{ font-size: 0.5rem; letter-spacing: 0.05em; }
.probe-stamp-l2{ font-size: 0.4rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.82; margin-top: 1px; }

/* o clipe que prende a lâmina de acetato à folha, e o mesmo desenho reaparece
   preso na nota ao lado (.probe-note-clip): duas folhas, dois clipes, a
   mesma linguagem de fixação. Três traços por clipe (sombra/corpo/brilho)
   em vez de um único stroke plano, para ler como metal com volume. */
.probe-clip,
.probe-note-clip{
  position: absolute;
  width: 21px; height: 52px;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.32));
  pointer-events: none;
}
.probe-clip{ top: -13px; right: 22%; transform: rotate(9deg); }
.probe-clip svg,
.probe-note-clip svg{ display: block; width: 100%; height: 100%; }
.probe-clip .pc-shadow,
.probe-note-clip .pc-shadow{ stroke: rgba(20,22,15,0.3); }
.probe-clip .pc-body,
.probe-note-clip .pc-body{ stroke: #9aa08f; }
.probe-clip .pc-hi,
.probe-note-clip .pc-hi{ stroke: rgba(255,255,255,0.55); }

/* a lâmina. base = foto; acetato = Grad-CAM recortado à direita da costura;
   a costura é a borda física da folha de acetato, com um puxador. */
.probe-lens{
  --seam: 0.58;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #14160F;
  border-radius: 3px 10px 4px 9px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.16), 0 18px 34px -16px rgba(0,0,0,0.55), inset 0 0 30px rgba(0,0,0,0.24);
  cursor: grab;
}
/* grão de filme sobre a lâmina inteira, acima da foto e do mapa, para o
   "lens" do nome ler como vidro/emulsão de verdade e não retângulo plano */
.probe-lens::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.probe-base,
.probe-acetate{ position: absolute; inset: 0; display: block; }
.probe-base picture,
.probe-acetate picture{ position: absolute; inset: 0; display: block; }
.probe-base img,
.probe-acetate img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.probe-acetate{
  clip-path: inset(0 0 0 calc(var(--seam) * 100%));
  filter: saturate(1.04);
}
/* face interna do vidro logo depois da borda: um brilho que decai */
.probe-acetate::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--seam) * 100%);
  width: 54px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 78%);
  pointer-events: none;
}
/* reflexo especular atravessando a lâmina inteira */
.probe-acetate::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg,
    transparent 30%,
    rgba(255,255,255,0.26) 40%,
    rgba(255,255,255,0.05) 45%,
    transparent 52%,
    rgba(255,255,255,0.11) 64%,
    rgba(255,255,255,0.03) 68%,
    transparent 74%);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* a borda física da folha de acetato: filete de luz + sombra caindo na foto */
.probe-seam{
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--seam) * 100%);
  width: 3px;
  margin-left: -1px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(248,247,239,0.96) 45%, rgba(255,255,255,0.4));
  box-shadow: -12px 0 18px -6px rgba(0,0,0,0.55), 1px 0 0 rgba(20,22,15,0.4);
  pointer-events: none;
}
.probe-grip{
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 24px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(241,240,230,0.95);
  border-radius: 999px;
  background: rgba(20,22,15,0.42);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
/* o puxador reage ao foco do teclado igual ao arrasto: o input range que
   controla a lâmina fica invisível por cima, então o foco cai aqui */
.probe-lens:focus-within .probe-grip{
  transform: translate(-50%, -50%) scale(1.12);
  border-color: #cfe6d8;
  background: rgba(20,22,15,0.6);
}
.probe-grip::before,
.probe-grip::after{
  content: "";
  position: absolute;
  top: 50%;
  border: 3px solid transparent;
}
.probe-grip::before{ left: 5px; border-right-color: rgba(241,240,230,0.95); transform: translateY(-50%); }
.probe-grip::after{ right: 5px; border-left-color: rgba(241,240,230,0.95); transform: translateY(-50%); }

/* etiqueta de bancada, não rótulo de interface: filete de acento no alto
   (a mesma cor do carimbo e do traço do site) e uma marcação quadrada antes
   do texto, como uma etiqueta de amostra de laboratório de verdade */
.probe-tag{
  position: absolute;
  bottom: 8px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.5rem 0.2rem;
  background: rgba(15,17,11,0.82);
  border-top: 2px solid var(--accent);
  color: #F1F0E6;
  pointer-events: none;
}
.probe-tag::before{
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 0.42em;
  background: var(--accent);
  vertical-align: 1px;
}
.probe-tag-in{ left: 8px; }
.probe-tag-out{ right: 8px; text-align: right; }
.probe-tag-out b{
  display: block;
  margin-top: 0.28rem;
  padding-top: 0.22rem;
  border-top: 1px solid rgba(241,240,230,0.24);
  font-weight: 400;
  opacity: 0.78;
  letter-spacing: 0.05em;
}

.probe-range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.probe-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 44px; height: 100%; background: transparent; }
.probe-range::-moz-range-thumb{ width: 44px; height: 100%; border: 0; background: transparent; }
.probe-lens:focus-within{ box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -14px rgba(0,0,0,0.5); }

@media (prefers-reduced-motion: no-preference){
  .probe-acetate{
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .probe.is-drawn .probe-acetate{ opacity: 1; transform: none; }
}

/* uma folha de anotação clipada na quina da folha principal: em vez de
   flutuar solta e ligada por uma seta desenhada, ela pousa por cima do
   canto superior direito da folha (mesmo clipe, deslocado por transform,
   sem afetar a largura reservada na grade) e um pouco da borda extravasa
   pra margem, como um post-it real colado por cima de uma página. */
.probe-note{
  grid-column: 2;
  align-self: start;
  position: relative;
  z-index: 4;
  margin: -1.4rem 0 0;
  padding: 0.85rem 0.85rem 0.8rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.42;
  color: #2b2e26;
  background: var(--probe-paper);
  border-radius: 2px 8px 3px 7px;
  max-width: 17ch;
  transform: translate(-2.9rem, 0) rotate(-3deg);
  box-shadow: var(--sh-lift);
}
.probe-note-clip{
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
}

/* a bancada A/B continua, agora como material de laboratório na prancha */
.lab{ grid-column: c 1 / field-end; grid-row: 4; margin-top: 0.5rem; }

/* — a folha do classificador, pousada sobre a prancha. Um pouco fora de
   esquadro com o campo (não sangra até a borda), como um documento real
   pousado sobre a mesa de laboratório, não um painel encaixado. — */
.sheet-wrap{ padding-top: clamp(2rem, 3vw, 3rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
/* a folha seguinte, anunciada na margem escura antes de aparecer: as duas
   folhas leem como páginas 1 e 2 do mesmo caderno */
.sheet-turn{
  grid-column: c 1 / c 12;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--on-plate-2);
}
.sheet-turn::before{
  content: "";
  display: inline-block;
  width: 1.6rem; height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--green-plate);
}
.paper-sheet{
  grid-column: c 1 / c 12;
  position: relative;
  background: var(--doc-paper);
  color: var(--doc-ink);
  padding: clamp(2rem, 3.2vw, 3.2rem) clamp(1.6rem, 3vw, 3rem) clamp(2.1rem, 3.2vw, 3rem);
  box-shadow: var(--sh-lift);
}
.paper-sheet::before{
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 13px; height: 13px;
  border-top: 1px solid rgba(25,27,24,0.3);
  border-left: 1px solid rgba(25,27,24,0.3);
  pointer-events: none;
}
:root[data-theme="dark"] .paper-sheet::before{ border-color: rgba(236,232,220,0.28); }
:root[data-theme="dark"] .paper-sheet{ box-shadow: var(--sh-lift); }
.paper-sheet{
  --ink: var(--doc-ink);
  --ink-soft: #4C5049;
  --ink-faint: #54584F;
  --accent: var(--ink-green);
  --accent-strong: var(--ink-green-strong);
  --accent-soft: #BBD0C2;
  --accent-wash: rgba(40,90,67,0.09);
  --line: var(--doc-rule);
  --line-soft: #D6D0BF;
  --bg-panel: #E4DFD2;
  --bg: var(--doc-paper);
}
.sheet-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.2rem 2rem;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.4rem);
}
/* mesma etiqueta mono da prancha ("caderno · xai"): as duas folhas leem
   como capítulos do mesmo caderno */
.sheet-kicker{
  grid-column: 1 / -1;
  margin: 0 0 -0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}
.sheet-ask{
  font-family: var(--display);
  font-weight: 450;
  font-size: clamp(1.65rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.016em;
  color: var(--doc-ink);
  margin: 0;
  max-width: 22ch;
}
.sheet-ask .sa-1{ display: block; font-family: var(--sans); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: #4C5049; margin-bottom: 0.7rem; max-width: 44ch; }

/* a coluna direita carrega a ficha do classificador e precisa caber os nomes
   dos cursos sem reticência; o texto corrido segue limitado a 62ch, então a
   folha só ganha um respiro maior entre as duas colunas */
.sheet-body{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.6rem);
  align-items: start;
}
.sheet-text{ font-size: 1rem; line-height: 1.66; color: #35382F; }
.sheet-text p{ margin: 0 0 1rem; max-width: 62ch; }
.sheet-text p:last-child{ margin-bottom: 0; }
/* o rodapé da folha carrega dois assuntos diferentes e não pode lê-los como
   uma lista só: à esquerda a continuação técnica, à direita, atrás de um fio
   e de um rótulo próprio, a mudança de assunto para quem escreveu o texto */
.sheet-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.3rem 2.2rem;
  margin-top: clamp(1.6rem, 2.4vw, 2.2rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--doc-rule);
}
.sf-tech{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 1.8rem;
  margin: 0;
  padding-top: 0.6rem;
}
.sf-me{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.34rem;
  margin: 0 0 0 auto;
  padding-left: clamp(1.2rem, 2.2vw, 2.2rem);
  border-left: 1px solid var(--doc-rule);
}
.sf-me-lbl{ font-size: 0.57rem; letter-spacing: 0.15em; }
.go-me{
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease, gap .18s ease;
}
.go-me::before{ content: "→"; font-family: var(--mono); font-size: 0.76em; line-height: 1; color: var(--accent); }
.go-me:hover{ color: var(--accent); border-bottom-color: var(--accent); gap: 0.62rem; }

/* ---------- 7. CENA 4 · o que mais vai encontrar aqui ---------------- */

/* A cena fecha a publicação com o que não é projeto nem pesquisa. Deixou de
   ser uma mesa cheia de objetos soltos e virou uma folha de índice: cinco
   entradas numeradas, cada uma com o seu artefato real (as cópias da UFPR,
   do SENAI e da monitoria, a foto do Max, a folha do ano, o disco no repeat,
   o índice das criações). O que dá unidade é o painel grafite, a numeração
   em mono e o mesmo respiro, não um formato de card repetido. O dossiê
   Profissional saiu daqui e virou cena própria (ver a seção logo abaixo). */

.scene-rest{
  --print:      #F0EBE1;              /* papel das cópias: claro nos dois temas */
  --print-ink:  #6B6A5C;
  --ink-print:  #2C2E27;
  --card-dark:  #FFFFFF;
  --card-edge:  rgba(25,27,24,0.12);
  --grid-line:  rgba(25,27,24,0.05);
}
:root[data-theme="dark"] .scene-rest{
  --print:      #E7E2D5;
  --print-ink:  #6B6A5C;
  /* painel um degrau claro sobre o chão #141418, nunca preto: cinza-grafite
     levemente frio, sem puxar oliva nem marrom */
  --card-dark:  #1B1D22;
  --card-edge:  #34363D;
  --grid-line:  rgba(255,255,255,0.045);
  /* nada de tinta de identidade nesta cena: setas e marcadores em cinza */
  --accent:     #9EA0A6;
}

.rest{
  padding-top: clamp(4.5rem, 7vw, 7rem);
  padding-bottom: clamp(3rem, 5vw, 5.5rem);
  row-gap: clamp(2.6rem, 4vw, 3.8rem);
}

/* — cabeçalho em três zonas, como no alto de uma publicação: abertura à
     esquerda, introdução no meio, uma nota miúda na margem direita. O texto
     é o mesmo de antes, só a composição mudou. — */
.rest-head{
  grid-column: c 1 / field-end;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.66fr);
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: start;
}
.rest-kicker{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rest-kicker b{ font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rest-kicker .rk-rule{ flex: none; width: clamp(1.6rem, 4vw, 3rem); height: 1px; background: currentColor; opacity: 0.55; }
.rh-open .scene-lead{ max-width: 13ch; margin: 0; color: var(--ink); }
.rh-intro{
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0.3rem 0 0;
}
.rh-note{
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.75;
  color: var(--ink-faint);
  margin: 0.35rem 0 0;
  text-align: right;
}

/* — a grade: duas colunas, a entrada do registro ocupando a altura das duas
     da direita. Ordem visual 01·02 / 03·04 / ·05, o DOM já em 01→05. — */
.rest-grid{
  grid-column: c 1 / field-end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.re-sobre   { grid-column: 1; grid-row: 1; }
.re-max     { grid-column: 2; grid-row: 1; }
.re-log     { grid-column: 1; grid-row: 2 / span 2; align-self: stretch; }
.re-tune    { grid-column: 2; grid-row: 2; }
.re-criacoes{ grid-column: 2; grid-row: 3; }

.rest-entry{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-dark);
  border: 1px solid var(--card-edge);
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.3rem, 2.2vw, 1.9rem) clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--sh-rest);
  overflow: hidden;
}
.re-head{
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.95rem;
}
.re-n{ color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.re-title{
  font-family: var(--display);
  font-weight: 430;
  font-size: clamp(1.3rem, 1.08rem + 0.9vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 0.55rem;
  max-width: 20ch;
  text-wrap: balance;
}
.re-text{
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 1rem;
}
.rest-entry .go2{ align-self: flex-start; margin-bottom: 1.5rem; }
.re-art{ position: relative; margin-top: auto; }

/* nota miúda na margem de cada entrada, puramente decorativa */
.re-side{
  display: block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-faint);
  opacity: 0.7;
}
.re-hand{
  display: block;
  font-family: 'Caveat', var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--print-ink);
}

/* — 01 · sobre: as três cópias presas na prancha de contact sheet — */
.re-sobre .re-hand{ margin: 0 0 0.7rem 0.3rem; }
.frag-board{
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: clamp(0.8rem, 1.6vw, 1.3rem) clamp(0.8rem, 1.6vw, 1.2rem) clamp(0.9rem, 1.7vw, 1.4rem);
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 26px),
    color-mix(in srgb, var(--card-dark) 93%, #000);
  border: 1px solid var(--card-edge);
  transform: rotate(-0.5deg);
  box-shadow: var(--sh-rest);
}
.frag{
  position: relative;
  margin: 0;
  flex: 0 1 auto;
  background: var(--print);
  padding: 6px 6px 0;
  box-shadow: var(--sh-rest);
}
.frag .frag-clip{ display: block; overflow: hidden; aspect-ratio: 3 / 4; background: rgba(25,27,24,0.12); }
.frag img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.frag figcaption{
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--print-ink);
  text-align: center;
  padding: 0.55rem 0.1rem 0.52rem;
}
.frag-a{ width: 34%; margin-top: 1rem; transform: rotate(-1.5deg); z-index: 1; }
.frag-b{ width: 37%; margin-left: -2.5%; transform: rotate(0.7deg); z-index: 2; }
.frag-c{ width: 34%; margin-left: -2.5%; margin-top: 1.5rem; transform: rotate(-0.7deg); z-index: 1; }
.frag-pin{
  position: absolute;
  top: -15px; left: 14px;
  width: 16px; height: 40px;
  z-index: 4;
  color: #8B8879;
  filter: drop-shadow(0 1.5px 1.5px rgba(25,27,24,0.35));
}
.frag-pin svg{ display: block; width: 100%; height: 100%; }
.frag-b .frag-pin{ left: 50%; transform: translateX(-50%) rotate(1.5deg); }
.frag-c .frag-pin{ left: auto; right: 14px; }

/* — 02 · max: uma cópia maior, legenda à mão e o carimbo da patinha.
     Foto real do Max (border collie); não trocar por outra imagem. — */
.max-print{
  position: relative;
  margin: 0;
  max-width: 21rem;
  background: var(--print);
  padding: 8px 8px 0;
  transform: rotate(-1deg);
  box-shadow: var(--sh-rest);
}
.max-print .frag-clip{ display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.max-print img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.max-line-txt{
  font-family: 'Caveat', var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.24;
  color: #4A4C43;
  padding: 0.75rem 0.3rem 0.9rem;
  max-width: 26ch;
}
.paw-stamp{
  position: absolute;
  right: 12px; bottom: 10px;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  color: var(--ink-green);
  opacity: 0.5;
  transform: rotate(-9deg);
  pointer-events: none;
}
.paw-stamp .ps-ring,
.paw-stamp .ps-paw{ grid-area: 1 / 1; }
.paw-stamp .ps-ring{ width: 100%; height: 100%; }
.paw-stamp .ps-paw{ width: 46%; height: 46%; fill: none; stroke: currentColor; }

/* — 03 · registro: dois canhotos de ingresso guardados como lembrança.
     Papel claro nos dois temas (o mesmo das cópias), tinta grafite. Sem
     tinta de identidade: a paleta areia do /registro foi reprovada, então
     o bloco é monocromático. O talão do filme carrega o picote e o código
     de barras; a lombada do jogo fica atrás, um pouco girada. — */
.re-log .re-art{ display: flex; flex: 1; }
.log-card{
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0 0;
}

.tk{
  position: relative;
  background: var(--print);
  border: 1px solid rgba(25,27,24,0.16);
  box-shadow: var(--sh-rest);
  color: var(--ink-print);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.tk-kick{
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.53rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--print-ink);
}
.tk-num{ margin-left: auto; letter-spacing: 0.07em; }
.tk-title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.92rem + 0.7vw, 1.34rem);
  line-height: 1.12;
  color: var(--ink-print);
}
.tk-rate{
  margin: 0.5rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1;
  color: var(--ink-print);
}
.tk-star{ font-size: 0.8em; color: var(--print-ink); }
.tk-max{ font-family: var(--mono); font-size: 0.52rem; color: var(--print-ink); }

/* a lombada do jogo: atrás, deslocada pra cima e pra direita. A folga
   embaixo é onde o talão do filme encosta, nunca sobre o texto. */
.tk-game{
  align-self: flex-end;
  width: 86%;
  margin-bottom: -0.85rem;
  z-index: 1;
  transform: rotate(1.6deg);
  padding: clamp(0.9rem, 1.7vw, 1.15rem) clamp(1rem, 1.9vw, 1.3rem) clamp(1.35rem, 2.1vw, 1.7rem);
}
/* o talão do filme: à frente, corpo + canhoto picotado */
.tk-film{
  align-self: flex-start;
  width: 100%;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4rem;
  transform: rotate(-1.1deg);
}
.tk-body{ padding: clamp(0.9rem, 1.7vw, 1.15rem) clamp(1rem, 1.9vw, 1.3rem); }
.tk-stub{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.4rem;
  border-left: 1.5px dashed rgba(25,27,24,0.5);
}
/* as duas mordidas redondas do picote, vazadas até a superfície da cena */
.tk-stub::before,
.tk-stub::after{
  content: "";
  position: absolute;
  left: -6.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card-dark);
}
.tk-stub::before{ top: -6.5px; }
.tk-stub::after{ bottom: -6.5px; }
.tk-bars{
  width: 1.35rem;
  height: 0.58rem;
  transform: rotate(90deg);
}
.tk-bars rect{ fill: var(--ink-print); }
.tk-stub-yr{
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  color: var(--print-ink);
  writing-mode: vertical-rl;
}
.lg-foot{
  margin: auto 0 0;
  padding-top: 1.7rem;
  font-family: 'Caveat', var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink-faint);
}
@media (hover: hover) and (pointer: fine){
  .re-log:hover .tk-game{ transform: rotate(0.5deg); }
  .re-log:hover .tk-film{ transform: rotate(-0.3deg); }
}
@media (prefers-reduced-motion: reduce){
  .tk{ transition: none; }
}

/* — 04 · música: faixa fechada que abre o Spotify em nova aba. Sem embed,
     sem player que expande. O disco de papel desliza da capa no hover. — */
.re-tune .tune-row{
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--ink);
}
.tune-vinyl{ position: relative; flex: none; width: 78px; height: 54px; }
.tv-disc{
  position: absolute;
  top: 1px; left: 26px;
  width: 52px; height: 52px;
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.tv-disc svg{ display: block; width: 100%; height: 100%; }
.tv-vinyl{ fill: #0B0B0C; stroke: rgba(255,255,255,0.2); stroke-width: 0.8; }
.tv-groove{ fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 0.7; }
.tv-label{ fill: #6E6F73; }
.tv-hole{ fill: #0B0B0C; }
.tv-sleeve{
  position: absolute;
  top: 0; left: 0;
  width: 54px; height: 54px;
  z-index: 2;
  background: #3A3B40;
  box-shadow:
    inset -2px 0 0 rgba(0,0,0,0.4),
    inset 1px 1px 0 rgba(255,255,255,0.06),
    0 1px 3px rgba(0,0,0,0.5);
}
.tune-meta{ min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.tune-label{ font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.tune-track{ font-family: var(--serif); font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.tune-play-icn{
  flex: none;
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  font-size: 0.62rem;
  color: var(--ink-soft);
  transition: color .18s ease, border-color .18s ease;
}
.re-tune .tune-row:hover .tune-play-icn,
.re-tune .tune-row:focus-visible .tune-play-icn{ color: var(--ink); border-color: var(--ink-faint); }
.re-tune .tune-row:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* — 05 · criações: o índice do caderno, com dois rabiscos na margem — */
.re-criacoes .re-art{ display: flex; align-items: flex-start; gap: 1rem; }
.fut-index{ list-style: none; margin: 0; padding: 0; flex: 1; }
.fut-index li{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--card-edge);
}
.re-scribbles{
  flex: none;
  width: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  color: var(--ink-faint);
}
.re-doodle{ display: block; height: auto; opacity: 0.75; }
.re-doodle-star{ width: 2.1rem; }
.re-doodle-hills{ width: 100%; }
.re-hand-sticky{
  font-family: 'Caveat', var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.15;
  text-align: right;
  color: var(--print-ink);
}

/* — Profissional: cena própria entre a pesquisa e a cena pessoal. Não é
   um card da mesa, é uma folha de documento pousada num chão grafite:
   linguagem mais rígida e sóbria que o resto da home, sem fita, sem
   carimbo, sem verde de marcação (a página /profissional também larga o
   verde, ver o accent grafite). Abertura curta, as três frentes reais do
   perfil e as duas portas. Movimento quase nenhum: só a linha e a seta do
   link respondem. O mapa completo do site vive no rodapé, então aqui não
   se repetem colunas de links.
   #agora-home continua logo abaixo, na cena seguinte, como placeholder
   estrutural invisível (ver o HTML e a nota no fim desta seção). */
.scene-doc .stage.doc{
  padding-top: clamp(4.4rem, 8vw, 8rem);
  padding-bottom: clamp(4.4rem, 8vw, 8rem);
}
.doc-sheet{
  grid-column: c 1 / field-end;
  justify-self: center;
  width: 100%;
  max-width: 1160px;
  position: relative;
  border: 1px solid var(--doc-rule);
  border-top: 2px solid var(--doc-ink);
  background: var(--doc-paper);
  color: var(--doc-ink);
  --ink: var(--doc-ink);
  --ink-soft: #4C5049;
  --ink-faint: #565A4F;
  --line: var(--doc-rule);
  --accent: #55503F;
  box-shadow: var(--sh-lift);
  padding: clamp(2.3rem, 3.6vw, 3.8rem) clamp(1.8rem, 3.2vw, 3.6rem) clamp(2.1rem, 3.2vw, 3.2rem);
}
/* filete duplo no topo, como o cabeçalho de um formulário / do /cv */
.doc-sheet::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 1px;
  background: var(--doc-rule);
}
/* cruz de registro no canto: puramente gráfica, sem leitura funcional */
.doc-sheet::after{
  content: "";
  position: absolute;
  right: clamp(1.4rem, 2.4vw, 2.4rem);
  bottom: clamp(1.3rem, 2.2vw, 2rem);
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--doc-rule), var(--doc-rule)) center / 100% 1px no-repeat,
    linear-gradient(var(--doc-rule), var(--doc-rule)) center / 1px 100% no-repeat;
  opacity: 0.9;
}
/* a etiqueta do dossiê, presa à borda de cima como o índice de uma pasta.
   left casa com o padding-left da folha pela mesma clamp */
.doc-tab{
  position: absolute;
  top: -1.35rem;
  left: clamp(1.8rem, 3.2vw, 3.6rem);
  margin: 0;
  padding: 0.4rem 0.9rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--doc-ink) 82%, transparent);
  background: color-mix(in srgb, var(--doc-paper) 76%, #8B8968);
  border: 1px solid var(--doc-rule);
  border-bottom-color: color-mix(in srgb, var(--doc-paper) 76%, #8B8968);
}
.doc-year{ color: color-mix(in srgb, var(--doc-ink) 48%, transparent); }

.doc-head{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.4rem clamp(2rem, 4.4vw, 4.4rem);
  align-items: start;
  padding-bottom: clamp(1.8rem, 2.7vw, 2.5rem);
  border-bottom: 1px solid var(--doc-rule);
}
.doc-eyebrow{ margin: 0 0 0.75rem; }
.doc-lead{
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.06rem + 1.15vw, 1.95rem);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 21ch;
  text-wrap: balance;
  color: var(--doc-ink);
}
.doc-sub{
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 46ch;
  text-wrap: pretty;
}
.doc-role{
  margin: 0;
  display: grid;
  gap: 0.9rem;
  align-self: start;
  padding-top: 0.3rem;
}
.doc-role > div{ display: grid; gap: 0.18rem; }
.doc-role dt{ margin: 0; }
.doc-role dd{
  margin: 0;
  font-family: var(--sans);
  font-size: 0.855rem;
  line-height: 1.42;
  color: var(--doc-ink);
}
.doc-role-when{
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.doc-cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 2.4vw, 2.4rem);
  padding: clamp(1.9rem, 2.8vw, 2.6rem) 0 clamp(2rem, 2.8vw, 2.6rem);
}
.doc-col{ position: relative; }
.doc-col + .doc-col{
  padding-left: clamp(1.3rem, 2.4vw, 2.4rem);
  border-left: 1px solid var(--doc-rule);
}
.doc-n{
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--doc-ink) 36%, transparent);
  margin-bottom: 0.5rem;
}
.doc-k{ margin: 0 0 0.45rem; }
.doc-t{
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.22;
  margin: 0 0 0.5rem;
  color: var(--doc-ink);
  text-wrap: balance;
}
.doc-p{
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.doc-doors{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.2rem clamp(2rem, 4.4vw, 4.4rem);
  padding-top: clamp(1.7rem, 2.5vw, 2.3rem);
  border-top: 1px solid var(--doc-rule);
}
.doc-go{
  display: grid;
  gap: 0.3rem;
  align-content: start;
  text-decoration: none;
  color: var(--doc-ink);
}
.doc-go-t{
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .18s ease, gap .18s ease;
}
.doc-go-t::before{
  content: "→";
  flex: none;
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--accent);
}
.doc-go:hover .doc-go-t,
.doc-go:focus-visible .doc-go-t{ border-bottom-color: currentColor; gap: 0.66rem; }
.doc-go-p{
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--ink-faint);
  padding-left: 1.3rem;
}
.doc-go:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
.doc-go-alt .doc-go-t{ font-weight: 500; font-size: 0.92rem; }

@media (max-width: 760px){
  .doc-head{ grid-template-columns: 1fr; gap: 1.6rem; }
  .doc-role{ padding-top: 0; }
  .doc-cols{ grid-template-columns: 1fr; gap: 0; }
  .doc-col + .doc-col{
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--doc-rule);
    padding-top: 1.4rem;
    margin-top: 1.4rem;
  }
  .doc-doors{ grid-template-columns: 1fr; gap: 1.4rem; }
  .doc-go-alt{
    padding-top: 1.3rem;
    border-top: 1px solid var(--doc-rule);
  }
}

@media (prefers-reduced-motion: reduce){
  .doc-go:hover .doc-go-t,
  .doc-go:focus-visible .doc-go-t{ gap: 0.5rem; }
  /* o disco da faixa de música não desliza no hover */
  .re-tune .tv-disc{ transition: none; }
}

/* .now-doc/.now-tab/.now-line/.now-go (o antigo card "Agora" que dividia a
   fileira com o dossiê no rodapé do main) foram removidos em 06/09/2026
   junto com a página /agora. #agora-home é só um placeholder estrutural
   invisível (ver o HTML), sem estilo próprio ainda. */

/* ---------- 8. o fecho: mapa do site, contato e o prompt ---------------- */

body.home footer#contato{
  background: var(--paper-cool);
  border-top: 0;
  padding: 0 0 2.4rem;
  margin: 0;
}
body.home footer#contato::before{ display: none; }
body.home .footer-inner{ max-width: none; margin: 0; padding: 0; }

/* o fecho reúne o que estava espalhado: o mapa do site (que antes fechava o
   main), o contato e, sem destaque nenhum na linha de baixo, o prompt do
   terminal. Marca, recado e perfis à esquerda; as três colunas do mapa à
   direita; filete e linha de rodapé fechando embaixo. O labirinto continua
   de pé, escondido, para o terminal (snake/minado) revelar. */
.close-stage{
  padding-top: 0;
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
  row-gap: 0;
  align-items: start;
}
/* o rodapé é do mesmo papel da cena acima, então sem uma linha ele colaria no
   texto anterior. Filete alinhado ao campo, não sangrado até a borda. */
.close-stage::before{
  content: "";
  display: block;
  grid-column: c 1 / field-end;
  grid-row: 1;
  border-top: 1px solid var(--line);
}

.foot-brand{
  grid-column: c 1 / c 4;
  grid-row: 2;
  padding-top: clamp(1.9rem, 2.8vw, 2.8rem);
}
.fb-name{
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 450;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.fb-txt{
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
  max-width: 34ch;
}
.foot-brand .mail-row{ display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.foot-brand .mail-addr{
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.foot-brand .mail-addr:hover{ color: var(--accent); }

/* os perfis viram uma fileira de ícones: eram cinco linhas que só repetiam o
   nome do serviço, e o traço já é a língua do site */
.fb-social{ list-style: none; margin: 1.15rem 0 0; padding: 0; display: flex; gap: 1.05rem; }
.fb-social a{ display: block; color: var(--ink-faint); transition: color .15s ease; }
.fb-social a:hover{ color: var(--accent); }
.fs-ic{ display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; }

.foot-cols{
  grid-column: c 5 / c 12;
  grid-row: 2;
  padding-top: clamp(1.9rem, 2.8vw, 2.8rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1.2rem, 2.4vw, 2.4rem);
}
.fc-h{
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.foot-col ul{ list-style: none; margin: 0; padding: 0; }
.foot-col li{ margin: 0 0 0.3rem; }
.foot-col a{
  font-size: 0.87rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.foot-col a:hover{ color: var(--accent); border-bottom-color: var(--accent); }

body.home .close-play{ display: none; }
body.home.maze-live .close-play{
  display: block;
  grid-column: c 1 / c 8;
  grid-row: 3;
  margin-top: 2rem;
}

/* a linha de baixo: o copyright de um lado, o prompt do outro, no mesmo corpo
   e na mesma tinta apagada. É a entrada do terminal, não um anúncio dela. */
.foot-bottom{
  grid-column: c 1 / field-end;
  grid-row: 4;
  margin-top: clamp(1.9rem, 2.8vw, 2.8rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(0.9rem, 1.5vw, 1.2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
  flex-wrap: wrap;
}
.term-open{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  transition: color .18s ease;
}
.term-open:hover{ color: var(--accent); }
.term-open-cursor{ color: var(--accent); animation: tblink 1.15s steps(1) infinite; }
body.home .game{ border: 0; background: none; padding: 0; max-width: none; margin: 0; }
body.home .game-label{ display: none; }
body.home .mz-canvas{ border: 1px solid var(--line); background: transparent; width: 300px; max-width: 100%; }
body.home .footer-side{ margin: 0; max-width: none; display: block; }
body.home .fine-print{
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
body.home .fine-print a{ color: var(--ink-faint); }
body.home .fine-print a:hover{ color: var(--accent); }

/* ---------- 9. movimento: só onde revela alguma coisa ------------------- */

@keyframes fctickdraw{ from{ stroke-dashoffset: 22; } to{ stroke-dashoffset: 0; } }
@keyframes fundtabin{ from{ opacity: 0; } to{ opacity: 1; } }

@media (prefers-reduced-motion: no-preference){
  #fund-panel-como-usar .fc-tick path{ stroke-dashoffset: 22; }
  #fund-panel-como-usar:not([hidden]) .fc-tick path{ animation: fctickdraw .34s ease forwards; }
  #fund-panel-como-usar:not([hidden]) .fund-check li:nth-child(1) .fc-tick path{ animation-delay: .05s; }
  #fund-panel-como-usar:not([hidden]) .fund-check li:nth-child(2) .fc-tick path{ animation-delay: .16s; }
  #fund-panel-como-usar:not([hidden]) .fund-check li:nth-child(3) .fc-tick path{ animation-delay: .27s; }
  #fund-panel-como-usar:not([hidden]) .fund-check li:nth-child(4) .fc-tick path{ animation-delay: .38s; }
  #fund-panel-como-usar:not([hidden]) .fund-check li:nth-child(5) .fc-tick path{ animation-delay: .49s; }
  .fund-panel-view:not([hidden]){ animation: fundtabin .2s ease; }

  /* as três telas entram assentando na composição: a principal fecha um
     pequeno deslocamento, a previsão assenta atrás, as assinaturas fecham.
     Objetos sendo postos, não fade-up. Só acima do fluxo empilhado. */
  .norte-phones .phone{ transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease, filter .3s ease; }
  .phone-frame{ transition: box-shadow .35s ease; }
  .nd-fig, .norte-doc .nn-term, .norte-views .nv{ transition: color .18s ease; }
  .norte-doc .nn-term::after{ transition: transform .28s cubic-bezier(.22,.61,.36,1); }

  /* entrada só posicional (objetos sendo postos, não fade): sem JS as telas
     ficam com um deslocamento mínimo, nunca escondidas */
  @media (min-width: 901px){
    .norte-stage:not(.is-set) .phone-a{ transform: var(--base) translate(8px, 10px); }
    .norte-stage:not(.is-set) .phone-b{ transform: var(--base) translate(13px, -5px); }
    .norte-stage:not(.is-set) .phone-c{ transform: var(--base) translate(18px, -3px); }
    .norte-stage.is-set .phone-b{ transition-delay: .09s; }
    .norte-stage.is-set .phone-c{ transition-delay: .17s; }
  }

  @media (hover: hover) and (pointer: fine){
    .norte-doc li:hover .nd-fig{ color: var(--norte-key); }
    .norte-doc li:hover .nn-term{ color: #fff; }
    .norte-doc li:hover .nn-term::after{ transform: scaleX(1); }
    .fund-lessons li:hover .fl-n{ color: var(--norte-doc-accent); }
    .fund-tab:hover{ color: var(--norte-doc-accent); }
  }

  /* CENA 4 · as entradas respondem como objetos: a cópia que recebe o mouse
     endireita e sobe, as vizinhas recuam de luz, a foto do Max levanta um
     pouco e o disco desliza pra fora da capa. Só com mouse de verdade. */
  .frag, .max-print{
    transition: transform .42s cubic-bezier(.22,.61,.36,1), box-shadow .42s ease, filter .42s ease;
  }
  .frag figcaption{ transition: color .28s ease; }
  .max-print img{ transition: transform .6s cubic-bezier(.22,.61,.36,1); }

  @media (hover: hover) and (pointer: fine){
    .frag-board:hover .frag{ filter: brightness(0.84) saturate(0.72); }
    .frag-board .frag:hover{
      filter: none;
      z-index: 5;
      transform: translateY(-7px) rotate(0deg);
      box-shadow: var(--sh-lift);
    }
    .frag-board .frag:hover figcaption{ color: var(--ink-print); }

    .re-max:hover .max-print{
      transform: rotate(-0.3deg) translateY(-4px);
      box-shadow: var(--sh-lift);
    }
    .re-max:hover .max-print img{ transform: scale(1.035); }
    .re-tune .tune-row:hover .tv-disc,
    .re-tune .tune-row:focus-visible .tv-disc{ transform: translateX(8px) rotate(20deg); }
  }
}

/* a legenda da vista em foco ganha presença junto com o aparelho
   (progressivo: sem :has, o levantar da tela já basta) */
@supports selector(:has(*)){
  @media (hover: hover) and (pointer: fine){
    .norte-phones:has(.phone-a:hover) ~ .norte-views .nv-a,
    .norte-phones:has(.phone-b:hover) ~ .norte-views .nv-b,
    .norte-phones:has(.phone-c:hover) ~ .norte-views .nv-c{ color: var(--ink); font-weight: 600; }
  }
}

/* ---------- 10. telas menores ------------------------------------------ */

@media (max-width: 1180px){
  body.home{ --field-w: 1040px; }
  .build .scene-lead{ grid-column: c 1 / c 10; }
  .norte-head{ grid-column: c 1 / c 11; }
  .norte-stage{ grid-column: c 1 / c 8; }
  .norte-doc-wrap{ grid-column: c 8 / field-end; }
  .norte-phones,
  .norte-views{ margin-left: clamp(0px, 2.5vw, 30px); }
  .fund-doc{ grid-column: c 1 / c 7; }
  .fund-txt{ grid-column: c 8 / field-end; }
  .ask{ grid-column: c 1 / c 8; }
  /* folha mais estreita: a anotação recolhe pra não pisar na pergunta */
  .xai-note{ top: 5.4rem; right: 6.5rem; }
  .xn-hand{ font-size: 1.8rem; }
  .plate-txt{ grid-column: c 1 / c 7; }
  .probe{ grid-column: c 6 / bleed-end; }
  .rest-head{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .rh-note{ grid-column: 1 / -1; text-align: left; margin-top: 0.1rem; }
  .foot-brand{ grid-column: c 1 / c 5; }
  .foot-cols{ grid-column: c 5 / field-end; }
  body.home.maze-live .close-play{ grid-column: c 1 / field-end; }
}

@media (max-width: 900px){
  body.home{ --fs-cover: clamp(2.7rem, 8.4vw, 3.7rem); --fs-scene: clamp(2rem, 6.4vw, 2.8rem); --fs-title: clamp(1.75rem, 5.4vw, 2.2rem); --fs-intro: clamp(1.16rem, 3.4vw, 1.36rem); }

  .stage{ display: block; padding-inline: var(--gut); }
  .stage > *{ grid-column: auto !important; grid-row: auto !important; }

  /* empilhado, o chão próprio do Norte perde a âncora do grid; a cena
     inteira "coisas que construo" assume o mesmo grafite */
  .norte-bg{ display: none; }
  .scene-build{ background: var(--norte-ground); }

  .build{ padding-top: 4.2rem; }
  .build .scene-lead{ max-width: 20ch; margin-bottom: 2.6rem; }
  .norte-head{ margin-bottom: 1.6rem; }
  .norte-name{ font-size: clamp(3rem, 15vw, 4.8rem); line-height: 0.86; }
  .norte-tick{ width: clamp(0.9rem, 4.5vw, 1.5rem); }
  .norte-lede{ max-width: none; }
  /* o palco perde a margem lateral e a perspectiva forte; as três telas
     seguem em profundidade, só mais contidas. */
  .norte-stage{ margin-top: 1.4rem; padding: 1.4rem 0 2rem; }
  .norte-diagram{ width: min(240px, 62%); left: auto; right: 0; top: 0.4rem; transform: none; opacity: 0.11; }
  .norte-phones{ margin-left: 0; perspective: 1200px; }
  .norte-phones::after{ left: 2%; right: 6%; }
  .phone-a{ --base: rotateY(-2deg); --sel-scale: 1.03; width: clamp(150px, 42vw, 190px); }
  .phone-b{ --base: rotateY(-4deg) translateY(-16px); --sel-scale: 1.62; width: clamp(96px, 26vw, 120px); margin-left: -34px; }
  .phone-c{ --base: rotateY(-6deg) translateY(-6px); --sel-scale: 1.8; width: clamp(88px, 24vw, 110px); margin-left: -30px; }
  .norte-views{ margin-left: 0; }
  .norte-tail{ margin-top: 1.4rem; }
  /* a ficha grafite continua no celular, largura total, em pé */
  .norte-doc-wrap{ margin: 2.4rem 0 0; transform: none; max-width: 30rem; }
  .fund-doc{
    margin: 3.4rem 0 -3.4rem;
    width: 88%;
  }
  .fund-txt{ margin-top: 4.6rem; padding-top: 0; }
  .fund-txt p{ max-width: none; }

  .plate{ padding-top: 6.5rem; }
  /* vira coluna flex só para reordenar: no celular a prancha vem antes do
     texto e do link, como pede o roteiro da seção */
  .stage.plate{ display: flex; flex-direction: column; }
  .plate-meta{ order: 1; margin-bottom: 1.4rem; }
  .ask{ order: 2; margin-bottom: 2rem; }
  .probe{ order: 3; margin: 0 0 2.4rem; grid-template-columns: 1fr; }
  .probe-sheet{ padding-right: clamp(1.15rem, 2.1vw, 1.7rem); }
  .probe-note{ grid-column: 1; transform: none; max-width: 42ch; margin-top: 0.7rem; }
  .probe-note-clip{ left: 14%; }
  .plate-txt{ order: 4; max-width: none; }
  .lab{ order: 5; margin-top: 2rem; }
  .plate-txt p{ margin-bottom: 1.1rem; }
  .paper-sheet{ margin-inline: 0; }
  .sheet-head{ grid-template-columns: 1fr; align-items: start; }
  /* empilhada, a nota ocupa a largura da coluna, logo acima do ensaio */
  .paper-sheet .xai-note{ position: static; max-width: none; margin: 0.2rem 0 1.4rem; }
  .paper-sheet .xn-hand{ font-size: 1.6rem; }
  .sheet-body{ grid-template-columns: 1fr; }
  /* a ficha vira largura total abaixo do texto, de volta ao esquadro */
  .xai-aside{ padding-top: 2.6rem; margin-top: 2.4rem; }
  .xai-card{ transform: none; margin-top: 0.8rem; }
  .xai-card::before{ transform: translate(4px, 6px) rotate(1deg); }
  .xai-card::after{ transform: translate(8px, 12px) rotate(1.8deg); }
  /* empilhada, a ficha é larga: as barras não devem esticar de ponta a ponta */
  .paper-sheet .xai-bars{ max-width: 32rem; }
  /* na coluna estreita o contador desce pra segunda linha: com o respiro
     entre linhas apertado as duas leem como um rótulo só, e o cabeçalho
     continua livre da faixa por onde o clipe desce */
  .paper-sheet .xai-head{ gap: 0.12rem 1rem; padding-right: 2.6rem; }
  .xai-note-t{ max-width: 26rem; }
  /* na coluna única a nota já encosta no ensaio, a seta não acrescenta nada */
  .xai-note-arrow{ display: none; }
  /* o fio vertical não faz sentido numa coluna só: a mudança de assunto
     passa a ser marcada por um fio horizontal e pela largura inteira */
  .sf-tech{ padding-top: 0; }
  .sf-me{
    width: 100%;
    margin-left: 0;
    padding: 0.95rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--doc-rule);
  }
  .paper-sheet .xai-row{ grid-template-columns: minmax(8rem, 14rem) 1fr 2.8rem; font-size: 0.7rem; }

  /* empilhado, os cinco retalhos viram uma sequência de uma coluna só */
  .rest{ padding-top: 4rem; }
  .rest-head{ grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 2rem; }
  .rh-open .scene-lead{ max-width: 22ch; }
  .rh-intro{ max-width: none; }
  .rh-note{ grid-column: auto; text-align: left; margin-top: 0; }
  .rest-grid{ grid-template-columns: 1fr; gap: 1.1rem; }
  .rest-entry{ grid-column: 1 !important; grid-row: auto !important; }
  .re-log{ align-self: auto; }
  .re-log .re-art, .re-log .log-card{ flex: none; }
  .log-card{ padding-top: 0; }
  .tk-game{ width: 93%; margin-bottom: -0.7rem; transform: rotate(1.3deg); }
  .tk-film{ grid-template-columns: minmax(0, 1fr) 3rem; }
  .lg-foot{ padding-top: 1.2rem; }
  .frag-a{ width: 30%; margin-top: 1.2rem; }
  .frag-b{ width: 36%; margin-top: 0; }
  .frag-c{ width: 30%; margin-top: 1.9rem; }
  .max-print, .re-max .max-print{ max-width: 26rem; }
  .foot-brand{ padding-top: 2.2rem; }
  .foot-cols{
    padding-top: 2.2rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }
  .foot-bottom{ margin-top: 2.2rem; }
  body.home.maze-live .close-play{ margin-top: 2rem; }
}

/* a lâmina ocupa a largura toda da folha e o puxador cresce pro toque */
@media (max-width: 760px){
  .probe-lens{ width: 100%; }
  .probe-grip{ width: 44px; height: 26px; }
  .probe-note{ max-width: none; }
}

@media (max-width: 560px){
  body.home{ --fs-body: 1rem; }
  .fund-panel{ flex-direction: column; }
  .fund-panel-rail{
    flex-direction: row;
    width: auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--norte-doc-line);
    overflow-x: auto;
  }
  .fund-tab{
    flex: 0 0 auto;
    width: auto;
    padding: .55rem .8rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .fund-tab.is-active{ border-left-color: transparent; border-bottom-color: var(--norte-doc-accent); }
  /* as três continuam lado a lado (quebrar em duas linhas desmontaria a
     prancha), só o papel e os clipes encolhem junto com elas */
  .frag{ padding: 5px 5px 0; }
  .frag-a{ margin-top: 0.9rem; }
  .frag-c{ margin-top: 1.4rem; }
  .frag figcaption{ font-size: 0.54rem; letter-spacing: 0.1em; padding: 0.45rem 0 0.44rem; }
  .frag-pin{ top: -14px; width: 14px; height: 34px; left: 9px; }
  .frag-b .frag-pin{ left: 50%; }
  .frag-c .frag-pin{ left: auto; right: 9px; }
  .max-line-txt{ font-size: 1.26rem; }
  .paw-stamp{ width: 46px; height: 46px; right: 9px; bottom: 8px; }
  .re-tune .tune-track{ font-size: 1.04rem; }
  .lf-t{ font-size: 1.1rem; }
  .paper-sheet{ padding-inline: 1.15rem; }
  .xai-note-t{ max-width: none; }
  .xn-hand{ font-size: 1.3rem; }
  .go-me{ font-size: 1.08rem; }
  /* o cabeçalho da ficha cabe numa linha só */
  .paper-sheet .xai-head{ font-size: 0.63rem; letter-spacing: 0.06em; }
  .xai-card{ padding: 1.05rem 1.05rem 1.2rem; }
  .paper-sheet .xai-row{ grid-template-columns: minmax(7rem, 12rem) 1fr 2.6rem; }
  .foot-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-bottom{ align-items: flex-start; flex-direction: column; }
  body.home .mz-canvas{ width: 100%; }
}

@media (max-width: 400px){
  .frag-board{ padding: 0.7rem 0.6rem 0.8rem; }
  .frag figcaption{ font-size: 0.5rem; letter-spacing: 0.06em; }
  .re-title{ font-size: 1.18rem; }
}

/* ---------- 11. impressão ---------------------------------------------- */

@media print{
  body.home{ background: #fff; color: #000; }
  .scene, .scene-plate, .paper-sheet, .doc-sheet, .probe, .probe-sheet{ background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .doc-sheet::before, .doc-sheet::after, .doc-tab{ display: none !important; }
  .scene-fol{ display: none !important; }
  .scene-plate .ask, .scene-plate .dat, .scene-plate .cap, .probe .dat, .probe-tag, .probe-note, .probe-stamp{ color: #000 !important; }
  .probe-stamp-ring{ border-color: #000 !important; color: #000 !important; }
  /* os gestos de bancada (régua, costura, puxador, clipes, grão) são
     materialidade de tela e não sobrevivem ao papel P&B, então saem */
  .probe-range, .probe-seam, .probe-grip, .probe-clip, .probe-note-clip, .probe-lens::after{ display: none !important; }
  .probe-acetate::before, .probe-acetate::after{ display: none !important; }
  .probe-sheet::before, .probe-sheet::after{ display: none !important; }
  .probe-sheet, .probe-note{ transform: none !important; background: #fff !important; box-shadow: none !important; }
  .probe-acetate{ opacity: 1 !important; transform: none !important; clip-path: inset(0 0 0 55%) !important; }
  .plate-now{ transform: none !important; box-shadow: none !important; background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .plate-now::before{ display: none !important; }
  .plate-now-k, .plate-now-t{ color: #000 !important; }
  .sheet-turn{ display: none; }
  .stage, .stage.plate{ display: block; }
  .fund-doc{ transform: none; margin: 1rem 0; }
  .fund-panel{ background: #fff !important; color: #000 !important; border: 1px solid #000; box-shadow: none !important; }
  .fund-panel-bar, .fund-panel-rail{ background: #fff !important; border-color: #999 !important; color: #000 !important; }
  .fund-tab.is-active{ background: none !important; }
  .fund-txt .h3-title::after{ display: none !important; }
  .fc-tick path{ stroke: #000 !important; stroke-dashoffset: 0 !important; }
  .fc-tick rect{ stroke: #999 !important; }
  .fund-panel-view[hidden]{ display: block !important; }
  .fund-panel-h, .fund-check li, .fund-check code, .fund-lessons li,
  .fund-lessons li code, .fl-n, .fund-lessons-more, .fund-tab,
  .fund-panel-lede, .fund-panel-note, .fund-topics, .fund-levels li,
  .lv-label, .lv-n, .fund-extras li, .fx-label,
  .fund-kv dt, .fund-kv dd{ color: #000 !important; }
  /* Norte: no papel a base, o diagrama, o clipe e a marca de bússola saem;
     as telas voltam a ser três imagens em linha e a ficha vira folha branca */
  .norte-bg, .norte-diagram, .norte-doc-clip, .norte-doc-mark{ display: none !important; }
  .norte-phones::after{ display: none !important; }
  .norte-stage{ padding: 0 !important; }
  .norte-phones{ display: block; margin: 0; perspective: none; }
  .phone{ transform: none !important; display: inline-block; width: 30% !important; margin: 0 1% !important; vertical-align: bottom; filter: none !important; }
  .phone-frame{ box-shadow: 0 0 0 1px #000 !important; }
  .norte-views{ color: #000 !important; margin-left: 0; }
  .norte-doc-wrap, .norte-tail{ transform: none !important; }
  .norte-doc{ overflow: visible; background: #fff !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; }
  .norte-doc-h, .norte-doc .nn-term, .norte-doc .nn-desc, .nd-fig{ color: #000 !important; }
  .nd-mark{ stroke: #000 !important; }
  .close-play, .term-open, .hero-min-scroll{ display: none !important; }
  /* CENA 4: no papel as entradas viram fotos e texto. Clipe, carimbo e
     rabiscos são materialidade de tela e saem. */
  .frag-pin, .paw-stamp, .re-side, .re-scribbles, .tune-play-icn, .tk-stub{ display: none !important; }
  .tk-title, .tk-kick, .tk-num, .tk-rate, .tk-max, .tk-star, .re-title, .re-text, .re-head, .lg-foot{ color: #000 !important; }
  .rest-entry, .frag-board, .frag, .max-print, .log-card, .tk{
    transform: none !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .rest-entry, .frag-board, .frag, .tk{ border: 1px solid #000 !important; }
  .tk-film{ grid-template-columns: 1fr; }
  .tk-game{ margin-bottom: 0.5rem !important; }
  .frag-b, .frag-c{ margin-left: 0.4rem; }
  .frag-a, .frag-c{ margin-top: 0; }
  .max-line-txt, .frag figcaption{ color: #000 !important; }
}

/* ==========================================================================
   12. peças que já existiam, agora dentro da publicação
   ========================================================================== */

/* — o quadro de peças, guardado atrás de uma etiqueta presa com fita — */
.lab{ margin: 0; }
.lab > summary{
  position: relative;
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-plate-2);
  padding: 0.5rem 1rem 0.5rem 0.9rem;
  background: rgba(236,232,220,0.03);
  border: 1px solid rgba(236,232,220,0.13);
  transition: color .18s ease, border-color .18s ease;
}
.lab > summary::-webkit-details-marker{ display: none; }
.lab > summary::before{
  content: "\2192";
  color: var(--green-plate);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform .2s ease;
}
.lab[open] > summary::before{ transform: rotate(90deg); }
/* fita crepe segurando a etiqueta */
.lab > summary::after{
  content: "";
  position: absolute;
  top: -7px; right: 16px;
  width: 44px; height: 15px;
  transform: rotate(-3deg);
  background: rgba(178,176,148,0.2);
  border: 1px solid rgba(140,138,110,0.14);
}
:root[data-theme="dark"] .lab > summary::after{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
.lab > summary:hover{ color: var(--on-plate); border-color: rgba(236,232,220,0.24); }
.lab > summary:focus-visible{ outline: 2px solid var(--green-plate); outline-offset: 4px; }
.lab-body{ padding-top: 1.4rem; }

.scene-plate .board{ margin: 0; color: var(--on-plate); }

/* — a folha do classificador · ficha de papel presa por clipe — */

/* filete a caneta fechando a pergunta, com o ponto de partida marcado */
.paper-sheet .sheet-ask::after{
  content: "";
  display: block;
  width: 5.4rem;
  height: 6px;
  margin-top: 1.05rem;
  background:
    radial-gradient(circle at 3px 50%, var(--accent) 2.6px, transparent 2.9px) no-repeat left center / 100% 100%,
    linear-gradient(var(--accent), var(--accent)) no-repeat left center / 100% 1px;
}

/* o padding à direita é o espaço em que os papéis de baixo e o clipe podem
   sair da ficha sem encostar na borda da folha */
.xai-aside{ position: relative; padding-right: 14px; }

/* anotação manuscrita, agora no topo do texto corrido (primeiro filho de
   .sheet-text), não mais encostada na pergunta: fica logo acima do ensaio,
   que é do que ela fala ("esse texto é sobre mim"). Uma peça só, em dois
   tempos: a mão diz de quem é o texto, a linha miúda abaixo diz o que foi
   feito com ele. O mecanismo em si continua explicado dentro da ficha.
   A seta é curta e absoluta dentro da .xai-note: cai da anotação até a
   primeira linha do ensaio, só um gesto de "é isto aqui", sem cruzar a
   folha. */
.xai-note{
  position: absolute;
  top: 7rem;
  right: 11rem;
  z-index: 3;
  margin: 0;
  max-width: none;
}
.xai-note-t{
  display: block;
  max-width: none;
  transform: rotate(-1.5deg);
  transform-origin: left bottom;
}
.xn-hand{
  display: block;
  white-space: nowrap;
  font-family: 'Caveat', var(--serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.14;
  color: #3E4139;
}
.xn-sub{
  display: block;
  margin-top: 0.4rem;
  max-width: 15rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6A6E62;
}
/* a seta manuscrita saía daqui até o ensaio, mas o filete a caneta sob a
   pergunta (.sheet-ask::after) já é um gesto à mão na mesma dobra e a nota
   fica logo acima do texto que ela comenta. Ficou só o filete. */
.xai-note-arrow{ display: none; }

/* a ficha: papel um tom acima da folha, fora de esquadro, dois papéis
   empilhados atrás, presa por um clipe que sai pra fora da borda */
.xai-card{
  position: relative;
  isolation: isolate;
  margin-top: 1rem;
  background: color-mix(in srgb, var(--doc-paper) 62%, #fff);
  border: 1px solid rgba(25,27,24,0.11);
  /* a faixa maior à direita é a pista do carimbo vertical */
  padding: clamp(1.1rem, 1.9vw, 1.5rem) 1.8rem clamp(1.25rem, 2.1vw, 1.7rem) clamp(1.15rem, 2vw, 1.6rem);
  transform: rotate(-0.8deg);
  box-shadow: var(--sh-rest);
}
/* as duas folhas de baixo: sem borda, senão os fios se cruzam em diagonal
   sobre o topo da ficha e viram sujeira. O que as separa é o tom e a sombra */
.xai-card::before,
.xai-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.xai-card::before{
  background: color-mix(in srgb, var(--doc-paper) 82%, #fff);
  transform: translate(5px, 5px) rotate(0.5deg);
  box-shadow: 0 8px 18px -13px rgba(25,27,24,0.4);
}
.xai-card::after{
  background: color-mix(in srgb, var(--doc-paper) 92%, #fff);
  transform: translate(10px, 10px) rotate(1.1deg);
  box-shadow: 0 10px 20px -13px rgba(25,27,24,0.35);
}
:root[data-theme="dark"] .xai-card{ box-shadow: var(--sh-rest); }

/* grão de papel na ficha, mesma receita da prancha da capa: uma turbulência
   fina e uma alongada (fibra), multiplicadas e dessaturadas */
.xai-card-grain{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.085;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch' result='fine'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.32' numOctaves='2' seed='3' stitchTiles='stitch' result='fiber'/%3E%3CfeBlend in='fine' in2='fiber' mode='multiply' result='blended'/%3E%3CfeColorMatrix in='blended' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .xai-card-grain{ opacity: 0.06; mix-blend-mode: screen; }
/* o conteúdo fica acima do grão (clipe e carimbo já são absolutos) */
.xai-card > .xai-panel{ position: relative; z-index: 1; }
.xai-card > .xai-clip,
.xai-card > .xai-card-edge{ z-index: 2; }

.xai-clip{
  position: absolute;
  top: -19px; right: 20px;
  width: 21px; height: 52px;
  color: #86847A;
  filter: drop-shadow(0 1.5px 1.5px rgba(25,27,24,0.3));
}
.xai-clip svg{ display: block; width: 100%; height: 100%; }
:root[data-theme="dark"] .xai-clip{ color: #9c998e; }

.xai-card-edge{
  position: absolute;
  top: 50%; right: 5px;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--doc-ink);
  opacity: 0.16;
  pointer-events: none;
}

/* o painel volta a ser só o conteúdo dentro da ficha */
.paper-sheet .xai-panel{
  display: block;
  margin: 0;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  opacity: 1;
}
.paper-sheet.xai-on .xai-panel{ animation: none; }

.paper-sheet .xai-head{
  color: var(--accent-strong);
  border-bottom: 1px solid var(--doc-rule);
  /* a folga à direita é a faixa por onde o clipe desce */
  padding: 0 1.7rem 0.5rem 0;
  margin-bottom: 0.75rem;
}
.paper-sheet .xai-count{ color: var(--accent-strong); }
.paper-sheet .xai-hint{
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4C5049;
  margin-bottom: 1rem;
  max-width: none;
}

.paper-sheet .xai-bars{ min-height: 0; margin: 0; gap: 0.6rem; }
/* a 3ª coluna guarda o valor e a variação (▲/▼) do último clique: apertada
   demais, a variação vazava por cima do carimbo da borda */
.paper-sheet .xai-row{
  grid-template-columns: minmax(0, 10.6rem) minmax(3.5rem, 1fr) 4.5rem;
  gap: 0.5rem 0.6rem;
  font-size: 0.65rem;
}
.paper-sheet .xai-d{ min-width: 1.85rem; margin-left: 0.3rem; font-size: 0.58rem; }
.paper-sheet .xai-name{ color: #43473F; }
.paper-sheet .xai-row.top .xai-name{ color: var(--doc-ink); }
.paper-sheet .xai-track{ border-radius: 0; height: 8px; background: rgba(40,90,67,0.15); }
.paper-sheet .xai-fill{ border-radius: 0; background: var(--accent); }
.paper-sheet .xai-row.top .xai-fill{ background: var(--accent-strong); }
.paper-sheet .xai-w{ color: #6A6E63; }
.paper-sheet .xai-row.top .xai-w{ color: var(--accent-strong); }

.xai-div{ border: 0; border-top: 1px dashed var(--doc-rule); margin: 0.95rem 0 0.8rem; }

.paper-sheet .xai-pred{
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  margin: 0 0 1rem;
}
.xai-pred-label{
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.02em;
  color: #6A6E63;
}
.xai-pred-val{
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--accent-strong);
}
.paper-sheet .xai-pred.faint .xai-pred-val{ color: #6A6E63; }

.paper-sheet .xai-btn{
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  border-color: var(--doc-rule);
  border-radius: 0;
  color: #4C5049;
  background: transparent;
  gap: 0.45rem;
}
.xai-btn-i{ width: 14px; height: 14px; fill: none; stroke: currentColor; flex: none; }
.paper-sheet .xai-btn:hover{ color: var(--ink-green); border-color: var(--ink-green); }
.paper-sheet .xai-btn[aria-pressed="true"]{ background: transparent; border-color: var(--doc-rule); color: #5A5E55; }
.xai-btn .xb-on{ display: none; }
.xai-btn[aria-pressed="true"] .xb-off{ display: none; }
.xai-btn[aria-pressed="true"] .xb-on{ display: inline; }

.paper-sheet .xai-chip{ border-radius: 0; }
.paper-sheet .xai-reveal{ margin-top: 0.85rem; }
.paper-sheet .xai-reveal a{ border-bottom: 1px solid #BBD0C2; text-decoration: none; }
.paper-sheet .xai-reveal a:hover{ border-bottom-color: var(--ink-green); }
.paper-sheet .xai-on .xai-term{ border-radius: 0; box-shadow: none; background: rgba(40,90,67,0.16); }
.paper-sheet .xai-on .xai-term:hover{ background: rgba(40,90,67,0.26); box-shadow: none; }
.paper-sheet .xai-on .xai-term.tie-lit,
.paper-sheet .xai-on .xai-time.tie-lit{ background: rgba(40,90,67,0.32); box-shadow: none; border-radius: 0; }
.paper-sheet .xai-on .xai-ctx.rel,
.paper-sheet .xai-on .xai-time.rel,
.paper-sheet .xai-on .xai-term.rel{ background: rgba(40,90,67,0.2); box-shadow: none; border-radius: 0; }

/* contexto e tempo na folha de papel: mesmo desenho, cores do documento */
.paper-sheet .xai-on .xai-ctx,
.paper-sheet .xai-on .xai-time{ text-decoration-color: #9a9d92; }
.paper-sheet .xai-on .xai-ctx.masked{ color: #8b8f84; text-decoration-color: #8b8f84; }
.paper-sheet .xai-on .xai-time.masked{ color: rgba(30,32,26,0.3); background: rgba(58,62,54,0.4); }

.paper-sheet .xai-depth{ margin-bottom: 0.9rem; }
.paper-sheet .xai-step{ color: #6A6E63; border-radius: 0; }
.paper-sheet .xai-step:hover{ color: var(--ink-green); }
.paper-sheet .xai-step[aria-pressed="true"]{ color: var(--ink-green); border-bottom-color: var(--ink-green); }
.paper-sheet .xai-step-sep{ color: #9a9d92; }

.paper-sheet .xai-why{ font-family: var(--serif); font-size: 0.9rem; line-height: 1.5; color: #4C5049; max-width: none; }
.paper-sheet .xai-why-q{ color: #6A6E63; }
.paper-sheet .xai-why-ok{ color: #6A6E63; }

.paper-sheet .xai-orig{ color: var(--ink-green); border-bottom-color: #BBD0C2; border-radius: 0; }
.paper-sheet .xai-orig:hover{ border-bottom-color: var(--ink-green); }

@media (prefers-reduced-motion: reduce){
  .xai-fill{ transition: none; }
}

/* — chip dos easter eggs e botão de topo acompanham a paleta nova — */
body.home .egg-count{ border-radius: 0; }
body.home .mz-controls button{ border-radius: 0; }
body.home .copy-mail{ border-radius: 0; }

/* o botão de voltar ao topo deixa de ser um "↑" solto: ganha os cantos
   à mão e uma superfície de papel discreta, como o resto dos objetos. */
body.home .to-top{
  border-radius: 3px 8px 4px 7px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  box-shadow: var(--sh-rest);
}
body.home .to-top:hover{ color: var(--accent); border-color: var(--accent); }

/* o cursor diz o que cada peça é: a lâmina do Grad-CAM se arrasta, as
   fotografias são só imagem. a nota "agora" não é mais link (ver acima),
   então fica com o cursor padrão. */
.probe-lens{ cursor: grab; }
.probe-lens:active{ cursor: grabbing; }
.frag, .frag img, .max-print, .max-print img{ cursor: default; }

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


/* ==========================================================================
   13. correções de acabamento sobre a base compartilhada
   ========================================================================== */

/* o traço a caneta sob todo h2 era assinatura da versão anterior */
body.home h2::after,
body.home h3::after{ content: none; display: none; }

/* dentro da folha de papel a tinta volta a ser tinta */
.paper-sheet .go2{ color: var(--doc-ink); border-bottom-color: var(--doc-rule); }
.paper-sheet .go2::before{ color: var(--ink-green); }
.paper-sheet .go2:hover{ color: var(--ink-green); border-bottom-color: var(--ink-green); }
.paper-sheet .dat{ color: #54584F; }
.paper-sheet .cap{ color: #4C5049; }

/* o fecho pousa numa superfície um pouco mais funda */
body.home footer#contato{ background: var(--paper-mineral); }
:root[data-theme="dark"] body.home footer#contato{ background: #131512; }

/* no escuro os prints do Norte (UI escura) somem contra a prancha quase
   preta. Um anel de luz mais forte e um corpo de aparelho mais claro
   devolvem o contorno do aparelho. */
:root[data-theme="dark"] .phone-frame{ box-shadow: 0 0 0 1px rgba(236,232,220,0.24), inset 0 0 0 1px rgba(255,255,255,0.05), 0 22px 44px -18px rgba(0,0,0,0.66); }
:root[data-theme="dark"] .phone-b .phone-frame,
:root[data-theme="dark"] .phone-c .phone-frame{ box-shadow: 0 0 0 1px rgba(236,232,220,0.18), inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 24px -12px rgba(0,0,0,0.55); }
:root[data-theme="dark"] .phone-screen{ box-shadow: inset 0 0 0 1px rgba(236,232,220,0.08); }