/* Alaska's Caregivers — SEIU 775 Quality Care Committee
   Design system sampled directly from the 2026 mailer set. */

:root{
  --purple:#3D2780;
  --purple-deep:#2A1A5C;
  --purple-ink:#1C1240;
  --purple-lift:#7755B0;
  --orange:#F36025;
  --gold:#F3CA20;
  --paper:#FBF9F4;
  --paper-warm:#F2EDE3;
  --ink:#241a3f;

  --shell:1220px;
  --pad:clamp(20px,4vw,34px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto matters: every wordmark <img> carries width/height attributes (811x238),
   and without this the used height stayed 238px while CSS set the width — the script
   was rendering stretched (217x238 in the trust card plate) on every page. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}

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

/* ---------------------------------------------------------------- nav */
.nav{background:var(--purple-ink);color:#fff;position:sticky;top:0;z-index:40}
.nav .shell{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:66px}
/* one right-aligned cluster: links, Facebook icon, then the SEIU mark.
   A single link stranded on the far left read as an empty bar. */
.nav-right{display:flex;align-items:center;gap:clamp(16px,2.2vw,26px)}
.nav-brand{display:flex;align-items:center;text-decoration:none;padding:6px 0}
/* horizontal lockup composed from the square one — the stacked version is
   unreadable at nav height, and the bare star cluster reads as noise */
.nav-brand img{
  height:30px;width:auto;object-fit:contain;flex:none;
  opacity:.95;transition:opacity .15s;
}
@media(max-width:520px){.nav-brand img{height:25px}}
.nav-brand:hover img{opacity:1}
.nav-fb{display:inline-flex;color:#E4DBFA;transition:color .15s}
.nav-fb svg{width:26px;height:26px;display:block}
.nav-fb:hover{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.nav-links a{
  text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#E4DBFA;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:620px){
  .nav .shell{min-height:60px}
  .nav-links a{font-size:11.5px;letter-spacing:.05em}
  .nav-brand span{display:none}
}
@media(max-width:430px){
  .nav-links a{font-size:11px;letter-spacing:.03em}
}

/* --- hero variant: subject too small to hold a portrait crop, so the wide
       frame is used deliberately (Keller, Jimmie) --- */
.cp-hero--band .cp-hero-grid{grid-template-columns:1fr;min-height:0}
.cp-hero--band .cp-hero-copy{padding-bottom:clamp(34px,4vw,52px)}
.cp-hero--band .cp-hero-copy>*{max-width:none}
.cp-hero--band .cp-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* stacked band (narrow): 16:9 floor, photo above the type */
.cp-hero--band .cp-hero-photo::after{padding-top:56.25%}
.cp-hero--band .cp-hero-photo img{object-position:center 45%}
/* Stacked, the photo sits ABOVE the type, so the hand-off belongs at the bottom
   edge where the two meet. A top wash landed straight across the subject's head
   (both band photos put their subject high in a 1680x720 frame) and read as the
   face being dimmed out. */
.cp-hero--band .cp-hero-photo::before{
  content:"";position:absolute;inset:auto 0 -1px 0;width:auto;height:34%;z-index:1;
  background:linear-gradient(180deg,rgba(61,39,128,0) 0,rgba(61,39,128,.14) 30%,rgba(61,39,128,.4) 56%,rgba(61,39,128,.74) 80%,var(--purple) 100%);
}
@media(min-width:1041px){
  /* The band now sits BEHIND the type rather than under it, so the right half is
     no longer dead space — the subject is in it, and both band photos put their
     subject right of centre. That makes left-aligned type the correct choice here
     (it was centred only because the photo carried no type at all), and it puts
     the check-bar in the first screen. Ink hand-off left-to-right, as on the mailer. */
  .cp-hero--band .cp-hero-grid{position:relative}
  .cp-hero--band .cp-hero-photo{position:absolute;inset:0;z-index:0}
  .cp-hero--band .cp-hero-photo::after{content:none}
  .cp-hero--band .cp-hero-photo img{object-position:66% 45%}
  /* Match the portrait pages: the copy sits on SOLID --purple, which then hands
     off into the photo. Fading from --purple-ink instead made the band pages read
     as near-black behind the type rather than as the purple panel. */
  .cp-hero--band .cp-hero-photo::before{
    inset:0;width:auto;height:auto;
    background:linear-gradient(90deg,var(--purple) 0,var(--purple) 24%,rgba(61,39,128,.9) 34%,rgba(61,39,128,.7) 42%,rgba(61,39,128,.5) 50%,rgba(61,39,128,.3) 58%,rgba(61,39,128,.14) 66%,rgba(61,39,128,.04) 76%,rgba(61,39,128,0) 86%);
  }
  .cp-hero--band .cp-hero-copy{
    position:relative;z-index:2;background:transparent;
    max-width:64%;min-height:540px;
    padding-block:clamp(52px,6vw,86px);
  }
  .cp-hero--band .cp-hero-copy>*{max-width:620px}
  .cp-hero--band .cp-hero-copy .cp-desc{max-width:34ch}
  .cp-hero--band .cp-hero-copy .cp-body{max-width:46ch}
  .cp-hero--band .cp-hero-copy .callbar{max-width:560px}
}

/* ------------------------------------------------------------- devices */
.swoosh{display:block;height:auto;width:min(300px,62%);margin:14px 0 0}

/* the mailer's orange check-bar + purple tag stack */
.callbar{margin-top:clamp(24px,3vw,34px);max-width:620px}
.callbar-main{
  display:flex;align-items:center;gap:clamp(14px,2vw,20px);
  background:var(--orange);color:#fff;
  padding:clamp(14px,2vw,20px) clamp(18px,2.4vw,26px);
  border-radius:14px 14px 0 0;
  text-decoration:none;
}
a.callbar-main{transition:filter .15s,transform .15s}
a.callbar-main:hover{filter:brightness(1.06)}
.callbar-check{flex:none;width:clamp(42px,5vw,56px);height:auto}
.callbar-main .vote{
  display:block;font-weight:900;color:var(--purple);
  font-size:clamp(19px,2.5vw,30px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;
}
.callbar-main .office{
  display:block;font-weight:800;color:#fff;
  font-size:clamp(12.5px,1.55vw,18px);line-height:1.15;letter-spacing:.02em;text-transform:uppercase;margin-top:3px;
}
.callbar-tag{
  background:var(--purple-ink);color:#fff;
  padding:clamp(13px,1.8vw,17px) clamp(18px,2.4vw,26px);
  border-radius:0 0 26px 14px;
  font-weight:800;font-size:clamp(12.5px,1.5vw,17px);line-height:1.28;
  letter-spacing:.02em;text-transform:uppercase;
}

/* --------------------------------------------------------- hub: hero */
.hub-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 130% at 50% -30%, var(--purple) 0%, var(--purple-deep) 58%, var(--purple-ink) 100%);
  color:#fff;text-align:center;
  padding:clamp(46px,7vw,84px) 0 clamp(52px,7vw,86px);
}
.hub-hero::after{
  content:"";position:absolute;inset:auto 0 0;height:8px;
  background:linear-gradient(90deg,var(--orange) 0 34%,var(--gold) 34% 100%);
}
.hub-star{
  position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:url("https://alaskacaregivers.org/assets/starmark.png") center 46% / min(520px,78%) no-repeat;
}
.hub-hero .shell{position:relative}
.hub-wordmark{width:min(680px,88%);margin:0 auto}
.hub-hero h1{
  margin:clamp(22px,3vw,32px) auto 0;max-width:16ch;
  font-size:clamp(27px,4.3vw,50px);font-weight:900;line-height:1.08;letter-spacing:-.018em;
}
.hub-hero h1 em{font-style:normal;color:var(--gold)}

/* ---------------------------------------------------- hub: candidates */
.section{padding:clamp(52px,7vw,88px) 0}

.roster{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);
}
@media(max-width:940px){.roster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.roster{grid-template-columns:1fr}}

.cand{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--purple);border-radius:18px;overflow:hidden;
  box-shadow:0 14px 34px rgba(28,18,64,.17);
  transition:transform .18s,box-shadow .18s;
}
.cand:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(28,18,64,.26)}
.cand-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--purple-deep)}
.cand-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cand:hover .cand-photo img{transform:scale(1.035)}
.cand-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(42,26,92,.72) 100%);
}
.cand-seat{
  position:absolute;left:14px;bottom:12px;z-index:1;
  background:rgba(28,18,64,.76);backdrop-filter:blur(3px);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;
}
.cand-body{padding:20px 22px 24px;color:#fff;display:flex;flex-direction:column;flex:1}
.cand-body h3{
  font-size:clamp(23px,2.5vw,28px);font-weight:900;color:var(--gold);
  line-height:1.02;letter-spacing:-.015em;text-transform:uppercase;
}
.cand-trust{
  margin-top:11px;color:#fff;font-size:14.5px;font-weight:600;line-height:1.4;
}
.cand-trust b{color:var(--gold);font-weight:900}
.cand-role{
  margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.15);
  color:#CFC3EE;font-size:13.5px;font-weight:600;line-height:1.45;
}
.cand-cta{
  margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.17);
  display:flex;align-items:center;gap:11px;
  color:#fff;font-weight:900;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
}
.cand-cta svg{flex:none;width:26px;height:26px}
.cand-cta .arrow{margin-left:auto;color:var(--gold);font-size:19px;transition:transform .18s}
.cand:hover .cand-cta .arrow{transform:translateX(4px)}

