/* ============================================================
   3tech — style guide herdado do 404.html
   ink / paper / acid · Fraunces + JetBrains Mono
   ============================================================ */

:root{
  --ink:   #0b0b0c;
  --ink-2: #121214;
  --ink-3: #191919;
  --paper: #f3f0e9;
  --dim:   #8a8578;
  --acid:  #c6f24e;                /* hsl(76 86% 63%) — o acento */
  --moss:  #8fae3c;                /* hsl(76 49% 46%) — mesmo matiz, mais fundo: áreas grandes chapadas */
  --line:  rgba(243,240,233,.12);

  --serif: "Fraunces", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(1.5rem, 5vw, 3.5rem);
  --ease: cubic-bezier(.2,.9,.2,1);
}

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

/* base exigida pelo Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-scrolling iframe{ pointer-events:none; }

/* pré-animação: esconde o que o GSAP vai animar, sem flash.
   Sem JS a classe nunca entra e tudo aparece normal. */
.pre-anim .hero, .pre-anim .nav, .pre-anim .tick, .pre-anim .frame{ visibility:hidden; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:clamp(.85rem,.8rem + .2vw,.95rem);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--acid); color:var(--ink); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#26261f; }
::-webkit-scrollbar-thumb:hover{ background:var(--acid); }

.sr-o{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- grão / moldura / ticks ---------- */
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
}
.frame{
  position:fixed; inset:22px; z-index:5; pointer-events:none;
  border:1px solid var(--line);
}
/* nas laterais e girados: os cantos de cima são da nav, os de baixo do rodapé */
.tick{
  position:fixed; z-index:6; top:50%;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
/* translate primeiro leva o centro pro eixo, o rotate gira em torno dele */
.tick--l{ left:38px;  transform:translate(-50%,-50%) rotate(-90deg); }
.tick--r{ right:38px; transform:translate(50%,-50%)  rotate(90deg);  }
.tick i{ font-style:normal; color:var(--acid); }
/* abaixo disso o conteúdo chega perto da borda e encostaria nos ticks */
@media (max-width:1100px){ .tick{ display:none; } }

/* ---------- tipografia ---------- */
.h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.4rem,1.3rem + 5vw,5.5rem);
  line-height:.95; letter-spacing:-.04em;
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
em{ font-style:italic; color:var(--acid); }

.kicker{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.kicker::before{ content:""; width:34px; height:1px; background:var(--acid); flex:none; }
/* .42em de tracking não cabe em tela estreita — a linha quebrava feio */
@media (max-width:640px){
  .kicker{ font-size:10px; letter-spacing:.2em; gap:9px; }
  .kicker::before{ width:22px; }
}

/* máscaras de reveal */
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:block; will-change:transform; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform,opacity; }

/* rabisco à mão — quebra a régua */
.scrawl{
  display:inline-block;
  font-family:var(--serif); font-style:italic; font-size:1rem;
  color:var(--dim);
  transform:rotate(-3deg);
  margin-top:1.2rem;
}

/* ---------- botões (do 404) ---------- */
.magnetic{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 30px; border-radius:999px;
  background:var(--acid); color:var(--ink);
  font-weight:500; font-size:13px; letter-spacing:.02em;
  text-transform:uppercase; white-space:nowrap;
  will-change:transform;
}
.magnetic .arrow{ transition:transform .35s var(--ease); }
.magnetic:hover .arrow{ transform:translateX(5px); }

