:root{
    --navy:#0B234E;
    --creek:#3FA6EC;
    --leaf:#5E8A1C;
    --leaf-bright:#7FB52E;
    --amber:#F0921F;
    --paper:#FBF8F3;
    --paper-deep:#F3EDE2;
    --ink:#1E2A3A;
    --ink-mute:#5A6675;
    --rule:rgba(11,35,78,.14);
    --measure:34rem;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:clamp(1rem,.96rem + .22vw,1.125rem);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
  }

  /* Topographic ground — contour lines echoing the creek basin */
  .terrain{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .terrain svg{
    position:absolute;
    left:50%;
    bottom:-6vh;
    width:min(1600px,175vw);
    transform:translateX(-50%);
    opacity:.5;
  }
  .terrain path{
    fill:none;
    stroke:var(--navy);
    stroke-width:1.1;
    opacity:.09;
  }
  /* Warm horizon wash */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(120% 62% at 50% 116%, rgba(94,138,28,.13) 0%, transparent 62%),
      radial-gradient(96% 54% at 50% -14%, rgba(240,146,31,.11) 0%, transparent 60%);
  }
  /* Paper grain */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.05;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .shell{
    position:relative;
    z-index:2;
    flex:1 0 auto;
    padding:clamp(2rem,5vw,3.5rem) 1.5rem clamp(2rem,5vw,3.5rem);
    width:100%;
    max-width:62rem;
    margin-inline:auto;
    text-align:left;
  }
  /* The landing page keeps the original centred splash treatment. */
  body.is-landing .shell{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  /* Staggered arrival */
  .rise{
    opacity:0;
    transform:translateY(14px);
    animation:rise .95s cubic-bezier(.2,.7,.25,1) forwards;
  }
  .d1{animation-delay:.06s} .d2{animation-delay:.22s} .d3{animation-delay:.36s}
  .d4{animation-delay:.5s}  .d5{animation-delay:.64s} .d6{animation-delay:.78s}
  @keyframes rise{to{opacity:1;transform:none}}

  .mark{
    width:min(100%,30rem);
    margin:0 auto clamp(1.75rem,4.5vw,2.75rem);
  }
  .mark img{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 18px 34px rgba(11,35,78,.13));
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--leaf);
    margin:0 0 clamp(1rem,2.6vw,1.5rem);
  }
  .eyebrow::before,.eyebrow::after{
    content:"";
    width:clamp(1.25rem,5vw,2.5rem);
    height:1px;
    background:currentColor;
    opacity:.5;
  }

  h1{
    font-family:"Fraunces",Georgia,"Times New Roman",serif;
    font-optical-sizing:auto;
    font-weight:600;
    font-size:clamp(2.35rem,1.4rem + 4.4vw,4.25rem);
    line-height:1.04;
    letter-spacing:-.022em;
    color:var(--navy);
    margin:0 0 clamp(1.1rem,2.8vw,1.6rem);
    text-wrap:balance;
  }
  h1 em{
    font-style:italic;
    font-weight:400;
    color:var(--amber);
  }

  .lede{
    max-width:var(--measure);
    margin:0 auto;
    color:var(--ink-mute);
    text-wrap:pretty;
  }
  .lede strong{
    color:var(--ink);
    font-weight:500;
  }

  .divider{
    width:clamp(3rem,8vw,4.5rem);
    height:2px;
    margin:clamp(1.9rem,4.5vw,2.75rem) auto;
    border-radius:2px;
    background:linear-gradient(90deg,var(--leaf-bright),var(--amber));
  }

  .status{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.55rem 1.15rem;
    border:1px solid var(--rule);
    border-radius:999px;
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(6px);
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.01em;
    color:var(--navy);
  }
  .pulse{
    width:7px;height:7px;
    border-radius:50%;
    background:var(--leaf-bright);
    box-shadow:0 0 0 0 rgba(127,181,46,.65);
    animation:pulse 2.6s ease-out infinite;
    flex:none;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(127,181,46,.6)}
    70%{box-shadow:0 0 0 9px rgba(127,181,46,0)}
    100%{box-shadow:0 0 0 0 rgba(127,181,46,0)}
  }

  .contact{
    margin:clamp(1.6rem,4vw,2.25rem) 0 0;
    font-size:.95rem;
    color:var(--ink-mute);
  }
  .contact a{
    color:var(--navy);
    font-weight:500;
    text-decoration:none;
    border-bottom:1.5px solid rgba(240,146,31,.55);
    padding-bottom:1px;
    transition:border-color .25s ease,color .25s ease;
  }
  .contact a:hover,.contact a:focus-visible{
    color:var(--amber);
    border-bottom-color:var(--amber);
  }

  /* (legacy centred footer rule removed — all pages use .site-footer) */

  @media (prefers-reduced-motion:reduce){
    .rise{animation:none;opacity:1;transform:none}
    .pulse{animation:none}
    *{transition-duration:.01ms!important}
  }