/* ------------------------------------------------ candidate page hero */
/* No overflow clipping here. The photo column used to fix the row height with
   aspect-ratio while this element hid the overflow, so any copy taller than the
   photo was silently cut — which tracked copy LENGTH, not viewport width, and so
   reappeared at 1280px on short pages and persisted to 1100px on long ones.
   The ratio is now a FLOOR (in-flow ::after spacer) and the row is free to grow,
   so no combination of width and copy length can cut the check-bar. */
.cp-hero{position:relative;background:var(--purple-deep);color:#fff}
/* The photo column is sized so it IS 4:5 — the same ratio the hero crops are cut
   to. Previously the column was 1fr/1fr and ~1.09 wide, so object-fit:cover
   re-cropped every portrait and sliced the tops off heads. */
/* Photo carries the hero: it takes the larger share of the grid. The ratio floor
   stays at 4:5 — it must match the crop ratio of the source portraits (1080×1350),
   or object-fit:cover re-crops them and slices heads/shoulders. Adjust dominance
   with the column share, never with this number. */
.cp-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch}
.cp-hero-copy{
  position:relative;z-index:2;background:var(--purple);
  padding:clamp(38px,5vw,68px) clamp(24px,3.6vw,56px) clamp(40px,5vw,66px);
  display:flex;flex-direction:column;justify-content:center;
}
.cp-hero-copy>*{max-width:640px}
.cp-hero-photo{position:relative;background:var(--purple-ink);overflow:hidden}
/* 4:5 as a minimum, not a maximum: the spacer sets the shortest the column may be,
   and a taller copy column simply makes the row taller. */
