@import url('https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&family=Special+Elite&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --black:#0a0a0a;
  --wall:#141311;
  --panel:#1a1917;
  --ink:#3d3b35;
  --white:#e8e4d8;
  --bone:#c7c3b6;
  --grey:#6b6858;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.02) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 60%, rgba(255,255,255,0.018) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(255,255,255,0.025) 0%, transparent 40%),
    var(--wall);
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--ink);color:var(--white);}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:0.45;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

svg.filters{position:absolute;width:0;height:0;overflow:hidden;}

h1,h2,h3,.display{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.9;
  filter:url(#roughen);
}

.spray{
  font-family:'Permanent Marker', cursive;
  text-transform:none;
  letter-spacing:0.01em;
}

.label{
  font-family:'Special Elite', monospace;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.75rem;
  color:var(--bone);
}

a{color:var(--white);text-decoration-color:var(--grey);}

.hazard-rule{
  height:14px;
  background:repeating-linear-gradient(
    45deg,
    var(--ink),
    var(--ink) 18px,
    var(--black) 18px,
    var(--black) 36px
  );
  width:100%;
  filter:url(#roughenSoft);
}

a:focus-visible, button:focus-visible{
  outline:3px solid var(--bone);
  outline-offset:3px;
}

.splatter{position:relative;}
.splatter::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,0.06) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 34%, rgba(255,255,255,0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,0.05) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 66%, rgba(255,255,255,0.03) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 15%, rgba(255,255,255,0.04) 0 2px, transparent 3px);
}

/* ================= HEADER STRIP ================= */
.topstrip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 5vw;
  background:var(--black);
  border-bottom:1px dashed var(--ink);
  position:sticky;
  top:0;
  z-index:50;
  flex-wrap:wrap;
  gap:14px;
}
.topstrip .mark{
  font-family:'Anton', sans-serif;
  font-size:1.3rem;
  letter-spacing:0.05em;
  filter:url(#roughen);
  transform:rotate(-1.5deg);
  display:inline-block;
  text-decoration:none;
  color:var(--white);
}
.topstrip nav{display:flex;gap:20px;flex-wrap:wrap;}
.topstrip nav a{
  font-family:'Special Elite', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--bone);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.topstrip nav a:hover, .topstrip nav a.active{border-bottom-color:var(--bone);color:var(--white);}

/* ================= PAGE HEADER (for inner pages) ================= */
.page-header{
  padding:80px 5vw 50px;
  max-width:1180px;
  margin:0 auto;
}
.page-header .label{margin-bottom:14px;display:block;}
.page-header h1{
  font-size:clamp(2.2rem, 6vw, 4.4rem);
  transform:rotate(-0.6deg);
}
.page-header p{
  font-family:'Special Elite', monospace;
  color:var(--bone);
  max-width:680px;
  margin-top:20px;
  font-size:1rem;
}

/* ================= BANNER (home) ================= */
.banner{position:relative;width:100%;}
.banner img{
  width:100%;
  display:block;
  filter:grayscale(1) contrast(1.2) brightness(0.75);
}
.banner-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:5vw;
  background:linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,0.95) 100%);
}
.banner-overlay .eyebrow{margin-bottom:10px;display:inline-block;transform:rotate(-1deg);width:fit-content;}
.banner-overlay h1{font-size:clamp(2.6rem, 8.5vw, 7rem);color:var(--white);transform:rotate(-0.8deg);}
.banner-overlay p{max-width:640px;margin-top:20px;font-size:0.95rem;color:var(--bone);font-family:'Special Elite', monospace;}

