@charset "UTF-8";
/* ============================================================
   TUEBOR — bold monotone, editorial, single accent.
   Inspired by exat.hottype.co, tuned for Michigan blue.
   ============================================================ */
@font-face {
  font-family: "BidenBold";
  src: url("/assets/fonts/BidenBold-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --blue: #0055A4;
  --blue-dark: #003E79;
  --ink: #0A0A0A;
  --paper: #F4F1EA;
  --paper-2: #ECE8DE;
  --tan: #C4A15E; /* warm Michigan-flag buckskin, used as secondary accent */
  --tan-dark: #8A6F3A;
  --line: rgba(10, 10, 10, 0.12);
  --muted: rgba(10, 10, 10, 0.55);
  --display: "BidenBold", "Times New Roman", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --page-pad: clamp(20px, 6vw, 120px);
  --max: 1400px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 240ms ease;
}

body.home-intro:not(.scrolled) {
  background: var(--blue);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

a:hover {
  color: var(--blue);
}

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

/* -------- Header -------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--page-pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

/* Over the blue hero on home, the header is transparent with white nav. */
body.home-intro .site-header--home {
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
}

body.home-intro .site-header--home .site-nav a {
  color: #fff;
}

body.home-intro .site-header--home .site-nav a:hover {
  color: var(--ink);
}

body.home-intro.scrolled .site-header--home {
  background: var(--paper);
  border-bottom-color: var(--line);
  color: var(--ink);
}

body.home-intro.scrolled .site-header--home .site-nav a {
  color: var(--ink);
}

body.home-intro.scrolled .site-header--home .site-nav a:hover {
  color: var(--blue);
}

.wordmark {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.02em;
  border: none;
  color: var(--blue);
  transition: opacity 280ms ease, transform 280ms ease, color 240ms ease;
}

.wordmark:hover {
  color: var(--blue-dark);
}

.wordmark .accent, .footer-word .accent {
  color: var(--tan);
}

/* Footer field is tan, so the tan accent disappears — switch to white. */
.site-footer .footer-word .accent {
  color: #fff;
}

/* On the home page, the big hero wordmark acts as the brand mark.
   The small header wordmark fades in only after the user has scrolled past the hero. */
body.home-intro .site-header--home .wordmark {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

body.home-intro.scrolled .site-header--home .wordmark {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav {
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav a {
  border: none;
}

.site-nav a:hover {
  color: var(--blue);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  color: inherit;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}

body.nav-open .nav-toggle-bar:first-child {
  transform: translateY(4px) rotate(45deg);
}

body.nav-open .nav-toggle-bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 600px) {
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--page-pad) 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .site-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
    align-self: stretch;
  }
  .site-nav a:last-child {
    border-bottom: none;
  }
  body.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Match nav panel to header theme over the blue hero */
  body.home-intro:not(.scrolled) .site-header--home .site-nav {
    background: var(--blue);
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }
  body.home-intro:not(.scrolled) .site-header--home .site-nav a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
}
/* -------- Hero (home) -------- */
.home .hero {
  padding: clamp(56px, 12vw, 180px) var(--page-pad) clamp(48px, 9vw, 120px);
  background: var(--blue);
  color: #fff;
  border-bottom: 1px solid var(--blue);
}

.home .hero .eyebrow-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: clamp(24px, 6vw, 64px);
}

@media (max-width: 600px) {
  .home .hero {
    padding-top: 24px;
  }
  .home .hero .eyebrow-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: clamp(80px, 22vw, 140px);
  }
}
.home .hero h1 {
  font-family: var(--display);
  font-size: clamp(68px, 14.5vw, 260px);
  line-height: 0.88;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}

.home .hero h1 .accent {
  color: var(--tan);
}

/* The giant hero wordmark morphs perceptually into the small header wordmark as you scroll. */
.hero-wordmark {
  font-size: clamp(96px, 22vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  will-change: transform, opacity;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 400ms ease;
}

body.scrolled .hero-wordmark {
  transform: scale(0.96) translateY(-8px);
  opacity: 0.85;
}

.home .hero .tagline {
  margin-top: clamp(24px, 4vw, 48px);
  max-width: 820px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: #fff;
}

@media (max-width: 600px) {
  .home .hero .tagline {
    font-size: 25px;
    line-height: 1.35;
  }
}
.home .hero .tagline em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.65);
}

