:root{
  --ink:#0F0E0F;
  --paper:#F2F2F2;
  --lime:#DAFE00;
  --pink:#FF12B7;
  --mono:'Space Mono', monospace;
  --grot:'Space Grotesk', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--grot);
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--lime);color:var(--ink)}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;
  mix-blend-mode:difference;
}
nav .logo{font-family:var(--mono);font-weight:700;font-size:1.3rem;letter-spacing:-0.05em;color:var(--paper);text-decoration:none}
nav ul{display:flex;gap:32px;list-style:none}
nav ul a{
  font-family:var(--mono);font-size:.78rem;color:var(--paper);
  text-decoration:none;text-transform:lowercase;
  position:relative;
}
nav ul a::after{
  content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;
  background:var(--paper);transition:width .3s ease;
}
nav ul a:hover::after,nav ul a:focus-visible::after,nav ul a[aria-current="page"]::after{width:100%}
nav ul a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}

/* ---------- BLOB ---------- */
.blob{
  position:relative;width:min(70vw,720px);height:min(70vw,720px);
  filter:blur(60px) saturate(1.4);
  opacity:.85;
  animation:blobSpin 40s linear infinite;
}
.blob span{
  position:absolute;border-radius:50%;
  mix-blend-mode:screen;
  animation:blobMorph 12s ease-in-out infinite alternate;
}
.blob span:nth-child(1){width:60%;height:60%;top:5%;left:10%;background:#7b2ff7;animation-delay:0s}
.blob span:nth-child(2){width:50%;height:55%;top:30%;left:40%;background:var(--pink);animation-delay:-3s}
.blob span:nth-child(3){width:45%;height:45%;top:45%;left:8%;background:#ff7a18;animation-delay:-6s}
.blob span:nth-child(4){width:38%;height:40%;top:12%;left:48%;background:#18c8ff;animation-delay:-9s}
@keyframes blobSpin{to{transform:rotate(360deg)}}
@keyframes blobMorph{
  0%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.25) translate(6%, -4%)}
  100%{transform:scale(.9) translate(-5%, 6%)}
}

/* ---------- PAGE HERO (internal pages) ---------- */
.page-hero{
  position:relative;
  padding:180px 40px 70px;
  overflow:hidden;
}
.page-hero .blob{
  position:absolute;width:440px;height:440px;
  right:-120px;top:-120px;opacity:.45;
  animation-duration:55s;
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(2.6rem,7vw,5.2rem);
  letter-spacing:-0.05em;line-height:1;
}
.page-hero p.lede{
  margin-top:22px;max-width:560px;
  font-weight:300;font-size:1.1rem;color:rgba(242,242,242,.75);
}

/* ---------- MARQUEE ---------- */
.marquee{
  border-top:1px solid rgba(242,242,242,.15);
  border-bottom:1px solid rgba(242,242,242,.15);
  overflow:hidden;white-space:nowrap;
  padding:14px 0;
  background:var(--ink);
}
.marquee-track{
  display:inline-block;
  animation:scroll 28s linear infinite;
  font-family:var(--mono);font-size:.85rem;text-transform:lowercase;
  color:rgba(242,242,242,.6);
}
.marquee-track b{color:var(--pink);font-weight:400;margin:0 18px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{padding:110px 40px}
.wrap{max-width:1200px;margin:0 auto}
.wrap-narrow{max-width:760px;margin:0 auto}
.eyebrow{
  font-family:var(--mono);font-size:.78rem;color:var(--lime);
  text-transform:lowercase;letter-spacing:.08em;
  display:block;margin-bottom:18px;
}
h2{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.9rem,4.5vw,3.2rem);
  letter-spacing:-0.04em;line-height:1.05;
  margin-bottom:48px;
}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- ESSAY CARDS ---------- */
.essays{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(242,242,242,.15)}
.essay{
  background:var(--ink);padding:36px 28px;
  display:flex;flex-direction:column;gap:20px;
  text-decoration:none;color:var(--paper);
  position:relative;overflow:hidden;
}
.essay::before{
  content:'';position:absolute;inset:0;
  background:var(--lime);
  transform:translateY(101%);transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.essay:hover::before,.essay:focus-visible::before{transform:translateY(0)}
.essay>*{position:relative;z-index:1;transition:color .3s ease}
.essay:hover>*,.essay:focus-visible>*{color:var(--ink)}
.essay .pilar{
  font-family:var(--mono);font-size:.7rem;
  border:1px solid currentColor;align-self:flex-start;
  padding:4px 10px;
}
.essay h3{font-family:var(--mono);font-weight:700;font-size:1.25rem;letter-spacing:-0.03em;line-height:1.3}
.essay p{font-weight:300;font-size:.92rem;color:rgba(242,242,242,.65)}
.essay:hover p,.essay:focus-visible p{color:rgba(15,14,15,.75)}
.essay .read{font-family:var(--mono);font-size:.78rem;margin-top:auto}
.essay .meta{font-family:var(--mono);font-size:.7rem;color:rgba(242,242,242,.45)}
.essay:hover .meta,.essay:focus-visible .meta{color:rgba(15,14,15,.6)}

/* ---------- FILTERS ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.filters button{
  font-family:var(--mono);font-size:.78rem;
  background:transparent;color:var(--paper);
  border:1px solid rgba(242,242,242,.3);
  padding:10px 18px;cursor:pointer;
  transition:border-color .25s,background .25s,color .25s;
}
.filters button:hover,.filters button:focus-visible{border-color:var(--lime)}
.filters button.active{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* ---------- SECTION LINK ---------- */
.section-link{
  display:inline-block;margin-top:44px;
  font-family:var(--mono);font-size:.9rem;color:var(--paper);
  text-decoration:none;border-bottom:2px solid var(--lime);
  padding-bottom:4px;transition:color .25s;
}
.section-link:hover{color:var(--lime)}

/* ---------- INVERTED (light) SECTIONS ---------- */
.light{background:var(--paper);color:var(--ink)}
.light .eyebrow{color:var(--pink)}
.light blockquote{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.5rem,4vw,2.8rem);
  letter-spacing:-0.04em;line-height:1.25;
  max-width:900px;
}
.light blockquote mark{background:var(--lime);padding:0 .15em}
.light .section-link{color:var(--ink);border-color:var(--pink)}
.light .section-link:hover{color:var(--pink)}

/* ---------- EXPERIMENT ---------- */
.experiment{
  border:1px solid rgba(242,242,242,.2);padding:32px;
  font-family:var(--mono);
}
.experiment .exp-label{font-size:.7rem;color:var(--pink);margin-bottom:16px;display:block}
.experiment .question{font-size:1.05rem;font-weight:700;margin-bottom:24px;line-height:1.4}
.experiment .options{display:flex;flex-direction:column;gap:10px}
.experiment button{
  font-family:var(--mono);font-size:.85rem;text-align:left;
  background:transparent;color:var(--paper);
  border:1px solid rgba(242,242,242,.3);
  padding:14px 18px;cursor:pointer;
  transition:border-color .25s,background .25s,color .25s;
}
.experiment button:hover,.experiment button:focus-visible{border-color:var(--lime)}
.experiment button.voted{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.experiment .thanks{display:none;margin-top:20px;font-size:.8rem;color:var(--lime)}
.experiment.done .thanks{display:block}

/* ---------- NEWSLETTER ---------- */
.news{position:relative;overflow:hidden}
.news .blob{position:absolute;width:480px;height:480px;right:-140px;top:-80px;opacity:.5;animation-duration:55s}
.news .wrap-narrow{position:relative;z-index:2}
.news p.lede{font-weight:300;font-size:1.1rem;color:rgba(242,242,242,.75);margin-bottom:40px}
.substack-frame{
  border:1px solid rgba(242,242,242,.2);
  padding:8px;background:rgba(242,242,242,.04);
}
.substack-frame iframe{display:block;width:100%;height:150px;border:0;background:transparent}
.news .note{font-family:var(--mono);font-size:.72rem;color:rgba(242,242,242,.4);margin-top:14px}

/* ---------- ARTICLE ---------- */
article.essay-body{padding:0 40px 110px}
article.essay-body .wrap-narrow>*+*{margin-top:1.6em}
article.essay-body p{font-weight:300;font-size:1.13rem;line-height:1.85;color:rgba(242,242,242,.85)}
article.essay-body h2{font-size:1.6rem;margin:2.2em 0 0}
article.essay-body .pull{
  font-family:var(--mono);font-weight:700;
  font-size:1.4rem;line-height:1.4;letter-spacing:-0.02em;
  border-left:4px solid var(--pink);padding-left:24px;
  margin:2em 0;
}
.essay-meta{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--mono);font-size:.75rem;color:rgba(242,242,242,.5);
}
.essay-meta .pilar-tag{border:1px solid var(--lime);color:var(--lime);padding:4px 10px}
.essay-footer{
  border-top:1px solid rgba(242,242,242,.15);
  margin-top:70px;padding-top:40px;
}
.essay-footer .coq{
  font-family:var(--mono);font-size:.75rem;color:var(--pink);display:block;margin-bottom:14px;
}
.essay-footer p.q{font-family:var(--mono);font-weight:700;font-size:1.2rem;line-height:1.5}

/* ---------- MANIFESTO PAGE ---------- */
.manifesto-page p.mline{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.4rem,3.4vw,2.4rem);
  letter-spacing:-0.03em;line-height:1.35;
  margin-bottom:1.6em;
}
.manifesto-page p.mline mark{background:var(--lime);color:var(--ink);padding:0 .15em}
.manifesto-page p.mline .pk{color:var(--pink)}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid rgba(242,242,242,.15);
  padding:48px 40px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.78rem;color:rgba(242,242,242,.5);
}
footer .f-logo{font-weight:700;font-size:1.1rem;color:var(--paper)}
footer ul{display:flex;gap:24px;list-style:none}
footer a{color:rgba(242,242,242,.5);text-decoration:none;transition:color .25s}
footer a:hover{color:var(--lime)}

