/* Save Our Parking Lot — parody site
   Two voices, two materials:
   .sign   = the campaign impression (regulatory parking-sign vernacular)
   .ballot = the fine print, which is real (sample-ballot vernacular)
*/
:root{
  --asphalt:#2A2C2E; --asphalt-2:#34373A;
  --paint:#F2F0E8;            /* stall-line white */
  --curb:#F2C01E;             /* painted curb yellow */
  --sign-green:#0A6B45; --sign-red:#C3241B; --p-blue:#1457A8;
  --concrete:#E6E5E0; --joint:#CBC9C1;
  --sea:#1FA7A0; --sand:#E3D3AE;
  --ink:#15171A; --ink-2:#4B4F54;
  --display:'Saira Stencil One','Overpass',Impact,sans-serif;
  --text:'Overpass','Helvetica Neue',Arial,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--concrete);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--p-blue);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--curb);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--text);font-weight:900;line-height:1.05;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.5rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.75rem);max-width:22ch}
h3{font-size:1.25rem;line-height:1.2;letter-spacing:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.measure{max-width:64ch}
.big{font-size:1.3rem;line-height:1.45;font-weight:600}

/* curb: the parody notice */
.curb{background:var(--curb);color:#000;font-weight:700;font-size:.85rem;text-align:center;padding:9px 16px;line-height:1.35}

/* nav */
.nav{background:var(--concrete);border-bottom:2px solid var(--joint);position:sticky;top:0;z-index:20}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:900;line-height:1.05}
.brand small{display:block;font-weight:600;font-size:.72rem;color:var(--ink-2)}
.p-mark{width:34px;height:34px;border-radius:7px;background:var(--p-blue);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.35rem;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px var(--p-blue)}
.nav ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:4px 18px;flex-wrap:wrap}
.nav li a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;padding:4px 0;border-bottom:3px solid transparent}
.nav li a:hover{border-color:var(--joint)}
.nav li a[aria-current]{border-color:var(--curb)}

/* hero: the lot, seen from above */
.shore{height:14px;background:var(--sea)}
.shore+.shore{height:10px;background:var(--sand)}
.lot{background:
  radial-gradient(1200px 500px at 70% 10%,rgba(255,255,255,.05),transparent 60%),
  var(--asphalt);color:var(--paint);position:relative;overflow:hidden}
