/*
  justingum.com shared theme — "standtogether" variant
  Source: standtogether.org — colors and type pulled directly from that
  site's own CSS custom properties (--color-*, --font-*) and from a real
  article page's computed styles, not estimated:
    - body/UI sans: "Graphik Web" (proprietary) -> substituted with Inter
    - decorative title serif: "DM Serif Display", Georgia, serif — used
      site-wide for their big feature/article titles (class "st-title"),
      heavy weight. This is the "looks like Georgia" font for titles.
    - denim/navy accent: #1A428A (their own --color-brand-light token,
      confirmed as the active-filter-chip color on standtogether.org/stories)
    - header: one solid near-black (#181818) bar across the very top
    - corners: sharp, 0px radius, everywhere
  Fixed single palette on purpose — no light/dark switching.

  Same selector surface as theme.css on purpose — a drop-in replacement,
  not an addition. Swap the single <link href="...theme.css"> for this
  file's URL to switch themes; no HTML or page-level <style> changes
  needed anywhere, since every color/font/radius in a themed page's own
  <style> block already reads from these --jg-* tokens with fallbacks.
  Usage: <link rel="stylesheet" href="https://justingum.com/theme/standtogether.css">
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Serif:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root{
  --jg-white:#ffffff;
  --jg-ink:#181818;
  --jg-gray:#5a6771;
  --jg-gray-faint:#8995a0;
  --jg-hairline:#ededeb;
  --jg-surface:#ffffff;
  --jg-surface-2:#fafafa;
  --jg-yellow:#f0e834;
  --jg-yellow-dim:#e8dd8a;
  --jg-black:#181818;
  --jg-red:#971b00;
  --jg-red-soft:#e39f90;
  --jg-green:#0f8402;
  --jg-green-soft:#d4ffcf;

  /* two blues confirmed live on standtogether.org, not the same color:
     brand-light is their active-filter-chip fill (small CTA accents);
     brand-navy is the denim band they run as a strip just above their
     footer (the newsletter signup section) -- used here the same way,
     at the bottom of the page, plus the top utility bar */
  --jg-accent:#1a428a;
  --jg-accent-hover:#123368;
  --jg-denim:#304564;

  /* Graphik Web (proprietary) substituted with Inter for UI/heading text.
     --jg-font-title is new (not in theme.css's original token set): the
     decorative serif standtogether.org actually uses for its big titles.

     BODY TEXT FONT -- easy toggle for next time: standtogether.org's own
     body copy actually renders in IBM Plex Serif (confirmed live), which
     is the active line below. To switch the whole site's paragraph text
     to sans instead, just comment out the active line and uncomment the
     other one -- nothing else needs to change, both fonts stay loaded
     via the @import above either way. */
  --jg-font-body:'IBM Plex Serif', Georgia, serif;
  /* --jg-font-body:'Inter', Helvetica, Arial, sans-serif; */

  --jg-font-display:'Inter', Helvetica, Arial, sans-serif;
  --jg-font-title:'DM Serif Display', Georgia, serif;
  --jg-font-mono:'Inter', Helvetica, Arial, sans-serif;

  /* standtogether.org uses hard, un-rounded corners everywhere */
  --jg-radius:0px;
  --jg-radius-lg:0px;
}