.ghost{
  color:var(--dim); font-size:13px;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.ghost:hover{ color:var(--paper); border-color:var(--paper); }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:48px;
}
.loader__mark{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,7vw,3.5rem);
  letter-spacing:-.02em;
}
.loader__pct{
  font-size:clamp(2rem,7vw,3.5rem); font-weight:400;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.dot{ color:var(--acid); }

/* ---------- cursor ---------- */
/* só esconde o cursor nativo se o custom estiver mesmo ativo (o JS põe a classe) */
.has-cursor, .has-cursor *{ cursor:none !important; }

.cursor{
  position:fixed; top:0; left:0; z-index:150;
  pointer-events:none; display:none;
  will-change:transform;
}
.cursor.is-on{ display:block; }

/* ponta da seta ancorada no ponteiro (~4/24 do viewBox) */
.cursor__arrow{
  position:absolute; top:-4px; left:-4px;
  width:26px; height:26px;
  fill:var(--paper); stroke:var(--ink); stroke-width:1.1; stroke-linejoin:round;
  transform-origin:15% 15%; /* encolhe em direção à ponta, não ao centro */
  will-change:transform;
}
/* centrado no ponteiro via margem, não transform: o GSAP é dono do transform (scale) */
.cursor__ring{
  position:absolute; top:0; left:0;
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; background:var(--acid);
  display:grid; place-items:center;
  will-change:transform;
}
.cursor__label{
  font-size:9px; font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.08em;
  white-space:nowrap; opacity:0;
}
@media (hover:none),(pointer:coarse){ .cursor{ display:none !important; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  /* grid com colunas laterais fixas (1fr) em vez de space-between: assim a largura do
     logo não entra na conta e o scramble do hover não empurra os links do lado. */
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:2rem;
  padding:44px 48px;
  transition:padding .4s var(--ease), transform .4s var(--ease);
}
.nav.is-stuck{ padding-top:24px; padding-bottom:24px; }
.nav.is-hidden{ transform:translateY(-160%); }

.logo{
  display:inline-flex; align-items:baseline; gap:1px;
  font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-.02em;
}
/* só o do header cresce; o do rodapé é marca secundária e fica nos 22px */
.nav .logo{ font-size:28px; justify-self:start; }
.logo__txt{ display:inline-block; transition:color .25s var(--ease); }
/* uma célula por letra, largura travada no JS: a soma não muda durante o scramble,
   então o ponto acid não sai do lugar. Sem overflow:hidden de propósito — ele mudaria
   a baseline do inline-block e desalinharia o texto do ponto. */
.logo__c{ display:inline-block; text-align:center; }
.logo.is-scrambling .logo__txt{ color:var(--acid); }
/* inline não aceita scale — o GSAP precisa disso pra dar o pulo no ponto */
.dot{ display:inline-block; }
.nav__links{ display:flex; gap:2rem; justify-self:center; }
.nav__links .ghost{ border-bottom-color:transparent; }
.nav__links .ghost:hover{ border-bottom-color:var(--paper); }
.nav__cta{ justify-self:end; }

@media (max-width:900px){
  .nav{ padding:34px 34px; }
  .nav__links, .nav__cta{ display:none; }
  /* com links e CTA fora, sobram logo + burger: sem isso o burger cairia
     na coluna do meio em vez de encostar na direita */
  .nav{ grid-template-columns:1fr auto; }
  .burger{ justify-self:end; }
}

.burger{
  display:none; position:relative; z-index:2;
  width:42px; height:42px; border:1px solid var(--line);
  border-radius:999px; background:transparent; cursor:pointer;
}
.burger span{
  position:absolute; left:50%; width:15px; height:1px; background:var(--paper);
  transition:transform .4s var(--ease);
}
.burger span:nth-child(1){ transform:translate(-50%,-3px); }
.burger span:nth-child(2){ transform:translate(-50%,3px); }
.burger.is-open span:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translate(-50%,0) rotate(-45deg); }
@media (max-width:900px){ .burger{ display:block; } }

.menu{
  position:fixed; inset:0; z-index:39;
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:7rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
}
.menu__list a{
  display:block; overflow:hidden;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.2rem,10vw,3.6rem);
  letter-spacing:-.03em; line-height:1.3;
}
/* sem transform aqui de propósito: o GSAP resolve % do computed matrix pra px e soma
   com o yPercent dele, cravando um offset que o yPercent:0 nunca limpa. Quem posiciona
   é o gsap.set no main.js. Sem risco de flash: o .menu já nasce clipado e invisível. */
