/* Fonts: self-hosted, Latin subset, two families (display + text). Fallback metrics tuned to limit shift. */
@font-face{font-family:'Lora';src:url('/assets/fonts/lora-latin.woff') format('woff');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-latin-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-latin-semibold.woff') format('woff');font-weight:600 700;font-style:normal;font-display:swap}

/* ───────── Tokens, layer 1: primitives ───────── */
:root{
  --plum-950:#17131c; --plum-900:#221b2a; --plum-800:#2e2538; --plum-700:#3b3048; --plum-600:#51425f;
  --plum-400:#8b7d99; --plum-300:#b9adc6; --plum-200:#d7d1dc; --plum-100:#ebe6ef; --plum-50:#f6f3f8;
  --stone-200:#dcd8d2; --stone-100:#e8e5e0; --ink-900:#26232a; --ink-600:#5f5766; --white:#fff; --rose-700:#9a2639; --rose-300:#f0a3b0;

  --font-display:'Lora',Georgia,'Times New Roman',serif;
  --font-text:'Source Sans 3','Segoe UI',Helvetica,Arial,sans-serif;

  /* Type roles on a 1.25 scale */
  --type-caption:.8125rem; --type-small:.9375rem; --type-body:1.0625rem; --type-lede:1.25rem;
  --type-h3:1.375rem; --type-h2:1.75rem; --type-h1:2.75rem;

  /* 4/8 spacing scale */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;

  --section-y:clamp(3rem,8vw,5.5rem); --blend-h:.375rem; --col-gap:clamp(2rem,5vw,4rem); --cols:minmax(0,5fr) minmax(0,7fr);
  --radius:2px; --radius-button:.875rem; --radius-float:1.125rem; --nav-h:3.75rem; --measure:62ch; --container:76rem; --gutter:1.25rem;
  --motion-fast:160ms; --motion-ease:cubic-bezier(.2,.7,.2,1);

  /* ───────── Tokens, layer 2: semantic roles (light) ───────── */
  --bg:var(--white); --medallion-bg:#e6e3e6; --edge:#6f6480; --glass-bg:rgb(255 255 255/.72); --glass-solid:rgb(255 255 255/.94); --glass-border:rgb(255 255 255/.75); --shadow-float:0 1px 0 rgb(255 255 255/.6) inset,0 10px 30px rgb(23 19 28/.16); --hero-bg:var(--stone-200); --hero-bg-end:var(--stone-100); --surface:var(--plum-50); --text:var(--ink-900); --text-muted:var(--ink-600);
  --border:var(--plum-200); --brand:var(--plum-700); --link:var(--plum-700);
  --action-gradient:linear-gradient(135deg,var(--plum-600) 0%,var(--plum-700) 45%,var(--plum-900) 100%); --shadow-button:0 1px 0 rgb(255 255 255/.14) inset,0 6px 16px rgb(34 27 42/.22); --shadow-button-hover:0 1px 0 rgb(255 255 255/.18) inset,0 8px 22px rgb(34 27 42/.28); --action:var(--plum-700); --action-hover:var(--plum-600); --on-action:var(--white);
  --band:var(--plum-700); --on-band:var(--white); --on-band-muted:#e6deec; --band-border:#75678a;
  --focus:var(--plum-700); --danger:var(--rose-700); --photo-bg:#e4e0da;
  color-scheme:only light;
}
@media (min-width:48rem){:root{--blend-h:.5rem; --gutter:2rem; --type-body:1.125rem; --type-lede:1.375rem; --type-h3:1.5rem; --type-h2:2.25rem}}

/* ───────── Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--space-5);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--type-body)/1.6 var(--font-text)}
[hidden]{display:none!important}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;text-wrap:balance;color:var(--text)}
h2{font-size:calc(var(--type-h2)*1.2);letter-spacing:-.03em;line-height:1.08}
h3{font-size:var(--type-h3);letter-spacing:-.02em}
p{text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--radius)}
.icon{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-fast) var(--motion-ease)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.small{font-size:var(--type-small);color:var(--text-muted)}
.label{font-size:var(--type-caption);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.editable{white-space:pre-line;overflow-wrap:anywhere}
.measure{max-width:none}

.skip{position:absolute;left:var(--space-4);top:-6rem;z-index:20;padding:var(--space-3) var(--space-5);background:var(--bg);font-weight:600}
.skip:focus{top:var(--space-2)}

/* ───────── Components ───────── */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:3rem;padding:var(--space-3) var(--space-5);
  background:var(--action-gradient);color:var(--on-action);border:0;border-radius:var(--radius-button);box-shadow:var(--shadow-button);
  font:600 var(--type-body)/1.2 var(--font-text);text-decoration:none;cursor:pointer;
  transition:filter var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
/* Button ornament: a calligraphic arrow tipped with a small dark cherry, set in a small glass medallion. */
.button{gap:var(--space-4);padding-inline-end:var(--space-2)}
.button .icon{box-sizing:content-box;width:1.375rem;height:1.375rem;padding:.4375rem;border-radius:50%;stroke-width:1.35;
  background:linear-gradient(160deg,rgb(255 255 255/.22),rgb(255 255 255/.06));box-shadow:inset 0 0 0 1px rgb(255 255 255/.32)}
.button-quiet{background:none;color:var(--brand);box-shadow:inset 0 0 0 1px rgb(59 48 72/.45)}
/* One medallion everywhere: light disc, plum arrow pointing up and out, dark cherry. It never moves on hover. */
.button .icon,.medallion{color:var(--brand);background:var(--medallion-bg);box-shadow:inset 0 0 0 1px rgb(59 48 72/.35);transform:rotate(-135deg);transition:none}
.button-quiet:hover{filter:none;background:rgb(59 48 72/.07);box-shadow:inset 0 0 0 1px var(--brand)}
.button:hover{filter:brightness(1.14);box-shadow:var(--shadow-button-hover)}
.text-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2.75rem;font-weight:600}
.text-link:hover .icon{transform:translate(2px,-2px)}