/* ================= SECTION SHELL ================= */
section{
  padding:90px 5vw;
  max-width:1180px;
  margin:0 auto;
  position:relative;
}
section.tight{padding-top:20px;}
.section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:48px;position:relative;flex-wrap:wrap;}
.section-head::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-14px;
  height:5px;
  background:var(--ink);
  clip-path:polygon(0% 20%, 4% 0%, 12% 60%, 20% 10%, 30% 70%, 42% 0%, 55% 50%, 68% 10%, 80% 65%, 90% 5%, 100% 40%, 100% 100%, 0% 100%);
}
.section-head .tag{
  font-family:'Anton', sans-serif;
  font-size:1.05rem;
  color:var(--black);
  background:var(--bone);
  padding:5px 12px;
  filter:url(#roughen);
  transform:rotate(-3deg);
  display:inline-block;
}
.section-head h2{font-size:clamp(1.8rem, 4.5vw, 3.4rem);transform:rotate(-0.5deg);}

/* ================= PARAGRAPHS ================= */
p.body-text{
  font-family:'Special Elite', monospace;
  font-size:1.05rem;
  max-width:760px;
  margin-bottom:22px;
  color:var(--bone);
}
p.lede{
  font-family:'Permanent Marker', cursive;
  text-transform:none;
  font-size:1.6rem;
  line-height:1.35;
  color:var(--white);
  max-width:820px;
  margin-bottom:30px;
  transform:rotate(-0.6deg);
}
.cta-line{
  margin-top:36px;
  font-family:'Anton', sans-serif;
  font-size:clamp(1.6rem, 5vw, 3.1rem);
  color:var(--white);
  text-transform:uppercase;
  border-left:8px solid var(--ink);
  padding-left:22px;
  filter:url(#roughen);
  position:relative;
}
.cta-line .drip{
  position:absolute;left:34px;bottom:-38px;width:9px;height:40px;
  background:var(--ink);
  clip-path:polygon(30% 0%, 70% 0%, 60% 70%, 50% 100%, 40% 70%);
  filter:url(#roughenSoft);
}
.cta-line .drip.d2{left:120px;height:24px;bottom:-22px;}
.cta-line .drip.d3{left:260px;height:48px;bottom:-46px;}

.open-strip{
  margin-top:50px;
  padding:22px 26px;
  border:1px dashed var(--ink);
  max-width:700px;
  background:rgba(255,255,255,0.02);
}
.open-strip p{font-family:'Special Elite', monospace;color:var(--bone);font-size:0.95rem;margin:0;}

/* ================= HAZARD DIVIDER ================= */
.hazard-divider{position:relative;width:100%;margin:0;}
.hazard-divider img{
  width:100%;display:block;max-height:400px;object-fit:cover;object-position:center 30%;
  filter:grayscale(1) contrast(1.15) brightness(0.8);
}
.hazard-divider .cutline{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;flex-direction:column;padding:0 6vw;
}
.hazard-divider .cutline span{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(1.4rem, 4.2vw, 2.7rem);
  color:var(--white);
  text-shadow:0 4px 18px rgba(0,0,0,0.9);
  max-width:820px;
  transform:rotate(-1deg);
  display:inline-block;
}

/* ================= TOPIC DIVIDER (blended stencil art) ================= */
.topic-divider{
  position:relative;
  width:100%;
  background:var(--black);
  padding:50px 0 30px;
  overflow:hidden;
}
.topic-divider .art{
  display:block;
  margin:0 auto;
  width:min(920px, 92vw);
  mix-blend-mode:screen;
  filter:contrast(1.08) brightness(1.02);
  -webkit-mask-image:radial-gradient(ellipse 68% 68% at center, black 50%, transparent 96%);
  mask-image:radial-gradient(ellipse 68% 68% at center, black 50%, transparent 96%);
}
.topic-divider .cutline{
  text-align:center;
  margin-top:-10px;
  padding:0 8vw;
}
.topic-divider .cutline span{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(1.2rem, 3.6vw, 2rem);
  color:var(--bone);
  max-width:700px;
  display:inline-block;
  transform:rotate(-0.8deg);
}

/* ================= CARD GRIDS (against / building) ================= */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.card-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.card{
  background:var(--panel);
  padding:32px 28px;
  border:2px solid var(--ink);
  clip-path:polygon(0% 4%, 3% 0%, 97% 1%, 100% 5%, 99% 96%, 96% 100%, 2% 99%, 0% 94%);
  position:relative;
}
.card:nth-child(odd){transform:rotate(-0.6deg);}
.card:nth-child(even){transform:rotate(0.6deg);}
.card .num{
  font-family:'Anton', sans-serif;font-size:2.2rem;color:var(--bone);
  display:block;margin-bottom:10px;filter:url(#roughen);
}
.card h3{font-size:1.3rem;margin-bottom:12px;color:var(--white);}
.card p{font-family:'Special Elite', monospace;color:var(--bone);font-size:0.9rem;}

/* ================= LIST ROWS (join / building detail) ================= */
.row-list{display:flex;flex-direction:column;}
.row-item{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:30px 0;border-top:2px dashed var(--ink);}
.row-item:last-child{border-bottom:2px dashed var(--ink);}
.row-item h3{font-size:1.5rem;color:var(--bone);align-self:start;filter:url(#roughen);transform:rotate(-1deg);}
.row-item p{font-family:'Special Elite', monospace;color:var(--bone);font-size:0.95rem;max-width:620px;}

/* ================= CODE BLOCK (join roles) ================= */
.code-block{background:var(--panel);border:2px solid var(--ink);padding:0;}
.code-row{display:grid;grid-template-columns:170px 1fr;border-bottom:1px dashed var(--ink);}
.code-row:last-child{border-bottom:none;}
.code-row .role{
  background:var(--black);color:var(--white);font-family:'Anton', sans-serif;text-transform:uppercase;
  font-size:0.82rem;letter-spacing:0.04em;display:flex;align-items:center;padding:22px 18px;filter:url(#roughenSoft);
}
.code-row .action{padding:22px 26px;font-family:'JetBrains Mono', monospace;font-size:0.95rem;color:var(--bone);}
.code-row .action strong{color:var(--white);display:block;font-weight:700;margin-bottom:4px;}

/* ================= TEASER CARDS (home page) ================= */
.teaser-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
.teaser{
  background:var(--panel);
  border:1px solid var(--ink);
  padding:28px 24px;
  text-decoration:none;
  display:block;
  color:var(--white);
  position:relative;
  transition:border-color 0.15s ease;
}
.teaser:hover{border-color:var(--bone);}
.teaser .label{margin-bottom:10px;}
.teaser h3{font-size:1.4rem;margin-bottom:10px;}
.teaser p{font-family:'Special Elite', monospace;color:var(--bone);font-size:0.88rem;}

/* ================= DONATE PAGE ================= */
.donate-panel{
  background:var(--panel);
  border:2px solid var(--ink);
  padding:38px 32px;
  margin-bottom:30px;
}
.donate-panel h3{font-size:1.6rem;margin-bottom:16px;color:var(--white);}
.donate-panel p.body-text{margin-bottom:16px;}
.btn{
  display:inline-block;
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:1rem;
  color:var(--black);
  background:var(--bone);
  padding:14px 26px;
  text-decoration:none;
  filter:url(#roughenSoft);
  margin-top:10px;
  margin-right:12px;
}
.btn:hover{background:var(--white);}
.btn.ghost{
  background:transparent;
  color:var(--bone);
  border:2px solid var(--ink);
}
.fee-note{
  font-family:'Special Elite', monospace;
  font-size:0.82rem;
  color:var(--grey);
  margin-top:14px;
}
.wanted-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 30px;
  margin:20px 0;
}
.wanted-list div{
  font-family:'JetBrains Mono', monospace;
  font-size:0.92rem;
  color:var(--bone);
  padding:8px 0;
  border-bottom:1px dashed var(--ink);
}
.placeholder-note{
  font-family:'Special Elite', monospace;
  font-size:0.8rem;
  color:var(--grey);
  border-left:3px solid var(--ink);
  padding-left:12px;
  margin-top:18px;
}

/* ================= CONNECT PAGE ================= */
.channel-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-top:20px;}
.channel-card{
  border:1px dashed var(--ink);
  padding:24px 20px;
  text-align:center;
}
.channel-card .status{
  font-family:'Special Elite', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--grey);
  margin-top:8px;
  display:block;
}
.channel-card h3{font-size:1.2rem;}

/* ================= FOOTER ================= */
footer{
  background:var(--black);
  color:var(--white);
  padding:80px 5vw 50px;
  position:relative;
  overflow:hidden;
  border-top:3px solid var(--ink);
}
footer h2{font-size:clamp(1.8rem, 6vw, 3.8rem);color:var(--white);max-width:900px;filter:url(#roughen);transform:rotate(-0.6deg);}
footer .sub{font-family:'Permanent Marker', cursive;text-transform:none;font-size:1.1rem;margin-bottom:14px;color:var(--bone);transform:rotate(-1.5deg);display:inline-block;}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;}
.foot-links a{font-family:'Special Elite', monospace;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--bone);text-decoration:none;}
.foot-links a:hover{color:var(--white);}
.foot-bar{
  display:flex;justify-content:space-between;align-items:center;margin-top:50px;padding-top:20px;
  border-top:1px dashed var(--ink);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  font-family:'Special Elite', monospace;color:var(--grey);flex-wrap:wrap;gap:10px;
}

@media (max-width:820px){
  .card-grid, .card-grid.cols-3{grid-template-columns:1fr;}
  .teaser-grid{grid-template-columns:1fr;}
  .channel-grid{grid-template-columns:1fr;}
  .row-item{grid-template-columns:1fr;gap:10px;}
  .code-row{grid-template-columns:1fr;}
  .code-row .role{padding:14px 18px;}
  .topstrip nav{gap:12px;}
  .topstrip nav a{font-size:0.6rem;}
  .wanted-list{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}