/* Jess Phillips for Nelson City Council: shared styles for every page.

   Colours are sampled from the campaign logo file (design-src/logo-original.png,
   2026-09-12): navy #002460, red-orange #d13a16 (softened a touch from the bridge's
   #d83000), mountain blues #c0cce4 and #90a8cc. Neutrals are tinted toward the navy.
   The orange only ever carries white text or sits on white and the tinted page
   background; on navy, text and buttons are white. Contrast, checked with a calculator
   on 2026-09-12: see the table in NOTES.md ("Logo and type pass"). Every pairing used
   here is 4.5:1 or better for text and 3:1 or better for borders, icons and large type.

   Archivo (SIL Open Font License, see fonts/OFL-Archivo.txt) is the typeface everywhere:
   weight 800 and a slightly condensed width for headings, 400 for text. Both
   self-hosted, so no request goes to Google. Artwork (mountains, pines) is decorative
   and hidden from screen readers. Motion: one page-load moment on the home hero,
   staggered entrances on lists, nothing else; everything is off under
   prefers-reduced-motion, and nothing is ever hidden without JavaScript.

   One exception: Playfair Display italic (SIL Open Font License, see
   fonts/OFL-PlayfairDisplay.txt), self-hosted, one weight and style only, used for
   exactly one line, the quote in the letter-hero on platform.html. Added 2026-09-17
   so that quote could read as a considered, elegant moment rather than more body copy
   in a lighter weight of the same face. */
@font-face {
	font-family: "Archivo";
	src: url(fonts/Archivo-latin.woff2) format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}