.cp-hero-photo::after{content:"";display:block;padding-top:125%}
.cp-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
/* soft hand-off from the purple panel into the photo, as on the mailer */
.cp-hero-photo::before{
  content:"";position:absolute;inset:0 auto 0 -1px;width:38%;z-index:1;
  background:linear-gradient(90deg,var(--purple) 0,rgba(61,39,128,.78) 12%,rgba(61,39,128,.5) 26%,rgba(61,39,128,.28) 42%,rgba(61,39,128,.14) 58%,rgba(61,39,128,.05) 76%,rgba(61,39,128,0) 100%);
}
/* Per-candidate: portraits where the subject sits close to the left edge (Gina).
   Two moves: scale the image slightly and anchor it left so the subject shifts
   right, out of the fade; and pull the hand-off back to a short, low-opacity
   wash that never reaches the head. */
/* Gina's subject sits at the very left edge of a 4:5 crop in a 4:5 frame, so there
   is almost no horizontal slack: a wide fade touches her hair, and scaling the
   image for clearance crops in too close. Short, solid-start fade + modest slack
   is the best balance until a re-cut portrait with left headroom is supplied. */
.cp-hero-photo--tight-fade img{width:112%;max-width:none;right:auto}
/* The gradient must START at full --purple: the copy panel beside it is solid,
   so any opacity below 1 at the 0 stop reads as a hard seam. Softness comes from
   the falloff curve, not from a lower starting opacity. */