.home .hero .tagline .parenthetical {
  color: var(--tan);
  font-style: normal;
}

.home .hero .cta-row {
  margin-top: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 600px) {
  .home .hero .cta-row {
    gap: 12px;
  }
  .cta-row {
    gap: 12px;
  }
  .cta-row .btn {
    width: 100%;
    justify-content: space-between;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--ink);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.btn.primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.btn.primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.btn .arrow {
  font-family: var(--sans);
  font-size: 16px;
}

/* Hero buttons invert on blue background */
.home .hero .btn {
  border-color: #fff;
  color: #fff;
  background: transparent;
}

.home .hero .btn:hover {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
}

.home .hero .btn.primary {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
}

.home .hero .btn.primary:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* -------- Sections -------- */
section.slab {
  padding: clamp(56px, 9vw, 140px) var(--page-pad);
  border-bottom: 1px solid var(--line);
}

section.slab.dark {
  background: var(--ink);
  color: var(--paper);
}

section.slab.dark a {
  color: var(--paper);
}

section.slab.dark a:hover {
  color: var(--blue);
}

section.slab.blue {
  background: var(--blue);
  color: #fff;
}

/* Constrain Ready? slab content to a reading column, left-aligned
   to match the section above. */
section.slab.blue .slab-inner {
  max-width: 880px;
}

.section-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* Stacked variant — eyebrow above heading, used where body content
   needs to align with the heading (no left-side number gutter). */
.section-head--stacked {
  display: block;
}

.section-head--stacked .num {
  margin-bottom: 12px;
}

.section-head .num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.dark .section-head .num, .blue .section-head .num {
  color: rgba(255, 255, 255, 0.6);
}

.section-head h2 {
  font-family: var(--display);
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
}

/* -------- FAQ / Q&A on home -------- */
.qa {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
}

.qa:last-child {
  border-bottom: 1px solid var(--line);
}

.dark .qa, .dark .qa:last-child {
  border-color: rgba(255, 255, 255, 0.15);
}

.qa .idx {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.dark .qa .idx {
  color: rgba(255, 255, 255, 0.5);
}

.qa h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 14px 0;
}

.qa p {
  max-width: 70ch;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  margin: 0 0 10px;
}

/* -------- Pledge steps -------- */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.step {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

.step .step-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

.step h3 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  margin: 16px 0 0;
}

.step p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.9;
}

@media (max-width: 720px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .section-head {
    grid-template-columns: 1fr;
  }
  .qa {
    grid-template-columns: 1fr;
  }
}
/* -------- Marquee of Michigan companies -------- */
.marquee {
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: scroll 40s linear infinite;
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
}

.marquee-track span {
  color: var(--ink);
}

.marquee-track span.dim {
  color: var(--muted);
}

.marquee-track .dot {
  color: var(--blue);
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* -------- Pull quote -------- */
.pull {
  padding: clamp(56px, 9vw, 140px) var(--page-pad);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.pull blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.pull blockquote .accent {
  color: var(--blue);
}

.pull cite {
  display: block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* -------- Sub-pages -------- */
main.page {
  padding-bottom: 80px;
}

.page-hero {
  padding: clamp(56px, 9vw, 120px) var(--page-pad) clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--line);
}

.page-hero .eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin: 0 0 24px;
}

.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(52px, 10vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  margin: 0;
}

.prose {
  max-width: 780px;
  padding: clamp(32px, 5vw, 64px) var(--page-pad);
  font-size: 18px;
  line-height: 1.65;
}

.prose h1, .prose h2, .prose h3 {
  font-family: var(--display);
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.prose h1 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 24px;
}

.prose h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 56px 0 16px;
}

.prose h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 40px 0 12px;
}

.prose p {
  margin: 0 0 20px;
}

.prose strong {
  font-weight: 700;
}