/* Review bar (staging chrome) */
.review-bar{background:var(--band);color:var(--on-band);font-size:var(--type-caption)}
.review-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:2.75rem}
.review-bar a{color:var(--on-band);padding-block:var(--space-3)}
.review-bar :focus-visible{outline-color:var(--on-band)}
.review-detail{display:none}

/* Masthead */
.page{position:relative}
/* Nav: sits flat on the hero at the top of the page, then becomes a floating glass bar once the page scrolls.
   It overlays the hero (negative margin) and only sticks when script is available to switch it to glass. */
.masthead{position:relative;z-index:10;display:flex;align-items:center;height:var(--nav-h);margin-bottom:calc(-1*var(--nav-h));pointer-events:none}
.js .masthead{position:sticky;top:max(.875rem,env(safe-area-inset-top,0px))}
.wordmark{display:inline-flex;flex-direction:column;align-items:center;flex-shrink:0;color:var(--brand);line-height:1;text-decoration:none}
.wordmark .given{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.wordmark .surname{font:700 2.375rem/1 var(--font-display);letter-spacing:-.03em;margin-block:.2rem .375rem}
.wordmark .office{width:100%;padding-top:.3125rem;border-top:1px solid currentColor;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.site-nav{display:inline-flex;gap:0 var(--space-4);margin-inline-start:calc(-1*var(--space-3) - 1px);padding-inline:var(--space-3);font-size:var(--type-small);white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-float);pointer-events:auto;
  transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
/* Past the hero the bar fades out; visibility keeps it out of the tab order while hidden. */
.site-nav{transition-property:background-color,border-color,box-shadow,opacity,transform,visibility;transition-duration:var(--motion-fast);transition-timing-function:var(--motion-ease)}
.is-hidden .site-nav{opacity:0;transform:translateY(-.5rem);visibility:hidden;pointer-events:none}
.is-floating .site-nav{background:var(--glass-solid);border-color:var(--glass-border);box-shadow:var(--shadow-float)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .is-floating .site-nav{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}
}
.site-nav a{display:flex;align-items:center;min-height:2.75rem;color:var(--brand);font-weight:600;text-decoration:none}
.site-nav a:hover{text-decoration:underline}

/* Hero: one band. The photograph fades into a stone ground taken from its own backdrop, and the identity sits on top.
   Phone: identity above, photo below, joined by a vertical fade. Wide: photo fills the right, identity overlays the left. */
.hero{position:relative;display:flex;flex-direction:column;background:var(--hero-bg);overflow:hidden}
.hero-inner{position:relative;z-index:1;padding-block:calc(var(--nav-h) + var(--space-4)) var(--space-5)}
.hero-identity{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
/* Hero logo lockup: sized in em from one font-size so the proportions hold at every width. */
.wordmark-hero{align-items:flex-start;font-family:var(--font-text);font-size:clamp(4.25rem,22vw,6rem);font-weight:400;letter-spacing:0;color:var(--brand)}
.wordmark.wordmark-hero .given{font-size:.2em;letter-spacing:.16em}
.wordmark.wordmark-hero .surname{font-size:1em;margin-block:.1em .16em}
.wordmark.wordmark-hero .office{font-size:.17em;letter-spacing:.2em;padding-top:.75em;border-top-width:2px;text-align:left}

.photo{position:relative;min-width:0}
.photo-placeholder{position:relative;height:100%}
.photo .reference-photo,.photo .uploaded-photo{width:100%;height:100%;object-fit:cover}
/* Both photographs dissolve into the stone ground: no frames, no hard edges between sections 1 and 2. */
.portrait,.community{order:2}
.portrait{aspect-ratio:5/4}
.community{aspect-ratio:auto}
.portrait .reference-photo,.portrait .uploaded-photo{object-position:50% 22%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 78%,transparent)}
.community .reference-photo,.community .uploaded-photo{height:auto;aspect-ratio:3/2;object-position:50% 72%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%);mask-image:linear-gradient(to bottom,transparent,#000 20%)}
.reference-label{font-size:var(--type-caption);line-height:1.4;color:var(--text-muted)}
.portrait .reference-label,.community .reference-label{position:absolute;inset:auto auto var(--space-3) var(--gutter);padding:var(--space-1) var(--space-3);border-radius:var(--radius);background:var(--bg);opacity:.92;color:var(--text)}

/* Sections */
.section{padding-block:var(--section-y)}
/* Meet Jennifer: the hero's stone ground dissolves into the page, and the layout mirrors the hero (words left, photograph right). */
.about{position:relative;display:flex;flex-direction:column;overflow:hidden;padding-block:var(--space-5) 0;background:linear-gradient(var(--hero-bg),var(--hero-bg-end))}
/* Section 2 into 3: a clean edge, with the stone and photograph lightening toward white just above the plum band. */
.about::after{content:"";position:absolute;z-index:1;inset:auto 0 0 0;height:var(--blend-h);pointer-events:none;
  background:linear-gradient(to bottom,rgb(111 100 128/0),rgb(111 100 128/.3) 60%,var(--edge))}
.community .reference-label{z-index:2;inset:var(--space-5) auto auto var(--gutter);max-width:calc(100% - 2*var(--gutter))}
.about-layout{position:relative;z-index:1;padding-bottom:var(--space-4)}
.about-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);max-width:none}
/* Three words in the logo's spaced capitals, separated by the diamond ornament. */
.traits{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-1) 0;padding:0;list-style:none;font-size:var(--type-caption);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.traits li{display:flex;align-items:center;gap:var(--space-5)}
.traits li+li::before{content:"";width:.375rem;height:.375rem;background:var(--plum-400);transform:rotate(45deg)}
.about-lede{font-size:var(--type-lede);line-height:1.45;font-weight:600;color:var(--text)}

/* The join into the band is one continuous top-to-bottom gradient: over a short distance the stone deepens to a muted mid-tone at the line,
   and the band opens at that same tone and settles into flat plum. No bright peak. */
.priorities{position:relative;background:var(--band);color:var(--on-band);padding-block:var(--space-7) calc(var(--section-y)*.7)}
.priorities::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--blend-h);pointer-events:none;
  background:linear-gradient(to bottom,var(--edge) 0%,var(--plum-600) 55%,var(--plum-700) 100%)}