.menu__list a span{ display:block; }
.menu__list a:hover{ color:var(--acid); }
.menu__foot{
  margin-top:auto; padding-top:2rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.3rem;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.menu__foot a:hover{ color:var(--acid); }

/* ============ HERO ============ */
.hero{
  position:relative; z-index:10;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem var(--pad) 5rem;
  max-width:1500px; margin-inline:auto;
}
.hero .kicker{ margin-bottom:24px; }

.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem,.9rem + 7.6vw,7.5rem);
  line-height:.92; letter-spacing:-.045em;
  margin-bottom:clamp(2.5rem,7vh,4.5rem);
}

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2.5rem;
  border-top:1px solid var(--line); padding-top:2rem;
}
.hero__lede{ max-width:44ch; color:var(--dim); }
.hero__actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

.hero__hint{
  position:absolute; bottom:2.2rem; right:var(--pad);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
@media (max-width:900px){ .hero__hint{ display:none; } }

/* ============ MARQUEE fantasma ============ */
.ghost-marquee{
  position:relative; z-index:1;
  overflow:hidden; white-space:nowrap;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(4rem,13vw,9rem); line-height:1;
  color:rgba(243,240,233,.045);
  -webkit-user-select:none; user-select:none; pointer-events:none;
  margin-block:-2vh 2vh;
}
.ghost-marquee span{ display:inline-block; padding-right:.2em; will-change:transform; }

/* ============ MANIFESTO ============ */
.manifesto{
  position:relative; z-index:10;
  padding:clamp(6rem,16vh,12rem) var(--pad);
  max-width:1100px; margin-inline:auto;
}
.manifesto__text{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.4vw,3.2rem);
  line-height:1.25; letter-spacing:-.02em;
}
.manifesto__text .word > span{ opacity:.16; }
.manifesto .scrawl{ margin-left:.5rem; }

/* ============ SEÇÕES ============ */
.section{
  position:relative; z-index:10;
  padding:clamp(4rem,10vh,8rem) var(--pad);
  max-width:1500px; margin-inline:auto;
}

/* ---------- camadas empilhadas ---------- */
/* perspectiva por card (transformPerspective no GSAP), não no .stack:
   perspective no pai viraria containing block e complicaria o sticky dos filhos */
.stack{ --stack-top:max(12vh,110px); }

/* cada card encosta um degrau abaixo do anterior: é isso que deixa o baralho visível
   atrás do card da vez, em vez de uma pilha achatada */
.stack__card:nth-child(2){ top:calc(var(--stack-top) + 16px); }
.stack__card:nth-child(3){ top:calc(var(--stack-top) + 32px); }
.stack__card:nth-child(4){ top:calc(var(--stack-top) + 48px); }

.stack__card{
  position:sticky; top:var(--stack-top);
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem 2rem;
  align-items:start;
  min-height:clamp(330px,50vh,440px);
  padding:clamp(1.6rem,4vw,2.8rem);
  margin-bottom:1.6rem;
  border:1px solid var(--line); border-radius:6px;
  background:var(--ink-2);
  overflow:hidden;
  transform-origin:50% 0%;
  will-change:transform;
}
.stack__n{
  font-size:11px; letter-spacing:.18em; color:var(--acid);
  border:1px solid var(--line); border-radius:999px; padding:4px 12px;
}
.stack__body{ max-width:50ch; }
.stack__body h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.8rem,1.1rem + 2.2vw,3.2rem);
  letter-spacing:-.03em; line-height:1; margin-bottom:1rem;
}
.stack__body p{ color:var(--dim); margin-bottom:1.6rem; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px;
}

.stack__art{ grid-column:1/-1; min-height:110px; border-radius:4px; border:1px solid var(--line); }
@media (min-width:1000px){
  .stack__card{ grid-template-columns:auto 1.15fr .85fr; align-items:center; }
  .stack__n{ align-self:start; }
  .stack__art{ grid-column:auto; height:100%; min-height:220px; }
}

/* placeholder chapado — troque por imagem real quando tiver.
   A malha é em ink (não em paper): sobre o moss, linha clara sumia. */
[data-art]{
  position:relative; overflow:hidden;
  background:var(--moss);
  transition:filter .5s var(--ease);
}
[data-art]::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,11,12,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,12,.09) 1px, transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}

