/*
Theme Name: Boise Devs Collective
Theme URI: https://wdb.fudojahic.com
Author: Fudo
Author URI: https://fudophoto.com
Description: Custom theme for the Boise Devs Collective — a community platform for web developers and vibe coders in the Treasure Valley. Terminal-inflected dark UI with monthly build challenges, meetups, a shared resource shelf and community news.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boisedevs
Tags: dark, community, custom-colors, custom-menu, block-styles
*/

/* ==========================================================================
   1. TOKENS — colors, type, spacing, radii, motion
   Every value used anywhere in the theme is declared here.
   ========================================================================== */

:root {

  /* --- Brand: core surfaces --------------------------------------------- */
  --bg:                 #05080f;   /* page background — near-black navy */
  --surface:            #080d18;   /* cards, rows, cells */
  --surface-2:          #0d1526;   /* raised panels */
  --surface-3:          #101a2e;   /* hover state on rows and cells */
  --surface-open:       #0d1a30;   /* highlighted (open challenge) cell */
  --terminal:           #070b14;   /* terminal / code panel background */

  /* --- Brand: text ------------------------------------------------------ */
  --text:               #dde6f5;
  --text-bright:        #e8f1ff;
  --text-70:            rgba(221, 230, 245, .7);
  --text-60:            rgba(221, 230, 245, .6);
  --text-55:            rgba(221, 230, 245, .55);
  --text-50:            rgba(221, 230, 245, .5);
  --text-45:            rgba(221, 230, 245, .45);
  --text-40:            rgba(221, 230, 245, .4);
  --text-35:            rgba(221, 230, 245, .35);
  --text-30:            rgba(221, 230, 245, .3);

  /* --- Brand: accent (blue) --------------------------------------------- */
  --blue:               #3b82f6;
  --blue-400:           #60a5fa;
  --blue-300:           #93c5fd;
  --blue-200:           #bfdbfe;
  --blue-100:           #dbeafe;
  --blue-700:           #1d4ed8;
  --link:               #7fb2ff;
  --link-hover:         #cfe2ff;
  --label:              rgba(147, 197, 253, .7);   /* mono section labels */
  --label-strong:       rgba(147, 197, 253, .75);

  /* --- Brand: status ---------------------------------------------------- */
  --green:              #4ade80;
  --green-soft:         #86efac;
  --green-bg:           rgba(74, 222, 128, .12);
  --green-bc:           rgba(74, 222, 128, .3);
  --locked-bg:          rgba(37, 99, 235, .14);
  --locked-bc:          rgba(110, 150, 220, .24);
  --archive-bg:         rgba(255, 255, 255, .04);

  /* --- Brand: lines ----------------------------------------------------- */
  --line:               rgba(110, 150, 220, .15);
  --line-soft:          rgba(110, 150, 220, .12);
  --line-strong:        rgba(110, 150, 220, .2);
  --line-input:         rgba(110, 150, 220, .22);
  --grid-line:          rgba(110, 150, 220, .14);

  /* --- Brand: signature gradients --------------------------------------- */
  --grad-btn:           linear-gradient(100deg, #93c5fd, #f8fbff 26%, #60a5fa 52%, #dbeafe 76%, #93c5fd);
  --grad-text:          linear-gradient(96deg, #93c5fd, #f2f8ff 45%, #3b82f6);
  --grad-panel:         linear-gradient(150deg, #0d1526, #070b15 62%, #0b1428);
  --grad-join:          linear-gradient(150deg, #0d1728, #060a13 62%, #0b1730);
  --grad-mark:          linear-gradient(140deg, #dbeafe, #3b82f6 45%, #0b1a3a);

  /* --- Brand: shadows --------------------------------------------------- */
  --shadow-btn:         0 6px 26px rgba(96, 165, 250, .42);
  --shadow-btn-sm:      0 3px 18px rgba(96, 165, 250, .4);
  --shadow-btn-hover:   0 6px 26px rgba(147, 197, 253, .6);
  --shadow-panel:       0 20px 60px rgba(3, 8, 20, .8);
  --shadow-modal:       0 30px 90px rgba(2, 10, 30, .85);
  --glow-mark:          0 0 14px rgba(59, 130, 246, .55);

  /* --- Type ------------------------------------------------------------- */
  --font-sans:          'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:          'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:         56px;   /* h1 */
  --fs-h2:              36px;
  --fs-h2-lg:           38px;   /* join panel */
  --fs-h3:              32px;   /* featured challenge title */
  --fs-h4:              20px;   /* organizer name */
  --fs-card-title:      17px;
  --fs-row-title:       16px;
  --fs-res-title:       15.5px;
  --fs-lead:            15px;
  --fs-body:            14px;
  --fs-body-sm:         13.5px;
  --fs-ui:              13px;
  --fs-ui-sm:           12.5px;
  --fs-meta:            12.4px;
  --fs-mono:            11.5px;
  --fs-mono-sm:         11px;
  --fs-mono-xs:         10.5px;
  --fs-mono-2xs:        9.5px;

  --lh-tight:           1.12;
  --lh-body:            1.6;
  --lh-relaxed:         1.65;

  --ls-display:         -2px;
  --ls-h2:              -1.3px;
  --ls-h3:              -1.1px;
  --ls-label:           1.8px;   /* mono section labels */
  --ls-eyebrow:         2.2px;   /* hero eyebrow */
  --ls-pill:            1px;
  --ls-stat:            1.2px;

  /* --- Spacing ---------------------------------------------------------- */
  --gutter:             28px;   /* horizontal page padding */
  --wrap:               1140px; /* content max width */
  --wrap-narrow:        760px;

  --sp-1:               4px;
  --sp-2:               6px;
  --sp-3:               9px;
  --sp-4:               12px;
  --sp-5:               16px;
  --sp-6:               20px;
  --sp-7:               22px;
  --sp-8:               26px;
  --sp-9:               32px;
  --sp-10:              40px;
  --sp-12:              48px;

  --pad-card:           20px;
  --pad-panel:          26px 22px;
  --pad-row:            20px 22px;
  --pad-featured:       30px 32px;
  --pad-section:        80px var(--gutter) 0;
  --pad-btn:            12px 22px;
  --pad-btn-sm:         11px 20px;
  --pad-input:          12px 14px;

  /* --- Radii ------------------------------------------------------------ */
  --r-sm:               5px;
  --r:                  8px;
  --r-md:               9px;
  --r-lg:               12px;
  --r-xl:               14px;
  --r-2xl:              16px;

  /* --- Motion ----------------------------------------------------------- */
  --t-fast:             .2s;
  --t:                  .25s;
  --t-slow:             .7s;
  --header-h:           64px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; display: block; }

input,
textarea,
button,
select { font-family: inherit; }

input:focus,
textarea:focus { outline: none; }

::selection { background: var(--blue-700); color: #fff; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #16223a; border-radius: var(--r); }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--sp-5);
  z-index: 200;
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--text-bright);
  transition: top var(--t);
}
.skip-link:focus { top: var(--sp-5); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; }

.section {
  position: relative;
  padding: var(--pad-section);
  scroll-margin-top: var(--header-h);
}
.section--first { padding-top: 74px; }
.section--last { padding-bottom: 90px; }

.page-shell {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Section eyebrow — "01 / MONTHLY CHALLENGES" */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-label);
  color: var(--label);
  margin-bottom: var(--sp-5);
}

/* Heading + intro paragraph pair */
.section-head {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-10);
  align-items: end;
  margin-bottom: var(--sp-8);
}
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  margin: 0;
}
.section-head p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-55);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  cursor: pointer;
  border: 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  padding: var(--pad-btn);
  border-radius: var(--r-md);
  text-align: center;
  white-space: nowrap;
  transition: background-position var(--t-slow) ease, transform var(--t), box-shadow var(--t);
}

