/* ---- Fonts ---- */
  /* Neuve Kabel Bold for headers, Futura Bold for body. Falling back to
     close-matching geometric sans so the site renders even without the
     licensed faces installed. Swap the @font-face src lines if you host
     the real files. */
  @font-face {
    font-family: 'Neuve Kabel';
    src: local('Neuve Kabel Bold'), local('NeuveKabel-Bold');
    font-weight: 700;
    font-display: swap;
  }
  @font-face {
    font-family: 'Futura';
    src: local('Futura Bold'), local('Futura-Bold'), local('Futura');
    font-weight: 700;
    font-display: swap;
  }

  :root {
    --blue: #122349;
    --gold: #F9C021;
    --white: #ffffff;
    --blue-tint: #1b3066;
    --ink: #0d1a36;
    --header: 'Neuve Kabel', 'Futura', 'Century Gothic', system-ui, sans-serif;
    --body: 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
    --maxw: 1100px;
    --laurel: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2026%22%3E%3Cg%20fill%3D%22%23F9C021%22%3E%3Crect%20x%3D%220%22%20y%3D%2212.4%22%20width%3D%2215%22%20height%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M10%2013%20C13%207%2C%2019%205%2C%2023%204%20C21%209%2C%2017%2012%2C%2012%2013%20Z%22%20transform%3D%22translate%28-7.5%2C0%29%22%2F%3E%3Cpath%20d%3D%22M10%2013%20C13%2019%2C%2019%2021%2C%2023%2022%20C21%2017%2C%2017%2014%2C%2012%2013%20Z%22%20transform%3D%22translate%28-7.5%2C0%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--body);
    font-weight: 700;
    color: var(--blue);
    background: var(--white);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, .nav-tabs a, .logo {
    font-family: var(--header);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.05;
  }

  a { color: inherit; text-decoration: none; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

  /* ---- Header ---- */
  header {
    background: var(--blue);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  header::after {
    content: "";
    display: block;
    height: 18px;
    background-image: var(--laurel);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 18px;
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    max-width: var(--maxw);
    margin: 0 auto;
    flex-wrap: wrap;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
  }
  /* Yard-sign-style logo mark, expanded for header use */
  .logo-mark {
    background: var(--gold);
    color: var(--blue);
    padding: 8px 16px;
    font-size: 1.45rem;
    line-height: 1;
    border-radius: 4px;
  }
  .logo-mark .small {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    margin-top: 4px;
  }
  .logo-text .name { font-size: 1.35rem; }
  .logo-text .seat {
    font-family: var(--body);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--gold);
    display: block;
    margin-top: 4px;
  }

  nav.nav-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .nav-tabs a {
    color: var(--white);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    padding: 10px 16px;
    border-radius: 4px;
    transition: background .15s, color .15s;
  }
  .nav-tabs a:hover { background: var(--blue-tint); }
  .nav-tabs a.cta {
    background: var(--gold);
    color: var(--blue);
  }
  .nav-tabs a.cta:hover { background: #ffcf3b; }

  /* ---- Section scaffolding ---- */
  section { padding: 72px 0; }
  .section-blue { background: var(--blue); color: var(--white); }
  .section-gold { background: var(--gold); color: var(--blue); }

  .eyebrow {
    font-family: var(--body);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .section-gold .eyebrow { color: var(--blue); opacity: 0.7; }

  h2.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 28px;
  }

  /* ---- Hero / Letter ---- */
  .hero {
    background: var(--blue);
    color: var(--white);
    padding-top: 64px;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    max-width: none;
    line-height: 1.04;
    margin-bottom: 20px;
  }
  .hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: nowrap;
  }
  .hero-copy {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hero-copy .lede { margin-top: 0; }
  .hero-logo {
    width: 260px;
    max-width: 32vw;
    height: auto;
    display: block;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .hero h1 .hl { color: var(--gold); }
  .hero .lede {
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    line-height: 1.45;
    max-width: 40ch;
    color: #e7ecf6;
  }
  .hero .lede .hl { color: var(--gold); }
  .hero-actions {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-block;
    font-family: var(--header);
    letter-spacing: 0.06em;
    padding: 14px 28px;
    border-radius: 4px;
    border: 3px solid var(--gold);
    transition: transform .12s, background .15s, color .15s;
  }
  .btn-gold { background: var(--gold); color: var(--blue); }
  .btn-gold:hover { transform: translateY(-2px); background: #ffcf3b; }
  .btn-ghost { background: transparent; color: var(--gold); }
  .btn-ghost:hover { background: var(--gold); color: var(--blue); }

  .letter {
    background: var(--white);
    color: var(--blue);
  }
  .letter .wrap { max-width: 820px; }
  .headshot-frame {
    width: 300px;
    margin: 0 auto 36px;   /* auto = centered */
    padding: 10px;
    background: var(--blue);
    border: 4px solid var(--gold);
    border-radius: 6px;
  }
  .headshot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
  }
  .letter-card {
    border-left: 6px solid var(--gold);
    padding-left: 32px;
  }
  .letter p { margin-bottom: 22px; font-size: 1.05rem; }
  .letter p:first-of-type { font-size: 1.2rem; }
  .signoff {
    margin-top: 12px;
    font-family: var(--header);
    font-size: 1.4rem;
    color: var(--blue);
  }
  .signoff .seat {
    display: block;
    font-family: var(--body);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--blue-tint);
    margin-top: 6px;
  }

  /* ---- Issues accordion ---- */
  .issue-group { margin-bottom: 18px; }
  .accordion {
    border: 3px solid var(--blue);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--white);
  }
  .acc-head {
    width: 100%;
    text-align: left;
    background: var(--blue);
    color: var(--white);
    font-family: var(--header);
    font-size: 1.25rem;
    padding: 20px 24px;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .acc-head:hover { background: var(--blue-tint); }
  .acc-head .plus {
    color: var(--gold);
    font-size: 1.8rem;
    line-height: 1;
    transition: transform .2s;
    flex-shrink: 0;
  }
  .accordion.open .acc-head .plus { transform: rotate(45deg); }
  .acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .accordion.open .acc-body { max-height: 2000px; }
  .acc-inner { padding: 24px 28px; color: var(--blue); }
  .acc-inner h4 {
    color: var(--blue);
    font-size: 1.1rem;
    margin: 22px 0 8px;
  }
  .acc-inner h4:first-child { margin-top: 0; }
  .acc-inner p { margin-bottom: 14px; }
  .acc-inner .lead-p {
    font-size: 1.05rem;
    margin-bottom: 18px;
  }
  .checkback {
    font-family: var(--header);
    color: var(--blue-tint);
    font-style: italic;
    margin-top: 8px;
  }

  /* ---- Donate ---- */
  .donate-wrap { text-align: center; max-width: 720px; margin: 0 auto; }
  .donate-wrap h2 { color: var(--blue); }
  .donate-wrap p { font-size: 1.1rem; margin-bottom: 32px; color: var(--ink); }
  .donate-btn {
    display: inline-block;
    font-family: var(--header);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    background: var(--blue);
    color: var(--white);
    padding: 22px 56px;
    border-radius: 6px;
    border: 4px solid var(--blue);
    transition: transform .12s;
  }
  .donate-btn:hover { transform: translateate(0,-3px); transform: translateY(-3px); }
  .pledge {
    margin-top: 28px;
    font-size: 0.95rem;
    color: var(--ink);
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Contact ---- */
  .contact .wrap { max-width: 640px; }
  .contact h2 { color: var(--white); }
  .contact p.sub { color: #e7ecf6; margin-bottom: 28px; }
  .form-row { margin-bottom: 18px; }
  label {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  input, textarea {
    width: 100%;
    font-family: var(--body);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 16px;
    border: 3px solid transparent;
    border-radius: 4px;
    background: var(--white);
    color: var(--blue);
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
  }
  textarea { min-height: 140px; resize: vertical; }
  .contact .btn-gold { border: none; cursor: pointer; font-size: 1.05rem; }
  .form-note {
    margin-top: 16px;
    font-size: 0.85rem;
    color: #b9c4dc;
  }

  /* ---- Footer ---- */
  footer {
    background: var(--ink);
    color: #b9c4dc;
    padding: 36px 0;
    text-align: center;
    font-size: 0.85rem;
  }
  footer::before {
    content: "";
    display: block;
    height: 18px;
    margin-bottom: 28px;
    background-image: var(--laurel);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 18px;
  }
  footer a { color: var(--gold); }

  /* ---- Accessibility / motion ---- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
  }

  @media (max-width: 720px) {
    .header-inner { justify-content: center; }
    section { padding: 56px 0; }
    .letter-card { padding-left: 20px; }
    .hero-head { flex-wrap: wrap; }
    .hero-logo { max-width: 60vw; }
  }