/* ==========================================================================
   Site chrome — header, nav, footer. Added for the multi-page build.
   ========================================================================== */

.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:0}

.site-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.75rem 1.25rem;border-bottom:1px solid var(--rule);background:var(--paper)}
.site-logo img{display:block;width:auto;height:48px}

.site-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{color:var(--ink);text-decoration:none;font-size:.95rem;
  padding:.35rem 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--creek)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--navy);font-weight:600}

.header-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto;flex-wrap:wrap}

.btn{display:inline-block;padding:.6rem 1.1rem;border-radius:4px;
  text-decoration:none;font-weight:600;font-size:.95rem;border:2px solid transparent}
.btn-help{background:var(--navy);color:#fff;font-size:1rem;padding:.7rem 1.3rem}
.btn-help:hover,.btn-help:focus-visible{background:#081c3e}

/* Amber on paper is 2.24:1 — below the 3:1 UI minimum — so the border is
   required, not decorative. Navy on amber is 6.48:1; white would be 2.38:1. */
.btn-donate{background:var(--amber);color:var(--navy);border-color:#B45F00}
.btn-donate:hover,.btn-donate:focus-visible{background:#e08512}

.lang-switch{display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem;color:var(--navy);text-decoration:underline;font-size:.9rem}

.nav-toggle{display:none;align-items:center;gap:.4rem;background:none;
  border:1px solid var(--rule);border-radius:4px;padding:.5rem .8rem;
  font:inherit;color:var(--ink);cursor:pointer}

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

/* Nine nav items plus two buttons do not fit a 1024px laptop. */
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;width:100%;order:10}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav li{border-top:1px solid var(--rule)}
  .site-nav a{display:block;padding:.75rem 0}
}

.mt-notice{background:var(--paper-deep);border-left:4px solid var(--amber);
  padding:.75rem 1rem;margin:0 0 1.5rem;font-size:.95rem}

/* Image placeholders — swap the inner div for an <img> when the file lands. */
.ph{margin:0 0 1.5rem}
.ph-box{aspect-ratio:var(--ph-ratio,4/3);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35rem;padding:1rem;text-align:center;
  background:var(--paper-deep);border:2px dashed var(--rule);border-radius:4px;
  color:var(--ink-mute)}
.ph-label{font-weight:600;font-size:.95rem;color:var(--ink)}
.ph-meta{font-size:.8rem}
.ph img{display:block;width:100%;height:auto;border-radius:4px}
.ph figcaption{margin-top:.5rem;font-size:.85rem;color:var(--ink-mute)}
@media print{.ph-box{display:none}}

/* Social links. Text label beside the icon, not an icon alone — an unlabeled
   glyph is unusable for screen readers and unclear for anyone who does not
   recognise the mark. 44px min-height keeps the tap target honest. */

/* ==========================================================================
   Remembrance page. Quiet by design: no amber, no accent rules, no calls to
   action. A card whose photograph never arrives should read as waiting, not
   as broken — hence the soft placeholder rather than a dashed "missing" box.
   ========================================================================== */

.memorial-note{background:var(--paper-deep);padding:1rem 1.25rem;border-radius:4px;
  font-size:.95rem;max-width:var(--measure)}
.memorial-close{margin-top:3rem;font-size:.95rem;color:var(--ink-mute)}

.memorial-grid{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2rem 1.5rem}

.memorial-card h2{font-size:1.1rem;margin:.75rem 0 .15rem;font-weight:600;
  line-height:1.3}
.memorial-age{margin:0;color:var(--ink-mute);font-size:.9rem}

/* Softer than the generic .ph-box: solid, no dashes, no label shouting. */
.memorial-card .ph-box{border:1px solid var(--rule);background:var(--paper-deep);
  gap:.2rem}
.memorial-card .ph-label{font-weight:500;font-size:.85rem;color:var(--ink-mute)}
.memorial-card .ph-meta{font-size:.75rem}
.memorial-card .ph{margin:0}

/* Names still pending a family's decision — visibly unfinished on purpose,
   so no one mistakes the placeholder for the person's name. */
.memorial-card-pending h2{color:var(--ink-mute);font-weight:400;font-style:italic}

/* Photo submission page. The email address is the point of the page, so it
   gets the visual weight rather than being buried in a paragraph. */
.submit-box{background:var(--paper-deep);border-left:4px solid var(--leaf);
  padding:1.25rem 1.5rem;margin:2rem 0;border-radius:4px}
.submit-box h2{margin-top:0}
.submit-address{font-size:1.15rem;font-weight:600;margin:.5rem 0}
.submit-list{max-width:var(--measure);line-height:1.7}
.submit-list li{margin-bottom:.6rem}
.submit-note{background:var(--paper-deep);padding:1rem 1.25rem;border-radius:4px;
  font-size:.95rem;max-width:var(--measure)}
.submit-close{color:var(--ink-mute)}

/* Media coverage index. 313 links, so scannability is the whole design problem:
   the eye needs to find a phase, then an outlet, without reading every line. */
.archive-note{background:var(--paper-deep);padding:1rem 1.25rem;border-radius:4px;
  font-size:.95rem;max-width:var(--measure)}
.phase-index{margin:2rem 0;padding:1.25rem 1.5rem;border:1px solid var(--rule);
  border-radius:4px}
.phase-index h2{margin-top:0;font-size:1rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-mute)}
.phase-index ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.phase-index li{margin-bottom:.4rem;break-inside:avoid}
.phase-count{display:inline-block;background:var(--paper-deep);color:var(--ink-mute);
  font-size:.78rem;padding:.1rem .45rem;border-radius:10px;margin-left:.35rem;
  font-weight:500}
.phase{margin:3rem 0;scroll-margin-top:1rem}
.phase h2{border-bottom:2px solid var(--rule);padding-bottom:.4rem}
.media-list{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:2.5rem;
}
.media-list li{
  padding:.65rem 0;
  border-bottom:1px solid var(--rule);
  line-height:1.45;
  /* Never split a title from its outlet across the column boundary. */
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}
.media-list > li > a:first-child{font-weight:500}
.media-meta{display:block;font-size:.85rem;color:var(--ink-mute);margin-top:.15rem}
.alt-link{font-size:.8rem;color:var(--ink-mute);margin-left:.4rem;white-space:nowrap}
@media (max-width:640px){.phase-index ul{columns:1}}
.feature-card{background:var(--paper-deep);border-left:4px solid var(--creek);
  padding:1.5rem;border-radius:4px;margin:2rem 0;max-width:var(--measure)}
.feature-card h2{margin-top:0}

/* ==========================================================================
   Get Help — hyper-local resource listings (spec §3a). Every listing leads
   with a "serves Sandy Creek" badge before any other detail. Green for a
   confirmed yes, amber for "call to confirm" — never a plain amber fill
   (2.24:1 on paper, below the 3:1 UI minimum; text stays --ink/--navy, only
   the left border and badge carry the color).
   ========================================================================== */

.resource{margin:2.5rem 0;padding-bottom:2rem;border-bottom:1px solid var(--rule)}
.resource:last-of-type{border-bottom:none}
.resource h2{margin:0 0 .5rem}

.serves-badge{display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600;
  margin:0 0 .85rem}
.serves-yes{background:rgba(94,138,28,.13);color:var(--leaf);
  border:1px solid rgba(94,138,28,.35)}
.serves-confirm{background:rgba(240,146,31,.13);color:#B45F00;
  border:1px solid rgba(240,146,31,.4)}
.serves-yes::before{content:"✓ "}
.serves-confirm::before{content:"? "}

.resource-distance{color:var(--ink-mute);font-size:.92rem;margin:0 0 .75rem}

.resource-detail{max-width:var(--measure);line-height:1.7}
.resource-contact{list-style:none;margin:.85rem 0;padding:0;max-width:var(--measure);
  line-height:1.8}
.resource-contact li{padding-left:0}
.resource-contact a{color:var(--navy);font-weight:500}

.resource-area{font-size:.88rem;color:var(--ink-mute);max-width:var(--measure);
  margin:.75rem 0 0}
.resource-area strong{color:var(--ink)}

.verified-note{background:var(--paper-deep);padding:.85rem 1.25rem;border-radius:4px;
  font-size:.9rem;color:var(--ink-mute);margin:2.5rem 0}

.resource-index{list-style:none;margin:2rem 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}
.resource-index li{border:1px solid var(--rule);border-radius:4px;padding:1.1rem 1.25rem}
.resource-index a{font-weight:600;color:var(--navy);text-decoration:none;font-size:1.05rem}
.resource-index a:hover,.resource-index a:focus-visible{text-decoration:underline}
.resource-index p{margin:.4rem 0 0;font-size:.88rem;color:var(--ink-mute)}

/* ==========================================================================
   Take Action. Two kinds of content share these pages and must read
   differently on sight, not just in wording: a verified official fact (a
   meeting time, a hearing room, an agency's own page) versus the Alliance's
   own ask ("we are asking the County to..."). .fact-card carries navy/creek
   — the color already used for informational chrome elsewhere on the site.
   .ask-card carries amber, the site's single call-to-action color, so an
   ask always reads as an ask at a glance, on this page or any other.
   ========================================================================== */

.action-list{list-style:none;margin:2rem 0;padding:0;display:flex;
  flex-direction:column;gap:1.5rem}
.action-card{background:var(--paper-deep);border-left:4px solid var(--creek);
  padding:1.5rem 1.75rem;border-radius:4px;text-align:left}
.action-card h2,.action-card h3{margin-top:0;font-size:1.25rem}
.action-kicker{display:block;font-size:.75rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:.35rem}
.action-card .btn-ask{margin-top:.5rem}

.fact-card{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--navy);
  border-radius:4px;padding:1.25rem 1.5rem;margin:1.25rem 0;text-align:left;
  max-width:var(--measure)}