/* Primary — the signature sweeping metallic-blue gradient */
.btn--primary {
  color: #04101f;
  background: var(--grad-btn);
  background-size: 230% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  color: #04101f;
}

.btn--sm { font-size: var(--fs-ui-sm); padding: var(--pad-btn-sm); border-radius: var(--r); }
.btn--sm.btn--primary { box-shadow: 0 5px 22px rgba(96, 165, 250, .4); }
.btn--sm.btn--primary:hover { transform: translateY(-1px); }

/* Ghost — outlined */
.btn--ghost {
  color: var(--text-70);
  background: transparent;
  border: 1px solid var(--line-input);
}
.btn--ghost:hover { background: rgba(110, 150, 220, .12); color: #fff; }

/* Mono ghost — "$ bdc brief" */
.btn--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-ui-sm);
  font-weight: 400;
  color: var(--text-70);
  background: transparent;
  border: 1px solid var(--line-input);
  padding: var(--pad-btn-sm);
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--t);
}
.btn--mono:hover { background: rgba(110, 150, 220, .12); color: #fff; }

.btn--full { width: 100%; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(5, 8, 15, .78);
  border-bottom: 1px solid rgba(110, 150, 220, .11);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 13px var(--gutter);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); }
.brand:hover { color: var(--text); }
.brand__mark {
  width: 19px; height: 19px;
  border-radius: var(--r-sm);
  background: var(--grad-mark);
  box-shadow: var(--glow-mark);
  flex: none;
}
.brand__name { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.2px; }