/* ---------- HOME HERO ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 40px;
  overflow:hidden;
}

/* --- campo de orbes: luzes que vagam pela tela --- */
.orbs{
  position:absolute;inset:-20%;
  filter:blur(90px) saturate(1.5);
  animation:hueDrift 30s linear infinite;
}
@keyframes hueDrift{to{filter:blur(90px) saturate(1.5) hue-rotate(360deg)}}
.orb{
  position:absolute;border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
}
.o1{width:44vw;height:44vw;background:#7b2ff7;top:0;left:8%;animation:drift1 26s ease-in-out infinite alternate}
.o2{width:36vw;height:36vw;background:var(--pink);top:34%;left:44%;animation:drift2 21s ease-in-out infinite alternate}
.o3{width:30vw;height:30vw;background:#ff7a18;top:52%;left:12%;animation:drift3 33s ease-in-out infinite alternate}
.o4{width:26vw;height:26vw;background:#18c8ff;top:8%;left:56%;animation:drift4 24s ease-in-out infinite alternate}
.o5{width:22vw;height:22vw;background:var(--lime);top:64%;left:64%;opacity:.5;animation:drift5 29s ease-in-out infinite alternate}
@keyframes drift1{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28vw,16vh) scale(1.25)}
  66%{transform:translate(52vw,-6vh) scale(.85)}
  100%{transform:translate(12vw,30vh) scale(1.1)}
}
@keyframes drift2{
  0%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-30vw,20vh) scale(1.35)}
  70%{transform:translate(10vw,-24vh) scale(.8)}
  100%{transform:translate(-16vw,10vh) scale(1.15)}
}
@keyframes drift3{
  0%{transform:translate(0,0) scale(.9)}
  50%{transform:translate(38vw,-28vh) scale(1.3)}
  100%{transform:translate(60vw,8vh) scale(1)}
}
@keyframes drift4{
  0%{transform:translate(0,0) scale(1.1)}
  45%{transform:translate(-34vw,26vh) scale(.85)}
  100%{transform:translate(-8vw,-14vh) scale(1.3)}
}
@keyframes drift5{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-40vw,-20vh) scale(1.4)}
  100%{transform:translate(-60vw,6vh) scale(.9)}
}