.priorities h2,.priorities h3{color:var(--on-band)}
.priorities .label{color:var(--on-band-muted)}
.priorities-layout{display:grid;gap:var(--space-6)}
.section-heading{display:flex;flex-direction:column;gap:var(--space-3)}
.section-note{color:var(--on-band-muted);max-width:none}
.priority-list{display:grid;gap:var(--space-5) var(--col-gap);margin:0;padding:0;list-style:none}
.priority-list li{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-5);border-top:1px solid var(--band-border);scroll-margin-top:var(--space-5)}
/* The diamond finial from the button ornament, set on each hairline. */
.priority-list li{position:relative}
.priority-list li::before{content:"";position:absolute;top:-.25rem;left:0;width:.4375rem;height:.4375rem;background:var(--on-band-muted);transform:rotate(45deg)}
.priority-list p{max-width:none;color:var(--on-band-muted)}

.split{display:grid;gap:var(--space-6)}
/* Plan your vote: back on the stone ground, with the two official sources as rounded glass cards in the nav and button language. */
.elections-band{background:linear-gradient(var(--hero-bg-end),var(--hero-bg))}
.elections{padding-block:var(--space-7)}
/* A marked ballot box beside the heading: the button's gradient, radius and shadow, with a fine drawn tick. Decorative only. */
.with-check{display:flex;align-items:center;gap:.4em}
.ballot-check{flex-shrink:0;display:grid;place-items:center;width:1em;height:1em;border-radius:.24em;background:var(--action-gradient);box-shadow:var(--shadow-button)}
.ballot-check svg{width:72%;height:72%;fill:none;stroke:var(--on-action);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.elections .section-heading p:last-child{max-width:none;color:var(--text)}
.election-links{display:flex;flex-direction:column;gap:var(--space-3)}
.election-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius:var(--radius-float);background:rgb(255 255 255/.55);box-shadow:inset 0 0 0 1px var(--glass-border),0 12px 24px -18px rgb(34 27 42/.4);
  color:var(--text);text-decoration:none;transition:background-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.election-link>span{display:grid;gap:.125rem;min-width:0}
.election-link strong{font:700 var(--type-h3)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--brand)}
.election-link .small{font-size:var(--type-small);line-height:1.45}
.medallion{box-sizing:content-box;width:1.375rem;height:1.375rem;padding:.4375rem;border-radius:50%;stroke-width:1.35}
.election-link:hover{background:rgb(255 255 255/.85);box-shadow:inset 0 0 0 1px var(--brand),0 14px 26px -18px rgb(34 27 42/.45)}
.election-links>.small{margin-top:var(--space-2);font-size:var(--type-caption)}