/* ---------- reset + base type ---------- */
.jg-reset, .jg-reset *{box-sizing:border-box;}
body.jg{
  background:var(--jg-white);
  color:var(--jg-ink);
  font-family:var(--jg-font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.jg h1, .jg h2, .jg h3, .jg .jg-display{
  font-family:var(--jg-font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.1;
}
.jg .jg-mono{font-family:var(--jg-font-mono);}
.jg a{color:inherit;}

/* ---------- the two bold-sans "statement" headlines: confirmed on
   standtogether.org's own homepage, the big yellow-highlight headline
   ("Solve America's biggest problems by empowering people") is thick
   bold SANS, not the serif -- this page's equivalent moments are the
   hero and the closing contact headline. Pulled in a hair tighter on
   letter-spacing and line-height for a denser, heavier block of type. */
.jg .hero h1, .jg .contact h2{
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  line-height:1.0 !important;
}

/* ---------- decorative title serif: used for "big statement" headlines
   -- confirmed live on standtogether.org's article/story pages (their
   actual class is "heading--style-st-title"), applied here to this
   page's section headlines and company/role names, NOT the two
   bold-sans statement headlines above */
.jg .sec-head h2, .jg .role h3, .jg .next-body h2{
  font-family:var(--jg-font-title) !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
}

/* ---------- Knork Flatware-style sub-entries: bold sans, matching the
   Approach section's rule titles -- cv.html's own inline style sets
   these to font-weight:400, overridden here */
.jg .sub h4{
  font-weight:700 !important;
}

/* ---------- unified black header: standtogether.org runs its logo and
   full nav menu in one solid dark bar; this page splits that into a
   tagbar + a separate sticky nav, so the nav itself is forced to their
   exact confirmed header color (#181818) to match precisely */
.jg .site-nav{background:var(--jg-black) !important; border-bottom-color:var(--jg-black) !important;}
.jg .site-nav .name{color:var(--jg-white) !important; font-weight:700 !important;}
/* animated white underline, drawing left-to-right on hover, replacing
   the instant denim border-bottom swap -- the existing border-bottom is
   kept transparent (cv.html already reserves space for it) and a
   pseudo-element handles the actual animated line instead */
.jg .site-nav a.l{
  color:var(--jg-white) !important;
  font-weight:700 !important;
  text-transform:capitalize !important;
  border-bottom-color:transparent !important;
  position:relative;
}
.jg .site-nav a.l::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  height:2px;
  width:0;
  background:var(--jg-white);
  transition:width .25s ease-out;
}
.jg .site-nav a.l:hover{color:var(--jg-white) !important;}
.jg .site-nav a.l:hover::after{width:100%;}

/* ---------- denim band at the bottom: standtogether.org runs a
   denim-navy strip just above their footer (confirmed live, their
   newsletter signup section) -- reproduced here on the closing contact
   section. The top utility bar stays charcoal/black, matching their
   actual header exactly. */
.jg .contact.tint{background:var(--jg-denim) !important;}
.jg .contact.tint h2{color:var(--jg-white) !important;}
.jg .contact .jg-eyebrow{color:var(--jg-white) !important;}
.jg .contact p{color:#dcdcdc !important;}
/* the two button styles on the denim section invert into each other on
   hover: the filled-white button becomes a white outline, and the white
   outline button becomes filled white */
.jg .contact a.jg-btn-ghost{border-color:var(--jg-white) !important; color:var(--jg-white) !important; background:transparent !important;}
.jg .contact a.jg-btn-ghost:hover{background:var(--jg-white) !important; color:var(--jg-accent) !important; border-color:var(--jg-white) !important;}

/* ---------- footer: standtogether.org's footer is the same near-black
   as its header, confirmed live */
.jg footer{background:var(--jg-black) !important; color:#b8b8b8 !important; border-top:0 !important;}
.jg footer a{color:var(--jg-white) !important;}

/* ---------- eyebrow / tagbar ---------- */
.jg-eyebrow{
  font-family:var(--jg-font-mono);
  font-weight:600;
  font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--jg-gray);
}
/* cv.html's tagbar has no inner .wrap div (unlike the nav below it), so
   its own padding-left/right rules just use flat 16px/40px and drift out
   of alignment with .wrap's max-width:1120px + margin:auto centering at
   wide viewports. Reproduced here with calc()/max() so the tagbar's
   content edges line up with the nav's at every width, and "Justin Gum"
   is dropped from the bar (first span hidden), with the remaining text
   pushed to the right where it already was. */
.jg-tagbar{
  background:var(--jg-black);
  color:var(--jg-white);
  font-family:var(--jg-font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.01em;
  padding-top:11px;
  padding-bottom:11px;
  padding-left:calc(16px + max(0px, (100vw - var(--max,1120px)) / 2)) !important;
  padding-right:calc(16px + max(0px, (100vw - var(--max,1120px)) / 2)) !important;
  display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap;
}
@media (min-width:760px){
  .jg-tagbar{
    padding-left:calc(40px + max(0px, (100vw - var(--max,1120px)) / 2)) !important;
    padding-right:calc(40px + max(0px, (100vw - var(--max,1120px)) / 2)) !important;
  }
}
.jg-tagbar span:first-child{display:none !important;}
.jg-tagbar .dim{color:#b8b8b8;}

/* ---------- badge ---------- */
.jg-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--jg-yellow);
  color:var(--jg-black);
  padding:8px 14px;
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.01em;
  border-radius:var(--jg-radius);
}
.jg-badge .jg-dot{width:8px;height:8px;border-radius:50%;background:var(--jg-black);}

/* ---------- buttons: square, bordered, standtogether's CTA shape ---------- */
.jg-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--jg-font-display);
  font-weight:700; font-size:15px;
  padding:13px 22px;
  text-decoration:none;
  border:2px solid var(--jg-black);
  border-radius:var(--jg-radius);
  cursor:pointer;
  background:transparent;
  color:var(--jg-black);
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
/* buttons show denim by default (not black); primary inverts to white
   on hover (denim text), the mirror of how the ghost button already
   inverts white-to-denim on hover */
.jg-btn-primary, .jg a.jg-btn-primary{background:var(--jg-accent) !important; color:var(--jg-white) !important; border-color:var(--jg-accent) !important;}
.jg-btn-primary:hover, .jg a.jg-btn-primary:hover{background:var(--jg-white) !important; color:var(--jg-accent) !important; border-color:var(--jg-accent) !important; transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--jg-accent);}
.jg-btn-ghost, .jg a.jg-btn-ghost{border-color:var(--jg-accent) !important; color:var(--jg-accent) !important;}
.jg-btn-ghost:hover, .jg a.jg-btn-ghost:hover{background:var(--jg-accent) !important; color:var(--jg-white) !important; border-color:var(--jg-accent) !important; transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--jg-black);}