.prose a {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.prose a:hover {
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.prose ul, .prose ol {
  padding-left: 22px;
  margin: 0 0 20px;
}

.prose li {
  margin-bottom: 10px;
}

.prose img {
  margin: 32px 0;
  border: 1px solid var(--line);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

/* Home content override: home's `.prose` wrapper from layout shouldn't box the custom sections.
   We render home sections OUTSIDE .prose by placing raw HTML. See index.md. */
main.home > .prose {
  max-width: none;
  padding: 0;
  font-size: inherit;
}

/* -------- Founders (origin page) -------- */
.founders-compare {
  margin: 48px 0;
}

.compare-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 32px 0 16px;
}

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  margin-bottom: 32px;
}

.founder {
  margin: 0;
}

.prose .founder img,
.founder img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  background: var(--paper);
  border: none;
  margin: 0;
  mix-blend-mode: normal;
}

.founder figcaption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.founder figcaption strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}

.founder figcaption a {
  border: none;
  color: var(--blue);
}

.founder figcaption a:hover {
  color: var(--blue-dark);
}

.founder-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.founder-links .js-email {
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  /* Stack founders vertically on mobile so each caption has full width —
     names stay on one line and email addresses sit cleanly below. */
  .founders {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .prose .founder img, .founder img {
    aspect-ratio: auto;
  }
  .founder figcaption strong {
    font-size: 18px;
  }
}
/* -------- Footer -------- */
.site-footer {
  background: var(--tan);
  color: var(--ink);
  padding: clamp(48px, 7vw, 96px) var(--page-pad) 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.18);
}

.footer-word {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9;
  margin: 0;
  color: var(--blue);
}

.footer-tag {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 12px 0 0;
  color: var(--ink);
}

.footer-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin: 0 0 16px;
}

.site-footer a {
  display: block;
  border: none;
  padding: 4px 0;
  color: var(--ink);
  font-weight: 500;
}

