/* Carina site styles. One file, no build step.
   Change colors and type in the tokens below; everything else reads from them. */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Anek Kannada";
  src: url("/fonts/anek-kannada-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Brand colors */
  --navy: #020931;
  --purple: #875ffe;
  --purple-light: #975ffe; /* links on navy */
  --gray: #f5f5f5;
  --white: #fff;
  --on-navy-muted: #bfc3e6; /* secondary text on navy */
  --muted: #545a7a;         /* secondary text on white */
  --rule: #dcdcea;          /* thin dividers on white */
  --star: #f08a4b;          /* warm star orange from the illustrations */
  --purple-hover: #7449f5;  /* button hover */
  --lavender: #f1ecff;      /* soft purple panels: story bands, feature block */
  --rule-on-navy: rgb(255 255 255 / 0.2);        /* dividers on navy */
  --rule-on-navy-faint: rgb(255 255 255 / 0.12); /* dividers between rows inside navy cards */
  --rule-on-lavender: rgb(2 9 49 / 0.12);        /* dividers on lavender */
  --tbc: #fff0b3;           /* unconfirmed-fact highlight (drafts only) */
  --tbc-line: #c79a00;

  /* Shape */
  --radius: 16px;
  --shadow-card: 0 6px 24px rgb(2 9 49 / 0.06);

  /* Type */
  --font-body: "Outfit", system-ui, sans-serif;
  --font-heading: "Anek Kannada", "Outfit", system-ui, sans-serif;
  --text: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
  --h1: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  --h2: clamp(2rem, 1.4rem + 1.6vw, 2.6rem);
  --h3: clamp(1.6rem, 1.1rem + 1.25vw, 2.1rem);
  --h4: clamp(1.25rem, 0.95rem + 0.8vw, 1.6rem);

  /* Layout */
  --max: 1100px;
  --gutter: max(16px, 6vw);
  --section-pad: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font: 400 var(--text)/1.8 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.12;
  color: var(--purple);
  margin: 0 0 0.6em;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); margin-bottom: 0.4em; }
p { margin: 0 0 1em; }
a { color: var(--purple); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
ul { padding-left: 1.2em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 50rem; }
.wrap--wide { max-width: 1440px; }

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 10; background: var(--white); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 86px; max-width: none; padding-inline: max(16px, 6vw); }
.site-logo img { width: clamp(150px, 20vw, 250px); }
.site-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
/* Pure black, not navy: kept from the header readability fix so the nav reads on the white strip. */
.site-nav a { color: #000; text-decoration: none; padding-bottom: 2px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 #000; }

.nav-toggle { display: none; }
@media (max-width: 767px) {
  .nav-toggle {
    display: block; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; position: relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    position: absolute; left: 10px; width: 24px; height: 2px; background: var(--navy); content: ""; transition: transform 0.2s;
  }
  .nav-toggle span { top: 21px; }
  .nav-toggle span::before { left: 0; top: -7px; }
  .nav-toggle span::after { left: 0; top: 7px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); padding: 1rem var(--gutter) 2rem; box-shadow: 0 8px 16px rgb(2 9 49 / 0.1); }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0.5rem; font-size: 1.4rem; }
}

/* ---------------------------------------------------------------- sections */
.section { padding: var(--section-pad) 0; }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy a { color: var(--purple-light); }
.section--gray { background: var(--gray); }
.section--flush-top { padding-top: 0; }
.section--compact-top { padding-top: 2rem; }

/* Two columns side by side; stacks on phones. Put the image first or second
   in the HTML to choose which side it sits on. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.split + .split, .measure + .split { margin-top: var(--section-pad); }
.split > img { width: 100%; }
.split--top { align-items: start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem var(--gap); }
@media (max-width: 767px) {
  .split, .grid-2 { grid-template-columns: 1fr; }
  .split--media-first > img { max-width: 420px; }
}

/* ---------------------------------------------------------------- home */
.hero { position: relative; display: grid; place-items: center; min-height: clamp(420px, 58vw, 640px); overflow: hidden; background: var(--white); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__title {
  position: relative; max-width: 30ch; margin: 0; padding: 0 var(--gutter);
  font-family: var(--font-body); font-weight: 400; font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height: 1.25;
  color: var(--white); text-align: center;
}

.intro { max-width: 34rem; margin: 0 auto 2rem; text-align: center; }

/* Partner logos (rendered from data/partners.json). Each logo's width is set
   inline by the build so every logo gets about the same visual area. */
.logos { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem clamp(1rem, 4vw, 3rem); max-width: 800px; }
.logos li a { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; transition: opacity 0.15s; }
.logos li a:hover { opacity: 0.75; }
.logos img { max-height: 100%; object-fit: contain; }
.logos--featured { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-bottom: 2.5rem; }
.logos--featured li a { aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
  .logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- about */
.team { list-style: none; padding: 0; margin: 3rem auto; display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); justify-content: center; gap: 2.5rem clamp(2rem, 15vw, 10rem); }
.team img { width: 100%; margin-bottom: 1rem; }
.team h3 { margin: 0 0 0.2em; }
.team p { margin: 0; }
@media (max-width: 480px) { .team { grid-template-columns: minmax(0, 230px); } }

.banner img { width: 100%; height: clamp(220px, 40vw, 440px); object-fit: cover; }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem var(--gap); margin-top: 2rem; }
@media (max-width: 767px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .values { grid-template-columns: 1fr; } }

