:root{
  --black:#05080F;--navy:#0A0F1C;--navy2:#0E1424;--steel:#1A2236;--steel2:#2A3550;
  --white:#F5F7FA;--dim:#9BA8C0;--dim2:#6B7FA0;
  --gold:#FFD700;--gold2:#FFC200;--gold3:#CC9900;
  --red2:#FF3300;--green2:#00CC55;--green-bright:#00FF66;
  --head:'Bebas Neue',sans-serif;--body:'Barlow',sans-serif;--mono:'Share Tech Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--black);color:var(--white);font-family:var(--body);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ===== UNIFIED NAV (identical spec across homepage / 1st-hq / draft-kit / directory) ===== */
nav.dir-nav{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;border-bottom:1px solid rgba(255,215,0,0.12);position:sticky;top:0;background:rgba(5,8,15,0.95);backdrop-filter:blur(12px);z-index:50;}
.nav-logo img{height:40px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-link{font-family:var(--head);font-size:1rem;letter-spacing:0.1em;color:var(--dim);padding:6px 14px;border-radius:3px;white-space:nowrap;transition:color .2s,background .2s;}
.nav-link:hover{color:var(--white);background:rgba(255,255,255,0.06);}
.nav-link.active{color:var(--gold);}
.nav-cta{background:var(--red2);color:#fff;font-family:var(--head);font-size:1rem;letter-spacing:0.1em;padding:8px 20px;border-radius:3px;transition:background .2s,transform .2s;white-space:nowrap;}
.nav-cta:hover{background:#FF0000;transform:translateY(-1px);}
.mob-btn{display:none;background:none;border:none;color:var(--gold);font-size:1.8rem;cursor:pointer;padding:6px 8px;line-height:1;text-shadow:0 0 4px rgba(255,215,0,0.6);}

.mock{background:rgba(255,215,0,0.06);border-bottom:1px solid rgba(255,215,0,0.18);padding:9px 28px;font-size:0.8rem;color:var(--dim);text-align:center;text-wrap:pretty;}
.mock b{color:var(--gold);font-family:var(--head);letter-spacing:0.06em;}

.head-wrap{max-width:1180px;margin:0 auto;padding:38px 28px 8px;}
.dir-kicker{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.18em;color:var(--gold3);text-transform:uppercase;margin-bottom:10px;}
.dir-title{font-family:var(--head);font-size:clamp(2.6rem,7vw,4.2rem);letter-spacing:0.02em;line-height:0.92;text-wrap:balance;}
.dir-title .g{color:var(--gold);}
.dir-tag{font-family:var(--head);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:0.04em;color:var(--white);margin-top:8px;}
.dir-tag .r{color:var(--red2);}
.dir-sub{font-size:1.02rem;color:var(--dim);margin-top:12px;max-width:640px;text-wrap:pretty;}
.dir-meta{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;color:var(--dim2);margin-top:14px;}
.dir-meta .live{color:var(--green2);}

.filters{max-width:1180px;margin:0 auto;padding:22px 28px 6px;position:sticky;top:64px;background:var(--black);z-index:40;}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
/* Squared-neon filter chips (match the homepage button look): squared corners,
   outlined by default, solid-gold fill + neon glow on active. */
.f-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-size:0.9rem;letter-spacing:0.1em;color:var(--dim);background:transparent;border:1px solid rgba(255,255,255,0.12);padding:8px 16px;border-radius:3px;cursor:pointer;transition:all .18s;white-space:nowrap;}
.f-chip svg{width:15px;height:15px;flex-shrink:0;}
.f-chip:hover{color:var(--white);border-color:rgba(255,215,0,0.45);background:rgba(255,215,0,0.05);}
.f-chip.active{color:#05080F;background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,0,0.45),0 0 4px rgba(255,215,0,0.65);}
.f-sep{width:1px;height:22px;background:rgba(255,255,255,0.1);margin:0 4px;}
.f-search{margin-left:auto;background:var(--navy2);border:1px solid rgba(255,255,255,0.08);border-radius:3px;padding:8px 14px;color:var(--white);font-family:var(--body);font-size:0.85rem;min-width:190px;}
.f-search::placeholder{color:var(--dim2);}
.f-search:focus{outline:none;border-color:rgba(255,215,0,0.4);}
/* "Head to 1ST HQ": a follow builds the HQ feed, so give a clear way over there.
   Gold-outline (not solid gold, not the red buy CTA) keeps the color discipline. */
.dir-hq{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font-family:var(--head);font-size:0.9rem;letter-spacing:0.1em;color:var(--gold);background:rgba(255,215,0,0.10);border:1px solid rgba(255,215,0,0.55);padding:9px 18px;border-radius:3px;text-decoration:none;transition:all .18s;}
.dir-hq:hover{background:rgba(255,215,0,0.18);border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,0,0.28);}
.dir-hq svg{flex-shrink:0;}
.dir-hq .dir-hq-arw{font-size:1.05rem;line-height:1;transition:transform .18s;}
.dir-hq:hover .dir-hq-arw{transform:translateX(3px);}

.sec{max-width:1180px;margin:0 auto;padding:26px 28px 0;}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.sec-title{font-family:var(--head);font-size:1.5rem;letter-spacing:0.06em;color:var(--white);}
.sec-title .g{color:var(--gold);}
.sec-note{font-size:0.8rem;color:var(--dim2);}
.sec-count{font-family:var(--mono);font-size:0.72rem;color:var(--dim2);margin-left:auto;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;align-items:stretch;}
.card{position:relative;display:flex;flex-direction:column;background:var(--navy2);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:15px 16px 12px;transition:border-color .2s,transform .15s,box-shadow .2s;cursor:pointer;}
.card:hover{border-color:rgba(255,255,255,0.16);transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,0,0,0.7);}
.card.partner{border-color:rgba(255,215,0,0.28);background:linear-gradient(180deg,rgba(255,215,0,0.045),var(--navy2) 60%);}
.card.partner:hover{border-color:rgba(255,215,0,0.5);}

.c-newpill{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:0.5rem;letter-spacing:0.08em;line-height:1.12;text-align:center;color:var(--green-bright);background:rgba(0,255,102,0.1);border:1px solid rgba(0,255,102,0.3);border-radius:4px;padding:3px 6px;}

.c-top{display:flex;align-items:center;gap:12px;}
.c-av{width:50px;height:50px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:1.3rem;letter-spacing:0.02em;color:var(--black);overflow:hidden;}
.c-av img{width:100%;height:100%;object-fit:cover;}
.c-id{min-width:0;flex:1;padding-right:46px;}
.c-name{font-family:var(--head);font-size:1.24rem;letter-spacing:0.03em;color:var(--white);line-height:1.02;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.c-spec{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.03em;color:#8B9ECB;text-transform:uppercase;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c-sep{margin:0 5px;color:#4A5A78;}

.kit-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-size:0.7rem;letter-spacing:0.08em;color:var(--gold);background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.4);padding:3px 8px;border-radius:4px;margin-top:11px;cursor:help;}

.c-stats{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);}
.c-subs{font-family:var(--head);font-size:1.35rem;letter-spacing:0.02em;color:var(--white);line-height:1;}
.c-subs small{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.08em;color:var(--dim2);text-transform:uppercase;display:block;margin-top:3px;}
.c-since{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.05em;color:var(--dim2);padding-left:10px;border-left:1px solid rgba(255,255,255,0.08);}
.c-plats{display:flex;gap:6px;align-items:center;margin-left:auto;}
.plat{width:24px;height:24px;border-radius:6px;background:var(--steel);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:color .15s,background .15s;}
.plat:hover{color:var(--white);background:var(--steel2);}
.plat.p-youtube:hover{color:#FF3B30;background:rgba(255,51,0,0.14);}
.plat.p-podcast:hover{color:#4A9EFF;background:rgba(74,158,255,0.14);}
.plat.p-x:hover{color:#fff;background:rgba(255,255,255,0.14);}
.plat.p-instagram:hover{color:#E1477E;background:rgba(225,71,126,0.14);}
.plat.p-web:hover{color:var(--gold);background:rgba(255,215,0,0.12);}
.plat svg{width:12px;height:12px;}

.c-flag{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.04em;color:var(--gold3);margin-top:9px;display:inline-flex;align-items:center;gap:5px;}
.c-flag .d{width:5px;height:5px;border-radius:50%;background:var(--gold);}

.c-foot{margin-top:auto;padding-top:11px;margin-top:12px;border-top:1px dashed rgba(255,255,255,0.08);display:flex;align-items:center;}
.c-follow{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-size:0.82rem;letter-spacing:0.06em;color:var(--dim);background:none;border:none;cursor:pointer;padding:2px 2px;}
.c-follow svg{width:16px;height:16px;}
.c-follow:hover{color:var(--white);}
.c-follow.on{color:var(--gold);}
.c-season{margin-left:auto;font-family:var(--mono);font-size:0.58rem;letter-spacing:0.08em;color:var(--dim2);text-transform:uppercase;cursor:help;}
.c-season b{color:var(--dim);}
.c-go{margin-left:auto;font-family:var(--head);font-size:0.82rem;letter-spacing:0.08em;color:var(--dim);}
.card:hover .c-go{color:var(--gold);}

.vs{max-width:1180px;margin:46px auto 0;padding:0 28px;}
.vs-box{background:linear-gradient(135deg,rgba(255,51,0,0.06),rgba(255,215,0,0.05));border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:26px 24px;}
.vs-kicker{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.16em;color:var(--gold3);text-transform:uppercase;}
.vs-title{font-family:var(--head);font-size:1.9rem;letter-spacing:0.04em;margin-top:8px;}
.vs-title .r{color:var(--red2);}.vs-title .g{color:var(--gold);}
.vs-sub{font-size:0.9rem;color:var(--dim);margin-top:8px;max-width:660px;text-wrap:pretty;}
.vs-board{display:flex;flex-direction:column;gap:8px;margin-top:20px;}
.vs-row{display:flex;align-items:center;gap:14px;background:var(--navy2);border:1px solid rgba(255,255,255,0.06);border-radius:9px;padding:11px 15px;}
.vs-rank{font-family:var(--head);font-size:1.3rem;color:var(--gold);width:26px;text-align:center;flex-shrink:0;}
.vs-nm{font-family:var(--head);font-size:1.1rem;letter-spacing:0.03em;flex:1;min-width:0;}
.vs-rec{font-family:var(--mono);font-size:0.78rem;color:var(--dim);}
.vs-pts{font-family:var(--head);font-size:1.25rem;color:var(--white);margin-left:8px;}
.vs-lock{margin-top:16px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;color:var(--dim2);}

footer{max-width:1180px;margin:50px auto 0;padding:26px 28px 40px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.ft-c{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;color:var(--dim2);}
.ft-l{font-family:var(--head);font-size:0.85rem;letter-spacing:0.08em;color:var(--gold);}

.hidden{display:none!important;}

@media(max-width:860px){
  nav.dir-nav{padding:0 16px;}
  .nav-links,.nav-cta{display:none;}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;gap:0;background:rgba(5,8,15,0.98);border-bottom:1px solid rgba(255,255,255,0.06);padding:8px 0;z-index:60;}
  .nav-links.open .nav-link,.nav-links.open .nav-cta{display:block;margin:3px 16px;text-align:center;}
  .mob-btn{display:block;}
  .head-wrap,.filters,.sec,.vs,footer{padding-left:16px;padding-right:16px;}
  .filter-row{gap:6px;}
  .f-chip{font-size:0.82rem;padding:7px 13px;letter-spacing:0.07em;}
  .f-search{margin-left:0;width:100%;order:5;margin-top:6px;}
  .f-sep{display:none;}
  .dir-hq{width:100%;justify-content:center;margin-top:10px;padding:11px 18px;}
  .grid{grid-template-columns:1fr;}
}
.c-pending{font-size:0.72rem;letter-spacing:0.08em;color:var(--dim2);font-family:var(--mono);text-transform:uppercase;}

/* ===== "Add to Favorites?" popup (card click) ===== */
.ffm-back{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(3,5,10,0.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.ffm-back.open{display:flex;}
.ffm{position:relative;width:100%;max-width:420px;background:linear-gradient(180deg,#0E1424,#0A0F1C);
  border:1px solid rgba(255,215,0,0.30);border-radius:16px;padding:26px 24px 22px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.85),0 0 40px rgba(255,215,0,0.10);animation:ffmpop 0.18s ease-out;}
@keyframes ffmpop{from{opacity:0;transform:translateY(10px) scale(0.97);}to{opacity:1;transform:none;}}
.ffm-x{position:absolute;top:10px;right:12px;background:none;border:none;color:#8FA0BC;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;}
.ffm-x:hover{color:#fff;}
.ffm-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;}
.ffm-av{width:52px;height:52px;border-radius:12px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:20px;color:#05080F;background:linear-gradient(135deg,#FFD700,#CC9900);}
.ffm-av img{width:100%;height:100%;object-fit:cover;}
.ffm-name{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:0.02em;color:#fff;line-height:1.05;}
.ffm-spec{font-family:'Share Tech Mono',monospace;font-size:0.66rem;letter-spacing:0.10em;color:#8B9ECB;text-transform:uppercase;margin-top:3px;}
.ffm-copy{color:#c4cee0;font-size:0.95rem;line-height:1.5;margin:0 0 18px;}
.ffm-copy b{color:#FFD700;font-weight:600;}
.ffm-actions{display:flex;flex-direction:column;gap:9px;}
.ffm-btn{font-family:'Bebas Neue',sans-serif;letter-spacing:0.08em;font-size:1.05rem;border-radius:8px;padding:12px 18px;cursor:pointer;border:1px solid transparent;transition:filter 0.15s,background 0.15s;}
.ffm-btn.primary{background:#FFD700;color:#05080F;box-shadow:0 0 22px rgba(255,215,0,0.35);}
.ffm-btn.primary:hover{filter:brightness(1.08);}
.ffm-btn.ghost{background:transparent;border-color:rgba(255,255,255,0.16);color:#9aa4b6;font-family:'Barlow',sans-serif;font-size:0.85rem;letter-spacing:0.01em;padding:9px 18px;}
.ffm-btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,0.3);}
.ffm-alt{display:block;text-align:center;margin-top:14px;color:#8FA0BC;font-size:0.85rem;text-decoration:none;}
.ffm-alt:hover{color:#FFD700;}

/* ═══ GUEST FOLLOW NUDGE (v3.9) ═══
   Gentle, dismissible toast shown once per visit after a logged-out follow.
   Invites a free account (which unlocks the 1ST HQ feed) without blocking. */
.ff-nudge{
  position:fixed; z-index:1100; right:20px; bottom:20px; width:340px; max-width:calc(100vw - 40px);
  background:linear-gradient(180deg,#0E1424,#0A0F1C);
  border:1px solid rgba(255,215,0,0.22); border-radius:12px;
  box-shadow:0 18px 50px -14px rgba(0,0,0,0.75);
  padding:16px 18px 18px; color:#c4cee0;
  transform:translateY(140%); opacity:0; transition:transform .28s ease, opacity .28s ease;
  pointer-events:none;
}
.ff-nudge.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.ff-nudge-x{
  position:absolute; top:8px; right:10px; background:none; border:none;
  color:#8FA0BC; font-size:22px; line-height:1; cursor:pointer; padding:2px 6px;
}
.ff-nudge-x:hover{ color:#fff; }
.ff-nudge-title{
  font-family:'Bebas Neue',sans-serif; letter-spacing:0.04em;
  font-size:1.15rem; color:#FFD700; margin-bottom:6px;
}
.ff-nudge-copy{ font-size:0.88rem; line-height:1.5; margin:0 0 14px; }
.ff-nudge-copy b{ color:#F5F7FA; font-weight:600; }
.ff-nudge-cta{
  display:block; text-align:center; text-decoration:none;
  font-family:'Bebas Neue',sans-serif; letter-spacing:0.08em; font-size:1.02rem;
  background:#FF3300; color:#fff; border-radius:8px; padding:11px 16px;
  box-shadow:0 8px 22px -10px rgba(255,51,0,0.6); transition:filter .15s;
}
.ff-nudge-cta:hover{ filter:brightness(1.08); }
@media(max-width:600px){
  .ff-nudge{ right:12px; left:12px; bottom:12px; width:auto; }
}