/* ---- motivos animados dos retângulos (um por card de serviço, montados no JS) ----
   marcas em ink sobre o moss, um acento acid em cada. A malha ::after fica por cima,
   dando textura de "tela". Só existem com JS: são decorativos e aria-hidden. */
.motif{ position:absolute; inset:0; pointer-events:none; }
.motif > *{ position:absolute; }
.m-bar,.m-col,.m-dot,.m-core{ background:var(--ink); opacity:.55; }
.m-acid{ background:var(--acid); opacity:.9; }

/* 1 · Site — wireframe montando */
.m-site{ inset:20% 12%; }
.m-site .m-dot{ width:6px; height:6px; border-radius:50%; top:0; opacity:.4; }
.m-site .m-bar{ height:7px; border-radius:2px; left:0; }

/* 2 · Loja — barras de venda subindo */
.m-loja{ inset:auto 12% 20% 12%; height:52%; }
.m-loja .m-col{ bottom:0; width:10%; border-radius:2px 2px 0 0; transform-origin:bottom center; }

/* 3 · App — ping de sinal (traço grosso, alto contraste) */
.m-app .m-core{ width:16px; height:16px; border-radius:50%; left:50%; top:50%; margin:-8px 0 0 -8px; opacity:.85; }
.m-app .m-ring{ border-radius:50%; border:3px solid var(--ink); left:50%; top:50%; }

/* 4 · Sistema — varredura com brilho + células que acendem em acid */
.m-sys .m-scan{ left:5%; right:5%; height:3px; background:var(--acid); box-shadow:0 0 10px 1px rgba(198,242,78,.7); }
.m-sys .m-cell{ border:2px solid var(--ink); opacity:.25; border-radius:2px; }

/* ---------- já feitos ---------- */
/* padding-top igual ao da .section (fazemos), então "Coisas no ar" alinha com
   "Quatro coisas" e os cards fluem logo abaixo do título — sem 100svh nem
   centralização (que jogavam os cards pro meio, criando um gap sob o título). */
.work{ position:relative; z-index:10; padding:clamp(4rem,10vh,8rem) 0; overflow:hidden; }
.work__head{ padding-inline:var(--pad); max-width:1500px; margin-inline:auto; }
.work__track{
  display:flex; gap:clamp(1rem,2.5vw,2rem);
  padding-inline:var(--pad);
  width:max-content; will-change:transform;
}
.proj{ width:clamp(250px,72vw,440px); flex:none; }
.proj__thumb{
  /* 2:1 = a proporção do print do site: cabe inteiro, sem o object-fit decepar
     o "FURIOUS" de um lado ou o burger do outro */
  position:relative; aspect-ratio:2/1;
  border-radius:4px; border:1px solid var(--line);
  margin-bottom:1rem;
  /* overflow vinha do [data-art]; nos cards com print real não há data-art e a
     imagem vazaria pra fora do border-radius.
     Sem background aqui de propósito: `.proj__thumb` e `[data-art]` têm a mesma
     especificidade, e como esta regra vem depois ela apagaria o moss dos
     placeholders. A imagem cobre o thumb inteiro, então fundo não faz falta. */
  overflow:hidden;
}
.proj__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
/* escalar/rotacionar não aparece em cor chapada — o hover agora clareia o bloco */
.proj:hover .proj__thumb{ filter:brightness(1.14); }

/* efeito "tecla de piano": bases alinhadas e alturas decrescentes — a fileira
   desce da esquerda (Furious, alta) pra direita, ocupa o vertical (sem o vazio
   embaixo dos cards) e o degrau leva o olho pra próxima seção.
   object-position:top mantém o topo do site (header/hero) visível no recorte. */
.work__track{ align-items:flex-end; }
.proj__thumb{ aspect-ratio:auto; height:var(--thumb-h,clamp(150px,32vh,260px)); }
.work .proj:nth-child(1){ --thumb-h:clamp(180px,40vh,320px); }
.work .proj:nth-child(2){ --thumb-h:clamp(162px,35vh,285px); }
.work .proj:nth-child(3){ --thumb-h:clamp(146px,30vh,250px); }
.work .proj:nth-child(4){ --thumb-h:clamp(130px,25vh,215px); }
.work .proj:nth-child(5){ --thumb-h:clamp(114px,20vh,180px); }
.proj h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.8rem); letter-spacing:-.02em;
  transition:color .3s;
}
.proj:hover h3{ color:var(--acid); }
.proj p{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }

/* sem GSAP horizontal (mobile) → swipe nativo */
.work__viewport.is-native{ overflow-x:auto; scroll-snap-type:x mandatory; }
.work__viewport.is-native .proj{ scroll-snap-align:center; }

/* ---------- como funciona ---------- */
.steps{ border-top:1px solid var(--line); }
.step{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2.5rem;
  padding:clamp(1.8rem,4.5vh,3rem) 0;
  border-bottom:1px solid var(--line);
}
.step__n{ font-size:11px; letter-spacing:.18em; color:var(--acid); padding-top:.7rem; }
.step h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  letter-spacing:-.03em; margin-bottom:.4rem;
}
.step p{ color:var(--dim); max-width:58ch; }
.step::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--acid); transition:width .5s var(--ease);
}
.step:hover::after{ width:100%; }

/* ---------- números ---------- */
.stats{
  position:relative; z-index:10;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-block:1px solid var(--line);
  max-width:1500px; margin-inline:auto;
}
.stat{ padding:clamp(2rem,5vw,3.2rem) var(--pad); border-right:1px solid var(--line); text-align:center; }
.stat:last-child{ border-right:0; }
.stat__n{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem,1.6rem + 3.4vw,4.5rem);
  line-height:1; letter-spacing:-.04em; color:var(--acid);
  font-variant-numeric:tabular-nums;
}
.stat__n--joke{ font-variant-numeric:normal; }
.stat p{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:.7rem; }

/* ---------- contato ---------- */
.cta{
  position:relative; z-index:10;
  text-align:center;
  padding:clamp(6rem,16vh,11rem) var(--pad);
}
.cta__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(4rem,2rem + 12vw,11rem);
  line-height:.9; letter-spacing:-.05em;
  margin-bottom:1.5rem;
}
/* o "o" de Bora vira olho — mesma brincadeira do zero do 404.
   Dimensões em em: acompanham o clamp do título sem recalcular nada.
   inline-block sem conteúdo em fluxo → a base do anel assenta na baseline, igual a um "o". */
.eyeball{
  position:relative; display:inline-block;
  width:.48em; height:.48em;
  border:.07em solid var(--acid); border-radius:50%;
  transform:scaleY(.08); /* fechado: abre quando a seção entra */
}
.pupil{
  position:absolute; top:50%; left:50%;
  width:.15em; height:.15em; margin:-.075em 0 0 -.075em;
  border-radius:50%; background:var(--paper);
  will-change:transform;
}

.cta__sub{ color:var(--dim); max-width:46ch; margin:0 auto 2.5rem; }
.cta__mail{
  display:inline-block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,.9rem + 2vw,2.6rem);
  letter-spacing:-.02em; color:var(--acid);
  border-bottom:1px solid var(--line);
  padding-bottom:.25rem; margin-bottom:2.5rem;
  word-break:break-word; will-change:transform;
  transition:border-color .4s var(--ease);
}
.cta__mail:hover{ border-color:var(--acid); }
.cta__row{ display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap; }

/* ---------- rodapé ---------- */
.foot{
  position:relative; z-index:10;
  /* colunas laterais iguais (1fr): é isso que centraliza o texto do meio de verdade.
     Com space-between ele ficava torto, puxado pela largura do logo vs. do copyright. */
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1rem;
  padding:2.5rem 48px 40px;
  border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.foot > :first-child{ justify-self:start; }
.foot > :nth-child(2){ text-align:center; }
.foot > :last-child{ justify-self:end; }
@media (max-width:640px){
  .foot{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:2rem 34px 64px; }
  .foot > :first-child, .foot > :last-child{ justify-self:center; }
  .frame{ inset:14px; }
  .tick.tr{ display:none; }
  .loader{ padding:34px; }
}

:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .stack__card{ position:static; }
  .loader{ display:none; }
  .manifesto__text .word > span{ opacity:1; }
}