.contact { display: flex; flex-wrap: wrap; gap: 0.5rem 4rem; }

/* ---------------------------------------------------------------- privacy */
.split--banner { grid-template-columns: 2fr 3fr; margin-bottom: 2rem; }
.split--banner img { height: 160px; object-fit: cover; object-position: left center; }
.prose { max-width: 54rem; }
.prose li { margin-bottom: 0.4em; }

/* ---------------------------------------------------------------- shared blocks
   Added for the Hidden Einsteins Fund page; reusable on any page. */

/* Buttons */
.btn { display: inline-block; padding: 0.7em 1.4em; border-radius: 999px; border: 2px solid var(--purple); background: var(--purple); color: var(--white); font-weight: 500; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--purple-hover); border-color: var(--purple-hover); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgb(255 255 255 / 0.08); border-color: currentColor; }
.section--navy .btn { color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Small line above a heading */
.eyebrow { font-size: 0.9rem; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 0.75rem; }
.section--navy .eyebrow, .section--navy .lede { color: var(--on-navy-muted); }
.lede { font-size: 1.2em; line-height: 1.6; max-width: 40rem; }

/* Stat strip: a row of big numbers with short captions */
.stats { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem 2rem; }
.stats li { border-top: 1px solid var(--rule); padding-top: 1rem; }
.stats strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: var(--h2); line-height: 1; color: var(--purple); margin-bottom: 0.4rem; }
.stats span { display: block; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.section--navy .stats li { border-color: var(--rule-on-navy); }
.section--navy .stats strong { color: var(--white); }
.section--navy .stats span { color: var(--on-navy-muted); }

/* Cards in a row (evidence, components) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 2rem; }
.cards h3 { font-size: var(--h4); }
.source { font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.section--navy .source { color: var(--on-navy-muted); }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* Boxed cards: white cards with a purple top edge, for a gray section. */
.cards--boxed > div { background: var(--white); border-radius: var(--radius); padding: 1.75rem; border-top: 6px solid var(--purple); box-shadow: var(--shadow-card); }
.cards--boxed h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.card__sub { font-weight: 500; color: var(--navy); line-height: 1.45; margin-bottom: 0.75rem; }
.card__text { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.5rem; }
.cards--boxed .source { margin-bottom: 0; }
.card__number { font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.8rem, 2rem + 2vw, 3.8rem); line-height: 1; color: var(--navy); margin-bottom: 0.4rem; }
/* Callout: an open row below a set of cards. Text on the left, a "by the numbers" list on the right
   (layout borrowed from stemtalentaction.com). */
.callout { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.callout h3 { font-size: var(--h3); margin-bottom: 1rem; }
.callout__text { font-size: 1.2rem; line-height: 1.6; color: var(--navy); }
@media (max-width: 860px) { .callout { grid-template-columns: 1fr; } }

/* By the numbers: rows of label + description, with a big and a small value */
.numbers__title { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.numbers__row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); align-items: center; }
.numbers__row p { font-size: 0.95rem; line-height: 1.45; margin: 0; }
.numbers__label { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); margin-bottom: 0.25rem; }
.numbers__values { display: flex; gap: 1.75rem; align-items: baseline; }
.numbers__values > div { text-align: right; min-width: 6.5rem; }
.numbers__big, .numbers__small { display: block; font-family: var(--font-heading); font-weight: 500; line-height: 1; }
.numbers__big { font-size: 2.6rem; color: var(--purple); }
.numbers__small { font-size: 1.9rem; color: var(--navy); }
.numbers__who { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.numbers__note { font-size: 0.8rem; color: var(--muted); margin-top: 0.75rem; }
.numbers mark.tbc { display: inline-block; line-height: 1; }
@media (max-width: 480px) {
  .numbers__row { grid-template-columns: 1fr; }
  .numbers__values { justify-content: flex-start; }
  .numbers__values > div { text-align: left; }
}

/* Goals box: a labeled set of target numbers, so they read as goals rather than results */
.goals { margin-top: 2rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--rule-on-navy); border-radius: var(--radius); }
.goals__grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1.5rem 2.5rem; margin-top: 1rem; align-items: start; }
.goals__sub { font-size: 0.85rem; color: var(--white); font-weight: 500; }
.goals .tiers { margin-top: 0.6rem; }
.goals__money { border-left: 1px solid var(--rule-on-navy); padding-left: 2rem; }
.goals__money strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.6rem; line-height: 1; margin: 0.85rem 0 0.4rem; }
.goals__money span { display: block; font-size: 0.9rem; line-height: 1.4; color: var(--on-navy-muted); }
@media (max-width: 860px) {
  .goals__grid { grid-template-columns: 1fr; }
  .goals__money { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-on-navy); padding-top: 1.25rem; }
  .goals__money strong { margin-top: 0.6rem; }
}
.section--navy .kicker { color: var(--on-navy-muted); }
.tracks-label { margin-top: 3rem; }
.tracks-label + .rows { margin-top: 0.75rem; }

