/* ============================================================
   biopunk.house // network — static site stylesheet.
   DARK SOLARPUNK look — unified with the React homepage.
   Deep violet ground, botanical green signal, coral + gold accents.
   Playfair Display headings · DM Sans body · Space Mono labels.
   Soft glows, rounded corners, grain. (BIOPUNK black/bone/red retired.)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: hsl(260 22% 10%);          /* deep violet ground */
  --bg-card: hsl(260 18% 14%);
  --fg: hsl(42 30% 88%);           /* warm cream */
  --fg-dim: hsl(42 30% 88% / 0.72);
  --fg-dim2: hsl(42 30% 88% / 0.45);
  --green: hsl(142 62% 52%);       /* botanical green — primary signal */
  --green-bright: hsl(142 62% 60%);
  --coral: hsl(12 80% 62%);        /* warm coral-salmon — secondary */
  --gold: hsl(40 90% 58%);         /* golden amber — accent */
  --border: hsl(260 25% 28%);
  --muted: hsl(260 14% 18%);
  --radius: 4px;
  --glow-green: 0 0 28px hsl(142 62% 52% / 0.35);
  --glow-text: 0 0 14px hsl(142 62% 52% / 0.55);
  --gradient-punk: linear-gradient(135deg, hsl(142 62% 52%) 0%, hsl(40 90% 58%) 50%, hsl(12 80% 62%) 100%);
  --gradient-glow: linear-gradient(90deg, transparent, hsl(142 62% 52% / 0.5), transparent);
  --leaf: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2352c97a' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--fg);
  margin: 0;
}
.bp-h1 { font-size: clamp(44px, 8vw, 92px); font-weight: 900; }
.bp-h2 { font-size: clamp(30px, 5vw, 60px); }
.bp-h3 { font-size: clamp(20px, 3vw, 30px); font-weight: 700; }
.bp-red { color: var(--green); }        /* the "signal" word — now green */
.bp-dim { color: var(--fg-dim); }
.bp-dim2 { color: var(--fg-dim2); }

/* body voice — clean DM Sans (was typewriter) */
.bp-tw { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 300; letter-spacing: 0; text-transform: none; }
.bp-mono { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; }

/* small annotation — green mono note (was rotated red sharpie) */
.bp-sharpie { font-family: 'Space Mono', monospace; color: var(--green); font-size: 13px; letter-spacing: 0.02em; display: inline-block; }

/* circular badge — green outline + glow (was rotated red ransom stamp) */
.bp-stamp {
  font-family: 'Space Mono', monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--green);
  border: 1.5px solid hsl(142 62% 52% / 0.55); border-radius: 9999px;
  width: 92px; height: 92px; display: inline-flex; align-items: center;
  justify-content: center; text-align: center; line-height: 1;
  box-shadow: var(--glow-green); background: hsl(142 62% 52% / 0.05);
}

/* eyebrow / section label — green Space Mono with a fading rule */
.bp-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--green); display: flex; align-items: center;
  gap: 10px; margin-bottom: 18px;
}
.bp-eyebrow::after { content: ''; flex: 1; height: 1px; background: hsl(142 62% 52% / 0.25); }

a { color: inherit; text-decoration: none; }
.bp-link { color: var(--green); text-decoration: underline; text-decoration-color: hsl(142 62% 52% / 0.5); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-shadow .2s, color .2s; }
.bp-link:hover { color: var(--green-bright); text-shadow: var(--glow-text); }

/* ---- buttons (match homepage .btn-solar) ---- */
.bp-btn, .bp-btn-outline {
  font-family: 'Space Mono', monospace; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 12px; padding: 12px 28px; cursor: pointer;
  display: inline-block; border-radius: 2px; transition: all .2s;
}
.bp-btn { background: var(--green); color: hsl(150 18% 8%); border: none; font-weight: 700; box-shadow: 0 0 20px hsl(142 62% 52% / 0.35); }
.bp-btn:hover { background: var(--green-bright); box-shadow: 0 0 32px hsl(142 62% 52% / 0.55); transform: translateY(-1px); }
.bp-btn-outline { background: transparent; color: var(--fg); border: 1.5px solid hsl(42 30% 88% / 0.4); font-weight: 400; }
.bp-btn-outline:hover { border-color: hsl(42 30% 88% / 0.8); background: hsl(42 30% 88% / 0.06); }

/* ---- surfaces ---- */
.bp-card {
  border: 1.5px solid hsl(142 62% 52% / 0.4); border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: inset 0 0 16px hsl(142 62% 52% / 0.06), var(--glow-green);
}
.bp-tag {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-dim); border: 1px solid hsl(142 62% 52% / 0.3);
  border-radius: 999px; padding: 5px 12px; display: inline-block;
}
.bp-grid { background-image: var(--leaf); }
em, i { font-style: normal; font-weight: 600; color: var(--green); }

/* soft green section divider (was caution tape) */
.dsrule { width: 100%; height: 1px; border: none; background: var(--gradient-glow); }