@font-face {
	font-family: "Playfair Display";
	src: url(fonts/PlayfairDisplay-italic-latin.woff2) format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
:root {
	--bg: #f5f7fb;
	--surface: #ffffff;
	--ink: #161f38;
	--muted: #4f5a76;
	--rule: #d5dbe7;
	--field: #6f7a95;
	--navy: #002460;
	--navy-deep: #001845;
	--navy-soft: #e6ecf7;
	--orange: #d13a16;
	--orange-hover: #ab2e0f;
	--orange-soft: #fbe9e2;
	/* For buttons that sit on navy: a light tint of the Donate orange itself (same hue,
	   ~11.5°), not a separate colour, so the hero buttons read as one family with Donate
	   rather than their own thing. Was a paler, more yellow "peach" (~23° hue) until
	   2026-09-17, per Avi: "it feels like they are in a different colour family." 6.8:1 on
	   navy as a background, same ratio as text on navy, comfortably past the 4.5:1 floor. */
	--orange-light: #f59e89;
	--orange-light-hover: #f58166;
	--blue-far: #c0cce4;
	--blue-mid: #90a8cc;
	--error: #b3261e;
	--font: "Archivo", Arial, Helvetica, sans-serif;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ridge-h: clamp(30px, 4vw, 56px);
	--section: clamp(3.25rem, 7vw, 5.5rem);
	--hero-bottom: clamp(6rem, 13vw, 9.5rem);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); font-kerning: normal; font-optical-sizing: auto; }
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .15s ease; }
a:hover { text-decoration-thickness: 2px; }
a, button, label { -webkit-tap-highlight-color: rgba(0, 36, 96, .12); touch-action: manipulation; }
::selection { background: #fcd5b8; color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .band :focus-visible, .site-footer :focus-visible { outline-color: #ffffff; }
.band .facts :focus-visible { outline-color: var(--ink); }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10; background: var(--ink); color: #ffffff; padding: .75rem 1rem; border-radius: 4px; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden-field { display: none; }
/* Google Tag Manager's own noscript snippet ships with this as a style="" attribute, which
   this site's CSP (style-src 'self') silently ignores. Added 2026-09-17. */
.gtm-noscript { display: none; visibility: hidden; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

/* type scale, ratio 1.25 */
h1, h2, h3 { font-weight: 800; font-stretch: 92%; letter-spacing: -.015em; line-height: 1.05; color: var(--navy); text-wrap: balance; margin: 0 0 1rem; }
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
h1 .office { display: block; margin-top: .4rem; font-size: clamp(.9375rem, 1.9vw, 1.3rem); font-weight: 600; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.375rem; font-stretch: 100%; letter-spacing: 0; line-height: 1.2; margin: 2rem 0 .5rem; }
p, ul, ol { max-width: 65ch; }
/* The reading measure above is for prose. A menu is not prose: left on the header and
   footer lists it capped them at 633px, which is narrower than the menu itself needs
   and is what forced Donate onto a second row. */
nav ul, nav ol { max-width: none; }
p { text-wrap: pretty; }
main ul { padding-left: 1.25rem; }
main li::marker { color: var(--orange); }
main ul:not(.ledger) li > a { display: inline-block; padding-block: .2rem; }
.lede { font-size: 1.25rem; line-height: 1.5; }
.muted { color: var(--muted); }
.big-quote { display: block; margin: .5rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800; font-stretch: 94%; letter-spacing: -.01em; line-height: 1.3; color: var(--navy); text-wrap: balance; }

/* header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--rule); }
/* The header runs wider than the 64rem content column so the whole menu, Donate
   included, stays on one line at desktop widths. */
.site-header .wrap { max-width: 74rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: .9rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); text-decoration: none; }
.brand img { flex: none; width: 52px; height: 52px; }
.brand-text { font-size: 1.3rem; font-weight: 800; font-stretch: 94%; letter-spacing: -.01em; line-height: 1.3; }
.brand-text span { display: block; margin-top: .3rem; font-size: .7rem; font-weight: 700; font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .65rem; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 6px; transition: background-color .15s ease; }
.site-nav a:hover { background: var(--navy-soft); }
.site-nav a[aria-current="page"], .site-nav a[aria-current="true"] { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.site-nav .nav-donate { margin-left: .5rem; padding: .5rem 1.2rem; border-radius: 8px; background: var(--orange); color: #ffffff; font-weight: 700; transition: background-color .15s ease; }
.site-nav .nav-donate:hover { background: var(--orange-hover); }
.site-nav .nav-donate[aria-current="page"] { color: #ffffff; text-decoration: none; }
/* Phone and tablet: the brand sits alone on the first line with Donate pinned to its
   right, and the five links spread across a second line. Below 62em the whole menu
   cannot share one line with the wordmark without shrinking the type past legibility. */
@media (max-width: 61.99em) {
	.site-header .wrap { position: relative; }
	.brand { margin-right: 6.5rem; gap: .5rem; }
	.brand img { width: 40px; height: 40px; }
	.brand-text { font-size: 1.2rem; }
	.brand-text span { font-size: .7rem; letter-spacing: .06em; }
	.site-nav { width: 100%; }
	.site-nav ul { width: 100%; justify-content: center; }
	.site-nav li { flex: 0 1 auto; }
	.site-nav .nav-donate { position: absolute; top: 1rem; right: 1.25rem; margin-left: 0; width: auto; }
}
/* Six links plus Donate (Posts was added 2026-10-12): below 24em the links sit a little closer
   so a 360px phone keeps two rows rather than leaving "Contact" alone on a third. */
@media (max-width: 24em) {
	.site-nav a { padding-inline: .45rem; }
}
/* Laptop and desktop: one line, Donate included. Both flex containers have to be
   nowrap. Chrome sizes a wrapping flex row about 20px narrower than its own contents
   need, which is what pushed Donate onto a second row even with room to spare. */
@media (min-width: 62em) {
	.site-header .wrap { flex-wrap: nowrap; }
	.site-nav { flex: 0 0 auto; }
	.site-nav ul { flex-wrap: nowrap; }
}
/* Small laptops: tighten the menu's own spacing so the single line keeps a margin of
   safety at the narrow end of the range. */
@media (min-width: 62em) and (max-width: 71.99em) {
	.site-header .wrap { gap: .75rem 1.25rem; }
	.site-nav a { padding-inline: .5rem; }
	.site-nav .nav-donate { margin-left: .25rem; padding-inline: 1rem; }
}

/* navy bands: the home hero, the About page opening, the vote page's dates. Text
   sits above the artwork; the mountains are pinned to the bottom edge. The topographic-line
   texture that used to sit behind the text here (images/topo.svg) was removed 2026-09-17,
   per Jess via Avi: "too much." Solid navy now. */
.hero, .band { position: relative; overflow: hidden; background: var(--navy); color: #ffffff; }
.hero h1, .hero h2, .band h2, .hero h1 .office { color: #ffffff; }
.hero p, .band p { line-height: 1.65; }
.hero .wrap, .band .wrap { position: relative; z-index: 1; }
.hero .wrap { padding-block: clamp(3rem, 7vw, 5.5rem) var(--hero-bottom); }
.hero p { font-size: 1.1875rem; max-width: 40rem; margin: 0 0 1.75rem; }
.hero-mountains, .ridge-divider { position: absolute; left: 0; bottom: -1px; width: 100%; display: block; pointer-events: none; }
.hero-mountains { height: clamp(84px, 11vw, 160px); }
.ridge-divider { height: clamp(36px, 5vw, 60px); }
.ridge-back { fill: var(--blue-mid); opacity: .55; }
.ridge-mid { fill: var(--blue-far); opacity: .75; }
.ridge-front { fill: var(--surface); }
.ridge-front.to-bg { fill: var(--bg); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ridge-rise { from { transform: translateY(24px); } }
.home-hero .hero-text > * { animation: rise-in .8s var(--ease-out) both; }
.home-hero .hero-text > :nth-child(2) { animation-delay: .1s; }
.home-hero .hero-text > :nth-child(3) { animation-delay: .2s; }
.home-hero .ridge-back { animation: ridge-rise 1.8s var(--ease-out) both; }
.home-hero .ridge-mid { animation: ridge-rise 1.3s .1s var(--ease-out) both; }

.letter-hero { --hero-bottom: calc(clamp(36px, 5vw, 60px) + 2.5rem); }
.letter-hero .hero-text p { margin-bottom: 0; }

/* home hero with a full-width photo (Jess's direction, 2026-09-13). On wide screens the
   photo fills the right side and fades into the navy under her name; on phones it sits
   on top and fades down into the navy. The fade is a mask on the photo itself, so the
   navy and its topo lines carry on underneath with no seam. Text only ever sits on
   solid navy: the photo box starts at 30% of the width and stays fully transparent for
   its first 12%, which is past the end of the text column at every width from 62em up.
   --hero-focus moves the crop's focal point. */
.photo-hero .hero-photo { position: absolute; top: 0; right: 0; bottom: 0; left: var(--hero-photo-left, 40%); }
/* Where the home hero's photo is cropped. This has to live here, not in a style attribute
   on the image: the site's Content-Security-Policy header blocks inline styles, so an
   attribute is silently ignored and the crop quietly falls back to the default above. */
.home-hero { --hero-focus: 78% 30%; }
/* From 62em up the photo takes 70% of the width (widened from 65% 2026-09-17, Avi's
   request, with the new final hero photo). Below 62em the hero stacks, so the split no
   longer applies. */
@media (min-width: 62em) { .photo-hero { --hero-photo-left: 30%; } }
/* 70% doesn't leave clearance at every width in between: the hero text's line lengths are
   fixed by their own content and font-size, not by the photo, so they don't shrink to
   match a wider photo the way the photo itself does. Measured at 992, 1024 and 1152: 70%
   leaves the text 0-6px into the photo's fade at these widths. 63% (--hero-photo-left 37%)
   keeps a 55px+ clearance across that whole band; 1280 and up already clears at 70% (42px
   at 1280, growing from there), so the narrower band only needs to cover up to 80em. */
@media (min-width: 62em) and (max-width: 79.99em) { .photo-hero { --hero-photo-left: 37%; } }
.photo-hero .hero-photo > img, .photo-hero .ph-hero {
	display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 60% 35%);
	-webkit-mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .8) 34%, #000 46%);
	mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .8) 34%, #000 46%);
}
.photo-hero .ph-hero { display: grid; place-items: center; aspect-ratio: auto; border: 0; border-radius: 0; padding: 2rem 2rem 2rem 34%; }
@media print { .hero-photo { display: none !important; } }
/* The hero text sits left of centre, not in the 64rem column, so the photo can come
   further across. The text still only ever lands on solid navy: the photo box's own
   transparent lead (the first 12% of it, above) is what actually keeps it there; see the
   two --hero-photo-left rules above for how far across the box itself starts. */
.photo-hero .wrap { max-width: none; margin-inline: 0; padding-inline: clamp(1.25rem, 5vw, 7rem); display: flex; flex-direction: column; justify-content: center; min-height: clamp(32rem, 76vh, 46rem); }
.photo-hero .hero-text { max-width: min(30rem, 40vw); }
/* Buttons on the hero: a light orange rather than white, a step down from Donate itself. */
.photo-hero .actions .button { background: var(--orange-light); color: var(--navy); }
.photo-hero .actions .button:hover { background: var(--orange-light-hover); }
.photo-hero .actions .button.secondary { background: transparent; color: var(--orange-light); box-shadow: inset 0 0 0 2px currentColor; }
.photo-hero .actions .button.secondary:hover { background: rgba(245, 158, 137, .16); color: var(--orange-light-hover); }
.hero .slogan { margin: 0 0 2rem; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; font-stretch: 96%; letter-spacing: -.005em; line-height: 1.3; }
.hero .slogan span { display: block; }
@media (max-width: 55.99em) {
	.photo-hero .hero-photo { position: relative; left: auto; width: 100%; aspect-ratio: 1; max-height: 64vh; }
	.photo-hero .hero-photo > img, .photo-hero .ph-hero {
		-webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .45) 78%, transparent);
		mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .45) 78%, transparent);
	}
	.photo-hero .ph-hero { padding: 2rem 2rem 6rem; }
	.photo-hero .wrap { min-height: 0; padding-top: .5rem; }
	.photo-hero .hero-text { max-width: none; }
}

