/* Cynthia Diaz for Denver
   Styles lifted verbatim from the original single-file site, then extended.
   Everything above the "ADDITIONS" marker is the original design, unchanged.
   Self-hosted variable fonts replace the Google Fonts <link>: no third-party
   request, no fallback flash.
   Sources: @fontsource-variable/fraunces, @fontsource-variable/inter (OFL). */

@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/fraunces-latin-standard-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/fraunces-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#1c1712;
  --paper:#f6efe3;
  --paper-2:#efe5d3;
  --coral:#e8735a;
  --coral-deep:#c8543c;
  --teal:#3f9c96;
  --teal-deep:#2c6f6b;
  --plum:#6a4a72;
  --plum-deep:#46304d;
  --blush:#f6bda9;
  --gold:#d3a24a;
  --line:#dccdb4;
  --ink-soft:#4a3f33;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* The nav is sticky, so an in-page anchor used to park the heading underneath
   it. Every jump target needs to clear the bar. */
section[id],header[id]{scroll-margin-top:78px}
body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:-0.015em;font-variation-settings:"SOFT" 0,"WONK" 0}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(246,239,227,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 26px;max-width:1120px;margin:0 auto}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.18rem;color:var(--ink);text-decoration:none;letter-spacing:-0.02em}
.brand span{color:var(--coral)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-size:0.9rem;font-weight:500;opacity:0.82}
.nav-links a:hover{opacity:1;color:var(--coral)}
.btn{display:inline-block;background:var(--coral);color:#fff;text-decoration:none;padding:12px 24px;border-radius:3px;font-weight:600;font-size:0.9rem;border:none;cursor:pointer;transition:transform .12s ease,background .15s ease}
.btn:hover{background:var(--coral-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-teal{background:var(--teal)}.btn-teal:hover{background:var(--teal-deep)}
/* Raised from 760px: the nav carries one more item than the original (the
   language switch), so it needs to collapse earlier to stop the brand wrapping. */
/* Mobile navigation. The button ships hidden and site.js reveals it, so with
   JavaScript off nobody sees a control that cannot work. Below 900px the links
   become a panel under the bar rather than vanishing, which is what they used
   to do: on a phone there was no way to reach the other pages at all. */
.navtoggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.navtoggle[hidden]{display:none !important}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .navtoggle:not([hidden]){display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(28,23,18,0.12);padding:8px 26px 18px}
  .nav-links[data-open]{display:flex}
  .nav-links a{font-size:1.02rem;opacity:1;padding:14px 0;border-top:1px solid var(--line)}
  .nav-links a:first-child{border-top:none}
  .nav-links .lang{align-self:flex-start;margin:12px 0 0;padding:9px 16px;border-top:1px solid var(--line);
    border:1px solid var(--line)}
  .nav-links .nav-cta{margin-top:14px;text-align:center;border-top:none;padding:14px 24px}
  /* The panel hangs off the bar, so the bar has to be the positioning parent. */
  nav{position:sticky}
  .nav-inner{position:relative}
}

/* PURÉPECHA SPIRAL MOTIF, original glyph in the traditional style */
.spiral-motif{position:absolute;pointer-events:none;user-select:none;stroke-width:1.1px}
.spiral-hero{top:-10px;right:-30px;width:230px;height:230px;color:var(--ink);opacity:0.07;z-index:0}
.spiral-donate{bottom:-56px;left:-52px;width:280px;height:280px;color:#fff;opacity:0.13;z-index:0}
.spiral-foot{top:-34px;right:14px;width:150px;height:150px;color:var(--teal);opacity:0.20}
@media(max-width:860px){.spiral-hero{width:160px;height:160px;right:-16px;opacity:0.06}}

/* Spiral separators inside the moving banner */
.valuebar .spiral-sep{width:1.45em;height:1.45em;vertical-align:middle;color:var(--gold);stroke-width:1.5px;flex:0 0 auto;margin:0 2px}

/* Spiral-centered section divider */
.wing-divider{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 0;opacity:0.7}
.wing-divider .spiral-sep{width:26px;height:26px;color:var(--coral);stroke-width:1.4px}
.wing-divider .rule{height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* HERO */
.hero{position:relative;padding:72px 0 0;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:end}
.hero-copy{padding-bottom:78px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:0.76rem;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:24px;background:var(--paper-2);border:1px solid var(--line);padding:7px 14px;border-radius:40px}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.4rem);font-weight:600;letter-spacing:-0.03em;margin-bottom:6px}
.hero h1 .open{color:var(--coral);font-style:italic;font-weight:500}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.28rem);max-width:44ch;margin:26px 0 34px;color:var(--ink-soft)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{position:relative;align-self:end}
.hero-photo .frame{position:relative;z-index:2;border-radius:6px 6px 0 0;overflow:hidden;box-shadow:0 -2px 40px rgba(28,23,18,0.14)}
.hero-photo img{display:block;width:100%;height:auto}
.hero-photo .halo{position:absolute;z-index:1;left:-8%;right:-8%;top:8%;bottom:0;background:radial-gradient(ellipse at center,rgba(63,156,150,0.22),transparent 68%)}
.hero-photo .tagpill{position:absolute;z-index:3;left:-14px;bottom:70px;background:var(--ink);color:var(--paper);font-family:'Fraunces',serif;font-size:0.94rem;font-weight:500;padding:11px 18px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.tagpill b{color:var(--gold);font-weight:600}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-bottom:40px}
  .hero-photo{max-width:420px;margin:0 auto}
  .hero-photo .tagpill{left:0}
}

