:root {
    --ink: #211a16;
    --navy: #172b4d;
    --navy2: #0d1d36;
    --red: #9e2f2f;
    --cream: #f4efe3;
    --paper: #eee6d5;
    --gold: #c59a52;
    --muted: #655e55;
    --line: #c9bda9;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

a {
    color: #244f82;
}

.site-header {
    position: relative;
    z-index: 50;
    background: var(--navy2);
    color: white;
    border-bottom: 3px solid var(--gold);
}

.nav {
    width: min(1500px, 94%);
    min-height: 68px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    color: white;
    text-decoration: none;
    font-size: clamp(19px, 2vw, 27px);
    font-weight: 900;
    letter-spacing: .025em;
    white-space: nowrap;
}

.brand span {
    color: #e6c67e;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}

.nav-links a:hover {
    text-decoration: underline;
}

.hero {
    position: relative;
    width: 100%;
    background: var(--paper);
    overflow: hidden;
}

.hero img {
    display: block;
    width: 100%;
    height: auto;
}

.back-button {
    position: absolute;
    z-index: 20;
    left: 2.2%;
    top: 3.5%;
    display: inline-block;
    padding: .72em 1.05em;
    color: #2b211b;
    background: rgba(248,242,224,.94);
    border: 2px solid rgba(74,43,29,.78);
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(0,0,0,.30);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.2;
}

.back-button:hover {
    background: white;
}

main {
    background:
        linear-gradient(
            to bottom,
            rgba(238,230,213,.88) 0,
            rgba(244,239,227,.86) 150px,
            rgba(247,244,236,.84) 420px
        ),
        url("/shared/images/background-deflockbayarea.png")
        center top / cover fixed;
}

.content {
    width: min(1180px, 92%);
    margin: auto;
    padding: 46px 0 60px;
}

.intro {
    text-align: center;
    max-width: 960px;
    margin: 0 auto 42px;
}

.eyebrow {
    color: var(--red);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1, h2, h3 {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.12;
}

h1 {
    margin: 8px 0 18px;
    color: var(--navy);
    font-size: clamp(38px, 5vw, 68px);
}

h2 {
    color: var(--navy);
    font-size: clamp(27px, 3vw, 40px);
}

h3 {
    color: var(--navy);
    font-size: 23px;
}

.lead {
    margin: auto;
    max-width: 880px;
    font-size: clamp(18px, 2vw, 23px);
}

.statement {
    margin: 36px auto;
    padding: 27px 32px;
    max-width: 1000px;
    color: white;
    background: var(--navy);
    border-left: 8px solid var(--red);
    border-radius: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 700;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0,0,0,.16);
}

.statement strong {
    color: #f1d79c;
}

.two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 28px;
    margin: 40px 0;
}

.panel {
    padding: 28px 30px;
    background: rgba(255,255,255,.83);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 3px 13px rgba(0,0,0,.07);
}

.panel h2,
.panel h3 {
    margin-top: 0;
}

.action {
    border-top: 5px solid var(--red);
}

.map-box {
    margin: 42px auto;
    padding: 30px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
}

.map-preview {
    width: min(450px,100%);
    min-height: 280px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 35%, #dce8dc, transparent 28%),
        radial-gradient(circle at 70% 60%, #d9e5ef, transparent 32%),
        #ece9df;
    border: 1px solid #bbb3a5;
    border-radius: 8px;
    padding: 25px;
}

.map-preview a {
    font-size: 21px;
    font-weight: 800;
}

.video-section,
.facebook-section {
    margin: 46px 0;
    text-align: center;
}

.video-frame {
    width: min(100%, 1000px);
    margin: 22px auto;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.22);
}

.video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.fb-button,
.cta {
    display: inline-block;
    margin: 8px;
    padding: 13px 20px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 900;
}

.fb-button {
    color: white;
    background: #315b9c;
}

.cta {
    color: white;
    background: var(--red);
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 22px;
    margin: 35px 0 50px;
}

.city-card {
    display: block;
    overflow: hidden;
    color: var(--ink);
    background: white;
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0,0,0,.17);
}

.city-card img {
    display: block;
    width: 100%;
    height: auto;
}

.city-card strong {
    display: block;
    padding: 13px 15px 15px;
    text-align: center;
    font-size: 19px;
}

.site-footer {
    padding: 30px 5% 24px;
    color: #e9edf5;
    background: var(--navy2);
    border-top: 4px solid var(--gold);
    text-align: center;
}

.footer-facebook {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 700;
}

.facebook-logo {
    display: inline-flex;
    width: 38px;
    height: 38px;
    margin-right: 9px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: white;
    background: #315b9c;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 900;
    text-decoration: none;
}

.footer-meta {
    color: #aeb8ca;
    font-size: 13px;
}