.cp-hero-photo--tight-fade::before{
  width:34%;
  background:linear-gradient(90deg,var(--purple) 0,rgba(61,39,128,.9) 8%,rgba(61,39,128,.66) 18%,rgba(61,39,128,.44) 30%,rgba(61,39,128,.28) 42%,rgba(61,39,128,.17) 55%,rgba(61,39,128,.1) 68%,rgba(61,39,128,.05) 82%,rgba(61,39,128,.01) 93%,rgba(61,39,128,0) 100%);
}
@media(max-width:1040px){
  .cp-hero-photo--tight-fade img{width:100%}
  .cp-hero-photo--tight-fade::before{width:auto}
}
/* Per-candidate STOPGAP: joy-beth-cottle-portrait.jpg has ~310px (29% of width)
   of outpainted, visibly smeared pixels down its left edge. Scaling to 138% and
   anchoring right pushes the whole band outside the frame, but at that zoom
   object-fit:cover also drops ~27% off the bottom, so the focus point is lifted
   to keep her head and vest in frame. Replace with a clean re-cut portrait
   (source x >= 310, re-cut to 4:5) and delete this rule. */
.cp-hero-photo--trim-left img{width:141%;max-width:none;left:auto;right:0;object-position:100% 46%}

/* Per-candidate: kathy-simpler-portrait.jpg carries a black bar across the bottom
   ~4% of the frame, and is composed off-centre (head at ~60% of source width, with
   only ~4.4% of clear space to the right of her shoulder). Over-extending the box
   vertically both clips the bar and — because cover then scales the image wider
   than the frame — creates the horizontal slack; object-position:100% throws all
   of that trim off the LEFT, pulling her toward centre (~53%). A properly centred
   crop still needs a re-supplied portrait. */
.cp-hero-photo--shift-left img{height:116%;bottom:auto;object-position:100% 0}

/* Per-candidate: Lisa's hero is lisa-keller-street.png (1774x887, supplied by the
   campaign). The original lisa-keller-band.jpg could not be used at any crop — she
   stands ~4px from the top of that file, so it contains no crown and every zoom cut a
   straight line through her hair.
   Geometry: the band photo frame is full-bleed (inset:0 over the hero grid), so cover
   scales this 2.0-ratio source by width and leaves only vertical overflow; framing is
   therefore done with scale + transform-origin rather than object-position. She stands
   at ~76% of the source width, head top at y=125 and shoulders at y=250 of 887.
   scale(2.4) about 78% 19% brings that to head-and-shoulders sitting at ~42% of the
   frame height and ~72% of its width — clear of the copy column on the left, with
   ~8% headroom above her hair. Upscale is ~2x. Origin percentages are frame-relative,
   so framing drifts slightly across breakpoints; within tolerance. */
.cp-hero--band .cp-hero-photo--zoom{background:var(--purple)}
.cp-hero--band .cp-hero-photo--zoom img{
  transform:scale(2.4);transform-origin:78% 19%;object-position:center top;
  filter:brightness(1.06) contrast(1.05) saturate(1.03);
}