/* The letter page's hero uses the same full-bleed photo pattern above, but narrower and
   shorter: the source photo is a vertical selfie at City Hall, not a wide landscape scene,
   and a letter page's hero shouldn't compete with the home page's for height. Added
   2026-09-17, replacing an earlier small circular portrait, per Avi: "the full image,
   right justified and full height." Below 56em it falls through to the same stacked
   mobile pattern as the home hero, just at a taller aspect ratio that suits a vertical
   photo rather than the home hero's square crop. */
/* The vertical crop point sits below centre (57%, not 50%) because a portrait source photo
   in a box that's wider than it is tall (true at every width this hero is used at) always
   crops the top and bottom, never the sides, so it's really choosing which horizontal
   slice of the photo survives. At 14% (the home hero's convention) the crop centred on the
   sign and mural and lost her face almost entirely on a short, wide screen (1920x1080);
   57% keeps her face in frame at that same width while still showing the CITY HALL sign
   above her at every width narrower than that. */
.letter-hero { --hero-focus: 50% 57%; }
/* The quote under the heading, filling the navy space that opened up once the text moved
   to centre. First version stayed in Archivo, lighter and italic; Avi asked for something
   "more elegant, almost more like a graphic," so this now brings in the one typeface
   exception (Playfair Display, see the file header) and a large decorative opening quote
   mark in the same style as .pull-quote::before elsewhere, rather than literal quotation
   marks in the text. On 2026-09-18 the quote became one Jess supplied for this spot, in
   her own words and verbatim; before that it was two sentences pulled forward from her
   letter, which still open the letter below. Avi/Jess, 2026-09-17 and 09-18. */
.letter-hero .hero-quote {
	position: relative;
	margin: 1.75rem 0 0;
	max-width: 24rem;
	padding-left: 2.25rem;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.3125rem, 2.4vw, 1.625rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}
.letter-hero .hero-quote::before {
	content: "\201C";
	position: absolute;
	top: -.32em;
	left: -.08em;
	font-family: "Playfair Display", Georgia, serif;
	font-style: normal;
	font-weight: 500;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--orange-light);
}
@media (min-width: 56em) {
	/* Sized to the photo's own aspect ratio (about 0.75, width over height), not the
	   viewport's, so the box tracks close to it at every width instead of only at the one
	   height check-rendered.mjs's screenshot happens to use: 37% width (below) needs about
	   49% of the viewport's width again in height to show the whole photo; capped by 82vh so
	   an ultra-wide, short window can't make the band taller than the screen. Avi, 2026-09-17:
	   touch the header, and go down as far as her shoulders. */
	.letter-hero.photo-hero .wrap { min-height: clamp(24rem, min(49vw, 82vh), 52rem); }
	/* Jess's final quote (2026-09-18) is longer than the ones before it. In the old 26rem
	   column it ran 13 lines at 1280 and pushed the band 234px taller than the height above,
	   which cropped the photo tighter. A wider column and a type size that eases down below
	   1280 keep the band at exactly that height from 896px up (measured at 900, 1024, 1280
	   and 1440), at the full 26px on laptops and wider. */
	.letter-hero.photo-hero .hero-text { max-width: min(34rem, 48vw); }
	.letter-hero .hero-quote { max-width: none; font-size: clamp(1.1875rem, 2.05vw, 1.625rem); }
}
/* The text sits centred in the navy space left of the photo, not pinned to the viewport's
   own left edge: the wrap is capped to the same width as the photo's own offset, so
   centring within it centres within that navy strip specifically. Avi, 2026-09-17. */