@media (max-width: 800px) {
    .nav {
        padding: 12px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-links {
        justify-content: flex-start;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    .content {
        padding-top: 32px;
    }
}

@media (max-width: 600px) {
    .back-button {
        left: 2%;
        top: 2%;
        padding: .55em .72em;
        font-size: 11px;
    }
}


/* ============================================================
   BEGIN APPROVED COFFEE COMPONENT
   Canonical DeFlock support component
   ============================================================ */

   Source: approved DeFlock Livermore implementation
   ============================================================ */
/* ============================================================
   Livermore footer coffee support button
   ============================================================ */

.footer-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 auto 16px;
}

.footer-actions .footer-fb{
  margin:0;
}

.coffee-support{
  flex:0 0 auto;
  margin:0;
  padding:0;
}

.coffee-support-button{
  position:relative;

  display:block;

  width:94px;
  height:94px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 32% 25%,
      #5e87af 0%,
      #376b9d 28%,
      #235783 58%,
      #153d64 82%,
      #0e2d4d 100%
    );

  border:2px solid rgba(205,215,225,.72);

  box-shadow:
    inset 5px 6px 9px rgba(255,255,255,.24),
    inset -6px -8px 11px rgba(0,0,0,.28),
    0 3px 4px rgba(0,0,0,.24),
    0 8px 13px rgba(0,0,0,.22);

  text-decoration:none;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.coffee-support-button:hover{
  transform:translateY(-2px) scale(1.025);

  box-shadow:
    inset 5px 6px 9px rgba(255,255,255,.27),
    inset -6px -8px 11px rgba(0,0,0,.28),
    0 4px 6px rgba(0,0,0,.25),
    0 10px 16px rgba(0,0,0,.24);
}


/* Entire artwork rotates 22.5 degrees counter-clockwise. */

.coffee-button-art{
  position:absolute;
  inset:7px;

  display:block;

  transform:rotate(-22.5deg);
  transform-origin:center center;
}


/* ------------------------------------------------------------
   Silver coffee cup
   ------------------------------------------------------------ */

.coffee-cup{
  position:absolute;

  left:26px;
  top:25px;

  width:29px;
  height:18px;

  border:2px solid #d4d9df;

  border-radius:2px 2px 8px 8px;

  box-shadow:
    0 1px 1px rgba(0,0,0,.45);
}

.coffee-cup:after{
  content:"";

  position:absolute;

  left:2px;
  bottom:-6px;

  width:29px;
  height:2px;

  background:#d4d9df;

  border-radius:50%;
}

.coffee-handle{
  position:absolute;

  right:-10px;
  top:2px;

  width:10px;
  height:11px;

  border:2px solid #d4d9df;
  border-left:0;

  border-radius:0 8px 8px 0;
}


/* ------------------------------------------------------------
   Steam
   ------------------------------------------------------------ */

.coffee-steam{
  position:absolute;

  width:7px;
  height:13px;

  border-left:2px solid #d4d9df;

  border-radius:50%;

  opacity:.95;
}

.steam-one{
  left:31px;
  top:8px;
  transform:rotate(12deg);
}

.steam-two{
  left:40px;
  top:5px;
  height:15px;
  transform:rotate(-8deg);
}

.steam-three{
  left:49px;
  top:9px;
  height:12px;
  transform:rotate(14deg);
}


/* ------------------------------------------------------------
   Silver button lettering
   ------------------------------------------------------------ */

.coffee-support-text{
  position:absolute;

  left:5px;
  right:5px;
  top:53px;

  color:#d4d9df;

  text-align:center;

  font-size:11px;
  line-height:1.02;
  font-weight:800;
  letter-spacing:.015em;

  text-shadow:
    0 1px 1px rgba(0,0,0,.75),
    0 -1px 0 rgba(255,255,255,.18);
}


/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

.coffee-support-button:focus-visible{
  outline:3px solid #c7a65a;
  outline-offset:4px;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:650px){

  .footer-actions{
    gap:10px;
    padding:0 8px;
  }

  .coffee-support-button{
    width:84px;
    height:84px;
  }

  .coffee-button-art{
    transform:
      scale(.89)
      rotate(-22.5deg);

    transform-origin:center center;
  }

}




/* ============================================================
   Livermore coffee button v4.2
   Larger button; text left of cup; wider Facebook separation
   ============================================================ */

.footer-actions{
  gap:144px;
}


/* 94px x 1.25 = 117.5px */

.coffee-support-button{
  width:118px;
  height:118px;
}


/*
 * Larger artwork area.
 * Entire assembly remains rotated 22.5 degrees CCW.
 */

.coffee-button-art{
  inset:8px;
  transform:rotate(-22.5deg);
}


/* Text now sits LEFT of the coffee cup. */

.coffee-support-text{
  left:3px;
  right:auto;
  top:44px;

  width:47px;

  font-size:12px;
  line-height:1.05;

  text-align:center;
}


/* Move cup to right half of button. */

.coffee-cup{
  left:61px;
  top:43px;

  width:31px;
  height:20px;
}

.coffee-cup:after{
  width:31px;
}


/* Move steam above relocated cup. */

.steam-one{
  left:66px;
  top:24px;
}

.steam-two{
  left:75px;
  top:20px;
}

.steam-three{
  left:84px;
  top:25px;
}


/*
 * Mobile:
 * don't attempt to preserve a literal 1.5-inch gap on a
 * narrow screen. Keep both controls comfortably side-by-side.
 */

@media(max-width:650px){

  .footer-actions{
    gap:24px;
  }

  .coffee-support-button{
    width:106px;
    height:106px;
  }

  .coffee-button-art{
    inset:6px;
    transform:scale(.92) rotate(-22.5deg);
  }

}



/* ============================================================
   Livermore coffee button v4.3
   Larger, thinner, rounded, vertically-centered lettering
   ============================================================ */

.coffee-support-text{
  left:1px;
  right:auto;

  /*
   * Vertically center the two-line label on the left side
   * of the rotated artwork.
   */
  top:50%;
  transform:translateY(-50%);

  width:55px;

  color:#d4d9df;

  font-family:
    "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size:15px;
  line-height:1.02;
  font-weight:600;
  letter-spacing:0;

  text-align:center;

  text-shadow:
    0 1px 1px rgba(0,0,0,.65),
    0 -1px 0 rgba(255,255,255,.16);
}


/*
 * Preserve the same visual relationship on mobile.
 */

@media(max-width:650px){

  .coffee-support-text{
    font-size:15px;
    width:55px;
  }

}



/* ============================================================
   Livermore coffee button v4.4
   Taller, thinner lettering
   ============================================================ */

.coffee-support-text{
  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:16px;
  font-weight:400;

  /*
   * Slight vertical stretch gives the lettering a taller,
   * narrower appearance while preserving its centered position.
   */
  transform:
    translateY(-50%)
    scaleY(1.12);

  line-height:.95;
  letter-spacing:-.25px;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:16px;

    transform:
      translateY(-50%)
      scaleY(1.12);
  }

}



/* ============================================================
   Livermore coffee button v4.5
   Taller letters without increasing width
   ============================================================ */

.coffee-support-text{
  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;

  /*
   * Keep nominal width at the previous 15px size.
   * Stretch vertically ONLY.
   */
  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  line-height:.92;

  transform:
    translateY(-50%)
    scaleY(1.30);

  transform-origin:center center;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:15px;

    transform:
      translateY(-50%)
      scaleY(1.30);
  }

}



/* ============================================================
   Livermore coffee button v4.6
   Exaggerated tall / narrow lettering
   ============================================================ */

.coffee-support-text{
  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;

  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  line-height:.82;

  transform:
    translateY(-50%)
    scaleY(1.55);

  transform-origin:center center;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:15px;
    line-height:.82;

    transform:
      translateY(-50%)
      scaleY(1.55);
  }

}



/* ============================================================
   Livermore coffee button v4.8
   Center three-line lettering
   ============================================================ */

.coffee-support-text{
  text-align:center;
}



/* ============================================================
   Livermore coffee button v4.9-fixed
   Three-line label with true horizontal centering
   ============================================================ */

.coffee-support-text{
  left:1px;
  right:auto;
  top:50%;

  width:55px;

  display:block;

  color:#d4d9df;

  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;

  font-size:14px;
  font-weight:300;
  letter-spacing:-.25px;
  line-height:.70;

  text-align:center;

  transform:
    translateY(-50%)
    scaleX(.82)
    scaleY(1.90);

  transform-origin:center center;

  text-shadow:
    0 1px 1px rgba(0,0,0,.65),
    0 -1px 0 rgba(255,255,255,.16);
}