.site-nav { display: flex; align-items: center; gap: var(--sp-1); }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-55);
  padding: 7px 11px;
  border-radius: var(--r-sm);
  transition: var(--t-fast);
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
  color: #fff;
  background: rgba(110, 150, 220, .09);
}
.site-nav .btn { margin-left: var(--sp-4); font-size: var(--fs-ui-sm); padding: 9px var(--sp-5); border-radius: var(--r); box-shadow: var(--shadow-btn-sm); }
.site-nav .btn:hover { box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: 7px 11px;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding: 76px var(--gutter) 66px;
  border-bottom: 1px solid rgba(110, 150, 220, .1);
}

/* Dotted grid, masked to fade out downward */
.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(120, 170, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 70% at 50% 0%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 15%, transparent 72%);
  pointer-events: none;
}

/* Blue bloom behind the headline */
.hero__glow {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 420px;
  background: radial-gradient(ellipse at 50% 50%, rgba(37, 99, 235, .38), rgba(5, 8, 15, 0) 68%);
  filter: blur(16px);
  pointer-events: none;
  animation: drift 8s ease-in-out infinite;
}

.hero__inner { position: relative; max-width: var(--wrap-narrow); margin: 0 auto; text-align: center; }

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--label-strong);
  margin-bottom: var(--sp-7);
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  margin: 0 0 18px;
}

/* Gradient-filled second line of the headline */
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 500px;
  margin: 0 auto 30px;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-55);
  text-wrap: pretty;
}

/* Search console */
.console {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16, 24, 42, .9), rgba(9, 13, 24, .9));
  box-shadow: var(--shadow-panel);
  text-align: left;
}
.console__row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5); }
.console__caret { font-family: var(--font-mono); font-size: var(--fs-ui-sm); color: var(--blue-400); }
.console__input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: var(--fs-body-sm);
}
.console__input::placeholder { color: var(--text-40); }
.console__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--text-40);
  border: 1px solid var(--line-strong);
  padding: var(--sp-1) 7px;
  border-radius: var(--r-sm);
}
.console__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid rgba(110, 150, 220, .13);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--text-40);
}
.console__live { display: flex; align-items: center; gap: 7px; }
.dot-live {
  width: var(--sp-2); height: var(--sp-2);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 var(--sp-3) var(--green);
  animation: tick 2s ease-in-out infinite;
}

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-7);
}

/* ==========================================================================
   7. FEATURED CHALLENGE PANEL
   ========================================================================== */

.featured {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--grad-panel);
}
.featured__glow {
  position: absolute;
  right: -140px;
  top: -180px;
  width: 520px;
  height: 440px;
  background: radial-gradient(circle, rgba(59, 130, 246, .3), rgba(5, 8, 15, 0) 68%);
  pointer-events: none;
}
.featured__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 340px;
}
.featured__body { padding: var(--pad-featured); border-right: 1px solid var(--line); }
.featured__tags {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-stat);
  margin-bottom: 18px;
}
.featured h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  margin: 0 0 var(--sp-4);
}
.featured__blurb {
  margin: 0 0 var(--sp-8);
  max-width: 440px;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-60);
}
.featured__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--sp-8);
  justify-content: start;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  margin-bottom: var(--sp-7);
}
.featured__stat-n { font-family: var(--font-mono); font-size: 19px; color: var(--blue-200); }
.featured__stat-l {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: var(--ls-pill);
  color: rgba(221, 230, 245, .38);
  margin-top: var(--sp-1);
}
.featured__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* Pills */
.pill {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-pill);
}
.pill--open { background: var(--green-bg); color: var(--green-soft); border: 1px solid var(--green-bc); }
.pill--locked { background: var(--locked-bg); color: var(--blue-300); border: 1px solid var(--locked-bc); }
.pill--archive { background: var(--archive-bg); color: var(--text-55); border: 1px solid rgba(110, 150, 220, .18); }

/* ==========================================================================
   8. TERMINAL PANEL (leaderboard + modal)
   ========================================================================== */