@media (min-width: 62em) {
	.letter-hero.photo-hero { --hero-photo-left: 63%; }
	.letter-hero.photo-hero .wrap { max-width: 63%; align-items: center; }
}
@media (max-width: 55.99em) {
	.letter-hero.photo-hero .hero-photo { aspect-ratio: 3 / 4; }
	/* The mobile aspect ratio is close enough to the source photo's own that almost no
	   cropping happens, so the general mobile fade (top-to-bottom, starting at 55% of the
	   box) landed on her face rather than past it; her face sits at roughly 38-60% down
	   the source image. Pushed to start at 63% (her shoulders) and finish by 95%, clear of
	   her face at every width in this range. Avi, 2026-09-17. */
	.letter-hero.photo-hero .hero-photo > img {
		-webkit-mask-image: linear-gradient(180deg, #000 63%, rgba(0, 0, 0, .4) 82%, transparent 95%);
		mask-image: linear-gradient(180deg, #000 63%, rgba(0, 0, 0, .4) 82%, transparent 95%);
	}
}
/* The home hero's fade (12% to 46% of the box) is tuned for a wide photo that fills 65-70%
   of the viewport; on this narrower ~37% box the same percentages ate almost half of an
   already-small panel, which is what was hiding the sky and sun behind the mural. This
   hero's own clearance margin was 262px+ at every width checked (see NOTES.md), far more
   than the 12%-lead needed, so the transparent zone can shrink a lot without risking text
   landing on the photo. Scoped to 56em up: below that the mobile pattern further up this
   file takes over with its own top-to-bottom fade, which Avi said already looks great and
   this must not touch. Avi, 2026-09-17: "could the gradient fade begin later or be more
   transparent." */
@media (min-width: 56em) {
	.letter-hero.photo-hero .hero-photo > img {
		-webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .5) 12%, #000 24%);
		mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .5) 12%, #000 24%);
	}
}

/* Meet Jess: her own words about why she wants families to be able to stay */
#priorities { scroll-margin-top: 1rem; }

/* page opening for pages without a band */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.page-head h1 { margin-bottom: 1.25rem; }
.page-head .lede { max-width: 42rem; }

/* sections: white and tinted alternate by class, not by count */
.section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.section.tint { background: var(--surface); }
.section.plain { background: var(--bg); }
.section + .section:not(.band) { border-top: 1px solid var(--rule); }

/* callouts: a tinted box, no stripe */
.callout { background: var(--navy-soft); padding: 1.25rem 1.5rem; border-radius: 8px; }
.callout.warm { background: var(--orange-soft); }

/* "ledger" rows: the platform areas, the contact channels, the donation steps.
   Icon or number at the left, the item's text, a hairline under each row. */
.ledger { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); column-gap: 3rem; }
.ledger li { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.ledger .ic { flex: none; width: 2rem; height: 2rem; color: var(--orange); }
.ledger .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ledger .ic .solid { fill: currentColor; stroke: none; }

.steps { grid-template-columns: 1fr; counter-reset: step; max-width: 42rem; }
.steps li { counter-increment: step; align-items: flex-start; gap: 1.25rem; padding: 1.1rem 0; font-size: 1.0625rem; font-weight: 400; color: var(--ink); }
.steps li::before { content: counter(step); flex: none; width: 2.5rem; font-size: 2.25rem; font-weight: 800; font-stretch: 90%; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }

.channels { grid-template-columns: 1fr; max-width: 42rem; }
.channels li { padding: 0; }
.channels a { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 44px; padding: .9rem 0; color: var(--navy); text-decoration: none; }
.channels a:hover .cc-value { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.channels .ic { color: var(--navy); }
.cc-label { display: block; font-size: .9375rem; font-weight: 500; color: var(--muted); }
.cc-value { display: block; font-weight: 700; overflow-wrap: anywhere; }

/* key-facts tables: plain rows in small spaces, three cards on a wide screen.
   Card text is set explicitly so it can never inherit white from the navy band. */
.facts { border-collapse: collapse; width: 100%; max-width: 42rem; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: .625rem .75rem; border-bottom: 1px solid var(--rule); }
.facts th { width: 38%; }
.facts .when { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--navy); margin-bottom: .25rem; }
@media (max-width: 59.99em) {
	.facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
	.facts tr { color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: .75rem; }
	.facts th, .facts td { padding: 0; border: 0; }
	.facts th { font-size: .95rem; font-weight: 700; color: var(--orange); margin-bottom: .35rem; }
}
@media (min-width: 60em) {
	.facts.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: none; }
	.facts.tiles tbody { display: contents; }
	.facts.tiles tr { display: block; color: var(--ink); background: var(--surface); border-radius: 8px; padding: 1.5rem; }
	.facts.tiles th, .facts.tiles td { display: block; width: auto; padding: 0; border: 0; }
	.facts.tiles th { font-size: .95rem; font-weight: 700; color: var(--orange); margin-bottom: .5rem; }
}
/* special voting: a full-width card under the three tiles, the five facilities in a grid */
.special-intro { margin: 0 0 1rem; max-width: 46rem; }
.special-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 1.5rem; }
.special-list li { border-top: 1px solid var(--rule); padding-top: .75rem; }
@media (min-width: 40em) { .special-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) {
	.facts.tiles .special { grid-column: 1 / -1; }
	.special-list { grid-template-columns: repeat(3, 1fr); }
}
.band { padding-block: clamp(3.25rem, 7vw, 5.5rem) calc(clamp(3.25rem, 7vw, 5.5rem) + clamp(36px, 5vw, 60px)); }
.band .facts tr { box-shadow: 0 16px 40px rgba(0, 12, 48, .35); }
.band + .section { border-top: 0; }

