/* ============================================================
   FUNDING CHANGE — design system
   Editorial / institutional grant-program aesthetic.
   Palette: charcoal, muted indigo, warm clay, soft sand, forest green.
   Type: Fraunces (display) + Public Sans (UI/body).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400..600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* core palette */
  --charcoal:      #1B1A17;
  --charcoal-2:    #242220;
  --charcoal-3:    #2E2B27;
  --indigo:        #4B4C86;
  --indigo-soft:   #6668A8;
  --indigo-deep:   #302F57;
  --clay:          #B85C38;
  --clay-deep:     #8F4429;
  --clay-soft:     #D89A79;
  --sand:          #F1E9D8;
  --sand-2:        #E6DAC0;
  --sand-3:        #D9CBA8;
  --forest:        #35503C;
  --forest-deep:   #253A2A;
  --forest-soft:   #6F8F71;
  --paper:         #F6F1E4;
  --ink:           #211E1A;
  --ink-soft:      #4B463E;
  --line-dark:     rgba(246,241,228,0.14);
  --line-light:    rgba(33,30,26,0.14);

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius: 3px;
  --radius-lg: 6px;
  --shadow-panel: 0 18px 40px -22px rgba(0,0,0,0.55);

  --container: 1180px;
  --gap: 24px;

  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg{ display:block; max-width:100%; }

a{ color: inherit; text-decoration: none; }
a:not([class]){ text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 3px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 460; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4{ font-size: 1.1rem; }
p{ margin: 0 0 1em; max-width: 62ch; }
.lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; }

.font-mono, .data{ font-variant-numeric: tabular-nums; }

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

/* ---------- focus ---------- */
:focus-visible{
  outline: 2.5px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, [data-surface="dark"] :focus-visible{ outline-color: var(--clay-soft); }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:var(--radius);
  transition: top .15s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- layout / grid ---------- */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.wrap-wide{ max-width: 1360px; margin:0 auto; padding: 0 24px; }

.grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(4, 1fr); }
@media (min-width: 640px){ .grid{ grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1024px){ .grid{ grid-template-columns: repeat(12, 1fr); } }

.section{ padding: 72px 0; }
.section-sm{ padding: 44px 0; }
@media (max-width: 640px){ .section{ padding: 48px 0; } .section-sm{ padding: 32px 0; } }

.surface-charcoal{ background: var(--charcoal); color: var(--paper); }
.surface-charcoal .lede{ color: rgba(246,241,228,0.72); }
.surface-sand{ background: var(--sand); }
.surface-sand2{ background: var(--sand-2); }
.surface-indigo{ background: var(--indigo-deep); color: var(--paper); }
.surface-forest{ background: var(--forest-deep); color: var(--paper); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size: 0.78rem;
  color: var(--clay-deep); margin-bottom: 14px;
}
.surface-charcoal .eyebrow, .surface-indigo .eyebrow, .surface-forest .eyebrow{ color: var(--clay-soft); }
.eyebrow::before{ content:""; width:16px; height:2px; background: currentColor; display:inline-block; }

.divider{ height:1px; background: var(--line-light); border:0; margin: 0; }
.surface-charcoal .divider, .surface-indigo .divider, .surface-forest .divider{ background: var(--line-dark); }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--charcoal); color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap: 20px; height: 76px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.18rem; letter-spacing:-0.01em; }
.brand .mark{ width: 30px; height:30px; flex:none; }
.brand small{ display:block; font-family:var(--font-body); font-weight:600; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--clay-soft); }

.nav-desktop{ display:none; }
.nav-desktop ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; font-size:0.94rem; }
.nav-desktop a{ position:relative; padding: 6px 0; color: rgba(246,241,228,0.82); }
.nav-desktop a[aria-current="page"]{ color: var(--paper); }
.nav-desktop a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background: var(--clay); }
.nav-desktop a:hover{ color: var(--paper); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  background:none; border:1px solid var(--line-dark); color: var(--paper);
  width:38px; height:38px; border-radius: var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ border-color: var(--clay-soft); }

.menu-toggle{ display:flex; }
@media (min-width:1024px){ .nav-desktop{ display:block; } .menu-toggle{ display:none; } }

