/* ================================================================
     DESIGN PLAN
     Concept: "The Write-In" — a civic-document identity built around
     the one thing that makes this campaign literally different from
     every other name on the ballot: voters have to write her name in.
     Ballot-instruction typography, a hand-drawn write-in line, and a
     wax-seal mark stand in for flag clip-art. Red/white/blue survives
     only as ink-navy, a rare clay-red, and a brass seal — never as a
     saturated flag palette.

     Color   bg #ECE4CE · paper #F8F4E9 · ink #1C2530 · navy #1F3A5E
             clay #A2412E (spent on exactly two things) · brass #AD8B44
     Type    Display  — Fraunces (warm, civic, high-opsz for legibility
                         at size; never below opsz 40)
             Body/UI  — Public Sans (the U.S. Web Design System face —
                         built and tested for broad public legibility)
             Ballot   — Courier Prime, for anything that reads as
                         official/procedural copy (instructions, dates)
     Layout  Letterhead nav → split hero (thesis + photo frame + ballot
             write-in strip) → platform grid on paper → navy conviction
             band → bio → step-by-step "how to write her in" ballot
             card → footer as the disclosure line every filing requires.
     ================================================================ */

  /* This site has exactly one designed look — a light, paper-and-ballot
     identity — and no theme toggle anywhere in the markup. It deliberately
     does NOT define a @media (prefers-color-scheme: dark) variant: an
     earlier version did, and it was never reviewed — visited on a device
     with system dark mode on, sections rendered in an unintended, unvetted
     palette with real legibility failures (a gold label at one point sat
     on a light-blue band at ~1.4:1 contrast, far below readable). Pinning
     to one explicit palette means every visitor sees the same, approved
     design regardless of their OS setting. */
  :root {
    --bg:        #ECE4CE;
    --paper:     #F8F4E9;
    --paper-alt: #FDFBF3;
    --ink:       #1C2530;
    --ink-soft:  #4B5A6B;
    --ink-faint: #7C8798;
    --navy:      #1F3A5E;
    --navy-deep: #16283F;
    --navy-ink:  #E9ECF1;
    --clay:      #A2412E;
    --clay-deep: #7E3122;
    --clay-ink:  #FBEFE9;
    --brass:     #AD8B44;
    --brass-soft:#C9B587;
    --brass-deep:#7A5E22;
    --line:      #D9CBA3;
    --line-on-navy: #33496A;
    --focus:     #2F6FB0;
    --shadow:    0 18px 40px rgba(28,37,48,0.16);
  }
  * { box-sizing: border-box; }
  html { color-scheme: light; scroll-behavior: smooth; }
  section[id] { scroll-margin-top: 84px; }

  .to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 40px auto 0;
    width: fit-content;
    font-family: "Courier Prime", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-decoration: none;
    padding: 8px 4px;
    border-top: 1px solid var(--line);
    transition: color .15s ease;
  }
  .to-top:hover { color: var(--clay); }
  .to-top svg { width: 11px; height: 11px; }
  .on-navy-band .to-top { color: var(--navy-ink); opacity: 0.55; border-top-color: var(--line-on-navy); }
  .on-navy-band .to-top:hover { opacity: 1; color: var(--brass-soft); }
  .on-clay-band .to-top { color: var(--clay-ink); opacity: 0.7; border-top-color: rgba(251,239,233,0.3); }
  .on-clay-band .to-top:hover { opacity: 1; }

  .jump-rail {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: var(--navy-ink);
    border: 1px solid var(--line-on-navy);
    border-radius: 30px;
    padding: 10px 16px 10px 12px;
    font-family: "Public Sans", sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .jump-rail.show { opacity: 1; transform: none; pointer-events: auto; }
  .jump-rail:hover { background: var(--navy-deep); }
  .jump-rail svg { width: 15px; height: 15px; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  h1, h2, h3 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
    letter-spacing: -0.01em;
  }
  a { color: inherit; }
  a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 3px;
  }
  img, svg { display: block; max-width: 100%; }

  .eyebrow {
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 700;
  }
  .eyebrow.on-navy { color: var(--brass-soft); }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  .prose { max-width: 62ch; }

  /* ---------- utility strip ---------- */
  .utility {
    background: var(--navy-deep);
    color: var(--navy-ink);
    border-bottom: 1px solid var(--brass-soft);
  }
  .utility .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-wrap: wrap;
    opacity: 0.92;
  }

  /* ---------- header ---------- */
  header.site {
    background: var(--navy);
    color: var(--navy-ink);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(16,22,31,0.22);
  }
  header.site .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
  .brand .name {
    font-family: "Fraunces", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy-ink);
    line-height: 1.15;
    white-space: nowrap;
  }
  .brand .name small {
    display: block;
    font-family: "Courier Prime", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-soft);
    font-weight: 400;
    margin-top: 2px;
    white-space: nowrap;
  }
  .seal { flex-shrink: 0; }

  nav.primary { display: flex; align-items: center; gap: 16px; min-width: 0; }
  nav.primary ul { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
  nav.primary ul a {
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--navy-ink);
    opacity: 0.88;
    padding: 6px 1px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: opacity .15s ease, border-color .15s ease;
  }
  nav.primary ul a:hover { opacity: 1; border-color: var(--brass); }
  .nav-toggle { display: none; }

  /* ---------- header action group: Contribute / Volunteer / Share ---------- */
  .nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .nav-actions .btn { white-space: nowrap; }
  .btn.btn-sm { padding: 7px 12px; font-size: 12.5px; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Public Sans", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 3px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn-clay { background: var(--clay); color: var(--clay-ink); }
  .btn-clay:hover { background: var(--clay-deep); }
  .btn-ghost-navy { background: transparent; border-color: var(--navy-ink); color: var(--navy-ink); }
  .btn-ghost-navy:hover { background: rgba(255,255,255,0.08); }
  .btn-outline-ink { background: transparent; border-color: var(--ink); color: var(--ink); }
  .btn-outline-ink:hover { background: rgba(28,37,48,0.06); }
  .btn-block { width: 100%; justify-content: center; }

  /* ---------- hero ---------- */
  /* Same bug as the page-banner had: the generic `section { padding: 84px 0; }`
     rule was landing here too, stacked on top of .wrap's own padding — that's
     what was pushing the headline so far down. */
  .hero { padding: 0; background: var(--navy); color: var(--navy-ink); position: relative; overflow: hidden; }
  .hero .wrap {
    padding-top: 20px;
    padding-bottom: 56px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .hero-hills {
    position: absolute;
    inset: auto 0 0 0;
    height: 130px;
    opacity: 0.5;
  }
  .hero h1 {
    color: var(--navy-ink);
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.08;
    margin-top: 14px;
  }
  .hero h1 .fade { color: var(--brass-soft); }
  .hero .lede {
    margin-top: 18px;
    font-size: 18.5px;
    color: var(--navy-ink);
    opacity: 0.86;
    max-width: 46ch;
  }
  .hero .cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

  .ballot-line {
    margin-top: 26px;
    background: var(--paper-alt);
    color: var(--ink);
    border-radius: 4px;
    padding: 18px 20px;
    max-width: 480px;
    box-shadow: var(--shadow);
  }

  /* the decisive moment: a strong call to action right under the sample
     ballot, so the "here's how you write her in" graphic leads directly
     into "now go do something about it" rather than sitting on its own. */
  .hero-cta { margin-top: 24px; }
  .hero-cta-lead {
    display: block;
    font-family: "Courier Prime", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-soft);
    font-weight: 700;
    margin-bottom: 12px;
  }
  .hero-cta .cta-row { margin-top: 0; }
  .btn-lg { padding: 15px 26px; font-size: 15.5px; }
  .ballot-line .bl-label {
    font-family: "Courier Prime", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .ballot-line .bl-row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
  .ballot-line .bl-box {
    width: 20px; height: 20px; flex-shrink: 0;
    border: 2px solid var(--ink);
    border-radius: 2px;
    margin-top: 4px;
  }
  .ballot-line .bl-write {
    font-family: "Courier Prime", monospace;
    font-size: 12px;
    color: var(--ink-faint);
  }
  .bl-name-wrap { position: relative; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-top: 4px; }
  .bl-name {
    font-family: "Fraunces", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--clay-deep);
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 0;
    animation: writein 4.5s 0.5s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes writein {
    0%, 8% { width: 0; }
    38% { width: 15ch; }
    85% { width: 15ch; }
    100% { width: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .bl-name { animation: none; width: auto; } }

  .hero-photo {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(173,139,68,0.0) 60%, rgba(16,22,31,0.35) 100%),
      linear-gradient(135deg, #2B4A72 0%, #1F3A5E 55%, #16283F 100%);
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-end;
    padding: 22px;
    overflow: hidden;
  }
  .hero-photo.is-placeholder::before {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(233,236,241,0.05) 0 2px, transparent 2px 26px);
  }
  .hero-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }
  .hero-photo .frame-tag {
    position: relative;
    font-family: "Courier Prime", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy-ink);
    background: rgba(16,22,31,0.55);
    border: 1px solid rgba(233,236,241,0.35);
    padding: 8px 12px;
    border-radius: 3px;
  }

  /* ---------- stat rule ---------- */
  .fact-rule {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .fact-rule .wrap {
    display: flex;
    justify-content: center;
    gap: 56px;
    padding: 22px 28px;
    flex-wrap: wrap;
    text-align: center;
  }
  .fact-rule .fact b {
    display: block;
    font-family: "Fraunces", serif;
    font-size: 22px;
    color: var(--navy);
  }
  .fact-rule .fact span {
    font-family: "Courier Prime", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* ---------- section shell ---------- */
  section { padding: 52px 0; }
  .section-head { max-width: 640px; margin: 0 auto 26px; text-align: center; }
  .section-head .eyebrow { display: block; margin-bottom: 8px; }
  .section-head h2 { font-size: clamp(28px, 3.4vw, 38px); }
  .section-head p { margin-top: 10px; color: var(--ink-soft); font-size: 16.5px; }

  .on-paper { background: var(--paper); }
  .on-bg { background: var(--bg); }

  /* ---------- platform grid ---------- */
  .platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .plank {
    background: var(--paper-alt);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .plank:nth-child(10) { grid-column: 2; }
  .plank .tick {
    width: 26px; height: 26px;
    border: 1.5px solid var(--clay);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
  }
  .plank .tick::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px;
    background: var(--clay);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .plank h3 { font-size: 18px; margin-top: 4px; }
  .plank p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

  /* ---------- conviction band ---------- */
  .conviction { background: var(--navy-deep); color: var(--navy-ink); }
  .conviction .wrap { max-width: 820px; text-align: center; }
  .conviction .thesis {
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: clamp(30px, 3.8vw, 42px);
    line-height: 1.28;
    color: var(--navy-ink);
  }
  .conviction .thesis .accent { color: var(--brass); font-style: italic; }
  .conviction p.explain {
    margin-top: 16px;
    color: var(--navy-ink);
    opacity: 0.82;
    font-size: 17.5px;
    max-width: 56ch;
    margin-left: auto; margin-right: auto;
  }
  .conviction .rule { width: 64px; height: 2px; background: var(--brass); margin: 22px auto 14px; }

  /* ---------- bio ---------- */
  /* The photo floats inline with the heading/quote/body copy instead of
     sitting in its own rigid grid column — so the text simply wraps down
     the side of it and continues below once it clears, however short or
     long that text turns out to be. No more dead space when the column
     next to a tall photo runs out of words before the photo runs out of
     height. */
  .bio-frame {
    float: left;
    width: 280px;
    margin: 4px 32px 20px 0;
    aspect-ratio: 3/4;
    border-radius: 6px;
    background: linear-gradient(160deg, var(--paper-alt), var(--bg));
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .bio-frame svg { width: 46%; }
  .bio-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 6px;
  }
  .bio-frame .frame-tag {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    font-family: "Courier Prime", monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
  }
  /* ---------- why-independent photo (floats opposite the About page's,
     for rhythm across the two pages) ---------- */
  .why-frame {
    float: right;
    width: 280px;
    margin: 4px 0 24px 32px;
    aspect-ratio: 900 / 1263;
    border-radius: 6px;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .why-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .why-frame .frame-tag {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 16px 14px;
    background: linear-gradient(180deg, rgba(16,22,31,0) 0%, rgba(16,22,31,0.55) 100%);
    font-family: "Courier Prime", monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
  }
  .bio h2 { font-size: clamp(26px, 3vw, 32px); }
  .bio p { color: var(--ink-soft); margin-top: 16px; font-size: 16px; }
  .bio .sign {
    margin-top: 26px;
    font-family: "Fraunces", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--navy);
  }

  /* ---------- write-in instructions ---------- */
  .howto { background: var(--paper); }
  .howto-card {
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }
  .howto-card .step { position: relative; padding-left: 46px; }
  .howto-card .num {
    position: absolute; left: 0; top: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--navy-ink);
    font-family: "Courier Prime", monospace;
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  .howto-card h3 { font-size: 16.5px; margin-bottom: 6px; }
  .howto-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
  .howto-note {
    margin-top: 26px;
    font-family: "Courier Prime", monospace;
    font-size: 12px;
    color: var(--ink-faint);
    text-align: center;
  }

  /* ---------- closing cta ---------- */
  .closing { background: var(--clay); color: var(--clay-ink); text-align: center; }
  .closing h2 { color: var(--clay-ink); font-size: clamp(26px, 3.2vw, 36px); }
  .closing p { margin-top: 12px; color: var(--clay-ink); opacity: 0.9; }
  .closing .cta-row { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
  .closing .btn-clay { background: var(--clay-ink); color: var(--clay-deep); }
  .closing .btn-clay:hover { background: #fff; }
  .closing .btn-ghost-navy { border-color: var(--clay-ink); color: var(--clay-ink); }
  .closing .btn-ghost-navy:hover { background: rgba(255,255,255,0.12); }

  /* ---------- footer ---------- */
  footer.site { background: var(--navy-deep); color: var(--navy-ink); }
  footer.site .wrap { padding-top: 56px; padding-bottom: 30px; }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--line-on-navy);
  }
  .foot-grid h4 {
    font-family: "Courier Prime", monospace;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-soft);
    margin: 0 0 14px;
    font-weight: 700;
  }
  .foot-grid p, .foot-grid a { color: var(--navy-ink); opacity: 0.82; font-size: 14px; }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .foot-grid a { text-decoration: none; }
  .foot-grid a:hover { opacity: 1; text-decoration: underline; }
  .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .foot-brand .foot-seal {
    width: 150px; height: 150px;
    opacity: 0; transform: translateY(-34px);
    transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  }
  .foot-brand.in .foot-seal { opacity: 1; transform: translateY(0); }
  .foot-brand-copy { display: flex; flex-direction: column; gap: 7px; }
  .foot-brand .name {
    font-family: "Fraunces", serif; font-size: 24px; font-weight: 600; color: var(--navy-ink); line-height: 1.15;
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path .8s ease .38s, opacity .05s linear .38s;
  }
  .foot-brand.in .name { clip-path: inset(0 0 0 0); opacity: 1; }
  .foot-brand .write-line { width: 190px; height: 10px; }
  .foot-brand .write-line path {
    fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 230; stroke-dashoffset: 230;
    transition: stroke-dashoffset .6s ease 1s;
  }
  .foot-brand.in .write-line path { stroke-dashoffset: 0; }
  .foot-grid p.foot-tagline {
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s ease 1.25s, transform .5s ease 1.25s;
  }
  .foot-brand.in + p.foot-tagline { opacity: 0.82; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .foot-brand .foot-seal, .foot-brand .name, .foot-grid p.foot-tagline { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: inset(0 0 0 0) !important; }
    .foot-brand.in + p.foot-tagline { opacity: 0.82 !important; }
    .foot-brand .write-line path { transition: none !important; stroke-dashoffset: 0 !important; }
  }
  @media (max-width: 860px) {
    .foot-brand .foot-seal { width: 120px; height: 120px; }
  }
  @media (max-width: 560px) {
    .foot-brand .foot-seal { width: 96px; height: 96px; }
  }

  /* ---------- footer: share row ---------- */
  .foot-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 24px;
  }
  .foot-share-label {
    font-family: "Fraunces", serif;
    font-style: italic;
    font-size: 15.5px;
    color: var(--navy-ink);
    opacity: 0.9;
  }
  .share-widget { position: relative; }
  .share-widget .btn svg { width: 16px; height: 16px; }
  .share-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 30;
    background: var(--paper);
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--clay);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }
  .share-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  /* header instance opens downward (there's nothing above it to overlap) */
  .share-widget--nav .share-menu {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateY(-6px);
  }
  .share-widget--nav .share-menu.is-open { transform: none; }
  .share-menu .share-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    opacity: 1;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .share-menu .share-option:hover, .share-menu .share-option:focus-visible { background: var(--paper-alt); color: var(--clay-deep); }
  .share-menu-divider {
    height: 1px;
    background: var(--line);
    margin: 6px 4px;
  }
  .share-menu-label {
    font-family: "Courier Prime", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 6px 12px 2px;
  }
  .foot-legal {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    font-size: 12.5px;
    color: var(--navy-ink);
    opacity: 0.62;
  }

  /* ---------- reveal-on-scroll ---------- */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

  /* ---------- responsive ---------- */
  /* Between the full-width layout and the hamburger breakpoint, the five nav
     links plus three action buttons don't fit on one line. Drop "Volunteer"
     first — it's one click away in the footer's Take Action list and the
     Home page's closing CTA, so nothing is actually lost. */
  @media (max-width: 1180px) {
    .nav-actions .nav-volunteer { display: none; }
  }
  /* Share's dropdown repeats the footer's share options + print materials,
     so it's the next thing to give up room — nothing is lost, it's still
     one scroll away in the footer. */
  @media (max-width: 1010px) {
    .nav-actions .share-widget--nav { display: none; }
  }
  /* A few pixels wider than the shared 860px breakpoint below, so the nav
     links collapse to the hamburger just before "Contribute" alone would
     start crowding the edge. */
  @media (max-width: 880px) {
    nav.primary ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 8px 0;
      background: var(--navy);
      border-top: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 16px 28px rgba(16,22,31,0.35);
      z-index: 90;
    }
    nav.primary.is-open ul { display: flex; }
    nav.primary ul li { width: 100%; }
    nav.primary ul a {
      display: block;
      padding: 14px 24px;
      border-bottom: 1px solid transparent;
      border-left: 3px solid transparent;
    }
    nav.primary ul a:hover,
    nav.primary ul a:focus-visible,
    nav.primary ul a[aria-current="page"] {
      opacity: 1;
      border-bottom-color: transparent;
      border-left-color: var(--brass);
      background: rgba(255,255,255,0.05);
    }
    .nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 4px;
      background: transparent; border: 1.5px solid var(--navy-ink);
      color: var(--navy-ink); cursor: pointer;
    }
    .nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.12); }
  }
  @media (max-width: 860px) {
    .hero .wrap { grid-template-columns: 1fr; padding-top: 44px; }
    .hero-photo { order: -1; aspect-ratio: 16/10; }
    .platform-grid { grid-template-columns: 1fr 1fr; }
    /* Small screens don't have room to wrap text beside the photo, so it
       stacks on top instead of floating. */
    .bio-frame { float: none; width: 100%; max-width: 320px; margin: 0 auto 24px; }
    .why-frame { float: none; width: 100%; max-width: 320px; margin: 0 auto 24px; }
    .howto-card { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .fact-rule .wrap { gap: 30px; }
  }
  @media (max-width: 560px) {
    section { padding: 40px 0; }
    .wrap { padding: 0 20px; }
    .platform-grid { grid-template-columns: 1fr; }
    .plank:nth-child(10) { grid-column: 1; }
    .foot-grid { grid-template-columns: 1fr; }
    .foot-legal { flex-direction: column; }
    .utility .wrap { justify-content: flex-start; gap: 10px 24px; }
  }

/* ================================================================
   SITE REBUILD ADDITIONS — shared across all inner pages
   (Home keeps the existing hero; inner pages get a compact banner)
   ================================================================ */

nav.primary ul a[aria-current="page"] {
  opacity: 1;
  border-color: var(--brass);
}

/* ---------- page banner (inner pages) ---------- */
.page-banner {
  /* The generic `section { padding: 84px 0; }` rule was still landing on
     this section on top of .wrap's own padding below — that doubled-up
     padding (84px + 26px top, 84px + 30px bottom) was the real source of
     the dead space, worth far more than the wrap padding alone. */
  padding: 0;
  background: var(--navy);
  color: var(--navy-ink);
  position: relative;
  overflow: hidden;
}
.page-banner .wrap {
  padding-top: 16px;
  padding-bottom: 18px;
  position: relative;
  z-index: 1;
}
.page-banner h1 {
  color: var(--navy-ink);
  font-size: clamp(23px, 2.6vw, 30px);
  margin-top: 4px;
}
.page-banner .lede {
  margin-top: 6px;
  color: var(--navy-ink);
  opacity: 0.86;
  font-size: 15px;
  max-width: 62ch;
}
.page-banner .hero-hills { opacity: 0.35; }

/* ---------- topics grid + hover/focus preview card ---------- */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.topic-card {
  position: relative;
  display: block;
  text-align: left;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 26px 24px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Inverted to a solid navy card the moment it's active — hover, keyboard
   focus, or clicked open — so there's no ambiguity about which of ten
   near-identical cards the popover underneath belongs to. */
.topic-card:hover,
.topic-card:focus-visible,
.topic-card.is-open {
  background: var(--navy);
  color: var(--navy-ink);
  border-color: var(--navy);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  /* the transform above creates a new stacking context on this card, which
     would otherwise trap the z-index:30 preview popover behind the next
     row of cards (painted later in DOM order) — lift the whole card above
     its siblings so the popover actually shows over them. */
  z-index: 5;
}
.topic-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.topic-card .t-icon {
  display: inline-block;
  width: 34px; height: 34px;
  color: var(--clay-deep);
  margin-bottom: 14px;
  transition: color .15s ease;
}
.topic-card:hover .t-icon,
.topic-card:focus-visible .t-icon,
.topic-card.is-open .t-icon { color: var(--brass-soft); }
.topic-card .t-icon svg { width: 100%; height: 100%; }
.topic-card h3 {
  font-size: 18.5px;
  line-height: 1.3;
  padding-right: 26px;
  transition: color .15s ease;
}
.topic-card:hover h3,
.topic-card:focus-visible h3,
.topic-card.is-open h3 { color: var(--navy-ink); }
.topic-card .t-hint {
  margin-top: 10px;
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.topic-card:hover .t-hint,
.topic-card:focus-visible .t-hint,
.topic-card.is-open .t-hint { color: var(--brass-soft); }
.topic-card .t-hint svg { width: 12px; height: 12px; flex-shrink: 0; }
.topic-card .t-expand-mark {
  position: absolute;
  top: 24px; right: 22px;
  width: 20px; height: 20px;
  color: var(--ink-faint);
  transition: transform .15s ease, color .15s ease;
}
.topic-card.is-open .t-expand-mark { transform: rotate(45deg); color: var(--brass-soft); }
.topic-card:hover .t-expand-mark,
.topic-card:focus-visible .t-expand-mark { color: var(--brass-soft); }

/* the preview popover — appears on hover/focus, before any click. Inverted
   navy to match the active card above it, so the card + popover read as
   one highlighted unit instead of a plain box that could belong to any
   card in the row. */
.t-preview {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 10px);
  z-index: 30;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.topic-card:hover .t-preview,
.topic-card:focus-visible .t-preview,
.topic-card.is-open .t-preview {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.t-preview .t-preview-label {
  font-family: "Courier Prime", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-soft);
  font-weight: 700;
  margin-bottom: 8px;
}
.t-preview ul.t-top3 {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.t-preview ul.t-top3 li {
  padding-left: 20px;
  position: relative;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--navy-ink);
}
.t-preview ul.t-top3 li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass);
}
.t-preview .t-explain {
  color: var(--navy-ink);
  opacity: 0.78;
  font-size: 14px;
  line-height: 1.55;
  border-top: 1px solid var(--line-on-navy);
  padding-top: 12px;
}
.t-preview .t-more-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-ink);
  font-weight: 700;
}
.t-preview .t-more-link svg { width: 11px; height: 11px; }