/* home: Meet Jess (photo beside text), the date card, the colouring page */
.two-col { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 48em) { .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* a real photo/illustration standing in for a .ph placeholder: same rounded corners and
   shadow as the colouring-page image, none of the dashed placeholder styling */
.photo-square { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 36, 96, .14); }
/* a graphic that must show in full, uncropped (the lawn sign preview): same rounded corners
   and shadow as .photo-square, but sized to the image's own ratio instead of forcing a square
   crop, since object-fit: cover would cut its left/right edges. */
.photo-full { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 36, 96, .14); }
/* Beside the tall sign-request form the sign sits at the top of its column, not floating
   in the middle of it. Stacked on a phone the grid has one column and this changes nothing. */
.two-col > .sign-photo { align-self: start; }
.meet-photo { align-self: start; }
.photo-credit { margin-top: .5rem; }

/* Jess's three words for herself, under the Meet Jess heading. She chose these three from a
   longer list, 2026-09-18. Orange on the white section is 4.85:1. */
.jess-words { margin: -.25rem 0 1.25rem; font-size: clamp(1.1875rem, 2vw, 1.4375rem); font-weight: 700; font-stretch: 96%; line-height: 1.3; color: var(--orange); }

/* the "2016 / 2026" photo pair in Jess's letter: stacked on phones, side by side from
   tablet width up. A small orange year tag on each photo, one caption underneath both. */
.then-now { display: grid; gap: 1.25rem; margin: 2rem 0 2.5rem; max-width: none; }
@media (min-width: 34em) { .then-now { grid-template-columns: 1fr 1fr; } }
.then-now > div { position: relative; }
.then-now img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 36, 96, .14); }
.then-now span { position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .7rem; border-radius: 8px; background: var(--orange); color: #ffffff; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }

/* the letter (About page) */
.letter::after { content: ""; display: block; clear: both; }
.letter p { font-size: 1.125rem; line-height: 1.7; max-width: 62ch; }
.letter .greeting { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 1.5rem; }
.letter h3 { margin-top: 2.75rem; }
/* A blog post (posts/*.html), added 2026-10-12 with the first one. Reuse the same shell for
   the next: title and byline on the page background, then the text on a white band in the
   letter's reading column with the photo above it, and Jess's closing line last. */
.post-head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.post-head h1 { max-width: 44rem; font-size: 2rem; letter-spacing: 0; }
@media (min-width: 40em) { .post-head h1 { font-size: 2.5rem; } }
@media (min-width: 64em) { .post-head h1 { font-size: 3rem; } }
.post-meta { margin: 0; font-weight: 600; color: var(--muted); }
.post-meta time { margin-left: .75rem; padding-left: .75rem; border-left: 2px solid var(--rule); }
.post-figure { margin: 0 0 2.25rem; max-width: 46rem; }
.post-body .post-lede { font-size: 1.375rem; font-weight: 600; line-height: 1.5; color: var(--navy); }
.post-body h2 { margin: 2.75rem 0 .75rem; font-size: clamp(1.4375rem, 2.6vw, 1.75rem); font-stretch: 100%; letter-spacing: 0; line-height: 1.2; }
.post-body .post-closing { max-width: 30rem; margin: 3rem 0 0; font-size: 1.5rem; font-weight: 800; font-stretch: 94%; letter-spacing: -.01em; line-height: 1.3; color: var(--navy); text-wrap: balance; }
@media (min-width: 40em) { .post-body .post-closing { font-size: 2rem; } }
.post-closing::before { content: ""; display: block; width: 3.5rem; height: 3px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--orange); }
.post-closing span { display: block; }
/* the second post (2026-10-15) added a subtitle under the title, bold lines Jess set off on
   their own, one highlighted question, and a link to the other post at the end */