.coffee-support-text > span{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
  white-space:nowrap;
}


@media(max-width:650px){

  .coffee-support-text{
    font-size:14px;
    line-height:.70;

    transform:
      translateY(-50%)
      scaleX(.82)
      scaleY(1.90);
  }

}



/* ============================================================
   Livermore coffee button v5.1
   Looser, swirly steam wisps
   ============================================================ */

.coffee-steam{
  width:9px;
  height:19px;

  border:0;
  border-left:2px solid rgba(255,255,255,.92);
  border-top:1.5px solid rgba(255,255,255,.72);

  border-radius:
    70% 35% 65% 40% /
    45% 70% 35% 65%;

  transform-origin:center bottom;
}


/* Left wisp — curls gently left */

.steam-one{
  left:65px;
  top:19px;

  height:18px;

  transform:
    rotate(-19deg)
    skewY(-12deg);
}


/* Center wisp — taller S-like curl */

.steam-two{
  left:74px;
  top:14px;

  width:10px;
  height:23px;

  border-radius:
    35% 75% 30% 70% /
    70% 35% 75% 30%;

  transform:
    rotate(8deg)
    skewY(15deg);
}


/* Right wisp — curls back the other direction */

.steam-three{
  left:84px;
  top:20px;

  width:8px;
  height:17px;

  border-radius:
    75% 30% 70% 35% /
    35% 70% 40% 75%;

  transform:
    rotate(23deg)
    skewY(-15deg);
}


/*
 * Add a small secondary curl to the center wisp.
 * This gives the steam more of a hand-sketched swirl.
 */

.steam-two::after{
  content:"";

  position:absolute;

  left:-5px;
  top:3px;

  width:8px;
  height:10px;

  border-top:1.5px solid rgba(255,255,255,.70);
  border-right:1.5px solid rgba(255,255,255,.70);

  border-radius:60%;

  transform:rotate(-30deg);
}



/* ============================================================
   Livermore coffee button v5.2
   More line spacing + vertical back-and-forth steam
   ============================================================ */


/* ------------------------------------------------------------
   More breathing room between:
       Buy us
         a
       coffee
   ------------------------------------------------------------ */

.coffee-support-text{
  line-height:1.02;

  transform:
    translateY(-50%)
    scaleX(.90)
    scaleY(1.90);
}

@media(max-width:650px){

  .coffee-support-text{
    line-height:1.02;

    transform:
      translateY(-50%)
      scaleX(.90)
      scaleY(1.90);
  }

}


/* ------------------------------------------------------------
   Steam

   Mostly vertical, with a small alternating left/right curve.
   ------------------------------------------------------------ */

.coffee-steam{
  width:8px;
  height:22px;

  border:0;
  border-left:2px solid rgba(255,255,255,.92);
  border-radius:50%;

  transform-origin:center bottom;
}


/*
 * Each steam line gets a second curved segment.
 * Together the two segments make a shallow vertical S.
 */

.coffee-steam::after{
  content:"";

  position:absolute;

  width:7px;
  height:12px;

  left:-7px;
  top:-7px;

  border:0;
  border-right:2px solid rgba(255,255,255,.82);
  border-radius:50%;
}


/* Left steam */

.steam-one{
  left:66px;
  top:16px;

  height:20px;

  transform:rotate(3deg);
}

.steam-one::after{
  transform:rotate(-5deg);
}


/* Center steam — slightly taller */

.steam-two{
  left:76px;
  top:10px;

  width:9px;
  height:26px;

  transform:rotate(-2deg);
}

.steam-two::after{
  width:8px;
  height:14px;

  left:-8px;
  top:-8px;

  transform:rotate(4deg);
}


/* Right steam */

.steam-three{
  left:87px;
  top:16px;

  height:20px;

  transform:rotate(3deg);
}

.steam-three::after{
  transform:rotate(-5deg);
}



/* ============================================================
   Livermore coffee button v5.3
   Shift complete text block slightly right
   ============================================================ */

.coffee-support-text{
  left:5px;
}



/* ============================================================
   Livermore coffee button v5.5
   Subtle periodic shimmer
   ============================================================ */

.coffee-support-button{
  overflow:hidden;
}

/*
 * Soft diagonal reflection.
 * Long animation duration keeps this from looking flashy.
 */
.coffee-support-button::after{
  content:"";

  position:absolute;
  z-index:20;

  top:-35%;
  left:-65%;

  width:28%;
  height:170%;

  pointer-events:none;

  background:linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.04) 75%,
    rgba(255,255,255,0) 100%
  );

  transform:
    rotate(10deg)
    translateX(0);

  animation:
    coffee-button-shimmer 6.5s ease-in-out infinite;
}


/*
 * Most of each animation cycle is deliberately idle.
 * The shimmer makes one quick, gentle pass.
 */

@keyframes coffee-button-shimmer{

  0%,
  68%{
    left:-65%;
    opacity:0;
  }

  72%{
    opacity:.45;
  }

  82%{
    opacity:.75;
  }

  91%{
    left:135%;
    opacity:.35;
  }

  100%{
    left:135%;
    opacity:0;
  }
}


/*
 * Respect reduced-motion preferences.
 */

@media(prefers-reduced-motion:reduce){

  .coffee-support-button::after{
    animation:none;
    display:none;
  }

}



/* ============================================================
   Support page — 2X finished coffee button
   ============================================================ */

.support-page-coffee{
  position:relative;

  /*
   * Finished button is approximately 100px.
   * Give the 2X rendering its own 220px square.
   */
  width:220px;
  height:220px;

  margin:32px auto 38px;
}

.support-page-coffee .coffee-support-button{
  position:absolute;

  left:50%;
  top:50%;

  /*
   * Scale the COMPLETE finished component.
   * This preserves every internal proportion exactly.
   */
  transform:
    translate(-50%,-50%)
    scale(2);

  transform-origin:center center;
}

.support-page-coffee .coffee-support-button:hover{
  transform:
    translate(-50%,-50%)
    scale(2.04);
}


/* ============================================================
   Coffee-button shimmer
   ============================================================ */

.coffee-support-button{
  overflow:hidden;
  isolation:isolate;
}


/*
 * The shimmer sits over the complete face of the button.
 */