.fact-card .fact-label{display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:.5rem}
.fact-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem}
.fact-card dt{font-weight:600;color:var(--ink-mute);white-space:nowrap}
.fact-card dd{margin:0}

.ask-card{background:rgba(240,146,31,.08);border:1px solid rgba(240,146,31,.35);
  border-left:4px solid var(--amber);border-radius:4px;padding:1.25rem 1.5rem;
  margin:1.25rem 0;text-align:left;max-width:var(--measure)}
.ask-card .ask-label{display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#B45F00;margin-bottom:.5rem}

.btn-ask{background:var(--amber);color:var(--navy);border:2px solid #B45F00;
  display:inline-block;padding:.6rem 1.1rem;border-radius:4px;text-decoration:none;
  font-weight:600;font-size:.95rem;margin:.35rem .5rem .35rem 0}
.btn-ask:hover,.btn-ask:focus-visible{background:#e08512}

.btn-secondary{background:#fff;color:var(--navy);border:2px solid var(--navy);
  display:inline-block;padding:.6rem 1.1rem;border-radius:4px;text-decoration:none;
  font-weight:600;font-size:.95rem;margin:.35rem .5rem .35rem 0}
.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--paper-deep)}

.sample-message{background:var(--paper-deep);border-radius:4px;padding:1.25rem 1.5rem;
  margin:1rem 0;max-width:var(--measure);font-style:italic;text-align:left}