/* Tiers: three numbers in a row, read left to right (each a subset of the one before) */
.tiers { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tiers li { position: relative; padding: 0.25rem 0 0.25rem 0; }
.tiers li + li { padding-left: 1.75rem; }
.tiers li + li::before { content: "→"; position: absolute; left: 0; top: 0.3rem; color: var(--on-navy-muted); font-size: 1.2rem; }
.tiers strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.6rem; line-height: 1; margin-bottom: 0.4rem; }
.tiers span { display: block; font-size: 0.9rem; line-height: 1.4; color: var(--on-navy-muted); }
@media (max-width: 600px) {
  .tiers { grid-template-columns: 1fr; }
  .tiers li + li { padding-left: 0; }
  .tiers li + li::before { content: none; }
}

/* Grantee spotlight: navy cards with a white logo, what the grantee does, and its biggest win */
.section-sub { font-family: var(--font-heading); font-size: var(--h4); color: var(--muted); margin-top: -0.4rem; }
/* Feature: one headline result above the grantee cards, text left and big numbers right */
.feature { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gap); align-items: center; background: var(--lavender); border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); margin-top: 2rem; }
.feature h3 { margin: 0 0 0.75rem; }
.feature__text p { max-width: 40rem; }
.feature__stats { list-style: none; margin: 0; padding: 0; }
.feature__stats li { padding: 0.9rem 0; }
.feature__stats li + li { border-top: 1px solid var(--rule-on-lavender); }
.feature__stats strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: var(--h2); line-height: 1; color: var(--purple); margin-bottom: 0.3rem; }
.feature__stats span { color: var(--muted); font-size: 0.95rem; }
.section-sub--grantees { margin-top: 3rem; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }
.grantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 1000px) { .grantees { grid-template-columns: repeat(2, 1fr); } }
.grantee { display: flex; flex-direction: column; background: var(--navy); color: var(--white); border-radius: var(--radius); padding: clamp(1.25rem, 2vw, 1.6rem); }
.grantee__what { font-size: 0.95rem; line-height: 1.6; }
.grantee__logo { height: 40px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; margin-bottom: 1.25rem; }
.grantee__logo--square { height: 60px; margin-top: -10px; margin-bottom: 1rem; }
.grantee .kicker { color: var(--on-navy-muted); }
.grantee__what { margin: 0 0 1.25rem; }
.grantee__win { border-top: 1px solid var(--rule-on-navy); padding-top: 1rem; margin-bottom: 1rem; }
.grantee__number { font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.2rem, 1.9rem + 1vw, 2.8rem); line-height: 1; margin: 0.3rem 0 0.5rem; }
.grantee__stats { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.grantee__stats li { display: grid; grid-template-columns: 5.4rem 1fr; gap: 1rem; align-items: baseline; padding: 0.55rem 0; }
.grantee__stats li + li { border-top: 1px solid var(--rule-on-navy-faint); }
.grantee__stats strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.grantee__stats span { display: block; font-size: 0.9rem; line-height: 1.4; color: var(--on-navy-muted); }
.grantee__stats strong mark.tbc { display: inline-block; line-height: 1; }

.grantee__win p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--on-navy-muted); }
.grantee__logo-link { display: block; align-self: flex-start; }
.grantee__logo-link:hover .grantee__logo, .grantee__logo-link:focus-visible .grantee__logo { opacity: 0.8; }
.grantee mark.tbc { color: var(--navy); }
.grantee__win a { color: var(--purple-light); }
.grantee__quote { margin: 0.7rem 0 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--purple-light); }
.grantee__quote .kicker { font-size: 0.68rem; margin-bottom: 0.15rem; }
.grantee__quote p { margin: 0 0 0.2rem; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; text-indent: -0.4em; }
.grantee__quote cite { display: block; font-style: normal; font-size: 0.78rem; line-height: 1.4; color: var(--on-navy-muted); }
@media (max-width: 760px) { .grantees { grid-template-columns: 1fr; } }

