:root{
    --navy-950:#050d1a;
    --navy-900:#0a1628;
    --navy-800:#0f1f38;
    --navy-700:#182d4d;
    --red:#c8102e;
    --red-dark:#9d0a22;
    --gold:#c9a961;
    --gold-light:#e2c98a;
    --ivory:#f7f4ee;
    --paper:#faf8f3;
    --ink:#1a1a1a;
    --muted:#6b7280;
    --line:rgba(255,255,255,0.08);
    --line-dark:rgba(10,22,40,0.12);
    --serif:'Instrument Serif', 'Playfair Display', Georgia, serif;
    --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shadow-lg:0 25px 80px -20px rgba(5,13,26,0.55);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);color:var(--ink);background:var(--paper);
    line-height:1.65;font-size:16px;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-0.01em;line-height:1.15}
  a{color:inherit;text-decoration:none;transition:color .2s ease}
  button{font-family:inherit}

  /* ============ NAV ============ */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
    background:rgba(5,13,26,0.78);backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--line);transition:padding .3s ease, background .3s ease;
  }
  .nav.scrolled{padding:10px 0;background:rgba(5,13,26,0.94)}
  .nav-inner{max-width:1360px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{display:flex;align-items:center;gap:12px;color:#fff}
  .brand-seal{
    width:46px;height:46px;border-radius:50%;
    background:#fff;padding:2px;
    display:grid;place-items:center;flex-shrink:0;
    box-shadow:0 6px 18px rgba(0,0,0,0.3);
  }
  .brand-seal img{width:100%;height:100%;object-fit:contain}
  .brand-seal.fallback{
    background:linear-gradient(135deg,var(--red) 0%, var(--red-dark) 100%);padding:0;
  }
  .brand-seal.fallback::before{
    content:'BC';font-family:var(--serif);font-weight:700;font-size:18px;color:#fff;letter-spacing:-0.02em;
  }
  .brand-text{display:flex;flex-direction:column;line-height:1.05}
  .brand-text .top{font-family:var(--serif);font-weight:700;font-size:16px;color:#fff;letter-spacing:0.01em}
  .brand-text .bot{font-family:var(--sans);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-light);margin-top:3px;font-weight:500}

  .nav-links{display:flex;align-items:center;gap:28px;list-style:none}
  .nav-links a{color:rgba(255,255,255,0.78);font-size:13.5px;font-weight:500;letter-spacing:0.02em;position:relative;padding:6px 0}
  .nav-links a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.7,0,.3,1)}
  .nav-links a:hover{color:#fff}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav-links a.nav-cta{
    display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:2px;
    background:var(--red);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
    border:1px solid var(--red);transition:all .25s ease;margin-left:8px;
  }
  .nav-links a.nav-cta:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px);box-shadow:0 10px 30px -5px rgba(200,16,46,0.5)}
  .nav-links a.nav-cta::after{display:none}
  .nav-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:8px}
  .nav-toggle svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none}

  /* ============ HERO ============ */
  .hero{
    position:relative;min-height:100vh;
    background:
      radial-gradient(ellipse at 20% 30%, rgba(200,16,46,0.15) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 70%, rgba(201,169,97,0.10) 0%, transparent 55%),
      linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
    color:#fff;display:flex;align-items:center;padding:140px 0 80px;overflow:hidden;
  }
  .hero::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
    opacity:0.5;
  }
  .hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:120px;background:linear-gradient(180deg, transparent 0%, var(--navy-950) 100%);pointer-events:none}
  .container{max-width:1360px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:12px;padding:8px 18px;border-radius:100px;
    background:rgba(255,255,255,0.05);border:1px solid rgba(201,169,97,0.35);
    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-light);font-weight:500;margin-bottom:36px;
  }
  .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
  .hero h1{font-size:clamp(48px, 7.5vw, 108px);font-weight:800;line-height:0.95;letter-spacing:-0.035em;margin-bottom:32px;max-width:1100px}
  .hero h1 .accent{font-style:italic;color:var(--gold-light);font-weight:500}
  .hero h1 .stack{display:block}
  .hero-lede{font-size:clamp(17px, 1.5vw, 21px);color:rgba(255,255,255,0.75);max-width:640px;line-height:1.6;font-weight:300;margin-bottom:48px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:80px}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:2px;font-size:14px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;cursor:pointer;transition:all .25s ease;border:1px solid transparent;font-family:inherit}
  .btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
  .btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 15px 40px -10px rgba(200,16,46,0.6)}
  .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.25)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-light)}
  .btn-dark{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
  .btn-dark:hover{background:var(--navy-800);border-color:var(--navy-800);transform:translateY(-2px)}
  .btn svg{width:16px;height:16px}

  .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:48px;border-top:1px solid var(--line)}
  .stat{padding-right:24px}
  .stat-num{font-family:var(--serif);font-size:clamp(36px,4.2vw,54px);font-weight:700;color:#fff;line-height:1;letter-spacing:-0.02em}
  .stat-num .plus{color:var(--gold);font-weight:400}
  .stat-label{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:12px;font-weight:500}

  /* ============ SECTIONS ============ */
  section{padding:120px 0;position:relative}
  .section-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:24px}
  .section-eyebrow::before{content:'';width:36px;height:1px;background:var(--red)}
  .section-title{font-size:clamp(38px,5.5vw,68px);font-weight:700;letter-spacing:-0.025em;line-height:1.05;margin-bottom:24px;max-width:900px}
  .section-title .accent{font-style:italic;color:var(--red);font-weight:500}
  .section-lede{font-size:19px;color:var(--muted);max-width:640px;line-height:1.65;margin-bottom:64px;font-weight:300}

  /* ============ FREEDOM FUND ============ */
  #freedom-fund{position:relative;padding:0;background:var(--navy-950);overflow:hidden}
  .ff-wrap{
    position:relative;
    background:
      radial-gradient(ellipse at 15% 30%, rgba(200,16,46,0.28) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 80%, rgba(201,169,97,0.15) 0%, transparent 55%),
      linear-gradient(135deg, #1a0710 0%, #0a1628 55%, #050d1a 100%);
    padding:110px 0;color:#fff;
    border-top:1px solid rgba(201,169,97,0.15);border-bottom:1px solid rgba(201,169,97,0.15);
  }
  .ff-wrap::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at center, black 20%, transparent 70%);
  }
  .ff-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
  .ff-eyebrow{
    display:inline-flex;align-items:center;gap:14px;padding:8px 20px;border-radius:100px;
    background:rgba(200,16,46,0.15);border:1px solid rgba(200,16,46,0.5);
    font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:28px;
  }
  .ff-eyebrow .live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(200,16,46,0.7);animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,0.7)}70%{box-shadow:0 0 0 12px rgba(200,16,46,0)}100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}}
  .ff-title{font-family:var(--serif);font-size:clamp(42px,5.2vw,72px);font-weight:700;line-height:1.02;letter-spacing:-0.03em;color:#fff;margin-bottom:24px}
  .ff-title .accent{font-style:italic;color:var(--gold-light);font-weight:500}
  .ff-lede{font-size:19px;color:rgba(255,255,255,0.75);line-height:1.65;font-weight:300;margin-bottom:36px;max-width:560px}
  .ff-lede.tight{margin-bottom:16px}
  /* The goal line. Its label uses the site's all-caps Expanded idiom so it reads
     as a heading, which survives the centred mobile layout (a left rule would not). */
  .ff-goal{font-size:19px;color:rgba(255,255,255,0.92);line-height:1.6;font-weight:500;margin-bottom:36px;max-width:560px}
  .ff-goal-label{
    display:block;font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-variation-settings:'wdth' 125,'wght' 900;text-transform:uppercase;
    font-size:11px;letter-spacing:0.14em;color:var(--gold);margin-bottom:7px;
  }
  .ff-benefits{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0}
  .ff-benefits li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:rgba(255,255,255,0.85);line-height:1.5}
  .ff-check{width:22px;height:22px;border-radius:50%;background:var(--red);flex-shrink:0;display:grid;place-items:center;margin-top:2px}
  .ff-check svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}
  .ff-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border:1px solid rgba(201,169,97,0.3);padding:48px 44px;
    box-shadow:0 40px 100px -30px rgba(0,0,0,0.6);position:relative;overflow:hidden;
  }
  .ff-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--red) 0%, var(--gold) 100%)}
  .ff-card-label{font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-light);font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:12px}
  .ff-card-label::after{content:'';flex:1;height:1px;background:rgba(201,169,97,0.25)}
  .ff-price{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
  .ff-price .dollar{font-family:var(--serif);font-size:36px;font-weight:600;color:var(--gold-light);line-height:1;padding-top:8px}
  .ff-price .amount{font-family:var(--serif);font-size:120px;font-weight:800;color:#fff;line-height:0.9;letter-spacing:-0.05em}
  .ff-price .period{font-family:var(--sans);font-size:16px;font-weight:500;color:rgba(255,255,255,0.65);letter-spacing:0.02em}
  .ff-tagline{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-light);margin-bottom:32px;line-height:1.45}
  .ff-cta{
    display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:20px 32px;
    background:var(--red);color:#fff;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
    border:1px solid var(--red);cursor:pointer;transition:all .25s ease;text-decoration:none;
    box-shadow:0 15px 40px -10px rgba(200,16,46,0.5);
  }
  .ff-cta:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 20px 50px -10px rgba(200,16,46,0.7)}
  .ff-cta svg{width:16px;height:16px}
  .ff-alt-amounts{display:flex;gap:8px;margin-top:16px;justify-content:center;flex-wrap:wrap}
  .ff-alt{padding:8px 16px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.15);background:transparent;cursor:pointer;transition:all .2s ease;letter-spacing:0.04em;text-decoration:none;display:inline-block}
  .ff-alt:hover{color:#fff;border-color:var(--gold)}
  .ff-fineprint{font-size:11.5px;color:rgba(255,255,255,0.45);text-align:center;margin-top:20px;letter-spacing:0.02em;line-height:1.5}

  /* ============ CALENDAR ============ */
  #calendar{background:#fff}
  .cal-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
  .cal-panel{background:#fff;border:1px solid var(--line-dark);padding:40px}
  .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line-dark)}
  .cal-month{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--navy-900);letter-spacing:-0.01em}
  .cal-nav{display:flex;gap:8px}
  .cal-nav button{
    width:38px;height:38px;background:var(--paper);border:1px solid var(--line-dark);
    cursor:pointer;display:grid;place-items:center;transition:all .2s ease;
  }
  .cal-nav button:hover{background:var(--navy-900);border-color:var(--navy-900)}
  .cal-nav button:hover svg{stroke:#fff}
  .cal-nav svg{width:14px;height:14px;stroke:var(--navy-900);fill:none;stroke-width:2}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
  .cal-dow{background:var(--navy-900);color:var(--gold-light);text-align:center;padding:12px 4px;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600}
  .cal-day{background:#fff;aspect-ratio:1/1;padding:8px 10px;position:relative;font-size:14px;color:var(--ink);display:flex;flex-direction:column;transition:background .2s ease;cursor:default}
  .cal-day.other{background:#fafafa;color:#c0c0c0}
  .cal-day.today{background:var(--navy-900);color:#fff}
  .cal-day.today .cal-num{color:var(--gold-light);font-weight:700}
  .cal-day.has-event{cursor:pointer}
  .cal-day.has-event:hover{background:var(--paper)}
  .cal-day.has-event.today:hover{background:var(--navy-800)}
  .cal-num{font-family:var(--serif);font-size:15px;font-weight:600}
  .cal-dot{width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:auto;align-self:flex-start}
  .cal-day.today .cal-dot{background:var(--gold)}

  .cal-upcoming h4{font-family:var(--serif);font-size:20px;color:var(--navy-900);margin-bottom:20px;letter-spacing:-0.01em}
  .cal-list{display:flex;flex-direction:column;gap:12px}
  .cal-item{display:flex;gap:20px;padding:20px;background:var(--paper);border-left:3px solid var(--red);transition:all .25s ease;cursor:pointer}
  .cal-item:hover{transform:translateX(4px);border-left-color:var(--gold)}
  .cal-item-date{text-align:center;min-width:56px;flex-shrink:0}
  .cal-item-date .m{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--red);font-weight:700}
  .cal-item-date .d{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1;color:var(--navy-900);margin-top:4px}
  .cal-item-body{flex:1}
  .cal-item-body h5{font-family:var(--serif);font-size:16px;color:var(--navy-900);margin-bottom:4px}
  .cal-item-body p{font-size:13px;color:var(--muted);line-height:1.5}
  .cal-item-meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}

  /* ============ VOTER GUIDE ============ */
  #voter-guide{
    background:linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);color:#fff;overflow:hidden;
  }
  .vg-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  .vg-content .section-eyebrow{color:var(--gold-light)}
  .vg-content .section-eyebrow::before{background:var(--gold)}
  .vg-content h2{color:#fff}
  .vg-content h2 .accent{color:var(--gold-light)}
  .vg-content .section-lede{color:rgba(255,255,255,0.7)}
  .vg-features{list-style:none;padding:0;margin:32px 0 40px;display:flex;flex-direction:column;gap:16px}
  .vg-features li{display:flex;gap:16px;align-items:flex-start;color:rgba(255,255,255,0.85);font-size:15.5px;line-height:1.5}
  .vg-features .num{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold-light);min-width:36px;line-height:1}
  .vg-actions{display:flex;gap:14px;flex-wrap:wrap}
  .vg-mockup{
    position:relative;background:#fff;border-radius:8px;
    box-shadow:0 40px 100px -20px rgba(0,0,0,0.5);overflow:hidden;
    transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);
  }
  .vg-mockup-bar{background:#e5e5e5;padding:10px 14px;display:flex;gap:6px;align-items:center;border-bottom:1px solid #d0d0d0}
  .vg-mockup-bar span{width:11px;height:11px;border-radius:50%;background:#ccc}
  .vg-mockup-bar span:nth-child(1){background:#ff5f57}
  .vg-mockup-bar span:nth-child(2){background:#febc2e}
  .vg-mockup-bar span:nth-child(3){background:#28c840}
  .vg-mockup-url{margin-left:20px;font-size:12px;color:#666;font-family:'SF Mono',Menlo,monospace;background:#fff;padding:4px 12px;border-radius:4px;flex:1;text-align:center}
  .vg-mockup-body{padding:32px 28px;color:var(--ink);min-height:320px}
  .vg-mockup-body h3{font-family:var(--serif);font-size:24px;color:var(--navy-900);margin-bottom:8px}
  .vg-mockup-body .sub{font-size:12px;color:var(--red);letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:20px}
  .vg-mockup-race{padding:14px 0;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center}
  .vg-mockup-race:last-child{border-bottom:1px solid var(--line-dark)}
  .vg-mockup-race .r-office{font-size:12px;color:var(--muted);letter-spacing:0.05em}
  .vg-mockup-race .r-name{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--navy-900);margin-top:2px}
  .vg-mockup-race .r-check{width:28px;height:28px;border-radius:50%;background:var(--red);display:grid;place-items:center}
  .vg-mockup-race .r-check svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none}

  /* ============ MISSION ============ */
  #mission{background:var(--paper)}
  .mission-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:96px;align-items:start}
  .mission-content .creed{padding:40px 44px;border-left:3px solid var(--red);background:#fff;box-shadow:0 20px 60px -30px rgba(10,22,40,0.25);margin-top:40px;position:relative}
  .creed-mark{font-family:var(--serif);font-size:80px;color:var(--red);line-height:0;position:absolute;top:38px;right:32px;opacity:0.15}
  .creed-text{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.6;color:#33383f;font-weight:400;margin-bottom:15px}
  .creed-text:last-child{margin-bottom:0}
  .creed-lead{font-size:22px;line-height:1.45;color:var(--ink);font-weight:500}
  .creed-label{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:20px}
  .creed-attr{margin-top:20px;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .pillars{display:flex;flex-direction:column;gap:32px}
  .pillar{display:flex;gap:20px;align-items:flex-start}
  .pillar-num{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--red);line-height:1;min-width:56px;padding-top:4px;border-right:1px solid var(--line-dark);padding-right:20px}
  .pillar-body h4{font-family:var(--serif);font-size:22px;margin-bottom:10px;color:var(--navy-900)}
  .pillar-body p{color:var(--muted);font-size:15.5px;line-height:1.65}

  /* ============ LEADERSHIP ============ */
  #leadership{background:var(--navy-950);color:#fff;padding:140px 0}
  #leadership .section-eyebrow{color:var(--gold-light)}
  #leadership .section-eyebrow::before{background:var(--gold)}
  #leadership .section-title{color:#fff}
  #leadership .section-title .accent{color:var(--gold-light)}
  #leadership .section-lede{color:rgba(255,255,255,0.6)}
  .officers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .officer{background:var(--navy-900);padding:44px 32px 36px;display:flex;flex-direction:column;position:relative;transition:background .3s ease;min-height:280px}
  .officer:hover{background:var(--navy-800)}
  .officer.chair{background:linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);border-top:2px solid var(--red)}
  .officer.chair::before{content:'CHAIRMAN';position:absolute;top:16px;right:24px;font-size:10px;letter-spacing:0.24em;color:var(--red);font-weight:700}
  .officer-role{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:18px}
  .officer-name{font-family:var(--serif);font-size:26px;font-weight:600;color:#fff;line-height:1.15;margin-bottom:14px;letter-spacing:-0.01em}
  .officer-bio{color:rgba(255,255,255,0.55);font-size:14px;line-height:1.6;margin-top:auto}

  /* ============ PRECINCTS ============ */
  #precincts{background:var(--paper)}
  .precincts-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;margin-bottom:56px}
  .precincts-stats{display:flex;gap:32px;padding:32px;background:#fff;border-left:3px solid var(--red);box-shadow:0 20px 50px -30px rgba(10,22,40,0.25)}
  .prec-stat .n{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--navy-900);line-height:1}
  .prec-stat .l{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:600}
  .precinct-search{display:flex;gap:12px;margin-bottom:32px;align-items:center;flex-wrap:wrap}
  .precinct-search input{
    flex:1;min-width:240px;padding:14px 20px;font-family:var(--sans);font-size:14px;
    border:1px solid var(--line-dark);background:#fff;color:var(--ink);
    transition:border-color .2s ease;
  }
  .precinct-search input:focus{outline:none;border-color:var(--red)}
  .precinct-search .count{font-size:13px;color:var(--muted);font-weight:500}
  .precinct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:56px}
  .precinct{
    padding:16px 20px;background:#fff;border:1px solid var(--line-dark);
    display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;
  }
  .precinct:hover{border-color:var(--navy-900);transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(10,22,40,0.2)}
  .precinct-name{font-family:var(--serif);font-size:15px;color:var(--navy-900);font-weight:600}
  .precinct-status{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}
  .precinct.vacant .precinct-status{background:#e5e5e5}
  .precinct.vacant{background:#fafafa;opacity:0.85}
  .precinct-legend{display:flex;gap:24px;font-size:12px;color:var(--muted);margin-bottom:32px;letter-spacing:0.04em}
  .precinct-legend span{display:inline-flex;align-items:center;gap:8px}
  .precinct-legend .dot{width:8px;height:8px;border-radius:50%}
  .precinct-legend .dot.filled{background:#22c55e}
  .precinct-legend .dot.vacant{background:#e5e5e5;border:1px solid #ccc}

  /* ============ FORMS ============ */
  #executive-committee{background:var(--navy-950);color:#fff;padding:140px 0;position:relative;overflow:hidden}
  #executive-committee::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 80% 20%, rgba(200,16,46,0.12) 0%, transparent 60%);
  }
  #executive-committee .section-eyebrow{color:var(--gold-light)}
  #executive-committee .section-eyebrow::before{background:var(--gold)}
  #executive-committee .section-title{color:#fff}
  #executive-committee .section-title .accent{color:var(--gold-light)}
  #executive-committee .section-lede{color:rgba(255,255,255,0.65)}
  .ec-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;position:relative;z-index:2}
  .ec-info h3{font-family:var(--serif);font-size:26px;color:#fff;margin-bottom:16px;letter-spacing:-0.01em}
  .ec-info p{color:rgba(255,255,255,0.7);font-size:15.5px;line-height:1.7;margin-bottom:24px}
  .ec-requirements{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;margin-top:24px}
  .ec-requirements li{display:flex;gap:12px;font-size:14px;color:rgba(255,255,255,0.8);line-height:1.5}
  .ec-requirements li::before{
    content:'';width:5px;height:5px;border-radius:50%;background:var(--red);
    flex-shrink:0;margin-top:9px;
  }
  .ec-form{
    background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);padding:44px;
    backdrop-filter:blur(10px);
  }
  .ec-form-title{
    font-family:var(--serif);font-size:22px;color:#fff;margin-bottom:6px;letter-spacing:-0.01em;
  }
  .ec-form-sub{font-size:13px;color:var(--gold-light);letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:32px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
  .form-field label{font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);font-weight:600}
  .form-field input, .form-field select, .form-field textarea{
    padding:12px 14px;font-family:var(--sans);font-size:14px;
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
    color:#fff;transition:border-color .2s ease;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none;border-color:var(--gold)}
  .form-field input::placeholder, .form-field textarea::placeholder{color:rgba(255,255,255,0.35)}
  .form-field textarea{min-height:100px;resize:vertical;font-family:inherit;line-height:1.5}
  .form-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:36px}
  .form-check{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,0.7);line-height:1.5;margin:8px 0 24px;cursor:pointer}
  .form-check input{width:16px;height:16px;margin-top:2px;accent-color:var(--red);flex-shrink:0}
  .form-submit{
    width:100%;padding:18px;background:var(--red);color:#fff;border:1px solid var(--red);
    font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
    transition:all .25s ease;
  }
  .form-submit:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px);box-shadow:0 15px 40px -10px rgba(200,16,46,0.5)}

  /* ============ NUCLEUS SIGNUP ============ */
  #signup{background:#fff}
  .signup-band{
    background:linear-gradient(120deg, var(--paper) 0%, #fff 100%);
    border:1px solid var(--line-dark);border-left:4px solid var(--red);
    padding:56px 64px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  }
  .signup-band h3{font-family:var(--serif);font-size:36px;color:var(--navy-900);margin-bottom:12px;letter-spacing:-0.02em;line-height:1.1}
  .signup-band h3 .accent{color:var(--red);font-style:italic;font-weight:500}
  .signup-band p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:440px}
  .signup-form{display:flex;flex-direction:column;gap:12px}
  .signup-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .signup-form input{
    padding:14px 16px;font-family:var(--sans);font-size:14px;color:var(--ink);
    background:#fff;border:1px solid var(--line-dark);transition:border-color .2s ease;
  }
  .signup-form input:focus{outline:none;border-color:var(--red)}
  .signup-form button{
    padding:16px;background:var(--navy-900);color:#fff;border:none;
    font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
    transition:all .25s ease;
  }
  .signup-form button:hover{background:var(--red)}
  .signup-form .nucleus-note{font-size:11px;color:var(--muted);text-align:center;letter-spacing:0.08em;text-transform:uppercase;font-weight:500}

  /* ============ OFFICIALS ============ */
  #officials{background:var(--paper);padding:140px 0}
  .officials-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-dark);margin-bottom:56px}
  .tab{padding:20px 32px;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .25s ease}
  .tab:hover{color:var(--navy-900)}
  .tab.active{color:var(--navy-900);border-bottom-color:var(--red)}
  .officials-panel{display:none;grid-template-columns:repeat(3,1fr);gap:24px}
  .officials-panel.active{display:grid}
  .official{padding:28px 30px;border:1px solid var(--line-dark);transition:all .25s ease;background:#fff}
  .official:hover{border-color:var(--navy-900);transform:translateY(-2px);box-shadow:0 15px 40px -20px rgba(10,22,40,0.2)}
  .official-office{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:12px}
  .official-name{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy-900);margin-bottom:6px;letter-spacing:-0.01em}
  .official-district{font-size:13px;color:var(--muted)}

  /* ============ BREAKFAST ============ */
  #breakfast{
    background:
      radial-gradient(ellipse at 20% 10%, rgba(200,16,46,0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 90%, rgba(201,169,97,0.16) 0%, transparent 55%),
      linear-gradient(180deg, var(--navy-950) 0%, #0a0f1c 100%);
    color:#fff;padding:140px 0;position:relative;overflow:hidden;
  }
  #breakfast::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(ellipse at center, black 25%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, black 25%, transparent 75%);
  }
  #breakfast .container{position:relative;z-index:2}
  #breakfast .section-eyebrow{color:var(--gold-light)}
  #breakfast .section-eyebrow::before{background:var(--gold)}
  .bk-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center;margin-bottom:80px}
  .bk-title{
    font-family:var(--serif);font-size:clamp(44px,5.6vw,80px);font-weight:700;
    line-height:0.98;letter-spacing:-0.03em;color:#fff;margin-bottom:28px;
  }
  .bk-title .accent{font-style:italic;color:var(--gold-light);font-weight:500}
  .bk-lede{
    font-family:var(--serif);font-size:22px;font-style:italic;
    color:var(--gold-light);line-height:1.5;margin-bottom:28px;font-weight:400;max-width:560px;
  }
  .bk-body{color:rgba(255,255,255,0.78);font-size:16.5px;line-height:1.7;max-width:560px;margin-bottom:32px;font-weight:300}
  .bk-body strong{color:#fff;font-weight:500}
  .bk-actions{display:flex;flex-wrap:wrap;gap:14px}

  .bk-ticket{
    background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    border:1px solid rgba(201,169,97,0.35);
    padding:44px 40px;position:relative;overflow:hidden;
    box-shadow:0 40px 100px -30px rgba(0,0,0,0.6);
  }
  .bk-ticket::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--gold) 0%, var(--red) 100%)}
  .bk-ticket-label{
    font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-light);
    font-weight:700;margin-bottom:24px;display:flex;align-items:center;gap:12px;
  }
  .bk-ticket-label::after{content:'';flex:1;height:1px;background:rgba(201,169,97,0.25)}
  .bk-ticket h4{
    font-family:var(--serif);font-size:32px;color:#fff;line-height:1.15;
    letter-spacing:-0.02em;margin-bottom:20px;font-weight:700;
  }
  .bk-details{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
  .bk-details li{display:flex;align-items:flex-start;gap:14px;font-size:14px;color:rgba(255,255,255,0.82);line-height:1.5}
  .bk-details svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px}
  .bk-details strong{color:#fff;display:block;font-weight:600;font-size:14.5px;font-family:var(--sans);letter-spacing:0.02em;margin-bottom:2px}
  .bk-details span.detail-sub{color:rgba(255,255,255,0.55);font-size:12.5px}
  .bk-ticket-cta{
    display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px 24px;
    background:var(--red);color:#fff;font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
    border:1px solid var(--red);cursor:pointer;transition:all .25s ease;text-decoration:none;
    box-shadow:0 15px 40px -10px rgba(200,16,46,0.5);
  }
  .bk-ticket-cta:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 20px 50px -10px rgba(200,16,46,0.7)}
  .bk-ticket-cta svg{width:16px;height:16px}

  /* Notable speakers strip */
  .bk-speakers{
    padding:56px 48px;
    background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border-top:1px solid rgba(201,169,97,0.2);border-bottom:1px solid rgba(201,169,97,0.2);
    margin-bottom:64px;position:relative;
  }
  .bk-speakers-label{
    font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);
    font-weight:700;margin-bottom:8px;text-align:center;
  }
  .bk-speakers-title{
    font-family:var(--serif);font-size:28px;font-weight:600;color:#fff;
    text-align:center;margin-bottom:36px;letter-spacing:-0.01em;
  }
  .bk-speakers-title .accent{color:var(--gold-light);font-style:italic;font-weight:500}
  .bk-speakers-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border-left:1px solid rgba(201,169,97,0.15);
  }
  .bk-speaker{
    padding:20px 28px;text-align:center;
    border-right:1px solid rgba(201,169,97,0.15);
    display:flex;flex-direction:column;justify-content:center;min-height:100px;
  }
  .bk-speaker .cat{font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:6px}
  .bk-speaker .name{font-family:var(--serif);font-size:17px;color:#fff;font-weight:600;letter-spacing:-0.01em;line-height:1.25}

  /* What to expect */
  .bk-expect{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .bk-expect-card{
    padding:32px 28px;background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    transition:all .3s ease;
  }
  .bk-expect-card:hover{border-color:rgba(201,169,97,0.4);transform:translateY(-3px)}
  .bk-expect-num{
    font-family:var(--serif);font-size:32px;font-weight:600;color:var(--gold-light);
    line-height:1;margin-bottom:14px;
  }
  .bk-expect-card h5{font-family:var(--serif);font-size:20px;color:#fff;margin-bottom:8px;letter-spacing:-0.01em}
  .bk-expect-card p{color:rgba(255,255,255,0.65);font-size:14.5px;line-height:1.6}

  /* ============ RESOURCES ============ */
  #resources{background:var(--paper);padding:120px 0}
  .resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .resource{padding:40px 36px;background:#fff;border:1px solid var(--line-dark);transition:all .3s ease;display:flex;flex-direction:column;gap:16px;position:relative}
  .resource:hover{transform:translateY(-4px);box-shadow:0 25px 50px -20px rgba(10,22,40,0.2);border-color:transparent}
  .resource-icon{width:48px;height:48px;border-radius:2px;background:linear-gradient(135deg, var(--navy-800), var(--navy-900));display:grid;place-items:center}
  .resource-icon svg{width:22px;height:22px;stroke:var(--gold-light);fill:none;stroke-width:1.8}
  .resource h4{font-family:var(--serif);font-size:22px;color:var(--navy-900);letter-spacing:-0.01em}
  .resource p{color:var(--muted);font-size:14.5px;line-height:1.6;flex-grow:1}
  .resource-link{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);font-weight:700;display:inline-flex;align-items:center;gap:8px;padding-top:8px}
  .resource-link svg{width:14px;height:14px}

  /* ============ FOOTER ============ */
  footer{background:var(--navy-950);color:rgba(255,255,255,0.7);padding:80px 0 32px}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:64px;margin-bottom:64px}
  .footer-brand{max-width:340px}
  .footer-brand .brand{margin-bottom:20px}
  .footer-brand p{font-size:14px;line-height:1.65;color:rgba(255,255,255,0.55)}
  .footer-col h5{font-family:var(--sans);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:22px}
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .footer-col a{font-size:14.5px;color:rgba(255,255,255,0.65);transition:color .2s ease}
  .footer-col a:hover{color:#fff}
  .footer-contact{font-size:14px;line-height:1.7;color:rgba(255,255,255,0.65)}
  .footer-contact strong{color:#fff;font-weight:500;display:block;margin-bottom:8px;font-family:var(--serif);font-size:16px}
  .footer-bottom{padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  .footer-bottom p{font-size:12.5px;color:rgba(255,255,255,0.45);letter-spacing:0.02em}
  .socials{display:flex;gap:10px}
  .socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);display:grid;place-items:center;transition:all .25s ease}
  .socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
  .socials svg{width:16px;height:16px;fill:#fff}

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1100px){
    .officers{grid-template-columns:repeat(2,1fr)}
    .officials-panel{grid-template-columns:repeat(2,1fr) !important}
    .resources-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:48px}
    .precinct-grid{grid-template-columns:repeat(3,1fr)}
    .ec-layout{grid-template-columns:1fr;gap:56px}
    .vg-grid, .cal-layout, .bk-hero{grid-template-columns:1fr;gap:56px}
    .vg-mockup{transform:none}
    .bk-speakers-grid{grid-template-columns:repeat(2,1fr)}
    .bk-expect{grid-template-columns:1fr;gap:16px}
  }
  /* Nav: hamburger early — 9 items + CTA need >1100px */
  @media (max-width: 1100px){
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(5,13,26,0.98);backdrop-filter:blur(20px);flex-direction:column;padding:24px 32px;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line);max-height:80vh;overflow-y:auto}
    .nav-links.open{display:flex}
    .nav-toggle{display:block}
  }

  /* Phone layout */
  @media (max-width: 820px){
    .hero{padding:120px 0 60px}
    .hero-stats{grid-template-columns:repeat(2,1fr);gap:32px 24px}
    .stat{border-bottom:1px solid var(--line);padding-bottom:24px}
    .mission-grid, .join-grid, .ff-grid, .precincts-intro, .signup-band{grid-template-columns:1fr;gap:40px}
    .signup-band{padding:40px 32px}
    .signup-band .row{grid-template-columns:1fr}
    .ff-wrap{padding:80px 0}
    .ff-card{padding:36px 28px}
    .ff-price .amount{font-size:88px}
    .ff-price .dollar{font-size:28px}
    .officials-panel{grid-template-columns:1fr !important}
    .resources-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:40px}
    section{padding:80px 0}
    #leadership,#officials,#executive-committee,#resources,#calendar,#voter-guide{padding:80px 0}
    .officials-tabs{overflow-x:auto;flex-wrap:nowrap}
    .tab{padding:16px 20px;font-size:12px;white-space:nowrap}
    .container{padding:0 24px}
    .cal-panel{padding:24px 20px}
    .cal-day{font-size:12px;padding:6px 6px}
    .cal-num{font-size:13px}
    .precinct-grid{grid-template-columns:repeat(2,1fr)}
    .form-row{grid-template-columns:1fr}
    .ec-form{padding:32px 24px}
    .bk-ticket{padding:32px 24px}
    .bk-ticket h4{font-size:26px}
    .bk-speakers{padding:36px 24px}
    .bk-speakers-grid{grid-template-columns:1fr}
    .bk-speaker{border-right:none;border-bottom:1px solid rgba(201,169,97,0.15);padding:16px}
  }

  /* ============ SUBPAGE HERO ============ */
  .page-hero{
    background:
      radial-gradient(ellipse at 20% 40%, rgba(200,16,46,0.16) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 70%, rgba(201,169,97,0.10) 0%, transparent 55%),
      linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
    color:#fff;padding:180px 0 90px;position:relative;overflow:hidden;
  }
  .page-hero::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse at center, black 25%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, black 25%, transparent 75%);
  }
  .page-hero .section-eyebrow{color:var(--gold-light)}
  .page-hero .section-eyebrow::before{background:var(--gold)}
  .page-hero h1{
    font-size:clamp(40px,5.6vw,76px);font-weight:700;line-height:1.02;
    letter-spacing:-0.03em;color:#fff;margin-bottom:24px;max-width:900px;
  }
  .page-hero h1 .accent{font-style:italic;color:var(--gold-light);font-weight:500}
  .page-hero p{font-size:19px;color:rgba(255,255,255,0.72);max-width:640px;line-height:1.65;font-weight:300}
  .breadcrumb{
    display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:0.12em;
    text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:28px;font-weight:500;
  }
  .breadcrumb a{color:var(--gold-light)}
  .breadcrumb a:hover{color:#fff}
  .nav-links a.current{color:#fff}
  .nav-links a.current::after{transform:scaleX(1)}

  /* Official card as link */
  a.official{display:block;text-decoration:none}
  a.official:hover .official-name{color:var(--red)}
  .official-name{transition:color .2s ease}
  .official-link{
    font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);
    font-weight:700;margin-top:12px;display:inline-flex;align-items:center;gap:6px;opacity:0;
    transition:opacity .2s ease;
  }
  a.official:hover .official-link{opacity:1}
  .official-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}

  /* ============ PRECINCT OFFICER ROLES ============ */
  #officer-roles{
    background:var(--navy-950);color:#fff;padding:120px 0;position:relative;overflow:hidden;
  }
  #officer-roles::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 15% 20%, rgba(200,16,46,0.14) 0%, transparent 55%),
               radial-gradient(ellipse at 85% 85%, rgba(201,169,97,0.10) 0%, transparent 55%);
  }
  #officer-roles .container{position:relative;z-index:2}
  #officer-roles .section-eyebrow{color:var(--gold-light)}
  #officer-roles .section-eyebrow::before{background:var(--gold)}
  #officer-roles .section-title{color:#fff}
  #officer-roles .section-title .accent{color:var(--gold-light)}
  #officer-roles .section-lede{color:rgba(255,255,255,0.68)}
  .roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:48px}
  .role{
    background:var(--navy-900);padding:36px 32px;display:flex;flex-direction:column;
    transition:background .3s ease;position:relative;min-height:300px;
  }
  .role:hover{background:var(--navy-800)}
  .role.required{border-top:2px solid var(--red)}
  .role.required::before{
    content:'REQUIRED';position:absolute;top:14px;right:22px;
    font-size:9.5px;letter-spacing:0.22em;color:var(--red);font-weight:700;
  }
  .role.optional::before{
    content:'OPTIONAL';position:absolute;top:14px;right:22px;
    font-size:9.5px;letter-spacing:0.22em;color:rgba(255,255,255,0.3);font-weight:700;
  }
  .role-num{
    font-family:var(--serif);font-size:13px;font-weight:600;color:var(--gold);
    letter-spacing:0.14em;margin-bottom:14px;
  }
  .role-name{
    font-family:var(--serif);font-size:25px;font-weight:700;color:#fff;
    line-height:1.15;margin-bottom:8px;letter-spacing:-0.015em;
  }
  .role-tagline{
    font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--gold-light);font-weight:600;margin-bottom:20px;
  }
  .role-duties{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .role-duties li{
    display:flex;gap:11px;font-size:13.5px;color:rgba(255,255,255,0.72);line-height:1.5;
  }
  .role-duties li::before{
    content:'';width:4px;height:4px;border-radius:50%;background:var(--red);
    flex-shrink:0;margin-top:8px;
  }
  .roles-note{
    padding:32px 36px;background:rgba(255,255,255,0.03);
    border-left:3px solid var(--gold);display:flex;gap:20px;align-items:flex-start;
  }
  .roles-note svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px}
  .roles-note p{color:rgba(255,255,255,0.75);font-size:14.5px;line-height:1.65;margin:0}
  .roles-note strong{color:#fff;font-weight:600}
  .roles-note a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
  .roles-note a:hover{color:#fff}

  @media (max-width: 1200px){ .roles-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width: 1100px){
    .roles-grid{grid-template-columns:1fr}
    #officer-roles{padding:80px 0}
    .role{min-height:auto;padding:30px 24px}
    .roles-note{flex-direction:column;gap:14px;padding:24px}
  }

  /* ============ SMS CONSENT ============ */
  .sms-consent{
    border-top:1px solid var(--line-dark);
    padding-top:16px;margin-top:4px;
  }
  .sms-agree{
    display:flex;gap:11px;align-items:flex-start;cursor:pointer;
    font-size:14px;color:var(--ink);font-weight:600;line-height:1.4;
    margin-bottom:10px;
  }
  .sms-agree input[type="checkbox"]{
    width:17px;height:17px;margin-top:1px;accent-color:var(--red);
    flex-shrink:0;cursor:pointer;
  }
  .sms-disclaimer{
    font-size:10.5px;line-height:1.55;color:var(--muted);
    letter-spacing:0.005em;padding-left:28px;
  }
  .sms-disclaimer a{
    color:var(--red);text-decoration:underline;text-underline-offset:2px;font-weight:600;
  }
  .sms-disclaimer a:hover{color:var(--navy-900)}
  .sms-disclaimer strong{color:var(--ink);font-weight:600}

  /* Dark-surface variant (EC form / dark bands) */
  .ec-form .sms-consent{border-top-color:rgba(255,255,255,0.1)}
  .ec-form .sms-agree{color:#fff}
  .ec-form .sms-disclaimer{color:rgba(255,255,255,0.45)}
  .ec-form .sms-disclaimer a{color:var(--gold-light)}
  .ec-form .sms-disclaimer a:hover{color:#fff}
  .ec-form .sms-disclaimer strong{color:rgba(255,255,255,0.75)}

  @media (max-width: 1100px){
    .sms-disclaimer{padding-left:0;margin-top:6px}
  }

  /* ============ LEGAL / PROSE PAGES ============ */
  .legal{background:#fff;padding:90px 0 120px}
  .legal-wrap{max-width:820px;margin:0 auto}
  .legal-updated{
    font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding-bottom:24px;margin-bottom:40px;border-bottom:1px solid var(--line-dark);
  }
  .legal h2{
    font-family:var(--serif);font-size:30px;color:var(--navy-900);
    letter-spacing:-0.02em;margin:48px 0 16px;line-height:1.2;
  }
  .legal h2:first-of-type{margin-top:0}
  .legal h3{
    font-family:var(--serif);font-size:20px;color:var(--navy-900);
    margin:28px 0 10px;letter-spacing:-0.01em;
  }
  .legal p{color:#3a3f47;font-size:16px;line-height:1.75;margin-bottom:16px}
  .legal ul{margin:0 0 20px 0;padding-left:22px;color:#3a3f47}
  .legal li{font-size:15.5px;line-height:1.7;margin-bottom:8px}
  .legal strong{color:var(--navy-900);font-weight:600}
  .legal a{color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:500}
  .legal a:hover{color:var(--navy-900)}
  .legal-callout{
    background:var(--paper);border-left:3px solid var(--red);
    padding:26px 30px;margin:28px 0;
  }
  .legal-callout p{margin:0;font-size:15px}
  .legal-callout p + p{margin-top:12px}

  /* ==========================================================
     MOBILE OPTIMIZATION LAYER
     Appended last so it wins the cascade.
     ========================================================== */

  /* --- Global mobile hygiene --- */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{-webkit-tap-highlight-color:rgba(200,16,46,0.15)}
  img,svg,video{max-width:100%;height:auto}

  /* Fixed nav would otherwise cover anchored section headings. --nav-h is the
     header's live height at the current screen size, kept current by
     assets/anchor-nav.js; 84px is only the fallback before it runs. */
  html{scroll-padding-top:calc(var(--nav-h, 84px) + 12px)}

  /* Nav collapses to hamburger early — 9 items + CTA need >1100px */
  @media (max-width: 1100px){
    /* ---------- NAV: full-width tap rows ---------- */
    .nav{padding:12px 0}
    .nav.scrolled{padding:10px 0}
    .nav-inner{padding:0 20px;gap:12px}
    .brand-seal{width:40px;height:40px}
    .brand-text .top{font-size:15px}
    .brand-text .bot{font-size:8.5px;letter-spacing:0.18em}

    .nav-links{
      padding:8px 0 20px;gap:0;
      box-shadow:0 20px 40px -10px rgba(0,0,0,0.5);
    }
    .nav-links li{width:100%}
    .nav-links li a{
      display:block;width:100%;padding:15px 20px;font-size:16px;
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    .nav-links li a::after{display:none}
    .nav-links li a:active{background:rgba(255,255,255,0.06)}
    .nav-links li:last-child{padding:16px 20px 0}
    .nav-links a.nav-cta{
      display:flex;justify-content:center;width:100%;
      padding:17px 20px;font-size:13.5px;margin-left:0;border-bottom:none;
    }
    .nav-toggle{padding:10px;margin-right:-10px}

  }

  /* Phone/small-tablet type + layout scale */
  @media (max-width: 820px){
    /* ---------- Kill horizontal overflow ---------- */
    .officers{grid-template-columns:1fr}
    .officer{min-height:auto;padding:32px 24px 28px}
    .officer.chair::before,
    .role.required::before,
    .role.optional::before{top:12px;right:20px}

    /* ---------- Touch targets: 44px minimum ---------- */
    .ff-alt{
      min-height:44px;display:inline-flex;align-items:center;justify-content:center;
      flex:1 1 calc(50% - 8px);font-size:13px;
    }
    .ff-alt-amounts{gap:8px}
    .cal-nav button{width:44px;height:44px}
    .tab{min-height:48px}
    .resource-link, .official-link{min-height:44px;align-items:center}

    /* Checkbox hit areas */
    .sms-agree, .form-check{
      padding:10px 0;margin-bottom:4px;align-items:center;
    }
    .sms-agree input[type="checkbox"],
    .form-check input[type="checkbox"]{
      width:22px;height:22px;margin-top:0;
    }
    .sms-agree span, .form-check span{flex:1}

    /* Footer + legal links get real hit areas */
    .footer-col ul{gap:2px}
    .footer-col li a{display:block;padding:11px 0;font-size:15px}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:20px}
    .footer-bottom p{font-size:12px;line-height:1.6}
    .socials a{width:46px;height:46px}
    .socials{gap:12px}

    /* ---------- Forms: 16px prevents iOS zoom-on-focus ---------- */
    .signup-form input,
    .form-field input, .form-field select, .form-field textarea,
    .precinct-search input{
      font-size:16px;padding:14px 16px;
    }
    .signup-form button, .form-submit{min-height:52px;font-size:14px}
    .form-field select{background-position:right 16px center}
    .signup-band{padding:36px 24px}
    .signup-band h3{font-size:28px}
    .sms-disclaimer{font-size:11px;line-height:1.6}

    /* ---------- Buttons ---------- */
    .btn{
      padding:16px 26px;font-size:13px;min-height:52px;
      justify-content:center;width:100%;
    }
    .hero-actions, .vg-actions, .bk-actions{gap:12px;width:100%}
    .hero-actions .btn, .vg-actions .btn, .bk-actions .btn{width:100%}
    .ff-cta, .bk-ticket-cta{min-height:56px;padding:18px 20px;font-size:14px}

    /* ---------- Type scale ---------- */
    .hero h1{font-size:40px;letter-spacing:-0.03em;margin-bottom:24px}
    .hero-lede{font-size:16.5px;margin-bottom:36px}
    .hero-eyebrow{font-size:10.5px;letter-spacing:0.14em;padding:7px 14px;margin-bottom:26px}
    .hero-actions{margin-bottom:56px}
    .stat-num{font-size:34px}
    .stat-label{font-size:10.5px;letter-spacing:0.12em;margin-top:8px}
    .section-title, .ff-title, .bk-title, .page-hero h1{font-size:34px;letter-spacing:-0.025em}
    .section-lede, .ff-lede, .ff-goal, .page-hero p{font-size:16.5px;margin-bottom:40px}
    .bk-lede{font-size:19px}
    .bk-body{font-size:16px}
    .ff-price .amount{font-size:76px}
    .creed{padding:28px 24px}
    .creed-text{font-size:17.5px}
    .creed-mark{font-size:60px;top:30px;right:20px}

    /* ---------- Calendar ---------- */
    .cal-panel{padding:20px 14px}
    .cal-head{margin-bottom:20px;padding-bottom:16px}
    .cal-month{font-size:22px}
    .cal-dow{font-size:9px;letter-spacing:0.1em;padding:9px 2px}
    .cal-day{padding:5px 4px;font-size:12px}
    .cal-num{font-size:13px}
    .cal-dot{width:5px;height:5px}
    .cal-item{padding:16px;gap:14px}
    .cal-item-date{min-width:46px}
    .cal-item-date .d{font-size:26px}
    .cal-item-body h5{font-size:15px}

    /* ---------- Precincts ---------- */
    .precinct-grid{grid-template-columns:1fr;gap:8px}
    .precinct{padding:15px 18px;min-height:52px}
    .precinct-name{font-size:15px}
    .precinct-search{gap:10px}
    .precinct-search input{width:100%;min-width:0}
    .precinct-search .count{font-size:12.5px}
    .precincts-stats{padding:24px;gap:20px;justify-content:space-between}
    .prec-stat .n{font-size:34px}
    .prec-stat .l{font-size:9.5px;letter-spacing:0.12em}

    /* ---------- Officials ---------- */
    .officials-tabs{
      overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;margin-bottom:36px;
    }
    .officials-tabs::-webkit-scrollbar{display:none}
    .official{padding:24px 22px}

    /* ---------- Voter guide mockup ---------- */
    .vg-mockup-body{padding:24px 20px;min-height:auto}
    .vg-mockup-body h3{font-size:20px}
    .vg-mockup-race{padding:12px 0}
    .vg-mockup-url{font-size:10px;margin-left:8px;padding:4px 8px}
    .vg-features li{font-size:15px}

    /* ---------- Breakfast ---------- */
    .bk-hero{margin-bottom:56px}
    .bk-details li{font-size:13.5px}
    .bk-speakers-title{font-size:23px}

    /* ---------- Legal / prose ---------- */
    .legal{padding:60px 0 80px}
    .legal h2{font-size:25px;margin:36px 0 12px}
    .legal h3{font-size:18px}
    .legal p, .legal li{font-size:15.5px}
    .legal-callout{padding:20px 22px}

    /* ---------- Page hero ---------- */
    .page-hero{padding:130px 0 64px}
    .breadcrumb{font-size:11px;margin-bottom:20px}
  }

  /* --- Very small phones --- */
  @media (max-width: 400px){
    .container{padding:0 18px}
    .hero h1{font-size:36px}
    .section-title, .ff-title, .bk-title, .page-hero h1{font-size:30px}
    .ff-price .amount{font-size:66px}
    .ff-card{padding:30px 22px}
    .ff-alt{flex:1 1 100%}
    .cal-day{padding:4px 2px}
    .cal-num{font-size:12px}
    .cal-dow{font-size:8.5px}
    .precincts-stats{flex-direction:column;gap:18px}
    .brand-text .bot{font-size:8px;letter-spacing:0.14em}
  }

  /* --- Landscape phones: reclaim vertical space --- */
  @media (max-width: 900px) and (orientation: landscape){
    .hero{min-height:auto;padding:110px 0 56px}
    .hero-actions{margin-bottom:44px}
    .nav-links{max-height:74vh;overflow-y:auto}
  }

  /* --- Respect reduced motion --- */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:0.01ms !important;animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }

  /* ============ OFFICIALS SUBGROUPS ============ */
  .officials-panel{display:none}
  .officials-panel.active{display:block}
  .off-group{margin-bottom:44px}
  .off-group:last-child{margin-bottom:0}
  .off-group-label{
    display:flex;align-items:center;gap:16px;
    font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--navy-900);font-weight:700;margin-bottom:20px;
  }
  .off-group-label::after{content:'';flex:1;height:1px;background:var(--line-dark)}
  .off-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media (max-width:1100px){ .off-cards{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:820px){ .off-cards{grid-template-columns:1fr;gap:12px} .off-group{margin-bottom:36px} }


  /* ============ TABLET REFINEMENTS (1101-1400) ============ */
  @media (min-width:1101px) and (max-width:1400px){
    .nav-links{gap:20px}
    .nav-links a{font-size:12.5px}
    .nav-links a.nav-cta{padding:13px 22px;font-size:11.5px}
    .officers{grid-template-columns:repeat(2,1fr)}
    .roles-grid{grid-template-columns:repeat(2,1fr)}
    .off-cards{grid-template-columns:repeat(2,1fr)}
    .precinct-grid{grid-template-columns:repeat(3,1fr)}
    .resources-grid{grid-template-columns:repeat(2,1fr)}
  }

  /* Between the hamburger cutoff and desktop, keep multi-col content breathable */
  @media (min-width:821px) and (max-width:1100px){
    .container{padding:0 32px}
    .officers{grid-template-columns:repeat(2,1fr)}
    .roles-grid{grid-template-columns:repeat(2,1fr)}
    .off-cards{grid-template-columns:repeat(2,1fr)}
    .precinct-grid{grid-template-columns:repeat(3,1fr)}
    .resources-grid{grid-template-columns:repeat(2,1fr)}
    .hero-stats{grid-template-columns:repeat(4,1fr)}
    .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
    .btn{width:auto}
    .hero-actions .btn, .vg-actions .btn, .bk-actions .btn{width:auto}
    .signup-band{grid-template-columns:1fr 1fr;padding:48px 44px}
    .bk-speakers-grid{grid-template-columns:repeat(2,1fr)}
    .bk-expect{grid-template-columns:repeat(3,1fr)}
    .cal-layout{grid-template-columns:1.3fr 1fr}
    .officials-panel .off-cards{grid-template-columns:repeat(2,1fr)}
  }


  /* ============ 821-1100: hamburger nav, but desktop-ish layout ============ */
  @media (min-width:821px) and (max-width:1100px){
    .hero{padding:150px 0 80px}
    .page-hero{padding:170px 0 80px}
    .hero h1{font-size:clamp(52px,7vw,76px)}
    .section-title, .ff-title, .bk-title, .page-hero h1{font-size:clamp(36px,5vw,52px)}
    .btn{width:auto}
    .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
    .footer-bottom{flex-direction:row;align-items:center}
    .signup-band{grid-template-columns:1fr 1fr}
    .bk-expect{grid-template-columns:repeat(3,1fr)}
    .cal-layout{grid-template-columns:1.25fr 1fr}
    .vg-grid, .bk-hero, .ff-grid, .mission-grid, .ec-layout{grid-template-columns:1fr 1fr;gap:48px}
    .precincts-intro{grid-template-columns:1.2fr 1fr}
  }


  /* ============ FULL CREED ============ */
  .creed{padding:44px 46px}
  .creed-mark{top:44px;right:34px;opacity:0.12}
  @media (max-width:820px){
    .creed{padding:30px 24px}
    .creed-lead{font-size:19px}
    .creed-text{font-size:16px;margin-bottom:13px}
    .creed-label{font-size:10px;letter-spacing:0.18em;margin-bottom:16px}
    .creed-mark{font-size:54px;top:32px;right:20px}
  }


  /* ============ SUBPAGE SPACING ============ */
  /* Subpages lead with .page-hero, so the first section needs real breathing room. */
  .page-hero + section,
  #executive-committee, #precincts, #resources{
    padding-top:110px;padding-bottom:130px;
  }

  /* --- Executive Committee page --- */
  .ec-layout{gap:88px}
  .ec-form{padding:52px 48px}
  .ec-info{padding-right:8px}
  .ec-info h3{font-size:27px;margin-bottom:18px}
  .ec-info p{margin-bottom:26px}
  .ec-form-sub{margin-bottom:36px}
  .form-field{margin-bottom:22px}
  .form-row{gap:20px;margin-bottom:22px}
  .form-field input, .form-field select, .form-field textarea{padding:14px 16px}
  .form-field textarea{min-height:118px}
  .form-check{margin:16px 0 8px}
  .sms-consent{padding-top:20px;margin-top:12px}
  .form-submit{margin-top:28px}

  @media (min-width:1101px) and (max-width:1400px){
    .ec-layout{gap:64px}
    .ec-form{padding:44px 40px}
  }
  @media (min-width:821px) and (max-width:1100px){
    .page-hero + section,
    #executive-committee, #precincts, #resources{padding-top:96px;padding-bottom:110px}
    .ec-layout{gap:56px}
    .ec-form{padding:40px 36px}
  }
  @media (max-width:820px){
    .page-hero + section,
    #executive-committee, #precincts, #resources{padding-top:64px;padding-bottom:80px}
    .ec-layout{gap:44px}
    .ec-form{padding:32px 26px}
    .ec-info{padding-right:0}
    .ec-info h3{font-size:23px}
    .form-field{margin-bottom:18px}
    .form-row{margin-bottom:18px}
  }
  @media (max-width:400px){
    .ec-form{padding:26px 20px}
    .container{padding:0 20px}
  }


  /* ============ BREAKFAST RUN OF SHOW ============ */
  .bk-runsheet{
    margin:28px 0 30px;padding:24px 26px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(201,169,97,0.18);
  }
  .bk-runsheet-label{
    font-size:10px;letter-spacing:0.26em;text-transform:uppercase;
    color:var(--gold);font-weight:700;margin-bottom:16px;
  }
  .bk-run{list-style:none;margin:0;padding:0;counter-reset:none}
  .bk-run li{
    display:flex;align-items:baseline;gap:16px;
    padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .bk-run li:last-child{border-bottom:none;padding-bottom:0}
  .bk-run li:first-child{padding-top:0}
  .bk-run .t{
    font-family:var(--serif);font-size:19px;font-weight:700;color:var(--gold-light);
    min-width:58px;letter-spacing:-0.01em;flex-shrink:0;
  }
  .bk-run .e{font-size:14.5px;color:rgba(255,255,255,0.82);line-height:1.4}
  .bk-run li:last-child .t{color:rgba(255,255,255,0.45)}
  .bk-run li:last-child .e{color:rgba(255,255,255,0.5)}
  @media (max-width:820px){
    .bk-runsheet{padding:20px 20px;margin:24px 0 26px}
    .bk-run .t{font-size:17px;min-width:52px}
    .bk-run .e{font-size:13.5px}
  }

  /* ============ CHAIRMAN EMAIL BUTTON ============ */
  .officer.chair{padding-bottom:30px}
  .officer-bio{margin-top:auto}
  .officer-mail{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    margin-top:20px;padding:12px 18px;width:100%;
    background:var(--red);color:#fff;
    font-family:var(--sans);font-size:11.5px;font-weight:700;
    letter-spacing:0.11em;text-transform:uppercase;
    border:1px solid var(--red);transition:all .25s ease;
    min-height:44px;
  }
  .officer-mail:hover{
    background:var(--red-dark);border-color:var(--red-dark);color:#fff;
    transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(200,16,46,0.6);
  }
  .officer-mail svg{width:15px;height:15px;flex-shrink:0}
  @media (max-width:820px){
    .officer-mail{margin-top:18px;font-size:11px;padding:13px 16px}
  }


  /* ==========================================================
     INSTRUMENT SERIF NORMALIZATION
     Single-weight display face — never let the browser fake bold.
     Hierarchy comes from size + tracking, not weight.
     ========================================================== */
  h1,h2,h3,h4,h5,
  .hero h1, .section-title, .ff-title, .bk-title, .page-hero h1,
  .officer-name, .official-name, .role-name, .precinct-name,
  .cal-month, .creed-text, .creed-lead, .stat-num, .prec-stat .n,
  .ff-price .amount, .ff-price .dollar, .ff-tagline, .bk-lede,
  .bk-speakers-title, .bk-speaker .name, .bk-ticket h4, .bk-run .t,
  .ec-form-title, .ec-info h3, .signup-band h3, .resource h4,
  .pillar-num, .pillar-body h4, .cal-item-date .d, .cal-item-body h5,
  .vg-mockup-body h3, .vg-mockup-race .r-name, .vg-features .num,
  .legal h2, .legal h3, .brand-text .top, .creed-mark, .role-num,
  .bk-expect-num, .bk-expect-card h5, .footer-contact strong,
  .off-group-label{
    font-weight:400 !important;
    font-synthesis-weight:none;
    -webkit-font-synthesis:none;
  }

  /* Instrument Serif runs small + wide by default — scale up, tighten in. */
  .hero h1{font-size:clamp(52px,7.3vw,104px);letter-spacing:-0.028em;line-height:0.92}
  .section-title, .ff-title, .bk-title, .page-hero h1{
    font-size:clamp(42px,6.2vw,78px);letter-spacing:-0.022em;line-height:1.02;
  }
  .officer-name{font-size:30px;letter-spacing:-0.015em;line-height:1.1}
  .official-name{font-size:25px;letter-spacing:-0.012em}
  .role-name{font-size:28px;letter-spacing:-0.015em}
  .bk-ticket h4{font-size:37px;letter-spacing:-0.02em;line-height:1.08}
  .ec-form-title{font-size:26px;letter-spacing:-0.012em}
  .ec-info h3{font-size:30px;letter-spacing:-0.015em}
  .signup-band h3{font-size:41px;letter-spacing:-0.02em;line-height:1.06}
  .resource h4{font-size:25px;letter-spacing:-0.012em}
  .pillar-body h4{font-size:25px;letter-spacing:-0.012em}
  .bk-speakers-title{font-size:32px;letter-spacing:-0.015em}
  .bk-expect-card h5{font-size:23px;letter-spacing:-0.012em}
  .cal-month{font-size:31px;letter-spacing:-0.015em}
  .legal h2{font-size:34px;letter-spacing:-0.018em}
  .legal h3{font-size:23px;letter-spacing:-0.012em}
  .creed-lead{font-size:25px;letter-spacing:-0.01em}
  .creed-text{font-size:19px;letter-spacing:-0.004em}
  .ff-tagline{font-size:21px;letter-spacing:-0.008em}
  .bk-lede{font-size:24px;letter-spacing:-0.01em}
  .stat-num{font-size:clamp(40px,4.6vw,60px);letter-spacing:-0.03em}
  .ff-price .amount{font-size:132px;letter-spacing:-0.05em}
  .prec-stat .n{font-size:48px;letter-spacing:-0.028em}
  .brand-text .top{font-size:18px;letter-spacing:-0.008em}

  @media (max-width:820px){
    .hero h1{font-size:44px;letter-spacing:-0.026em}
    .section-title, .ff-title, .bk-title, .page-hero h1{font-size:37px}
    .officer-name{font-size:27px}
    .bk-ticket h4{font-size:29px}
    .signup-band h3{font-size:31px}
    .ff-price .amount{font-size:84px}
    .creed-lead{font-size:21px}
    .creed-text{font-size:17px}
    .bk-lede{font-size:20px}
    .legal h2{font-size:27px}
    .ec-info h3{font-size:25px}
    .cal-month{font-size:24px}
  }
  @media (max-width:400px){
    .hero h1{font-size:39px}
    .section-title, .ff-title, .bk-title, .page-hero h1{font-size:32px}
    .ff-price .amount{font-size:72px}
  }


  /* ==========================================================
     ELEPHANT + FLAG MOTIF SYSTEM
     ========================================================== */

  /* ---------- Star-and-stripe rule (section ornament) ---------- */
  .ornament{
    display:flex;align-items:center;justify-content:center;gap:18px;
    margin:0 auto 40px;max-width:340px;
  }
  .ornament::before, .ornament::after{
    content:'';flex:1;height:6px;border-radius:1px;
    background:repeating-linear-gradient(90deg,
      var(--red) 0 10px, transparent 10px 20px);
    opacity:0.55;
  }
  .ornament i{
    width:15px;height:15px;display:block;flex-shrink:0;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23c8102e%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  }
  .ornament.light::before, .ornament.light::after{
    background:repeating-linear-gradient(90deg,
      var(--gold) 0 10px, transparent 10px 20px);
    opacity:0.5;
  }
  .ornament.light i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23c9a961%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E")}

  /* ---------- Elephant watermark ---------- */
  .elephant-mark{
    position:absolute;pointer-events:none;user-select:none;
    background-repeat:no-repeat;background-position:center;background-size:contain;
    
  }

  /* Hero: big elephant bleeding off the right edge */
  /* Freedom Fund */
  .ff-wrap .elephant-mark{
    left:-70px;bottom:-40px;width:400px;height:320px;opacity:0.045;
  }
  /* Breakfast */
  #breakfast .elephant-mark{
    right:-60px;top:8%;width:420px;height:340px;opacity:0.04;
  }
  /* Leadership */
  #leadership .elephant-mark{
    left:50%;top:50%;width:640px;height:520px;
    transform:translate(-50%,-50%);opacity:0.028;
  }
  /* Precinct + EC page heroes */
  .page-hero .elephant-mark{
    right:-50px;bottom:-30px;width:380px;height:300px;opacity:0.055;
  }

  /* ---------- Star field (dark sections) ---------- */
  .starfield{
    position:absolute;inset:0;pointer-events:none;opacity:0.5;
    background-image:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E"),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23c9a961%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E"),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E"),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23c9a961%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E"),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M12%201.6l3%206.7%207.3.7-5.5%204.9%201.6%207.1L12%2017.2%205.6%2021l1.6-7.1L1.7%209l7.3-.7z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat:no-repeat;
    background-size:11px 11px, 8px 8px, 6px 6px, 13px 13px, 7px 7px;
    background-position:
      8% 18%, 22% 62%, 71% 12%, 88% 74%, 46% 88%;
  }
  .starfield.sparse{opacity:0.28}

  /* ---------- Flag stripe accents ---------- */

  /* Thin flag rule used under eyebrows */

  /* ---------- Elephant bullets ---------- */
  .ff-benefits li::marker{content:''}
  .ec-requirements li::before{
     !important;
    width:16px !important;height:13px !important;border-radius:0 !important;
    margin-top:5px !important;opacity:0.85;
  }
  .vg-features .num::after{
    content:'';display:block;width:22px;height:3px;margin-top:6px;
    background:repeating-linear-gradient(90deg,
      var(--gold) 0 5px, transparent 5px 10px);
  }

  /* ---------- Star divider between stat tiles ---------- */
  .hero-stats{position:relative}
  .hero-stats::before{
    content:'';position:absolute;top:-1px;left:0;width:64px;height:3px;
    background:var(--red);
  }

  /* ---------- Officer chair card: flag corner ---------- */
  .officer.chair{overflow:hidden}

  /* ---------- Card ornament: small elephant on resource/role cards ---------- */
  .resource::after, .bk-expect-card::after{
    content:'';position:absolute;right:18px;bottom:16px;
    width:44px;height:35px;opacity:0.06;pointer-events:none;
    
  }
  .bk-expect-card::after{
    opacity:0.07;
  }
  .resource, .bk-expect-card{position:relative;overflow:hidden}

  /* ---------- Footer flag bar ---------- */
  footer{position:relative}
  footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:5px;
    background:repeating-linear-gradient(90deg,
      var(--red) 0 26px, var(--navy-800) 26px 52px);
  }

  /* ---------- Reduced clutter on small screens ---------- */
  @media (max-width:820px){
    #leadership .elephant-mark{width:130vw;height:100vw;opacity:0.022}
    .ff-wrap .elephant-mark, #breakfast .elephant-mark, .page-hero .elephant-mark{
      width:280px;height:225px;opacity:0.035;
    }
    .starfield{opacity:0.3}
    .ornament{max-width:240px;margin-bottom:30px}
    .resource::after, .bk-expect-card::after{width:34px;height:27px;right:12px;bottom:12px}
  }


  /* ==========================================================
     AMERICAN FLAG MOTIFS
     ========================================================== */

  .hero
  #officials
  #signup
  #voter-guide
  .ff-wrap
  #executive-committee

  /* Full-bleed flag stripe band */

  /* Star-spangled corner on dark cards */

  @media (max-width:820px){
    .hero
    #officials
  }

  /* ==========================================================
     BLUR REVEAL ANIMATIONS
     ========================================================== */
  .reveal{
    opacity:0;filter:blur(14px);transform:translateY(26px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1),
               filter .9s cubic-bezier(.16,1,.3,1),
               transform .9s cubic-bezier(.16,1,.3,1);
    will-change:opacity,filter,transform;
  }
  .reveal.in{opacity:1;filter:blur(0);transform:none}

  /* staggered children */
  .reveal-stagger > *{
    opacity:0;filter:blur(12px);transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),
               filter .8s cubic-bezier(.16,1,.3,1),
               transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal-stagger.in > *{opacity:1;filter:blur(0);transform:none}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.14s}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.23s}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.32s}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.41s}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.50s}

  /* hero line-by-line */
  .hero h1 .stack{
    opacity:0;filter:blur(20px);transform:translateY(34px);
    transition:opacity 1.05s cubic-bezier(.16,1,.3,1),
               filter 1.05s cubic-bezier(.16,1,.3,1),
               transform 1.05s cubic-bezier(.16,1,.3,1);
  }
  .hero h1.in .stack{opacity:1;filter:blur(0);transform:none}
  .hero h1.in .stack:nth-child(1){transition-delay:.10s}
  .hero h1.in .stack:nth-child(2){transition-delay:.26s}

  .stat-num{font-variant-numeric:tabular-nums}

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *, .hero h1 .stack{
      opacity:1 !important;filter:none !important;transform:none !important;
      transition:none !important;
    }
  }


  /* ==========================================================
     BCRP SEAL WATERMARK
     Uses the real party seal at very low opacity.
     Renders nothing until assets/seal.png exists — no broken icon.
     ========================================================== */
  .elephant-mark{
    position:absolute;pointer-events:none;user-select:none;
    background-image:url('seal.png');
    background-repeat:no-repeat;background-position:center;background-size:contain;
  }
  .ff-wrap .elephant-mark{
    left:-90px;bottom:-70px;width:400px;height:400px;opacity:0.05;
  }
  #breakfast .elephant-mark{
    right:-70px;top:6%;width:420px;height:420px;opacity:0.045;
  }
  #leadership .elephant-mark{
    left:50%;top:50%;width:660px;height:660px;transform:translate(-50%,-50%);opacity:0.035;
  }
  .page-hero .elephant-mark{
    right:-40px;bottom:-70px;width:360px;height:360px;opacity:0.06;
  }
  /* Card corner seal */
  .resource::after, .bk-expect-card::after{
    content:'';position:absolute;right:16px;bottom:14px;
    width:52px;height:52px;pointer-events:none;
    background:url('seal.png') center/contain no-repeat;
    opacity:0.07;
  }
  .bk-expect-card::after{opacity:0.10}
  .resource, .bk-expect-card{position:relative;overflow:hidden}

  @media (max-width:820px){
    #leadership .elephant-mark{width:120vw;height:120vw;opacity:0.03}
    .ff-wrap .elephant-mark, #breakfast .elephant-mark, .page-hero .elephant-mark{
      width:290px;height:290px;opacity:0.04;
    }
    .resource::after, .bk-expect-card::after{width:40px;height:40px;right:12px;bottom:10px}
  }

  /* ============ MEMBER PERK BADGE ============ */
  .member-perk{
    display:flex;align-items:flex-start;gap:12px;
    padding:15px 18px;margin:0 0 26px;
    background:rgba(201,169,97,0.10);
    border:1px solid rgba(201,169,97,0.35);
    border-left:3px solid var(--gold);
  }
  .member-perk svg{width:19px;height:19px;stroke:var(--gold-light);fill:none;flex-shrink:0;margin-top:1px}
  .member-perk span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.82)}
  .member-perk strong{color:var(--gold-light);font-weight:700}
  .perk-link{
    color:var(--gold-light);font-weight:600;text-decoration:underline;
    text-underline-offset:2px;white-space:nowrap;
  }
  .perk-link:hover{color:#fff}
  @media (max-width:820px){
    .member-perk{padding:13px 15px;margin-bottom:22px}
    .member-perk span{font-size:12.5px}
  }

  /* Voter guide mockup: "see all" link */
  .vg-mockup-more{
    display:block;margin-top:18px;padding-top:14px;
    border-top:1px solid var(--line-dark);
    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
    font-weight:700;color:var(--red);text-align:center;
  }
  .vg-mockup-more:hover{color:var(--navy-900)}

  /* Clip decorative marks at their section, not the body */
  .hero, .ff-wrap, #breakfast, #leadership, .page-hero,
  #officials, #signup, #voter-guide, #executive-committee{
    overflow:hidden;
  }
  .elephant-mark, .starfield{max-width:none}

  /* ==========================================================
     PHOTOGRAPHY
     Drop files in assets/photos/ — see assets/README.md
     ========================================================== */

  /* Full-bleed photo band with navy wash + flag stripe */
  .photo-band{
    position:relative;width:100%;height:clamp(280px,38vw,520px);
    background-size:cover;background-position:center;background-repeat:no-repeat;
    background-color:var(--navy-900);
  }
  .photo-band::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(5,13,26,0.55) 0%, rgba(5,13,26,0.25) 40%, rgba(5,13,26,0.75) 100%);
  }
  .photo-band::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:6px;
    background:repeating-linear-gradient(90deg,
      var(--red) 0 28px, rgba(255,255,255,0.92) 28px 56px);
  }
  .photo-band-caption{
    position:absolute;left:0;right:0;bottom:34px;z-index:2;
    max-width:1360px;margin:0 auto;padding:0 32px;color:#fff;
  }
  .photo-band-caption h3{
    font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);
    letter-spacing:-0.02em;line-height:1.08;margin-bottom:8px;
  }
  .photo-band-caption p{
    font-size:14px;color:rgba(255,255,255,0.72);letter-spacing:0.03em;max-width:520px;
  }

  /* Framed inline photo */
  figure.photo{margin:0;position:relative}
  figure.photo img{
    display:block;width:100%;height:auto;object-fit:cover;
    border:1px solid var(--line-dark);
  }
  figure.photo::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
    background:linear-gradient(90deg,var(--red) 0%,var(--gold) 100%);
  }
  figure.photo figcaption{
    margin-top:12px;font-size:12.5px;color:var(--muted);
    line-height:1.5;letter-spacing:0.02em;
  }
  .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .photo-grid.two{grid-template-columns:repeat(2,1fr)}

  @media (max-width:1100px){ .photo-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:820px){
    .photo-band{height:clamp(220px,52vw,320px)}
    .photo-band-caption{bottom:24px;padding:0 24px}
    .photo-grid, .photo-grid.two{grid-template-columns:1fr;gap:16px}
  }

  /* ============ PRECINCT LIST v2 (official roster + polling places) ============ */
  .precinct-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .precinct{
    align-items:flex-start;padding:18px 20px;gap:14px;
  }
  .precinct-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
  .precinct-name{font-family:var(--serif);font-size:19px;color:var(--navy-900);letter-spacing:-0.01em;line-height:1.15}
  .precinct-venue{font-size:13px;color:var(--ink);font-weight:500;line-height:1.35}
  .precinct-addr{font-size:12px;color:var(--muted);line-height:1.4}
  .precinct-status{margin-top:7px}
  .precinct.vacant{background:#fbfbfa}
  .precinct.vacant .precinct-name{color:#5b6270}
  .precinct-empty{
    grid-column:1/-1;padding:44px;text-align:center;color:var(--muted);
    border:1px solid var(--line-dark);background:#fff;
  }

  .precinct-filters{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
  .prec-filter{
    padding:11px 20px;background:#fff;border:1px solid var(--line-dark);
    font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .2s ease;
    min-height:44px;
  }
  .prec-filter:hover{border-color:var(--navy-900);color:var(--navy-900)}
  .prec-filter.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

  @media (max-width:1100px){ .precinct-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:820px){
    .precinct-grid{grid-template-columns:1fr}
    .precinct-name{font-size:17px}
    .prec-filter{flex:1 1 calc(50% - 8px);padding:11px 12px;font-size:11px}
  }

  /* ============ SCGOP PLATFORM BAND ============ */
  #platform{
    background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-950) 100%);
    color:#fff;padding:0;position:relative;overflow:hidden;
  }
  .platform-inner{
    display:grid;grid-template-columns:1.25fr auto;gap:56px;align-items:center;
    padding:72px 0;position:relative;z-index:2;
  }
  #platform .elephant-mark{
    right:-60px;top:50%;transform:translateY(-50%);
    width:340px;height:340px;opacity:0.05;
  }
  .platform-eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--gold-light);font-weight:700;margin-bottom:18px;
  }
  .platform-eyebrow::before{content:'';width:30px;height:1px;background:var(--gold)}
  .platform-inner h2{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(34px,4.4vw,58px);letter-spacing:-0.022em;
    line-height:1.04;color:#fff;margin-bottom:16px;
  }
  .platform-inner h2 .accent{font-style:italic;color:var(--gold-light)}
  .platform-inner p{
    font-size:17px;color:rgba(255,255,255,0.74);line-height:1.65;
    font-weight:300;max-width:560px;
  }
  .platform-cta{
    display:inline-flex;align-items:center;gap:14px;
    padding:20px 34px;background:var(--red);color:#fff;
    border:1px solid var(--red);white-space:nowrap;
    font-size:13.5px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;
    transition:all .25s ease;box-shadow:0 15px 40px -12px rgba(200,16,46,0.6);
    min-height:56px;
  }
  .platform-cta:hover{
    background:var(--red-dark);border-color:var(--red-dark);
    transform:translateY(-2px);box-shadow:0 22px 50px -12px rgba(200,16,46,0.75);color:#fff;
  }
  .platform-cta svg{width:18px;height:18px;flex-shrink:0}
  .platform-meta{
    font-size:11.5px;color:rgba(255,255,255,0.45);
    letter-spacing:0.08em;text-transform:uppercase;margin-top:12px;text-align:center;
  }
  @media (max-width:1100px){
    .platform-inner{grid-template-columns:1fr;gap:32px;padding:60px 0}
    .platform-cta{width:100%;justify-content:center}
  }
  @media (max-width:820px){
    .platform-inner{padding:52px 0}
    .platform-inner p{font-size:15.5px}
    #platform .elephant-mark{width:240px;height:240px;opacity:0.04}
  }

  /* ==========================================================
     DENSITY PASS — tighten vertical rhythm
     Appended last so it wins the cascade.
     ========================================================== */

  /* --- Section padding: was 120–140px each side --- */
  section{padding:88px 0}
  #leadership, #officials, #breakfast, #calendar,
  #voter-guide, #resources, #executive-committee, #precincts,
  #officer-roles, #signup, #mission{padding:88px 0}
  .page-hero + section,
  #executive-committee, #precincts, #resources{padding-top:80px;padding-bottom:96px}

  /* --- Header block spacing --- */
  .section-title{margin-bottom:18px}
  .section-lede{margin-bottom:44px}
  .section-eyebrow{margin-bottom:18px}
  .ornament{margin-bottom:30px}

  /* --- Hero --- */
  .hero{min-height:auto;padding:132px 0 72px}
  .hero-lede{margin-bottom:36px}
  .hero-actions{margin-bottom:56px}
  .hero-stats{padding-top:36px}
  .hero-eyebrow{margin-bottom:26px}
  .hero h1{margin-bottom:24px}

  /* --- Freedom Fund --- */
  .ff-wrap{padding:80px 0}
  .ff-grid{gap:64px}
  .ff-lede, .ff-goal{margin-bottom:28px}
  .ff-card{padding:38px 36px}
  .ff-tagline{margin-bottom:24px}
  .member-perk{margin-bottom:22px}
  .ff-benefits{gap:12px}

  /* --- Mission / creed --- */
  .mission-grid{gap:64px}
  .creed{padding:34px 36px;margin-top:30px}
  .creed-text{margin-bottom:12px}
  .creed-label{margin-bottom:16px}
  .pillars{gap:24px}
  .pillar-body p{font-size:15px}

  /* --- Leadership: let content set the height --- */
  .officer{min-height:0;padding:32px 28px 28px}
  .officer-name{margin-bottom:10px}
  .officer-role{margin-bottom:14px}
  .officer-mail{margin-top:16px;padding:11px 16px;min-height:42px}

  /* --- Precinct officer roles --- */
  .role{min-height:0;padding:30px 26px}
  .role-duties{gap:8px}
  .roles-grid{margin-bottom:36px}
  .roles-note{padding:26px 28px}

  /* --- Breakfast (was the tallest section) --- */
  .bk-hero{gap:64px;margin-bottom:56px}
  .bk-lede{margin-bottom:22px}
  .bk-body{margin-bottom:22px}
  .bk-ticket{padding:38px 34px}
  .bk-details{gap:12px;margin-bottom:22px}
  .bk-runsheet{margin:22px 0 24px;padding:20px 22px}
  .bk-run li{padding:7px 0}
  .bk-speakers{padding:40px 40px;margin-bottom:44px}
  .bk-speakers-title{margin-bottom:26px}
  .bk-speaker{min-height:84px;padding:16px 22px}
  .bk-expect-card{padding:28px 26px}

  /* --- Calendar --- */
  .cal-layout{gap:44px}
  .cal-panel{padding:30px}
  .cal-head{margin-bottom:22px;padding-bottom:16px}
  .cal-item{padding:16px 18px}
  .cal-list{gap:10px}

  /* --- Voter guide --- */
  .vg-grid{gap:64px}
  .vg-features{margin:26px 0 30px;gap:13px}
  .vg-mockup-body{padding:26px 24px;min-height:0}

  /* --- Officials --- */
  .officials-tabs{margin-bottom:40px}
  .off-group{margin-bottom:34px}
  .off-group-label{margin-bottom:16px}
  .official{padding:22px 24px}

  /* --- Platform band --- */
  .platform-inner{padding:60px 0;gap:48px}

  /* --- EC page --- */
  .ec-layout{gap:64px}
  .ec-form{padding:40px 38px}
  .ec-info p{margin-bottom:20px}
  .form-field{margin-bottom:18px}
  .form-row{margin-bottom:18px}
  .form-field textarea{min-height:96px}

  /* --- Precincts --- */
  .precincts-intro{margin-bottom:40px}
  .precinct-search{margin-bottom:22px}
  .precinct-filters{margin-bottom:22px}
  .precinct{padding:15px 18px}
  .precinct-grid{gap:10px}

  /* --- Resources --- */
  .resource{padding:32px 30px;gap:13px}

  /* --- Signup --- */
  .signup-band{padding:44px 48px}

  /* --- Footer --- */
  footer{padding:64px 0 28px}
  .footer-grid{margin-bottom:48px;gap:48px}

  /* --- Legal --- */
  .legal{padding:70px 0 90px}
  .legal h2{margin:34px 0 12px}

  /* ===== Tablet ===== */
  @media (max-width:1100px){
    section, #leadership, #officials, #breakfast, #calendar,
    #voter-guide, #resources, #executive-committee, #precincts,
    #officer-roles, #signup, #mission{padding:72px 0}
    .page-hero + section,
    #executive-committee, #precincts, #resources{padding-top:68px;padding-bottom:80px}
    .page-hero{padding:150px 0 64px}
    .ff-wrap{padding:70px 0}
    .platform-inner{padding:52px 0}
    .bk-hero{margin-bottom:48px}
    .bk-speakers{margin-bottom:40px}
  }

  /* ===== Mobile ===== */
  @media (max-width:820px){
    section, #leadership, #officials, #breakfast, #calendar,
    #voter-guide, #resources, #executive-committee, #precincts,
    #officer-roles, #signup, #mission{padding:56px 0}
    .page-hero + section,
    #executive-committee, #precincts, #resources{padding-top:52px;padding-bottom:64px}
    .page-hero{padding:118px 0 48px}
    .hero{padding:108px 0 52px}
    .hero-actions{margin-bottom:40px}
    .hero-stats{padding-top:28px;gap:24px 20px}
    .stat{padding-bottom:18px}
    .section-lede, .ff-lede, .ff-goal, .page-hero p{margin-bottom:32px}
    .ff-wrap{padding:56px 0}
    .ff-grid, .mission-grid, .vg-grid, .bk-hero, .cal-layout, .ec-layout{gap:40px}
    .creed{padding:26px 22px;margin-top:24px}
    .bk-speakers{padding:28px 22px;margin-bottom:32px}
    .bk-hero{margin-bottom:40px}
    .platform-inner{padding:44px 0;gap:26px}
    .cal-panel{padding:20px 16px}
    .signup-band{padding:34px 24px}
    .footer-grid{margin-bottom:36px;gap:32px}
    footer{padding:52px 0 24px}
    .legal{padding:52px 0 68px}
  }

  /* ==========================================================
     FREEDOM FUND — COMPACT
     ========================================================== */
  .ff-wrap{padding:64px 0}
  .ff-grid{gap:56px;align-items:center}

  /* Left column */
  .ff-eyebrow{margin-bottom:20px;padding:7px 16px;font-size:10.5px}
  .ff-title{margin-bottom:16px}
  .ff-lede, .ff-goal{font-size:17px;line-height:1.55;margin-bottom:22px;max-width:520px}
  .ff-benefits{gap:10px}
  .ff-benefits li{font-size:14.5px;line-height:1.45;gap:12px}
  .ff-check{width:19px;height:19px;margin-top:1px}
  .ff-check svg{width:10px;height:10px}

  /* Card */
  .ff-card{padding:30px 30px 26px}
  .ff-card-label{margin-bottom:12px;font-size:10px}
  .ff-price{margin-bottom:2px}
  .ff-price .amount{font-size:96px;line-height:0.82}
  .ff-price .dollar{font-size:28px;padding-top:4px}
  .ff-price .period{font-size:14px}
  .ff-tagline{font-size:17px;margin-bottom:16px;line-height:1.35}
  .member-perk{padding:12px 14px;margin-bottom:16px;gap:10px}
  .member-perk svg{width:17px;height:17px}
  .member-perk span{font-size:12.5px;line-height:1.45}
  .ff-cta{padding:16px 24px;min-height:52px;font-size:14px}
  .ff-alt-amounts{margin-top:10px;gap:6px}
  .ff-alt{padding:9px 12px;font-size:11.5px;min-height:38px;flex:1 1 calc(25% - 6px)}
  .ff-fineprint{margin-top:12px;font-size:10.5px;line-height:1.45}

  /* Tablet — stack earlier than the card gets cramped */
  @media (max-width:1100px){
    .ff-wrap{padding:56px 0}
    .ff-grid{gap:44px}
    .ff-price .amount{font-size:84px}
  }

  /* Mobile — the worst offender was 1534px */
  @media (max-width:820px){
    .ff-wrap{padding:44px 0}
    .ff-grid{gap:30px}
    .ff-title{margin-bottom:14px}
    .ff-lede, .ff-goal{font-size:15.5px;line-height:1.5;margin-bottom:18px}
    .ff-benefits{gap:9px}
    .ff-benefits li{font-size:13.5px;line-height:1.4}
    .ff-card{padding:26px 22px 22px}
    .ff-price .amount{font-size:62px}
    .ff-price .dollar{font-size:22px}
    .ff-price .period{font-size:13px}
    .ff-tagline{font-size:15px;margin-bottom:14px}
    .member-perk{padding:10px 12px;margin-bottom:14px}
    .member-perk span{font-size:11.5px}
    .ff-cta{min-height:50px;padding:15px 18px;font-size:13px}
    .ff-alt{flex:1 1 calc(50% - 6px);min-height:40px;font-size:11.5px}
    .ff-fineprint{font-size:10px}
  }
  @media (max-width:400px){
    .ff-price .amount{font-size:56px}
    .ff-alt{flex:1 1 calc(50% - 6px)}   /* was 100% — caused 4 stacked rows */
  }

  /* ==========================================================
     PARTY HIERARCHY
     ========================================================== */
  #hierarchy{background:var(--paper);position:relative;overflow:hidden}
  .hier{position:relative;max-width:920px;margin:0 auto}

  /* vertical spine */
  .hier::before{
    content:'';position:absolute;left:47px;top:26px;bottom:80px;width:2px;
    background:linear-gradient(180deg,
      var(--navy-800) 0%, var(--navy-700) 55%, var(--red) 100%);
    opacity:0.30;
  }

  .tier{
    position:relative;display:grid;grid-template-columns:96px 1fr;
    gap:26px;align-items:start;padding-bottom:30px;
  }
  .tier:last-child{padding-bottom:0}

  .tier-badge{
    width:96px;height:96px;border-radius:50%;
    background:#fff;border:2px solid var(--line-dark);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:relative;z-index:2;flex-shrink:0;text-align:center;line-height:1;
  }
  .tier-badge .abbr{
    font-family:var(--serif);font-size:23px;color:var(--navy-900);
    letter-spacing:-0.02em;font-weight:400;
  }
  .tier-badge .scope{
    font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--muted);font-weight:700;margin-top:5px;
  }
  .tier.is-precinct .tier-badge{
    border-color:var(--red);
    box-shadow:0 0 0 5px rgba(200,16,46,0.10);
  }
  .tier.is-precinct .tier-badge .abbr{color:var(--red)}

  .tier-body{padding-top:6px}
  .tier-level{
    font-size:10px;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--red);font-weight:700;margin-bottom:7px;
  }
  .tier-name{
    font-family:var(--serif);font-weight:400;font-size:29px;
    color:var(--navy-900);letter-spacing:-0.015em;line-height:1.12;margin-bottom:9px;
  }
  .tier-desc{color:var(--muted);font-size:15px;line-height:1.6;max-width:640px}
  .tier-desc strong{color:var(--navy-900);font-weight:600}
  .tier-meta{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;
  }
  .tier-chip{
    font-size:11px;letter-spacing:0.05em;padding:5px 11px;
    background:#fff;border:1px solid var(--line-dark);color:var(--ink);
    font-weight:500;
  }
  .tier.is-precinct .tier-chip{border-color:rgba(200,16,46,0.35);color:var(--red);font-weight:600}

  /* upward representation callout */
  .hier-flow{
    margin-top:38px;padding:30px 34px;
    background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-950) 100%);
    color:#fff;display:flex;gap:22px;align-items:flex-start;position:relative;overflow:hidden;
  }
  .hier-flow::before{
    content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--red);
  }
  .hier-flow-icon{
    width:42px;height:42px;flex-shrink:0;border-radius:50%;
    background:rgba(200,16,46,0.18);border:1px solid rgba(200,16,46,0.5);
    display:grid;place-items:center;
  }
  .hier-flow-icon svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:2.2}
  .hier-flow h4{
    font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;
    letter-spacing:-0.012em;margin-bottom:7px;
  }
  .hier-flow p{color:rgba(255,255,255,0.75);font-size:14.5px;line-height:1.6;margin:0}
  .hier-flow strong{color:var(--gold-light);font-weight:600}

  @media (max-width:820px){
    .hier::before{left:29px;bottom:60px}
    .tier{grid-template-columns:60px 1fr;gap:16px;padding-bottom:24px}
    .tier-badge{width:60px;height:60px}
    .tier-badge .abbr{font-size:15px}
    .tier-badge .scope{font-size:6.5px;letter-spacing:0.14em;margin-top:3px}
    .tier-name{font-size:22px}
    .tier-desc{font-size:14px}
    .tier-body{padding-top:2px}
    .hier-flow{flex-direction:column;gap:14px;padding:24px 22px;margin-top:30px}
    .hier-flow h4{font-size:20px}
  }

  /* ==========================================================
     ARCHIVO TYPE SYSTEM
     Body: Archivo Medium (500)
     All-caps subheaders: Archivo Expanded Black (wdth 125 / wght 900)
     "Archivo Expanded" is not a separate family — it's the wdth axis.
     ========================================================== */
  :root{
    --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  body{
    font-family:var(--sans);
    font-weight:500;                 /* Medium */
    font-stretch:100%;
    font-variation-settings:'wdth' 100;
  }
  p, li, td, th, .tier-desc, .officer-bio, .role-duties li,
  .section-lede, .ff-lede, .bk-body, .hero-lede, .legal p, .legal li,
  .resource p, .pillar-body p, .official-district, .precinct-venue,
  .precinct-addr, .cal-item-body p, .ec-info p, .signup-band p,
  .hier-flow p, .roles-note p, .sms-disclaimer, .ff-benefits li,
  .bk-details li, .vg-features li, .ec-requirements li, .footer-brand p,
  .footer-contact, .platform-inner p, .member-perk span{
    font-weight:500;
  }
  strong, b{font-weight:700}

  /* ---------- All-caps subheaders: Expanded Black ---------- */
  .section-eyebrow,
  .stat-label,
  .officer-role,
  .ff-card-label,
  .ff-eyebrow,
  .bk-ticket-label,
  .bk-runsheet-label,
  .bk-speakers-label,
  .bk-speaker .cat,
  .bk-badge,
  .tier-level,
  .tier-badge .scope,
  .off-group-label,
  .official-office,
  .role-tagline,
  .creed-label,
  .creed-attr,
  .platform-eyebrow,
  .platform-meta,
  .prec-stat .l,
  .form-field label,
  .ec-form-sub,
  .footer-col h5,
  .resource-link,
  .vg-mockup-body .sub,
  .nucleus-note,
  .breadcrumb,
  .event-tag,
  .cal-dow,
  .cal-item-date .m,
  .brand-text .bot,
  .hero-eyebrow,
  .vg-mockup-more,
  .precinct-search .count{
    font-family:var(--sans);
    font-weight:900;                       /* Black */
    font-stretch:125%;                     /* Expanded */
    font-variation-settings:'wdth' 125, 'wght' 900;
    letter-spacing:0.13em;                 /* expanded already adds width */
  }

  /* Slightly tighter tracking where the label is long */
  .off-group-label, .bk-speakers-label, .official-office,
  .tier-level, .ec-form-sub, .role-tagline{letter-spacing:0.11em}
  .brand-text .bot, .tier-badge .scope, .cal-dow{letter-spacing:0.10em}

  /* ---------- Buttons & tabs: expanded, but not full black ---------- */
  .btn, .nav-links a.nav-cta, .ff-cta, .bk-ticket-cta,
  .platform-cta, .form-submit, .signup-form button,
  .officer-mail, .tab, .prec-filter{
    font-family:var(--sans);
    font-weight:800;
    font-stretch:112%;
    font-variation-settings:'wdth' 112, 'wght' 800;
    letter-spacing:0.10em;
  }

  /* ---------- Nav links: medium, normal width ---------- */
  .nav-links a{font-weight:600;font-stretch:100%}

  /* Numerals stay in the serif display face */
  .stat-num, .prec-stat .n, .ff-price .amount, .ff-price .dollar,
  .cal-item-date .d, .tier-badge .abbr, .bk-run .t, .pillar-num,
  .role-num, .vg-features .num, .creed-mark, .bk-expect-num{
    font-family:var(--serif);
  }

  @media (max-width:820px){
    .section-eyebrow, .stat-label, .officer-role, .ff-card-label,
    .tier-level, .off-group-label, .official-office, .footer-col h5{
      letter-spacing:0.10em;
    }
  }


  /* ============ CHAIRMAN BADGE — no collision ============ */
  .officer.chair{position:relative;padding-top:38px}
  .officer.chair::before{
    content:'CHAIRMAN';
    position:absolute;top:0;left:0;right:auto;
    padding:7px 14px 6px;
    background:var(--red);color:#fff;
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-variation-settings:'wdth' 125,'wght' 900;
    font-size:9.5px;letter-spacing:0.16em;line-height:1;
  }
  .officer.chair .officer-role{margin-top:0}

  @media (max-width:820px){
    .officer.chair{padding-top:34px}
    .officer.chair::before{font-size:9px;padding:6px 12px 5px;letter-spacing:0.13em}
  }

  /* Form field helper text */
  .field-help{
    font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5;
    margin-top:7px;font-weight:500;
  }
  .field-help a{
    color:var(--gold-light);text-decoration:underline;text-underline-offset:2px;font-weight:600;
  }
  .field-help a:hover{color:#fff}
  /* Long option lists need a comfortable dropdown */
  .form-field select{max-height:none}
  .form-field select option{background:var(--navy-900);color:#fff;padding:8px}
  .form-field select option:disabled{color:rgba(255,255,255,0.35);font-style:italic}

  /* ============ NEW PRECINCT NOTICE (EC page) ============ */
  .precinct-notice{
    margin-top:34px;padding:30px 32px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.09);
    border-left:3px solid var(--gold);
  }
  .precinct-notice-head{
    display:flex;align-items:center;gap:12px;margin-bottom:14px;
  }
  .precinct-notice-head svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.9;flex-shrink:0}
  .precinct-notice-head h4{
    font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;
    letter-spacing:-0.012em;margin:0;
  }
  .precinct-notice p{
    color:rgba(255,255,255,0.72);font-size:14.5px;line-height:1.65;margin-bottom:13px;
  }
  .precinct-notice p:last-child{margin-bottom:0}
  .precinct-notice strong{color:#fff;font-weight:700}
  .precinct-notice ol{
    margin:0 0 14px;padding-left:0;list-style:none;
    counter-reset:step;display:flex;flex-direction:column;gap:10px;
  }
  .precinct-notice ol li{
    counter-increment:step;position:relative;padding-left:34px;
    font-size:14px;color:rgba(255,255,255,0.78);line-height:1.55;
  }
  .precinct-notice ol li::before{
    content:counter(step);position:absolute;left:0;top:0;
    width:22px;height:22px;border-radius:50%;
    background:var(--red);color:#fff;
    font-family:var(--sans);font-size:11px;font-weight:900;font-stretch:112%;
    display:grid;place-items:center;
  }
  .precinct-notice .cite{
    font-size:12px;color:rgba(255,255,255,0.45);
    padding-top:13px;margin-top:4px;border-top:1px solid rgba(255,255,255,0.08);
  }
  .precinct-notice .cite a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}
  .precinct-notice .cite a:hover{color:#fff}
  @media (max-width:820px){
    .precinct-notice{padding:24px 22px;margin-top:28px}
    .precinct-notice-head h4{font-size:20px}
  }

  /* ==========================================================
     OFFICER CARDS v2 — headshot + hover bio reveal
     ========================================================== */
  .officer{
    position:relative;overflow:hidden;
    padding:0;min-height:0;background:var(--navy-900);
  }
  .officer-photo-wrap{
    position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--navy-800);
  }
  .officer-photo{
    width:100%;height:100%;object-fit:cover;object-position:center 22%;
    display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
    filter:grayscale(0.18) contrast(1.03);
  }
  .officer:hover .officer-photo{transform:scale(1.05);filter:grayscale(0) contrast(1.05)}
  .officer-photo-wrap::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(5,13,26,0) 40%, rgba(5,13,26,0.85) 100%);
  }
  /* Placeholder when no headshot exists */
  .officer-photo-wrap.no-photo{
    display:grid;place-items:center;
    background:
      radial-gradient(circle at 50% 38%, rgba(201,169,97,0.13) 0%, transparent 62%),
      linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  }
  .officer-initials{
    font-family:var(--serif);font-size:52px;color:rgba(201,169,97,0.55);
    letter-spacing:0.02em;line-height:1;
  }

  .officer-meta{padding:20px 24px 24px;position:relative;z-index:2}
  .officer-role{
    font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--gold-light);margin-bottom:8px;
  }
  .officer-name{font-size:25px;margin-bottom:0;line-height:1.12}
  .officer-tease{
    color:rgba(255,255,255,0.5);font-size:13px;line-height:1.5;margin-top:9px;
  }

  /* Hover bio overlay */
  .officer-bio-panel{
    position:absolute;inset:0;z-index:5;
    background:linear-gradient(165deg, rgba(10,22,40,0.975) 0%, rgba(5,13,26,0.99) 100%);
    border-top:2px solid var(--red);
    padding:26px 24px;display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .34s ease, transform .34s cubic-bezier(.2,.7,.3,1), visibility .34s;
    overflow-y:auto;overscroll-behavior:contain;
  }
  .officer:hover .officer-bio-panel,
  .officer:focus-within .officer-bio-panel,
  .officer.open .officer-bio-panel{opacity:1;visibility:visible;transform:none}
  .officer-bio-panel .bp-role{
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--red);margin-bottom:6px;
  }
  .officer-bio-panel .bp-name{
    font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;
    letter-spacing:-0.012em;line-height:1.12;margin-bottom:12px;
    padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .officer-bio-panel p{
    color:rgba(255,255,255,0.78);font-size:13px;line-height:1.62;margin-bottom:10px;font-weight:500;
  }
  .officer-bio-panel p:last-of-type{margin-bottom:0}
  .officer-bio-panel .bp-none{color:rgba(255,255,255,0.45);font-style:italic;font-size:13px}
  .officer-bio-panel::-webkit-scrollbar{width:4px}
  .officer-bio-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2)}

  /* "More" affordance */
  .officer-more{
    position:absolute;right:16px;bottom:16px;z-index:3;
    width:30px;height:30px;border-radius:50%;
    background:rgba(200,16,46,0.9);display:grid;place-items:center;
    transition:opacity .3s ease;pointer-events:none;
  }
  .officer:hover .officer-more{opacity:0}
  .officer-more svg{width:14px;height:14px;stroke:#fff;stroke-width:2.4;fill:none}

  /* Chair variant */
  .officer.chair{padding-top:0}
  .officer.chair::before{z-index:6}
  .officer.chair .officer-photo-wrap::after{
    background:linear-gradient(180deg, rgba(5,13,26,0) 38%, rgba(5,13,26,0.88) 100%);
  }
  .officer-mail{margin:14px 24px 22px;width:calc(100% - 48px)}

  /* Recruiting card (no person) */
  .officer.recruit .officer-photo-wrap{
    background:linear-gradient(160deg, rgba(200,16,46,0.16) 0%, var(--navy-900) 100%);
  }
  .officer.recruit .officer-initials{color:rgba(200,16,46,0.55);font-size:44px}

  @media (max-width:820px){
    .officer-meta{padding:16px 18px 20px}
    .officer-name{font-size:22px}
    .officer-bio-panel{padding:20px 18px}
    .officer-bio-panel .bp-name{font-size:20px}
    .officer-mail{margin:12px 18px 18px;width:calc(100% - 36px)}
  }
  /* Touch devices: hover is unreliable — tap toggles */
  @media (hover:none){
    .officer-more{opacity:1}
    .officer:hover .officer-photo{transform:none}
  }
  /* (vacant-seat styles retained — reusable if a seat opens again) */
  .officer.vacant-seat .officer-photo-wrap{
    background:
      radial-gradient(circle at 50% 40%, rgba(200,16,46,0.18) 0%, transparent 62%),
      linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  }
  .officer.vacant-seat .officer-initials{
    color:rgba(255,255,255,0.22);font-size:44px;letter-spacing:0.06em;
  }
  .officer.vacant-seat::before{
    content:'VACANT';position:absolute;top:0;left:0;z-index:6;
    padding:7px 14px 6px;background:var(--gold);color:var(--navy-950);
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-variation-settings:'wdth' 125,'wght' 900;
    font-size:9.5px;letter-spacing:0.16em;line-height:1;
  }
  .officer.vacant-seat .officer-name{color:rgba(255,255,255,0.62)}
  .officer.vacant-seat .officer-bio-panel{border-top-color:var(--gold)}
  .officer.vacant-seat .officer-bio-panel .bp-role{color:var(--gold-light)}
  .officer.vacant-seat .officer-more{background:rgba(201,169,97,0.92)}
  .officer.vacant-seat .officer-more svg{stroke:var(--navy-950)}
  .bp-cta{
    display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    color:var(--gold-light);font-weight:700;font-size:13px;
    text-decoration:underline;text-underline-offset:3px;
  }
  .bp-cta:hover{color:#fff}

  /* ==========================================================
     VOLUNTEER PAGE
     ========================================================== */
  #volunteer{background:var(--paper)}
  .vol-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}

  .vol-ways{display:flex;flex-direction:column;gap:0}
  .vol-way{
    display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
    padding:22px 0;border-bottom:1px solid var(--line-dark);
  }
  .vol-way:first-child{padding-top:0}
  .vol-way:last-child{border-bottom:none}
  .vol-icon{
    width:52px;height:52px;background:var(--navy-900);
    display:grid;place-items:center;flex-shrink:0;
  }
  .vol-icon svg{width:22px;height:22px;stroke:var(--gold-light);fill:none;stroke-width:1.7}
  .vol-way h3{
    font-family:var(--serif);font-weight:400;font-size:23px;color:var(--navy-900);
    letter-spacing:-0.014em;margin-bottom:5px;line-height:1.15;
  }
  .vol-way p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
  .vol-time{
    display:inline-block;margin-top:8px;font-size:10px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--red);
    font-family:var(--sans);font-weight:900;font-stretch:112%;
  }

  /* Embedded Nucleus form shell */
  .vol-form-card{
    background:#fff;border:1px solid var(--line-dark);
    box-shadow:0 24px 60px -34px rgba(10,22,40,0.32);
    position:relative;overflow:hidden;
  }
  .vol-form-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg, var(--red) 0%, var(--gold) 100%);
  }
  .vol-form-head{
    padding:30px 32px 20px;border-bottom:1px solid var(--line-dark);
    background:linear-gradient(180deg, var(--paper) 0%, #fff 100%);
  }
  .vol-form-head .eyebrow{
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--red);margin-bottom:8px;
  }
  .vol-form-head h2{
    font-family:var(--serif);font-weight:400;font-size:30px;color:var(--navy-900);
    letter-spacing:-0.018em;line-height:1.1;margin-bottom:7px;
  }
  .vol-form-head p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
  .vol-form-body{padding:26px 32px 32px;min-height:340px}
  .vol-form-body iframe{width:100% !important;border:0;display:block}
  .vol-form-fallback{
    padding:34px 0;text-align:center;color:var(--muted);font-size:14px;line-height:1.6;
  }
  .vol-form-fallback a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .vol-form-foot{
    padding:16px 32px;border-top:1px solid var(--line-dark);background:var(--paper);
    font-size:11px;color:var(--muted);text-align:center;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    letter-spacing:0.12em;text-transform:uppercase;
  }

  @media (max-width:1100px){ .vol-layout{grid-template-columns:1fr;gap:48px} }
  @media (max-width:820px){
    .vol-layout{gap:36px}
    .vol-way{grid-template-columns:44px 1fr;gap:14px;padding:18px 0}
    .vol-icon{width:44px;height:44px}
    .vol-icon svg{width:19px;height:19px}
    .vol-way h3{font-size:20px}
    .vol-form-head{padding:24px 20px 16px}
    .vol-form-head h2{font-size:25px}
    .vol-form-body{padding:20px 18px 24px}
    .vol-form-foot{padding:14px 18px}
  }

  /* ==========================================================
     HERO v2 — two-column with newsletter capture
     ========================================================== */
  .hero-grid{
    display:grid;grid-template-columns:1.12fr 0.88fr;
    gap:64px;align-items:center;
  }
  .hero-copy{min-width:0}
  .hero .hero-lede{margin-bottom:30px}
  .hero-actions{margin-bottom:0}

  /* Signup card in the hero */
  .hero-signup{
    background:linear-gradient(180deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.02) 100%);
    border:1px solid rgba(201,169,97,0.32);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 40px 90px -34px rgba(0,0,0,0.7);
    position:relative;overflow:hidden;
  }
  .hero-signup::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
    background:linear-gradient(90deg, var(--red) 0%, var(--gold) 100%);
  }
  .hero-signup-head{
    padding:24px 26px 16px;border-bottom:1px solid rgba(255,255,255,0.09);
  }
  .hero-signup-head .eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--gold-light);margin-bottom:9px;
  }
  .hero-signup-head .eyebrow .live-dot{
    width:6px;height:6px;border-radius:50%;background:var(--red);
    box-shadow:0 0 0 0 rgba(200,16,46,0.7);animation:pulse 2s infinite;
  }
  .hero-signup-head h2{
    font-family:var(--serif);font-weight:400;font-size:27px;color:#fff;
    letter-spacing:-0.016em;line-height:1.12;margin-bottom:6px;
  }
  .hero-signup-head p{
    color:rgba(255,255,255,0.62);font-size:13px;line-height:1.5;margin:0;font-weight:500;
  }
  .hero-signup-body{padding:20px 26px 24px;max-height:none}
  .hero-signup-foot{
    padding:12px 26px;border-top:1px solid rgba(255,255,255,0.08);
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
    color:rgba(255,255,255,0.34);text-align:center;
  }

  /* Nucleus form fields on a dark surface */
  .hero-signup-body input[type="text"],
  .hero-signup-body input[type="email"],
  .hero-signup-body input[type="tel"],
  .hero-signup-body select,
  .hero-signup-body textarea{
    background:rgba(255,255,255,0.07) !important;
    border:1px solid rgba(255,255,255,0.16) !important;
    color:#fff !important;
    font-family:var(--sans) !important;font-size:15px !important;font-weight:500 !important;
    border-radius:0 !important;padding:11px 13px !important;
  }
  .hero-signup-body input::placeholder, .hero-signup-body textarea::placeholder{
    color:rgba(255,255,255,0.36) !important;
  }
  .hero-signup-body input:focus, .hero-signup-body select:focus, .hero-signup-body textarea:focus{
    outline:none !important;border-color:var(--gold) !important;
  }
  .hero-signup-body label,
  .hero-signup-body .form-label{
    color:rgba(255,255,255,0.72) !important;
    font-family:var(--sans) !important;font-size:11px !important;
    font-weight:900 !important;font-stretch:112% !important;
    letter-spacing:0.11em !important;text-transform:uppercase !important;
  }
  .hero-signup-body button,
  .hero-signup-body input[type="submit"]{
    background:var(--red) !important;color:#fff !important;
    border:1px solid var(--red) !important;border-radius:0 !important;
    font-family:var(--sans) !important;font-size:13px !important;
    font-weight:900 !important;font-stretch:112% !important;
    letter-spacing:0.12em !important;text-transform:uppercase !important;
    padding:14px 22px !important;min-height:50px !important;
    width:100% !important;cursor:pointer;transition:background .25s ease;
  }
  .hero-signup-body button:hover,
  .hero-signup-body input[type="submit"]:hover{background:var(--red-dark) !important}
  .hero-signup-body a{color:var(--gold-light) !important}
  .hero-signup-body p, .hero-signup-body span, .hero-signup-body div{
    color:rgba(255,255,255,0.72);
  }
  .hero-signup-fallback{padding:26px 0;text-align:center;color:rgba(255,255,255,0.6);font-size:13.5px;line-height:1.6}
  .hero-signup-fallback a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;font-weight:700}

  /* Seal shifts behind the copy so the card stays clean */

  @media (max-width:1100px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-signup{max-width:560px}
  }
  @media (max-width:820px){
    .hero-grid{gap:32px}
    .hero-signup{max-width:none}
    .hero-signup-head{padding:20px 20px 14px}
    .hero-signup-head h2{font-size:23px}
    .hero-signup-body{padding:18px 20px 20px}
    .hero-signup-foot{padding:11px 20px}
    .hero-signup-body input[type="text"],
    .hero-signup-body input[type="email"],
    .hero-signup-body input[type="tel"],
    .hero-signup-body select{font-size:16px !important}  /* no iOS zoom */
  }

  /* Nucleus/SurveyJS internals — dark-surface theming for the hero card */
  .hero-signup-body .sd-btn,
  .hero-signup-body .sd-navigation__complete-btn{
    background:var(--red) !important;color:#fff !important;
    border:1px solid var(--red) !important;border-radius:0 !important;box-shadow:none !important;
    font-family:var(--sans) !important;font-size:13px !important;
    font-weight:900 !important;font-stretch:112% !important;
    letter-spacing:0.12em !important;text-transform:uppercase !important;
    padding:15px 22px !important;min-height:50px !important;width:100% !important;cursor:pointer;
  }
  .hero-signup-body .sd-btn:hover{background:var(--red-dark) !important}
  .hero-signup-body .sd-root-modern,
  .hero-signup-body .sd-container-modern,
  .hero-signup-body .sd-body,
  .hero-signup-body .sd-page,
  .hero-signup-body .sd-question,
  .hero-signup-body .sd-element{background:transparent !important;box-shadow:none !important;padding-left:0 !important;padding-right:0 !important}
  .hero-signup-body .sd-input{background:rgba(255,255,255,0.07) !important;color:#fff !important;box-shadow:none !important;border:1px solid rgba(255,255,255,0.16) !important}
  .hero-signup-body .sd-item__control-label,
  .hero-signup-body .sd-question__title,
  .hero-signup-body .sd-title{color:rgba(255,255,255,0.85) !important}
  .hero-signup-body .sd-description,
  .hero-signup-body .sd-question__description{color:rgba(255,255,255,0.5) !important}
  .hero-signup-body .sd-checkbox__control:checked + .sd-checkbox__decorator{background:var(--red) !important;border-color:var(--red) !important}

  /* Same treatment for the volunteer page (light surface) */
  .vol-form-body .sd-btn,
  .vol-form-body .sd-navigation__complete-btn{
    background:var(--red) !important;color:#fff !important;
    border:1px solid var(--red) !important;border-radius:0 !important;box-shadow:none !important;
    font-family:var(--sans) !important;font-size:13px !important;
    font-weight:900 !important;font-stretch:112% !important;
    letter-spacing:0.12em !important;text-transform:uppercase !important;
    padding:15px 22px !important;min-height:50px !important;width:100% !important;cursor:pointer;
  }
  .vol-form-body .sd-btn:hover{background:var(--red-dark) !important}
  .vol-form-body .sd-root-modern,
  .vol-form-body .sd-container-modern,
  .vol-form-body .sd-body,
  .vol-form-body .sd-page,
  .vol-form-body .sd-element{background:transparent !important;box-shadow:none !important;padding-left:0 !important;padding-right:0 !important}

  /* Compact the hero signup card (Nucleus ships a long SMS disclaimer) */
  .hero-grid{grid-template-columns:1.18fr 0.82fr;gap:56px}
  .hero-signup-body{padding:16px 22px 20px}
  .hero-signup-head{padding:20px 22px 14px}
  .hero-signup-head h2{font-size:24px}
  .hero-signup-head p{font-size:12.5px}
  .hero-signup-body .sd-input{padding:9px 12px !important;font-size:14px !important}
  .hero-signup-body .sd-question{margin-bottom:10px !important}
  .hero-signup-body .sd-question__title,
  .hero-signup-body .sd-item__control-label{font-size:10.5px !important;letter-spacing:0.1em !important}
  /* the long TCPA paragraph */
  .hero-signup-body p,
  .hero-signup-body .sd-description,
  .hero-signup-body .sd-question__description{
    font-size:9.5px !important;line-height:1.45 !important;
    color:rgba(255,255,255,0.42) !important;margin-top:6px !important;
  }
  .hero-signup-body .sd-btn{padding:13px 20px !important;min-height:46px !important;font-size:12px !important}
  .hero-signup-foot{padding:10px 22px;font-size:9px}

  @media (max-width:1100px){ .hero-grid{grid-template-columns:1fr} }

  /* Trim the hero signup ~10% */
  .hero-signup-head{padding:17px 20px 12px}
  .hero-signup-head h2{font-size:22px;margin-bottom:5px}
  .hero-signup-head p{font-size:12px;line-height:1.45}
  .hero-signup-head .eyebrow{margin-bottom:7px;font-size:9px}
  .hero-signup-body{padding:14px 20px 17px}
  .hero-signup-body .sd-input{padding:8px 11px !important;font-size:13.5px !important}
  .hero-signup-body .sd-question{margin-bottom:8px !important}
  .hero-signup-body .sd-question__title,
  .hero-signup-body .sd-item__control-label{font-size:10px !important;margin-bottom:3px !important}
  .hero-signup-body p,
  .hero-signup-body .sd-description,
  .hero-signup-body .sd-question__description{font-size:8.5px !important;line-height:1.4 !important;margin-top:5px !important}
  .hero-signup-body .sd-btn{padding:12px 18px !important;min-height:42px !important;font-size:11.5px !important}
  .hero-signup-foot{padding:9px 20px;font-size:8.5px}
  @media (max-width:820px){
    .hero-signup-body .sd-input{font-size:16px !important;padding:10px 12px !important}
  }

  /* Scale the embedded Nucleus form to 90%.
     `zoom` (not transform) so the container height reflows with it. */
  .hero-signup-body embed-forms{
    zoom:0.9;
    display:block;
  }
  /* Safari <17 / older engines that ignore zoom on custom elements */
  @supports not (zoom: 1){
    .hero-signup-body embed-forms{
      transform:scale(0.9);transform-origin:top left;
      width:111.11%;margin-bottom:-10%;
    }
  }
  /* Keep inputs at 16px effective on mobile so iOS doesn't zoom on focus
     (0.9 zoom × 17.8px ≈ 16px) */
  @media (max-width:820px){
    .hero-signup-body .sd-input{font-size:17.8px !important}
  }

  /* ============ DOCUMENT LINK CARD (mission section) ============ */
  .doc-link{
    display:flex;align-items:center;gap:18px;
    margin-top:22px;padding:20px 22px;
    background:#fff;border:1px solid var(--line-dark);border-left:3px solid var(--red);
    transition:all .25s ease;
  }
  .doc-link:hover{
    border-left-color:var(--gold);transform:translateX(3px);
    box-shadow:0 16px 36px -24px rgba(10,22,40,0.34);
  }
  .doc-link-icon{
    width:46px;height:46px;flex-shrink:0;
    background:linear-gradient(150deg, var(--navy-800), var(--navy-950));
    display:grid;place-items:center;
  }
  .doc-link-icon svg{width:21px;height:21px;stroke:var(--gold-light);fill:none;stroke-width:1.7}
  .doc-link-body{flex:1;min-width:0}
  .doc-link-kicker{
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--red);margin-bottom:4px;
  }
  .doc-link-title{
    font-family:var(--serif);font-weight:400;font-size:21px;color:var(--navy-900);
    letter-spacing:-0.014em;line-height:1.15;margin-bottom:3px;
  }
  .doc-link-meta{font-size:12px;color:var(--muted);line-height:1.4}
  .doc-link-arrow{
    width:34px;height:34px;flex-shrink:0;border-radius:50%;
    border:1px solid var(--line-dark);display:grid;place-items:center;
    transition:all .25s ease;
  }
  .doc-link:hover .doc-link-arrow{background:var(--red);border-color:var(--red)}
  .doc-link-arrow svg{width:14px;height:14px;stroke:var(--navy-900);fill:none;stroke-width:2}
  .doc-link:hover .doc-link-arrow svg{stroke:#fff}
  @media (max-width:820px){
    .doc-link{padding:16px 16px;gap:13px;margin-top:18px}
    .doc-link-icon{width:40px;height:40px}
    .doc-link-title{font-size:18px}
    .doc-link-arrow{width:30px;height:30px}
  }

  /* ==========================================================
     NAV v3 — hamburger at every breakpoint, CTA always visible
     ========================================================== */
  .nav-inner{position:relative;gap:20px}

  .nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}

  /* Freedom Fund CTA always in the bar */
  .nav-right .nav-cta{
    display:inline-flex;align-items:center;justify-content:center;
    padding:13px 26px;border-radius:2px;background:var(--red);color:#fff;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
    border:1px solid var(--red);white-space:nowrap;min-height:44px;
    transition:all .25s ease;
  }
  .nav-right .nav-cta:hover{
    background:var(--red-dark);border-color:var(--red-dark);
    transform:translateY(-1px);box-shadow:0 10px 28px -6px rgba(200,16,46,0.55);
  }
  .nav-right .nav-cta::after{display:none}

  /* Burger button — visible at ALL widths */
  .nav-toggle{
    display:grid !important;place-items:center;
    width:46px;height:46px;padding:0;
    background:transparent;border:1px solid rgba(255,255,255,0.18);
    cursor:pointer;transition:all .25s ease;flex-shrink:0;
  }
  .nav-toggle:hover{border-color:var(--gold);background:rgba(255,255,255,0.05)}
  .burger{display:block;width:19px;height:13px;position:relative}
  .burger span{
    position:absolute;left:0;width:100%;height:2px;background:#fff;border-radius:2px;
    transition:transform .3s cubic-bezier(.7,0,.3,1), opacity .2s ease, width .3s ease;
  }
  .burger span:nth-child(1){top:0}
  .burger span:nth-child(2){top:50%;margin-top:-1px;width:75%}
  .burger span:nth-child(3){bottom:0}
  .nav-toggle[aria-expanded="true"] .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .burger span:nth-child(2){opacity:0;width:0}
  .nav-toggle[aria-expanded="true"] .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* Dropdown panel — same treatment at every width */
  .nav-links{
    display:none !important;
    position:absolute;top:calc(100% + 1px);right:0;left:auto;
    width:min(320px, calc(100vw - 40px));
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px 0 14px;
    background:rgba(5,13,26,0.985);
    backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 30px 70px -18px rgba(0,0,0,0.7);
    max-height:78vh;overflow-y:auto;overscroll-behavior:contain;
  }
  .nav-links.open{display:flex !important}
  .nav-links li{width:100%}
  .nav-links li a{
    display:block;width:100%;padding:13px 22px;
    font-family:var(--sans);font-weight:600;font-size:15px;
    color:rgba(255,255,255,0.82);letter-spacing:0.01em;border-bottom:none;
  }
  .nav-links li a::after{display:none}
  .nav-links li a:hover{background:rgba(255,255,255,0.06);color:#fff}
  .nav-links li a.current{color:var(--gold-light);box-shadow:inset 3px 0 0 var(--red)}
  .nav-links li:last-child a{border-bottom:none}

  @media (max-width:820px){
    .nav-inner{gap:12px;padding:0 18px}
    .nav-right{gap:9px}
    .nav-right .nav-cta{padding:12px 15px;font-size:10.5px;letter-spacing:0.07em}
    .nav-toggle{width:44px;height:44px}
    .nav-links{width:calc(100vw - 36px);right:0}
  }
  @media (max-width:400px){
    .nav-right .nav-cta{padding:11px 11px;font-size:9.5px}
    .brand-text .top{font-size:14px}
  }

  /* ============ BRAND — larger seal + wordmark ============ */
  .nav{padding:14px 0}
  .nav.scrolled{padding:10px 0}
  .brand{gap:15px}
  .brand-seal{
    width:62px;height:62px;padding:2px;
    box-shadow:0 8px 22px rgba(0,0,0,0.34);
  }
  .brand-text .top{
    font-size:22px;letter-spacing:-0.012em;line-height:1.02;
  }
  .brand-text .bot{
    font-size:10.5px;letter-spacing:0.2em;margin-top:5px;
  }
  .nav.scrolled .brand-seal{width:54px;height:54px}
  .nav.scrolled .brand-text .top{font-size:20px}
  .nav.scrolled .brand-text .bot{font-size:9.5px}

  @media (max-width:820px){
    .brand{gap:11px}
    .brand-seal{width:50px;height:50px}
    .brand-text .top{font-size:17px}
    .brand-text .bot{font-size:8.5px;letter-spacing:0.15em;margin-top:4px}
    .nav.scrolled .brand-seal{width:46px;height:46px}
    .nav.scrolled .brand-text .top{font-size:16px}
  }
  @media (max-width:400px){
    .brand-seal{width:44px;height:44px}
    .brand-text .top{font-size:15px}
    .brand-text .bot{font-size:7.5px;letter-spacing:0.12em}
  }

  /* Very small phones — keep the header from cramping */
  @media (max-width:400px){
    .nav-inner{gap:8px;padding:0 14px}
    .brand{gap:9px}
    .brand-seal{width:40px;height:40px}
    .brand-text .top{font-size:13.5px;letter-spacing:-0.01em}
    .brand-text .bot{font-size:6.5px;letter-spacing:0.1em;margin-top:3px}
    .nav-right{gap:7px}
    .nav-right .nav-cta{padding:10px 9px;font-size:9px;letter-spacing:0.05em;min-height:40px}
    .nav-toggle{width:40px;height:40px}
    .burger{width:17px;height:12px}
  }
  @media (max-width:340px){
    /* drop the subtitle line so the seal + name + CTA still fit */
    .brand-text .bot{display:none}
    .brand-text .top{font-size:13px}
    .nav-right .nav-cta{font-size:8.5px;padding:10px 8px}
  }

  /* ==========================================================
     HERO VIDEO BACKGROUND
     ========================================================== */
  .hero{position:relative;isolation:isolate}
  .hero-video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
    z-index:0;pointer-events:none;
    opacity:0;transition:opacity 1.2s ease;
    filter:saturate(0.85) contrast(1.05);
  }
  .hero-video.ready{opacity:0.30}
  /* Navy + red wash so the headline stays readable over the footage */
  .hero-video-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg, rgba(5,13,26,0.86) 0%, rgba(5,13,26,0.72) 45%, rgba(5,13,26,0.93) 100%),
      radial-gradient(ellipse at 22% 32%, rgba(200,16,46,0.20) 0%, transparent 58%),
      radial-gradient(ellipse at 85% 70%, rgba(201,169,97,0.10) 0%, transparent 55%);
  }
  /* Everything above the video */
  .hero .container,
  .hero .starfield{position:relative;z-index:2}
  .hero .starfield{z-index:1}

  /* Reduced motion: hold the poster frame, no playback */
  @media (prefers-reduced-motion: reduce){
    .hero-video{display:none}
    .hero{
      background-image:
        linear-gradient(180deg, rgba(5,13,26,0.88) 0%, rgba(5,13,26,0.76) 45%, rgba(5,13,26,0.94) 100%),
        url('video/hero-flag-poster.jpg');
      background-size:cover;background-position:center;
    }
  }

  /* ==========================================================
     MOBILE — center the hero + section content
     ========================================================== */
  @media (max-width:820px){
    /* Hero */
    .hero-grid{justify-items:center}
    .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
    .hero h1{text-align:center}
    .hero-lede{text-align:center;margin-left:auto;margin-right:auto;max-width:520px}
    .hero-eyebrow{margin-left:auto;margin-right:auto}
    .hero-actions{justify-content:center;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
    .hero-stats{text-align:center}
    .hero-stats::before{left:50%;transform:translateX(-50%)}
    .stat{padding-right:0}
    .hero-signup{margin-left:auto;margin-right:auto;width:100%}

    /* Section headers */
    .section-eyebrow{justify-content:center;margin-left:auto;margin-right:auto}
    .section-title, .ff-title, .bk-title, .page-hero h1{text-align:center}
    .section-lede, .ff-lede, .ff-goal, .page-hero p{
      text-align:center;margin-left:auto;margin-right:auto;max-width:560px;
    }
    .ornament{margin-left:auto;margin-right:auto}
    .page-hero .breadcrumb{justify-content:center;text-align:center}

    /* Freedom Fund */
    .ff-eyebrow{margin-left:auto;margin-right:auto}
    .ff-benefits li{text-align:left}          /* lists stay left for readability */
    .ff-card{text-align:center}
    .ff-price{justify-content:center}
    .ff-card-label{justify-content:center}
    .ff-card-label::after{display:none}
    .ff-alt-amounts{justify-content:center}

    /* Mission / creed */
    .creed{text-align:center}
    .creed-label{text-align:center}
    .creed-mark{left:50%;right:auto;transform:translateX(-50%)}
    .pillar{text-align:left}                  /* numbered pillars read better left */

    /* Breakfast */
    .bk-lede, .bk-body{text-align:center;margin-left:auto;margin-right:auto}
    .bk-actions{justify-content:center;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
    .bk-ticket-label{justify-content:center}
    .bk-ticket-label::after{display:none}
    .bk-ticket h4{text-align:center}
    .bk-details li{text-align:left}
    .bk-runsheet-label{text-align:center}
    .bk-speakers-label, .bk-speakers-title{text-align:center}
    .bk-expect-card{text-align:center}

    /* Voter guide + platform */
    .vg-actions{justify-content:center;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
    .vg-features li{text-align:left}
    .platform-eyebrow{justify-content:center;margin-left:auto;margin-right:auto}
    .platform-inner h2, .platform-inner p{text-align:center;margin-left:auto;margin-right:auto}
    .platform-cta{margin-left:auto;margin-right:auto}

    /* Officers / officials / resources */
    .officer-meta{text-align:center}
    .officer-role{text-align:center}
    .off-group-label{justify-content:center}
    .off-group-label::after{display:none}
    .official{text-align:center}
    .resource{text-align:center;align-items:center}
    .resource-icon{margin-left:auto;margin-right:auto}
    .resource-link{justify-content:center}

    /* Precincts + EC */
    .precincts-stats{justify-content:center;text-align:center}
    .precinct-filters{justify-content:center}
    .precinct-search{justify-content:center;text-align:center}
    .precinct-search .count{width:100%;text-align:center}
    .role-tagline{text-align:center}
    .role-name, .role-num{text-align:center}
    .role-duties li{text-align:left}
    .tier-body{text-align:center}
    .tier-meta{justify-content:center}
    .ec-form-title, .ec-form-sub{text-align:center}

    /* Volunteer */
    .vol-way h3{text-align:left}
    .vol-form-head{text-align:center}

    /* Footer */
    .footer-grid{text-align:center}
    .footer-brand{margin-left:auto;margin-right:auto;max-width:none}
    .footer-brand .brand{justify-content:center}
    .footer-col h5{text-align:center}
    .footer-contact{text-align:center}
    .footer-bottom{align-items:center;text-align:center}
    .footer-bottom p{text-align:center}
    .socials{justify-content:center;width:100%}
  }

  /* FIX: decorative layers must stay out of the hero's flex flow.
     A previous z-index rule made them position:relative, turning them into
     flex items that pushed the container ~386px to the right. */
  .hero .starfield,
  .hero .hero-video,
  .hero .hero-video-scrim{
    position:absolute !important;
  }
  .hero .starfield{z-index:1}
  .hero .hero-video{z-index:0}
  .hero .hero-video-scrim{z-index:1}
  .hero .container{
    position:relative;z-index:2;
    margin-left:auto !important;margin-right:auto !important;
    width:100%;
  }

  /* ==========================================================
     NEWSROOM — Chairman's Desk + Press Releases
     ========================================================== */
  #newsroom{background:var(--paper)}
  .news-filters{display:flex;gap:8px;margin-bottom:34px;flex-wrap:wrap}
  .news-filter{
    padding:11px 20px;background:#fff;border:1px solid var(--line-dark);
    font-family:var(--sans);font-size:11.5px;font-weight:900;font-stretch:112%;
    letter-spacing:0.11em;text-transform:uppercase;color:var(--muted);
    cursor:pointer;transition:all .2s ease;min-height:44px;
  }
  .news-filter:hover{border-color:var(--navy-900);color:var(--navy-900)}
  .news-filter.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

  .news-list{display:flex;flex-direction:column;gap:0}
  .news-item{
    display:grid;grid-template-columns:132px 1fr 40px;gap:28px;align-items:start;
    padding:28px 0;border-bottom:1px solid var(--line-dark);
    cursor:pointer;transition:all .25s ease;
  }
  .news-item:first-child{border-top:1px solid var(--line-dark)}
  .news-item:hover{background:rgba(10,22,40,0.022);padding-left:10px;padding-right:10px}
  .news-date{display:flex;flex-direction:column;gap:8px;padding-top:3px}
  .news-date .d{
    font-family:var(--serif);font-size:15px;color:var(--navy-900);
    letter-spacing:-0.008em;line-height:1.2;
  }
  .news-badge{
    display:inline-block;padding:4px 9px;width:fit-content;
    font-family:var(--sans);font-size:8.5px;font-weight:900;font-stretch:125%;
    letter-spacing:0.16em;text-transform:uppercase;line-height:1.3;
  }
  .news-badge.update{background:rgba(200,16,46,0.1);color:var(--red);border:1px solid rgba(200,16,46,0.28)}
  .news-badge.release{background:rgba(10,22,40,0.06);color:var(--navy-900);border:1px solid var(--line-dark)}
  .news-body h3{
    font-family:var(--serif);font-weight:400;font-size:26px;color:var(--navy-900);
    letter-spacing:-0.016em;line-height:1.18;margin-bottom:8px;
  }
  .news-item:hover .news-body h3{color:var(--red)}
  .news-body p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}
  .news-author{
    font-size:11.5px;color:var(--muted);margin-top:10px;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    letter-spacing:0.1em;text-transform:uppercase;
  }
  .news-arrow{
    width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);
    display:grid;place-items:center;transition:all .25s ease;margin-top:4px;
  }
  .news-item:hover .news-arrow{background:var(--red);border-color:var(--red)}
  .news-arrow svg{width:14px;height:14px;stroke:var(--navy-900);fill:none;stroke-width:2}
  .news-item:hover .news-arrow svg{stroke:#fff}
  .news-empty{padding:56px 0;text-align:center;color:var(--muted);font-style:italic}

  /* Single post view */
  .post-view{display:none;max-width:760px;margin:0 auto}
  .post-view.active{display:block}
  .news-index.hidden{display:none}
  .post-back{
    display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
    font-family:var(--sans);font-size:11px;font-weight:900;font-stretch:112%;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
    background:none;border:none;cursor:pointer;padding:10px 0;min-height:44px;
  }
  .post-back:hover{color:var(--red)}
  .post-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
  .post-meta{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
  .post-meta .date{font-size:12.5px;color:var(--muted);font-weight:600}
  .post-view h1{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(32px,4.4vw,50px);color:var(--navy-900);
    letter-spacing:-0.022em;line-height:1.08;margin-bottom:14px;
  }
  .post-byline{
    font-family:var(--sans);font-size:11px;font-weight:900;font-stretch:112%;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--red);
    padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line-dark);
  }
  .post-body p{
    color:#33383f;font-size:17.5px;line-height:1.72;margin-bottom:20px;font-weight:500;
  }
  .post-body p:first-child{font-size:19.5px;color:var(--ink);line-height:1.6}
  .post-body strong{color:var(--navy-900);font-weight:700}
  .post-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
  .post-foot{
    margin-top:36px;padding-top:24px;border-top:1px solid var(--line-dark);
    display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  }
  .post-foot .disclaimer{font-size:11.5px;color:var(--muted);line-height:1.5;max-width:420px}
  .post-share{display:flex;gap:8px}
  .post-share button{
    padding:10px 16px;background:#fff;border:1px solid var(--line-dark);
    font-family:var(--sans);font-size:10.5px;font-weight:900;font-stretch:112%;
    letter-spacing:0.11em;text-transform:uppercase;color:var(--navy-900);
    cursor:pointer;transition:all .2s ease;min-height:42px;
  }
  .post-share button:hover{border-color:var(--red);color:var(--red)}

  /* Home page strip */
  #latest{background:#fff}
  .latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .latest-card{
    display:flex;flex-direction:column;padding:26px 24px;
    background:var(--paper);border:1px solid var(--line-dark);
    transition:all .25s ease;
  }
  .latest-card:hover{transform:translateY(-3px);border-color:var(--navy-900);box-shadow:0 18px 42px -26px rgba(10,22,40,0.32)}
  .latest-card .news-badge{margin-bottom:12px}
  .latest-card h3{
    font-family:var(--serif);font-weight:400;font-size:21px;color:var(--navy-900);
    letter-spacing:-0.014em;line-height:1.2;margin-bottom:8px;
  }
  .latest-card p{color:var(--muted);font-size:14px;line-height:1.55;flex-grow:1}
  .latest-card .when{
    font-family:var(--sans);font-size:10.5px;font-weight:900;font-stretch:112%;
    letter-spacing:0.11em;text-transform:uppercase;color:var(--muted);margin-top:14px;
  }

  @media (max-width:1100px){ .latest-grid{grid-template-columns:1fr;gap:16px} }
  @media (max-width:820px){
    .news-item{grid-template-columns:1fr;gap:12px;padding:22px 0;text-align:left}
    .news-item:hover{padding-left:0;padding-right:0}
    .news-date{flex-direction:row;align-items:center;gap:12px;padding-top:0}
    .news-arrow{display:none}
    .news-body h3{font-size:21px}
    .news-filters{justify-content:center}
    .news-filter{flex:1 1 calc(33% - 8px);padding:11px 10px;font-size:10px}
    .post-body p{font-size:16px}
    .post-body p:first-child{font-size:17.5px}
    .post-foot{flex-direction:column;align-items:flex-start}
  }

  /* ==========================================================
     PARTY REORGANIZATION (precincts page)
     ========================================================== */
  #reorg{background:var(--navy-950);color:#fff;position:relative;overflow:hidden}
  #reorg .section-eyebrow{color:var(--gold-light)}
  #reorg .section-eyebrow::before{background:var(--gold)}
  #reorg .section-title{color:#fff}
  #reorg .section-title .accent{color:var(--gold-light)}
  #reorg .section-lede{color:rgba(255,255,255,0.68)}

  /* Cycle timeline */
  .reorg-cycle{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.09);
    margin-bottom:44px;
  }
  .cycle-step{
    background:var(--navy-900);padding:26px 22px;position:relative;
    display:flex;flex-direction:column;transition:background .3s ease;
  }
  .cycle-step:hover{background:var(--navy-800)}
  .cycle-when{
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--red);margin-bottom:10px;
  }
  .cycle-step h4{
    font-family:var(--serif);font-weight:400;font-size:22px;color:#fff;
    letter-spacing:-0.014em;line-height:1.15;margin-bottom:9px;
  }
  .cycle-step p{color:rgba(255,255,255,0.62);font-size:13.5px;line-height:1.55;margin:0}
  .cycle-step::after{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--red),transparent);
    opacity:0;transition:opacity .3s ease;
  }
  .cycle-step:hover::after{opacity:1}

  /* Detail columns */
  .reorg-detail{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:40px}
  .reorg-col h3{
    font-family:var(--serif);font-weight:400;font-size:25px;color:#fff;
    letter-spacing:-0.015em;margin-bottom:8px;
  }
  .reorg-col > .src{
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:9.5px;letter-spacing:0.15em;text-transform:uppercase;
    color:var(--gold);margin-bottom:18px;
  }
  .reorg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
  .reorg-list li{
    display:flex;gap:13px;font-size:14.5px;line-height:1.58;
    color:rgba(255,255,255,0.76);
  }
  .reorg-list li::before{
    content:'';width:5px;height:5px;border-radius:50%;background:var(--red);
    flex-shrink:0;margin-top:8px;
  }
  .reorg-list strong{color:#fff;font-weight:700}

  .reorg-note{
    padding:26px 30px;background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.09);border-left:3px solid var(--gold);
    display:flex;gap:18px;align-items:flex-start;
  }
  .reorg-note svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.9;flex-shrink:0;margin-top:2px}
  .reorg-note p{color:rgba(255,255,255,0.74);font-size:14.5px;line-height:1.65;margin:0}
  .reorg-note strong{color:#fff;font-weight:700}
  .reorg-note a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}
  .reorg-note a:hover{color:#fff}

  @media (max-width:1100px){
    .reorg-cycle{grid-template-columns:repeat(2,1fr)}
    .reorg-detail{grid-template-columns:1fr;gap:34px}
  }
  @media (max-width:820px){
    .reorg-cycle{grid-template-columns:1fr;margin-bottom:34px}
    .cycle-step{padding:22px 20px}
    .reorg-note{flex-direction:column;gap:13px;padding:22px}
    .reorg-col h3, .reorg-col .src{text-align:center}
    .reorg-list li{text-align:left}
  }

  /* ============ REORG v2 — scannable fact pairs ============ */
  .reorg-col h3{font-size:27px;margin-bottom:6px}
  .reorg-col > .src{margin-bottom:22px}

  .fact-list{margin:0;padding:0;display:flex;flex-direction:column;gap:0}
  .fact{
    display:grid;grid-template-columns:172px 1fr;gap:22px;align-items:baseline;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .fact:first-child{border-top:1px solid rgba(255,255,255,0.07)}
  .fact dt{
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
    color:var(--gold-light);line-height:1.45;margin:0;
  }
  .fact dd{
    margin:0;font-size:15px;line-height:1.6;
    color:rgba(255,255,255,0.8);font-weight:500;
  }

  /* Callout, de-bolded */
  .reorg-note{padding:28px 32px;gap:20px}
  .note-body{flex:1}
  .note-lead{
    font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;
    letter-spacing:-0.014em;line-height:1.2;margin:0 0 10px !important;
  }
  .reorg-note p{margin-bottom:12px}
  .reorg-note p:last-child{margin-bottom:0}
  .note-links{display:flex;gap:20px;flex-wrap:wrap;padding-top:6px}
  .note-links a{
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--gold-light);text-decoration:none;
    padding-bottom:3px;border-bottom:1px solid rgba(201,169,97,0.4);
  }
  .note-links a:hover{color:#fff;border-bottom-color:#fff}

  @media (max-width:1100px){
    .fact{grid-template-columns:148px 1fr;gap:18px}
  }
  @media (max-width:820px){
    .fact{grid-template-columns:1fr;gap:5px;padding:13px 0;text-align:left}
    .fact dt{font-size:9.5px;letter-spacing:0.14em}
    .fact dd{font-size:14.5px}
    .reorg-note{padding:24px 22px}
    .note-lead{font-size:20px}
    .note-links{gap:14px}
  }

  /* ============ FEATURED OFFICIAL (President) ============ */
  .official-featured{
    display:grid;grid-template-columns:184px 1fr;gap:30px;align-items:center;
    background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-950) 100%);
    border:1px solid rgba(201,169,97,0.3);
    padding:0;margin-bottom:26px;position:relative;overflow:hidden;
    transition:all .3s ease;
  }
  .official-featured::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
    background:linear-gradient(90deg, var(--red) 0%, #fff 50%, var(--navy-700) 100%);
  }
  .official-featured:hover{
    border-color:var(--gold);
    box-shadow:0 24px 60px -30px rgba(0,0,0,0.7);transform:translateY(-2px);
  }
  .of-photo{position:relative;width:184px;height:184px;overflow:hidden;background:var(--navy-950)}
  .of-photo img{
    width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;
    transition:transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .official-featured:hover .of-photo img{transform:scale(1.05)}
  .of-body{padding:24px 30px 24px 0}
  .of-kicker{
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--red);margin-bottom:8px;
  }
  .of-name{
    font-family:var(--serif);font-weight:400;font-size:34px;color:#fff;
    letter-spacing:-0.02em;line-height:1.08;margin-bottom:6px;
  }
  .of-office{
    font-family:var(--sans);font-size:13px;color:rgba(255,255,255,0.62);
    font-weight:500;margin-bottom:16px;
  }
  .of-link{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
    color:var(--gold-light);padding-bottom:3px;
    border-bottom:1px solid rgba(201,169,97,0.42);
  }
  .official-featured:hover .of-link{color:#fff;border-bottom-color:#fff}
  .of-link svg{width:13px;height:13px}

  @media (max-width:820px){
    .official-featured{grid-template-columns:1fr;gap:0;text-align:center}
    .of-photo{width:100%;height:280px}
    .of-photo img{object-position:center 15%}
    .of-body{padding:22px 22px 26px}
    .of-name{font-size:28px}
    .of-link{justify-content:center}
  }

  /* Featured official — keep photo beside the text at all widths
     (a square portrait in a full-width band crops the face) */
  @media (max-width:820px){
    .official-featured{
      grid-template-columns:118px 1fr;gap:18px;text-align:left;align-items:center;
    }
    .of-photo{width:118px;height:150px}
    .of-photo img{object-position:center 12%}
    .of-body{padding:16px 18px 16px 0}
    .of-kicker{font-size:8.5px;letter-spacing:0.16em;margin-bottom:5px}
    .of-name{font-size:23px;margin-bottom:4px}
    .of-office{font-size:11.5px;margin-bottom:11px}
    .of-link{font-size:9.5px;letter-spacing:0.11em;justify-content:flex-start}
  }
  @media (max-width:400px){
    .official-featured{grid-template-columns:96px 1fr;gap:14px}
    .of-photo{width:96px;height:128px}
    .of-name{font-size:20px}
    .of-office{font-size:11px}
  }

  /* ==========================================================
     GRID BLOWOUT FIX
     `1fr` resolves to minmax(auto,1fr) — its min-width is the content's
     min-content size, so long/nowrap children push the column past the
     container. minmax(0,1fr) lets it actually shrink.
     ========================================================== */
  .hero-grid, .ff-grid, .mission-grid, .vg-grid, .cal-layout,
  .bk-hero, .ec-layout, .platform-inner, .reorg-detail, .signup-band,
  .vol-layout, .precincts-intro, .officers, .off-cards, .roles-grid,
  .resources-grid, .latest-grid, .footer-grid, .bk-expect, .photo-grid{
    grid-template-columns:minmax(0,1fr);
  }
  /* restore multi-column at the widths that had them */
  @media (min-width:821px){
    .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr)}
    .ff-grid, .mission-grid, .vg-grid, .bk-hero, .signup-band,
    .reorg-detail, .precincts-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .ec-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
    .cal-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
    .vol-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
    .platform-inner{grid-template-columns:minmax(0,1.25fr) auto}
    .officers, .off-cards, .roles-grid, .resources-grid,
    .latest-grid, .bk-expect{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
  }
  @media (min-width:1101px){
    .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr)}
    .resources-grid, .latest-grid, .bk-expect, .off-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (min-width:1401px){
    .officers{grid-template-columns:repeat(4,minmax(0,1fr))}
  }

  /* CTA must be allowed to wrap on narrow screens */
  @media (max-width:820px){
    .platform-cta{
      white-space:normal;text-align:center;line-height:1.35;
      padding:16px 20px;font-size:12px;
    }
    .bk-ticket-cta, .ff-cta, .vol-form-card .sd-btn{white-space:normal}
  }

  /* ==========================================================
     OFFICER CARDS v3 — significantly smaller
     Was: 323x559 (full square photo). Now: capped photo height,
     and a compact horizontal row on mobile.
     ========================================================== */
  .officer-photo-wrap{aspect-ratio:auto;height:196px}
  .officer-photo{object-position:center 20%}
  .officer-meta{padding:15px 18px 17px}
  .officer-role{font-size:9px;letter-spacing:0.17em;margin-bottom:6px}
  .officer-name{font-size:20px;line-height:1.14}
  .officer-tease{font-size:12px;line-height:1.45;margin-top:6px}
  .officer-initials{font-size:38px}
  .officer-more{width:26px;height:26px;right:12px;bottom:12px}
  .officer-more svg{width:12px;height:12px}
  .officer-mail{margin:10px 18px 16px;width:calc(100% - 36px);padding:9px 14px;min-height:38px;font-size:10px}
  .officer.chair{padding-top:26px}
  .officer.chair::before{font-size:8.5px;padding:5px 11px 4px;letter-spacing:0.14em}
  .officer-bio-panel{padding:18px 18px}
  .officer-bio-panel .bp-role{font-size:8.5px;margin-bottom:5px}
  .officer-bio-panel .bp-name{font-size:18px;margin-bottom:9px;padding-bottom:9px}
  .officer-bio-panel p{font-size:11.5px;line-height:1.55;margin-bottom:8px}

  /* Tablet — 2 up */
  @media (min-width:821px) and (max-width:1400px){
    .officer-photo-wrap{height:210px}
  }

  /* ---------- Mobile: compact horizontal row ---------- */
  @media (max-width:820px){
    .officers{grid-template-columns:minmax(0,1fr);gap:1px}
    .officer{
      display:grid;grid-template-columns:104px minmax(0,1fr);
      align-items:stretch;min-height:0;
    }
    .officer-photo-wrap{height:100%;min-height:126px;width:104px}
    .officer-photo{object-position:center 18%}
    .officer-photo-wrap::after{
      background:linear-gradient(90deg, rgba(5,13,26,0) 55%, rgba(5,13,26,0.5) 100%);
    }
    .officer-meta{
      padding:14px 16px;display:flex;flex-direction:column;justify-content:center;
      text-align:left;
    }
    .officer-role{font-size:8.5px;margin-bottom:4px;text-align:left}
    .officer-name{font-size:19px}
    .officer-tease{font-size:11.5px;margin-top:5px;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .officer-initials{font-size:30px}
    .officer-more{width:24px;height:24px;right:10px;bottom:10px}

    /* chair keeps its badge + email button */
    .officer.chair{grid-template-columns:104px minmax(0,1fr);padding-top:0}
    .officer.chair::before{top:0;left:104px;font-size:8px;padding:4px 9px 3px}
    .officer.chair .officer-meta{padding-top:24px}
    .officer-mail{
      grid-column:2;margin:0 16px 14px;width:calc(100% - 32px);
      min-height:36px;font-size:9.5px;padding:8px 12px;
    }
    /* bio overlay stays readable in a short card */
    .officer-bio-panel{padding:14px 16px}
    .officer-bio-panel .bp-name{font-size:16px;margin-bottom:7px;padding-bottom:7px}
    .officer-bio-panel p{font-size:11px;line-height:1.5;margin-bottom:6px}
  }
  @media (max-width:400px){
    .officer{grid-template-columns:88px minmax(0,1fr)}
    .officer-photo-wrap{width:88px;min-height:114px}
    .officer.chair::before{left:88px}
    .officer-name{font-size:17px}
  }

  /* ---- Officer cards: uniform + tighter ---- */
  .officer-photo-wrap{height:168px}
  .officer-meta{padding:13px 16px 15px}
  .officer-name{font-size:19px}
  /* clamp so one long tease doesn't stretch the whole grid row */
  .officer-tease{
    font-size:11.5px;line-height:1.42;margin-top:5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* badge overlays the photo — no need to pad the card */
  .officer.chair{padding-top:0}
  .officer.chair::before{z-index:6}
  .officer-mail{margin:0 16px 13px;padding:8px 12px;min-height:34px;font-size:9.5px;letter-spacing:0.09em}
  .officer-initials{font-size:34px}

  @media (min-width:821px) and (max-width:1400px){
    .officer-photo-wrap{height:180px}
  }
  @media (max-width:820px){
    .officer-photo-wrap{height:100%;min-height:118px;width:104px}
    .officer-meta{padding:12px 15px}
    .officer.chair .officer-meta{padding-top:22px}
    .officer-mail{margin:0 15px 12px}
  }

  /* Chairman email as an inline link — keeps all officer cards the same height */
  .officer-mail-link{
    display:inline-flex;align-items:center;gap:7px;margin-top:9px;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:9px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--red);white-space:nowrap;
  }
  .officer-mail-link:hover{color:var(--gold-light)}
  .officer-mail-link svg{width:12px;height:12px;flex-shrink:0}
  @media (max-width:820px){
    .officer-mail-link{margin-top:7px;font-size:8.5px}
  }

  /* Chairman email as an inline link — keeps every officer card the same height */
  .officer-mail-link{
    display:inline-flex;align-items:center;gap:7px;margin-top:9px;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:9px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--red);white-space:nowrap;
  }
  .officer-mail-link:hover{color:var(--gold-light)}
  .officer-mail-link svg{width:12px;height:12px;flex-shrink:0}
  .officer.chair{padding-top:0}
  @media (max-width:820px){
    .officer-mail-link{margin-top:7px;font-size:8.5px}
  }

  /* ==========================================================
     FOOTER — tablet fix
     768–820px was collapsing to ONE column (15 links stacked at
     44px each = 1416px tall). Give tablets real columns.
     ========================================================== */
  @media (min-width:561px) and (max-width:820px){
    .footer-grid{
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:28px 26px;text-align:left;
    }
    .footer-brand{grid-column:1 / -1;max-width:none;text-align:left}
    .footer-brand .brand{justify-content:flex-start}
    .footer-brand p{max-width:520px}
    .footer-col h5{text-align:left}
    .footer-col ul{gap:0}
    .footer-col li a{padding:8px 0;font-size:14px}
    .footer-contact{text-align:left}
    .footer-bottom{flex-direction:row;align-items:center;text-align:left}
    .footer-bottom p{text-align:left;max-width:70%}
    .socials{width:auto;justify-content:flex-end}
  }

  /* Phones: single column, but stop the 44px-per-link pile-up */
  @media (max-width:560px){
    .footer-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:26px 20px;text-align:left}
    .footer-brand{grid-column:1 / -1;text-align:center}
    .footer-brand .brand{justify-content:center}
    .footer-col h5{text-align:left}
    .footer-col ul{gap:0}
    .footer-col li a{padding:8px 0;font-size:14px}
    .footer-contact{text-align:left}
  }
  @media (max-width:339px){
    .footer-grid{grid-template-columns:minmax(0,1fr)}
    .footer-col h5, .footer-contact, .footer-col li a{text-align:center}
    .footer-col li a{padding:9px 0}
  }

  /* ==========================================================
     OFFICER CARDS v4 — match the featured President/VP treatment
     Horizontal: photo left, text right. Navy gradient, gold hairline,
     tricolor top rule, hover lift.
     ========================================================== */
  .officers{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;background:transparent;border:none;
  }
  .officer{
    display:grid;grid-template-columns:158px minmax(0,1fr);
    align-items:stretch;min-height:0;overflow:hidden;position:relative;
    background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-950) 100%);
    border:1px solid rgba(201,169,97,0.22);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .officer::after{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
    background:linear-gradient(90deg, var(--red) 0%, var(--gold) 100%);
    opacity:0.75;
  }
  .officer:hover{
    background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-950) 100%);
    border-color:var(--gold);transform:translateY(-2px);
    box-shadow:0 22px 52px -30px rgba(0,0,0,0.75);
  }
  .officer.chair{border-color:rgba(200,16,46,0.5)}
  .officer.chair::after{background:linear-gradient(90deg, var(--red) 0%, #fff 55%, var(--navy-700) 100%);opacity:1}

  .officer-photo-wrap{
    width:158px;height:100%;min-height:186px;
    position:relative;overflow:hidden;background:var(--navy-950);
  }
  .officer-photo{
    width:100%;height:100%;object-fit:cover;object-position:center 16%;
    filter:grayscale(0.15) contrast(1.04);
    transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
  }
  .officer:hover .officer-photo{transform:scale(1.05);filter:grayscale(0) contrast(1.06)}
  .officer-photo-wrap::after{
    background:linear-gradient(90deg, rgba(5,13,26,0) 58%, rgba(5,13,26,0.55) 100%);
  }

  .officer-meta{
    padding:20px 24px;display:flex;flex-direction:column;justify-content:center;
    text-align:left;position:relative;z-index:2;
  }
  .officer-role{
    font-family:var(--sans);font-weight:900;font-stretch:125%;
    font-size:9px;letter-spacing:0.19em;text-transform:uppercase;
    color:var(--red);margin-bottom:7px;text-align:left;
  }
  .officer-name{
    font-family:var(--serif);font-weight:400;font-size:26px;color:#fff;
    letter-spacing:-0.018em;line-height:1.1;margin-bottom:6px;
  }
  .officer-tease{
    font-size:12.5px;line-height:1.5;color:rgba(255,255,255,0.6);margin-top:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .officer-mail-link{margin-top:11px;font-size:9.5px}
  .officer-initials{font-size:40px;color:rgba(201,169,97,0.4)}
  .officer.chair{padding-top:0}
  .officer.chair::before{top:0;left:158px;z-index:6;font-size:8.5px;padding:5px 11px 4px}
  .officer.chair .officer-meta{padding-top:30px}
  .officer-more{right:14px;bottom:14px;width:26px;height:26px}

  /* Tablet: still 2-up, slightly smaller photo */
  @media (min-width:821px) and (max-width:1200px){
    .officer{grid-template-columns:136px minmax(0,1fr)}
    .officer-photo-wrap{width:136px;min-height:172px}
    .officer.chair::before{left:136px}
    .officer-name{font-size:23px}
    .officer-meta{padding:18px 20px}
  }

  /* Phones: one column, compact */
  @media (max-width:820px){
    .officers{grid-template-columns:minmax(0,1fr);gap:12px}
    .officer{grid-template-columns:104px minmax(0,1fr)}
    .officer-photo-wrap{width:104px;min-height:124px}
    .officer.chair::before{left:104px}
    .officer-meta{padding:14px 16px}
    .officer.chair .officer-meta{padding-top:26px}
    .officer-name{font-size:19px}
    .officer-tease{font-size:11.5px}
    .officer-initials{font-size:30px}
  }
  @media (max-width:400px){
    .officer{grid-template-columns:88px minmax(0,1fr)}
    .officer-photo-wrap{width:88px;min-height:112px}
    .officer.chair::before{left:88px}
  }

  /* ---- Officer photo must fill the full card height ---- */
  .officer{align-items:stretch}
  .officer-photo-wrap{
    height:auto;align-self:stretch;position:relative;overflow:hidden;
  }
  .officer-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .officer-photo-wrap.no-photo{display:grid;place-items:center}

  /* CHAIRMAN ribbon sits on the photo, not the seam */
  .officer.chair::before{
    left:0;top:0;
    background:var(--red);color:#fff;z-index:7;
  }
  .officer.chair .officer-meta{padding-top:20px}
  @media (min-width:821px) and (max-width:1200px){
    .officer.chair::before{left:0}
  }
  @media (max-width:820px){
    .officer.chair::before{left:0}
    .officer.chair .officer-meta{padding-top:14px}
  }

  /* Bio panel CTA (chair email / recruit link) */
  .officer-bio-panel .bp-cta{
    display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--gold-light);text-decoration:none;
    border-bottom:none;align-self:flex-start;
  }
  .officer-bio-panel .bp-cta:hover{color:#fff}
  .officer-bio-panel{display:flex;flex-direction:column}
  /* keep the meta link clickable until the panel actually covers it */
  .officer-mail-link{position:relative;z-index:4}

  /* ---- Officer card: flex so the photo reliably fills card height ---- */
  .officer{
    display:flex;align-items:stretch;grid-template-columns:none;
  }
  .officer-photo-wrap{
    flex:0 0 158px;width:158px;align-self:stretch;
    height:auto;min-height:186px;
  }
  .officer-meta{flex:1 1 auto;min-width:0}
  .officer-mail-link{align-self:flex-start}

  @media (min-width:821px) and (max-width:1200px){
    .officer-photo-wrap{flex-basis:136px;width:136px;min-height:172px}
  }
  @media (max-width:820px){
    .officer-photo-wrap{flex-basis:104px;width:104px;min-height:124px}
  }
  @media (max-width:400px){
    .officer-photo-wrap{flex-basis:88px;width:88px;min-height:112px}
  }

  /* ---- Officer card: photo absolutely spans full height (bulletproof) ---- */
  .officer{
    display:block;position:relative;padding-left:158px;min-height:186px;
  }
  .officer-photo-wrap{
    position:absolute;left:0;top:0;bottom:0;width:158px;
    flex:none;height:auto;min-height:0;
  }
  .officer-meta{padding:20px 24px;min-height:186px;display:flex;flex-direction:column;justify-content:center}
  .officer.chair{padding-left:158px}
  .officer.chair::before{left:158px;top:0}

  @media (min-width:821px) and (max-width:1200px){
    .officer{padding-left:136px;min-height:172px}
    .officer-photo-wrap{width:136px}
    .officer-meta{min-height:172px;padding:18px 20px}
    .officer.chair{padding-left:136px}
    .officer.chair::before{left:136px}
  }
  @media (max-width:820px){
    .officer{padding-left:104px;min-height:124px}
    .officer-photo-wrap{width:104px}
    .officer-meta{min-height:124px;padding:14px 16px}
    .officer.chair{padding-left:104px}
    .officer.chair::before{left:104px}
  }
  @media (max-width:400px){
    .officer{padding-left:88px;min-height:112px}
    .officer-photo-wrap{width:88px}
    .officer-meta{min-height:112px}
    .officer.chair{padding-left:88px}
    .officer.chair::before{left:88px}
  }

  /* Drop the floating CHAIRMAN ribbon — it overlapped the card and read as clutter.
     The chair is already distinguished by its red border, red top rule,
     the "County Chair" role line, and the email link. */
  .officer.chair::before{content:none !important;display:none !important}
  .officer.chair .officer-meta{padding-top:20px}
  .officer.chair .officer-role{color:var(--gold-light)}
  @media (min-width:821px) and (max-width:1200px){ .officer.chair .officer-meta{padding-top:18px} }
  @media (max-width:820px){ .officer.chair .officer-meta{padding-top:14px} }

  /* ==========================================================
     FEATURED OFFICIAL CARDS v2 — consistent, photo fills height
     ========================================================== */
  /* groups that contain featured cards lay out 2-up */
  .off-group:has(.official-featured) .off-cards{
    grid-template-columns:repeat(2, minmax(0,1fr));gap:16px;
  }
  /* President + VP get the full row as a hierarchy signal */
  .off-group:has(.official-featured) .off-cards > .official-featured.wide{grid-column:1 / -1}

  .official-featured{
    display:block;position:relative;padding-left:168px;min-height:184px;
    margin-bottom:0;gap:0;
  }
  .of-photo{
    position:absolute;left:0;top:0;bottom:0;width:168px;height:auto;
    overflow:hidden;background:var(--navy-950);
  }
  .of-photo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%;
  }
  .of-body{
    padding:22px 26px;min-height:184px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .of-name{font-size:27px;line-height:1.1;margin-bottom:5px}
  .of-kicker{font-size:9px;margin-bottom:6px}
  .of-office{font-size:12.5px;margin-bottom:12px}
  .of-link{font-size:9.5px}
  /* wide cards can afford a bigger name */
  .official-featured.wide{padding-left:196px;min-height:200px}
  .official-featured.wide .of-photo{width:196px}
  .official-featured.wide .of-body{min-height:200px;padding:24px 30px}
  .official-featured.wide .of-name{font-size:33px}

  @media (max-width:1100px){
    .off-group:has(.official-featured) .off-cards{grid-template-columns:minmax(0,1fr)}
    .official-featured.wide{padding-left:168px;min-height:184px}
    .official-featured.wide .of-photo{width:168px}
    .official-featured.wide .of-body{min-height:184px;padding:22px 26px}
    .official-featured.wide .of-name{font-size:27px}
  }
  @media (max-width:820px){
    .official-featured, .official-featured.wide{padding-left:112px;min-height:140px;text-align:left}
    .of-photo, .official-featured.wide .of-photo{width:112px}
    .of-body, .official-featured.wide .of-body{min-height:140px;padding:14px 16px}
    .of-name, .official-featured.wide .of-name{font-size:20px}
    .of-kicker{font-size:8.5px;margin-bottom:4px}
    .of-office{font-size:11.5px;margin-bottom:9px}
    .of-link{font-size:9px;justify-content:flex-start}
  }
  @media (max-width:400px){
    .official-featured, .official-featured.wide{padding-left:94px;min-height:124px}
    .of-photo, .official-featured.wide .of-photo{width:94px}
    .of-body, .official-featured.wide .of-body{min-height:124px}
    .of-name, .official-featured.wide .of-name{font-size:18px}
  }


/* ===== Calendar: filters, tag dots, day picking ===== */
.cal-filter{display:flex;gap:8px;margin:0 0 18px}
.cal-filter button{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border:1px solid var(--line-dark);background:transparent;color:var(--navy-700);
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.cal-filter button:hover{border-color:var(--navy-900);color:var(--navy-900)}
.cal-filter button.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

.cal-dots{display:flex;gap:3px;justify-content:center;margin-top:3px;line-height:0}
.cal-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red)}
.cal-dot.t-red{background:var(--red)}
.cal-dot.t-navy{background:var(--navy-700)}
.cal-dot.t-gold{background:var(--gold)}
.cal-dot.t-mute{background:rgba(15,26,48,.28)}

.cal-day.has-event{cursor:pointer}
.cal-day.has-event:hover{background:rgba(15,26,48,.05)}
.cal-day.picked{background:var(--navy-900);color:#fff}
.cal-day.picked .cal-num{color:#fff}
.cal-day.picked .cal-dot{background:#fff}

.cal-upcoming h4{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cal-clear{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--red);color:var(--red);
  padding:0 0 1px;cursor:pointer;
}
.cal-tag{font-weight:600}
.cal-tag.t-red{color:var(--red)}
.cal-tag.t-navy{color:var(--navy-700)}
.cal-tag.t-gold{color:#8a6d24}
.cal-tag.t-mute{color:rgba(15,26,48,.5)}

.cal-empty{margin:0;padding:18px 0;font-size:.92rem;line-height:1.55;color:rgba(15,26,48,.58)}
.cal-item-body h5 a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(200,16,46,.45);
  transition:border-color .18s ease,color .18s ease;
}
.cal-item-body h5 a:hover{color:var(--red);border-bottom-color:var(--red)}

@media (max-width:560px){
  .cal-filter button{flex:1;padding:8px 6px;font-size:10px}
}

/* ===== Calendar: pinned next BCRP event ===== */
.cal-pin{
  background:var(--navy-900);color:#fff;padding:20px 22px;margin-bottom:24px;
  border-left:3px solid var(--red);
}
.cal-pin-label{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.cal-pin-date{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:5px}
.cal-pin h5{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 8px;color:#fff}
.cal-pin h5 a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.cal-pin h5 a:hover{border-bottom-color:var(--gold);color:var(--gold)}
.cal-pin-meta{font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
.cal-pin-note{margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--gold)}

/* ===== Breakfast photo carousel ===== */
.bk-gallery{margin:64px 0 0}
.bk-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.bk-gallery-label{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.bk-gallery-nav{display:flex;gap:8px}
.bk-arrow{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff;
  cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.bk-arrow svg{width:17px;height:17px}
.bk-arrow:hover{background:var(--red);border-color:var(--red)}

.bk-track{
  display:flex;gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.bk-track::-webkit-scrollbar{display:none}
.bk-track:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.bk-slide{
  flex:0 0 calc((100% - 36px) / 3);
  margin:0;scroll-snap-align:start;
}
.bk-slide img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);
}
.bk-slide figcaption{
  margin-top:10px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);
}

@media (max-width:900px){
  .bk-slide{flex-basis:calc((100% - 18px) / 2)}
}
@media (max-width:600px){
  .bk-gallery{margin-top:48px}
  .bk-track{gap:14px}
  .bk-slide{flex-basis:78%}
}

/* ===== Nav: Store button, glued to the ribbon beside Freedom Fund ===== */
.nav-right .nav-store{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:2px;min-height:44px;
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.28);
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.nav-right .nav-store svg{width:16px;height:16px;flex:0 0 auto}
.nav-right .nav-store:hover{
  background:var(--gold);border-color:var(--gold);color:var(--navy-950);
  transform:translateY(-1px);
}
.nav-right .nav-store::after{display:none}

@media (max-width:1024px){
  .nav-right .nav-store{padding:13px 16px;font-size:11px;letter-spacing:.07em}
}
/* Below this the bar gets tight, so the Store collapses to its icon.
   The aria-label still names it for screen readers. */
@media (max-width:720px){
  .nav-right .nav-store{width:44px;padding:0;gap:0}
  .nav-right .nav-store span{display:none}
  .nav-right .nav-store svg{width:18px;height:18px}
}
@media (max-width:400px){
  .nav-right .nav-store{width:40px;min-height:40px}
  .nav-right .nav-store svg{width:17px;height:17px}
}

/* The compact nav used to stop at 400px. With the Store button in the bar the
   pieces no longer fit until ~430px, so the compact band now runs to 460px. */
@media (max-width:460px){
  .nav-inner{gap:8px;padding:0 14px}
  .brand{gap:9px}
  .brand-seal{width:40px;height:40px}
  .brand-text .top{font-size:13.5px;letter-spacing:-0.01em}
  .brand-text .bot{font-size:6.5px;letter-spacing:0.1em;margin-top:3px}
  .nav-right{gap:7px}
  .nav-right .nav-cta{padding:10px 9px;font-size:9px;letter-spacing:0.05em;min-height:40px}
  .nav-right .nav-store{width:40px;min-height:40px}
  .nav-right .nav-store svg{width:17px;height:17px}
  .nav-toggle{width:40px;height:40px}
  .burger{width:17px;height:12px}
}

/* Re-assert the smallest-phone sizing, which the 460px block above would
   otherwise win on source order. */
@media (max-width:360px){
  .nav-inner{gap:6px;padding:0 12px}
  .brand-text .bot{display:none}
  .brand-text .top{font-size:13px}
  .nav-right{gap:6px}
  .nav-right .nav-cta{font-size:8.5px;padding:10px 8px;letter-spacing:0.04em}
  .nav-right .nav-store{width:36px;min-height:38px}
  .nav-right .nav-store svg{width:16px;height:16px}
  .nav-toggle{width:38px;height:38px}
}

/* ===== Nav menu: Connect row (Facebook · Instagram · Email) =====
   The panel styles `.nav-links li a` as a full-width block, so every rule here
   is scoped through `li.nav-connect` to outrank it. */
.nav-links li.nav-connect{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;width:100%;
  padding:18px 20px 2px;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.13);
}
.nav-links li.nav-connect .nav-connect-label{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);line-height:1;
}
.nav-links li.nav-connect .nav-connect-row{display:flex;gap:10px}
.nav-links li.nav-connect .nav-connect-row a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;
  padding:0;margin:0;border-radius:2px;
  border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.88);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.nav-links li.nav-connect .nav-connect-row a::after{display:none}
.nav-links li.nav-connect .nav-connect-row a svg{width:18px;height:18px;display:block}
.nav-links li.nav-connect .nav-connect-row a:hover,
.nav-links li.nav-connect .nav-connect-row a:focus-visible{
  background:var(--red);border-color:var(--red);color:#fff;
}

@media (max-width:400px){
  .nav-links li.nav-connect{padding:16px 14px 2px}
  .nav-links li.nav-connect .nav-connect-row a{width:40px;height:40px;flex-basis:40px}
}

/* ===== Brand lockup: square the two lines =====
   "REPUBLICAN PARTY" is set in Archivo Black Expanded (wdth 125) and ran ~57px
   wider than the serif "Berkeley County" above it. The width axis is dialled
   back per size band so the two lines share the same left and right edge.
   Values solved by measuring the rendered ink, not the box, so the trailing
   letter-space does not push the right edge out. */
.brand-text{align-items:flex-start}
.brand-text .bot{
  letter-spacing:.12em;
  font-stretch:83%;
  font-variation-settings:'wdth' 83.3, 'wght' 900;
  margin-right:-.12em;            /* absorb the trailing letter-space */
}
@media (max-width:820px){
  .brand-text .bot{
    font-stretch:78%;
    font-variation-settings:'wdth' 78.2, 'wght' 900;
  }
}
@media (max-width:460px){
  .brand-text .bot{
    font-stretch:83%;
    font-variation-settings:'wdth' 82.9, 'wght' 900;
  }
}

/* ===== Hero accent: Archivo Expanded Black caps, squared to the serif line =====
   0.735em is the size at which "REPUBLICAN." renders exactly as wide as
   "Keep Berkeley County" above it. Solved by measuring rendered ink at every
   breakpoint; the ratio holds because both lines scale off the same h1 size. */
.hero h1 .accent{
  font-family:var(--sans);
  font-style:normal;
  font-weight:900;
  font-stretch:125%;
  font-variation-settings:'wdth' 125, 'wght' 900;
  font-synthesis:none;
  text-transform:uppercase;
  font-size:1.122em;   /* re-solved for Newsreader; was .735em under Instrument Serif */
  letter-spacing:.02em;
  margin-right:-.02em;          /* absorb the trailing letter-space */
  line-height:1;
  display:inline-block;
  color:var(--gold-light);
}

/* Long email addresses must not push the layout wide on a 320px phone. */
.footer-contact a, .legal a[href^="mailto:"], .legal p a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ===== Hero actions with three buttons =====
   Full-width stacking put JOIN, Get Involved and View Calendar on three rows
   and cost ~190px of hero. JOIN keeps its own row; the two secondary buttons
   share the next one. */
@media (max-width:1023px){
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn-primary{flex:1 1 100%;width:100%}
  .hero-actions .btn-ghost{flex:1 1 calc(50% - 8px);width:auto;min-width:0;padding-left:14px;padding-right:14px}
}
@media (max-width:399px){
  /* Below this "VIEW CALENDAR" wraps inside a half-width button, so stack. */
  .hero-actions .btn-ghost{flex:1 1 100%;width:100%}
}

/* ===== Newsletter card header: one line, Archivo Expanded Black ===== */
.hero-signup-head h2{
  font-family:var(--sans);
  font-weight:900;
  font-stretch:125%;
  font-variation-settings:'wdth' 125, 'wght' 900;
  font-synthesis:none;
  font-style:normal;
  text-transform:uppercase;
  font-size:19px;
  letter-spacing:.09em;
  line-height:1.15;
  margin:0;
  color:#fff;
}
@media (max-width:1023px){ .hero-signup-head h2{font-size:17.5px;letter-spacing:.08em} }
@media (max-width:480px){  .hero-signup-head h2{font-size:16px;letter-spacing:.07em} }

/* ===== Republican Creed: full width across the page =====
   It used to sit inside the left column of the mission grid. Now it spans the
   container, with the body set in two columns so the measure stays readable
   instead of running the full page width in one line. */
#mission .creed{
  padding:40px 44px;
  border-left:3px solid var(--red);
  background:#fff;
  box-shadow:0 20px 60px -30px rgba(10,22,40,.25);
  margin-top:56px;
  position:relative;
}
#mission .creed .creed-body{margin:0}
#mission .creed .creed-text{break-inside:avoid}

@media (min-width:1024px){
  #mission .creed{padding:52px 60px;margin-top:64px}
  #mission .creed .creed-lead{max-width:34ch}
  #mission .creed .creed-body{
    column-count:2;
    column-gap:60px;
    margin-top:26px;
  }
  #mission .creed .creed-text:last-child{margin-bottom:0}
}
@media (min-width:1500px){
  #mission .creed .creed-body{column-gap:76px}
}

/* Speaker or month note on the next-breakfast card */
.bk-ticket-note{
  margin:-6px 0 18px;
  font-size:13px;line-height:1.45;
  color:var(--gold-light);
}

/* ===== Hero headline: Newsreader Bold =====
   Instrument Serif ships at one weight only, so a fatter hero meant a
   different face. Newsreader is variable, so 700 is a real weight and not a
   synthesized bold. Hero only; every other serif on the site is unchanged.
   The accent line keeps its own Archivo rule further down. */
.hero h1{
  font-family:'Newsreader', Georgia, serif;
  font-weight:700;
  font-variation-settings:'opsz' 72, 'wght' 700;
  font-synthesis:none;
}

/* ===== Sharpie underline under REPUBLICAN., drawn on ===== */
/* Two passes as separate pseudo-elements so they can be drawn one after the
   other, the way you would actually go over a line twice with a marker.
   Filled SVG shapes, not strokes: a stroke distorts unevenly when stretched to
   the width of the word, a fill just gets longer. The reveal is clip-path, so
   the drawing is uncovered left to right rather than squashed. */
.hero h1 .accent{position:relative}

.hero h1 .accent::before,
.hero h1 .accent::after{
  content:"";
  position:absolute;
  left:-.015em; right:-.035em;
  bottom:-.13em;
  height:.17em;
  background-repeat:no-repeat;
  background-size:100% 100%;
  transform:rotate(-.65deg);
  transform-origin:left center;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
}

/* first pass: the confident stroke */
.hero h1 .accent::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 44' preserveAspectRatio='none'%3E%3Cpath fill='%23c8102e' d='M4,20 C150,9 320,16 470,13 C620,10 780,18 930,8 C958,6 978,9 997,4 L999,18 C972,23 950,20 928,24 C780,33 620,26 470,29 C320,32 150,27 6,35 Z'/%3E%3C/svg%3E");
  animation:sharpie-draw .5s cubic-bezier(.2,.85,.3,1) .7s forwards;
}
/* second pass: shorter, lighter, a beat later */
.hero h1 .accent::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 44' preserveAspectRatio='none'%3E%3Cpath fill='%23c8102e' opacity='.5' d='M96,33 C260,28 430,32 600,30 C740,28 860,32 962,26 L964,34 C860,40 740,37 600,39 C430,41 260,38 98,41 Z'/%3E%3C/svg%3E");
  animation:sharpie-draw .34s cubic-bezier(.3,.8,.4,1) 1.12s forwards;
}