.sample-message p{margin:0}

.past-meeting{opacity:.75}
.past-label{display:inline-block;background:var(--ink-mute);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:10px;margin-bottom:.5rem}

.meeting-list{list-style:none;margin:2rem 0;padding:0;display:flex;
  flex-direction:column;gap:1.5rem;text-align:left}

.contact-card{border:1px solid var(--rule);border-radius:4px;padding:1.5rem 1.75rem;
  margin:1.5rem 0;text-align:left;max-width:var(--measure)}
.contact-card h2,.contact-card h3{margin-top:0}
.contact-card .contact-role{display:block;color:var(--ink-mute);font-size:.9rem;
  margin:-.5rem 0 .75rem}
.contact-card dl{margin:0 0 .75rem;display:grid;grid-template-columns:auto 1fr;
  gap:.3rem 1rem}
.contact-card dt{font-weight:600;color:var(--ink-mute);white-space:nowrap}
.contact-card dd{margin:0}

.level-heading{margin-top:3rem;border-bottom:2px solid var(--rule);padding-bottom:.4rem}

/* Coming-soon blocks. Stated plainly with a useful alternative below — a bare
   "coming soon" reads as abandoned; one that says what is coming and offers a
   route reads as a group mid-build. */
.coming-soon{background:var(--paper-deep);border-left:4px solid var(--creek);
  padding:1.25rem 1.5rem;border-radius:4px;margin:1.5rem 0;max-width:var(--measure)}
