/* ============================================================
   JESSE STUBBS FOR STATE SENATE — DISTRICT 8
   Standalone stylesheet (design tokens + components + sections).
   Ported from the campaign design system. Asset URLs are relative
   to this file (../assets/...).
   ============================================================ */

/* ============ DESIGN TOKENS ============ */

/* --- tokens/fonts.css --- */
/* ============================================================
   FONTS — webfont declarations
   ------------------------------------------------------------
   Loaded from Google Fonts. For production, self-host the woff2
   binaries and replace these @imports with @font-face rules.
   (Flagged to the user — font files were not provided.)

   Saira Condensed — aerospace/technical display (headlines)
   Saira           — squared humanist sans (subheads / UI)
   Public Sans     — USWDS civic typeface (body, trustworthy)
   Spline Sans Mono— cockpit-gauge mono (kickers, data plates)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Saira:wght@400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@500;600;700&display=swap');


/* --- tokens/colors.css --- */
/* ============================================================
   JESSE STUBBS FOR STATE SENATE — DISTRICT 8
   COLOR TOKENS
   Anchored on Air Force royal blue (#00369A). Blue-forward,
   patriotic but not gaudy. Warmth comes from a sunrise gold.
   ============================================================ */

:root {
  /* --- Brand core ----------------------------------------- */
  --c-royal-900: #001E5C;  /* deepest royal, pressed states */
  --c-royal-800: #002A7D;
  --c-royal-700: #00369A;  /* PRIMARY — Air Force royal blue */
  --c-royal-600: #0A47B8;
  --c-royal-500: #1F6FE5;  /* sky / interactive bright blue  */
  --c-royal-400: #5B97F0;
  --c-royal-200: #B9D2F8;
  --c-royal-100: #E0ECFD;
  --c-royal-050: #F0F6FE;

  /* --- Midnight (flight-deck navy, dark surfaces/ink) ------ */
  --c-midnight-900: #050E22;
  --c-midnight-800: #081634;  /* primary dark surface         */
  --c-midnight-700: #0E2147;
  --c-midnight-600: #16315F;

  /* --- Horizon gold (sunrise / optimism / accent) --------- */
  --c-gold-700: #C98A12;
  --c-gold-500: #F4B63A;   /* ACCENT — horizon gold          */
  --c-gold-300: #FBD988;
  --c-gold-100: #FCEFCB;

  /* --- Steel (aviator silver / wings / dog tags) ---------- */
  --c-steel-600: #6E7E92;
  --c-steel-400: #B9C4D0;  /* aviator silver                 */
  --c-steel-200: #DCE3EB;

  /* --- Flag red (sparing patriotic + danger) -------------- */
  --c-red-700: #9E241F;
  --c-red-500: #C8322B;
  --c-red-100: #FBE3E1;

  /* --- Neutrals (cool, blue-tinted slate) ----------------- */
  --c-ink-900: #0B1A33;
  --c-ink-700: #25344F;
  --c-ink-500: #51617C;
  --c-ink-400: #74829A;
  --c-ink-300: #9AA7BC;
  --c-ink-200: #C7D0DD;
  --c-ink-100: #E2E8F1;
  --c-cloud:   #F4F6FA;   /* off-white page background       */
  --c-white:   #FFFFFF;

  /* --- Semantic / status ---------------------------------- */
  --c-go-600:   #1E7A4D;   /* "mission go" green             */
  --c-go-100:   #DBF1E5;
  --c-warn-600: #B5790A;
  --c-warn-100: #FBEFCF;
  --c-stop-600: #C8322B;   /* = flag red                     */
  --c-stop-100: #FBE3E1;

  /* ========================================================
     SEMANTIC ALIASES — reference these in components
     ======================================================== */

  /* Brand */
  --brand-primary:        var(--c-royal-700);
  --brand-primary-hover:  var(--c-royal-800);
  --brand-primary-press:  var(--c-royal-900);
  --brand-accent:         var(--c-gold-500);
  --brand-accent-ink:     var(--c-midnight-800);

  /* Text */
  --text-strong:   var(--c-ink-900);
  --text-body:     var(--c-ink-700);
  --text-muted:    var(--c-ink-500);
  --text-faint:    var(--c-ink-400);
  --text-on-dark:  var(--c-white);
  --text-on-dark-muted: var(--c-steel-400);
  --text-on-brand: var(--c-white);
  --text-link:     var(--c-royal-700);

  /* Surfaces */
  --surface-page:     var(--c-cloud);
  --surface-card:     var(--c-white);
  --surface-sunken:   var(--c-royal-050);
  --surface-dark:     var(--c-midnight-800);
  --surface-darker:   var(--c-midnight-900);
  --surface-brand:    var(--c-royal-700);

  /* Lines / borders */
  --border-subtle:  var(--c-ink-100);
  --border-default: var(--c-ink-200);
  --border-strong:  var(--c-ink-300);
  --border-brand:   var(--c-royal-700);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* Focus ring */
  --focus-ring: var(--c-gold-500);
}