/* --- grão por cima das luzes --- */
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.55;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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%}

.coord{
  font-family:var(--mono);font-size:.72rem;
  color:rgba(242,242,242,.45);letter-spacing:.08em;
  margin-bottom:3vh;
  opacity:0;animation:fadeIn 1s ease .1s forwards;
}

/* --- tipografia empilhada experimental --- */
.stack{
  display:flex;flex-direction:column;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(3.4rem,13vw,11.5rem);
  line-height:.92;letter-spacing:-0.05em;
  text-transform:lowercase;
}
.stack .line{display:flex;overflow:hidden}
.stack .l2{margin-left:.55em}
.stack .l3{margin-left:1.15em}
.stack .w{
  display:inline-block;
  transform:translateY(110%);
  animation:riseUp .9s cubic-bezier(.22,1,.36,1) forwards;
  transition:letter-spacing .5s cubic-bezier(.22,1,.36,1);
}
.stack .line:hover .w{letter-spacing:.04em}
.stack .l1 .w{animation-delay:.15s}
.stack .l2 .w{animation-delay:.32s}
.stack .l3 .w{animation-delay:.49s}
@keyframes riseUp{to{transform:translateY(0)}}

.stack .outline{
  color:transparent;
  -webkit-text-stroke:2px var(--paper);
  text-stroke:2px var(--paper);
}
.stack .dash{color:var(--pink)}
.stack .fill{color:var(--paper)}
.stack .lime{color:var(--lime)}
.stack .cursor{
  color:var(--lime);
  animation:blink 1.1s steps(1) infinite;
  margin-left:.05em;
}
@keyframes blink{50%{opacity:0}}

