/* ==========================================================================
   Back Bettina — Bettina Gese (R), Pierce County Council District #5
   Visual direction: navy-dominant campaign layout modeled on cobiclark.com,
   retargeted to the Back Bettina brand (hot pink + navy, Acme + Yellowtail).
   ========================================================================== */

:root{
  /* Brand */
  --pink:        #f00090;
  --pink-lift:   #ff2ba6;
  --pink-deep:   #c00074;
  --navy:        #102030;
  --navy-deep:   #0a1724;
  --navy-card:   #182c42;
  --navy-line:   #24405c;
  --white:       #ffffff;
  --mist:        #c3d2e2;
  --mist-dim:    #93a7bd;
  --paper:       #f4f7fa;
  --grey-band:   #e9eef4;
  --ink:         #374b60;

  /* Type */
  --display: 'Acme', 'Arial Black', system-ui, sans-serif;
  --script:  'Yellowtail', cursive;
  --body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --wrap: 1200px;
  --wrap-read: 1500px;
  --gut: clamp(20px, 5vw, 48px);
  --band: clamp(56px, 8vw, 104px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:120px; }

body{
  margin:0;
  background:var(--navy);
  color:var(--mist);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pink-lift); }

:focus-visible{
  outline:3px solid var(--pink-lift);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--read{ max-width:var(--wrap-read); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--white);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.005em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.4rem, 6.2vw, 4.4rem); text-transform:uppercase; }
h2{ font-size:clamp(1.85rem, 4vw, 2.9rem); text-transform:uppercase; }
h3{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); text-transform:uppercase; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.script{
  font-family:var(--script);
  color:var(--pink);
  text-transform:none;
  letter-spacing:0;
  line-height:1.3;
}

.eyebrow{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  color:var(--pink);
  margin:0 0 .9rem;
}

.lede{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--white); }

/* ---------- Signature: Coast Salish form divider ---------- */
/* Replaces the reference site's star divider. The trigon–ovoid–trigon
   form nods to the Coast Salish salmon artwork used with the Puyallup
   Tribe endorsement. */
.salish{ display:block; width:min(300px,72%); height:auto; margin:1.1rem auto 1.6rem; color:var(--pink); }
.salish--left{ margin-inline:0; width:220px; }
.salish--faint{ color:var(--navy-line); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.95rem;
  padding:.95em 2.1em;
  border-radius:999px;
  text-decoration:none;
  border:2px solid transparent;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--pink{ background:var(--pink); color:var(--white); }
.btn--pink:hover{ background:var(--pink-lift); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--white); color:var(--white); }
.btn--ghost:hover{ background:var(--white); color:var(--navy); transform:translateY(-2px); }
.btn--ghost-pink{ border-color:var(--pink); color:var(--pink); }
.btn--ghost-pink:hover{ background:var(--pink); color:var(--white); transform:translateY(-2px); }
.btn--sm{ padding:.7em 1.5em; font-size:.82rem; }

/* ==========================================================================
   HEADER — three tiers, as on the reference site
   ========================================================================== */
.topbar{ background:var(--pink); color:var(--white); font-size:.8rem; }
.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  align-items:center; justify-content:space-between;
  padding-block:.5rem;
}
.topbar b{ font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-weight:400; white-space:nowrap; }
.topbar a{ color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
.topbar a:hover{ border-bottom-color:var(--white); }
.topbar-contact{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.topbar-contact a{ white-space:nowrap; }

.logobar{ background:var(--white); }
.logobar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem); padding-block:1.1rem;
}
.logobar-brand{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); min-width:0; text-decoration:none; }
.logobar-map{ width:clamp(60px, 9vw, 116px); flex:none; }
.logobar-logo{ width:clamp(230px, 34vw, 430px); }
.logobar-right{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); }