/* --- tokens/typography.css --- */
/* ============================================================
   TYPOGRAPHY TOKENS
   Display: Saira Condensed (uppercase, tight) — the "command"
   voice. Body: Public Sans — the civic, readable voice.
   Mono: Spline Sans Mono — cockpit labels & data plates.
   ============================================================ */

:root {
  /* --- Families ------------------------------------------- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-sans:    'Saira', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* --- Weights -------------------------------------------- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* --- Type scale (px) ------------------------------------ */
  --fs-display-xl: 88px;  /* hero banners                    */
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    19px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-label:      12px;  /* mono kickers / data plates      */

  /* --- Line heights -------------------------------------- */
  --lh-tight:   0.98; /* @kind font */
  --lh-snug:    1.12; /* @kind font */
  --lh-heading: 1.05; /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* --- Letter spacing ------------------------------------ */
  --ls-display:  -0.01em; /* @kind font */
  --ls-tight:    -0.02em; /* @kind font */
  --ls-normal:   0; /* @kind font */
  --ls-kicker:   0.18em; /* @kind font */
  --ls-button:   0.06em; /* @kind font */

  /* ========================================================
     SEMANTIC ROLE ALIASES
     ======================================================== */
  --type-hero:    var(--fw-black) var(--fs-display-xl)/var(--lh-tight) var(--font-display);
  --type-display: var(--fw-bold)  var(--fs-display-m)/var(--lh-tight) var(--font-display);
  --type-h1:      var(--fw-bold)  var(--fs-h1)/var(--lh-heading) var(--font-display);
  --type-h2:      var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --type-h3:      var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --type-body:    var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-body-lg: var(--fw-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-body);
  --type-button:  var(--fw-bold) var(--fs-body-sm)/1 var(--font-display);
  --type-kicker:  var(--fw-semibold) var(--fs-label)/1 var(--font-mono);
}

/* Convenience utility classes (optional for cards/kits) */
.t-kicker {
  font: var(--type-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--text-link);
}
.t-display {
  font: var(--type-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}


/* --- tokens/spacing.css --- */
/* ============================================================
   SPACING TOKENS — 4px base grid
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-y:     96px;   /* vertical rhythm between sections */
  --gutter:        24px;
}


/* --- tokens/elevation.css --- */
/* ============================================================
   ELEVATION — radii, borders, shadows
   Industrial / printed feel: small radii, crisp low shadows
   (think aluminum data plates, not soft fluffy cards).
   ============================================================ */

:root {
  /* --- Radii (squared, industrial) ----------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* default card / button            */
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* --- Border widths ------------------------------------- */
  --bw-hair:   1px;
  --bw-thick:  2px;
  --bw-heavy:  3px;   /* chevron rules, accent underlines    */

  /* --- Shadows (crisp, cool-tinted) ---------------------- */
  --shadow-xs: 0 1px 2px rgba(8, 22, 52, 0.08);
  --shadow-sm: 0 1px 3px rgba(8, 22, 52, 0.10), 0 1px 2px rgba(8, 22, 52, 0.06);
  --shadow-md: 0 4px 12px rgba(8, 22, 52, 0.10), 0 2px 4px rgba(8, 22, 52, 0.06);
  --shadow-lg: 0 12px 28px rgba(8, 22, 52, 0.14), 0 4px 8px rgba(8, 22, 52, 0.08);
  --shadow-brand: 0 8px 24px rgba(0, 54, 154, 0.28);

  /* Inset / pressed */
  --shadow-inset: inset 0 2px 4px rgba(8, 22, 52, 0.12);

  /* Focus ring (gold, offset) */
  --ring: 0 0 0 3px rgba(244, 182, 58, 0.55);
}


/* --- tokens/motion.css --- */
/* ============================================================
   MOTION TOKENS
   Confident and quick — no bounce, no float. A slight upward
   "lift" on hover (afterburner). Everything ease-out.
   ============================================================ */

:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-decel: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  --lift: translateY(-2px);   /* @kind other */
  --press: translateY(1px);   /* @kind other */
}


/* ============ COMPONENT PRIMITIVES ============ */

  .js-btn{ --_bg:var(--brand-primary); --_fg:var(--text-on-brand); --_bd:transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase;
    letter-spacing:var(--ls-button); line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none;
    border:var(--bw-thick) solid var(--_bd); border-radius:var(--radius-md); background:var(--_bg); color:var(--_fg);
    transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .js-btn:hover{ transform:var(--lift); box-shadow:var(--shadow-md); }
  .js-btn:active{ transform:var(--press); box-shadow:var(--shadow-inset); }
  .js-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
  .js-btn[disabled]{ opacity:.45; pointer-events:none; box-shadow:none; transform:none; }
  .js-btn--sm{ font-size:13px; padding:8px 16px; } .js-btn--md{ font-size:15px; padding:12px 22px; }
  .js-btn--lg{ font-size:18px; padding:16px 30px; letter-spacing:.07em; }
  .js-btn--primary{ --_bg:var(--brand-primary); --_fg:var(--text-on-brand); }
  .js-btn--primary:hover{ --_bg:var(--brand-primary-hover); } .js-btn--primary:active{ --_bg:var(--brand-primary-press); }
  .js-btn--accent{ --_bg:var(--brand-accent); --_fg:var(--brand-accent-ink); } .js-btn--accent:hover{ --_bg:var(--c-gold-300); }
  .js-btn--secondary{ --_bg:transparent; --_fg:var(--brand-primary); --_bd:var(--brand-primary); } .js-btn--secondary:hover{ --_bg:var(--c-royal-050); }
  .js-btn--ghost{ --_bg:transparent; --_fg:var(--text-body); } .js-btn--ghost:hover{ --_bg:var(--c-ink-100); box-shadow:none; }
  .js-btn--onDark{ --_bg:var(--c-white); --_fg:var(--c-midnight-800); } .js-btn--onDark:hover{ --_bg:var(--c-steel-200); }
  .js-btn__chev{ font-weight:var(--fw-black); display:inline-block; }

  .js-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-weight:var(--fw-semibold);
    font-size:12px; line-height:1; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-sm); border:1px solid transparent; white-space:nowrap; }
  .js-badge--solid{ background:var(--brand-primary); color:var(--text-on-brand); }
  .js-badge--gold{ background:var(--brand-accent); color:var(--brand-accent-ink); }
  .js-badge--outline{ background:transparent; color:var(--brand-primary); border-color:var(--c-royal-200); }
  .js-badge--soft{ background:var(--c-royal-100); color:var(--c-royal-800); }
  .js-badge--dark{ background:var(--c-midnight-700); color:var(--c-steel-200); border-color:var(--border-on-dark); }
  .js-badge--go{ background:var(--c-go-100); color:var(--c-go-600); } .js-badge--warn{ background:var(--c-warn-100); color:var(--c-warn-600); }
  .js-badge--stop{ background:var(--c-stop-100); color:var(--c-stop-600); }
  .js-badge__dot{ width:7px; height:7px; border-radius:var(--radius-pill); background:currentColor; }

  .js-kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:var(--fw-semibold);
    font-size:12px; line-height:1; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--text-link); }
  .js-kicker--onDark{ color:var(--c-gold-300); }
  .js-kicker__tick{ width:22px; height:3px; background:var(--brand-accent); display:inline-block; }
  .js-kicker__chev{ font-family:var(--font-display); font-weight:var(--fw-black); color:var(--brand-accent); font-size:15px; line-height:0; }

  .js-card{ position:relative; background:var(--surface-card); color:var(--text-body); border:1px solid var(--border-subtle);
    border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:24px; overflow:hidden;
    transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .js-card--interactive{ cursor:pointer; } .js-card--interactive:hover{ transform:var(--lift); box-shadow:var(--shadow-lg); }
  .js-card--brand{ background:var(--surface-brand); color:var(--text-on-brand); border-color:transparent; }
  .js-card--dark{ background:var(--surface-dark); color:var(--text-on-dark); border-color:var(--border-on-dark); }
  .js-card--outline{ background:transparent; box-shadow:none; border-color:var(--border-default); }
  .js-card__accent{ position:absolute; top:0; left:0; height:4px; width:100%; background:var(--brand-accent); }
  .js-card--accent{ padding-top:28px; }

  .js-stat{ display:flex; flex-direction:column; gap:6px; }
  .js-stat__value{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:56px; line-height:.9; letter-spacing:var(--ls-display); color:var(--brand-primary); }
  .js-stat__value .js-stat__unit{ font-size:.5em; color:var(--brand-accent); margin-left:.1em; }
  .js-stat__label{ font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
  .js-stat--onDark .js-stat__value{ color:var(--c-white); } .js-stat--onDark .js-stat__label{ color:var(--c-steel-400); }
  .js-stat--gold .js-stat__value{ color:var(--brand-accent); }

  .js-avatar{ position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); overflow:hidden; flex:0 0 auto;
    background:var(--c-royal-100); color:var(--c-royal-800); font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase; border:2px solid transparent; }
  .js-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .js-avatar--sm{ width:36px; height:36px; font-size:14px; } .js-avatar--md{ width:52px; height:52px; font-size:19px; }
  .js-avatar--lg{ width:80px; height:80px; font-size:28px; } .js-avatar--xl{ width:120px; height:120px; font-size:40px; }
  .js-avatar--ring{ border-color:var(--brand-accent); box-shadow:0 0 0 2px var(--surface-card); }

  .js-field{ display:flex; flex-direction:column; gap:7px; }
  .js-field__label{ font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
  .js-field__input{ font-family:var(--font-body); font-size:16px; color:var(--text-strong); background:var(--surface-card);
    border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:12px 14px; width:100%; box-sizing:border-box;
    transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
  .js-field__input::placeholder{ color:var(--text-faint); }
  .js-field__input:hover{ border-color:var(--border-strong); }
  .js-field__input:focus{ outline:none; border-color:var(--brand-primary); box-shadow:var(--ring); }
  .js-field--invalid .js-field__input{ border-color:var(--c-stop-600); }
  .js-field--invalid .js-field__input:focus{ box-shadow:0 0 0 3px var(--c-stop-100); }
  .js-field__hint{ font-family:var(--font-body); font-size:13px; color:var(--text-faint); }
  .js-field--invalid .js-field__hint{ color:var(--c-stop-600); }


/* ============ SECTIONS ============ */
/* ============================================================
   Jesse Stubbs — Website UI kit styles
   Layout/section styling only. Tokens come from styles.css.
   ============================================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
}
.jsw-h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,4vw,44px); line-height:1; letter-spacing:-.01em;
  color:var(--text-strong); margin:14px 0 0; max-width:18ch;
}
.jsw-h2--light{ color:#fff; }
.wrap{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }

/* ---- Photo placeholder ---------------------------------- */
.jsw-photo{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--radius-lg);
  overflow:hidden; background:
    radial-gradient(120% 90% at 70% 0%, #16315F 0%, #081634 55%, #050E22 100%);
  border:1px solid var(--border-on-dark); box-shadow:var(--shadow-lg);
}
.jsw-photo--tall{ aspect-ratio:4/5; }
.jsw-photo__grain{ position:absolute; inset:0; background:url('../assets/contrails.svg'); background-size:280px; opacity:.9; }
.jsw-photo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 8%; filter:grayscale(1) contrast(1.03); }
.jsw-photo--filled{ background:#e9edf2; }
.jsw-photo__corner{ position:absolute; top:14px; right:14px; width:30px; height:30px;
  border-top:3px solid var(--c-gold-500); border-right:3px solid var(--c-gold-500); }
.jsw-photo__tag{
  position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-steel-400); background:rgba(5,14,34,.55); padding:7px 11px;
  border:1px solid var(--border-on-dark); border-radius:var(--radius-sm); backdrop-filter:blur(3px);
}
.jsw-photo__tag svg{ width:14px; height:14px; color:var(--c-gold-300); }

/* ---- Header --------------------------------------------- */
.jsw-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border-subtle);
}
.jsw-header__in{
  max-width:var(--container-max); margin:0 auto; padding:12px var(--container-pad);
  display:flex; align-items:center; gap:24px;
}
.jsw-brand{ display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; }
.jsw-brand__txt{ display:flex; flex-direction:column; line-height:1; }
.jsw-brand__name{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:21px; letter-spacing:-.01em; color:var(--c-midnight-800); }
.jsw-brand__sub{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-link); margin-top:4px; }
.jsw-nav{ display:flex; gap:6px; margin-left:auto; }
.jsw-nav__link{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:14px;
  letter-spacing:.03em; color:var(--text-body); padding:8px 12px; border-radius:var(--radius-sm);
  cursor:pointer; position:relative; transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.jsw-nav__link:hover{ color:var(--brand-primary); background:var(--c-royal-050); }
.jsw-nav__link.is-active{ color:var(--brand-primary); }
.jsw-nav__link.is-active::after{ content:''; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--brand-accent); }
.jsw-header__cta{ display:flex; align-items:center; gap:8px; }