/* full detail — revealed on click, replaces/expands beneath the card grid */
.topic-detail {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--clay);
  border-radius: 10px;
  padding: 34px 36px;
  display: none;
}
.topic-detail.is-open { display: block; }
.topic-detail .td-quote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px);
  color: var(--navy);
  line-height: 1.4;
  max-width: 62ch;
}
.topic-detail .td-intro {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 68ch;
}
.topic-detail h4 {
  margin-top: 26px;
  font-family: "Courier Prime", monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-deep);
  font-weight: 700;
}
.topic-detail ul.td-full {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 26px;
  max-width: 78ch;
}
.topic-detail ul.td-full li {
  padding-left: 20px;
  position: relative;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.topic-detail ul.td-full li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay);
}
.topic-detail .td-closing {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-style: italic;
  max-width: 68ch;
}
.topic-detail .td-close-btn {
  margin-top: 26px;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: "Public Sans", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 3px;
  cursor: pointer;
}
.topic-detail .td-close-btn:hover { background: rgba(28,37,48,0.06); }

/* ---------- FAQ accordion ---------- */
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.faq-item { background: var(--paper-alt); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 20px 24px;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink);
}
.faq-q .faq-mark { flex-shrink: 0; width: 20px; height: 20px; color: var(--clay); transition: transform .15s ease; }
.faq-item.is-open .faq-q .faq-mark { transform: rotate(45deg); }
.faq-a {
  padding: 0 24px 0;
  max-height: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  transition: max-height .22s ease, padding .22s ease;
}
.faq-item.is-open .faq-a { padding: 0 24px 22px; max-height: 400px; }