.coming-soon-label{margin:0 0 .4rem;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-mute);font-weight:600}
.coming-soon p:last-child{margin-bottom:0}
.donate-facts{background:var(--paper-deep);border-left:4px solid var(--leaf);
  padding:1.25rem 1.5rem;border-radius:4px;margin:2rem 0;max-width:var(--measure)}
.donate-facts h2{margin-top:0}

/* ==========================================================================
   About section — index links, values list, partner distinction note, FAQ.
   ========================================================================== */

/* About index: the four subpages, styled like the existing submit-list but
   with a description trailing each link so a scanning reader (staffer,
   reporter) can tell them apart without clicking through. */
.about-index li{margin-bottom:.9rem}
.about-index a{font-weight:600}

/* Values as a definition list: term (value name) + definition (its meaning).
   Real <dl>, not styled divs — matches the FAQ's semantic-list requirement. */
.values-list{margin:1.5rem 0;max-width:var(--measure)}
.values-list dt{font-weight:700;color:var(--navy);margin-top:1.25rem;
  font-size:1.05rem}
.values-list dt:first-child{margin-top:0}
.values-list dd{margin:.3rem 0 0;line-height:1.6}

/* Partner disambiguation note — REBUILD.US vs. Rebuild Sandy Creek are two
   different organizations with confusingly similar names. Amber border
   marks it as "read this carefully," distinct from the leaf-green submit
   boxes used elsewhere. */
.partner-note{background:var(--paper-deep);border-left:4px solid var(--amber);
  padding:1.25rem 1.5rem;margin:1.5rem 0 2rem;border-radius:4px;
  max-width:var(--measure)}
.partner-note p{margin:0}

.partner-logo{margin:1rem 0}
.partner-logo img{display:block;max-width:200px;height:auto}

/* FAQ: h2 + p per question, no accordion — semantic and fully visible to
   search engines, screen readers, and print. */
.faq-item{margin:0 0 2rem;padding-bottom:2rem;border-bottom:1px solid var(--rule)}
.faq-item:last-child{border-bottom:none}
.faq-item h2{margin-top:0}
.faq-item p{max-width:var(--measure)}

/* ==========================================================================
   Site footer. Dark navy ground so it reads as a distinct band rather than
   drifting off the paper. Everything left-aligned on one grid — the old
   version mixed centred and left content and looked accidental. Links are
   styled explicitly; browser-default blue underlines were the worst of it.
   ========================================================================== */

.site-footer{
  background:var(--navy);
  color:#D6DEEA;
  margin-top:4rem;
  padding:2.5rem 1.25rem 2rem;
  font-size:.92rem;
  line-height:1.6;
}
.footer-inner{max-width:62rem;margin:0 auto}