/* Single column until 1040px. Below that the copy column is too narrow for the
   check-bar to hold one line — “Vote Kathy Simpler” and “Vote Danni Hall” both
   wrapped inside the orange bar, and names broke mid-phrase. */
@media(max-width:1040px){
  .cp-hero-grid{grid-template-columns:1fr}
  .cp-hero-photo{order:-1}
  /* The portrait files are already tight head-and-shoulders crops, so a landscape
     stacked frame plus object-position:top lands on the forehead. Keep the 4:5
     ratio, cap it in px so tablets don't get a 700px photo block before any copy,
     and drop the focus point to the eye line. */
  /* The frame stays 4:5 at every width — padding-top is a % of WIDTH, so capping
     it with px/vh changes the RATIO, not the size, and re-crops the face. The
     photo spans the column full-bleed; no height cap. */
  .cp-hero-photo{width:100%}
  .cp-hero-photo::after{padding-top:125%}
  .cp-hero-photo img{object-position:center 30%}
  /* the trim-left crop must keep its own focus point here too */
  .cp-hero-photo--trim-left img{object-position:100% 46%}
  .cp-hero-photo--shift-left img{object-position:100% 0}
  .cp-hero-photo::before{inset:auto 0 -1px 0;width:auto;height:56%;
    background:linear-gradient(180deg,rgba(61,39,128,0) 0,rgba(61,39,128,.05) 20%,rgba(61,39,128,.14) 38%,rgba(61,39,128,.3) 56%,rgba(61,39,128,.55) 74%,rgba(61,39,128,.84) 90%,var(--purple) 100%)}
  .cp-hero-copy>*{max-width:none}
}
.cp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:rgba(255,255,255,.13);border-radius:99px;padding:7px 15px;margin-bottom:20px;
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#EBE3FF;
}
.cp-eyebrow::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--gold)}
.cp-lead{
  font-size:clamp(18px,2.5vw,31px);font-weight:800;line-height:1.12;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.cp-name{
  margin-top:6px;font-size:clamp(38px,6.4vw,76px);font-weight:900;color:var(--gold);
  line-height:.94;letter-spacing:-.022em;text-transform:uppercase;
}
.cp-name .verb{display:block;color:var(--gold)}
/* Three-word names ("Joy Beth Cottle") wrap to two lines at the shared size and
   push the headline to three, which stretches the copy column past the photo.
   Hold the name on one line and let the size step down to fit. */
.cp-name--long{font-size:clamp(26px,4vw,54px)}
.cp-name--long .nm{display:block;white-space:nowrap}
.cp-desc{
  margin-top:22px;font-size:clamp(15px,1.75vw,19px);font-weight:800;line-height:1.35;color:#fff;max-width:34ch;
}
.cp-body{margin-top:14px;font-size:clamp(14.5px,1.6vw,16.5px);color:#D9CFF3;max-width:46ch;line-height:1.6}

/* ------------------------------------------- candidate page: platform */
.cp-plat{background:var(--paper);padding:clamp(52px,7vw,86px) 0}
.cp-plat-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.6vw,60px);align-items:center}
@media(max-width:880px){.cp-plat-grid{grid-template-columns:1fr}}
/* Trust card: photo above, wordmark on its own ink plate below. The plate used to
   be pinned inside a 4:5 frame where it took the bottom 43% of the picture, so the
   script landed on the subject’s chin or chest and everything below the shoulders
   was lost to gradient — and five of the six alt photos are wide group or landscape
   shots being squeezed into portrait to get there. 16:10 is close to their native
   ratio, and the script finally has a clean ground. */