.terminal {
  position: relative;
  background: var(--terminal);
  font-family: var(--font-mono);
  overflow: hidden;
}
.terminal__scan {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, .07), rgba(96, 165, 250, 0));
  animation: scan 6s linear infinite;
  pointer-events: none;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px var(--sp-5);
  border-bottom: 1px solid var(--grid-line);
}
.terminal__bar--modal {
  gap: 11px;
  background: linear-gradient(180deg, #101a2e, #0a1120);
  border-bottom: 1px solid rgba(110, 150, 220, .16);
}
.tdot { width: var(--sp-3); height: var(--sp-3); border-radius: 50%; flex: none; }
.tdot--r { background: #ff5f57; }
.tdot--y { background: #febc2e; }
.tdot--g { background: #28c840; }
.tdot--lg { width: 11px; height: 11px; }
.terminal__title { flex: 1; text-align: center; font-size: 10px; color: rgba(221, 230, 245, .38); }
.terminal__body { padding: var(--sp-5); font-size: var(--fs-mono); line-height: 1.75; }
.terminal__note { color: var(--text-35); margin-bottom: var(--sp-3); }

.lb-row { display: flex; gap: var(--sp-3); padding: 3px 0; }
.lb-rank { color: rgba(147, 197, 253, .8); }
.lb-name { flex: 1; color: rgba(221, 230, 245, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-votes { color: var(--green-soft); }

.caret-line { display: flex; align-items: center; gap: 7px; margin-top: var(--sp-4); color: var(--text-35); }
.caret-line span:first-child { color: var(--blue-400); }
.caret {
  display: inline-block;
  width: 7px; height: var(--sp-4);
  background: var(--blue-400);
  animation: blink 1.1s steps(1) infinite;
}

/* ==========================================================================
   9. FILTER BAR
   ========================================================================== */

.filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: 34px 0 18px;
}
.chips { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.chip {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-right: 1px solid var(--grid-line);
  background: transparent;
  color: var(--text-55);
  transition: var(--t-fast);
}
.chip:last-child { border-right: 0; }
.chip:hover { color: #fff; }
.chip.is-active {
  background: linear-gradient(100deg, rgba(37, 99, 235, .6), rgba(96, 165, 250, .35));
  color: #fff;
}

.grep {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-5);
  border: 1px solid rgba(110, 150, 220, .18);
  border-radius: var(--r-md);
  background: rgba(16, 24, 42, .5);
}
.grep__slash { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--blue-400); }
.grep input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: var(--fs-ui-sm);
  padding: 10px 0;
}
.grep input::placeholder { color: var(--text-40); }

.result-count { font-family: var(--font-mono); font-size: var(--fs-mono-xs); color: var(--text-35); }

/* ==========================================================================
   10. CARD GRID (challenges, resources)
   1px gap over a line-coloured background creates hairline dividers.
   ========================================================================== */

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cardgrid--res { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); }

.card {
  position: relative;
  padding: var(--pad-card);
  background: var(--surface);
  cursor: pointer;
  border: 0;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
  transition: background var(--t);
}
.card:hover { background: var(--surface-3); }
.card.is-open { background: var(--surface-open); }
.card.is-locked { opacity: .78; }

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: var(--ls-pill);
}
.card__month { color: var(--text-35); }
.card__pill { padding: 3px 7px; border-radius: var(--r-1, 4px); }
.card__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card__num { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: rgba(147, 197, 253, .55); }
.card__title { font-size: var(--fs-card-title); font-weight: 600; letter-spacing: -.4px; margin: 0; }
.card__blurb {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-ui-sm);
  line-height: 1.55;
  color: var(--text-50);
  min-height: 56px;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
}
.card__meta { color: rgba(221, 230, 245, .38); }
.card__cta { color: rgba(147, 197, 253, .8); }
.card__cta--open { color: var(--green-soft); }

.card.is-hidden { display: none; }

/* Resource card */
.rescard { display: block; padding: var(--pad-card); background: var(--surface); color: inherit; transition: background var(--t); }
.rescard:hover { background: var(--surface-3); color: inherit; }
.rescard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: 1.1px;
  color: var(--label);
}
.rescard__name { font-size: var(--fs-res-title); font-weight: 600; letter-spacing: -.3px; margin-bottom: 7px; }
.rescard__desc { margin: 0; font-size: var(--fs-meta); line-height: 1.55; color: var(--text-50); }

/* Resource tabs */
.tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-55);
  transition: var(--t-fast);
}
.tab:hover { color: #fff; }
.tab.is-active { background: rgba(37, 99, 235, .25); color: #fff; border-color: var(--locked-bc); }

/* ==========================================================================
   11. MEETUP ROWS
   ========================================================================== */

.rows { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.row {
  display: grid;
  grid-template-columns: 92px 1fr 250px 150px;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--pad-row);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  transition: background var(--t);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-3); }
.row.is-next { background: var(--surface-open); }

.row__date { font-family: var(--font-mono); }
.row__mon { font-size: 10px; letter-spacing: var(--ls-stat); color: var(--label-strong); }
.row__day { font-size: var(--sp-8); line-height: 1.1; color: var(--text-bright); }
.row__title { font-size: var(--fs-row-title); font-weight: 600; letter-spacing: -.3px; margin-bottom: var(--sp-1); }
.row__blurb { margin: 0; font-size: var(--fs-ui-sm); line-height: 1.55; color: var(--text-50); max-width: 420px; }
.row__facts { font-family: var(--font-mono); font-size: var(--fs-mono-sm); line-height: 1.7; color: var(--text-45); }
.row__venue { color: var(--text-70); }
.row__cta { justify-self: end; }

/* ==========================================================================
   12. NEWS + TEAMUPS
   ========================================================================== */

.news-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }

.newslist { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.newsitem {
  display: flex;
  gap: 18px;
  padding: var(--pad-row);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  transition: background var(--t);
  color: inherit;
}
.newsitem:last-child { border-bottom: 0; }
.newsitem:hover { background: var(--surface-3); color: inherit; }
.newsitem__thumb {
  flex: none;
  width: 88px; height: 70px;
  border-radius: var(--r);
  border: 1px solid rgba(110, 150, 220, .18);
  background-image: repeating-linear-gradient(135deg, rgba(96, 165, 250, .2) 0 5px, rgba(255, 255, 255, .02) 5px 11px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-2);
  overflow: hidden;
}
.newsitem__thumb span { font-family: var(--font-mono); font-size: 8px; color: var(--text-50); }
.newsitem__meta {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: var(--ls-pill);
}
.newsitem__tag { padding: 3px 7px; border-radius: 4px; background: rgba(37, 99, 235, .18); color: var(--blue-300); }
.newsitem__date { color: var(--text-35); }
.newsitem__title { font-size: var(--fs-res-title); font-weight: 600; letter-spacing: -.3px; margin-bottom: var(--sp-2); }
.newsitem__excerpt { margin: 0; font-size: var(--fs-ui-sm); line-height: 1.58; color: var(--text-50); }

.teamups {
  border: 1px solid rgba(110, 150, 220, .18);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(37, 99, 235, .16), rgba(8, 13, 24, .9));
  padding: var(--sp-7);
}
.teamups__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--text-45);
  margin-bottom: var(--sp-5);
}
.teamup { padding: 13px 0; border-top: 1px solid var(--grid-line); }
.teamup__head { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.teamup__project { font-size: var(--fs-body-sm); font-weight: 600; }
.teamup__need {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: .8px;
  color: var(--blue-300);
  white-space: nowrap;
}
.teamup__by { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-45); margin-top: var(--sp-1); }
.teamups__link { display: inline-block; margin-top: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ==========================================================================
   13. STATS STRIP
   ========================================================================== */

.stats {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.stat { padding: var(--pad-panel); border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: 0; }
.stat__n { font-family: var(--font-mono); font-size: var(--sp-9); color: var(--text-bright); }
.stat__l {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: var(--ls-stat);
  color: var(--text-40);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   14. ORGANIZERS
   ========================================================================== */

.orgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.org { display: flex; gap: var(--sp-6); padding: var(--sp-8); background: var(--surface); transition: background var(--t); }
.org:hover { background: #0e1830; }
.org__photo {
  flex: none;
  width: 104px; height: 132px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background-image: repeating-linear-gradient(135deg, rgba(96, 165, 250, .22) 0 var(--sp-2), rgba(255, 255, 255, .02) var(--sp-2) 13px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 7px;
  overflow: hidden;
}
.org__photo span { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-55); }
.org__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.5px; margin: 0 0 var(--sp-1); }
.org__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.1px;
  color: var(--label-strong);
  margin-bottom: 11px;
}
.org__bio { margin: 0 0 13px; font-size: 12.8px; line-height: var(--lh-body); color: var(--text-55); }
.org__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-mono-xs); }
.org__tag { padding: var(--sp-1) 10px; border-radius: var(--r-sm); border: 1px solid var(--line-input); color: var(--text-60); }

/* ==========================================================================
   15. JOIN PANEL
   ========================================================================== */

.join {
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--grad-join);
}
.join__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(120, 170, 255, .14) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(90% 100% at 100% 100%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 100% at 100% 100%, #000, transparent 70%);
  pointer-events: none;
}
.join__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 44px;
  padding: 44px var(--sp-10);
  align-items: center;
}
.join h2 {
  font-size: var(--fs-h2-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 0 0 var(--sp-5);
}
.join__lead { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-55); max-width: 400px; }