.post-subtitle { margin: .75rem 0 1rem; max-width: 44rem; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 40em) { .post-subtitle { font-size: 1.5rem; } }
.post-body .post-emphasis { font-weight: 700; color: var(--navy); }
.post-body .post-pull { margin: 1.75rem 0; max-width: 32rem; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.5rem; font-weight: 400; line-height: 1.4; color: var(--navy); text-wrap: balance; }
@media (min-width: 40em) { .post-body .post-pull { font-size: 1.75rem; } }
.post-body .post-more { margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 1rem; font-weight: 600; }
/* the posts page (posts.html), 2026-10-15: one row per post, photo beside the title and a line about it */
.post-list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 52rem; }
.post-list li { display: grid; gap: 1rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.post-list li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 40em) { .post-list li { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; } }
.post-list .post-thumb { display: block; }
.post-list img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 36, 96, .14); }
.post-list h3 { margin: 0 0 .25rem; font-size: 1.3125rem; }
.post-list .post-date { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.post-list p:last-child { margin: 0; }
/* news page: a plain list of outside links, one item each */
.news-list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 46rem; }
.news-list li { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.news-list li:last-child { border-bottom: 1px solid var(--rule); }
.news-list h3 { margin: 0 0 .25rem; font-size: 1.3125rem; }
.news-list .news-source { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.news-list p:last-child { margin: 0; }
/* Jess's "I want..." priorities, verbatim: fourteen commitments that should invite reading
   rather than look like one long scroll. First cards (2026-09-17), then, at Avi's request on
   2026-09-18, a fuller treatment: the cards leave the reading column and run wider than it,
   in a 12-column grid where the widths and the type sizes vary (w4 to w12, f1 to f3), each
   card a soft, semi-opaque tint of a site colour, the last one solid navy as the close.
   The order in the HTML is the reading order and the grid never reorders it (no "dense"
   packing), so keyboard and screen-reader order matches what the eye sees. Rows stretch
   to their tallest card so the edges line up. On a pointer device a card lifts a few pixels
   and its tint deepens on hover; nothing happens on touch, and reduced motion keeps the
   colour change but not the lift. Text is --ink on every tint (10:1 or better, checked
   at the deepest hover state); the solid card is white on navy. */
.wrap.full { max-width: 100rem; padding-inline: clamp(1.25rem, 5vw, 7rem); }
.section + .section.wants-section { border-top: 0; padding-top: 0; }
.wants { list-style: none; max-width: none; margin: 0; padding: 0; display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); }
.wants li {
	--tint: 144, 168, 204;  /* rgb triplet of the card's colour */
	--rest: .26;            /* how strong the tint is at rest ... */
	--lift: .46;            /* ... and under the pointer */
	position: relative;
	padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
	border-radius: 14px;
	background: rgba(var(--tint), var(--rest));
	border: 1px solid rgba(var(--tint), calc(var(--rest) + .1));
	box-shadow: 0 8px 22px rgba(0, 36, 96, .06);
	color: var(--ink);
	font-size: 1.125rem;
	line-height: 1.6;
	text-wrap: pretty;
	transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.wants .f2 { font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem); line-height: 1.45; font-weight: 500; }
.wants .f3 { font-size: clamp(1.3125rem, 1.05rem + 1.05vw, 1.75rem); line-height: 1.4; font-weight: 500; }
.wants .t-mist  { --tint: 144, 168, 204; --rest: .28; --lift: .5; }
.wants .t-navy  { --tint: 0, 36, 96;     --rest: .08; --lift: .17; }
.wants .t-ember { --tint: 209, 58, 22;   --rest: .13; --lift: .26; }
.wants .t-peach { --tint: 245, 158, 137; --rest: .34; --lift: .58; }
.wants .t-solid { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 14px 30px rgba(0, 24, 69, .28); }
@media (hover: hover) and (pointer: fine) {
	.wants li:hover {
		background: rgba(var(--tint), var(--lift));
		border-color: rgba(var(--tint), calc(var(--lift) + .18));
		box-shadow: 0 16px 28px -10px rgba(0, 36, 96, .3);
		transform: translateY(-4px);
	}
	.wants .t-solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); box-shadow: 0 20px 34px -10px rgba(0, 12, 48, .5); }
}
/* below 40em: one column. 40em to 56em: two columns, the cards marked is-wide take the full
   row. From 56em: twelve columns. */