.coffee-support-button::after{
  content:"";

  position:absolute;

  z-index:999;

  top:-35%;
  left:-55%;

  width:20px;
  height:175%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 20%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.12) 80%,
    rgba(255,255,255,0) 100%
  );

  filter:blur(1px);

  transform:
    rotate(18deg)
    translateX(0);

  animation:
    deflock-coffee-shimmer 6s ease-in-out infinite;
}


/*
 * Pass immediately at the beginning of the cycle,
 * then remain quiet until the next cycle.
 */

@keyframes deflock-coffee-shimmer{

  0%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(0);
  }

  3%{
    opacity:.8;
  }

  15%{
    opacity:.9;
  }

  25%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

  100%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

}


@media(prefers-reduced-motion:reduce){

  .coffee-support-button::after{
    animation:none;
  }

}



/* ============================================================
   Coffee button — slower shimmer interval
   ============================================================ */

.coffee-support-button::after{
  animation-duration:12s;
}



/* ============================================================
   Livermore coffee button v5.8
   Original shimmer speed, twice the frequency
   ============================================================ */

.coffee-support-button::after{
  animation:
    deflock-coffee-shimmer-v58 3s ease-in-out infinite;
}


/*
 * Original:
 *   6-second cycle
 *   sweep completed at 25% = 1.5 seconds
 *
 * New:
 *   3-second cycle
 *   sweep completed at 50% = 1.5 seconds
 *
 * Therefore the visible sweep moves at the same speed,
 * but begins twice as often.
 */

@keyframes deflock-coffee-shimmer-v58{

  0%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(0);
  }

  6%{
    opacity:.8;
  }

  30%{
    opacity:.9;
  }

  50%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

  100%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

}



/* ============================================================
   Livermore coffee button v5.9
   2-second shimmer cycle + text 4px toward cup
   ============================================================ */


/* Move Buy us / a / coffee together 4px toward the cup. */

.coffee-support-text{
  left:18px !important;
}


/*
 * 2-second cycle.
 *
 * Preserve approximately the same 1.5-second sweep:
 * 75% of 2 seconds = 1.5 seconds.
 */

.coffee-support-button::after{
  animation:
    deflock-coffee-shimmer-v59 2s ease-in-out infinite;
}


@keyframes deflock-coffee-shimmer-v59{

  0%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(0);
  }

  4%{
    opacity:.8;
  }

  45%{
    opacity:.9;
  }

  75%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

  100%{
    opacity:0;

    transform:
      rotate(18deg)
      translateX(190px);
  }

}



/* ============================================================
   Livermore coffee button v6.0
   Restore previous text position
   ============================================================ */

.coffee-support-text{
  left:14px !important;
}

/* ============================================================

/* ============================================================
   END APPROVED COFFEE COMPONENT
   ============================================================ */



/* ============================================================
   BEGIN TEMPORARY COUNTY OUTLINE PANEL

   Temporary first-pass treatment while jurisdiction artwork
   is being developed. Replace with county artwork later.
   ============================================================ */

.county-outline-placeholder{
  width:min(850px,92%);
  margin:10px auto 24px;
}

.county-outline-placeholder-inner{
  min-height:113px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:14px 40px;

  background:
    linear-gradient(
      145deg,
      rgba(23,43,77,.04),
      rgba(158,47,47,.07)
    );

  border:2px solid rgba(23,43,77,.25);
  border-radius:14px;

  box-shadow:
    inset 0 0 45px rgba(23,43,77,.06),
    0 6px 20px rgba(0,0,0,.08);

  text-align:center;
}

.county-outline-name{
  color:#172b4d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(2rem,6vw,4.2rem);
  font-weight:700;
}

.county-outline-note{
  margin-top:18px;

  color:#9e2f2f;

  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.county-outline-subnote{
  margin-top:8px;
  opacity:.65;
}

.county-city-list{
  max-width:850px;
  margin:25px auto;

  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:10px 25px;

  padding:0;

  list-style:none;
}

.county-city-list li{
  padding:11px 14px;

  background:rgba(255,255,255,.65);
  border:1px solid rgba(23,43,77,.12);
  border-radius:6px;
}

.county-city-list span{
  display:block;
  margin-top:2px;

  font-size:.78rem;
  opacity:.62;
}


/* ============================================================
   END TEMPORARY COUNTY OUTLINE PANEL
   ============================================================ */


/* ============================================================
   BEGIN COUNTY BACK ROW
   Back-to-Bay-Area control for county pages without hero art
   ============================================================ */

.county-back-row {
    position: relative;
    width: min(1180px, 92%);
    height: 58px;
    margin: 0 auto;
}

.county-back-row .back-button {
    top: 12px;
    left: 0;
}

/* ============================================================
   END COUNTY BACK ROW
   ============================================================ */

/* ============================================================
   COUNTY BACK ROW VISIBILITY FIX
   Keep button below banner and in normal document flow.
   Alameda hero button remains unchanged.
   ============================================================ */

.county-back-row {
    position: relative;
    width: min(1180px, 92%);
    height: auto;
    margin: 0 auto;
    padding: 18px 0 8px;
}

.county-back-row .back-button {
    position: relative;
    display: inline-block;
    left: auto;
    top: auto;
}

@media (max-width: 600px) {
    .county-back-row .back-button {
        left: auto;
        top: auto;
    }
}

/* Lower county Back to Bay Area button approximately 1/4 inch */
.county-back-row {
    padding-top: 42px;
}

/* Lower county Back to Bay Area button approximately 1/4 inch */
.county-back-row {
    padding-top: 42px;
}

/* BEGIN BASTARD PROJECT FOOTER */
.bastard-project {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .82rem;
    line-height: 1.4;
}

.bastard-project a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    opacity: .88;
}

.bastard-project a:hover,
.bastard-project a:focus {
    opacity: 1;
    text-decoration: underline;
}

.bastard-project strong {
    display: block;
    font-size: .94rem;
}

.bastard-project span {
    display: block;
}
/* END BASTARD PROJECT FOOTER */

/* BEGIN BASTARD COMPACT FOOTER */
.bastard-project {
    margin-top: 4px !important;
    padding-top: 0 !important;
}

.bastard-project a {
    display: inline !important;
}

.bastard-project strong,
.bastard-project span,
.bastard-project em {
    display: inline !important;
}

.bastard-project + .site-revision {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}
/* END BASTARD COMPACT FOOTER */

/* BEGIN FINAL CANONICAL FOOTER */
.footer-line {
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.45;
}
.accuracy-disclaimer.footer-line {
    display:block !important;
    margin:0 !important;
    max-width:none !important;
}
.peaceful-lawful.footer-line {
    margin:0 !important;
}
.bastard-project.footer-line {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}
.bastard-project.footer-line a,
.bastard-project.footer-line strong,
.bastard-project.footer-line em,
.bastard-project.footer-line span {
    display:inline !important;
}
.site-revision.footer-line {
    margin:0 !important;
    padding:0 !important;
}
/* END FINAL CANONICAL FOOTER */