.joinform {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-7);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(8, 13, 24, .75);
}
.joinform input {
  padding: var(--pad-input);
  border-radius: var(--r);
  border: 1px solid var(--line-input);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: var(--fs-ui);
}
.joinform input::placeholder { color: var(--text-40); }
.joinform__picks { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 3px 0; }
.pick {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  padding: 7px 11px;
  border-radius: var(--r-2, 6px);
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--text-55);
  transition: var(--t-fast);
}
.pick:hover { color: #fff; }
.pick.is-on { background: rgba(37, 99, 235, .35); color: #fff; border-color: var(--blue-400); }
.joinform__note { font-family: var(--font-mono); font-size: var(--fs-mono-xs); color: var(--text-40); text-align: center; }
.joinform__err { font-family: var(--font-mono); font-size: var(--fs-mono-xs); color: #fca5a5; }

.join-success {
  padding: var(--sp-6);
  border: 1px solid var(--green-bc);
  border-radius: 11px;
  background: rgba(74, 222, 128, .08);
  font-family: var(--font-mono);
}
.join-success__head { font-size: var(--fs-ui); color: var(--green-soft); margin-bottom: var(--sp-2); }
.join-success__body { font-size: var(--fs-mono); line-height: var(--lh-body); color: var(--text-55); }

/* ==========================================================================
   16. MODAL
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2, 5, 12, .84);
  backdrop-filter: blur(var(--sp-3));
  -webkit-backdrop-filter: blur(var(--sp-3));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9);
}
.modal[hidden] { display: none; }
.modal__shell {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 1px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(147, 197, 253, .65), rgba(37, 99, 235, .18), rgba(191, 219, 254, .5));
  box-shadow: var(--shadow-modal);
  animation: rise .28s ease both;
}
.modal__inner { border-radius: var(--r-lg); overflow: hidden; background: var(--terminal); font-family: var(--font-mono); }
.modal__close {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: rgba(221, 230, 245, .38);
  font-size: var(--fs-ui-sm);
  font-family: inherit;
}
.modal__close:hover { color: #fff; }
.modal__body { padding: var(--sp-6) var(--sp-7); max-height: 64vh; overflow: auto; font-size: 12.4px; line-height: 1.85; }
.modal__login { color: var(--text-30); }
.modal__cmd { margin-top: 10px; }
.modal__user { color: var(--blue-400); }
.modal__path { color: var(--text-30); }
.modal__typed { color: #e8f1ff; }
.modal__status { margin-top: var(--sp-3); }
.modal__kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 18px;
  margin-top: var(--sp-3);
  color: var(--text-60);
}
.modal__k { color: var(--label); }
.modal__brief {
  margin-top: var(--sp-2);
  padding-left: 13px;
  border-left: 2px solid rgba(96, 165, 250, .35);
  color: var(--text-70);
  max-width: 560px;
}
.modal__foot { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: 18px; }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: var(--sp-10) var(--gutter) var(--sp-9);
}
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.site-footer__tag { margin: var(--sp-4) 0 0; font-size: var(--fs-ui-sm); color: var(--text-45); max-width: 320px; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer__nav a { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-55); }
.site-footer__nav a:hover { color: #fff; }
.site-footer__legal {
  max-width: var(--wrap);
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--text-35);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* ==========================================================================
   18. INTERIOR PAGES (single, page, archive, 404, comments)
   ========================================================================== */

.page-hero { position: relative; padding: 56px var(--gutter) var(--sp-10); border-bottom: 1px solid var(--line-soft); }
.page-hero__inner { max-width: var(--wrap); margin: 0 auto; }
.page-hero h1 {
  font-size: var(--fs-h2-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  margin: 0;
  max-width: 780px;
}
.page-hero__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-pill);
  color: var(--text-40);
  margin-top: var(--sp-4);
}

.entry { max-width: 760px; margin: 0 auto; padding: var(--sp-12) var(--gutter) 90px; }
.entry__content { font-size: var(--fs-lead); line-height: 1.75; color: var(--text-70); }
.entry__content > * + * { margin-top: var(--sp-6); }
.entry__content h2 { font-size: var(--sp-8); font-weight: 600; letter-spacing: -.8px; color: var(--text-bright); margin-top: var(--sp-12); }
.entry__content h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.4px; color: var(--text-bright); margin-top: var(--sp-10); }
.entry__content a { text-decoration: underline; text-underline-offset: 3px; }
.entry__content ul,
.entry__content ol { padding-left: var(--sp-7); }
.entry__content li + li { margin-top: var(--sp-2); }
.entry__content blockquote {
  margin-left: 0;
  padding-left: var(--sp-6);
  border-left: 2px solid rgba(96, 165, 250, .35);
  color: var(--text-60);
}
.entry__content code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: rgba(110, 150, 220, .12);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
}
.entry__content pre {
  font-family: var(--font-mono);
  background: var(--terminal);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  overflow: auto;
  font-size: var(--fs-ui-sm);
  line-height: 1.7;
}
.entry__content pre code { background: none; padding: 0; }
.entry__content img { border-radius: var(--r-lg); border: 1px solid var(--line); }
.entry__content table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui-sm); }
.entry__content th,
.entry__content td { padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); text-align: left; }
.entry__content th { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--label); letter-spacing: var(--ls-pill); }