@keyframes sharpie-draw{
  from{ clip-path:inset(0 100% 0 0) }
  to  { clip-path:inset(0 -2% 0 0) }
}

/* Drawn already, no motion, for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: reduce){
  .hero h1 .accent::before,
  .hero h1 .accent::after{
    animation:none;
    clip-path:inset(0 -2% 0 0);
  }
}

/* Newsreader is a text face and runs ~50% wider than Instrument Serif did, so
   the old 104px ceiling overflowed "Keep Berkeley County" onto two lines.
   Sizes below were solved by binary search against the real bold rendering.
   Two regimes because the hero is one column on phones and two on desktop. */
.hero h1{font-size:clamp(25px, 8.2vw, 67px)}
@media (min-width:821px){
  .hero h1{font-size:clamp(38px, 4.8vw, 69px)}
}

/* The serif-to-accent ratio differs slightly once the hero goes two-column. */
@media (min-width:821px){
  .hero h1 .accent{font-size:1.118em}
}

/* ===== End of quarter appeal ===== */
.appeal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px}
.appeal[hidden]{display:none !important}
.appeal-backdrop{position:absolute;inset:0;background:rgba(4,8,17,.72);backdrop-filter:blur(4px);animation:appeal-fade .25s ease both}
.appeal-card{
  position:relative;width:100%;max-width:470px;
  background:var(--navy-900);
  border:1px solid rgba(255,255,255,.12);
  border-top:4px solid var(--red);
  padding:38px 40px 30px;
  text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  animation:appeal-rise .3s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes appeal-fade{from{opacity:0}to{opacity:1}}
@keyframes appeal-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.appeal-x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  display:grid;place-items:center;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.5);transition:color .18s ease;
}
.appeal-x:hover{color:#fff}
.appeal-x svg{width:18px;height:18px}

.appeal-seal{width:56px;height:56px;margin:0 auto 16px;display:block;background:#fff;border-radius:50%;padding:2px}
.appeal-eyebrow{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px;
}
.appeal-title{
  font-family:var(--serif);font-weight:400;font-synthesis:none;
  font-size:29px;line-height:1.12;letter-spacing:-.012em;color:#fff;margin:0 0 12px;
}
.appeal-body{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 24px}

.appeal-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.appeal-amounts a{
  display:flex;align-items:center;justify-content:center;
  padding:16px 6px;text-decoration:none;
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:19px;color:#fff;
  background:transparent;border:1px solid rgba(255,255,255,.28);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.appeal-amounts a:hover{background:var(--red);border-color:var(--red);transform:translateY(-1px)}
.appeal-amounts a.hot{background:var(--red);border-color:var(--red)}
.appeal-amounts a.hot:hover{background:var(--red-dark,#a60d26)}

.appeal-other{
  display:inline-block;margin-bottom:20px;
  font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.65);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);
}
.appeal-other:hover{color:#fff;border-bottom-color:var(--gold)}
.appeal-fine{font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.38);margin:0 0 14px}
.appeal-dismiss{
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
.appeal-dismiss:hover{color:rgba(255,255,255,.8)}

@media (prefers-reduced-motion: reduce){
  .appeal-backdrop,.appeal-card{animation:none}
}


/* ===== Footer Contact, centred on phones =====
   At this width the footer is two columns, so Contact ends up alone on the
   last row. Centring it inside a half-width cell would read as off-centre on
   the page, so it spans the full row first. */
@media (max-width:560px){
  .footer-grid > .footer-col:last-child{
    grid-column:1 / -1;
    text-align:center;
    margin-top:6px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .footer-grid > .footer-col:last-child h5{text-align:center}
  .footer-grid > .footer-col:last-child .footer-contact{text-align:center}
  .footer-grid > .footer-col:last-child .footer-contact strong{display:block;margin-bottom:4px}
}

/* ===== Chairman's Desk: standing column masthead ===== */
.column-head[hidden]{display:none !important}
.column-head{
  display:flex;gap:22px;align-items:center;
  padding:24px 26px;margin-bottom:28px;
  background:#fff;border:1px solid var(--line-dark);
  border-left:3px solid var(--red);
}
.column-photo{
  width:78px;height:78px;flex:0 0 78px;
  object-fit:cover;object-position:center 22%;
  border-radius:50%;
}
.column-kicker{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:6px;
}
.column-title{
  font-family:var(--serif);font-weight:400;font-synthesis:none;
  font-size:26px;line-height:1.1;color:var(--navy-900);margin:0 0 8px;
}
.column-lede{font-size:14px;line-height:1.55;color:var(--muted);margin:0;max-width:62ch}

@media (max-width:600px){
  .column-head{flex-direction:column;text-align:center;gap:14px;padding:22px 20px}
  .column-photo{width:66px;height:66px;flex-basis:66px}
  .column-title{font-size:22px}
  .column-lede{font-size:13.5px}
}

/* ===== Post share row ===== */
.post-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.share-label{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;
  border:1px solid var(--line-dark);background:transparent;
  color:var(--navy-700);cursor:pointer;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.share-btn svg{width:17px;height:17px}
.share-btn:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.share-done{
  font-size:12px;font-weight:600;letter-spacing:.04em;color:#2e7d32;
}


/* ===== Newsroom: two cards, newest column and newest release ===== */
.latest-two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;align-items:stretch;margin-top:34px;
}
.latest-two.one-up{grid-template-columns:minmax(0,1fr);max-width:640px}

.lt-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-dark);
  padding:30px 32px 26px;text-decoration:none;color:inherit;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.lt-card[hidden]{display:none !important}
.lt-card:hover{
  border-color:var(--navy-900);
  box-shadow:0 22px 50px -30px rgba(10,22,40,.4);
  transform:translateY(-2px);
}
.lt-top{position:absolute;top:-1px;left:-1px;right:-1px;height:3px}
.lt-column .lt-top{background:var(--red)}
.lt-release .lt-top{background:var(--gold)}

.lt-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.lt-avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  object-fit:cover;object-position:center 20%;
}
.lt-seal{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy-900);
}
.lt-seal img{width:26px;height:26px;object-fit:contain}
.lt-kicker{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
}
.lt-column .lt-kicker{color:var(--red)}
.lt-release .lt-kicker{color:#8a6d24}

.lt-title{
  font-family:var(--serif);font-weight:400;font-synthesis:none;
  font-size:clamp(21px,2.1vw,27px);line-height:1.18;letter-spacing:-.012em;
  color:var(--navy-900);margin:0 0 10px;
}
.lt-excerpt{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.lt-excerpt[hidden]{display:none}

.lt-foot{
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  margin-top:auto;padding-top:15px;border-top:1px solid var(--line-dark);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}
.lt-by{font-weight:700;color:var(--navy-900)}
.lt-date{color:var(--muted);margin-left:auto}
.lt-cue{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.lt-release .lt-cue{color:#8a6d24}
.lt-cue svg{width:15px;height:15px;transition:transform .22s ease}
.lt-card:hover .lt-cue svg{transform:translateX(4px)}

@media (max-width:820px){
  .latest-two{grid-template-columns:minmax(0,1fr);gap:18px}
  .latest-two.one-up{max-width:none}
  .lt-card{padding:26px 24px 22px}
  .lt-date{margin-left:0}
}

/* ===== News page hero: the same Newsreader Bold used on the home hero =====
   Scoped to .ph-serif so the other page heroes keep Instrument Serif. */
.page-hero h1.ph-serif{
  font-family:'Newsreader', Georgia, serif;
  font-weight:700;
  font-variation-settings:'opsz' 72, 'wght' 700;
  font-synthesis:none;
  letter-spacing:-.022em;
  line-height:1;
}

/* ===== Menu: plain list by default, sitemap on phones =====
   The dropdown panel is only ~320px wide on desktop, so the two-column tile
   grid belongs on phones only, where the panel is nearly full width. */

/* Default (tablet and desktop): behave like the list it was before. */
.nav-links .nav-group{display:none}
.nav-links li.nav-tile{width:100%}
.nav-links li.nav-tile a{
  display:block;width:100%;min-height:0;margin:0;border:0;border-radius:0;
  padding:15px 20px;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-links li.nav-tile .nt-i{display:none}

/* Phones: the home page runs ~18 screens, so make every destination one tap.
   Two columns of large targets, grouped, sized for an older audience. */
@media (max-width:820px){
  .nav-links{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;
    padding-left:16px;padding-right:16px;
  }
  .nav-links .nav-group{display:block;width:100%;padding:16px 4px 6px}
  .nav-links .nav-group:first-child{padding-top:10px}
  .nav-group-label{
    font-family:var(--sans);font-weight:900;font-stretch:112%;
    font-variation-settings:'wdth' 112,'wght' 900;
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  }
  .nav-links li.nav-tile{width:50%}
  .nav-links li.nav-tile a{
    display:flex;align-items:center;gap:8px;height:100%;
    min-height:54px;padding:14px 13px;
    font-size:16px;font-weight:500;line-height:1.2;
    color:rgba(255,255,255,.9);
    border:1px solid rgba(255,255,255,.1);border-radius:2px;
    margin:0 0 8px;
  }
  .nav-links li.nav-tile:nth-of-type(odd) a{margin-right:4px}
  .nav-links li.nav-tile:nth-of-type(even) a{margin-left:4px}
  .nav-links li.nav-tile a:active,
  .nav-links li.nav-tile a:hover{
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;
  }
  /* one arrow on every tile, nudging right when tapped */
  .nav-links li.nav-tile .nt-i{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:14px;height:14px;color:var(--red);
  }
  .nav-links li.nav-tile .nt-i svg{
    width:14px;height:14px;display:block;
    transition:transform .18s cubic-bezier(.2,.8,.3,1);
  }
  .nav-links li.nav-tile a:active .nt-i svg,
  .nav-links li.nav-tile a:hover .nt-i svg,
  .nav-links li.nav-tile a:focus-visible .nt-i svg{
    transform:translateX(4px);
  }
  @media (prefers-reduced-motion: reduce){
    .nav-links li.nav-tile .nt-i svg{transition:none}
  }
  .nav-links .nav-connect{width:100%;padding-left:4px;padding-right:4px}
}
@media (max-width:359px){
  .nav-links li.nav-tile{width:100%}
  .nav-links li.nav-tile a{margin-left:0 !important;margin-right:0 !important}
}

/* The menu is the navigation, so let it use more of the screen rather than
   scrolling inside itself. Verified against a 375x844 phone, where "Elected
   Officials" wraps to two lines and pushed the panel past the old 74vh cap. */
@media (max-width:820px){
  .nav-links{max-height:88vh}
}

/* ===== Add to Google Calendar ===== */
.cal-gcal{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:10px;padding:8px 12px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy-700);text-decoration:none;
  border:1px solid var(--line-dark);border-radius:2px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.cal-gcal svg{width:14px;height:14px;flex:0 0 14px}
.cal-gcal:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* inside the dark pinned card */
.cal-pin .cal-gcal{
  margin-top:14px;color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.28);
}
.cal-pin .cal-gcal:hover{background:var(--red);border-color:var(--red);color:#fff}

@media (max-width:600px){
  .cal-gcal{font-size:11px;padding:9px 11px}
}
#bkGcal{display:block;margin-bottom:18px}
#bkGcal .cal-gcal{
  margin-top:2px;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.28);
}
#bkGcal .cal-gcal:hover{background:var(--red);border-color:var(--red);color:#fff}

/* `1fr` is min-content-floored, so at some widths the two form columns round up
   past their container. minmax(0,1fr) lets them actually shrink. */
.form-row{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:640px){
  .form-row{grid-template-columns:minmax(0,1fr)}
}

/* ===== Header must never grow on scroll =====
   The desktop and <=820px ".nav.scrolled" brand sizes outrank the smaller
   base sizes set for narrower screens, so on tablets and small phones the
   header got TALLER once you scrolled. That moved every section link's
   landing spot. Pin the scrolled sizes to the base sizes at each width. */
@media (max-width:820px){
  .nav.scrolled .brand-text .bot{font-size:8.5px}
}
@media (max-width:460px){
  .nav.scrolled .brand-seal{width:40px;height:40px}
  .nav.scrolled .brand-text .top{font-size:13.5px}
  .nav.scrolled .brand-text .bot{font-size:6.5px}
}

/* ===== News page hero: the Chairman's portrait =====
   Desktop: breadcrumb and copy on the left, portrait on the right.
   <= 820px the page hero centers its text, so it stacks as breadcrumb,
   portrait (a smaller circle), then copy. The breadcrumb pins to the bottom
   of its row and the copy to the top of its row, so the two stay together
   however tall the portrait is. */
.page-hero.ph-with-photo .container{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"crumb photo" "copy photo";
  column-gap:clamp(40px,6vw,96px);row-gap:0;align-content:center;
}
.ph-with-photo .breadcrumb{grid-area:crumb;align-self:end}
.ph-with-photo .ph-copy{grid-area:copy;align-self:start;min-width:0}
.ph-portrait{
  grid-area:photo;align-self:center;
  margin:0;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.ph-portrait img{
  display:block;width:clamp(190px,17vw,250px);height:auto;aspect-ratio:1/1;
  border-radius:50%;object-fit:cover;object-position:center 30%;
  border:3px solid var(--gold);
  box-shadow:0 0 0 9px rgba(201,169,97,0.12), 0 30px 60px -24px rgba(0,0,0,0.75);
}
.ph-portrait figcaption{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.ph-name{
  font-family:var(--serif);font-weight:400;font-synthesis:none;
  font-size:22px;line-height:1.1;color:#fff;
}
.ph-role{
  font-family:var(--sans);font-weight:900;font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);
}
@media (max-width:820px){
  .page-hero.ph-with-photo .container{grid-template-columns:minmax(0,1fr);grid-template-areas:"crumb" "photo" "copy"}
  .ph-portrait{gap:10px;margin-bottom:26px}
  .ph-portrait img{width:112px;border-width:2px;box-shadow:0 0 0 6px rgba(201,169,97,0.12), 0 18px 36px -18px rgba(0,0,0,0.7)}
  .ph-name{font-size:18px}
  .ph-role{font-size:9px}
}
@media (max-width:400px){
  .ph-portrait img{width:96px}
}