/* BEGIN COUNTY COMMUNITY GRID */
.county-communities {
    padding: 28px 0;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.community-card {
    display: block;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

.community-card img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    border-radius: 7px;
}

.community-card h3 {
    margin: 0 0 6px;
}

.community-card p {
    margin: 8px 0 0;
}

.community-card.coming-soon {
    opacity: .88;
}

.community-card.community-live {
    cursor: pointer;
}

.community-card.community-live:hover {
    transform: translateY(-2px);
}
/* END COUNTY COMMUNITY GRID */

/* BEGIN DEFLOCK COMPACT FOOTER V2 */
.site-footer .footer-line,
footer .footer-line {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
}

.site-footer .footer-name,
footer .footer-name {
    margin-top: 0 !important;
}

.site-footer .footer-description,
.site-footer .footer-affiliation,
.site-footer .map-disclaimer,
.site-footer .accuracy-disclaimer,
.site-footer .peaceful-lawful,
.site-footer .bastard-project,
.site-footer .site-revision,
footer .footer-description,
footer .footer-affiliation,
footer .map-disclaimer,
footer .accuracy-disclaimer,
footer .peaceful-lawful,
footer .bastard-project,
footer .site-revision {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-footer .bastard-project a,
footer .bastard-project a {
    display: inline !important;
}

.site-footer .bastard-project strong,
.site-footer .bastard-project em,
footer .bastard-project strong,
footer .bastard-project em {
    display: inline !important;
}
/* END DEFLOCK COMPACT FOOTER V2 */

/* BEGIN ALAMEDA COMMUNITY DIRECTORY V3 */

.county-communities .community-established {
    margin-top: 28px;
}

.county-communities .community-established > h3,
.county-communities .community-coming > h3 {
    margin-bottom: 14px;
}

.established-community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 14px 0 32px;
}

.established-community-card {
    display: block;
    padding: 22px;
    border: 2px solid currentColor;
    border-radius: 10px;
    text-decoration: none;
}

.established-community-name {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.community-stat {
    margin: 4px 0;
}

.community-visit {
    margin-top: 14px;
    font-weight: 800;
}

.community-coming {
    margin-top: 32px;
}

.community-coming-intro {
    max-width: 900px;
    margin-bottom: 18px;
}

.coming-community-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.coming-community-card {
    padding: 16px;
    border: 1px solid rgba(127,127,127,.45);
    border-radius: 8px;
}

.coming-community-card strong,
.coming-community-card span {
    display: block;
}

.coming-community-card strong {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.coming-community-card span {
    margin-top: 3px;
}

.community-pop-source {
    margin-top: 18px;
    font-size: .9rem;
}

@media (max-width: 850px) {
    .coming-community-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .established-community-grid,
    .coming-community-grid {
        grid-template-columns: 1fr;
    }
}

/* END ALAMEDA COMMUNITY DIRECTORY V3 */

/* ============================================================
   BEGIN MATURE CITY COMPONENTS V1
   Canonical components adapted from DeFlock Livermore
   ============================================================ */

.glance-wrap{
    overflow-x:auto;
}

.glance{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    box-shadow:0 6px 18px #0000000b;
}

.glance th,
.glance td{
    padding:15px 14px;
    border:1px solid #cfd6cf;
    vertical-align:top;
    text-align:left;
}

.glance th{
    background:#162018;
    color:#fff;
}

.glance td:first-child{
    min-width:170px;
}

.glance tbody td{
    background:#fff;
}

.glance .retention-row td{
    background:#fff;
}

.tco-note{
    margin-top:28px;
}

.local-map-section{
    display:grid;
    grid-template-columns:minmax(0,1fr) 440px;
    gap:32px;
    align-items:start;
}

.local-map-copy{
    min-width:0;
}

.local-map-frame{
    width:100%;
    max-width:440px;
}

.local-map-frame iframe{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    border:1px solid #cfd6cf;
    border-radius:10px;
    background:#fff;
}

.map-fallback{
    font-size:.9rem;
    margin:.55rem 0 0;
}

.moses-feature .video-link{
    display:block;
    position:relative;
    max-width:900px;
    margin:20px auto 0;
}

.moses-feature .video-thumb{
    display:block;
    width:100%;
    height:auto;
    border-radius:10px;
}

.moses-feature .play-badge{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    width:82px;
    height:58px;
    border-radius:14px;
    background:rgba(200,0,0,.92);
    color:#fff;
    font-size:32px;
    line-height:1;
    padding-left:5px;
    box-shadow:0 3px 12px rgba(0,0,0,.35);
}

.fact-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.fact-card{
    background:#fff;
    border:1px solid #d5d9d3;
    border-radius:10px;
    padding:20px;
}

.fact-card h3{
    margin-top:0;
}

.home-action-cta{
    text-align:center;
}

.campaign-band{
    text-align:center;
    background:#ecebe4;
}

@media(max-width:780px){
    .local-map-section,
    .fact-grid{
        grid-template-columns:1fr;
    }

    .local-map-frame{
        max-width:440px;
        justify-self:center;
    }
}

/* END MATURE CITY COMPONENTS V1 */



/* BEGIN SF V2.5 + COUNTY CITY JUMP */

/* Compact mature-city map */
.sf-compact-map{
    grid-template-columns:minmax(0,1fr) 440px;
    gap:28px;
    align-items:center;
}

.sf-compact-map .local-map-frame{
    width:100%;
    max-width:440px;
    justify-self:end;
}

.sf-compact-map .local-map-frame iframe{
    width:100%;
    aspect-ratio:1/1;
}


/* Compact Livermore-style SF decision makers */
.sf-official-grid{
    margin:18px 0 24px;
    border-top:1px solid #d5d9d3;
}

.sf-official-grid .official{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,auto);
    gap:16px;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #d5d9d3;
}

.sf-official-grid .official-contact{
    text-align:right;
}

.sf-name-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px 18px;
    margin:14px 0 24px;
}

.sf-name-grid span{
    padding:9px 11px;
    background:#f4f5f1;
    border:1px solid #d8ddd5;
    border-radius:6px;
}


/* County quick city navigation */
.county-city-jump{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    max-width:1040px;
    margin:14px auto;
    padding:10px 22px;
}

.county-city-jump label{
    font-weight:800;
}

.county-city-jump select{
    min-width:260px;
    max-width:420px;
    padding:9px 34px 9px 12px;
    border:1px solid #aeb7b0;
    border-radius:6px;
    background:#fff;
    color:#172027;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

@media(max-width:780px){

    .sf-compact-map{
        grid-template-columns:1fr;
    }

    .sf-compact-map .local-map-frame{
        max-width:440px;
        justify-self:center;
    }

    .sf-official-grid .official{
        grid-template-columns:1fr;
    }

    .sf-official-grid .official-contact{
        text-align:left;
    }

    .sf-name-grid{
        grid-template-columns:1fr 1fr;
    }

    .county-city-jump{
        flex-direction:column;
        align-items:stretch;
    }

    .county-city-jump select{
        width:100%;
        max-width:none;
    }
}

/* END SF V2.5 + COUNTY CITY JUMP */


/* BEGIN SF JURISDICTION MAP SIZE */

.sf-jurisdiction-map {
    text-align: center;
}

.sf-jurisdiction-map img {
    display: block !important;
    width: 400px !important;
    max-width: 45% !important;
    height: auto !important;
    margin: 0 auto !important;
}

@media(max-width:780px) {
    .sf-jurisdiction-map img {
        width: 320px !important;
        max-width: 80% !important;
    }
}

/* END SF JURISDICTION MAP SIZE */


/* BEGIN SF FEATURED ALPR TRIVIA */

.sf-alpr-trivia-feature {
    margin: 20px 0 22px;
    font-size: 1.12rem;
    line-height: 1.55;
    font-weight: 800;
    font-style: italic;
}

.sf-alpr-trivia-source {
    margin-top: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    font-style: normal;
}

/* END SF FEATURED ALPR TRIVIA */

/* BEGIN JURISDICTION JUMPERS */
.jurisdiction-jumpers {
    display: flex;
    gap: 22px;
    align-items: flex-end;
    justify-content: center;
    width: calc(100% - 44px);
    max-width: 1040px;
    margin: 22px auto;
    box-sizing: border-box;
}

.jurisdiction-jumper {
    flex: 1 1 0;
    min-width: 0;
}

.jurisdiction-jumper label {
    display: block;
    margin: 0 0 7px;
    font-weight: 800;
    font-size: .95rem;
}

.jurisdiction-jumper .county-city-select {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

@media (max-width: 780px) {
    .jurisdiction-jumpers {
        display: block;
        width: calc(100% - 36px);
        max-width: none;
        margin: 18px auto;
    }

    .jurisdiction-jumper + .jurisdiction-jumper {
        margin-top: 14px;
    }
}
/* END JURISDICTION JUMPERS */

/* BEGIN JURISDICTION JUMPERS RIGHT-ALIGNED OVERRIDE */
.jurisdiction-jumpers {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 18px !important;

    width: calc(100% - 44px) !important;
    max-width: 1180px !important;
    margin: 18px auto !important;
}

.jurisdiction-jumper {
    flex: 0 0 auto !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 !important;
}

.jurisdiction-jumper label {
    display: block !important;
    margin: 0 0 6px !important;
    text-align: left !important;
}

.jurisdiction-jumper .county-city-select {
    display: block !important;
    width: 300px !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
}

/* San Francisco has only one selector; keep it right-aligned too. */
@media (max-width: 780px) {
    .jurisdiction-jumpers {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: calc(100% - 36px) !important;
        max-width: none !important;
        margin: 16px auto !important;
        gap: 12px !important;
    }

    .jurisdiction-jumper {
        width: 100% !important;
        max-width: none !important;
    }

    .jurisdiction-jumper .county-city-select {
        width: 100% !important;
        max-width: none !important;
    }
}
/* END JURISDICTION JUMPERS RIGHT-ALIGNED OVERRIDE */

/* BEGIN COUNTY NAVIGATION ROW */
.county-navigation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 92%;
    max-width: none;
    margin: 18px auto;
    box-sizing: border-box;
}

/* Override the old absolute positioning used over hero artwork. */
.county-navigation-row .back-button {
    position: static !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    transform: translateY(8px);
}

/* Compact selector pair at the far right. */
.county-navigation-row .jurisdiction-jumpers {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 18px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 780px) {
    .county-navigation-row {
        flex-direction: column;
        align-items: stretch;
        width: calc(100% - 36px);
        margin: 16px auto;
        gap: 14px;
    }

    .county-navigation-row .back-button {
        align-self: flex-start;
    }

    .county-navigation-row .jurisdiction-jumpers {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
    }
}
/* END COUNTY NAVIGATION ROW */

/* BEGIN ALAMEDA COUNTY MAP SIZE */
/*
 * county-hero is currently unique to the Alameda County homepage.
 * Show the complete artwork at one-third of its former full width.
 */
.county-hero {
    width: 33.333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.county-hero img {
    width: 100% !important;
    height: auto !important;
}
/* END ALAMEDA COUNTY MAP SIZE */
/* BEGIN PUBLIC OFFICIAL TABLE */
.official-grid {
  display:table;
  width:100%;
  margin:24px 0;
  border-collapse:collapse;
  background:#fff;
  border:1px solid rgba(23,43,77,.20);
}

.official-card {
  display:table-row;
}

.official-card-head,
.official-detail {
  display:table-cell;
  vertical-align:middle;
  padding:12px 14px;
  border-bottom:1px solid rgba(23,43,77,.15);
}

.official-card-head {
  min-width:300px;
}

.official-card-head > div {
  display:inline-block;
  vertical-align:middle;
}

.official-portrait {
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:6px;
  vertical-align:middle;
  margin-right:14px;
}

.official-card h3 {
  margin:0 0 3px;
  font-size:1.08rem;
  line-height:1.2;
}

.official-title {
  margin:0;
  font-weight:700;
  color:#4d5964;
}

.official-detail {
  margin:0;
  white-space:nowrap;
}

.official-detail strong {
  color:#172b4d;
}

.official-card a {
  overflow-wrap:anywhere;
}

.official-source {
  margin-top:18px;
  font-size:.92rem;
}
/* END PUBLIC OFFICIAL TABLE */

/* BEGIN PUBLIC OFFICIAL TABLE HEADER */
.official-table-header {
  display:table-row;
  background:#172b4d;
  color:#fff;
  font-weight:700;
}
.official-table-header > div {
  display:table-cell;
  padding:9px 14px;
  vertical-align:middle;
}
/* END PUBLIC OFFICIAL TABLE HEADER */

/* BEGIN PUBLIC OFFICIAL TABLE */
.official-table{width:100%;border-collapse:collapse;margin:20px 0}
.official-table th{text-align:left;padding:10px 12px;border-bottom:2px solid rgba(23,43,77,.28)}
.official-table td{padding:12px;vertical-align:middle;border-bottom:1px solid rgba(23,43,77,.16)}
.official-person{display:flex;align-items:center;gap:14px;min-width:260px}
.official-person img{display:block;width:90px!important;height:110px!important;flex:0 0 90px;object-fit:cover;object-position:center top;border-radius:7px}
.official-person a{font-weight:800}
@media(max-width:780px){
.official-table{font-size:.92rem}
.official-table th,.official-table td{padding:8px}
.official-person{min-width:190px;gap:10px}
.official-person img{width:65px!important;height:80px!important;flex:0 0 65px}
}
/* END PUBLIC OFFICIAL TABLE */

/* BEGIN COMPACT OFFICIAL PORTRAITS */
.official-person{min-width:190px!important;gap:10px!important}
.official-person img{
  width:45px!important;
  height:55px!important;
  flex:0 0 45px!important;
}
@media(max-width:780px){
  .official-person{min-width:150px!important;gap:8px!important}
  .official-person img{
    width:40px!important;
    height:49px!important;
    flex:0 0 40px!important;
  }
}
/* END COMPACT OFFICIAL PORTRAITS */

/* BEGIN FLOCK VOTE ACCOUNTABILITY */
.flock-vote{font-weight:850;white-space:nowrap}
.flock-vote-yes a{font-weight:950}
.flock-vote-no{opacity:.72}

.flock-yes-term{
font-weight:900;
}
/* END FLOCK VOTE ACCOUNTABILITY */

/* BEGIN FLOCK VOTE ALIGNMENT */
.official-table td.flock-vote{
  text-align:right;
}
/* END FLOCK VOTE ALIGNMENT */

/* BEGIN ACTION EMPHASIS BOXES */
.action-intro,
.action-warning{
  background:#173b67;
  color:#fff;
  border-radius:10px;
  padding:18px 22px;
  margin:18px 0 24px;
}

.action-intro h2{
  color:#fff;
  margin:0 0 8px;
}

.action-intro p,
.action-warning{
  font-size:1.18rem;
  line-height:1.45;
}

.action-intro p{
  margin:0;
}

.action-warning{
  font-weight:800;
}

.action-warning strong{
  font-weight:800;
}

@media(max-width:780px){
  .action-intro,
  .action-warning{
    padding:15px 17px;
  }

  .action-intro p,
  .action-warning{
    font-size:1.08rem;
  }
}
/* END ACTION EMPHASIS BOXES */

/* BEGIN SHERIFF HEADING */
.sheriff-heading{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.sheriff-heading img{
  display:block !important;
  width:45px !important;
  height:55px !important;
  min-width:45px !important;
  flex:0 0 45px !important;
  object-fit:cover !important;
  object-position:center top !important;
  border-radius:7px !important;
}

.sheriff-heading span{
  display:block;
}
/* END SHERIFF HEADING */

/* BEGIN SHERIFF PORTRAIT */
.sheriff-heading img{
  width:90px!important;
  height:110px!important;
  flex:0 0 90px!important;
}
@media(max-width:780px){
  .sheriff-heading img{
    width:80px!important;
    height:98px!important;
    flex:0 0 80px!important;
  }
}
/* END SHERIFF PORTRAIT */

/* BEGIN STATEMENT HEADING CONTRAST */
.statement h2,
.statement h3 {
  color:#fff !important;
}
/* END STATEMENT HEADING CONTRAST */

/* BEGIN RESPONSIVE OFFICIAL MATRIX
 *
 * Desktop preserves the conventional accountability table.
 * Narrow screens convert each official row into a readable card.
 */
@media(max-width:780px){

  .official-table{
    display:block;
    width:100%;
    margin:18px 0;
    font-size:1rem;
  }

  .official-table thead{
    display:none;
  }

  .official-table tbody{
    display:block;
    width:100%;
  }

  .official-table tr{
    display:block;
    width:100%;
    margin:0 0 18px;
    padding:14px 16px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid rgba(23,43,77,.20);
    border-radius:10px;
  }

  .official-table td{
    display:grid;
    grid-template-columns:105px minmax(0,1fr);
    align-items:center;
    width:100%;
    box-sizing:border-box;
    padding:8px 0;
    border:0;
    border-bottom:1px solid rgba(23,43,77,.10);
    text-align:left !important;
    min-width:0 !important;
  }

  .official-table td:last-child{
    border-bottom:0;
  }

  .official-table td::before{
    content:attr(data-label);
    padding-right:12px;
    font-size:.82rem;
    line-height:1.2;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.025em;
    color:#4d5964;
  }

  .official-table td.official-person{
    display:flex !important;
    align-items:center;
    gap:12px !important;
    min-width:0 !important;
    padding:0 0 12px;
    margin-bottom:3px;
  }

  .official-table td.official-person::before{
    display:none;
  }

  .official-table td.official-person img{
    width:45px !important;
    height:55px !important;
    min-width:45px !important;
    flex:0 0 45px !important;
  }

  .official-table td.official-person a{
    font-size:1.12rem;
    line-height:1.2;
  }

  .official-table td.flock-vote{
    text-align:left !important;
  }

  .official-table td.flock-vote-yes a{
    font-size:1.05rem;
  }

  .official-table td a{
    overflow-wrap:anywhere;
  }
}

/* END RESPONSIVE OFFICIAL MATRIX */

/* BEGIN MATRIX DATA RAIN */
.matrix-heading{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 14px;
}

.matrix-heading h2{
  margin:0;
}

.matrix-rain{
  display:block;
  width:104px;
  height:63px;
  flex:0 0 104px;
  border-radius:7px;
  background:transparent;
  border:0;
}

@media(max-width:780px){
  .matrix-heading{
    gap:12px;
  }

  .matrix-rain{
    width:81px;
    height:49px;
    flex-basis:81px;
  }
}
/* END MATRIX DATA RAIN */

/* BEGIN MATRIX BACKGROUND RAIN */
.official-matrix-rain{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.matrix-background-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:1;
}

.official-matrix-rain .official-table{
  position:relative;
  z-index:1;
  background:transparent !important;
}

.official-matrix-rain .official-table thead,
.official-matrix-rain .official-table tbody,
.official-matrix-rain .official-table tr,
.official-matrix-rain .official-table th,
.official-matrix-rain .official-table td{
  background:transparent !important;
}

/*
 * On phones each supervisor becomes a card.
 * Keep a little white behind the text while allowing
 * the Matrix rain to remain visible through the card.
 */
@media(max-width:780px){
  .official-matrix-rain .official-table tr{
    background:rgba(255,255,255,.62) !important;
  }

  .official-matrix-rain .official-table td{
    background:transparent !important;
  }
}
/* END MATRIX BACKGROUND RAIN */



/* BEGIN SHERIFF MATRIX RAIN */
.sheriff-matrix-rain{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.sheriff-background-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.sheriff-matrix-content{
  position:relative;
  z-index:1;
  background:transparent;
}
/* END SHERIFF MATRIX RAIN */


/* BEGIN SF TAKE ACTION HEAT */

.sf-action-title{
  white-space:nowrap;
}

.sf-heat-wrap{
  text-align:center;
  margin:24px 0 14px;
}

.sf-heat{
  position:relative;
  display:inline-block;
  margin:0;
  text-align:center;
}

.sf-ember{
  display:inline-block;
  margin:0 .35em;
  font-size:.85em;
  opacity:.55;
  transform-origin:50% 100%;
  animation:sf-sizzle 1.35s ease-in-out infinite alternate;
}

.sf-ember-right{
  animation-delay:.42s;
}

.sf-nightmares{
  text-align:center;
  font-size:1.12em;
}

@keyframes sf-sizzle{
  0%{
    opacity:.25;
    transform:translateY(2px) scale(.88) rotate(-7deg);
    text-shadow:0 0 2px rgba(180,70,20,.15);
  }
  45%{
    opacity:.65;
    transform:translateY(-1px) scale(1.03) rotate(4deg);
    text-shadow:
      0 0 4px rgba(210,90,25,.35),
      0 -3px 7px rgba(230,125,30,.18);
  }
  100%{
    opacity:.38;
    transform:translateY(-3px) scale(.94) rotate(-3deg);
    text-shadow:
      0 0 5px rgba(210,90,25,.25),
      0 -5px 8px rgba(230,125,30,.14);
  }
}

@media(max-width:780px){
  .sf-action-title{
    white-space:normal;
  }

  .sf-ember{
    margin:0 .18em;
  }
}

@media(prefers-reduced-motion:reduce){
  .sf-ember{
    animation:none;
  }
}

/* END SF TAKE ACTION HEAT */


/* BEGIN MAYOR MATRIX RAIN */

.mayor-matrix-rain{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.mayor-background-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.mayor-matrix-content{
  position:relative;
  z-index:1;
  background:transparent;
}

/* END MAYOR MATRIX RAIN */

/* BEGIN MATRIX NOT-ON-BOARD ALIGNMENT */
.official-table td.flock-vote-not-board{
  text-align:right;
}

@media(max-width:780px){
  .official-table td.flock-vote-not-board{
    text-align:right !important;
  }
}
/* END MATRIX NOT-ON-BOARD ALIGNMENT */

/* ============================================================
   FOOTER ACTION ALIGNMENT — canonical
   Equal halves prevent unequal Coffee/Facebook widths from
   shifting the visual centers.
   ============================================================ */

.footer-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:center !important;
  gap:0 !important;
  width:min(100%, 900px) !important;
  margin:0 auto 16px !important;
  padding:0 !important;
}

.footer-actions .coffee-support{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
}

.footer-actions .footer-fb{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
}

@media(max-width:650px){
  .footer-actions{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    padding:0 8px !important;
  }
}

/* END FOOTER ACTION ALIGNMENT */

/* BEGIN SF ACTION RED HEADINGS */
.sf-action-title{
  text-align:center !important;
  color:#8b0000 !important;
}

.sf-action-title span{
  color:#8b0000 !important;
}

.sf-heat-wrap{
  text-align:center !important;
}

.sf-heat-wrap .sf-heat{
  text-align:center !important;
  color:#8b0000 !important;
}
/* END SF ACTION RED HEADINGS */

/* ============================================================
   SF TAKE ACTION HEADING EMPHASIS — canonical
   ============================================================ */

body .content .sf-action-title{
  display:block !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  color:#8b0000 !important;
}

body .content .sf-action-title span{
  color:#8b0000 !important;
}

body .content .sf-heat-wrap{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

body .content .sf-heat-wrap .sf-heat{
  color:#8b0000 !important;
  text-align:center !important;
}

/* END SF TAKE ACTION HEADING EMPHASIS */

/* SF Take Action amendment statement */
.sf-action-title + .lead{
  text-align:center !important;
}
/* END SF Take Action amendment statement */

/* Canonical DeFlock contact form */
.contact-form{display:grid;gap:10px;max-width:760px}
.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:12px;border:1px solid #aeb7b0;border-radius:6px;background:white}
.contact-form textarea{min-height:180px;resize:vertical}
.contact-form button{border:0;cursor:pointer;font-size:1rem}

/* ============================================================
   Canonical parent-jurisdiction navigation
   ============================================================ */

.parent-jurisdiction-nav {
  display: block;
  width: min(1180px, calc(100% - 32px));
  margin: 12px auto 0;
  padding: 0;

  border: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;

  outline: none;
  box-shadow: none;
  background: transparent;
}

.parent-jurisdiction-nav::before,
.parent-jurisdiction-nav::after {
  content: none;
  display: none;
}

.parent-jurisdiction-nav .back-to-parent {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 9px 14px;

  border: 2px solid #286c35;
  border-radius: 7px;

  outline-offset: 3px;
  box-shadow: none;
  background: #286c35;
  color: #fff;

  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.parent-jurisdiction-nav .back-to-parent::before,
.parent-jurisdiction-nav .back-to-parent::after {
  content: none;
  display: none;
}

.parent-jurisdiction-nav .back-to-parent:hover,
.parent-jurisdiction-nav .back-to-parent:focus {
  background: #214d29;
  border-color: #214d29;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 780px) {
  .parent-jurisdiction-nav {
    width: calc(100% - 24px);
    margin-top: 9px;
  }

  .parent-jurisdiction-nav .back-to-parent {
    padding: 8px 11px;
    font-size: .9rem;
  }
}


/* ============================================================
   Parent navigation — overlay without horizontal page band
   ============================================================ */

.parent-jurisdiction-nav {
  position: relative !important;
  z-index: 8 !important;

  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;

  height: 0 !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.parent-jurisdiction-nav .back-to-parent {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;

  display: inline-block !important;
  width: auto !important;

  margin: 0 !important;
}

@media (max-width: 780px) {
  .parent-jurisdiction-nav {
    width: calc(100% - 24px) !important;
  }

  .parent-jurisdiction-nav .back-to-parent {
    top: 9px !important;
  }
}