.trustcard{
  position:relative;display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;background:var(--purple-ink);
  box-shadow:0 16px 40px rgba(28,18,64,.2);
}
/* ASSET REQUEST — refinement, not a blocker: Cottle’s alt file is the one tight
   portrait in the alt set, so a 16:10 crop of it loses more than the others do.
   A 16:10 version of joy-beth-cottle-alt.jpg framed chest-up would sit better here.
   Nothing on the site references such a file today. */
.trustcard>img{
  position:static;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;object-position:center 30%;
}
.trustcard-plate{
  position:static;background:var(--purple-ink);
  padding:20px 22px 22px;text-align:center;
}
.trustcard-plate img{width:min(250px,72%);margin:0 auto;aspect-ratio:auto}
.trustcard-plate p{
  margin-top:8px;color:var(--gold);font-weight:900;font-size:clamp(15px,1.9vw,20px);
  letter-spacing:.01em;text-transform:uppercase;
}
.cp-plat h2{
  color:var(--purple);font-size:clamp(26px,3.7vw,42px);font-weight:900;line-height:1.08;
  letter-spacing:-.02em;text-transform:uppercase;
}
.cp-plat h2 em{font-style:normal;color:var(--orange);display:block}
.cp-plat .pitch{margin-top:22px;color:var(--purple);font-weight:800;font-size:clamp(16.5px,1.95vw,21px);line-height:1.4;max-width:44ch}
.cp-plat .detail{margin-top:16px;color:#4d4468;font-size:clamp(15px,1.7vw,17px);max-width:52ch}

/* pillars (Jimmie) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px);margin-top:clamp(30px,4vw,44px)}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{background:#fff;border-radius:16px;padding:24px 22px 26px;box-shadow:0 8px 24px rgba(28,18,64,.09);border-top:5px solid var(--gold)}
.pillar h3{color:var(--purple);font-size:17px;font-weight:900;line-height:1.2;text-transform:uppercase;letter-spacing:-.005em}
.pillar p{margin-top:10px;color:#524a6d;font-size:14.5px;line-height:1.55}

/* closing call */
.cp-close{background:var(--purple-ink);color:#fff;padding:clamp(46px,6vw,74px) 0;text-align:center}
.cp-close h2{font-size:clamp(24px,3.3vw,36px);font-weight:900;line-height:1.14;letter-spacing:-.015em;max-width:20ch;margin-inline:auto}
.cp-close h2 em{font-style:normal;color:var(--gold)}
.cp-close .callbar{margin-inline:auto}
.cp-close .callbar-tag{background:var(--purple)}
.backlink{
  display:inline-flex;align-items:center;gap:8px;margin-top:30px;
  color:#C6B7EC;text-decoration:none;font-weight:800;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;
}
.backlink:hover{color:var(--gold)}

/* ------------------------------------------------------------ footer */
footer{background:#150E2E;color:#B9AEDA;padding:clamp(40px,5vw,58px) 0 clamp(44px,5vw,58px);font-size:13px}
/* The footer is the nav's bookend: same horizontal lockup, same Facebook icon,
   same link treatment. The old version used the bare star cluster in a
   translucent tile at 50px, which was illegible and competed with the nav mark,
   plus a stacked "SEIU 775 / Alaska's Caregivers" that the lockup already says. */
.foot-top{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;text-decoration:none}
.foot-brand img{height:34px;width:auto;object-fit:contain;opacity:.9;transition:opacity .15s}
.foot-brand:hover img{opacity:1}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.2vw,26px)}
.foot-links a{
  text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#E4DBFA;border-bottom:2px solid transparent;padding:4px 0;
  transition:color .15s,border-color .15s;
}
.foot-links a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.foot-links .nav-fb{border-bottom:0;padding:0}
@media(max-width:520px){.foot-brand img{height:28px}.foot-links a{font-size:11.5px}}
.disclaimer{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  line-height:1.7;max-width:88ch;font-size:12.5px;color:#A99CCE;
}
.disclaimer b{color:#fff;font-weight:800}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .cand:hover{transform:none}
  .cand:hover .cand-photo img{transform:none}
}