/* Small label above a heading, e.g. the talent-development component a card covers */
.kicker { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }

/* Rows with a label on the left and text on the right, divided by rules */
.rows { margin-top: 2rem; }
.rows > div { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem var(--gap); padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.rows > div:last-child { border-bottom: 1px solid var(--rule); }
.rows h3 { font-size: var(--h4); margin: 0; }
.rows .share { display: block; font-family: var(--font-body); font-size: 0.9rem; color: var(--muted); margin-top: 0.3rem; }
.rows p:last-child { margin-bottom: 0; }
.section--navy .rows > div { border-color: var(--rule-on-navy); }
.section--navy .rows .share { color: var(--on-navy-muted); }
@media (max-width: 700px) { .rows > div { grid-template-columns: 1fr; } }

/* Story band: a photo and a quote between sections. Add story-band--flip to put the photo on the right. */
.story-band { background: var(--lavender); padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
.story-band__inner { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: var(--gap); align-items: center; max-width: 900px; }
.story-band--flip .story-band__photo { order: 2; }
.story-band--flip .story-band__inner { grid-template-columns: 1fr minmax(0, 280px); }
.story-band__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.story-band figure { margin: 0; }
.story-band .eyebrow { color: var(--purple); margin-bottom: 0.5rem; }
.story-band blockquote { margin: 0 0 1rem; font-family: var(--font-heading); font-weight: 500; font-size: var(--h3); line-height: 1.2; color: var(--navy); }
.story-band blockquote::before { content: "“"; } .story-band blockquote::after { content: "”"; }
.story-band figcaption { color: var(--muted); max-width: 36rem; }
.story-band__by { display: block; margin: -0.5rem 0 1.25rem 1.5rem; font-size: 0.95rem; font-style: normal; font-weight: 500; color: var(--navy); }
@media (max-width: 700px) {
  .story-band__inner, .story-band--flip .story-band__inner { grid-template-columns: 1fr; }
  .story-band__photo, .story-band--flip .story-band__photo { order: 0; max-width: 220px; }
}

/* People with a round photo */
.people { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem var(--gap); }
.people li { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: start; }
.people img, .people__initials { width: 96px; height: 96px; border-radius: 50%; }
.people__initials { display: grid; place-items: center; background: var(--lavender); color: var(--purple); font-family: var(--font-heading); font-size: 1.8rem; }
.people h3 { font-size: var(--h4); margin: 0.2rem 0 0.2rem; }
.people p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.3rem; }
.people__role { color: var(--muted); }
/* Text-only people list (fund team): three columns with a rule on top, no photos */
.people--text { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1.5rem; }
.people--text li { display: block; border-top: 1px solid var(--rule); padding-top: 1rem; }
.people__org { color: var(--purple); font-weight: 500; }

/* Unconfirmed facts in a draft. `npm run deploy` refuses to publish a page
   that still has one. Usage: <mark class="tbc" title="who confirms">text</mark> */
mark.tbc { background: var(--tbc); color: var(--navy); border-bottom: 2px dashed var(--tbc-line); padding: 0 0.15em; cursor: help; }
.card__number mark.tbc, .grantee__number mark.tbc { display: inline-block; line-height: 1; }

/* ---------------------------------------------------------------- Hidden Einsteins Fund */
.fund-hero { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; position: relative; overflow: hidden; }
.fund-hero .wrap { position: relative; }
.fund-hero h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); color: var(--white); margin-bottom: 0.4rem; max-width: 14ch; }
.fund-hero__attribution { color: var(--on-navy-muted); font-size: 1rem; margin-bottom: 1.75rem; }
.fund-hero .lede { color: var(--white); max-width: 36rem; margin-bottom: 0; }
.fund-hero__top { display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: var(--gap); align-items: center; }
.fund-hero__art { width: 100%; }
/* Join section: space above a heading that follows a paragraph */
#join p + h3 { margin-top: 2rem; }
@media (max-width: 767px) {
  .fund-hero__top { grid-template-columns: 1fr; }
  .fund-hero__art { order: -1; width: 200px; margin-bottom: 0.5rem; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--purple); color: var(--navy); padding: 2rem 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; }
.site-footer img { width: 150px; }
.site-footer__text { text-align: right; }
.site-footer__text p { margin: 0 0 0.3em; }
.site-footer a { color: inherit; }
@media (max-width: 480px) { .site-footer__text { text-align: left; } }