/* Emergency notice leads, and must stay visually loud against the navy. */
.emergency{
  background:rgba(240,146,31,.14);
  border-left:4px solid var(--amber);
  color:#FFF3E2;
  padding:.85rem 1.1rem;
  margin:0 0 2rem;
  border-radius:3px;
  max-width:46rem;
}
.emergency strong{color:#fff}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.75rem 2rem;
  margin-bottom:2rem;
  text-align:left;
}
@media (max-width:860px){
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .footer-cols{grid-template-columns:1fr}
}
.footer-col h2{
  font-family:inherit;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8EA2BE;
  margin:0 0 .6rem;
  font-weight:600;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:.35rem}

/* One link treatment for the whole footer. */
.site-footer a{
  color:#EAF0F7;
  text-decoration:none;
  border-bottom:1px solid rgba(234,240,247,.35);
  padding-bottom:1px;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color:#fff;
  border-bottom-color:#fff;
}
/* Creek fails 3:1 on the light paper ground (2.52:1) but is 5.77:1 on navy,
   so it is correct HERE and nowhere else. Measured, not assumed. */
.site-footer :focus-visible{outline:3px solid #3FA6EC;outline-offset:3px;border-radius:3px}

.social-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.social-icon{flex:0 0 auto}

.footer-meta{
  border-top:1px solid rgba(214,222,234,.18);
  padding-top:1.25rem;
  margin:0;
  color:#9FB0C6;
  font-size:.85rem;
}

/* Values as cards. A column of centred paragraphs reads as a wall; a grid of
   bounded cards is scannable, and the icon gives the eye an anchor per item. */
.value-cards{
  list-style:none;margin:2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.25rem;
}
.value-card{
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:1.5rem 1.35rem;
  text-align:left;
}
.value-icon{
  width:30px;height:30px;color:var(--leaf);
  display:block;margin-bottom:.85rem;
}
.value-card h3{
  margin:0 0 .5rem;font-size:1.05rem;color:var(--navy);
  line-height:1.3;
}
.value-card p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink)}

/* ==========================================================================
   Body content typography. The original stylesheet only ever styled a
   single-screen splash, so links outside .contact fell back to browser
   default blue and everything inherited centring from .shell. This is the
   document-content layer that was missing.
   ========================================================================== */

.shell h1{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(2rem,4.2vw,2.9rem);
  line-height:1.12;
  color:var(--navy);
  margin:0 0 1rem;
  max-width:24ch;
}
.shell h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.35rem,2.4vw,1.7rem);
  line-height:1.25;
  color:var(--navy);
  margin:2.5rem 0 .75rem;
}
.shell h3{
  font-size:1.08rem;
  color:var(--navy);
  margin:1.75rem 0 .4rem;
}
.shell p,
.shell li{max-width:var(--measure)}
.shell p{margin:0 0 1rem;line-height:1.65}
.shell ul,.shell ol{padding-left:1.25rem;margin:0 0 1.25rem}
.shell li{margin-bottom:.4rem;line-height:1.6}

.shell .lede{
  font-size:1.12rem;
  line-height:1.6;
  color:var(--ink-mute);
  max-width:38rem;
  margin-bottom:1.75rem;
}

/* One link treatment for body copy. Navy on paper is 14.53:1. */
/* :not(.btn) matters: buttons set their own colour, and without this the
   generic rule (0,0,1,1) beats .btn-help (0,0,1,0) and paints navy text on a
   navy button. */
.shell a:not(.btn){
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(11,35,78,.4);
}
.shell a:not(.btn):hover,
.shell a:not(.btn):focus-visible{text-decoration-color:var(--navy)}

/* Cards and grids opt out of the measure cap so they can fill the column. */
.value-cards li,
.memorial-grid li,
.media-list li,
.phase-index li,
.footer-col li{max-width:none}
.value-card p,
.memorial-card p{max-width:none}

/* One column on narrow screens — two columns of 40 items is unreadable
   on a phone, and this page's audience is often on one. */
@media (max-width:760px){
  .media-list{columns:1}
}

/* The original coming-soon page centred its whole footer. That rule is now
   scoped to body.is-landing, but assert the intent here too so a future
   inherited rule cannot re-centre the site footer. */
.site-footer,
.site-footer .footer-inner,
.site-footer .footer-col,
.site-footer .footer-meta{text-align:left}