.site-footer a:hover {
  color: var(--blue);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.footer-bottom span + span {
  text-align: right;
  line-height: 1.5;
}

/* -------- Roster grid + pledgee cards -------- */
/* Pages that contain full-bleed children (roster grid, pledgee profile,
   .slab.blue CTA) opt out of the default .prose max-width via this class.
   Avoid the :has() pseudo-class — older Sass compilers (incl. GitHub Pages')
   silently fail mid-file when they hit it. */
.prose--full {
  max-width: none;
  padding: 0;
}

/* Inside a default (non-full) .prose, a `.slab` child breaks out of the
   780px column and gutter padding to span the full viewport width. Used on
   the origin page where the body text wants prose constraints but the
   trailing Take-the-pledge CTA wants full-bleed. Scoped to .page so the
   home layout (which has padding:0 on .prose) doesn't get a negative-margin
   shift that pulls every slab off the left edge. */
main.page > .prose:not(.prose--full) > .slab,
main.page > .prose:not(.prose--full) > section.slab {
  width: 100vw;
  max-width: none;
  margin-left: calc(-1 * var(--page-pad));
  margin-right: calc(-1 * var(--page-pad));
  margin-top: clamp(48px, 7vw, 96px);
  position: relative;
}

/* On .prose--full pages (pledgee, roster) the prose has no horizontal
   padding, so a child slab is already viewport-wide. Just give it
   breathing room from the content above. */
main.page > .prose--full > .slab,
main.page > .prose--full > section.slab {
  margin-top: clamp(48px, 7vw, 96px);
}

.roster {
  padding: clamp(24px, 3vw, 40px) var(--page-pad) clamp(56px, 8vw, 96px);
  max-width: var(--max);
  margin: 0 auto;
}

/* -------- Backed (companies table) -------- */
.backed {
  padding: clamp(20px, 3vw, 40px) var(--page-pad) clamp(56px, 8vw, 96px);
  max-width: var(--max);
  margin: 0 auto;
}

.backed-lede {
  font-size: 18px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 24px;
  color: var(--ink);
}

.backed-lede a {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.backed-lede a:hover {
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.backed-disclaimer {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
  max-width: 70ch;
  margin: 0 0 clamp(40px, 6vw, 72px);
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.backed-disclaimer a {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.backed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.backed-table th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink);
}

.backed-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.backed-table tr:hover td {
  background: var(--paper-2);
}

.backed-table .col-company {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.005em;
  line-height: 1.15;
  width: 36%;
}

.backed-table .col-company a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}

.backed-table .col-company a:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.backed-table .col-pledgee {
  font-size: 15px;
  line-height: 1.55;
}

.backed-table .col-pledgee a {
  color: var(--blue);
  border-bottom: 1px solid transparent;
}

.backed-table .col-pledgee a:hover {
  border-bottom-color: var(--blue);
}

.backed-table .col-pledgee .year {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

@media (max-width: 600px) {
  .backed-table {
    font-size: 14px;
  }
  .backed-table th, .backed-table td {
    padding: 12px 8px;
  }
  .backed-table .col-company {
    font-size: 16px;
    width: auto;
  }
  .backed-table .col-pledgee {
    font-size: 14px;
  }
  .backed-table .col-pledgee .year {
    font-size: 11px;
  }
}
.roster-lede {
  font-size: 18px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 clamp(80px, 10vw, 128px);
  color: var(--ink);
}

.roster-lede a {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.roster-lede a:hover {
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

@media (max-width: 900px) {
  .roster-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .roster-grid {
    grid-template-columns: 1fr;
  }
}
/* Trading-card aesthetic — Topps-inspired frame, halftone portrait, blue name band. */
.pledgee-card,
.prose .pledgee-card {
  display: block;
  border: none;
  color: var(--ink);
  text-decoration: none;
  transition: transform 120ms ease;
}

/* Outer paper-stock matte — the card-as-object.
   Inset hairline echoes the worn rule line on a vintage Topps cardstock edge. */
.pledgee-card .card {
  background: var(--paper-2);
  border: 1px solid rgba(10, 10, 10, 0.45);
  padding: clamp(10px, 1.2vw, 14px);
  box-shadow: inset 0 0 0 1px rgba(196, 161, 94, 0.22);
}

/* Inner ink frame — sits inside the matte. */
.pledgee-card .card-inner {
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

.pledgee-card .card-frame {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}

.pledgee-card .card-mark {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
}

.pledgee-card .card-mark-dot {
  color: var(--tan);
}

.pledgee-card .card-year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink);
  border: 1px solid var(--tan);
  padding: 3px 7px 2px;
  line-height: 1;
  background: var(--paper);
}

.pledgee-card figure.card-photo,
.pledgee-card .card-photo {
  margin: 0;
  aspect-ratio: 4/5;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}

.prose .pledgee-card .card-photo img,
.pledgee-card .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--paper);
  border: none;
  margin: 0;
  transition: filter 120ms ease, transform 220ms ease;
}

.pledgee-card .card-band {
  background: var(--blue);
  color: #fff;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pledgee-card .pledgee-name {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0;
  min-height: 2.1em; /* lock to two lines so cards stay equal height */
}

.pledgee-card .pledgee-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Hover/focus: gentle lift + photo brightness, never AI-slop bouncy. */
.pledgee-card:hover .card,
.pledgee-card:focus-visible .card {
  transform: translateY(-2px);
}

.pledgee-card:hover .card-photo img,
.pledgee-card:focus-visible .card-photo img {
  filter: brightness(1.05);
}

.pledgee-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
}

/* Hero variant — used at the top of /roster/<slug>/. Bigger frame, larger name band. */
.pledgee-card--hero {
  display: block;
  max-width: 480px;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.pledgee-card--hero .card-frame {
  padding: 12px 18px;
}

.pledgee-card--hero .card-mark {
  font-size: 18px;
}

.pledgee-card--hero .card-year {
  font-size: 13px;
}

.pledgee-card--hero .card-band {
  padding: 18px 20px 22px;
}

.pledgee-card--hero .pledgee-name {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1;
}

.pledgee-card--hero .pledgee-meta {
  font-size: 13px;
}

@media (max-width: 600px) {
  .pledgee-card--hero {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .pledgee-card--hero .pledgee-name {
    font-size: clamp(28px, 7vw, 36px);
  }
}
/* Sample card preview on /howto/makepublic — floats next to the "what we need" list. */
.sample-card-wrap {
  float: right;
  width: 140px;
  margin: 4px 0 16px 28px;
  shape-outside: margin-box;
}

.sample-card-wrap .sample-card {
  pointer-events: none;
}

.sample-card-wrap .sample-card .pledgee-name {
  min-height: 0;
  font-size: 16px;
}

.sample-card-wrap .sample-card .pledgee-meta {
  font-size: 10px;
}

.sample-card-wrap .sample-card .card-frame {
  padding: 6px 10px;
}

.sample-card-wrap .sample-card .card-mark {
  font-size: 11px;
}

.sample-card-wrap .sample-card .card-year {
  font-size: 9px;
  padding: 2px 5px 1px;
}

.sample-card-wrap .sample-card .card-band {
  padding: 10px 12px 12px;
}

.sample-card-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2, #6b6b6b);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .sample-card-wrap {
    float: none;
    width: 140px;
    margin: 8px auto 24px;
  }
}
/* -------- Profile page (/roster/<slug>/) — ESPN athlete-profile pattern -------- */
.pledgee {
  padding: clamp(32px, 5vw, 64px) var(--page-pad) clamp(40px, 6vw, 72px);
  max-width: 1280px;
  margin: 0 auto;
}

.pledgee-hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.pledgee-hero-card {
  width: 100%;
  max-width: 420px;
}

.pledgee-hero-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.pledgee-hero-meta .eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
}