/* MARQUEE VALUES BAR */
.valuebar{background:var(--ink);color:var(--paper);overflow:hidden;border-top:3px solid var(--coral)}
.valuebar .track{display:flex;gap:0;white-space:nowrap;animation:scroll 26s linear infinite}
.valuebar .item{padding:15px 0;font-family:'Fraunces',serif;font-size:1.05rem;font-weight:500;display:flex;align-items:center}
.valuebar .item span{padding:0 26px}
.valuebar .item i{color:var(--gold);font-style:normal}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.valuebar .track{animation:none;justify-content:center;flex-wrap:wrap;white-space:normal}}

/* DOORS */
.doors{padding-block:80px}
.doors .head{max-width:30ch;margin-bottom:44px}
.doors .head h2{font-size:clamp(1.9rem,4vw,2.7rem)}
.doors .head .k{color:var(--coral)}
.doors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.door{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:34px 28px;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.door:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(28,23,18,0.10)}
.door .bar{position:absolute;top:0;left:0;right:0;height:5px}
.door:nth-child(1) .bar{background:var(--coral)}
.door:nth-child(2) .bar{background:var(--teal)}
.door:nth-child(3) .bar{background:var(--plum)}
.door:nth-child(4) .bar{background:var(--gold)}
.door .num{font-family:'Fraunces',serif;font-weight:600;font-size:0.82rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);display:block;margin:6px 0 14px}
.door h3{font-size:1.4rem;margin-bottom:10px}
.door p{font-size:0.99rem;color:var(--ink-soft)}
@media(max-width:980px){.doors-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.doors-grid{grid-template-columns:1fr}}