/* the contact section itself sits on the denim band -- its buttons need
   to read against that background, not blend into it */
.jg .contact a.jg-btn-primary{background:var(--jg-white) !important; border-color:var(--jg-white) !important; color:var(--jg-accent) !important;}
.jg .contact a.jg-btn-primary:hover{background:transparent !important; color:var(--jg-white) !important; border-color:var(--jg-white) !important;}

/* ---------- chip ---------- */
.jg-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--jg-font-mono);
  font-size:11px;font-weight:600;letter-spacing:0.02em;
  padding:3px 9px;border-radius:var(--jg-radius);
  width:fit-content;
  border:1px solid transparent;
}
.jg-chip::before{content:"";width:6px;height:6px;background:currentColor;flex:none;}
.jg-chip.jg-good{background:var(--jg-surface-2);color:var(--jg-ink);border-color:var(--jg-hairline);}
.jg-chip.jg-warn{background:var(--jg-yellow);color:var(--jg-black);}
.jg-chip.jg-critical{background:var(--jg-red-soft);color:var(--jg-red);}
.jg-chip.jg-neutral{background:var(--jg-surface-2);color:var(--jg-accent);border-color:var(--jg-hairline);}

/* ---------- card / hairline panel ---------- */
.jg-card{
  background:var(--jg-surface);
  border:1px solid var(--jg-hairline);
  border-radius:var(--jg-radius-lg);
  overflow:hidden;
}
.jg-hairline-top{border-top:1px solid var(--jg-hairline);}

/* ---------- stat grid ---------- */
.jg-stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--jg-hairline); border:1px solid var(--jg-hairline);}
/* Knork-callout treatment, same pattern as the .sub box (yellow left
   edge + gray fill) -- easy revert: comment this line out and
   uncomment the plain-white one below it */
.jg-stat-card{background:var(--jg-surface-2); padding:22px 20px 22px 24px; border-left:3px solid var(--jg-yellow);}
/* .jg-stat-card{background:var(--jg-surface); padding:22px 20px;} */
/* twice the size, no colored badge -- plain bold sans in the same ink
   color as "Built to be" in the hero, not a denim-filled chip */
.jg-stat-card .jg-num{font-family:var(--jg-font-display); font-weight:800; font-size:clamp(36px,4.5vw,51px); line-height:1;}
.jg-stat-card .jg-num .jg-hi{background:transparent; color:var(--jg-ink); padding:0;}
.jg-stat-card p{margin-top:10px; font-size:13px; color:var(--jg-gray);}
@media (max-width:640px){ .jg-stat-grid{grid-template-columns:1fr 1fr;} }

/* ---------- project cards + progress bars ---------- */
.jg-project-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--jg-hairline); border:1px solid var(--jg-hairline);}
.jg-project-grid.dense{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.jg-project-card{background:var(--jg-surface-2); padding:22px 22px 22px 25px; border-left:3px solid var(--jg-yellow); display:flex; flex-direction:column; gap:10px; min-width:0;}
.jg-project-card.compact{padding:15px 15px 15px 18px; gap:8px;}
.jg-project-card.wide{grid-column:span 2;}
.jg-project-card .jg-project-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.jg-project-card h3{font-family:var(--jg-font-title); font-size:19px; font-weight:700; margin:0;}
.jg-project-card.compact h3{font-size:14px;}
.jg-project-card p{font-size:14px; color:var(--jg-gray); margin:0; flex:1;}
.jg-project-card.compact p{font-size:12.5px;}
.jg-project-card .jg-project-link{font-family:var(--jg-font-display); font-size:12.5px; font-weight:700; text-decoration:none; color:var(--jg-accent); border-bottom:2px solid transparent;}
.jg-project-card .jg-project-link:hover{border-bottom-color:var(--jg-accent);}
.jg-project-thumb{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--jg-surface);}
@media (max-width:760px){ .jg-project-grid{grid-template-columns:1fr;} .jg-project-card.wide{grid-column:span 1;} }

/* ---------- mobile nav: no hamburger, no side-scroll ---------- */
/* cv.html's own .site-nav .wrap is overflow-x:auto with no scroll
   indicator -- on narrow screens the later links clip off-screen with
   nothing to show they're there. Dropping the horizontal scroll and
   letting the links wrap onto their own row instead means every link is
   visible at once, nothing to discover by swiping sideways. */
@media (max-width:640px){
  .jg .site-nav .wrap{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    min-height:auto !important;
    padding-top:14px !important;
    padding-bottom:12px !important;
    row-gap:12px;
    column-gap:18px;
  }
  .jg .site-nav .name{
    width:100%;
    margin-right:0 !important;
  }
  .jg .site-nav a.l{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
}