footer{background:var(--surface)}
.footer-main{display:grid;gap:var(--space-3);padding-block:var(--space-5);justify-items:center;text-align:center}
.footer-main nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-5);font-size:var(--type-small)}
.footer-main nav a{display:flex;align-items:center;min-height:2.75rem}
.status:empty{display:none}
.status:not(:empty){padding-block:var(--space-4);color:var(--danger)}

/* ───────── Enhance upward ───────── */
@media (min-width:40rem){
  .review-detail{display:inline}
  .priority-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:48rem){
  .site-nav{gap:0 var(--space-6);padding-inline:var(--space-5);margin-inline-start:calc(-1*var(--space-5) - 1px);font-size:var(--type-body)}
  .wordmark .surname{font-size:2.875rem}
  .hero{display:block}
  .priority-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-inner{display:flex;align-items:center;min-height:clamp(32rem,46vw,40rem);padding-block:var(--space-9) var(--space-7)}
  .hero-identity{gap:var(--space-6)}
  .wordmark-hero{font-size:clamp(5.5rem,10vw,8rem)}
  .portrait{position:absolute;inset:0 0 0 auto;width:62%;aspect-ratio:auto}
  .portrait .reference-photo,.portrait .uploaded-photo{object-position:50% 22%;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 42%),linear-gradient(to bottom,#000 72%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 42%),linear-gradient(to bottom,#000 72%,transparent);mask-composite:intersect}
  .portrait .reference-label{inset:auto var(--gutter) var(--space-4) auto}
  .about{display:block;padding-block:var(--space-5) var(--space-6)}
  .about-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--col-gap);align-items:center;padding-bottom:0}
  .about-copy{grid-column:2;justify-self:center;margin-inline-start:clamp(1.5rem,4vw,3rem)}
  .community{position:absolute;inset:0 auto 0 0;width:38%;aspect-ratio:auto}
  .community .photo-placeholder{height:100%}
  .community .reference-photo,.community .uploaded-photo{height:100%;aspect-ratio:auto;object-position:50% 70%;
    -webkit-mask-image:linear-gradient(to left,transparent,rgb(0 0 0/.35) 9%,rgb(0 0 0/.8) 19%,#000 30%),linear-gradient(to bottom,transparent,#000 34%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to left,transparent,rgb(0 0 0/.35) 9%,rgb(0 0 0/.8) 19%,#000 30%),linear-gradient(to bottom,transparent,#000 34%);mask-composite:intersect}
  .community .reference-label{inset:auto auto var(--space-5) var(--gutter)}
  .split{grid-template-columns:var(--cols);gap:var(--col-gap)}
}
/* Wide: location on the left, logo in the centre, links on the right. Equal side columns keep the logo on the page's centre line. */
@media (min-width:64rem){
  .footer-main{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-6);text-align:start}
  .footer-main>*{grid-row:1}
  .footer-main>p{grid-column:1;justify-self:start}
  .footer-main>.wordmark{grid-column:2}
  .footer-main>nav{grid-column:3;justify-self:end;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .text-link:hover .icon{transform:none}
}

/* Preserve the source composition while keeping all three links inside 320px screens. */
@media(max-width:22rem){.site-nav{column-gap:.5rem}}