/* STORY */
.story{padding-block:8px 84px}
.story-card{background:var(--ink);color:var(--paper);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:0.8fr 1.2fr}
.story-photo{position:relative;min-height:100%}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.story-body{padding:54px 48px}
.story-body .lede{font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.8vw,2.05rem);line-height:1.28;font-weight:500;margin-bottom:24px;color:#fff}
.story-body p{color:#cdc2af;margin-bottom:16px;font-size:1.03rem}
.story-body p:last-child{margin-bottom:0}
.story-body .tag{color:var(--gold);font-weight:600}
@media(max-width:860px){.story-card{grid-template-columns:1fr}.story-photo{min-height:340px}.story-body{padding:38px 30px}}

/* ISSUES */
.issues{padding:82px 0;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.issues .lede{font-size:clamp(1.9rem,4vw,2.7rem);max-width:16ch;margin-bottom:8px}
.issues .sub{color:var(--ink-soft);max-width:44ch;margin-bottom:42px}
.issue-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.issue{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:32px 30px;display:flex;gap:20px;align-items:flex-start}
.issue .idx{font-family:'Fraunces',serif;font-weight:700;font-size:1.6rem;line-height:1;color:var(--coral);min-width:44px}
.issue:nth-child(2) .idx{color:var(--teal)}
.issue:nth-child(3) .idx{color:var(--plum)}
.issue:nth-child(4) .idx{color:var(--gold)}
.issue h3{font-size:1.24rem;margin-bottom:8px}
.issue p{color:var(--ink-soft);font-size:0.98rem}
@media(max-width:720px){.issue-grid{grid-template-columns:1fr}}

/* PETITION, the reworked in-person section */
.petition{padding-block:84px}
.petition-inner{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%);border-radius:12px;padding:52px 48px;color:#fff;position:relative;overflow:hidden}
.petition-inner:before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border:2px solid rgba(255,255,255,0.14);border-radius:50%}
.petition-inner:after{content:"";position:absolute;right:20px;top:20px;width:160px;height:160px;border:2px solid rgba(255,255,255,0.10);border-radius:50%}
.petition h2{font-size:clamp(1.9rem,4vw,2.6rem);max-width:18ch;margin-bottom:14px;position:relative}
.petition .plede{max-width:52ch;color:#e4f2f0;font-size:1.06rem;margin-bottom:30px;position:relative}
.sign-where{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;margin-bottom:14px}
.spot{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.2);border-radius:7px;padding:22px 20px;backdrop-filter:blur(2px)}
.spot .label{font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:#bfe6e2;margin-bottom:8px;font-weight:600}
.spot h4{font-family:'Fraunces',serif;font-size:1.16rem;font-weight:600;margin-bottom:5px;color:#fff}
.spot p{font-size:0.9rem;color:#dcefec;line-height:1.45}
.petition-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;position:relative;align-items:center}
.btn-white{background:#fff;color:var(--teal-deep)}
.btn-white:hover{background:var(--paper);color:var(--teal-deep)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.6)}
.btn-outline-white:hover{background:rgba(255,255,255,0.12)}
.deadline-chip{font-size:0.85rem;color:#cdeae7;display:flex;align-items:center;gap:8px}
@media(max-width:760px){.petition-inner{padding:38px 28px}.sign-where{grid-template-columns:1fr}}

/* DONATE */
/* Plum, not ink-and-gold. The page already spends dark brown on the story card
   and the footer, and teal on the petition block. Plum was sitting unused in the
   token set apart from one door bar. */
.donate{padding-block:8px 90px}
.donate-inner{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--plum) 0%,var(--plum-deep) 100%);border-radius:12px;padding:56px 48px;color:#f2ecf4;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* min-width:0 stops the grid track blowing out to min-content, which on a
   320px screen pushed every child 22px past the panel's right padding and got
   it clipped by the overflow:hidden. */
.donate-inner>*{position:relative;z-index:1;min-width:0}
.donate-inner h2{font-size:clamp(2rem,4.2vw,2.9rem);max-width:14ch;color:#fff}
.donate-inner h2 em{color:var(--blush);font-style:italic}
.donate-right p{color:#ddd0e4;font-size:1.04rem;margin-bottom:22px}
.amt-row{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.amt{background:transparent;border:1.5px solid rgba(255,255,255,0.32);color:#fff;padding:14px 22px;border-radius:4px;font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;cursor:pointer;transition:.15s}
.amt:hover,.amt.active{background:#fff;border-color:#fff;color:var(--plum-deep)}
/* Specificity has to beat `.donate-right p`, which otherwise wins and renders the
   fine print at full body brightness. The original had the same collision. */
.donate-right .donate-note{font-size:0.8rem;color:#c3b2cc;margin-top:18px;max-width:54ch;line-height:1.55}
.donate-inner .btn-white{color:var(--plum-deep)}
.donate-inner .btn-white:hover{background:var(--paper);color:var(--plum-deep)}
.btn-gold{background:var(--gold);color:var(--ink)}.btn-gold:hover{background:#e0b158}
/* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content and let the track
   grow past the panel's content box on a 320px screen, clipping the right edge. */
@media(max-width:820px){.donate-inner{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 30px}}

/* FOOTER */
/* Footer keeps the near-black ground so it still anchors the page, but the
   accents move off gold. Teal separates it from the plum block directly above. */
footer{position:relative;overflow:hidden;background:var(--ink);color:#a9b3b1;padding:20px 0 44px;font-size:0.88rem;border-top:3px solid var(--teal-deep)}
footer .wrap{position:relative;z-index:1}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center;margin:28px 0}
.foot-brand{font-family:'Fraunces',serif;font-size:1.3rem;color:#fff}
.foot-brand span{color:#5fbdb6}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:#c6d3d1;text-decoration:none}footer a:hover{color:#fff}
.disclaimer{border-top:1px solid rgba(255,255,255,0.12);padding-top:22px;font-size:0.75rem;color:#7f8b89;line-height:1.6}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   ADDITIONS, Phase 1. Same tokens, same visual language.
   ============================================================ */

/* Accessibility: the original had no skip link and no visible focus ring. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px;text-decoration:none}
.skip:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px;border-radius:2px}

/* DEADLINE BANNER, sits above the nav, the first thing on every page */
.deadbar{background:var(--coral-deep);color:#fff;font-size:0.9rem;line-height:1.4}
.deadbar .wrap{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;text-align:center}
.deadbar b{font-weight:700}
.deadbar .days{font-family:'Fraunces',serif;font-weight:700;background:rgba(0,0,0,0.22);border-radius:3px;padding:2px 9px}
.deadbar a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.deadbar a:hover{text-decoration:none}
@media(max-width:560px){.deadbar{font-size:0.83rem}}

/* Language switch in the nav */
.nav-links .lang{font-size:0.82rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:40px;padding:6px 13px;opacity:1}
.nav-links .lang:hover{border-color:var(--coral);color:var(--coral)}
/* The language switch survives the nav collapse. On a Spanish-speaking corridor
   it matters more than the section links, which the footer still carries. */
@media(max-width:900px){.nav-links a.lang{display:inline-block}}
@media(max-width:900px){.nav-links{gap:14px}.brand{white-space:nowrap}}
@media(max-width:440px){.nav-inner{padding:13px 18px;gap:12px}.brand{font-size:0.95rem}.nav-links{gap:8px}
  .nav-links .lang{padding:5px 9px;font-size:0.7rem}.nav-links .btn{padding:10px 15px;font-size:0.82rem}}

/* PAGE HEADER, the hero variant for interior pages, no photo */
.pagehead{position:relative;overflow:hidden;padding:64px 0 44px;border-bottom:1px solid var(--line)}
.pagehead>.wrap{position:relative;z-index:1}
.pagehead h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:600;letter-spacing:-0.03em;max-width:19ch;margin-bottom:8px}
.pagehead h1 em{color:var(--coral);font-style:italic;font-weight:500}
.pagehead .sub{font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:56ch;margin-top:20px;color:var(--ink-soft)}

/* Generic interior section */
.sec{padding-block:64px}
.sec-tight{padding-block:44px}
.sec h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:12px}
.sec .sub{color:var(--ink-soft);max-width:58ch;margin-bottom:34px}
.sec-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* CHECKLIST, eligibility rules, circulator rules */
.checklist{list-style:none;display:grid;gap:14px;max-width:64ch}
.checklist li{position:relative;padding-left:38px;color:var(--ink-soft);font-size:1rem}
.checklist li:before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--teal);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat,linear-gradient(#000,#000);
  mask-composite:exclude}
.checklist.warn li:before{background:var(--coral-deep)}

/* LOCATION CARDS */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.loc{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:30px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.loc .bar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--teal)}
.loc.primary .bar{background:var(--coral)}
.loc .label{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:6px 0 12px}
.loc h3{font-size:1.28rem;margin-bottom:8px}
.loc p{color:var(--ink-soft);font-size:0.97rem;margin-bottom:10px}
.loc .hours{color:var(--ink);font-weight:600}
.loc .btn{margin-top:auto;align-self:flex-start}
.loc .links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:0.92rem;margin-bottom:14px}
.loc .links a{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.loc .links span{color:var(--line)}


/* The join prompt is not a business, so it does not sit in the grid wearing a
   listing's clothes. Full width, teal, plainly an invitation. */
.joinrow{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:26px;
  background:var(--teal);color:#fff;border-radius:8px;padding:26px 30px}
.joinrow .joincopy{flex:1 1 320px}
.joinrow h3{font-size:1.2rem;margin:0 0 6px;color:#fff}
.joinrow p{margin:0;color:rgba(255,255,255,0.92);font-size:0.97rem;max-width:62ch}
.joinrow .btn{background:#fff;color:var(--teal-deep);border-color:#fff;flex:0 0 auto}
.joinrow .btn:hover{background:var(--paper);color:var(--teal-deep)}

@media(max-width:980px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .loc-grid{grid-template-columns:1fr}
  .joinrow{padding:22px 20px}
}

/* REPORT MODAL */
html.modal-open{overflow:hidden}
/* margin:auto is what centres a native modal dialog, and the universal reset at
   the top of this file sets margin:0 on everything, dialog included. Without
   putting it back the modal pins itself to the top left corner. */
.modal{border:none;padding:0;background:transparent;max-width:min(760px,94vw);width:100%;
  max-height:90vh;overflow:visible;margin:auto}
.modal::backdrop{background:rgba(28,23,18,0.62)}
.modal .modalbody{background:var(--paper);border-radius:10px;padding:38px 40px;
  max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal .modalbody h2{margin-top:0}
.modalx{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modalx:hover{background:var(--paper-2);border-color:var(--ink-soft)}
@media(max-width:640px){
  .modal{max-width:100vw;width:100vw;max-height:100vh;margin:0;top:0}
  .modal .modalbody{border-radius:0;padding:56px 22px 34px;max-height:100vh;min-height:100vh}
}

/* SANTA FE LEDGER, block closure status */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.block{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px 22px;position:relative;overflow:hidden}
.block .bar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--teal)}
.block.is-closed .bar{background:var(--coral-deep)}
.block .status{display:inline-flex;align-items:center;gap:7px;font-size:0.72rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;margin:6px 0 10px;color:var(--teal-deep)}
.block.is-closed .status{color:var(--coral-deep)}
.block .status .pip{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.block.is-paused .bar{background:var(--gold)}
.block h3{font-size:1.15rem;margin-bottom:8px}
.block p{font-size:0.94rem;color:var(--ink-soft);margin:0}
/* Scoped under .block on purpose: `.block p` above would otherwise win on
   specificity and silently flatten these back to margin:0. */
.block .nextch{font-size:0.9rem;font-weight:600;color:var(--ink);
  margin-top:11px;padding-left:11px;border-left:3px solid var(--gold)}
.block.is-closed .nextch{border-left-color:var(--coral-deep)}
.block .hours{font-size:0.84rem;color:var(--ink-soft);margin-top:8px}
.blocks-note{font-size:0.9rem;color:var(--ink-soft);max-width:70ch;margin-top:22px}
@media(max-width:860px){.blocks{grid-template-columns:1fr}}

/* CLOSURE TIMELINE. Two bars per closure, scaled against the longest run on the
   page, so an overrun reads as length before it reads as a number. The whole
   argument of this section is the gap between the two bars. */
.tl{display:flex;flex-direction:column;gap:18px;max-width:840px}
.tlhead{background:var(--paper);border-left:4px solid var(--coral-deep);border-radius:6px;
  padding:14px 18px;margin-bottom:22px;max-width:70ch;color:var(--ink-soft)}
.tlhead b{color:var(--ink)}
.tlrow{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.tltop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tltop h3{font-size:1.12rem;margin:0}
.verdict{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;white-space:nowrap}
.verdict.late{background:#fbe6e0;color:var(--coral-deep);border:1px solid var(--coral-deep)}
.verdict.early{background:#e4f2f0;color:var(--teal-deep);border:1px solid var(--teal)}
.verdict.ontime{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line)}
.verdict.none{background:transparent;color:var(--ink-soft);border:1px dashed var(--line)}
.tlbar{display:grid;grid-template-columns:5.5rem 1fr auto;gap:12px;align-items:center;margin-bottom:7px}
.tlbar .lbl{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.tlbar .track{background:var(--paper-2);border-radius:3px;height:16px;overflow:hidden}
.tlbar i{display:block;height:100%;border-radius:3px}
.tlbar i.plan{background:var(--line)}
.tlbar i.act{background:var(--teal)}
.tlbar i.act.over{background:var(--coral-deep)}
.tlbar .val{font-size:0.84rem;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.tlhours{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:0.86rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 22px}
.tlhours .lbl{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.tlhours .tlgap{flex-basis:100%;font-weight:700;color:var(--coral-deep)}
.tlsrc{font-size:0.8rem;color:var(--ink-soft);margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.tlasof{font-size:0.84rem;color:var(--ink-soft);margin-top:18px}
@media(max-width:560px){
  .tlbar{grid-template-columns:1fr;gap:4px}
  .tlbar .val{white-space:normal}
  .tlbar .track{height:12px}
}

/* Empty state, shown until businesses start reporting. Deliberately plain:
   an honest blank is worth more here than a fake chart. */
.empty{background:var(--paper-2);border:1px dashed var(--line);border-radius:8px;padding:34px 30px;max-width:72ch}
.empty h3{font-size:1.3rem;margin-bottom:10px}
.empty p{color:var(--ink-soft);margin:0}

/* The policy ask, set as a pull quote inside the dark callout */
.askline{font-family:'Fraunces',serif;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.2;
  color:#fff;margin:24px 0 0;max-width:24ch;font-weight:600}
.askline em{color:var(--blush);font-style:italic}

/* CALLOUT, dark panel for the circulator ask */
.callout{background:var(--ink);color:var(--paper);border-radius:12px;padding:48px 44px;position:relative;overflow:hidden}
.callout>*{position:relative;z-index:1}
.callout h2{color:#fff;max-width:20ch}
.callout p{color:#cdc2af;max-width:60ch;margin-bottom:18px}
.callout .checklist li{color:#cdc2af}
.callout .note{font-size:0.82rem;color:#9d917d;margin-top:20px;max-width:62ch}
@media(max-width:640px){.callout{padding:34px 26px}}

/* FORMS */
.cf{display:grid;gap:16px;max-width:640px;margin-top:26px}
.cf .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:0.82rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field textarea,.field select{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:4px;padding:12px 14px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal)}
.cf .hint{font-size:0.82rem;color:var(--ink-soft)}
/* Native selects carry the OS look, which fights everything else on the page.
   Custom chevron, and the control is drawn like the rest of the fields. */
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9.5l6 6 6-6' fill='none' stroke='%234a3f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}

/* METRIC INPUT. Direction is a choice, magnitude is a number, so nothing is
   typed in prose and nothing has to be parsed. Built from radios rather than a
   select: it submits with JavaScript off, it is one tap instead of two, and it
   can be drawn to match the page. The magnitude buttons deliberately echo the
   donate amount buttons, since that is the same pattern already solved here. */
.metric{display:flex;flex-direction:column;gap:12px}
.metric > .mlabel{font-family:'Fraunces',Georgia,serif;font-size:1.08rem;font-weight:600;
  color:var(--ink);letter-spacing:-0.01em;line-height:1.3}

.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:10px 8px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:5px;font-size:0.88rem;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.seg label:hover{border-color:var(--teal);color:var(--teal-deep)}
.seg input:checked + label{background:var(--teal);border-color:var(--teal);color:#fff}
.seg input:focus-visible + label{outline:3px solid var(--coral-deep);outline-offset:2px}
@media(max-width:620px){.seg{grid-template-columns:repeat(2,1fr)}}

.mag{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.mag[hidden]{display:none}
.maglabel{font-size:0.76rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft)}
.magrow{display:flex;gap:9px;flex-wrap:wrap;align-items:stretch}
.magrow button{background:transparent;border:1.5px solid var(--line);border-radius:4px;
  padding:12px 20px;font-family:'Fraunces',Georgia,serif;font-size:1.08rem;font-weight:600;
  color:var(--ink);cursor:pointer;min-height:48px;transition:.12s}
.magrow button:hover{border-color:var(--teal);color:var(--teal-deep)}
.magrow button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.pctwrap{position:relative;flex:0 0 7.5rem;display:flex;align-items:center}
.pctwrap input{width:100%;height:100%;padding:12px 2.4rem 12px 14px;text-align:right;
  font-family:'Fraunces',Georgia,serif;font-size:1.08rem;font-weight:600;
  font-variant-numeric:tabular-nums;border:1.5px solid var(--line);border-radius:4px;
  background:var(--paper);color:var(--ink);min-height:48px}
.pctwrap input::-webkit-outer-spin-button,.pctwrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pctwrap input[type=number]{-moz-appearance:textfield}
.pctwrap span{position:absolute;right:14px;font-family:'Fraunces',Georgia,serif;font-weight:600;
  color:var(--ink-soft);pointer-events:none}
@media(max-width:440px){.magrow button{flex:1 1 calc(25% - 7px);padding:12px 8px}.pctwrap{flex:1 1 100%}}


/* Methodology. Sits with the numbers, not in a footnote: against an opponent
   who wins on published proof, an unsourced figure is more attackable than no
   figure. Shown even in the empty state, because it explains what will be
   counted before anything is. */
/* Now a footnote under the figures rather than a preamble above them. It
   explains how to read what you just looked at, so it recedes. */
.method{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;max-width:78ch}
.method h3{font-size:0.72rem;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.method p{font-size:0.88rem;color:var(--ink-soft);line-height:1.7;margin:0}

/* Standalone utility pages (the weekly report link), no nav, no footer. */
.narrowpage{max-width:640px}
.narrowpage h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:6px}
.warn{background:var(--paper-2);border-left:4px solid var(--gold);border-radius:4px;
  padding:12px 16px;font-size:0.92rem;color:var(--ink-soft);margin:18px 0}

/* Grouping headers inside the long ledger form, so a shop owner on a phone can
   see where one decision ends and the next begins. */
.formstep{font-size:0.78rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:14px 0 -2px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'Inter',system-ui,sans-serif}
.cf .formstep:first-of-type{border-top:0;padding-top:0;margin-top:0}
.subtitle{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;font-style:italic;
  color:var(--ink-soft);margin-top:-6px}

/* Consent checkbox. Deliberately large and readable rather than a tickbox with
   a three word label: this is the line between "list me" and "publish my
   revenue" and it should be hard to agree to by accident. */
.check{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;padding:16px 18px;cursor:pointer}
.check input{margin-top:3px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--teal)}
.check span{font-size:0.95rem;color:var(--ink-soft);line-height:1.5}
.check b{color:var(--ink);font-weight:600}

/* The weekly reporting link handed back after signup. */
.sent .yourlink{display:block;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.9rem;word-break:break-all;background:var(--paper);border:1px solid var(--line);
  border-radius:4px;padding:10px 12px;color:var(--ink)}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill anything still in the layout. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Inline confirmation that replaces the form once it has been sent. */
.sent{background:var(--paper-2);border:1px solid var(--teal);border-left:4px solid var(--teal);
  border-radius:6px;padding:18px 20px;color:var(--ink);font-weight:500;margin:0}
.callout .sent{background:rgba(255,255,255,0.08);border-color:var(--teal);color:#fff}
.cf button[type="submit"][disabled]{opacity:0.65;cursor:progress}
.callout .field label{color:#b7ab97}
.callout .field input,.callout .field textarea,.callout .field select{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.22);color:#fff}
.callout .cf .hint{color:#9d917d}
@media(max-width:640px){.cf .row{grid-template-columns:1fr}}

/* EVENT ROWS */
.events{display:grid;gap:12px;max-width:820px}
.event{display:flex;gap:22px;align-items:baseline;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px 24px}
.event .when{font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;color:var(--coral-deep);min-width:130px}
.event h3{font-size:1.1rem;margin-bottom:4px}
.event p{font-size:0.92rem;color:var(--ink-soft)}
@media(max-width:560px){.event{flex-direction:column;gap:6px}}

/* `.donate-inner>*{position:relative}` above lands on the decorative spiral at
   equal specificity and wins on order, which takes the motif out of absolute
   positioning and hands it a grid cell of its own. The two real columns then
   shift one place: the heading rendered in column two and the ask wrapped to a
   second row. Put the motif back where it belongs. */
.donate-inner>.spiral-motif{position:absolute}

/* CONTRIBUTION LADDER. The amount buttons are real links to ActBlue now, so
   each one is a two-line block: what you give, and what Denver's match turns it
   into. The matched figure is the whole argument, so it is not fine print. */
/* Two by two at every width. Four across does not fit the right column on
   desktop, and three plus a stray fourth reads like a mistake. */
.donate-right .amt-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
a.amt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-decoration:none;padding:12px 10px;line-height:1.15;min-width:0}
a.amt b{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;font-weight:700}
a.amt span{font-family:'Inter',system-ui,sans-serif;font-size:0.76rem;font-weight:600;
  letter-spacing:0.01em;color:#e3d6ea;white-space:nowrap}
a.amt:hover span,a.amt:focus-visible span{color:var(--plum-deep)}
/* Focus has to be visible against the plum panel, where the coral ring the rest
   of the site uses all but disappears. */
.donate-inner a:focus-visible,.donate-inner button:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* The lede sits under the h2 in the left column, which has no paragraph rule of
   its own because until now it held nothing but the heading. */
.donate-left .donate-lede{color:#e6dbeb;font-size:1.02rem;line-height:1.6;margin-top:18px;max-width:36ch}
.amt-more{margin-bottom:22px}
.donate-right .amt-more{margin-bottom:22px}
.amt-more a{color:#fff;font-weight:600;font-size:0.92rem;text-decoration:underline;text-underline-offset:3px}
.amt-more a:hover{text-decoration:none}

/* COUNT TOWARD 100. One hundred marks, filled from the left. Drawn by site.js
   from the number entered in /admin and served by /api/tally. With JavaScript
   off, or if that endpoint does not answer, the honest fallback sentence stays
   and no figure is claimed. */
.tally{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.30);
  border-radius:6px;padding:16px 18px;margin-bottom:22px}
.tally-fallback{color:#ece3f0;font-size:0.95rem;line-height:1.55;margin:0}
.donate-right .tally-fallback{margin:0}
.tally .marks{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;margin-bottom:11px}
.tally .marks i{display:block;height:14px;border-radius:1px;background:rgba(255,255,255,0.22)}
.tally .marks i.on{background:var(--gold)}
.tally .tally-num{color:#fff;font-size:0.95rem;line-height:1.4;margin:0}
.donate-right .tally .tally-num{color:#fff;font-size:0.95rem;margin:0}
.tally .tally-num b{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:700;
  color:var(--gold);margin-right:6px}
.tally .tally-when{color:#ddd0e4;font-size:0.85rem;line-height:1.45;margin:6px 0 0}
@media(max-width:560px){.tally .marks{grid-template-columns:repeat(20,1fr);gap:2px}
  .tally .marks i{height:12px}}

.donate-right .donate-note+.donate-note{margin-top:10px}
@media(max-width:560px){.donate-right .amt-row{gap:8px}a.amt{padding:12px 6px}}

/* `.btn-ghost` is ink on transparent with an ink border, and `.callout` is a
   panel of solid ink, so a ghost button inside one is invisible. Every stacked
   CTA on the petition and Ledger pages sits in a callout. */
.callout .btn-ghost{color:var(--paper);border-color:rgba(246,239,227,0.55)}
.callout .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* Utility */
.narrow{max-width:70ch}
.muted{color:var(--ink-soft)}
.small{font-size:0.88rem}
.stack-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}

/* ============================================================
   MOBILE. Every section rule above uses padding-block, so none of them can
   reset .wrap's inline padding the way the `padding: X 0` shorthand did.
   ============================================================ */
@media(max-width:560px){
  .wrap{padding:0 20px}
  .nav-inner{padding:13px 20px}

  /* Vertical rhythm scaled down. Desktop spacing on a 390px screen reads as
     dead air and pushes the actual ask below three thumb scrolls. */
  .hero{padding-top:40px}
  .doors{padding-block:52px}
  .story{padding-block:8px 56px}
  .issues{padding-block:56px}
  .petition{padding-block:56px}
  .donate{padding-block:8px 60px}
  .sec{padding-block:44px}
  .sec-tight{padding-block:32px}
  .pagehead{padding:40px 0 34px}
  .sec .sub,.pagehead .sub{margin-bottom:24px}
  .doors .head{margin-bottom:28px}

  /* Panels that supply their own inset get tighter, so the text inside them
     lines up closer to the page gutter instead of double-indenting. */
  .callout{padding:30px 22px}
  .loc{padding:26px 22px}
  .petition-inner{padding:32px 22px}
  .donate-inner{padding:34px 22px}
  .story-body{padding:32px 22px}

  /* Full-width primary actions. Side-by-side buttons at this width leave
     awkward stubs and small tap targets. */
  .stack-cta{gap:10px}
  .stack-cta .btn,
  .cf button[type="submit"],
  .loc .btn{width:100%;text-align:center}
  .btn{padding:14px 22px}

  .cf{gap:14px}
  .checklist li{padding-left:34px}
}

/* Touch sizing applies from the point the nav collapses, not from 560px, so
   tablets get the same 44px minimum as phones. Vertical padding only, so
   nothing gets wider and risks overflow on a narrow phone. */
@media(max-width:900px){
  .nav-links .lang{padding-block:12px}
  .nav-links .btn{padding-block:12px}
  /* <button> does not inherit the body line-height the way <a class="btn">
     does, so the form submits came out 41px against the anchors' 47px. */
  .cf button[type="submit"]{min-height:44px}
}

/* Below ~385px the nav cannot fit the brand, the language switch and the CTA
   on one line. Let the brand wrap instead of dropping either control: Español
   matters on this corridor, and the CTA is the only donate entry point up top. */
@media(max-width:400px){
  .nav-inner{gap:10px}
  .brand{white-space:normal;min-width:0;line-height:1.18}
  .nav-links{flex:0 0 auto}
}

/* Business photo on a directory card. Fixed aspect so a grid of them stays a
   grid whatever shape the owners uploaded. */
.loc .locshot{display:block;margin:-30px -26px 16px;background:var(--paper);
  aspect-ratio:16/10;overflow:hidden}
/* The window stays 16:10 for every card so the grid holds its shape. Which part
   of the photo shows through it is set per business and arrives inline. */
.loc .locshot img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.loc.primary .locshot{margin-top:-30px}

/* Photo control on the weekly reporting page. */
.photo{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-top:18px}
.photoshot{flex:0 0 230px;width:230px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  background:var(--paper-2);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center}
.photoshot img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
/* Drag to choose what the card shows. The box is the card's window, so what is
   framed here is exactly what is published. */
.photoshot[data-focus]{cursor:grab;touch-action:none;border-style:solid;border-color:var(--teal)}
.photoshot[data-focus].dragging{cursor:grabbing}
.photoshot[data-focus]:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px}
.foxhint{font-size:0.82rem;color:var(--ink-soft);margin:0}
.photoside{flex:1 1 260px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.photoside .hint{margin:0}
.photomsg{font-size:0.88rem;color:var(--teal-deep);font-weight:600;margin:0;min-height:1.2em}
.photomsg.bad{color:var(--coral-deep)}
label.btn{display:inline-block}
@media(max-width:560px){
  .photoshot{flex-basis:100%;width:100%}
}

/* Admin thumbnail, so nobody verifies a photo they have not seen. */
.bizshot{display:block;width:100%;max-width:220px;aspect-ratio:16/10;object-fit:cover;
  border-radius:6px;border:1px solid var(--line);margin:10px 0}

/* RESOURCES. Primary sources, so the page can be checked rather than believed. */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
.res{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:26px 28px;display:flex;flex-direction:column}
.restag{font-size:0.68rem;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:9px}
.res h3{font-size:1.2rem;margin:0 0 10px}
.res p{color:var(--ink-soft);font-size:0.96rem;margin-bottom:12px}
.res .resmeta{font-size:0.87rem;margin-bottom:16px}
.res .resmeta a{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.res .btn{margin-top:auto;align-self:flex-start}
/* This card's two links ARE its action, so they get real tap targets rather
   than 17px of inline text. */
.res .reslinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;margin-bottom:0}
.res .reslinks .btn{margin-top:0;padding:10px 16px;font-size:0.84rem}

/* Burnham sits apart on purpose: it is context, not something the Ledger
   measures, and it should not read as another tracked project. */
.heads{margin-top:22px;background:var(--paper-2);border:1.5px dashed var(--line);
  border-radius:8px;padding:28px 30px}
.heads .restag{color:var(--plum)}
.heads h3{font-size:1.28rem;margin:0 0 10px}
.heads p{color:var(--ink-soft);max-width:78ch;margin-bottom:12px}
.heads .resmeta{font-size:0.88rem;font-style:italic;margin-bottom:18px}
@media(max-width:760px){
  .res-grid{grid-template-columns:1fr}
  .res{padding:22px 20px}
  .heads{padding:22px 20px}
}

/* WHAT IS COMING. A schedule, so it reads as rows rather than cards: the eye
   should run down the dates, which is the column a business actually scans. */
.next{display:flex;flex-direction:column;gap:0;margin-top:26px;
  border-top:1px solid var(--line)}
.nextrow{display:grid;grid-template-columns:15rem 1fr;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
/* Three sizes and one colour do the work here. The date is the biggest thing
   in the row because it is what a business scans for; the block name is next;
   everything after it is support. The left rule is coloured by project so the
   agencies are distinguishable before any of it is read. */
.nextrow{border-left:3px solid var(--line);padding-left:18px}
.nextrow.nx-water{border-left-color:var(--teal)}
.nextrow.nx-streetscape{border-left-color:var(--coral)}
.nextrow.nx-xcel{border-left-color:var(--gold)}
.nextrow.nx-other{border-left-color:var(--plum)}
.nextwhen b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.46rem;
  font-weight:600;color:var(--ink);line-height:1.12}
.nextwhen span{display:block;font-size:0.84rem;color:var(--ink-soft);margin-top:6px}
.nextwhat h3{font-size:1.1rem;margin:0 0 9px}
.nextwhat p{color:var(--ink-soft);font-size:0.95rem;margin:0}
.nexttags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px !important}
.nextkind,.nextproj{font-size:0.7rem;font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;padding:4px 10px;border-radius:20px;white-space:nowrap}
.nextkind{background:var(--ink);color:var(--paper)}
.nx-water .nextproj{background:#e4f2f0;color:var(--teal-deep);border:1px solid var(--teal)}
.nx-streetscape .nextproj{background:#fbe6e0;color:var(--coral-deep);border:1px solid var(--coral)}
.nx-xcel .nextproj{background:#f7edd8;color:#8a6520;border:1px solid var(--gold)}
.nx-other .nextproj{background:#ece4ef;color:var(--plum);border:1px solid var(--plum)}
.nextwhat .nextsrc{font-size:0.82rem;margin-top:9px;opacity:0.8}
.nextsrc a{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  .nextrow{grid-template-columns:1fr;gap:10px;padding:18px 0 18px 14px}
  .nextwhen b{font-size:1.3rem}
}

/* THE IMPACT, IN NUMBERS. Named businesses on the left because they are the
   receipts; the corridor total beside them because that is the claim; block
   figures underneath because they are the breakdown of both. */
.nums{margin-top:30px}
.nums[hidden]{display:none}
.numweek{border-top:1px solid var(--line);padding-top:26px;margin-top:26px}
.numweek.lead{border-top:none;padding-top:0;margin-top:0}
.numhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:18px}
.numwk{font-size:0.72rem;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;color:var(--coral-deep)}
.numnotehd{font-size:0.9rem;color:var(--ink-soft)}
.numsub{font-size:0.7rem;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px;font-family:'Inter',system-ui,sans-serif}

.numcols{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:start}

.numrows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.numrow{display:grid;grid-template-columns:1fr 8.5rem 8.5rem;gap:12px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
/* Names the two columns. Without it the row is a business and two unexplained
   percentages. */
.numrow.numhdr{padding:8px 0;border-bottom:1px solid var(--line)}
.numcol{display:flex;align-items:center;gap:7px;font-size:0.7rem;font-weight:700;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-soft)}
.numcol .numicon{width:16px;height:16px;flex:0 0 auto;color:var(--teal-deep)}
.numwho{font-weight:600;color:var(--ink)}
.numval{font-size:0.95rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.numval.down{color:var(--coral-deep);font-weight:600}
.numval.up{color:var(--teal-deep);font-weight:600}
.numnote{grid-column:1 / -1;font-size:0.88rem;color:var(--ink-soft);margin:4px 0 0;font-style:italic}
.numempty{font-size:0.92rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px;margin:0}

/* The corridor figure. Stands apart from the per business rows because it is a
   different kind of claim: it includes shops that will never appear by name. */
.numoverall{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.numoverall .numsub{margin-bottom:14px}
.numstat{display:flex;align-items:flex-start;gap:12px}
.numstat + .numstat{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.numstat > .numicon{width:22px;height:22px;flex:0 0 auto;margin-top:6px;color:var(--teal-deep)}
.numstat.count > .numstatbody{margin-left:34px}
.numstat b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.85rem;
  font-weight:600;line-height:1.05;color:var(--ink)}
.numstat span{display:block;font-size:0.82rem;color:var(--ink-soft);margin-top:4px}
.numstat.down b{color:var(--coral-deep)}
.numstat.up b{color:var(--teal-deep)}

.numsegs{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.numsegs .numhdr{display:grid;grid-template-columns:1fr 8.5rem 8.5rem;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.numseg{display:grid;grid-template-columns:1fr 8.5rem 8.5rem;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.numsegname{font-weight:600;color:var(--ink)}
.numseg.thin{grid-template-columns:1fr auto}
.numseg.thin .numsegname{color:var(--ink-soft);font-weight:500}
.numsegwait{font-size:0.85rem;color:var(--ink-soft);font-style:italic;text-align:right}
.numearlier{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:38px}
.numweek:not(.lead) .numstat b{font-size:1.3rem}

@media(max-width:860px){
  .numcols{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  .numrow,.numseg,.numseg.thin{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .numsegwait{text-align:left}
  /* Stacked, a column header cannot sit above anything, so the values label
     themselves with the same two words. */
  .numrow.numhdr,.numsegs .numhdr{display:none}
  .numval::before{content:attr(data-col) " ";font-size:0.72rem;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)}
}

/* GET THE NUMBERS. The list, collected in the window between petitioning
   closing and donations opening, which is when a visit converts into nothing
   else. */
.upd-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.upd-copy h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:14px}
.upd-copy .sub{max-width:46ch;margin-bottom:14px}
.upd-copy .small{max-width:46ch}
.upd-form{margin-top:0;max-width:none}
.upd-form .check{margin:0}
.upd-form .hint{margin-top:2px}
@media(max-width:820px){
  .upd-inner{grid-template-columns:1fr;gap:28px}
}