/* ============================================================================
SUSAN WILLIE FOR ST. TAMMANY PARISH COUNCIL, DISTRICT 3
Clad Forge · SUW-001-Website · built from design concept 03 "Front Porch"
Navy and gold are sampled from her logo file, not eyeballed from the
social graphics. Do not "correct" them back to #1B3F94 / #C7952F.
============================================================================ */
:root{
--green:#1F5C3D;
--green-deep:#143D28;
--green-ink:#0C2618;
--navy:#0638A7;
--navy-ink:#031B52;
--gold:#C4902F;
--gold-lt:#E3B85E;
/* Brand gold on a light field fails WCAG AA badly — measured 2.55:1 on
sand, 2.23:1 on sand-2, 2.85:1 on white, against the 4.5:1 required at
this text size. Same hue and saturation, lightness 47.6% -> 32%, giving
4.88 / 5.59 / 6.24 on those three fields. Use ONLY for small gold text
on light backgrounds. Brand gold is unchanged and still correct on dark
fields, where it measures 5.65:1. */
--gold-dark:#7E5A18;
--sand:#F6F2E8;
--sand-2:#EAE3D2;
--ink:#1D2420;
--ink-soft:#565F58;
--hair:rgba(29,36,32,.14);
--slab:"Bitter",Georgia,"Times New Roman",serif;
--sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--shell:min(1220px,100% - 3rem);
--ease:cubic-bezier(.22,.7,.32,1);
/* must match the nav's real height: 52px lockup + .7rem padding
top and bottom. Drives scroll-padding-top, so if it drifts every
anchor link lands with its heading hidden under the bar. */
--nav-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
/* anchor targets must clear the fixed nav, otherwise every jump link
lands with its heading hidden underneath it */
scroll-padding-top:calc(var(--nav-h) + 1rem);
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
margin:0;background:var(--sand);color:var(--ink);
font:400 1.075rem/1.7 var(--sans);
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05;font-family:var(--slab);font-weight:800}
.shell{width:var(--shell);margin-inline:auto}
/* one visible focus ring for the whole site */
:focus-visible{
outline:3px solid var(--gold);
outline-offset:3px;
border-radius:3px;
}
.skip{
position:absolute;left:1rem;top:-100%;z-index:200;
background:var(--gold);color:var(--green-ink);
font-family:var(--sans);font-weight:700;font-size:.85rem;
padding:.85rem 1.4rem;border-radius:0 0 6px 6px;text-decoration:none;
transition:top .25s var(--ease);
}
.skip:focus{top:0}
/* Defaults to the darkened gold because most kickers sit on sand or
sand-2. The three dark sections opt back into brand gold below, where
it already passes at 5.65:1. */
.kicker{
font-family:var(--sans);font-weight:700;font-size:.72rem;
letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);
display:inline-flex;align-items:center;gap:.65rem;
}
.hero .kicker,.help .kicker,.contact .kicker{color:var(--gold)}
.kicker::before{content:"";width:22px;height:2px;background:currentColor}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
background:var(--gold);color:var(--green-ink);border:2px solid var(--gold);
font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;padding:1rem 1.9rem;border-radius:6px;
transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;
cursor:pointer;
}
.btn:hover{transform:translateY(-3px);background:var(--gold-lt);border-color:var(--gold-lt)}
.btn--out{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--out:hover{background:#fff;border-color:#fff;color:var(--green-ink)}
.btn--green{background:var(--green);border-color:var(--green);color:#fff}
.btn--green:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
/* ══════════════════════════════════════════════════════════════
NAV
══════════════════════════════════════════════════════════════ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:70;
transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.solid{background:var(--sand);box-shadow:0 4px 22px rgba(12,38,24,.12)}
/* While the nav is transparent it floats over a photo whose brightness we
do not control. This scrim guarantees the white logo and links stay
legible at rest; it fades out the moment the nav turns solid. */
.nav::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(12,38,24,.62),rgba(12,38,24,.28) 62%,transparent);
transition:opacity .4s var(--ease);
}
.nav.solid::before{opacity:0}
/* Height of this decides when the nav turns solid, and it must be SMALL.
The hero copy is vertically centred, so on a short viewport the white
headline reaches the bottom of the nav after only ~24px of scroll. A
white logo and white nav links then sit directly on top of it and the
whole corner turns to mush — the scrim below cannot help, because it
darkens both of them equally. Flipping the nav solid within the first
16px means the collision can never happen at any viewport height.
Out of flow so it cannot affect hero layout. */
#nav-sentinel{
position:absolute;top:0;left:0;width:1px;height:16px;
pointer-events:none;
}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
/* The lockup artwork is the SW mark + "Susan Willie" ONLY. The baked-in
"FOR PARISH COUNCIL / DISTRICT 3" lines were cropped out of the image on
purpose: at nav and footer sizes they rendered as roughly 6px tracked
caps knocked out in white, which is exactly the condition where thin
letterforms disappear. They are live text now — crisp at any size, and
sized for reading rather than scaled down with the artwork.
Logo still swaps to the white knockout while the nav floats over the hero. */
.lock{display:flex;align-items:center;gap:.9rem;text-decoration:none;line-height:1}
.lk-mark{position:relative;display:block;line-height:0;flex:0 0 auto}
/* The wordmark is only about a fifth of the lockup's height, so this
number sets how big "Susan Willie" reads: 52px here puts it near 10px.
That holds because it is navy on sand — do not shrink it further, and
if it ever needs to sit on a dark field again, raise it back. */
.lk-mark img{height:52px;width:auto;display:block;transition:opacity .4s var(--ease)}
.lk-mark .lk-navy{position:absolute;left:0;top:0;opacity:0}
.nav.solid .lk-mark .lk-white{opacity:0}
.nav.solid .lk-mark .lk-navy{opacity:1}
.lk-side{
display:flex;flex-direction:column;gap:.2rem;
padding-left:.9rem;border-left:1px solid rgba(255,255,255,.3);
}
.lk-side .l1{font-family:var(--slab);font-weight:600;font-size:1rem;color:#fff;
line-height:1.05;white-space:nowrap}
/* tracked caps need more size than a normal label to stay readable —
the letter-spacing that makes them look considered also thins them out */
.lk-side .l2{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-lt);white-space:nowrap}
.nav.solid .lk-side{border-left-color:rgba(29,36,32,.24)}
.nav.solid .lk-side .l1{color:var(--green-ink)}
.nav.solid .lk-side .l2{color:var(--gold)}
.nav-links{display:flex;gap:2.1rem;list-style:none;margin:0;padding:0}
.nav-links a{
font-family:var(--sans);font-weight:600;font-size:.9rem;text-decoration:none;
color:#fff;opacity:.88;transition:opacity .25s,color .25s;
}
.nav-links a:hover{opacity:1;color:var(--gold-lt)}
.nav.solid .nav-links a{color:var(--ink)}
.nav.solid .nav-links a:hover{color:var(--green)}
.nav .btn{padding:.75rem 1.5rem}
/* 44x44 is the minimum comfortable touch target; the old .45rem padding
round a 25px bar gave 39x40. */
.burger{display:none;background:none;border:0;padding:0;cursor:pointer;
width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center}
.burger span{display:block;width:25px;height:2px;background:#fff;margin:2.5px 0;border-radius:2px;
transition:transform .35s var(--ease),opacity .25s}
.nav.solid .burger span{background:var(--ink)}
/* MUST outrank `.nav.solid .burger span` (0,3,1). The open menu paints a
full-screen green overlay, so dark bars on it are invisible — measured
1.02:1 — leaving no visible way to close the menu. The plain
`.burger[aria-expanded]` selector was only (0,2,1) and lost. */
.nav .burger[aria-expanded="true"] span,
.nav.solid .burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ══════════════════════════════════════════════════════════════
HERO
Mobile: portrait fills the panel, copy sits over a scrim.
Desktop: true split — copy left on deep green, photo right at
close to native resolution so nothing is upscaled.
══════════════════════════════════════════════════════════════ */
.hero{position:relative;background:var(--green-ink);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.hero-media::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(12,38,24,.55) 0%,rgba(12,38,24,.28) 34%,rgba(12,38,24,.88) 78%,rgba(12,38,24,.97) 100%);
}
.hero-inner{position:relative;z-index:2;display:flex;align-items:flex-end;
min-height:min(100svh,880px);padding:calc(var(--nav-h) + 2.5rem) 0 3.5rem}
.hero-copy{max-width:min(640px,100%)}
.hero h1{
font-size:clamp(2.75rem,7.2vw,5.2rem);color:#fff;letter-spacing:-.022em;
line-height:.98;margin:1.2rem 0 0;text-wrap:balance;
}
.hero h1 i{font-style:normal;color:var(--gold-lt)}
.hero .sub{
font-family:var(--sans);font-weight:600;font-size:clamp(.85rem,1.7vw,1.06rem);
letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);
margin:1.3rem 0 1.5rem;
}
.hero .say{
font-family:var(--slab);font-style:italic;font-weight:400;
font-size:clamp(1.12rem,2.3vw,1.5rem);color:#fff;line-height:1.45;
max-width:34ch;margin:0 0 2.2rem;padding-left:1.3rem;border-left:3px solid var(--gold);
}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
/* entrance */
.hero-copy>*{opacity:0;transform:translateY(24px);animation:in .95s var(--ease) forwards}
.hero-copy>*:nth-child(1){animation-delay:.20s}
.hero-copy>*:nth-child(2){animation-delay:.31s}
.hero-copy>*:nth-child(3){animation-delay:.42s}
.hero-copy>*:nth-child(4){animation-delay:.53s}
.hero-copy>*:nth-child(5){animation-delay:.64s}
@keyframes in{to{opacity:1;transform:none}}
/* Split as soon as the viewport is wider than the portrait itself.
The source is only 645px wide (all the clean pixels the composite had),
so any full-bleed treatment above ~650px upscales it and zooms into her
face with the headline sitting on top. Below this the viewport is
portrait-shaped and the overlay treatment is the right one. */
@media(min-width:700px){
.hero{display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch}
.hero-media{position:relative;grid-column:2;order:2;min-height:0}
/* The image must be taken out of flow here. As a normal grid child with
height:100% against an indefinite container it falls back to its
intrinsic 645x1254 aspect and stretches the row — a 670px column
forced the hero to 1302px tall instead of the intended 880. */
.hero-media img{position:absolute;inset:0;object-position:50% 16%}
.hero-media::after{
/* Feather the seam into the green panel. Her photo's own background is
pale, so a short scrim leaves a hard vertical line where the two
meet — this needs to run well past a third of the column. */
background:linear-gradient(90deg,
var(--green-ink) 0%,
rgba(12,38,24,.82) 9%,
rgba(12,38,24,.42) 26%,
rgba(12,38,24,.12) 44%,
transparent 60%);
}
/* copy centres against a full-height photo; anchoring it to the bottom
left a dead green slab above it once the layout split */
.hero-inner{grid-column:1;order:1;align-items:center;
padding:calc(var(--nav-h) + 1.5rem) 1.5rem 2.5rem 0}
.hero-copy{max-width:none}
/* the copy column is off-centre in the grid, so the default centred
.shell would not line up with the logo above it — pin it to the same
gutter a 1220px centred container would use */
.hero-inner > .shell{
width:auto;margin:0;
padding-left:max(1.5rem,calc((100vw - 1220px) / 2));
}
}
@media(min-width:1100px){
.hero-inner{padding:calc(var(--nav-h) + 3rem) 3.5rem 4rem 0}
}
/* three-word band riding the hero edge */
/* One centred line of her three campaign words, divided by the same star
motif her logo uses under "DISTRICT 3".
This was a three-cell grid with 1px gaps. The selector `.creed-band div`
also matched the .shell wrapper, so the wrapper took the cells' 1.5rem
padding on top of its own dark background — painting a darker gold frame
around the lighter gold cells and doubling the band to 132px. Never
select a bare `div` inside a wrapper that is itself a div. */
.creed-band{
background:var(--gold);color:var(--green-ink);
border-block:1px solid rgba(12,38,24,.2);
}
.creed-band .shell{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.6rem 1.7rem;padding:1.05rem 0;
}
.creed-band p{
margin:0;font-family:var(--slab);font-weight:700;
font-size:clamp(.95rem,1.7vw,1.2rem);letter-spacing:.005em;
}
/* Diamond, drawn rather than typed — the ★ glyph renders at wildly
different weights across fonts and platforms. A four-point star was
tried first and its thin arms antialiased into plus signs at this size;
a diamond holds its shape at any scale and still echoes the gold
accents in her logo. */
.creed-band .sep{
width:8px;height:8px;flex:0 0 8px;background:var(--green-ink);opacity:.5;
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
/* ══════════════════════════════════════════════════════════════
PROMISES
══════════════════════════════════════════════════════════════ */
.promises{padding:5.5rem 0}
.promises .head{max-width:46ch;margin-bottom:3rem}
.promises h2{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--green-ink);letter-spacing:-.02em;margin-top:1rem;text-wrap:balance}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.tile{
background:var(--green);color:#fff;padding:2.6rem 2.1rem;border-radius:10px;
position:relative;overflow:hidden;
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tile:nth-child(2){background:var(--navy)}
.tile:nth-child(3){background:var(--green-deep)}
.tile::after{
content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
}
.tile:hover{transform:translateY(-7px);box-shadow:0 26px 52px rgba(12,38,24,.26)}
.tile .ic{width:46px;height:46px;fill:var(--gold-lt);margin-bottom:1.4rem;position:relative}
.tile h3{font-size:1.42rem;margin-bottom:.85rem;letter-spacing:-.01em;position:relative}
.tile p{margin:0;color:rgba(255,255,255,.85);font-size:.99rem;position:relative}
/* ══════════════════════════════════════════════════════════════
ABOUT
══════════════════════════════════════════════════════════════ */
.about{background:var(--sand-2);padding:6rem 0}
.about .shell{display:grid;grid-template-columns:.88fr 1.12fr;gap:4.2rem;align-items:center}
.about figure{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 26px 60px rgba(12,38,24,.22)}
/* height:auto is load-bearing. The carries width/height attributes
for layout-shift protection, and those apply as presentational hints —
so height:1071px became a specified value, and aspect-ratio is ignored
when both dimensions are already specified. The computed style reported
"aspect-ratio: 4/5" while the image rendered at its full 1071px, adding
571px to this section and making it the tallest on the page. */
.about figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}
.about h2{font-size:clamp(2.1rem,4.6vw,3.2rem);color:var(--green-ink);letter-spacing:-.025em;margin:1rem 0 1.5rem;text-wrap:balance}
.about .lede{font-family:var(--slab);font-size:1.22rem;font-weight:600;color:var(--green);line-height:1.5;margin:0 0 1.3rem}
.about p{color:var(--ink-soft);margin:0 0 1.15rem;max-width:58ch}
.about .name{
margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--hair);
font-family:var(--slab);font-style:italic;font-weight:600;font-size:1.85rem;color:var(--green-ink);
}
.about .name small{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.55rem}
/* ══════════════════════════════════════════════════════════════
PLATFORM
══════════════════════════════════════════════════════════════ */
.platform{padding:6rem 0}
.platform .head{max-width:44ch;margin-bottom:3rem}
.platform h2{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--green-ink);letter-spacing:-.02em;margin-top:1rem;text-wrap:balance}
.rows{display:grid;gap:1.1rem}
.row{
background:#fff;border-radius:10px;padding:2.2rem 2.4rem;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:2.4rem;align-items:center;
box-shadow:0 2px 0 var(--hair);
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.row:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(12,38,24,.13)}
.row h3{font-size:clamp(1.35rem,2.6vw,1.85rem);color:var(--green);letter-spacing:-.015em}
.row .tagword{
font-family:var(--sans);font-weight:700;font-size:.66rem;letter-spacing:.2em;
/* on the white .row card, brand gold measures 2.85:1 */
text-transform:uppercase;color:var(--gold-dark);display:block;margin-bottom:.7rem;
}
.row p{margin:0;color:var(--ink-soft)}
/* ══════════════════════════════════════════════════════════════
HELP / VOLUNTEER
══════════════════════════════════════════════════════════════ */
.help{background:var(--green-ink);color:#fff;padding:5.5rem 0;position:relative;overflow:hidden}
.help::before{content:"";position:absolute;inset:0;
background:radial-gradient(70% 80% at 20% 0%,rgba(196,144,47,.2),transparent 62%)}
.help .shell{position:relative}
.help .head{max-width:44ch;margin-bottom:2.8rem}
.help h2{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.02em;margin-top:1rem;text-wrap:balance}
/* The .ways / .way card rules lived here. Removed with the markup — the
cards restated the form's own checkboxes. */
.help .head p{margin:1rem 0 0;color:rgba(255,255,255,.82);font-size:1rem}
/* ══════════════════════════════════════════════════════════════
FORMS
══════════════════════════════════════════════════════════════ */
/* No max-width. It was 820px here and overridden to none in .contact, so
one component had two widths — and the constrained one had no auto
margin, leaving ~400px of empty green to its right in the help section.
It now fills its container in both places. */
.formwrap{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
border-radius:12px;padding:2.6rem;
}
.formwrap h3{font-size:1.5rem;color:#fff;margin-bottom:.6rem}
.formwrap .blurb{color:rgba(255,255,255,.78);font-size:.96rem;margin:0 0 2rem}
/* minmax(0,1fr) plus min-width:0 on the items. A bare 1fr is
minmax(auto,1fr), and an 's ~209px intrinsic width then pins the
track — around 1024px that turned the contact section's intended 50/50
split into roughly 40/60. Both the track minimum and the item minimum
have to be released. */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field--wide{grid-column:1 / -1}
.field label{
font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.75);
}
.field .req{color:var(--gold-lt)}
.field input,.field textarea,.field select{
font-family:var(--sans);font-size:1rem;color:#fff;
background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);
border-radius:8px;padding:.9rem 1.05rem;width:100%;
transition:border-color .25s,background .25s;
}
.field textarea{min-height:88px;resize:vertical}
/* .45 measured 3.89:1 against the composited field background; .55 gives 5.03 */
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.55)}
.field input:focus,.field textarea:focus,.field select:focus{
outline:none;border-color:var(--gold);background:rgba(255,255,255,.13);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#F0846B}
/* min-height must equal the rendered line height or every failed field
grows by the difference and shoves the submit button down under the
cursor. line-height is set here rather than inherited from body's 1.7,
so the reserve and the render are tied to the same number. */
.field .err{font-size:.78rem;color:#F5A091;line-height:1.4;min-height:1.4em}
/* Three across. At two columns these tracks were 562px wide holding
labels like "Knock doors", which forced six options onto three rows. */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:.3rem 0 0}
@media(max-width:900px){ .checks{grid-template-columns:repeat(2,minmax(0,1fr))} }
.check{
display:flex;align-items:flex-start;gap:.7rem;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
border-radius:8px;padding:.85rem 1rem;cursor:pointer;
font-size:.93rem;color:rgba(255,255,255,.9);
transition:background .25s,border-color .25s;
}
.check:hover{background:rgba(255,255,255,.1)}
.check input{
appearance:none;-webkit-appearance:none;
width:19px;height:19px;flex:0 0 19px;margin-top:.15rem;
border:2px solid rgba(255,255,255,.5);border-radius:4px;background:transparent;
cursor:pointer;position:relative;transition:background .2s,border-color .2s;
}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{
content:"";position:absolute;left:4px;top:0;width:5px;height:11px;
border:solid var(--green-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.helpset{border:0;padding:0;margin:1.4rem 0 0;min-width:0}
.helpset legend{
font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.75);padding:0;margin-bottom:.6rem;
}
.vmsg{margin-top:1.2rem}
.donate .fine .ph{color:var(--gold);font-weight:600}
.form-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.8rem}
.form-note{font-size:.78rem;color:rgba(255,255,255,.65);max-width:38ch;margin:0}
/* honeypot — bots fill it, humans never see it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{
margin-top:1.4rem;padding:1.1rem 1.3rem;border-radius:8px;font-size:.95rem;
display:none;
}
.form-status.show{display:block}
.form-status.ok{background:rgba(31,92,61,.4);border:1px solid var(--green);color:#fff}
.form-status.bad{background:rgba(180,60,40,.28);border:1px solid #F0846B;color:#FFDDD6}
/* ══════════════════════════════════════════════════════════════
DONATE
══════════════════════════════════════════════════════════════ */
.donate{background:var(--sand-2);padding:6rem 0}
.donate .shell{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.donate h2{font-size:clamp(2.1rem,4.8vw,3.3rem);color:var(--green-ink);letter-spacing:-.025em;margin:1rem 0 1.3rem;text-wrap:balance}
.donate h2 i{font-style:italic;font-weight:600;color:var(--gold)}
.donate p{color:var(--ink-soft);max-width:44ch;margin:0 0 1.05rem}
.donate .fine{font-size:.79rem;line-height:1.6;color:var(--ink-soft);max-width:46ch;margin-top:1.5rem}
.give{background:#fff;border-radius:12px;padding:2.5rem;box-shadow:0 22px 54px rgba(12,38,24,.15)}
.give fieldset{border:0;padding:0;margin:0}
.give legend{
font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-soft);text-align:center;
width:100%;margin-bottom:1.3rem;padding:0;
}
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:.8rem}
/* The label is the grid cell; .amt-face is the visible control. The radio
itself is hidden without display:none or visibility:hidden, either of
which would drop it out of the tab order and kill arrow-key navigation. */
.amt{display:block;position:relative;cursor:pointer}
.amt input{
position:absolute;width:1px;height:1px;margin:0;padding:0;
opacity:0;pointer-events:none;
}
.amt-face{
display:block;text-align:center;
font-family:var(--slab);font-weight:700;font-size:1.32rem;color:var(--green);
background:var(--sand);border:2px solid transparent;border-radius:8px;
padding:.95rem .4rem;transition:.25s var(--ease);
}
.amt:hover .amt-face{border-color:var(--gold);transform:translateY(-2px)}
.amt input:checked + .amt-face{background:var(--green);color:#fff;border-color:var(--green)}
/* focus ring has to be drawn on the face — the input it belongs to is 1px */
.amt input:focus-visible + .amt-face{outline:3px solid var(--gold);outline-offset:3px}
.other-wrap{position:relative;margin-bottom:1.2rem}
.other-wrap .dollar{
position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
font-family:var(--slab);font-weight:700;color:var(--ink-soft);pointer-events:none;
}
.other{
width:100%;font-family:var(--sans);font-size:1rem;padding:.95rem 1.1rem .95rem 2.2rem;
border:2px solid var(--sand-2);border-radius:8px;background:var(--sand);color:var(--ink);
}
.other:focus{outline:none;border-color:var(--gold)}
.give .btn{width:100%}
/* max-width:none undoes `.donate p{max-width:44ch}`, which leaked in here
and, with no auto margins, pinned this note to the left of the card
while text-align:center only centred the text inside that narrow box. */
.give .note{font-size:.73rem;color:var(--ink-soft);text-align:center;margin:.95rem 0 0;line-height:1.5;max-width:none}
/* ══════════════════════════════════════════════════════════════
CONTACT + FOOTER
══════════════════════════════════════════════════════════════ */
.contact{background:var(--navy-ink);color:#fff;padding:5.5rem 0}
.contact .shell{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem;align-items:start}
/* Heading spans both columns and centres above them. Putting it on its own
row is also what drops the form down the page — it no longer starts level
with the kicker. */
.c-head{grid-column:1 / -1;text-align:center;margin:0 0 3.2rem}
.c-head .kicker{justify-content:center}
.contact h2{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.02em;margin:1rem 0 1.2rem;text-wrap:balance}
/* auto side margins are required. text-align:center only centres the text
inside the box; a max-width'd block still sits flush left without them. */
.contact .intro{color:rgba(255,255,255,.85);max-width:46ch;margin:0 auto}
.cl{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.cl li{background:rgba(255,255,255,.07);border-radius:8px;padding:1.15rem 1.4rem;
display:flex;align-items:center;gap:1rem}
.cl svg{width:21px;height:21px;fill:var(--gold-lt);flex:0 0 21px}
.cl b{display:block;font-family:var(--sans);font-weight:700;font-size:.62rem;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:.1rem}
.cl a,.cl span{color:#fff;text-decoration:none;font-size:1rem}
.cl a:hover{color:var(--gold-lt)}
footer{background:var(--green-ink);color:rgba(255,255,255,.66);padding:3.6rem 0 2.4rem;text-align:center}
.f-lock{display:inline-flex;align-items:center;gap:1.5rem;margin-bottom:1.9rem;text-align:left}
.f-lock img{height:88px;width:auto}
.f-side{display:flex;flex-direction:column;gap:.35rem;
padding-left:1.5rem;border-left:1px solid rgba(255,255,255,.28)}
.f-side .l1{font-family:var(--slab);font-weight:600;font-size:1.2rem;color:#fff;line-height:1.05}
.f-side .l2{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold-lt)}
.f-nav{display:flex;justify-content:center;gap:1.7rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 2.2rem}
.f-nav a{font-family:var(--sans);font-weight:500;font-size:.85rem;text-decoration:none;color:rgba(255,255,255,.76)}
.f-nav a:hover{color:var(--gold-lt)}
.disclaimer{font-size:.75rem;line-height:1.7;max-width:56ch;margin:0 auto;
padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.13)}
.disclaimer .ph{color:var(--gold-lt);font-weight:600}
/* ══════════════════════════════════════════════════════════════
CROSS-SECTION CONSISTENCY
Declared after the section blocks so it wins on source order at
equal specificity. These are peers — one voice, not six.
══════════════════════════════════════════════════════════════ */
/* Was four ceilings (3, 3.1, 3.2, 3.3rem) over three slopes (4.4, 4.6,
4.8vw), so adjacent section headings sat at visibly different sizes and
the difference between them shifted on every resize. */
.promises h2,.about h2,.platform h2,.help h2,.donate h2,.contact h2{
font-size:clamp(2rem,4.4vw,3.1rem);
letter-spacing:-.02em;
}
/* Card copy was the only text on the page with no measure cap. Once the
card grids collapse to one column between 780 and 1000px, lines ran to
~112 characters against a readable maximum of about 75. */
.tile p,.row p{max-width:62ch}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════ */
/* The nav runs logo + links + Donate on one line. Below this the side text
starts crowding the links, so it drops and the mark stands alone —
the hero states "St. Tammany Parish · District 3" immediately below. */
@media(max-width:1200px){
.lk-side{display:none}
}
@media(max-width:1000px){
.tiles{grid-template-columns:1fr}
.about .shell,.donate .shell,.contact .shell{grid-template-columns:1fr;gap:2.8rem}
/* justify-self, or the 400px portrait sits flush left in a track up to
952px wide with a slab of empty sand beside it */
.about figure{max-width:400px;justify-self:center}
.row{grid-template-columns:1fr;gap:1rem}
.nav-links{
position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;
background:var(--green-ink);gap:2.2rem;transform:translateX(100%);
/* visibility, not just transform. Translated off-screen the links stay
in the tab order, so a keyboard user tabbing the closed page lands on
four invisible links before ever reaching the burger. visibility
removes them from focus; the delay lets the slide-out finish first. */
visibility:hidden;
transition:transform .45s var(--ease),visibility 0s linear .45s;
z-index:75;margin:0;
}
.nav-links.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.nav-links a,.nav.solid .nav-links a{color:#fff;font-family:var(--slab);font-size:1.4rem;opacity:1}
.nav-links a{display:flex;align-items:center;min-height:44px;padding:0 1rem}
.burger{display:flex;z-index:85;position:relative}
.nav > .shell > .btn{display:none}
}
@media(max-width:700px){
.fgrid,.checks{grid-template-columns:1fr}
.formwrap{padding:1.8rem 1.4rem}
}
@media(max-width:620px){
:root{--shell:min(1220px,100% - 2.2rem)}
/* stacked, and the stars go — left dangling at the start of a wrapped
line they read as bullets rather than dividers */
.creed-band .shell{flex-direction:column;gap:.45rem;padding:1.2rem 0}
.creed-band .sep{display:none}
.amts{grid-template-columns:repeat(2,1fr)}
.hero .say{font-size:1.05rem}
.give{padding:1.7rem 1.3rem}
.f-lock{gap:1rem}
.f-lock img{height:62px}
.f-side{padding-left:1rem;gap:.25rem}
.f-side .l1{font-size:1rem}
.f-side .l2{font-size:.64rem;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.rv,.hero-copy>*{opacity:1;transform:none}
}
/* ══════════════════════════════════════════════════════════════
PRINT — a volunteer printing this should get the substance
══════════════════════════════════════════════════════════════ */
@media print{
.nav,.burger,.hero-cta,.give,.formwrap,.f-nav,.skip{display:none!important}
body{background:#fff;color:#000;font-size:11pt}
.hero,.help,.contact,footer{background:#fff!important;color:#000!important}
.hero-media{display:none}
.hero-inner{min-height:0;padding:1rem 0}
.hero h1,.hero .sub,.hero .say,.help h2,.contact h2,.cl a,.cl span{color:#000!important}
.tile,.row{box-shadow:none;border:1px solid #999;background:#fff!important;color:#000!important}
.tile p,.row p{color:#333!important}
.rv{opacity:1;transform:none}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}