.shore-note{font-size:.8rem;color:rgba(242,240,232,.7);text-align:right;padding-top:8px;margin:0}
.stalls{height:96px;background:repeating-linear-gradient(90deg,var(--paint) 0 5px,transparent 5px 92px);opacity:.85}
.stalls.top{border-bottom:5px solid var(--paint);margin-top:6px}
.stalls.bottom{border-top:5px solid var(--paint)}
.aisle{padding:56px 0 60px}
.pavement{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.5rem,11.5vw,9.25rem);line-height:.92;letter-spacing:.01em;color:var(--paint);margin:0}
.pavement .struck{position:relative;display:inline-block;color:rgba(242,240,232,.42)}
.pavement .struck::after{content:"";position:absolute;left:-2%;top:38%;height:.12em;width:104%;background:var(--curb);transform-origin:left;animation:paint .7s .5s cubic-bezier(.6,.1,.2,1) both}
.pavement .fresh{color:var(--curb)}
@keyframes paint{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lot .lede{font-size:1.25rem;line-height:1.5;max-width:56ch;margin:28px 0 0;color:var(--paint)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* guide-sign buttons */
.btn{display:inline-block;background:var(--sign-green);color:#fff;text-decoration:none;font-weight:800;padding:12px 20px;border-radius:9px;box-shadow:inset 0 0 0 3px var(--sign-green),inset 0 0 0 5px #fff}
.btn:hover{background:#085637}
.btn.alt{background:#fff;color:#000;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #000}

/* page head for inner pages: a strip of lot */
.pagehead{background:var(--asphalt);color:var(--paint);padding:0 0 44px}
.pagehead .stalls{height:44px;margin-bottom:40px;border-bottom:5px solid var(--paint)}
.pagehead p{max-width:60ch;font-size:1.2rem;margin:18px 0 0}

/* sections, divided by expansion joints */
.slab{padding:68px 0;border-bottom:2px solid var(--joint)}
.slab>.wrap>h2{margin-bottom:22px}

/* the key */
.key{align-items:start;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
.key p{margin:0}

/* SIGN: campaign voice */
.sign{background:#fff;color:var(--sign-red);border-radius:14px;padding:26px 26px 24px;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px var(--sign-red),0 2px 0 rgba(0,0,0,.18);position:relative}
.sign h3{text-transform:uppercase;font-size:1.45rem;line-height:1.08;letter-spacing:.005em;margin-bottom:10px}
.sign p{color:#2a0907;font-weight:600}
.sign p:last-child{margin-bottom:0}
.sign.green{color:var(--sign-green);box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px var(--sign-green),0 2px 0 rgba(0,0,0,.18)}
.sign.green p{color:#062d1e}
.who{font-size:.8rem;font-weight:800;margin:0 0 8px}

/* BALLOT: the fine print */
.ballot{background:#fff;color:#000;border:2px solid #000;font-size:.98rem;line-height:1.5}
.ballot header{background:#000;color:#fff;padding:8px 16px;font-weight:800;font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ballot .body{padding:18px 18px 16px}
.ballot h3{font-size:1.05rem;margin-bottom:8px}
.ballot ul{list-style:none;margin:0 0 12px;padding:0}
.ballot li{position:relative;padding-left:34px;margin-bottom:8px}
.ballot li::before{content:"";position:absolute;left:0;top:.35em;width:22px;height:12px;border:2px solid #000;border-radius:50%;background:#000}
.ballot li.no::before{background:#fff}
.ballot .src{font-size:.82rem;color:#333;margin:0;border-top:1px solid #000;padding-top:10px}
.vote{display:flex;gap:22px;font-weight:800;margin:0 0 12px}
.vote span{display:inline-flex;align-items:center;gap:8px}
.vote i{width:24px;height:13px;border:2px solid #000;border-radius:50%;display:inline-block}
.vote i.on{background:#000}

/* pairing a sign with its fine print */
.pair{display:grid;grid-template-columns:5fr 7fr;gap:22px;align-items:start;margin-top:26px}
.q{font-family:var(--display);font-size:3.5rem;line-height:1;color:var(--ink);margin:56px 0 -8px}
.q:first-of-type{margin-top:30px}
.q small{font-family:var(--text);font-weight:800;font-size:1.05rem;letter-spacing:0;margin-left:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}
.stack{display:grid;gap:16px}

/* timeline */
.years{margin-top:30px;border-left:5px solid var(--ink);padding-left:0}
.year{align-items:start;display:grid;grid-template-columns:150px 5fr 6fr;gap:22px;padding:0 0 40px 24px;position:relative}
.year::before{content:"";position:absolute;left:-13px;top:14px;width:21px;height:21px;border-radius:50%;background:var(--curb);border:4px solid var(--ink)}
.year .yr{font-family:var(--display);font-size:2.6rem;line-height:1}
.year .yr small{display:block;font-family:var(--text);font-size:.8rem;font-weight:700;color:var(--ink-2);margin-top:6px}

/* letter */
.letter{background:#fff;border:1px solid var(--joint);padding:clamp(24px,5vw,56px);max-width:70ch;font-size:1.08rem}
.letter .sig{font-weight:900;font-size:1.2rem;margin-top:22px}
.tally{list-style:none;margin:0;padding:0}
.tally li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dotted #000}
.tally b{font-variant-numeric:tabular-nums}
.letter-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,4fr);gap:28px;align-items:start}

/* faq */
.faq{margin-top:26px;display:grid;gap:14px;max-width:80ch}
.faq details{background:#fff;border:2px solid #000}
.faq summary{cursor:pointer;font-weight:800;padding:14px 18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:900}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px;margin:0}

footer{background:var(--asphalt);color:var(--paint);padding:0 0 56px}
footer .stalls{height:40px;border-bottom:5px solid var(--paint);margin-bottom:40px}
footer a{color:var(--curb)}
.foot{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
.foot p{max-width:70ch;font-size:.9rem;color:rgba(242,240,232,.82)}
.foot .name{font-family:var(--display);font-size:1.6rem;text-transform:uppercase;color:var(--paint);margin-bottom:10px}
.todo{background:var(--curb);color:#000;padding:0 4px}

@media(max-width:860px){
  .pair,.grid3,.grid2,.key,.letter-grid{grid-template-columns:1fr}
  .year{grid-template-columns:1fr;gap:12px}
  .nav ul{margin-left:0}
  .stalls{height:60px}
  .aisle{padding:40px 0 44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pavement .struck::after{animation:none}
}