:root{--ink:#111820;--green:#286c35;--green2:#4e9b3c;--paper:#f6f5ef;--red:#a82424;--red2:#761616;--muted:#56616b;--gold:#f1c84b;--navy:#101a3b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:17px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)}
a{color:#175f2d}a:hover{text-decoration-thickness:3px}header{background:#0e1418;color:white;position:sticky;top:0;z-index:10;box-shadow:0 2px 12px #0005}
nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;gap:20px}.brand{font-weight:900;letter-spacing:.5px;font-size:1.25rem}.brand span{color:#67b647}
nav .links{display:flex;gap:16px;flex-wrap:wrap}nav a{color:white;text-decoration:none;font-weight:700}
main{min-height:70vh}.hero{max-width:1180px;margin:auto;padding:54px 22px 36px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero.flyer{grid-template-columns:.9fr 1.1fr}.hero img{width:100%;border-radius:12px;box-shadow:0 18px 55px #0004}
h1{font-size:clamp(2.6rem,7vw,5.5rem);line-height:.92;margin:0 0 24px;text-transform:uppercase;letter-spacing:-2px}h1 span{color:var(--green)}
.lead{font-size:1.24rem;max-width:760px}.warning{font-weight:850;color:var(--red)}section{max-width:1040px;margin:auto;padding:46px 22px}
h2{font-size:2.05rem;line-height:1.1;margin:0 0 18px;text-transform:uppercase;color:#214d29}h3{margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:white;border:1px solid #d8ddd5;border-radius:10px;padding:22px;box-shadow:0 6px 18px #0000000b}.card strong.big{display:block;font-size:2.2rem;color:var(--red)}
.source{margin-top:12px;padding:11px 13px;background:#f0f4ef;border-left:5px solid var(--green);font-size:.92rem}.source a{font-weight:800}
.cta{display:inline-block;margin:10px 8px 0 0;padding:13px 18px;border-radius:7px;background:var(--green);color:white;text-decoration:none;font-weight:850}.cta.alt{background:#202a31}.cta.red{background:var(--red)}
.band{background:#162018;color:white;max-width:none}.band>div{max-width:1040px;margin:auto;padding:48px 22px}.band h2{color:white}
.evidence{background:#ecebe4}.official{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-bottom:1px solid #d5d9d3}.official b{font-size:1.05rem}
.notice{padding:18px;border:2px solid var(--gold);background:#fff9df;border-radius:10px}.peace{background:#e9f4e8;border:2px solid var(--green);padding:20px;border-radius:10px}
.moses{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}.moses img{width:100%;border-radius:12px}
footer{background:#0e1418;color:#d8dedb;padding:32px 22px;text-align:center}.small{font-size:.88rem;color:#68727a}
@media(max-width:780px){.hero,.hero.flyer,.grid,.grid.two,.moses{grid-template-columns:1fr}.links{font-size:.85rem}.official{grid-template-columns:1fr}}
.form-wrap{max-width:720px;margin:0 auto}.contact-form label{display:block;font-weight:800;margin:16px 0 6px}.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:13px;border:1px solid #bfc7be;border-radius:7px;background:#fff}.contact-form textarea{min-height:180px;resize:vertical}.contact-form button{border:0;cursor:pointer}.kicker{font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--red)}.campaigns{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.quote{font-size:1.35rem;font-weight:850;border-left:6px solid var(--red);padding:8px 0 8px 18px}.video{display:block;width:100%;max-width:none;aspect-ratio:16/9;height:auto;border:0}.mission{background:#fff;border-top:6px solid var(--green)}
@media(max-width:780px){.campaigns{grid-template-columns:1fr}}

.site-banner{width:100%;background:#0e1418}.site-banner img{display:block;width:100%;height:auto;margin:0 auto}.facebook-callout{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:center;background:#eef4ff;border:2px solid #1877f2;border-radius:12px;margin-top:30px;margin-bottom:30px}.facebook-callout h2{color:#174ea6;margin-bottom:8px}.fb-mark,.fb-mini{font-family:Arial,sans-serif;font-weight:900;background:#1877f2;color:#fff;text-align:center}.fb-mark{width:68px;height:68px;line-height:78px;border-radius:50%;font-size:58px}.fb-mini{display:inline-block;width:28px;height:28px;line-height:32px;border-radius:50%;font-size:24px;vertical-align:middle;margin-right:7px}.footer-fb{margin-bottom:14px;font-size:1.05rem;color:#fff}.fb-pending{margin-bottom:0}@media(max-width:780px){.facebook-callout{grid-template-columns:52px 1fr}.fb-mark{width:48px;height:48px;line-height:55px;font-size:42px}}
/* v1.5: stronger Facebook group promotion */
.facebook-callout{grid-template-columns:110px 1fr;padding:30px;border-width:3px}
.fb-mark{width:96px;height:96px;line-height:110px;font-size:82px}
.facebook-callout h2{font-size:2rem}
.footer-fb{font-size:1.25rem;font-weight:700;margin-bottom:18px}
.fb-mini{width:40px;height:40px;line-height:46px;font-size:35px;margin-right:10px}
@media(max-width:780px){.facebook-callout{grid-template-columns:72px 1fr;padding:20px}.fb-mark{width:64px;height:64px;line-height:74px;font-size:56px}.facebook-callout h2{font-size:1.55rem}}


/* v1.7 — stronger Facebook treatment and cache-busted assets */
.facebook-callout{
  grid-template-columns:150px 1fr;
  padding:34px;
  border:4px solid #1877f2;
  box-shadow:0 10px 28px rgba(24,119,242,.20);
}
.fb-mark{
  width:132px;
  height:132px;
  line-height:151px;
  border-radius:50%;
  font-size:112px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.facebook-callout h2{
  font-size:2.35rem;
  margin:0 0 10px;
}
.footer-fb{
  font-size:1.25rem;
  font-weight:800;
  margin-bottom:18px;
}
.fb-mini{
  width:42px;
  height:42px;
  line-height:49px;
  font-size:36px;
  margin-right:10px;
}
@media(max-width:780px){
  .facebook-callout{
    grid-template-columns:86px 1fr;
    padding:22px;
  }
  .fb-mark{
    width:78px;
    height:78px;
    line-height:90px;
    font-size:68px;
  }
  .facebook-callout h2{font-size:1.65rem}
}

/* v1.8 — confirmed DeFlock Bay Area Facebook links */
.facebook-callout.fb-link{
  text-decoration:none;
  color:inherit;
  display:grid;
}
.facebook-callout.fb-link:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(24,119,242,.30);
}
.footer-fb a{
  color:inherit;
  text-decoration:none;
}
.footer-fb a:hover{
  text-decoration:underline;
}


/* v1.9 — exact uploaded hero graphic below REAL HTML navigation */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#07131f;
}
nav{
  max-width:1536px;
  min-height:72px;
  padding:12px 28px;
}
.brand{
  font-size:1.4rem;
  white-space:nowrap;
}
nav .links{
  align-items:center;
  justify-content:flex-end;
}
nav .links a{
  padding:9px 10px;
  border-radius:6px;
}
nav .links a:hover,
nav .links a:focus{
  background:#ffffff14;
  text-decoration:none;
}
.hero-art{
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto;
  background:#07131f;
  overflow:hidden;
}
.hero-art > img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}
.hero-hotspot{
  position:absolute;
  display:block;
  z-index:3;
  border-radius:8px;
  background:transparent;
}
.hero-hotspot:focus{
  outline:3px solid #fff;
  outline-offset:2px;
}
/* Percentage-based hotspots follow the uploaded image responsively. */
.hs-facebook{left:68.5%;top:0.8%;width:31%;height:15.5%;}
.hs-action{left:47.7%;top:60.7%;width:19%;height:6.7%;}
.hs-victories{left:2.0%;top:77.2%;width:27.0%;height:17.0%;}
.hs-local{left:29.5%;top:77.2%;width:18.5%;height:17.0%;}
.hs-resources{left:73.2%;top:77.2%;width:25.0%;height:17.0%;}

@media(max-width:850px){
  header{position:relative}
  nav{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding:12px 16px;
  }
  nav .links{
    width:100%;
    justify-content:flex-start;
    gap:5px 10px;
  }
  nav .links a{
    padding:6px 5px;
  }
}


/* ============================================================
   BAY AREA COUNTY / CITY FINDER
   Network hierarchy:
   DeFlock Bay Area -> County -> City/Town
   ============================================================ */

.county-finder {
    width: 100%;
    background: #eee6d5;
    border-bottom: 1px solid #c9bda9;
}

.county-finder-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px 22px;

    display: flex;
    align-items: center;
    gap: 14px;
}

.county-finder label {
    color: #211a16;
    font-weight: 700;
    white-space: nowrap;
}

.county-finder select {
    width: min(520px, 100%);
    padding: 8px 38px 8px 12px;

    color: #211a16;
    background: #fff;

    border: 1px solid #9d917f;
    border-radius: 4px;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.county-finder select:focus {
    outline: 2px solid #244f82;
    outline-offset: 2px;
}


/* Mobile */

@media (max-width: 700px) {

    .county-finder-inner {
        padding: 10px 16px;

        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .county-finder label {
        white-space: normal;
    }

    .county-finder select {
        width: 100%;
    }
}


/* County finder alignment — directly beneath main menu */
@media (min-width: 701px) {

    .county-finder-inner {
        max-width: 1200px;
        margin: 0 auto;

        display: flex;
        justify-content: flex-end;
        align-items: center;

        padding: 9px 22px;
        gap: 14px;
    }

    .county-finder label {
        flex: 0 0 auto;
    }

    .county-finder select {
        width: 420px;
        flex: 0 0 420px;
    }
}


/* ============================================================
   County finder final desktop alignment
   Center beneath the RIGHT-HAND navigation/menu region.
   Leave main navigation itself unchanged.
   ============================================================ */

@media (min-width: 701px) {

    .county-finder-inner {
        max-width: 1180px;
        margin: 0 auto;
        padding: 9px 22px;

        display: grid;

        /*
         * Left column corresponds to DEFLOCKBAYAREA.ORG.
         * Right column corresponds to navigation links.
         */
        grid-template-columns: 270px 1fr;

        align-items: center;
    }

    .county-finder label {
        grid-column: 2;

        justify-self: center;

        /*
         * Label and select need to remain together.
         * The select is positioned immediately after
         * the label using the grid below.
         */
    }

    .county-finder-inner {
        /*
         * Use a nested flex treatment for the two
         * controls while keeping them in menu territory.
         */
        position: relative;
    }

    .county-finder label {
        position: absolute;

        /*
         * Right-side region starts after 270px.
         * Center the complete label/select assembly
         * beneath that region.
         */
        left: 310px;
        width: 225px;

        text-align: right;
        white-space: nowrap;
    }

    .county-finder select {
        grid-column: 2;

        justify-self: end;

        width: 420px;
        max-width: 420px;

        margin-right: 0;
    }
}


/* ============================================================
   FINAL county finder desktop position
   Finder assembly begins beneath the main navigation area.
   "Find" aligns approximately beneath "Home".
   ============================================================ */

@media (min-width: 701px) {

    .county-finder-inner {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 9px 22px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;

        position: static;
    }

    .county-finder label {
        position: static;
        width: auto;

        margin-left: 455px;

        flex: 0 0 auto;

        text-align: left;
        white-space: nowrap;
    }

    .county-finder select {
        position: static;

        width: 420px;
        max-width: 420px;

        margin: 0;

        flex: 0 0 420px;
    }
}


/* ============================================================
   FINAL county finder desktop position
   Finder assembly begins beneath the main navigation area.
   "Find" aligns approximately beneath "Home".
   ============================================================ */

@media (min-width: 701px) {

    .county-finder-inner {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 9px 22px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;

        position: static;
    }

    .county-finder label {
        position: static;
        width: auto;

        margin-left: 455px;

        flex: 0 0 auto;

        text-align: left;
        white-space: nowrap;
    }

    .county-finder select {
        position: static;

        width: 420px;
        max-width: 420px;

        margin: 0;

        flex: 0 0 420px;
    }
}


/* ============================================================
   FINAL county finder desktop position
   Finder assembly begins beneath the main navigation area.
   "Find" aligns approximately beneath "Home".
   ============================================================ */

@media (min-width: 701px) {

    .county-finder-inner {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 9px 22px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;

        position: static;
    }

    .county-finder label {
        position: static;
        width: auto;

        margin-left: 455px;

        flex: 0 0 auto;

        text-align: left;
        white-space: nowrap;
    }

    .county-finder select {
        position: static;

        width: 420px;
        max-width: 420px;

        margin: 0;

        flex: 0 0 420px;
    }
}


/* ============================================================
   County finder — definitive desktop placement
   Entire assembly occupies RIGHT side beneath navigation.
   ============================================================ */

@media (min-width: 701px) {

    .county-finder-inner {
        max-width: 1180px;
        margin: 0 auto;
        padding: 9px 22px;

        display: grid;
        grid-template-columns: 455px 1fr;
        align-items: center;

        position: static;
    }

    .county-finder label {
        position: static;
        grid-column: 2;

        margin: 0;
        padding: 0;

        justify-self: start;

        white-space: nowrap;
    }

    .county-finder select {
        position: static;
        grid-column: 2;

        width: 420px;
        max-width: 100%;

        margin: 0;
        padding-left: 12px;

        justify-self: start;
    }

    /*
     * Turn the right column itself into the horizontal
     * label + dropdown assembly.
     */
    .county-finder-inner {
        display: flex;
        justify-content: flex-start;
        padding-left: 477px;
        gap: 14px;
    }

    .county-finder label {
        flex: 0 0 auto;
    }

    .county-finder select {
        flex: 0 0 420px;
    }
}


/* ============================================================
   County finder — FINAL positional override
   Align "Find" beneath right-side navigation.
   ============================================================ */

@media (min-width: 701px) {

    .county-finder-inner {
        box-sizing: border-box;

        width: 1180px;
        max-width: calc(100% - 44px);
        height: 58px;

        margin: 0 auto;
        padding: 0;

        display: block;

        position: relative;
    }

    .county-finder label {
        position: absolute;

        left: 455px;
        top: 50%;
        transform: translateY(-50%);

        margin: 0;
        padding: 0;

        white-space: nowrap;
        font-weight: 700;
    }

    .county-finder select {
        position: absolute;

        left: 675px;
        top: 50%;
        transform: translateY(-50%);

        width: 420px;
        max-width: calc(100% - 675px);

        margin: 0;

        flex: none;
    }
}


/* ============================================================
   County finder — viewport-right placement
   Do NOT center against the 1180px content container.
   ============================================================ */

@media (min-width: 701px) {

    .county-finder {
        position: relative;
        height: 58px;
    }

    .county-finder-inner {
        position: static;

        width: auto;
        max-width: none;
        height: 58px;

        margin: 0;
        padding: 0;

        display: block;
    }

    .county-finder label {
        position: absolute;

        right: 456px;
        left: auto;

        top: 50%;
        transform: translateY(-50%);

        width: auto;
        margin: 0;
        padding: 0;

        white-space: nowrap;
        text-align: left;
    }

    .county-finder select {
        position: absolute;

        right: 22px;
        left: auto;

        top: 50%;
        transform: translateY(-50%);

        width: 420px;
        max-width: none;

        margin: 0;
    }
}


/* ============================================================
   DeFlock Bay Area — Support component
   ============================================================ */

.support-page{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.support-primary{
  margin:30px 0;
  padding:24px;
  text-align:center;
  border-left:5px solid #c59a52;
}

.support-coffee-button{
  display:inline-block;
  margin-top:8px;
  padding:12px 20px;
  border:1px solid currentColor;
  border-radius:6px;
  text-decoration:none;
  font-weight:800;
}

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

.support-coffee-line{
  margin-top:26px;
  text-align:center;
  font-style:italic;
  font-weight:700;
}

.support-strip{
  padding:13px 20px;
  text-align:center;
}

.support-strip a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border:1px solid currentColor;
  border-radius:5px;
  text-decoration:none;
  font-size:14px;
}

.support-strip a:hover{
  text-decoration:underline;
}

.support-strip-icon{
  font-size:16px;
}


/* ============================================================
   BEGIN APPROVED COFFEE COMPONENT
   Approved on Livermore + Pleasanton
   ============================================================ */
/* ============================================================
   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 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 */