/* ============================================================
mobilecountydatacenters.org — shared stylesheet
"The Record" visual system (v5, 2026-07-01)
One stylesheet for every page. Component styles are namespaced
so a page only "uses" the blocks whose markup it includes.
PALETTE cool paper #EDEEEC · blue-black ink #14171A ·
gunmetal slate #1B2529 (dark sections) ·
oxblood #8A3A2E = "stalled/attention" ONLY ·
steel #3C5560 = "active/proposed". No bright accents.
TYPE Newsreader (serif headlines) · Libre Franklin (body) ·
IBM Plex Mono (labels/kickers/keys — evidentiary texture).
Load in :
============================================================ */
:root{
--paper:#EDEEEC; /* cool near-white base */
--paper-2:#E4E5E2; /* alt panel */
--paper-3:#F4F4F2; /* card face */
--ink:#14171A; /* cold blue-black */
--slate:#1B2529; /* deep gunmetal — dark sections */
--slate-2:#26333A;
--muted:#5E6763; /* secondary text */
--line:#D2D4CF; /* hairline on paper */
--line-d:rgba(255,255,255,.18); /* hairline on dark */
--alert:#8A3A2E; /* oxblood — "stalled / attention" ONLY */
--steel:#3C5560; /* desaturated steel — "active / proposed" */
--wrap:1160px;
--serif:"Newsreader",Georgia,"Times New Roman",serif;
--sans:"Libre Franklin",system-ui,-apple-system,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:760px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.008em}
::selection{background:var(--slate);color:var(--paper)}
/* mono kicker / dossier label */
.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:500;color:var(--muted)}
.kicker .br{color:var(--line)}
/* buttons — understated, squared */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.005em;padding:13px 22px;border-radius:0;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:opacity .15s,background .15s}
.btn:hover{opacity:.86}
.btn.line{background:transparent;color:var(--ink)}
.btn.on-dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.line.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn.line.on-dark:hover{background:rgba(255,255,255,.08);opacity:1}
.btn .arw{font-size:15px;line-height:1}
/* ── header ───────────────────────────────────────────────
Default = solid slate bar (interior pages).
Add class "overlay" for the home hero (transparent, absolute). */
header.site{background:var(--slate)}
header.site.overlay{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent}
.bar{display:flex;align-items:center;justify-content:space-between;height:74px;color:#fff}
header.site.overlay .bar{height:82px}
.logo{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:-.01em}
.logo .sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);display:block;margin-top:2px;font-weight:400}
nav.main{display:flex;align-items:center;gap:30px}
nav.main a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78)}
nav.main a:hover{color:#fff}
.navbtn{border:1px solid rgba(255,255,255,.45);padding:9px 15px;border-radius:0;color:#fff !important}
/* ── mobile menu (hamburger) ─────────────────────────────── */
.menu-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:none;border:1px solid rgba(255,255,255,.45);padding:0;cursor:pointer;flex-shrink:0;transition:background .15s}
.menu-btn:active{background:rgba(255,255,255,.1)}
.menu-btn span{display:block;width:18px;height:2px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
.bar{flex-wrap:wrap;height:auto;min-height:74px;padding-top:16px;padding-bottom:16px}
header.site.overlay .bar{height:auto;min-height:82px}
.menu-btn{display:flex}
header.site.menu-open{background:var(--slate)}
nav.main{order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
nav.main.open{max-height:420px}
nav.main a:not(.navbtn){display:block;width:100%;padding:15px 2px;border-bottom:1px solid var(--line-d);font-size:12.5px}
nav.main .navbtn{display:inline-flex;align-self:flex-start;margin:18px 2px 10px}
}
/* Tagline stays put at every width — it just shrinks and is free to
wrap to its own line(s) under the title. The logo block can grow
taller than the hamburger without disturbing it (row stays
vertically centered), and min-width:0 lets the text actually wrap
instead of pushing the button off the row. */
@media(max-width:860px){
.logo{flex:0 1 auto;width:calc(100% - 58px);font-size:18px}
.logo .sub{font-size:9.5px;letter-spacing:.1em;line-height:1.45}
}
@media(max-width:420px){
.logo{font-size:16px}
.logo .sub{font-size:8.5px;letter-spacing:.06em}
}
/* ── hero (home) — full-bleed, grave ─────────────────────── */
.hero{position:relative;min-height:94vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--slate)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(.35) contrast(1.02)}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,18,20,.78) 0%,rgba(12,18,20,.42) 42%,rgba(12,18,20,.9) 100%)}
.hero .inner{position:relative;z-index:2;padding:0 0 40px;max-width:860px}
.hero .kicker{color:rgba(255,255,255,.72);margin-bottom:26px}
.hero h1{color:#fff;font-size:clamp(33px,5.1vw,60px);line-height:1.1;font-weight:400;margin:0 0 26px;max-width:17ch;letter-spacing:-.012em}
.hero p.lede{color:rgba(255,255,255,.9);font-size:19px;line-height:1.62;max-width:62ch;margin:0 0 34px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .meta{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);margin-top:44px;padding:20px 0 30px;display:flex;gap:36px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero .meta b{color:rgba(255,255,255,.9);font-weight:500}
/* ── section frame ───────────────────────────────────────── */
section{padding:100px 0}
.lbl-row{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.lbl-row::after{content:"";height:1px;flex:1;background:var(--line)}
h2.head{font-size:clamp(28px,3.5vw,43px);line-height:1.12;margin:0;max-width:22ch;letter-spacing:-.01em}
.intro-2{max-width:62ch;color:var(--muted);font-size:17.5px;margin:16px 0 46px}
/* ── prose (interior body copy) ──────────────────────────── */
.prose p{font-size:18px;line-height:1.7;max-width:70ch;margin:0 0 20px}
.prose p .src{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em;vertical-align:super;padding-left:2px}
section p .src{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em;vertical-align:super;padding-left:2px}
/* ── stakes (home) ───────────────────────────────────────── */
.stakes .cols{display:grid;gap:52px;margin-top:6px}
@media(min-width:900px){.stakes .cols{grid-template-columns:1.05fr .95fr;align-items:start}}
.stakes p{font-size:18.5px;line-height:1.7;color:var(--ink);margin:0 0 20px;max-width:58ch}
.stakes p.sub{color:var(--muted);font-size:16.5px}
/* ── stat ledger ─────────────────────────────────────────── */
.ledger{border-top:1px solid var(--ink);margin-top:66px}
.lrow{display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.lrow .idx{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);padding-top:10px}
.lrow .n{font-family:var(--serif);font-size:clamp(30px,4vw,42px);font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.02em}
.lrow .l{font-size:15.5px;color:var(--muted);text-align:right;max-width:34ch;justify-self:end}
@media(max-width:680px){.lrow{grid-template-columns:1fr;gap:6px}.lrow .l{text-align:left;justify-self:start}.lrow .idx{padding-top:0}}
/* ── proposals cards (home) ──────────────────────────────── */
.proposals{background:var(--paper-2)}
.grid2{display:grid;gap:24px}
@media(min-width:880px){.grid2{grid-template-columns:1fr 1fr}}
.pcard{background:var(--paper-3);border:1px solid var(--line);border-radius:0;padding:34px;display:flex;flex-direction:column}
.pcard .region{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:500;color:var(--muted)}
.pcard h3{font-size:26px;margin:14px 0 5px;line-height:1.14;font-weight:500}
.pcard .addr{color:var(--muted);font-size:15px;margin:0 0 22px}
.pcard table{width:100%;border-collapse:collapse;margin-bottom:28px}
.pcard td{border-top:1px solid var(--line);padding:13px 0;font-size:15px;vertical-align:top}
.pcard td.k{color:var(--muted);width:44%;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding-top:15px}
.pcard td.v{text-align:right;font-weight:500}
.pcard .go{margin-top:auto}
.pcard .go .btn{width:100%;justify-content:space-between}
/* ── status marker (squared swatch) ──────────────────────── */
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;color:var(--muted)}
.status .d{width:8px;height:8px;border-radius:0;background:var(--muted)}
.status.stalled{color:var(--alert)}.status.stalled .d{background:var(--alert)}
.status.proposed{color:var(--steel)}.status.proposed .d{background:var(--steel)}
/* ── issues list — grave dark section ────────────────────── */
.issues{background:var(--slate);color:var(--paper)}
.issues .lbl-row::after{background:var(--line-d)}
.issues .kicker{color:rgba(255,255,255,.6)}
.issues h2.head{color:#fff}
.issues .intro-2{color:rgba(255,255,255,.74)}
.ilist{margin-top:14px;border-top:1px solid var(--line-d)}
.irow{display:grid;grid-template-columns:52px 230px 1fr;gap:26px;padding:28px 0;border-bottom:1px solid var(--line-d);align-items:baseline}
.irow .num{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.05em}
.irow h3{font-size:21px;color:#fff;margin:0;font-weight:500}
.irow p{margin:0;color:rgba(255,255,255,.76);font-size:16px;line-height:1.56}
@media(max-width:720px){.irow{grid-template-columns:36px 1fr;gap:6px 18px}.irow p{grid-column:1/-1}}
/* ── signup — quiet ──────────────────────────────────────── */
.signup .box{border-top:2px solid var(--ink);padding-top:44px;display:grid;gap:44px}
@media(min-width:880px){.signup .box{grid-template-columns:1fr 1fr;align-items:start}}
.signup h2{font-size:clamp(26px,3.1vw,37px);margin:0;line-height:1.14;max-width:17ch;letter-spacing:-.01em}
.signup p.sub{color:var(--muted);margin:18px 0 0;max-width:48ch}
.signup form{display:flex;flex-direction:column;gap:12px;max-width:430px}
.signup label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:-4px}
.signup input{padding:15px 16px;border:1px solid var(--line);border-radius:0;font-size:15px;font-family:var(--sans);background:var(--paper-3)}
.signup input:focus{outline:none;border-color:var(--ink)}
.signup .btn{align-self:flex-start;margin-top:6px}
.signup .fine{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
/* ── interior page head (project / issue pages) ──────────── */
.phead{background:var(--slate);color:#fff;padding:60px 0 66px;border-top:1px solid rgba(255,255,255,.12)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:26px}
.crumb a{color:rgba(255,255,255,.6)}.crumb a:hover{color:#fff}
.phead .status{color:rgba(255,255,255,.7);margin-bottom:22px}
.phead .status .d{background:var(--steel)}
.phead .status.proposed{color:#9fb6bf}
.phead h1{font-size:clamp(32px,4.8vw,54px);line-height:1.1;margin:0 0 20px;font-weight:400;max-width:20ch;color:#fff}
.phead p.lede{font-size:19px;line-height:1.6;color:rgba(255,255,255,.86);max-width:66ch;margin:0}
.fmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:46px;border-top:1px solid rgba(255,255,255,.18);padding-top:28px}
.fmeta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px}
.fmeta .v{font-family:var(--serif);font-size:19px;color:#fff;line-height:1.25}
@media(max-width:760px){.fmeta{grid-template-columns:1fr 1fr;gap:24px}}
/* interior section headline needs bottom margin (home's does not) */
.phead ~ main h2.head,
main .stack h2.head{margin-bottom:26px}
main section p{font-size:18px;line-height:1.7;max-width:70ch;margin:0 0 20px}
/* ── spec table (interior) ───────────────────────────────── */
.spec{width:100%;border-collapse:collapse;margin:8px 0 0;max-width:720px}
.spec td{border-top:1px solid var(--line);padding:16px 0;vertical-align:top;font-size:16px}
.spec tr:last-child td{border-bottom:1px solid var(--line)}
.spec td.k{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);width:34%;padding-top:19px}
.spec td.v{font-weight:500}
/* ── claim / check two-column ────────────────────────────── */
.cc{background:var(--paper-2)}
.ccgrid{display:grid;gap:0;border-top:1px solid var(--line);margin-top:10px}
.ccrow{display:grid;gap:0;border-bottom:1px solid var(--line)}
@media(min-width:840px){.ccrow{grid-template-columns:1fr 1fr}}
.ccrow .cell{padding:28px 34px 30px}
.ccrow .claim{border-right:1px solid var(--line)}
@media(max-width:839px){.ccrow .claim{border-right:none;border-bottom:1px solid var(--line)}}
.cell .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.claim .tag{color:var(--steel)}
.check .tag{color:var(--alert)}
.cell p{font-size:16.5px;line-height:1.62;margin:0;max-width:52ch}
.cell .who{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:12px;letter-spacing:.02em}
/* ── unanswered — grave dark ─────────────────────────────── */
.open{background:var(--slate);color:var(--paper)}
.open .lbl-row::after{background:var(--line-d)}
.open .kicker{color:rgba(255,255,255,.6)}
.open h2.head{color:#fff}
.open .lede-d{color:rgba(255,255,255,.74);font-size:18px;max-width:66ch;margin:0 0 20px}
.qlist{margin-top:22px;border-top:1px solid var(--line-d)}
.qrow{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line-d);align-items:baseline}
.qrow .num{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.5)}
.qrow h3{font-size:19px;color:#fff;margin:0 0 8px;font-weight:500}
.qrow p{margin:0;color:rgba(255,255,255,.74);font-size:15.5px;line-height:1.55;max-width:64ch}
.qrow .flag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#c9a15a;margin-left:8px}
/* ── who decides ─────────────────────────────────────────── */
.commish{display:grid;gap:18px;margin:26px 0 0;max-width:720px}
.cm{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;border-top:1px solid var(--line);padding:18px 0}
.cm .dd{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:4px}
.cm .nm{font-family:var(--serif);font-size:20px}
.cm .role{font-size:14px;color:var(--muted);margin-top:2px}
.levers{margin:30px 0 0;padding:0;list-style:none;max-width:720px}
.levers li{border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:26px 1fr;gap:14px;font-size:16.5px;line-height:1.55}
.levers li:last-child{border-bottom:1px solid var(--line)}
.levers .mk{font-family:var(--mono);font-size:12px;color:var(--muted)}
.levers b{font-weight:600}
.cal{background:var(--paper-3);border:1px solid var(--line);border-radius:0;padding:26px 28px;margin-top:34px;max-width:720px}
.cal .kicker{margin-bottom:14px}
.cal-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15.5px}
.cal-row:first-of-type{border-top:none}
.cal-row .d{font-family:var(--mono);font-size:13px;color:var(--ink)}
.cal-row .w{color:var(--muted)}
/* ── take action ─────────────────────────────────────────── */
.action{background:var(--paper-2)}
.action .box{display:grid;gap:16px;max-width:760px}
.action .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
/* tip form (About) — mirrors the signup form styling */
#tip-form{display:flex;flex-direction:column;gap:12px;max-width:560px;margin-top:6px}
#tip-form label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:-4px}
#tip-form textarea,#tip-form input{padding:15px 16px;border:1px solid var(--line);border-radius:0;font-size:15px;font-family:var(--sans);background:var(--paper-3);width:100%;box-sizing:border-box}
#tip-form textarea{resize:vertical;min-height:130px;line-height:1.5}
#tip-form textarea:focus,#tip-form input:focus{outline:none;border-color:var(--ink)}
#tip-form .btn-row{margin-top:8px}
#tip-form .fine{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.5}
/* ── sources ─────────────────────────────────────────────── */
.sources{padding-bottom:96px}
.slist{margin:10px 0 0;padding:0;list-style:none;counter-reset:s}
.slist li{counter-increment:s;border-top:1px solid var(--line);padding:16px 0 16px 42px;position:relative;font-size:15px;line-height:1.55;color:var(--muted)}
.slist li:last-child{border-bottom:1px solid var(--line)}
.slist li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:var(--mono);font-size:12px;color:var(--ink)}
.slist li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.slist li a:hover{text-decoration-color:var(--ink)}
.slist .flag{font-family:var(--mono);font-size:10px;color:#9a7a2e;letter-spacing:.04em}
/* ── footer ──────────────────────────────────────────────── */
footer.site{background:var(--ink);color:rgba(255,255,255,.62);padding:60px 0 66px;font-family:var(--mono);font-size:12px;letter-spacing:.03em}
footer .disclaimer{font-family:var(--serif);font-size:16.5px;line-height:1.68;color:rgba(255,255,255,.74);max-width:82ch;margin:0 0 34px;letter-spacing:0}
footer a{color:rgba(255,255,255,.9)}
footer a:hover{color:#fff}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid rgba(255,255,255,.16);padding-top:24px;text-transform:uppercase;letter-spacing:.06em}
footer .fnav a{margin-left:22px}
/* ── TODO flag (research still to fill) ──────────────────── */
.todo{background:#f3ead0;border:1px dashed #c7ab63;color:#6f591d;font-size:10px;padding:1px 6px;border-radius:0;font-weight:500;font-family:var(--mono);letter-spacing:.02em;text-transform:none}