/* ============================================================
   WTFU — shared styles (index / about / join)
   Brand: green #7CE117 on black · blue #0924FF accent-only
   Fonts: Kaneda (heads) · Garet (body) · Courier Prime (accent)
   ============================================================ */

/* ---- self-hosted brand fonts ---- */
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Bold_Italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Black_Italic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Garet';src:url('../fonts/Garet-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Garet';src:url('../fonts/Garet-Heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

:root{
  --green:#7CE117; --lime:#4FE300; --blue:#0924FF; --purple:#A323FF; --pink:#FF00FF; --yellow:#FFFF00; --red:#FF0010;
  --ink:#000000; --panel:#0c0c0c; --line:#242424; --paper:#ffffff; --dim:#c9c9c9;
  --head:'Kaneda',Impact,'Arial Narrow',sans-serif;
  --body:'Garet',system-ui,Arial,sans-serif;
  --mono:'Courier Prime',ui-monospace,monospace;
  --maxw:1280px;
  /* type scale — lenis.dev-scale display type, Connie: "increased size... more bold" */
  --t-mega:clamp(64px,12vw,176px);
  --t-display:clamp(52px,10vw,150px);
  --t-h2:clamp(40px,7.5vw,108px);
  --t-h3:clamp(24px,3vw,40px);
  --t-pull:clamp(32px,5vw,72px);
  --t-lead:clamp(19px,1.9vw,26px);
  --t-body:clamp(18px,1.3vw,21px);
  --t-mono:clamp(13px,1vw,16px);
  --t-micro:12px;
  --t-btn:clamp(16px,1.2vw,19px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
/* Lenis takes over scrolling when active */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{font-family:var(--body);background:var(--ink);color:var(--paper);line-height:1.6;font-size:var(--t-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.head{font-family:var(--head);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.head.bd{font-weight:700}
.ital{font-style:italic}
.mono{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* two-tone focus ring: black gap keeps it visible on green/pink/yellow surfaces */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px;box-shadow:0 0 0 3px #000}
img{max-width:100%;display:block}
p{max-width:62ch}
/* anchors land clear of the sticky nav on every scroll path (native, Lenis, no-JS) */
section[id]{scroll-margin-top:84px}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:900;background:rgba(0,0,0,.86);backdrop-filter:blur(8px);border-bottom:2px solid var(--green)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav .logo img{height:42px;width:auto}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#eee}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--green)}
/* the nav CTA is a BUTTON — Kaneda, not Courier (navlinks rule outspecifies .btn) */
.navlinks a.btn{font-family:var(--head);letter-spacing:.02em;color:#fff}
.navlinks a.btn:hover{color:#fff}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1;padding:9px 12px;min-width:44px;min-height:44px}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:var(--t-btn);background:var(--green);color:#000;padding:15px 26px;border:3px solid #000;border-radius:2px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;box-shadow:4px 4px 0 #000}
.btn:hover{transform:scale(1.06) translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.btn:active{transform:scale(.96)}
.btn.blue{background:var(--blue);color:#fff;border-color:#000}
.btn.pink{background:var(--pink);color:#000}
.btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--green)}
.btn.ghost:hover{box-shadow:7px 7px 0 var(--green)}
.btn.lg{font-size:clamp(18px,1.6vw,24px);padding:18px 34px}
.btn.sm{font-size:13px;padding:9px 16px;box-shadow:3px 3px 0 #000}

/* ---- hero: deck-cover frame, revealed by the green bolt-swipe (verified motion) ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero-black{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.hero-content{position:relative;margin-left:6%;max-width:52%;will-change:transform}
.hero-logo{width:min(40vw,460px);height:auto;display:block;will-change:transform}
.hero-tag{font-family:var(--mono);color:var(--green);margin-top:20px;font-size:clamp(14px,1.5vw,20px);letter-spacing:.05em}
.hero .cta-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
html.js .hero .cta-row{opacity:0}
/* CTAs "grow on hover" (Jul 6 call) — extra lift over the default .btn */
.hero .cta-row .btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
.hero .cta-row .btn:hover,.hero .cta-row .btn:focus-visible{transform:scale(1.1) translate(-2px,-3px);box-shadow:8px 9px 0 #000}
/* green panel = the swipe AND the resting green-right of the cover.
   wrap is click-through so CTAs stay interactive; only the green paint replays */
.greenWrap{position:absolute;top:0;left:0;height:100%;width:180%;z-index:4;pointer-events:none}
html.js .greenWrap{transform:translateX(-39%)}
.greenFill{position:absolute;inset:0;background:var(--green);clip-path:polygon(32.2% 0, 100% 0, 100% 100%, 30% 100%, 34.4% 60%, 24.4% 56%);will-change:transform;pointer-events:auto;cursor:crosshair}
.boltSvg{position:absolute;inset:0;width:100%;height:100%;will-change:transform,filter;filter:drop-shadow(0 0 3px rgba(9,36,255,.55));pointer-events:none}
@media (prefers-reduced-motion:reduce){html.js .greenWrap{transform:none}html.js .hero .cta-row{opacity:1}.boltSvg,.hero-logo,.hero-content,.greenFill{animation:none!important}}
@media(max-width:640px){.hero-content{max-width:82%;margin-left:8%}.hero-logo{width:min(62vw,290px)}}

/* ---- section frame ---- */
section{position:relative}
.kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
h1.display,.display{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:var(--t-display);line-height:.9;letter-spacing:.005em}
h2.big{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:var(--t-h2);line-height:.9;margin-bottom:24px;letter-spacing:.005em}
.mega{font-family:var(--head);font-weight:900;font-style:italic;text-transform:uppercase;font-size:var(--t-mega);line-height:.85;letter-spacing:.005em}
.lead{font-size:var(--t-lead);color:var(--dim);max-width:640px;margin-bottom:44px}
.sticker{position:absolute;pointer-events:none;z-index:1;opacity:.96}
.w{display:inline-block}
/* brush-stroke underline (real asset, wiped in) */
/* isolation makes z-index:-1 mean "behind the glyphs, above the section" in EVERY section */
.stroke-under{position:relative;display:inline-block;isolation:isolate}
/* clean marker underline BELOW the baseline (squishing the brush over glyphs read as a glitch) */
.stroke-under .stroke{position:absolute;left:-3%;right:-3%;bottom:-.14em;height:.2em;z-index:-1;background:url('../elements/WTFU_GUIDE_ELEMENTS-21.png') center/100% 100% no-repeat;pointer-events:none}

/* ---- scroll cue (dies on first scroll) — anchored over the BLACK side, never on green ---- */
.scrollcue{position:absolute;left:6%;bottom:26px;z-index:6;font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.7)}
html.js .scrollcue{animation:cuepulse 1.2s ease-in-out infinite}
@keyframes cuepulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}

/* ---- pillars ---- */
.pillars{padding:120px 0;background:var(--ink);border-top:3px solid var(--green);overflow:hidden}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px;align-items:start}
.pillar{border:3px solid #000;border-radius:6px;overflow:hidden;background:var(--panel);box-shadow:6px 6px 0 rgba(255,255,255,.06)}
.pillar>summary{list-style:none;cursor:pointer;padding:0;position:relative}
.pillar>summary::-webkit-details-marker{display:none}
.pcap{padding:28px 26px;color:#000;position:relative}
.pillar:nth-child(1) .pcap{background:var(--green)}
.pillar:nth-child(2) .pcap{background:var(--pink)}
.pillar:nth-child(3) .pcap{background:var(--yellow)}
.pnum{font-family:var(--head);font-weight:900;font-size:40px;line-height:1}
.pcap h3{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:var(--t-h3);line-height:1;margin-top:10px}
.pcap .picon{position:absolute;top:18px;right:18px;width:44px;height:auto;opacity:.9}
.pmore{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;margin-top:16px;display:inline-block}
.pbody{padding:24px 26px;font-size:var(--t-body);color:#ececec;border-top:3px solid #000;line-height:1.65}
.pillar[open]{outline:3px solid var(--green);outline-offset:-3px}
/* desktop: hover opens the pillar visually (details stays the functional base) */
@media (hover:hover) and (min-width:861px){
  .pillar:not([open]):hover{outline:3px solid var(--green);outline-offset:-3px;transform:translateY(-3px)}
  .pillar{transition:transform .18s ease}
}

/* ---- about teaser (index) ---- */
.aboutteaser{padding:110px 0;background:var(--panel);border-top:3px solid var(--pink);position:relative;overflow:hidden}
.aboutteaser .bgart{position:absolute;inset:-6%;background:url('../bg/WTFU_BG2.png') center/cover;opacity:.13;z-index:0}
.aboutteaser .wrap{position:relative;z-index:2}
.aboutteaser .pull{font-family:var(--head);font-weight:900;font-style:italic;text-transform:uppercase;font-size:var(--t-pull);line-height:.95;color:#fff;margin-bottom:26px;max-width:14ch}
.aboutteaser .pull .g{color:var(--green)}

/* ---- events + map ---- */
.events{padding:120px 0;background:var(--ink);border-top:3px solid var(--blue);overflow:hidden}
.events .bgart{position:absolute;inset:-6%;background:url('../bg/WTFU_BG3.png') center/cover;opacity:.18;z-index:0;transform:scale(1.1)}
.events .wrap{position:relative;z-index:2}
.evdate{color:var(--green);margin:6px 0 34px;display:block}
.evcard{border:3px solid #000;border-radius:8px;background:var(--green);color:#000;padding:0;overflow:hidden;box-shadow:8px 8px 0 var(--blue)}
.evtop{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;padding:30px 32px}
.evtop .tag{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase}
.evtop h3{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,52px);line-height:.95;margin-top:8px}
.evbody{background:#000;color:#fff;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.evbody .meta{font-family:var(--mono);font-size:15px;color:var(--green);line-height:1.7}
.evbody p{max-width:56ch;color:var(--dim);margin-top:12px;font-size:var(--t-body)}
.evnote{margin-top:20px;font-family:var(--mono);font-size:var(--t-mono);color:#a6a6a6}
/* the original interactive map — presented to Connie Jul 6, approved as-is */
#map{height:460px;width:100%;max-width:100%;border-radius:10px;border:1.5px solid var(--green);overflow:hidden;background:#0c0c0c;z-index:0;position:relative;margin-top:34px}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:16px;color:#e4e4e4}
.map-fallback a{color:var(--green);text-decoration:underline}
.leaflet-container{background:#0c0c0c;font-family:inherit}
.leaflet-popup-content-wrapper{background:#111;color:#fff;border:1px solid var(--green);border-radius:6px}
.leaflet-popup-content{margin:12px 14px;font-size:14px}
.leaflet-popup-content b{color:var(--green);font-family:var(--mono);display:block;margin-bottom:3px;font-size:12px}
.leaflet-popup-content a{color:var(--green)}
.leaflet-popup-tip{background:#111}
.leaflet-control-zoom a{background:#111;color:#fff;border-color:#333}
.leaflet-control-zoom a:hover{background:var(--green);color:#000}
.leaflet-bar{border-color:#333}
.leaflet-control-attribution{max-width:100%;font-size:10px;background:rgba(0,0,0,.75);color:#aaa}
.leaflet-control-attribution a{color:var(--green)}

/* ---- join teaser (index) + join page ---- */
.join{padding:120px 0;background:var(--panel);border-top:3px solid var(--yellow);position:relative;overflow:hidden}
.join .bgart{position:absolute;inset:-14%;background:url('../bg/WTFU_BG1.png') center/cover;opacity:.08;z-index:0;will-change:transform}
.join .wrap{position:relative;z-index:2}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.field{display:flex;flex-direction:column;gap:8px;max-width:520px}
.field label{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.field input,.field textarea{font-family:var(--body);padding:17px 18px;border:3px solid var(--green);border-radius:3px;background:#000;color:#fff;font-size:18px;box-shadow:4px 4px 0 var(--green)}
.field input::placeholder,.field textarea::placeholder{color:#9c9c9c}
.field input:focus{border-color:#fff;box-shadow:6px 6px 0 var(--green);outline-offset:1px}
.field input[aria-invalid="true"]{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.field .optional{font-family:var(--mono);font-size:var(--t-micro);color:#a6a6a6;letter-spacing:.08em}
.field .btn{margin-top:10px}
.form-ok{display:none;font-family:var(--mono);color:var(--green);border:2px solid var(--green);padding:12px 14px;font-size:14px}
.form-err{display:none;font-family:var(--mono);color:var(--red);border:2px solid var(--red);padding:12px 14px;font-size:14px}
.join .alt{font-size:18px;color:#e8e8e8}
.join .alt a:not(.btn):not(.bigmail){color:var(--green)}
.bigmail{font-family:var(--head);font-weight:900;font-size:clamp(24px,2.8vw,38px);color:#fff;display:inline-block;margin:10px 0 24px;word-break:break-word}
.bigmail:hover{color:var(--green)}

/* ---- socials + marquee ---- */
/* marquee slams against the purple hairline — the band IS the section divider */
.socials{padding:0 0 120px;background:var(--ink);border-top:3px solid var(--purple);overflow:hidden}
.soc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.soc{display:block;border:3px solid #000;border-radius:8px;padding:28px 24px;background:var(--panel);box-shadow:5px 5px 0 var(--purple);transition:transform .15s ease}
a.soc:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--purple)}
.soc .net{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:24px}
.soc .h{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:24px}
.soc .go{font-family:var(--mono);font-size:13px;color:var(--green);margin-top:10px}
.soc.soon{opacity:.6}
/* scroll-velocity marquee band */
.marq{background:var(--green);border-top:3px solid #000;border-bottom:3px solid #000;overflow:hidden;padding:14px 0;margin-bottom:74px}
.marq-track{display:flex;gap:0;white-space:nowrap;will-change:transform;width:max-content}
.marq-track span{font-family:var(--head);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(26px,3.4vw,44px);color:#000;padding-right:.6em}
.marq-track span:nth-child(even){-webkit-text-stroke:2px #000;color:transparent}

/* ---- about page ---- */
.acover{position:relative;padding:150px 0 120px;background:var(--ink);overflow:hidden}
.acover .bgart{position:absolute;inset:-6%;background:url('../bg/WTFU_BG2.png') center/cover;opacity:.14;z-index:0;will-change:transform}
.acover .wrap{position:relative;z-index:2}
.astory{padding:110px 0;background:var(--panel);border-top:3px solid var(--green);overflow:hidden}
.astory p{font-size:var(--t-body);color:#ececec;margin-bottom:20px;max-width:60ch}
.apull{padding:130px 0;background:var(--ink);border-top:3px solid var(--pink);text-align:left;overflow:hidden}
.apull .pull{font-family:var(--head);font-weight:900;font-style:italic;text-transform:uppercase;font-size:var(--t-pull);line-height:.95;color:#fff;max-width:16ch}
.apull .pull .g{color:var(--green)}
.astmt{padding:120px 0;background:var(--panel);border-top:3px solid var(--blue);overflow:hidden}
.stmt{border-left:6px solid var(--green);padding:26px 30px;background:#000;border-radius:4px;max-width:820px}
.stmt p{font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em;color:#f0f0f0;font-size:clamp(16px,1.5vw,20px);line-height:1.75;margin:0;max-width:none}
.stmt .call{font-family:var(--head);font-weight:900;font-style:italic;font-size:clamp(28px,3.4vw,48px);color:var(--green);margin-top:18px;display:block;line-height:1}
.amega{position:absolute;width:min(20vw,220px);right:6%;bottom:8%;transform:rotate(-8deg);z-index:1;opacity:.95;pointer-events:none}

/* ---- footer ---- */
footer{background:#000;padding:60px 0 36px;border-top:3px solid var(--green)}
.fgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:36px}
footer .logo img{height:72px;width:auto}
.fcol h4{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:#a6a6a6;margin-bottom:14px}
.fcol a{display:block;font-size:15px;color:#d8d8d8;margin-bottom:8px}
.fcol a:hover{color:var(--green)}
.fbase{border-top:1px solid var(--line);padding-top:22px;font-family:var(--mono);font-size:var(--t-micro);color:#a6a6a6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---- reveal baseline (content ALWAYS visible without JS/GSAP) ---- */
.reveal{opacity:1;transform:none}
html.js.io-reveals .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
html.js.io-reveals .reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:860px){
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#000;border-bottom:2px solid var(--green);padding:8px 0;display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:14px 28px}
  .menu-toggle{display:block}
  .pgrid,.join-grid,.soc-grid{grid-template-columns:1fr}
  #map{height:340px}
  .amega{width:120px;right:4%;bottom:3%}
  .btn{padding:15px 24px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scrollcue{animation:none !important}
  html.js.io-reveals .reveal{opacity:1;transform:none;transition:none}
  .marq-track{transform:none !important}
}