@media (min-width: 40em) and (max-width: 55.99em) {
	.wants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wants .is-wide { grid-column: 1 / -1; }
}
@media (min-width: 56em) {
	.wants { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.wants li { grid-column: span 4; }
	.wants .w5  { grid-column: span 5; }
	.wants .w6  { grid-column: span 6; }
	.wants .w7  { grid-column: span 7; }
	.wants .w8  { grid-column: span 8; }
	.wants .w12 { grid-column: span 12; }
	.wants .t-solid { padding-block: clamp(2rem, 3.4vw, 3.25rem); padding-inline: clamp(1.5rem, 4vw, 4rem); }
}
.signature { font-size: 1.5rem; font-weight: 800; font-stretch: 92%; color: var(--navy); margin-top: 2rem; }
.pull-quote { position: relative; max-width: 30rem; margin: 2.25rem 0; padding: 2.25rem 0 0; font-size: 1.5rem; font-weight: 800; font-stretch: 94%; letter-spacing: -.01em; line-height: 1.3; color: var(--navy); text-wrap: balance; }
.pull-quote::before { content: "\201C"; position: absolute; top: -.1em; left: -.06em; font-size: 4.5rem; line-height: 1; font-weight: 800; color: var(--orange); }
@media (min-width: 64em) {
	.pull-quote { float: right; clear: right; width: 15rem; margin: .5rem 0 1.5rem 2.5rem; font-size: 1.375rem; }
}

/* "In short": question and answer pairs */
.qa { display: grid; gap: 1.5rem 3rem; max-width: none; }
@media (min-width: 48em) { .qa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qa h3 { margin-top: 0; }

/* home: the date card, the colouring page */
.date-feature { display: grid; gap: 1.25rem 2.5rem; align-items: start; }
@media (min-width: 40em) { .date-feature { grid-template-columns: auto minmax(0, 1fr); } }
.date-badge { width: 7.5rem; text-align: center; background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 36, 96, .16); }
.date-badge span { display: block; }
.date-badge .month { background: var(--orange); color: #ffffff; font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .6rem 0 .5rem; }
.date-badge .day { font-size: 3.6rem; font-weight: 800; font-stretch: 90%; line-height: 1; color: var(--navy); padding-top: .55rem; }
.date-badge .dow { font-size: .8rem; font-weight: 700; color: var(--muted); padding: .4rem 0 .85rem; }
.colouring { display: grid; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 48em) { .colouring { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.colouring img { display: block; width: 100%; border-radius: 6px; background: var(--surface); box-shadow: 0 14px 30px rgba(0, 36, 96, .14); }
/* the colour illustration and the line-art preview it's based on, stacked: the colour
   version first (it's the more inviting image), the printable line art underneath, so the
   pairing reads as "here's the picture, here's what you print." Combined into this section
   2026-09-17, replacing a separate full-width band above it. */
.colouring-images { display: grid; gap: 1.25rem; }

/* Where to find Jess (where-to-find-jess.html): a dated list, built from
   design-src/events/events.json by build-events.mjs. It is real text in a list, so screen
   readers, search and a phone's reader mode can all use it. The big day number on the left
   is the one loud thing on the page; the days you can vote are the navy rows in the same
   list. events.js moves an event that has passed into a Past events list and marks the next
   one; with JavaScript off every date shows in one list. Added 2026-09-25. */
.agenda-month + .agenda-month { margin-top: 3rem; }
.agenda-month h2, .agenda-past h2 { margin-bottom: .5rem; }
.agenda-past { margin-top: 3rem; }
.agenda-item.is-past .agenda-actions { display: none; }
.agenda-item.is-past .agenda-day { color: var(--muted); }
.agenda { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.agenda-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .25rem 1.25rem; padding: 1.5rem 1.25rem; border-bottom: 1px solid var(--rule); }
.agenda-item[hidden], .agenda-month[hidden] { display: none; }
.agenda-date { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.agenda-day { margin: .25rem 0; font-size: 2.75rem; font-weight: 800; font-stretch: 90%; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.agenda-body h3 { margin: 0 0 .4rem; }
.agenda-body p { margin: 0; }
.agenda-when { font-weight: 700; color: var(--navy); }
.agenda-next { margin-left: .4rem; font-weight: 800; color: var(--orange-hover); }
.agenda-body .agenda-note { margin-top: .4rem; font-size: .9375rem; color: var(--muted); }
.agenda-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 1.5rem; max-width: none; margin: .5rem 0 0; }
.agenda-actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.agenda-item.is-next .agenda-day { color: var(--orange); }
.agenda-item.is-vote { margin: .75rem 0; border-bottom: 0; border-radius: 12px; background: var(--navy); color: #ffffff; }
.is-vote .agenda-date, .is-vote .agenda-body .agenda-note { color: var(--blue-far); }
.is-vote .agenda-day, .is-vote h3, .is-vote .agenda-when, .is-vote .agenda-where, .is-vote a { color: #ffffff; }
.is-vote :focus-visible { outline-color: #ffffff; }
.is-vote.is-next .agenda-day, .is-vote .agenda-next { color: var(--orange-light); }
/* home: "Where to find Jess" (index.html). Heading and a button on one row, then the next three
   dates in the events page's big-day-number style: stacked on a phone and tablet, three across on
   a wide screen. build-events.mjs writes the rows between the home-events markers; events.js
   drops finished ones. */
.where-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.where-head h2, .where-head .actions { margin: 0; }
.home-events { list-style: none; margin: 0; padding: 0; max-width: none; border-bottom: 1px solid var(--rule); }
.home-events:not(:has(.home-event:not([hidden]))) { display: none; }
@media (min-width: 64em) {
	.home-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; border-bottom: 0; }
}
.home-event { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .25rem 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.home-event[hidden] { display: none; }
.home-event.is-next .agenda-day { color: var(--orange); }
.agenda-empty { font-size: 1.125rem; }
.agenda-fineprint { margin-top: 2rem; font-size: .9375rem; }
@media (min-width: 48em) {
	.agenda-item { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .25rem 2rem; padding-inline: 1.75rem; }
	.agenda-day { font-size: 3.25rem; }
}
@media print {
	.agenda-actions, .agenda-next { display: none !important; }
	.agenda-item { break-inside: avoid; }
	.agenda-item.is-vote { background: none !important; border: 1px solid #000000; }
	.agenda-day, .agenda-date, .agenda-when, .agenda-where, .agenda-note { color: #000000 !important; }
}

/* photo placeholders, until Sunday's photos: designed, but clearly not final */
.ph { display: grid; place-items: center; text-align: center; padding: 1.5rem; aspect-ratio: 4 / 5; border: 2px dashed rgba(0, 36, 96, .45); border-radius: 12px; background: var(--navy-soft) radial-gradient(ellipse at 50% 100%, rgba(144, 168, 204, .55), transparent 70%); color: var(--navy); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.ph.square { aspect-ratio: 1; }
.hero .ph { color: var(--navy); }
.success-badge { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--navy); color: #ffffff; }
.success-badge svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .8rem 1.4rem; border: 0; border-radius: 8px; background: var(--navy); color: #ffffff; font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.button:hover { background: var(--navy-deep); }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: progress; }
.button.secondary { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px currentColor; }
.button.secondary:hover { background: var(--navy-soft); }
.button.give { background: var(--orange); }
.button.give:hover { background: var(--orange-hover); }
.hero .button { background: #ffffff; color: var(--navy); }
.hero .button:hover { background: var(--navy-soft); }
.hero .button.secondary { background: transparent; color: #ffffff; }
.hero .button.secondary:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 30em) {
	.actions .button { flex: 1 1 100%; }
	button.button { width: 100%; }
}

/* forms */
form { max-width: 36rem; }
.field { margin: 0 0 1.25rem; }
.field > label, .field-head, legend { display: block; font-weight: 700; margin-bottom: .375rem; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: .9375rem; }
/* The (required) and (optional) markers and the hints sit outside the label, because Netlify prints a
   label's whole text as the field title in every notification email. The hint follows its heading
   closely, as it did when it lived inside the label. */
.field-head:has(+ .hint) { margin-bottom: 0; }
.field-head + .hint { margin-bottom: .375rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
	display: block; width: 100%; min-height: 46px; padding: .65rem .8rem; border: 2px solid var(--field); border-radius: 8px; background: #ffffff; color: var(--ink); font: inherit;
	transition: border-color .15s ease;
}
/* The donation amount is a number field so the browser checks the range, but its up and
   down arrows stepped by one cent, which helps no one. No accessibility rule asks for them
   (donors type the amount, and phones show none), so they are hidden. Avi, 2026-09-18. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, textarea:focus { border-color: var(--navy); }
input:user-invalid, textarea:user-invalid { border-color: var(--error); }
textarea { min-height: 9rem; resize: vertical; }
fieldset { border: 1px solid var(--field); border-radius: 8px; padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; min-height: 44px; margin: .25rem 0; padding-block: .35rem; font-weight: 400; cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; margin: .05rem 0 0; accent-color: var(--navy); cursor: pointer; }

/* footer: deep navy, a pine ridge along its top, the badge beside the statement */
.site-footer { position: relative; background: var(--navy-deep); color: #dfe5f1; margin-top: auto; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--ridge-h); background: url(images/ridge.svg) center bottom / cover no-repeat; pointer-events: none; }
main > :last-child { padding-bottom: calc(var(--section) + var(--ridge-h)); }
.site-footer .wrap { display: grid; gap: 1.5rem 2.5rem; align-items: center; padding-block: 2.25rem 2.5rem; }
@media (min-width: 40em) { .site-footer .wrap { grid-template-columns: auto minmax(0, 1fr); } }
.site-footer img { display: block; width: 150px; height: 150px; }
.site-footer a { color: #ffffff; }
.site-footer .authorized { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; font-weight: 700; max-width: 42rem; overflow-wrap: anywhere; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .social-links { margin-top: .5rem; gap: .75rem; }
.site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%; transition: background-color .2s ease, border-color .2s ease; }
.site-footer .social-links svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer .social-links .solid { fill: currentColor; stroke: none; }
@media (hover: hover) and (pointer: fine) { .site-footer .social-links a:hover { background: rgba(255, 255, 255, .16); border-color: #ffffff; } }

/* staggered list entrances: site.js marks only the lists that start below the screen
   as "pending" and reveals each one as it scrolls into view. Nothing already on screen
   is ever hidden, and without the script nothing is hidden at all. */
.stagger > * { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger.pending > * { opacity: 0; transform: translateY(12px); }
.stagger.is-in > :nth-child(2) { transition-delay: .06s; }
.stagger.is-in > :nth-child(3) { transition-delay: .12s; }
.stagger.is-in > :nth-child(4) { transition-delay: .18s; }
.stagger.is-in > :nth-child(5) { transition-delay: .24s; }
.stagger.is-in > :nth-child(6) { transition-delay: .3s; }
.stagger.is-in > :nth-child(7) { transition-delay: .36s; }
.stagger.is-in > :nth-child(8) { transition-delay: .42s; }
.stagger.is-in > :nth-child(9) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.stagger.pending > * { opacity: 1 !important; transform: none !important; }
	.wants li:hover { transform: none !important; }
}

/* Cookie consent banner (cookie-consent.js). Fixed bottom bar, plain surface and rule
   colours rather than a new decorative treatment: no stripe, no icon. Shown until Accept or
   Decline is clicked, or reopened from the footer's "Cookie settings" link. The extra body
   padding while it's open keeps the footer's own links reachable underneath it rather than
   covered; it's a fixed value, not measured, because inline styles are blocked by this
   site's Content-Security-Policy (style-src 'self'). */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -12px 30px rgba(0, 36, 96, .14); }
.cookie-banner-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-block: 1.1rem; }
.cookie-banner p:first-child { flex: 1 1 24rem; max-width: 54rem; margin: 0; font-size: .9375rem; color: var(--ink); }
.cookie-banner .actions { flex: none; margin: 0; }
body.has-cookie-banner { padding-bottom: 9rem; }
@media (max-width: 30em) {
	.cookie-banner .actions { width: 100%; }
	.cookie-banner .actions .button { flex: 1 1 auto; }
	body.has-cookie-banner { padding-bottom: 12.5rem; }
}
@media print { .cookie-banner { display: none !important; } }

/* printing (people print the voting guide): black on white, links spelled out,
   the sponsorship statement kept, decoration dropped */
@media print {
	@page { margin: 1.5cm; }
	body { display: block; background: #ffffff; color: #000000; font-size: 11pt; }
	.skip-link, .site-nav, .actions, .hero-mountains, .ridge-divider, .pull-quote, .date-badge, .ph, .success-badge, form, .site-footer nav, .site-footer .social-links, .site-footer img { display: none !important; }
	.button, .nav-donate, .callout, .skip-link { background: none !important; box-shadow: none !important; }
	.site-footer::before { display: none; }
	.hero, .band, .section, .site-footer { background: none !important; color: #000000 !important; border: 0 !important; box-shadow: none !important; }
	h1, h2, h3, .hero h1, .band h2, .brand-text span, a, .ledger li, .steps li::before, .facts th, .facts .when { color: #000000 !important; }
	.hero .wrap, .section, .band, main > :last-child { padding-block: .5rem !important; }
	.home-hero .hero-text > *, .ridge-back, .ridge-mid { animation: none !important; }
	.facts tr { box-shadow: none !important; break-inside: avoid; }
	.stagger.pending > * { opacity: 1 !important; transform: none !important; }
	main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; overflow-wrap: anywhere; }
	h2, h3 { break-after: avoid; }
	.wants { display: block; }
	.wants li { background: none !important; color: #000000 !important; border: 1px solid #000000; box-shadow: none !important; break-inside: avoid; margin-bottom: .5rem; padding: .5rem .75rem; font-size: 11pt !important; }
	.site-footer .authorized { border-color: #000000; }
}