/* Featured video facades. Click-to-load: a poster image and a button until the
   visitor asks for the video, so arriving at this page costs no YouTube
   cookies and no player bytes. */
.featured-videos{margin:0 0 3rem}
.featured-intro{color:var(--ink-mute);max-width:var(--measure)}
.video-figure{margin:0 0 2rem;max-width:44rem}
.video-facade{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--paper-deep);aspect-ratio:16/9;overflow:hidden;border-radius:6px;
}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
.video-play{
  position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  background:rgba(11,35,78,.86);color:#fff;display:grid;place-items:center;
  font-size:1.5rem;line-height:1;transition:background-color .15s ease,transform .15s ease;
}
.video-facade:hover .video-play,
.video-facade:focus-visible .video-play{background:var(--navy);transform:scale(1.06)}
.video-figure figcaption{margin-top:.6rem;line-height:1.5;max-width:var(--measure)}
.video-meta{display:block;font-size:.85rem;color:var(--ink-mute);margin:.15rem 0 .35rem}
.video-desc{display:block;margin-bottom:.35rem}
@media (min-width:900px){
  .featured-videos{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;
  }
  .featured-videos h2,.featured-intro{grid-column:1/-1}
  .video-figure{max-width:none;margin:0}
}

/* Voter registration sits above the numbered asks — a prerequisite, not a
   seventh ask, so it is deliberately outside the <ol> and styled apart. */
.prereq-card{
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-left:4px solid var(--leaf);
  border-radius:6px;
  padding:1.5rem 1.6rem;
  margin:0 0 2.5rem;
  max-width:44rem;
}
.prereq-kicker{
  display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--leaf);font-weight:600;margin-bottom:.4rem;
}
.prereq-card h2{margin:0 0 .75rem;font-size:1.3rem}
.prereq-card p{max-width:none}
.prereq-note{
  font-size:.9rem;color:var(--ink-mute);border-top:1px solid var(--rule);
  padding-top:.85rem;margin-bottom:0;
}

/* ==========================================================================
   Full-bleed hero. Rendered outside <main> by build.sh so it is not held to
   .shell's 62rem column. Dark scrim + white text, left-aligned — the footage
   carries the page rather than sitting in a card on it.
   ========================================================================== */