.pledgee-h1 {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0;
}

.pledgee-vitals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pledgee-vitals > div {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--line);
}

.pledgee-vitals > div:first-child {
  padding-left: 0;
}

.pledgee-vitals > div:last-child {
  border-right: none;
  padding-right: 0;
}

.pledgee-vitals dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.pledgee-vitals dd {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

.pledgee-vitals .vital-unit {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}

.pledgee-hero-cta {
  margin: 0;
}

@media (max-width: 760px) {
  .pledgee-hero {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 36px);
  }
  .pledgee-hero-card {
    max-width: 320px;
    margin: 0 auto;
  }
  .pledgee-vitals {
    grid-template-columns: repeat(2, 1fr);
  }
  .pledgee-vitals > div:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }
}
.pledgee .quote {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  max-width: 24ch;
  margin: 0 0 clamp(32px, 5vw, 56px);
  color: var(--ink);
}

.pledgee .quote .tan {
  color: var(--tan);
}

.pledgee-body {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 clamp(40px, 6vw, 72px);
}

.pledgee-body p {
  margin: 0 0 18px;
}

.pledgee-body a {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}

.pledgee-body a:hover {
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.pledgee .backed {
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.5vw, 28px);
  margin: 0;
}

.pledgee .backed-label {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 16px;
}

.pledgee .backed ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pledgee .backed li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 8px;
  row-gap: 4px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.pledgee .backed li:last-child {
  border-bottom: none;
}

.pledgee .backed-year {
  color: var(--muted);
}

.pledgee .backed-sep {
  color: var(--muted);
}

.pledgee .backed-company {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0;
  color: var(--ink);
  border: none;
  text-transform: none;
}

.pledgee .backed a.backed-company,
.prose .pledgee .backed a.backed-company {
  border-bottom: none;
}

.pledgee .backed a.backed-company:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pledgee .backed-note {
  grid-column: 3;
  color: var(--muted);
  font-size: 13px;
}

.pledgee-linkedin {
  margin: 0 0 clamp(32px, 5vw, 56px);
}

.pledgee-hairline {
  border: none;
  border-top: 1px solid var(--line);
  margin: clamp(24px, 3vw, 40px) 0 0;
}

/* Origin page: founders use the same card grid, but force a 2-up layout so
   the two founders sit shoulder-to-shoulder on desktop rather than leaving a
   trailing empty third cell. */
.founders-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
}

@media (max-width: 480px) {
  .founders-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
  .site-nav {
    gap: 18px;
  }
}

/*# sourceMappingURL=style.css.map */