.mobile-nav{
  display:none; position:fixed; inset:76px 0 0 0; z-index:99;
  background: var(--charcoal); color: var(--paper);
  overflow-y:auto; padding: 20px 0 40px;
}
.mobile-nav.open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav a{ display:block; padding:16px 24px; font-family:var(--font-display); font-size:1.4rem; border-bottom:1px solid var(--line-dark); }
.mobile-nav .mnav-cta{ margin: 20px 24px 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 22px; border-radius: var(--radius); font-weight:600; font-size:0.95rem;
  cursor:pointer; border: 1px solid transparent; line-height:1; white-space:nowrap;
}
.btn-clay{ background: var(--clay); color: var(--paper); }
.btn-clay:hover{ background: var(--clay-deep); }
.btn-outline{ background:transparent; border-color: currentColor; color:inherit; }
.btn-outline:hover{ background: rgba(0,0,0,0.05); }
.surface-charcoal .btn-outline:hover, .surface-indigo .btn-outline:hover, .surface-forest .btn-outline:hover{ background: rgba(255,255,255,0.08); }
.btn-ghost{ background:transparent; color: inherit; padding: 13px 4px; }
.btn-ghost:hover{ text-decoration: underline; text-decoration-color: var(--clay); }
.btn-sm{ padding: 9px 16px; font-size: 0.86rem; }
.btn[disabled]{ opacity:0.45; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------- hero ---------- */
.hero{ padding: 64px 0 76px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; gap: 40px; }
@media (min-width:900px){ .hero-grid{ grid-template-columns: 1.15fr 0.85fr; align-items:end; } }
.hero h1{ margin-bottom: 0.4em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 28px; }

.stat-row{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px 28px; margin-top: 48px; }
@media (min-width:640px){ .stat-row{ grid-template-columns: repeat(4,1fr); } }
.stat b{ display:block; font-family: var(--font-display); font-size: 2rem; font-weight:500; }
.stat span{ display:block; font-size:0.82rem; color: rgba(246,241,228,0.6); margin-top:4px; }

/* ---------- cards ---------- */
.card{
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: var(--radius-lg); padding: 26px;
}
.surface-charcoal .card, .surface-indigo .card, .surface-forest .card{
  background: rgba(246,241,228,0.05); border-color: var(--line-dark); color: var(--paper);
}
.card-tag{ display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.02em; padding:4px 10px; border-radius:20px; background: var(--sand-2); color: var(--forest-deep); margin-bottom:12px; }
.card-tag.clay{ background: rgba(184,92,56,0.14); color: var(--clay-deep); }
.card-tag.indigo{ background: rgba(75,76,134,0.14); color: var(--indigo-deep); }

.card-grid{ display:grid; gap:20px; grid-template-columns: repeat(1,1fr); }
@media (min-width:640px){ .card-grid.cols-2{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr);} .card-grid.cols-2{ grid-template-columns:repeat(2,1fr);} }

/* ---------- forms ---------- */
.field{ margin-bottom: 20px; }
.field label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:7px; }
.field .hint{ font-size:0.8rem; color: var(--ink-soft); margin-top:5px; }
.field input[type=text], .field input[type=email], .field input[type=number], .field select, .field textarea{
  width:100%; padding: 12px 14px; border:1.5px solid var(--sand-3); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:invalid, .field.error input, .field.error textarea, .field.error select{ border-color: var(--clay-deep); }
.field .error-msg{ display:none; color: var(--clay-deep); font-size:0.82rem; margin-top:6px; font-weight:600; }
.field.error .error-msg{ display:block; }
.field.error .error-msg::before{ content:"⚠ "; }

.option-group{ display:grid; gap:10px; }
.option-card{
  display:flex; align-items:flex-start; gap:12px; padding:15px 16px;
  border:1.5px solid var(--sand-3); border-radius: var(--radius); cursor:pointer; background:var(--paper);
}
.option-card:hover{ border-color: var(--indigo-soft); }
.option-card input{ margin-top:3px; flex:none; width:18px; height:18px; accent-color: var(--clay); }
.option-card.selected{ border-color: var(--clay); background: rgba(184,92,56,0.06); }
.option-card .opt-label{ font-weight:600; }
.option-card .opt-sub{ font-size:0.82rem; color:var(--ink-soft); margin-top:2px; }

/* progress bar */
.progressbar{ height:6px; background: var(--sand-3); border-radius:3px; overflow:hidden; }
.progressbar > span{ display:block; height:100%; background: var(--clay); transition: width .3s ease; }
.surface-charcoal .progressbar{ background: rgba(246,241,228,0.15); }

/* bar chart rows */
.bar-row{ display:grid; grid-template-columns: 150px 1fr 48px; align-items:center; gap:12px; margin-bottom:12px; font-size:0.88rem; }
.bar-track{ height:10px; background: var(--sand-3); border-radius:6px; overflow:hidden; }
.bar-track > span{ display:block; height:100%; background: var(--indigo); border-radius:6px; }
.surface-charcoal .bar-track{ background: rgba(246,241,228,0.15); }

/* accordion */
.accordion-item{ border-bottom:1px solid var(--line-light); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:0; padding:18px 4px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; font-size:1rem;
}
.accordion-trigger .plus{ flex:none; width:20px; height:20px; position:relative; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after{ content:""; position:absolute; background: var(--clay); }
.accordion-trigger .plus::before{ left:0; top:9px; width:20px; height:2px; }
.accordion-trigger .plus::after{ left:9px; top:0; width:2px; height:20px; transition: transform .15s ease; }
.accordion-trigger[aria-expanded="true"] .plus::after{ transform: scaleY(0); }
.accordion-panel{ overflow:hidden; max-height:0; transition: max-height .22s ease; }
.accordion-panel.open{ max-height: 800px; }
.accordion-panel .inner{ padding: 0 4px 20px; color: var(--ink-soft); }

/* tables */
.data-table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.data-table th{ text-align:left; font-weight:700; padding:10px 14px; border-bottom:2px solid var(--ink); font-size:0.78rem; text-transform:none; letter-spacing:0.02em; }
.data-table td{ padding:12px 14px; border-bottom:1px solid var(--line-light); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 640px){
  .data-table.stack thead{ display:none; }
  .data-table.stack, .data-table.stack tbody, .data-table.stack tr, .data-table.stack td{ display:block; width:100%; }
  .data-table.stack tr{ border:1px solid var(--line-light); border-radius:var(--radius); margin-bottom:12px; padding:6px 4px; }
  .data-table.stack td{ border:0; display:flex; justify-content:space-between; gap:12px; }
  .data-table.stack td::before{ content: attr(data-label); font-weight:700; color: var(--ink-soft); }
}

/* filter panel */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom: 28px; }
.filter-bar select, .filter-bar input[type=search]{
  padding:10px 14px; border:1.5px solid var(--sand-3); border-radius: var(--radius); background: var(--paper);
}
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background: var(--sand-2); font-size:0.82rem; font-weight:600; }
.chip button{ background:none; border:0; cursor:pointer; font-weight:700; color: var(--clay-deep); }