/* ---- layout helpers ---- */
.wrap { max-width: 1152px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.section { padding: 56px 0; }
.hero { position: relative; border-bottom: 1px solid var(--border); overflow: hidden; }
.hero .wrap { position: relative; padding-top: 64px; padding-bottom: 96px; }
.hero-grid { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mt-8 { margin-top: 32px; }
.maxw { max-width: 640px; } .maxw-lg { max-width: 900px; }

/* bordered grid of cells */
.cellgrid { border: 1px solid var(--border); border-radius: var(--radius); display: grid; overflow: hidden; }
.cellgrid > * { padding: 24px; border: 1px solid hsl(260 25% 28% / 0.6); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .cellgrid > * { padding: 18px 16px; } }
.cols-2, .cols-3, .cols-4, .cols-5, .cols-6 { grid-template-columns: 1fr; }
.cols-4, .cols-5, .cols-6 { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  .cols-5 { grid-template-columns: repeat(5, 1fr); }
  .cols-6 { grid-template-columns: repeat(6, 1fr); }
}
.fact .k { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.fact .v { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(18px, 4.6vw, 24px); color: var(--fg); }

/* ---- nav ---- */
.bp-nav { position: sticky; top: 0; z-index: 50; background: hsl(260 22% 10% / 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(142 62% 52% / 0.2); }
.bp-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1152px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .bp-nav-inner { padding: 0 32px; } }
.bp-brand { display: flex; align-items: center; gap: 12px; }
.bp-brand img { height: 34px; width: auto; filter: drop-shadow(0 0 8px hsl(142 62% 52% / 0.25)); }
.bp-brand-word { font-family: 'Playfair Display', serif; font-weight: 900; color: var(--fg); font-size: 19px; letter-spacing: 0; line-height: 1; }
/* Right-justified next to the brand: every link inline once the bar is wide
   enough to hold all eight of them plus the brand and the Apply button.
   Below that only the burger + Apply show; links move into the mobile menu
   panel. The switch used to happen at 768px, where the row was ~140px wider
   than the viewport — it pushed Apply off-screen and made every page scroll
   sideways up to ~900px. */
.bp-navlinks { display: flex; align-items: center; gap: 20px; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
.bp-navlinks a { color: var(--fg-dim); }
.bp-navlinks a:hover { color: var(--green); }
.bp-navlinks .hidesm { display: none; }
@media (min-width: 1100px) { .bp-navlinks .hidesm { display: inline; } }

/* Very narrow phones (≤400px): the brand lockup plus Apply plus the burger
   overflowed the bar on the longer wordmarks (PORTFOLIO, ECOSYSTEM), which
   made the whole page scroll sideways. Shrink the lockup instead. */
@media (max-width: 400px) {
  .bp-nav-inner { padding: 0 14px; gap: 10px; }
  .bp-brand { gap: 8px; }
  .bp-brand img { height: 28px; }
  .bp-brand-word { font-size: 15px; }
  .bp-navlinks { gap: 12px; }
}

/* mobile hamburger + tap-to-open menu (static pages) */
.bp-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 9px; background: none; border: 1px solid hsl(142 62% 52% / 0.35); border-radius: var(--radius); cursor: pointer; }
.bp-burger span { display: block; width: 100%; height: 2px; background: var(--fg); }
.bp-mobile-menu { display: flex; flex-direction: column; background: hsl(260 22% 10% / 0.98); border-top: 1px solid var(--border); }
.bp-mobile-menu[hidden] { display: none; }
.bp-mobile-menu a { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--fg-dim); padding: 15px 20px; border-bottom: 1px solid hsl(260 25% 28% / 0.5); }
.bp-mobile-menu a:last-child { border-bottom: none; }
.bp-mobile-menu a:hover, .bp-mobile-menu a:active { color: var(--green); background: hsl(142 62% 52% / 0.06); }
@media (min-width: 1100px) { .bp-burger { display: none; } }
@media (min-width: 1100px) { .bp-mobile-menu { display: none !important; } }

/* ---- avatars & card grids (portfolio, mentors) ---- */
.bp-avatar {
  border-radius: 50%;
  background: hsl(142 62% 52% / 0.14);
  border: 1.5px solid hsl(142 62% 52% / 0.4);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 900;
  flex-shrink: 0; overflow: hidden;
}
.bp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.grid-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.person-card { display: flex; flex-direction: column; gap: 12px; }
.person-card:hover { border-color: hsl(142 62% 52% / 0.7); }

/* ---- footer ---- */
.bp-footer { background: hsl(260 20% 8%); border-top: 1px solid var(--border); margin-top: 64px; }
.bp-footer-cols { max-width: 1152px; margin: 0 auto; padding: 48px 20px; display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .bp-footer-cols { grid-template-columns: repeat(4, 1fr); padding: 48px 32px; } }
.bp-footer h4 { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--green); margin-bottom: 12px; letter-spacing: 0.16em; }
.bp-footer ul { list-style: none; margin: 0; padding: 0; }
.bp-footer li { margin-bottom: 8px; }
.bp-footer a { font-family: 'DM Sans', sans-serif; color: var(--fg-dim); font-size: 14px; }
.bp-footer a:hover { color: var(--green); }
.bp-footer-base { max-width: 1152px; margin: 0 auto; padding: 0 20px 32px; font-family: 'Space Mono', monospace; font-size: 10px; color: var(--fg-dim2); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; letter-spacing: 0.16em; }
@media (min-width: 768px) { .bp-footer-base { padding: 0 32px 32px; } }