/* ---------- FAQ topic jump-nav + grouped sections ---------- */
.faq-jump {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  justify-content: safe center; /* falls back to left-aligned start if the
    row is too wide to fit — "center" alone would let a scrollable flex row
    clip its first chip off the left edge with no way to scroll back to it */
  gap: 7px;
  margin: 0 0 48px;
  padding: 2px 2px 8px;
  list-style: none;
  overflow-x: auto;
}
.faq-jump a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-alt);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.faq-jump a:hover, .faq-jump a:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--navy-ink);
}
.faq-jump a .faq-jump-count {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.faq-jump a:hover .faq-jump-count, .faq-jump a:focus-visible .faq-jump-count { color: var(--brass-soft); }
@media (max-width: 860px) {
  .faq-jump { flex-wrap: wrap; overflow-x: visible; gap: 10px; }
}

.faq-group { scroll-margin-top: 84px; margin-bottom: 48px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
}
.faq-group-head .faq-group-tag {
  font-family: "Courier Prime", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--brass-deep);
}
.faq-group-head h2 {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  margin: 0;
}
.faq-group-blurb {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
}
.faq-back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: "Courier Prime", monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .15s ease;
}
.faq-back-top:hover, .faq-back-top:focus-visible { color: var(--clay); }

/* ---------- simple prose page (About / Why Independent) ---------- */
.page-prose { max-width: 68ch; margin: 0 auto; }
/* Requested wider treatment for the About/Why Independent copy — fills
   most of the viewport instead of sitting in a narrow centered column.
   Higher specificity than plain .page-prose so it wins regardless of
   source order. */
.page-prose.wrap-wide {
  max-width: 1800px;
  width: 80%;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}
.page-prose p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; }
.page-prose .pull {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 27px);
  color: var(--navy);
  line-height: 1.4;
  margin: 34px 0;
  padding-left: 22px;
  border-left: 3px solid var(--clay);
}

/* ---------- persistent footer contact block ---------- */
.foot-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.foot-contact-row a.btn { padding: 10px 18px; font-size: 13.5px; }

@media (max-width: 860px) {
  .topics-grid { grid-template-columns: 1fr; }
  .topic-detail ul.td-full { grid-template-columns: 1fr; }
}

/* ---------- home: platform planks as links to the Issues page ---------- */
a.plank {
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
a.plank:hover { background: var(--paper); transform: translateY(-2px); }
a.plank .plank-go {
  margin-top: auto;
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
}

/* ---------- home: about/why teaser cards ---------- */
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.teaser-card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.teaser-card .pull {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 16px;
}
.teaser-card p.body { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 20px; flex-grow: 1; }
@media (max-width: 860px) {
  .teaser-grid { grid-template-columns: 1fr; }
}