.hero{
  position:relative;
  width:100%;
  min-height:clamp(420px,62vh,620px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--navy);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,35,78,.86) 0%,rgba(11,35,78,.72) 45%,rgba(11,35,78,.42) 100%);
}
.hero-inner{
  width:100%;max-width:62rem;
  margin-inline:auto;
  padding:clamp(3rem,7vw,5rem) 1.5rem;
  color:#fff;
}
.hero-eyebrow{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.82);margin:0 0 1rem;font-weight:600;
}
.hero h1{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(2.4rem,6vw,4rem);
  line-height:1.05;color:#fff;margin:0 0 1.25rem;max-width:18ch;
}
.hero h1 em{color:var(--amber);font-style:italic}
.hero-lede{
  font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.6;color:rgba(255,255,255,.93);
  max-width:34rem;margin:0 0 1.75rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.btn-ghost{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65);
  padding:.7rem 1.3rem;font-size:1rem;
}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:#fff;background:rgba(255,255,255,.12)}
.hero :focus-visible{outline:3px solid #fff;outline-offset:3px}

/* A looping background is motion the visitor did not ask for, and it makes
   some people ill. The poster frame carries the hero instead. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero{
    background:var(--navy) url(/assets/images/hero-poster-1600.webp) center/cover;
  }
}

/* Hero logo. The legacy .mark rule (width:min(100%,30rem)) is declared later in
   this file and matches at the same specificity, so this sits at the end and is
   scoped to .hero to win on both counts. */
.hero .mark{width:min(55%,9.5rem);margin:0 0 1.1rem;margin-inline:0}
.hero .mark img{width:100%;height:auto;display:block}

/* Image heroes (no video). The Texas flag is a busy, high-contrast photograph,
   so the scrim runs heavier than the homepage's — white text has to hold over
   pale weathered wood as well as dark blue. */
.hero-image{background-size:cover;background-position:center}
/* Reversed: clear on the LEFT so the star and blue field stay recognisable,
   heavy on the RIGHT where the text sits over the plain red band. */
.hero-image .hero-scrim{
  background:linear-gradient(90deg,rgba(11,35,78,.10) 0%,rgba(11,35,78,.30) 32%,rgba(11,35,78,.78) 55%,rgba(11,35,78,.90) 100%);
}
.hero-takeaction{
  background-image:image-set(
    url(/assets/images/hero-takeaction-1920.webp) type("image/webp"),
    url(/assets/images/hero-takeaction-1920.jpg) type("image/jpeg"));
}
@media (max-width:820px){
  .hero-takeaction{
    background-image:image-set(
      url(/assets/images/hero-takeaction-640.webp) type("image/webp"),
      url(/assets/images/hero-takeaction-640.jpg) type("image/jpeg"));
  }
}

/* On a navy hero scrim a navy button is invisible. Invert it: white fill,
   navy text — 15.4:1, and it reads as the primary action at a glance. */
.hero .btn-help{background:#fff;color:var(--navy);border:1.5px solid #fff}
.hero .btn-help:hover,.hero .btn-help:focus-visible{background:var(--paper);border-color:var(--paper)}

/* Image heroes put their text on the right, so the photograph's subject (the
   Texas star) is not buried under the scrim that makes the text readable. */
.hero-image .hero-inner{display:flex;justify-content:flex-end}
.hero-image .hero-copy{max-width:34rem;width:100%}
@media (max-width:820px){
  .hero-image .hero-inner{justify-content:flex-start}
  .hero-image .hero-scrim{
    background:linear-gradient(180deg,rgba(11,35,78,.55) 0%,rgba(11,35,78,.88) 60%,rgba(11,35,78,.93) 100%);
  }
}

/* Media hero. The photograph is ~3:1 and its left third is near-black empty
   studio space, so the copy sits there with a much lighter scrim than the
   other image heroes need — the subject is already out of the way. */
.hero-media{
  background-position:right center;
  background-image:image-set(
    url(/assets/images/hero-media-1920.webp) type("image/webp"),
    url(/assets/images/hero-media-1920.jpg) type("image/jpeg"));
}
.hero-media .hero-scrim{
  background:linear-gradient(90deg,rgba(11,35,78,.82) 0%,rgba(11,35,78,.58) 42%,rgba(11,35,78,.20) 72%,rgba(11,35,78,.10) 100%);
}
.hero-media .hero-inner{justify-content:flex-start}
@media (max-width:820px){
  .hero-media{
    background-image:image-set(
      url(/assets/images/hero-media-640.webp) type("image/webp"),
      url(/assets/images/hero-media-640.jpg) type("image/jpeg"));
  }
  .hero-media .hero-scrim{
    background:linear-gradient(180deg,rgba(11,35,78,.62) 0%,rgba(11,35,78,.86) 60%,rgba(11,35,78,.92) 100%);
  }
}

/* Partner logos. Marks arrive at wildly different aspect ratios — a circular
   badge, two horizontal wordmarks — so they are capped by HEIGHT, not width,
   which is what makes a row of mixed logos look deliberate. */
.partner-logo{margin:2.5rem 0 .75rem}
/* Square/circular marks need more height than wordmarks to read at the same
   visual weight — a 64px circle looks half the size of a 64px wordmark. */
.partner-logo img{
  height:72px;width:auto;max-width:min(100%,280px);
  object-fit:contain;display:block;
}
.partner-logo.is-square img{height:88px}
.partner-logo a{display:inline-block;border-bottom:0}
@media (max-width:600px){
  .partner-logo img{height:52px}
}

/* Event cards. The next meeting gets the emphasis — it is the one thing most
   visitors to this page are looking for. */
.event-card{
  border:1px solid var(--rule);border-radius:6px;
  padding:1.5rem 1.6rem;margin:1.5rem 0;max-width:44rem;
}
.event-card.is-next{background:var(--paper-deep);border-left:4px solid var(--leaf)}
.event-when{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--leaf);font-weight:600;margin:0 0 .35rem;
}
.event-card h3{margin:0 0 1rem;font-size:1.2rem;color:var(--navy)}
.event-card p:last-child{margin-bottom:0}