.pagination { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-10); font-family: var(--font-mono); font-size: var(--fs-ui-sm); }
.pagination .page-numbers {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--text-55);
}
.pagination .page-numbers:hover { color: #fff; background: rgba(110, 150, 220, .12); }
.pagination .page-numbers.current { background: rgba(37, 99, 235, .35); color: #fff; border-color: var(--blue-400); }

.notfound { max-width: var(--wrap-narrow); margin: 0 auto; padding: 90px var(--gutter); text-align: center; }
.notfound__code { font-family: var(--font-mono); font-size: 72px; color: var(--blue-200); letter-spacing: -2px; }
.notfound h1 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-h2); margin: var(--sp-5) 0; }
.notfound p { color: var(--text-55); margin: 0 auto var(--sp-8); max-width: 460px; }

.comments { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 90px; }
.comments h2 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.4px; }
.comments ol { list-style: none; margin: 0; padding: 0; }
.comments .comment-body {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--sp-5);
}
.comments input[type="text"],
.comments input[type="email"],
.comments input[type="url"],
.comments textarea {
  width: 100%;
  padding: var(--pad-input);
  border-radius: var(--r);
  border: 1px solid var(--line-input);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: var(--fs-ui);
}
.comments .submit {
  cursor: pointer;
  border: 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  padding: var(--pad-btn);
  border-radius: var(--r-md);
  color: #04101f;
  background: var(--grad-btn);
  background-size: 230% 100%;
  box-shadow: var(--shadow-btn);
}

/* Empty-state notice for sections with no content yet */
.empty {
  padding: var(--sp-10);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-ui-sm);
  color: var(--text-40);
  background: var(--surface);
}


/* ==========================================================================
   19. COMING SOON TEMPLATE
   Standalone full-viewport landing. Reuses every token above.
   ========================================================================== */

.soon {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  --wrap: 1040px;
  --gutter: 30px;
}
.soon__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(120, 170, 255, .15) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(120% 80% at 50% 12%, #000 12%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 12%, #000 12%, transparent 70%);
  pointer-events: none;
}
.soon__glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 520px;
  background: radial-gradient(ellipse at 50% 50%, rgba(37, 99, 235, .4), rgba(5, 8, 15, 0) 68%);
  filter: blur(18px);
  pointer-events: none;
  animation: drift 9s ease-in-out infinite;
}

.soon__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--gutter);
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
}
.soon__region {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 1.4px;
  color: var(--text-40);
  white-space: nowrap;
}

.soon__main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 36px var(--gutter) var(--sp-6);
}
.soon__grid {
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: center;
}

.soon__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-label);
  color: rgba(147, 197, 253, .8);
  border: 1px solid var(--line-input);
  border-radius: 20px;
  padding: var(--sp-2) 13px;
  margin-bottom: var(--sp-8);
}

.soon h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -2.4px;
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}
.soon__lead {
  max-width: 440px;
  margin: 0 0 30px;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-55);
  text-wrap: pretty;
}

.soon__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 34px;
  justify-content: start;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--grid-line);
}
.soon__stat-n { font-family: var(--font-mono); font-size: var(--sp-7); color: var(--text-bright); }
.soon__stat-l {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: var(--ls-stat);
  color: rgba(221, 230, 245, .38);
  margin-top: 5px;
}

/* Terminal waitlist card */
.soon__card {
  position: relative;
  padding: 1px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(147, 197, 253, .6), rgba(37, 99, 235, .15), rgba(191, 219, 254, .45));
  box-shadow: 0 26px 70px rgba(2, 10, 30, .8);
}
.soon__card-inner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--terminal);
  font-family: var(--font-mono);
}
.soon__scan {
  position: absolute;
  left: 0; right: 0;
  height: 50px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, .06), rgba(96, 165, 250, 0));
  animation: scan 7s linear infinite;
  pointer-events: none;
}
.soon__cli { position: relative; padding: 18px; font-size: 12.2px; line-height: 1.85; }
.soon__cli-ver { color: var(--text-30); }
.soon__cli-cmd { margin-top: var(--sp-3); }

.soon__fields {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(37, 99, 235, .08);
  margin-top: var(--sp-4);
}
.soon__field { display: flex; align-items: center; gap: var(--sp-3); }
.soon__field span { color: var(--blue-400); width: 56px; flex: none; }
.soon__field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(110, 150, 220, .3);
  color: var(--text);
  font: inherit;
  padding: var(--sp-1) 2px;
}
.soon__field input::placeholder { color: var(--text-35); }

.soon__pick-label { margin-top: var(--sp-4); color: var(--text-40); font-size: var(--fs-mono-sm); }
.soon__picks { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 7px; }
.soon__hint { margin-top: var(--sp-3); font-size: var(--fs-mono-xs); color: rgba(221, 230, 245, .38); min-height: 15px; }
.soon__hint.is-error { color: #fca5a5; }
.soon__submit { width: 100%; margin-top: 13px; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-ui-sm); }