.navbar{ background:var(--navy-deep); border-block:1px solid var(--navy-line); position:sticky; top:0; z-index:40; }
.navbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav{ display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.nav a{
  display:block;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.13em;
  font-size:.85rem; color:var(--white); text-decoration:none;
  padding:1.15rem 1.35rem;
  border-bottom:3px solid transparent;
}
.nav a:hover{ color:var(--pink-lift); border-bottom-color:var(--pink); }
.nav a[aria-current="page"]{ color:var(--pink); border-bottom-color:var(--pink); }
.navbar .btn{ margin-block:.55rem; }
.navbar-donate{ display:none; }

.navtoggle{
  display:none; align-items:center; gap:.65rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.8rem; color:var(--white); padding:1rem .2rem;
}
.navtoggle-bars{ display:block; width:22px; height:16px; position:relative; }
.navtoggle-bars span{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:var(--pink); transition:transform .22s ease, opacity .16s ease;
}
.navtoggle-bars span:nth-child(1){ top:0; }
.navtoggle-bars span:nth-child(2){ top:7px; }
.navtoggle-bars span:nth-child(3){ top:14px; }
.navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   SECTION BANDS
   ========================================================================== */
.band{ padding-block:var(--band); }
.band--navy{ background:var(--navy); }
.band--deep{ background:var(--navy-deep); }
.band--white{ background:var(--paper); color:var(--ink); }
.band--white h2,.band--white h3{ color:var(--navy); }
.band--grey{ background:var(--grey-band); color:var(--ink); }
.band--grey h2,.band--grey h3{ color:var(--navy); }
.band--pink{ background:var(--pink); color:#ffe3f3; }
.band--pink h2{ color:var(--white); }
.band--pink .salish{ color:rgba(255,255,255,.85); }
.band--pink .eyebrow{ color:rgba(255,255,255,.8); }
.center{ text-align:center; }
.measure{ max-width:64ch; margin-inline:auto; }

/* ==========================================================================
   HOME — hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 108%, rgba(240,0,144,.42) 0%, rgba(240,0,144,0) 58%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.hero::after{ /* tide line */
  content:""; position:absolute; inset:auto 0 0 0; height:6px;
  background:linear-gradient(90deg,var(--pink) 0 33%, var(--navy-line) 33% 100%);
}
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1rem,4vw,3rem);
  align-items:end; padding-top:clamp(2.5rem,6vw,4.5rem);
}
.hero-copy{ padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.hero .script{ font-size:clamp(1.4rem,2.7vw,1.95rem); display:block; margin-bottom:.25rem; }
.hero h1 .lb{ display:block; }
.hero h1 em{ font-style:normal; color:var(--pink); }
.hero p{ max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.6rem; }

.hero-figure{ position:relative; align-self:end; }
.hero-figure::before{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%,430px); aspect-ratio:1; border-radius:50%;
  background:var(--pink); opacity:.9;
}
.hero-figure img{ position:relative; width:min(100%,440px); margin-inline:auto; }

/* ---------- Priority icon strip ---------- */
.iconstrip{ background:var(--white); border-bottom:1px solid #dfe7ef; }
.iconstrip ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.iconstrip li + li{ border-left:1px solid #e4ebf2; }
.iconstrip a{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:1.9rem .8rem; text-decoration:none; text-align:center;
  color:var(--navy); transition:background-color .18s ease;
}
.iconstrip a:hover{ background:#fdf0f7; }
.iconstrip a:hover svg{ color:var(--pink-deep); }
.iconstrip svg{ width:44px; height:44px; color:var(--pink); }
.iconstrip span{
  font-family:var(--display); text-transform:uppercase;
  font-size:.76rem; letter-spacing:.1em; line-height:1.35;
}

/* ---------- Heritage & endorsement ---------- */
.endorse-head .eyebrow{ margin-top:1.2rem; }
.endorse-seal{
  display:inline-grid; place-items:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--white); border:3px solid var(--pink);
  overflow:hidden; margin-inline:auto;
}
.endorse-seal img{ width:100%; height:100%; object-fit:cover; }
.endorse-script{
  display:block; font-size:clamp(1.35rem,2.6vw,1.8rem); margin:.1rem 0 .35rem;
}
.endorse-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.8rem,5vw,4rem); align-items:center; margin-top:2.2rem;
}
.endorse-testimony{ max-width:56ch; }
.endorse-testimony p{ font-size:1.05rem; color:var(--mist); }
.endorse-creds{
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; margin:1.4rem 0 .6rem;
}
.endorse-creds span{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--white);
  border:1px solid var(--navy-line); border-radius:999px;
  padding:.5em .95em; white-space:nowrap;
}
.endorse-creds span::before{
  content:""; display:inline-block; width:.45rem; height:.45rem; border-radius:50%;
  background:var(--pink); margin-right:.45em; vertical-align:.06em;
}
.endorse-testimony .attrib{ margin-top:.4rem; }