/* ---- Hero ----------------------------------------------- */
.jsw-hero{
  position:relative; background:var(--c-midnight-800); color:#fff; overflow:hidden;
}
.jsw-hero::before{ content:''; position:absolute; inset:0; background:url('../assets/contrails.svg'); background-size:340px; opacity:.8; }
.jsw-hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c-gold-500); }
.jsw-hero__in{
  position:relative; z-index:2; max-width:var(--container-max); margin:0 auto;
  padding:72px var(--container-pad) 40px; display:grid; grid-template-columns:1.15fr .85fr;
  gap:56px; align-items:center;
}
.jsw-hero__h1{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(48px,7vw,84px); line-height:.92; letter-spacing:-.015em; margin:18px 0 0;
}
.jsw-hero__h1 em{ color:var(--c-gold-500); font-style:normal; }
.jsw-hero__lead{ font-size:19px; line-height:1.6; color:var(--c-steel-200); max-width:48ch; margin:22px 0 0; }
.jsw-hero__btns{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.jsw-hero__art{ max-width:380px; justify-self:end; width:100%; }
.jsw-hero__stats{
  position:relative; z-index:2; max-width:var(--container-max); margin:0 auto;
  padding:0 var(--container-pad) 56px; display:flex; align-items:center; gap:40px;
}
.jsw-hero__div{ width:1px; height:48px; background:var(--border-on-dark); }

/* ---- Mission -------------------------------------------- */
.jsw-mission{ background:var(--surface-card); border-bottom:1px solid var(--border-subtle); }
.jsw-mission__in{ max-width:var(--container-max); margin:0 auto; padding:56px var(--container-pad); }
.jsw-mission__lead{
  font-family:var(--font-sans); font-weight:500; font-size:clamp(24px,3.2vw,34px); line-height:1.3;
  color:var(--text-strong); max-width:24ch; margin:18px 0 0;
}
.jsw-mission__lead strong{ color:var(--brand-primary); font-weight:700; }

/* ---- Priorities ----------------------------------------- */
.jsw-pri{ padding:var(--section-y) 0; }
.jsw-pri__in{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
.jsw-pri__head{ margin-bottom:40px; }
.jsw-pri__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.jsw-pri__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.jsw-pri__no{ font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.1em;
  color:var(--brand-primary); }
.jsw-pri__icon{ color:var(--brand-primary); }
.jsw-pri__icon svg{ width:30px; height:30px; }
.jsw-pri__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:25px; line-height:1.02; letter-spacing:-.01em; color:var(--text-strong); margin:0 0 10px; }
.jsw-pri__body{ font-size:15.5px; line-height:1.55; color:var(--text-muted); margin:0; }

/* ---- Meet Jesse ----------------------------------------- */
.jsw-meet{ background:var(--surface-card); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.jsw-meet__in{ max-width:var(--container-max); margin:0 auto; padding:var(--section-y) var(--container-pad);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.jsw-meet__art{ max-width:420px; width:100%; }
.jsw-meet__p{ font-size:17px; line-height:1.65; color:var(--text-body); margin:18px 0 0; max-width:54ch; }
.jsw-meet__plates{ display:grid; grid-template-columns:repeat(2,auto); gap:10px; margin:28px 0 0; justify-content:start; }
.jsw-plate{ display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-sm); overflow:hidden; }
.jsw-plate__k{ background:var(--c-midnight-800); color:var(--c-steel-400); font-family:var(--font-mono);
  font-size:10px; letter-spacing:.12em; padding:8px 11px; display:flex; align-items:center; }
.jsw-plate__v{ background:var(--surface-sunken); color:var(--text-strong); font-family:var(--font-mono);
  font-size:12px; font-weight:600; padding:8px 12px; display:flex; align-items:center; }
.jsw-quote{ margin:30px 0 0; padding-left:18px; border-left:3px solid var(--brand-accent);
  font-family:var(--font-sans); font-weight:600; font-size:21px; line-height:1.35; color:var(--brand-primary); max-width:42ch; }

/* ---- Get Involved --------------------------------------- */
.jsw-get{ position:relative; background:var(--brand-primary); overflow:hidden; }
.jsw-get::before{ content:''; position:absolute; inset:0; background:url('../assets/contrails.svg'); background-size:340px; opacity:.5; }
.jsw-get__in{ position:relative; z-index:2; max-width:var(--container-max); margin:0 auto; padding:var(--section-y) var(--container-pad); }
.jsw-get__head{ margin-bottom:36px; }
.jsw-get__cols{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch; }
.jsw-card-form{ background:var(--surface-card); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-lg); }
.jsw-card-donate{ background:var(--c-midnight-800); border-radius:var(--radius-lg); padding:32px;
  box-shadow:var(--shadow-lg); border:1px solid var(--border-on-dark); color:#fff; display:flex; flex-direction:column; }
.jsw-form__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:26px; letter-spacing:-.01em; color:var(--text-strong); margin:0 0 18px; }
.jsw-form__title--light{ color:#fff; }
.jsw-form{ display:flex; flex-direction:column; gap:16px; }
.jsw-form__row{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; }
.jsw-form__fine{ font-size:12px; color:var(--text-faint); margin:0; }
.jsw-form__done{ display:flex; gap:14px; align-items:flex-start; padding:8px 0; }
.jsw-form__done p{ font-size:16px; line-height:1.55; color:var(--text-body); margin:0; }
.jsw-form__check{ color:var(--c-go-600); flex:0 0 auto; }
.jsw-form__check svg{ width:30px; height:30px; }
.jsw-donate__note{ font-size:14.5px; line-height:1.5; color:var(--c-steel-400); margin:0 0 20px; }
.jsw-donate__chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.jsw-chip{
  font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff;
  background:var(--c-midnight-700); border:2px solid var(--border-on-dark); border-radius:var(--radius-sm);
  padding:14px 0; text-align:center; cursor:pointer; transition:all var(--dur-fast) var(--ease-out); width:100%;
}
.jsw-chip:hover{ border-color:var(--c-gold-500); }
.jsw-chip.is-active{ background:var(--c-gold-500); color:var(--c-midnight-800); border-color:var(--c-gold-500); }
.jsw-chip--custom{ font-family:var(--font-body); font-weight:600; font-size:15px; }
.jsw-chip--custom::placeholder{ color:var(--c-steel-400); }
.jsw-donate__row{ display:flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-steel-400); }
.jsw-donate__row svg{ width:14px; height:14px; }

/* ---- Footer --------------------------------------------- */
.jsw-footer{ background:var(--c-midnight-900); color:var(--c-steel-400); }
.jsw-footer__in{ max-width:var(--container-max); margin:0 auto; padding:56px var(--container-pad);
  display:grid; grid-template-columns:1.4fr .8fr 1.2fr; gap:40px; align-items:start; }
.jsw-footer__tag{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:20px; color:#fff; margin:16px 0 18px; max-width:16ch; line-height:1.05; }
.jsw-footer__social{ display:flex; gap:12px; }
.jsw-footer__social a{ width:38px; height:38px; border:1px solid var(--border-on-dark); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; color:var(--c-steel-400); cursor:pointer;
  transition:all var(--dur-fast) var(--ease-out); }
.jsw-footer__social a:hover{ color:#fff; border-color:var(--c-gold-500); }
.jsw-footer__social svg{ width:18px; height:18px; }
.jsw-footer__nav{ display:flex; flex-direction:column; gap:12px; }
.jsw-footer__nav a{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:15px;
  color:var(--c-steel-200); cursor:pointer; }
.jsw-footer__nav a:hover{ color:var(--c-gold-300); }
.jsw-footer__legal p{ font-size:12px; line-height:1.55; margin:14px 0 0; color:var(--text-faint); }

/* ---- Responsive ----------------------------------------- */
@media (max-width:900px){
  .jsw-nav{ display:none; }
  .jsw-hero__in, .jsw-meet__in, .jsw-get__cols, .jsw-pri__grid, .jsw-footer__in{ grid-template-columns:1fr; }
  .jsw-hero__art, .jsw-meet__art{ max-width:320px; }
  .jsw-hero__stats{ flex-wrap:wrap; gap:24px; }
}