.soon__done { margin-top: var(--sp-3); animation: rise .3s ease both; }
.soon__done-ok { color: var(--green-soft); }
.soon__done-line { color: var(--text-55); }
.soon__done-theme { color: var(--blue-200); }
.soon__done-exit { margin-top: var(--sp-3); color: var(--text-30); }

.soon__cardfoot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: #0a1120;
  border-top: 1px solid var(--grid-line);
  font-size: 10px;
  color: var(--text-35);
}

/* Four feature cells */
.soon__features {
  position: relative;
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-8);
}
.soon__features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.soon__feature { padding: var(--pad-card); background: var(--surface); transition: background var(--t); }
.soon__feature:hover { background: var(--surface-3); }
.soon__feature-n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-2xs);
  letter-spacing: var(--ls-stat);
  color: var(--label);
  margin-bottom: var(--sp-3);
}
.soon__feature-t { font-size: var(--fs-body-sm); font-weight: 600; margin-bottom: 5px; }
.soon__feature-p { margin: 0; font-size: 11.8px; line-height: 1.55; color: rgba(221, 230, 245, .48); }

.soon__footer {
  position: relative;
  border-top: 1px solid var(--line-soft);
  padding: 18px var(--gutter) var(--sp-6);
}
.soon__footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--text-35);
}
.soon__footer-links { display: flex; gap: var(--sp-5); }
.soon__footer-links a { color: var(--text-55); }
.soon__footer-links a:hover { color: #fff; }

/* ==========================================================================
   20. WORDPRESS CORE CLASSES
   ========================================================================== */

.alignleft { float: left; margin: 0 var(--sp-6) var(--sp-5) 0; }
.alignright { float: right; margin: 0 0 var(--sp-5) var(--sp-6); }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide { max-width: var(--wrap); }
.alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-40);
  margin-top: var(--sp-3);
}
.sticky .card__pill { background: var(--green-bg); }

/* ==========================================================================
   21. ANIMATION
   ========================================================================== */

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rise  { from { opacity: 0; transform: translateY(var(--sp-4)); } to { opacity: 1; transform: none; } }
@keyframes scan  { 0% { transform: translateY(-100%); } 100% { transform: translateY(1100%); } }
@keyframes drift { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes tick  { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 1020px) {
  :root { --fs-display: 44px; --fs-h2: 30px; --fs-h2-lg: 32px; --fs-h3: 26px; }

  .section-head { grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
  .featured__grid { grid-template-columns: 1fr; }
  .featured__body { border-right: 0; border-bottom: 1px solid var(--line); }
  .news-grid { grid-template-columns: 1fr; }
  .join__grid { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-9) var(--sp-8); }
  .orgs { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .row { grid-template-columns: 72px 1fr; gap: var(--sp-5) 18px; }
  .soon__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .soon h1 { font-size: 46px; letter-spacing: -1.8px; }
  .soon__features-grid { grid-template-columns: repeat(2, 1fr); }
  .row__facts { grid-column: 2; }
  .row__cta { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; --fs-display: 34px; --fs-h2: 26px; --fs-h2-lg: 27px; --pad-section: 56px var(--gutter) 0; --pad-featured: 22px 20px; }

  .site-header__inner { padding: 11px var(--gutter); }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background: rgba(5, 8, 15, .97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .site-nav[hidden] { display: none; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 11px var(--sp-4); font-size: var(--fs-ui-sm); }
  .site-nav .btn { margin: var(--sp-4) 0 0; text-align: center; }

  .hero { padding: 52px var(--gutter) 46px; }
  .hero__actions .btn { width: 100%; }
  .console__row { padding: var(--sp-4); }
  .featured__stats { gap: 18px; }
  .cardgrid,
  .cardgrid--res { grid-template-columns: 1fr; }
  .card__blurb { min-height: 0; }
  .newsitem { flex-direction: column; gap: var(--sp-4); }
  .newsitem__thumb { width: 100%; height: 120px; }
  .org { flex-direction: column; }
  .org__photo { width: 100%; height: 180px; }
  .filterbar { gap: var(--sp-3); }
  .chips { width: 100%; }
  .chip { flex: 1; padding: var(--sp-3) var(--sp-2); }
  .modal { padding: var(--sp-4); }
  .modal__body { max-height: 70vh; padding: var(--sp-5); }
  .site-footer__inner { flex-direction: column; gap: var(--sp-6); }

  .soon { --gutter: 18px; }
  .soon h1 { font-size: 34px; letter-spacing: -1.2px; }
  .soon__main { padding: var(--sp-8) var(--gutter) var(--sp-5); }
  .soon__stats { gap: var(--sp-6); }
  .soon__features-grid { grid-template-columns: 1fr; }
  .soon__footer-inner { flex-direction: column; gap: var(--sp-4); }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .stat:last-child { border-bottom: 0; }
  .featured__stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}