/* result / score */
.match-score{ display:flex; align-items:center; gap:20px; }
.score-ring{ position:relative; width:120px; height:120px; flex:none; }
.score-ring svg{ transform: rotate(-90deg); }
.score-ring .track{ stroke: var(--sand-3); }
.score-ring .fill{ stroke: var(--clay); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.score-ring .val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.7rem; }

.confidence-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:20px; font-weight:700; font-size:0.85rem; }
.confidence-high{ background: rgba(53,80,60,0.14); color: var(--forest-deep); }
.confidence-medium{ background: rgba(184,92,56,0.14); color: var(--clay-deep); }
.confidence-low{ background: rgba(75,70,62,0.12); color: var(--ink-soft); }

/* timeline */
.timeline{ position:relative; padding-left: 28px; border-left:2px solid var(--sand-3); }
.tl-item{ position:relative; padding-bottom:36px; }
.tl-item::before{ content:""; position:absolute; left:-34px; top:4px; width:12px; height:12px; border-radius:50%; background: var(--clay); border: 3px solid var(--paper); }
.tl-item .tl-year{ font-family: var(--font-display); font-size:1.3rem; color: var(--indigo); margin-bottom:4px; }

/* footer */
.site-footer{ background: var(--charcoal); color: rgba(246,241,228,0.78); padding: 64px 0 28px; font-size:0.92rem; }
.footer-grid{ display:grid; gap:32px; grid-template-columns: repeat(2,1fr); margin-bottom:40px; }
@media (min-width:760px){ .footer-grid{ grid-template-columns: 1.4fr repeat(4,1fr); } }
.footer-grid h4{ color: var(--paper); font-family: var(--font-body); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color: var(--paper); text-decoration:underline; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line-dark); font-size:0.8rem; color: rgba(246,241,228,0.5); }
.disclaimer-strip{ background: var(--indigo-deep); color: var(--paper); font-size:0.82rem; padding:11px 0; text-align:center; }
.disclaimer-strip .wrap{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding:13px 20px; border-radius: var(--radius); font-size:0.9rem; opacity:0; pointer-events:none; transition: all .2s ease; z-index:300; box-shadow: var(--shadow-panel); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* command palette */
.cmdk-overlay{ position:fixed; inset:0; background:rgba(27,26,23,0.6); z-index:400; display:none; align-items:flex-start; justify-content:center; padding: 12vh 16px 0; }
.cmdk-overlay.open{ display:flex; }
.cmdk-panel{ width:100%; max-width:560px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); overflow:hidden; }
.cmdk-input{ width:100%; border:0; border-bottom:1px solid var(--line-light); padding:18px 20px; font-size:1.05rem; background:transparent; }
.cmdk-list{ max-height:340px; overflow-y:auto; padding:8px; }
.cmdk-item{ padding:12px 14px; border-radius:var(--radius); cursor:pointer; display:flex; justify-content:space-between; gap:10px; font-size:0.94rem; }
.cmdk-item[aria-selected="true"], .cmdk-item:hover{ background: var(--sand-2); }
.cmdk-item small{ color: var(--ink-soft); }

/* empty state */
.empty-state{ text-align:center; padding: 56px 20px; border:1.5px dashed var(--sand-3); border-radius: var(--radius-lg); }
.empty-state h3{ margin-bottom:8px; }

/* utility */
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.text-soft{ color: var(--ink-soft); }
.small{ font-size:0.85rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.center-col{ max-width: 700px; }
.node-dot{ fill: var(--clay); }
.node-line{ stroke: rgba(246,241,228,0.28); stroke-width:1.3; }

.reduced-motion-note{ display:none; }
@media (prefers-reduced-motion: reduce){ .anim-network{ display:none; } .static-network{ display:block !important; } }