.hero .sub{
  margin-top:34px;max-width:560px;
  font-weight:300;font-size:1.05rem;color:rgba(242,242,242,.75);
  opacity:0;animation:fadeIn 1s ease .95s forwards;
}
@keyframes fadeIn{to{opacity:1}}
.hero .cta{
  margin-top:44px;display:inline-flex;align-items:center;gap:14px;
  align-self:flex-start;width:fit-content;
  font-family:var(--mono);font-size:.95rem;color:var(--ink);
  background:var(--lime);text-decoration:none;
  padding:16px 28px;border:2px solid var(--lime);
  opacity:0;animation:fadeIn 1s ease 1.15s forwards;
  transition:background .25s ease,color .25s ease;
}
.hero .cta .arrow{display:inline-block;animation:bounce 1.6s ease-in-out infinite}
.hero .cta:hover,.hero .cta:focus-visible{background:transparent;color:var(--lime)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.scroll-hint{
  position:absolute;bottom:28px;right:40px;z-index:2;
  font-family:var(--mono);font-size:.7rem;color:rgba(242,242,242,.4);
  writing-mode:vertical-rl;
  animation:fadeIn 1s ease 1.4s forwards;opacity:0;
}

/* ---------- LAB GRID ---------- */
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  nav{padding:16px 20px}
  nav ul{gap:18px}
  section{padding:80px 20px}
  .hero{padding:0 20px}
  .page-hero{padding:150px 20px 60px}
  article.essay-body{padding:0 20px 80px}
  .essays{grid-template-columns:1fr}
  .lab-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:560px){
  nav ul{gap:14px}
  nav ul a{font-size:.7rem}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .stack .w,.hero .sub,.hero .cta,.coord,.scroll-hint{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
}