/* Family archive fan */
.archive{ max-width:480px; margin-inline:auto; width:100%; }
.archive-fan{ list-style:none; margin:0; padding:0; position:relative; }
.archive-fan li{
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.archive-fan li:nth-child(1){ width:60%; transform:rotate(-2.4deg); z-index:1; }
.archive-fan li:nth-child(2){
  width:48%; margin:-16% 0 0 auto; transform:rotate(2.1deg); z-index:2;
}
.archive-fan li:nth-child(3){
  width:46%; margin:-14% 0 0 8%; transform:rotate(-1.7deg); z-index:3;
}
.archive-fan figure{
  margin:0; background:var(--white); padding:.55rem .55rem .6rem;
  border-radius:2px; box-shadow:0 16px 38px rgba(0,0,0,.42);
}
.archive-fan img{ width:100%; border-radius:1px; filter:saturate(0) contrast(1.06); }
.archive-fan li:hover{ transform:rotate(0) translateY(-5px); }
.archive-caption{
  margin-top:1.6rem; text-align:center;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--mist-dim);
}

/* ---------- Priority cards ---------- */
.cards{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1.35rem; margin-top:2.5rem; margin-inline:auto; max-width:1060px;
  list-style:none; padding:0;
}
.cards li{ grid-column:span 3; display:flex; }
.card{
  flex:1; color:var(--mist);
  background:var(--navy-card);
  border-top:4px solid var(--pink);
  border-radius:4px;
  padding:1.9rem 1.6rem;
}
.card svg{ width:38px; height:38px; color:var(--pink); margin-bottom:.9rem; }
.card h3{ font-size:1.12rem; }
.card h4{ font-size:1.12rem; }
.card p{ font-size:.95rem; color:var(--mist); }
.card--link{ text-decoration:none; display:block; transition:transform .18s ease, background-color .18s ease; }
.card--link:hover{ transform:translateY(-4px); background:#1f3550; }

/* ---------- Featured priorities (divider rows on white, same language as Issues) ---------- */
.priorities-intro{ max-width:64ch; margin-inline:auto; }
.priority-feature{
  display:grid; grid-template-columns:118px 1fr; gap:clamp(1.4rem,4vw,3rem);
  align-items:start;
  padding:clamp(1.8rem,4vw,2.8rem) 0;
  border-top:1px solid #d8e1ea;
  margin-top:2.5rem;
}
.priority-feature h3{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.2rem; }
.priority-feature .salish{ margin:.7rem 0 1.2rem; }
.priority-feature .issue-mark{ width:96px; height:96px; }
.priority-feature .issue-mark svg{ width:46px; height:46px; }
.priority-feature > div > p{ max-width:78ch; }
.cards-subhead{
  margin-top:3rem; padding-top:2rem; border-top:1px solid #d8e1ea;
  font-size:clamp(1.05rem,1.8vw,1.3rem); color:#6b7f95;
}
.pullquote{ max-width:56ch; }
.center .pullquote{ margin-inline:auto; }
.pullquote blockquote{
  margin:0; font-family:var(--display); font-size:clamp(1.2rem,2.4vw,1.75rem);
  line-height:1.4; color:var(--white); text-transform:none;
}
.pullquote blockquote::before{ content:"\201C"; color:var(--pink); }
.pullquote blockquote::after{ content:"\201D"; color:var(--pink); }
.attrib{
  font-family:var(--script); color:var(--pink); font-size:1.5rem; margin-top:.8rem;
}

/* ---------- Split (image + text) ---------- */
.split .wrap{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,5vw,4rem); align-items:center;
}
.split--flip .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; border-radius:4px; position:relative; z-index:1; }
.split-media > img{ aspect-ratio:4/5; object-fit:cover; object-position:center 35%; }
.split-media::after{
  content:""; position:absolute; inset:auto -16px -16px auto;
  width:46%; height:46%; border:4px solid var(--pink); border-radius:4px; z-index:0;
}
.split-media .duo{ position:relative; z-index:1; }

