/* Future of Humanity Foundation: base site styles (moved out of index.html's inline <style> on 2026-10-17 so every page shares them). See BRAND.md. */
  :root {
    --navy: #102448;
    --navy-soft: #1c3a6e;
    --gold: #F0B028;
    --gold-deep: #c48e16;
    --ink: #102448;
    --muted: #5d6d86;
    --paper: #ffffff;
    --paper-2: #f4f6f8;
    --rule: #d9e0ea;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Outfit, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 6vw;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .brand {
    display: flex; gap: 12px; align-items: center;
    text-decoration: none; letter-spacing: .22em;
    font-size: 11px; text-transform: uppercase; color: var(--navy);
  }
  .brand img { height: 36px; width: auto; }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a {
    text-decoration: none; font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
  }
  .nav-links a.ask { color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
  .hero {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 52px;
    align-items: end;
    padding: 56px 6vw 48px;
    max-width: 1100px;
  }
  .seal { width: 300px; height: auto; }
  .kicker {
    letter-spacing: .28em; text-transform: uppercase;
    font-size: 11px; color: var(--gold-deep); margin-bottom: 16px;
  }
  h1, h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--navy);
  }
  h1 { font-size: clamp(48px, 6vw, 80px); line-height: .92; max-width: 12ch; }
  h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1; }
  .lede { max-width: 440px; color: var(--muted); margin: 20px 0 26px; }
  .btn {
    display: inline-block; text-decoration: none;
    border-bottom: 1px solid var(--navy); padding-bottom: 3px;
    letter-spacing: .14em; text-transform: uppercase; font-size: 12px;
    background: none; cursor: pointer; font-family: inherit; color: var(--navy);
  }
  .btn:hover { color: var(--gold-deep); border-color: var(--gold); }
  .frame { margin: 0; background: var(--navy); }
  .frame img { width: 100%; height: 62vh; object-fit: cover; }
  .frame.earth img { object-position: center 62%; }
  .frame figcaption {
    display: flex; justify-content: space-between; gap: 24px;
    padding: 14px 6vw 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .fields {
    display: grid; grid-template-columns: repeat(3, 1fr);
    max-width: 1100px; margin: 0 auto; padding: 76px 6vw 60px;
  }
  .field { padding-right: 36px; }
  .field + .field { padding-left: 36px; border-left: 1px solid var(--rule); }
  .field img {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit: cover; margin-bottom: 18px; background: var(--navy);
    border: 1px solid var(--navy);
  }
  .field h2 { font-size: 36px; margin-bottom: 10px; }
  .field p { margin: 0; color: var(--muted); max-width: 30ch; }
  .gift {
    background: var(--navy); color: #fff;
    display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px;
    padding: 80px 6vw;
  }
  .gift h2, .gift .figure { color: #fff; }
  .gift .kicker { color: var(--gold); }
  .gift p { color: #d5deea; max-width: 38ch; }
  .figure {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(60px, 7vw, 92px); line-height: .9; margin: 8px 0 16px;
  }
  .uses div {
    display: grid; grid-template-columns: 140px 1fr;
    gap: 18px; padding: 16px 0;
    border-top: 1px solid rgba(240,176,40,.35);
  }
  .uses strong { font-weight: 400; color: var(--gold); }
  .uses span { color: #d5deea; }
  .pair { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--paper-2); }
  .pair img { width: 100%; height: 100%; object-fit: cover; min-height: 440px; }
  .pair .copy { padding: 72px 7vw; display: flex; flex-direction: column; justify-content: flex-end; }
  .pair p { color: var(--muted); max-width: 36ch; }
  .talk {
    border-top: 1px solid var(--rule);
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    padding: 76px 6vw 88px;
  }
  form { display: grid; gap: 12px; max-width: 440px; }
  input, textarea, select {
    font: inherit; color: var(--navy);
    padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule);
    background: transparent; border-radius: 0;
  }
  input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
  button.btn { text-align: left; margin-top: 8px; }
  footer {
    padding: 22px 6vw 32px;
    background: var(--navy); color: #d5deea;
    font-size: 12px; letter-spacing: .08em;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  }
  footer span { color: var(--gold); }
  footer .leaders { flex-basis: 100%; padding-top: 12px; border-top: 1px solid rgba(213,222,234,.18); color: #d5deea; }
  /* Pillar feature section (one per pillar: Space, Intelligence, Life). Added 2026-10-17. */
  .pillar {
    display: grid; grid-template-columns: .8fr 1.2fr;
    border-top: 1px solid var(--rule);
  }
  .pillar .copy {
    padding: 76px 52px 72px 6vw;
    display: flex; flex-direction: column; justify-content: center;
  }
  .pillar h2 { max-width: 13ch; }
  .pillar .copy > p { color: var(--muted); max-width: 38ch; margin: 20px 0 26px; }
  .pillar figure { margin: 0; background: var(--paper-2); }
  .pillar picture, .pillar img { display: block; width: 100%; height: 100%; }
  .pillar img { min-height: 560px; object-fit: cover; object-position: 56% 50%; }
  .pillar .btn { align-self: flex-start; }
  .pillar.photo-left { grid-template-columns: 1.2fr .8fr; }
  .pillar.photo-left figure { order: -1; }
  .pillar.photo-left .copy { padding: 76px 6vw 72px 52px; }
  .pillar + .pillar { border-top: 0; }
  .points { margin: 0 0 30px; max-width: 460px; }
  .points div {
    display: grid; grid-template-columns: 130px 1fr; gap: 18px;
    padding: 14px 0; border-top: 1px solid var(--rule);
  }
  .points div:last-child { border-bottom: 1px solid var(--rule); }
  .points strong { font-weight: 400; color: var(--navy); }
  .points span { color: var(--muted); }
  @media (max-width: 860px) {
    .nav-links a:not(.ask):not(.btn-donate) { display: none; }
    .nav-links { gap: 18px; }
    .hero, .fields, .gift, .pair, .talk { grid-template-columns: 1fr; }
    .hero { gap: 22px; padding-top: 32px; }
    .seal { width: 200px; height: auto; }
    .field + .field { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 28px; }
    .frame img { height: 46vh; }
    .pillar, .pillar.photo-left { grid-template-columns: 1fr; }
    .pillar figure { order: -1; }
    .pillar img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
    .pillar .copy, .pillar.photo-left .copy { padding: 48px 6vw 56px; }
    .points div { grid-template-columns: 1fr; gap: 2px; }
  }