/* ---------- Big date / donate ask ---------- */
.bigask .huge{
  font-family:var(--display); color:var(--white);
  font-size:clamp(3.4rem,12vw,7.5rem); line-height:.92; text-transform:uppercase;
  margin:.3rem 0;
}
.bigask .huge small{ display:block; font-size:.19em; letter-spacing:.3em; color:#ffd0eb; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.35rem; margin-top:2.4rem;
}
.contact-card{
  background:var(--navy-card); border:1px solid var(--navy-line); border-radius:4px;
  padding:1.8rem; text-align:center;
}
.contact-card svg{ width:32px; height:32px; color:var(--pink); }
.contact-card .label{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--mist-dim); margin:.7rem 0 .3rem;
}
.contact-card a{
  font-family:var(--display); font-size:1.1rem; color:var(--white); text-decoration:none;
  word-break:break-word;
}
.contact-card a:hover{ color:var(--pink-lift); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.pagehero{ position:relative; }
.pagehero img{ width:100%; height:clamp(280px,42vw,520px); object-fit:cover; object-position:center 55%; }
.pagehero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,23,36,.55) 0%, rgba(10,23,36,.10) 38%, rgba(10,23,36,.86) 82%, var(--navy) 100%),
    linear-gradient(90deg, rgba(10,23,36,.72) 0%, rgba(10,23,36,0) 55%);
}
.pagehero-copy{
  position:absolute; inset:auto 0 0 0; z-index:2; padding-bottom:clamp(1.8rem,4vw,3.2rem);
}
.pagehero-copy h1{ margin-bottom:.1rem; }
.pagehero-copy .script{ display:block; font-size:clamp(1.3rem,2.6vw,1.8rem); }

.bio p + p{ margin-top:1.15em; }
/* Staggered collage: large photo, smaller one overlapping its bottom-right corner */
.duo{ position:relative; z-index:1; }
.duo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; }
.duo img:first-child{ width:74%; object-position:center 35%; }
.duo img:last-child{
  width:54%; object-position:center 25%;
  margin:-16% 0 0 auto; z-index:2;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}

.gallery{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.1rem; margin-top:2.4rem; list-style:none; padding:0;
}
.gallery figure{ margin:0; }
.gallery img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px;
  border:3px solid transparent; transition:border-color .2s ease, transform .2s ease;
}
.gallery li:hover img{ border-color:var(--pink); transform:translateY(-3px); }
.gallery figcaption{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; color:var(--mist-dim); margin-top:.6rem;
}
.band--white .gallery figcaption{ color:#5c6d84; }

/* ---------- Light-background shared tweaks ---------- */
.band--white .salish--left,
.band--grey .salish--left{ color:var(--pink-deep); }
.band--white .issue-mark,
.band--grey .issue-mark{
  background:rgba(240,0,144,.08); border-color:var(--pink-deep);
}
.band--white .issue-mark svg,
.band--grey .issue-mark svg{ color:var(--pink-deep); }

/* "Also on her desk" cards on the white priorities band */
.band--white .card{
  background:var(--white); color:var(--ink);
  border:1px solid #d8e1ea; border-top:4px solid var(--pink);
}
.band--white .card h3,.band--white .card h4{ color:var(--navy); }
.band--white .card p{ color:var(--ink); }
.band--white .card svg{ color:var(--pink-deep); }
.band--white .card--link:hover{ background:#eef3f8; transform:translateY(-4px); }
.band--white .btn--ghost-pink{ border-color:var(--pink-deep); color:var(--pink-deep); }
.band--white .btn--ghost-pink:hover{ background:var(--pink-deep); color:var(--white); }

/* ==========================================================================
   ISSUES
   ========================================================================== */
.jumpnav{ background:var(--navy-deep); border-bottom:1px solid var(--navy-line); }
.jumpnav ul{
  list-style:none; margin:0; padding:1rem 0; display:flex; flex-wrap:wrap; gap:.6rem;
  justify-content:center;
}
.jumpnav a{
  display:inline-block; text-decoration:none;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem;
  color:var(--mist); border:1px solid var(--navy-line); border-radius:999px;
  padding:.55em 1.2em;
}
.jumpnav a:hover{ color:var(--white); border-color:var(--pink); background:rgba(240,0,144,.14); }

.issue{ padding-block:var(--band); background:var(--paper); color:var(--ink); }
.issue:nth-child(even){ background:var(--grey-band); }
.issue h2{ color:var(--navy); }
.issue .lede{ color:var(--navy); font-weight:500; }
.issue .wrap{
  display:grid; grid-template-columns:130px 1fr; gap:clamp(1.2rem,4vw,3rem); align-items:start;
}
.issue-mark{
  width:118px; height:118px; flex:none; border-radius:50%;
  background:rgba(240,0,144,.12); border:2px solid var(--pink);
  display:grid; place-items:center;
}
.issue-mark svg{ width:58px; height:58px; color:var(--pink); }
.issue h2{ margin-bottom:.2rem; }
.issue .salish{ margin:.8rem 0 1.3rem; }
/* Pull-quotes on light bands: no card — they stand out through type alone */
.issue-pullquote{
  margin:1.6rem 0; padding:0; max-width:72ch;
}
.issue-pullquote blockquote{
  font-family:var(--script); letter-spacing:0;
  color:var(--navy); font-size:clamp(1.7rem,2.8vw,2.2rem); line-height:1.35;
}
.issue-pullquote .attrib{
  font-family:var(--display); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--pink-deep); margin-top:.6rem;
}

/* ==========================================================================
   VOLUNTEER FORM
   ========================================================================== */
.vform-wrap{ max-width:640px; margin-inline:auto; }
.vform-wrap h2{ margin-bottom:.2rem; }
.vform-wrap .salish{ margin:.8rem 0 1.6rem; }

.vform-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.vform-field{ margin-bottom:1.1rem; }
.vform-field label{
  display:block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.12em; font-size:.78rem; color:var(--navy); margin-bottom:.4rem;
}
.vform-field input,
.vform-field select{
  width:100%; font:inherit; color:var(--navy);
  background:var(--white); border:2px solid #cfdce8; border-radius:8px;
  padding:.7em .9em;
}
.vform-field input:focus,
.vform-field select:focus{ border-color:var(--pink); outline:none; }
.vform-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23102030' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9em center;
  padding-right:2.4em;
}
.vform-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.vform .btn{ cursor:pointer; margin-top:.4rem; }
.vform .btn[disabled]{ opacity:.65; cursor:default; transform:none; }
.vform-status{ margin:0 0 1rem; font-weight:600; color:var(--pink-deep); }
.vform-success{
  background:var(--white); border:2px solid var(--pink); border-radius:12px;
  padding:clamp(1.4rem,4vw,2.2rem); text-align:center;
}
.vform-success h3{ margin-bottom:.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--navy-deep); border-top:6px solid var(--pink); padding-block:clamp(2.5rem,5vw,4rem) 2rem; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem;
  align-items:start;
}
.footer-logo{ background:var(--white); border-radius:4px; padding:1rem 1.2rem; width:min(100%,340px); }
.footer h4{
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink); margin-bottom:.7rem;
}
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.4rem; }
.footer a{ color:var(--mist); text-decoration:none; }
.footer a:hover{ color:var(--pink-lift); }
.footer-legal{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--navy-line);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-size:.83rem; color:var(--mist-dim);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .cards li{ grid-column:span 1; }
  .iconstrip ul{ grid-template-columns:repeat(3,1fr); }
  .iconstrip li:nth-child(4){ border-left:none; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  /* Header: centered logo (donate moves down to the nav bar) */
  .logobar .wrap{ justify-content:center; }
  .logobar-map{ width:clamp(44px, 13vw, 72px); }
  .logobar .btn{ display:none; }

  /* Nav bar: hamburger left, donate right; panel overlays content below the bar */
  .navbar .wrap{ align-items:center; justify-content:space-between; gap:0; }
  .navtoggle{ display:flex; }
  .navbar-donate{ display:inline-block; }
  #primary-nav{
    position:absolute; top:100%; left:0; right:0;
    max-height:calc(100dvh - 100%); overflow-y:auto;
    background:var(--navy-deep);
    border-top:1px solid var(--navy-line);
    border-bottom:1px solid var(--navy-line);
    box-shadow:0 32px 48px -18px rgba(2,8,15,.8);
    padding:.4rem var(--gut) 1rem;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .34s;
  }
  #primary-nav.is-open{
    opacity:1; visibility:visible; transform:none;
    transition:
      opacity .24s ease,
      transform .44s cubic-bezier(.22,1,.36,1),
      visibility 0s;
  }
  #primary-nav .nav li{
    opacity:0; transform:translateY(-8px);
    transition:opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }
  #primary-nav.is-open .nav li{ opacity:1; transform:none; }
  #primary-nav.is-open .nav li:nth-child(1){ transition-delay:.07s; }
  #primary-nav.is-open .nav li:nth-child(2){ transition-delay:.12s; }
  #primary-nav.is-open .nav li:nth-child(3){ transition-delay:.17s; }
  #primary-nav.is-open .nav li:nth-child(4){ transition-delay:.22s; }
  #primary-nav.is-open .nav li:nth-child(5){ transition-delay:.27s; }
  .nav{ flex-direction:column; }
  .nav a{
    padding:.95rem .2rem; border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav li:last-child a{ border-bottom:0; }

  /* Hero: Bettina first, copy underneath */
  .hero .wrap{
    grid-template-columns:1fr; align-items:center;
    padding-top:clamp(1.4rem,5vw,2.2rem);
  }
  .hero-figure{ order:-1; width:min(76%,290px); margin-inline:auto; }
  .hero-copy{ padding-bottom:clamp(2rem,7vw,3rem); text-align:center; }
  .hero p{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  /* Heritage: testimony first, archive settles into a calmer fan */
  .endorse-grid{ grid-template-columns:1fr; }
  .endorse-testimony{ max-width:62ch; margin-inline:auto; }
  .archive{ max-width:420px; }
  .archive-fan li:nth-child(1){ width:70%; }
  .archive-fan li:nth-child(2){ width:56%; }
  .archive-fan li:nth-child(3){ width:52%; }
  .split .wrap{ grid-template-columns:1fr; }
  .split--flip .split-media{ order:0; }
  .split-media::after{ display:none; }
  .duo{ max-width:440px; margin-inline:auto; }
  .issue .wrap{ grid-template-columns:1fr; }
  .priority-feature{ grid-template-columns:1fr; gap:1.2rem; }

  /* Center the header stack (icon, heading, divider, lede, quote);
     body paragraphs stay left-aligned for readability */
  .issue .wrap > div:last-child,
  .priority-feature > div:last-child{ text-align:center; }
  .issue .wrap p,
  .priority-feature p{ text-align:left; }
  .issue .lede{ text-align:center; }
  .issue .lede,
  .issue-mark,
  .priority-feature .issue-mark{ margin-inline:auto; }
  .issue .salish--left,
  .priority-feature .salish--left{ margin-inline:auto; }
  .issue-pullquote{ margin-inline:auto; text-align:left; }
}
@media (max-width:860px){
  /* Tagline scales to stay on a single line */
  .topbar b{ letter-spacing:.05em; font-size:clamp(.62rem, 3.1vw, .8rem); }
}
@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .vform-row{ grid-template-columns:1fr; gap:0; }
  .iconstrip ul{ grid-template-columns:repeat(2,1fr); }
  .iconstrip li{ border-left:1px solid #e4ebf2; border-top:1px solid #e4ebf2; }
  .gallery{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .topbar .wrap{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .btn:hover,.gallery li:hover img,.card--link:hover,.archive-fan li:hover{ transform:none; }
}