/* Jerk Alert — /states/<name> shared styles.
   Every class is namespaced st-* on purpose: kit.css owns .wrap, .nav, .hero, .card and .btn
   as site components, and .wrap's mobile gutters carry !important. Do not add unprefixed
   classes here. Copies: website/states/ -> _deploy/2-bluehost-public_html/states/
   16 Sep 2026 (owner): Source Sans 3 for every heading, eyebrow and label on the state pages — --st-display,
   weights 600/700 only (no 900). Body stays Hanken Grotesk via --font-body. The brand mark in .st-nav keeps
   Nunito. Loaded from Google Fonts the same way colors_and_type.css loads Nunito/Hanken. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@600;700&display=swap');
/* 16 Sep 2026 contrast pass (owner): reading text on these pages is --st-ink (deep charcoal, 14.6:1 on white),
   set at weight 500 so Hanken's thin 400 stroke stops reading as grey; secondary text is --st-ink-2 (8.6:1),
   never lighter, and nothing explanatory is under 15px. --fg2 survives only on decorative labels/eyebrows. */
.st-wrap,.st-head,.st-body,.st-look,section.st-blk{--st-display:'Source Sans 3',var(--font-body);--st-ink:#1B2226;--st-ink-2:#3A4A52;--st-alert-ink:#B8300A}
.st-body,.st-head{color:var(--st-ink);font-weight:500}
.st-wrap{width:100%;max-width:768px;margin:0 auto;padding:0 24px}
.st-nav{border-bottom:1px solid var(--line);background:#fff}
.st-nav .st-inner{max-width:768px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.st-nav a.st-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:900;font-size:19px;color:var(--fg1);text-decoration:none}
.st-nav .st-links{display:flex;gap:6px}
.st-nav .st-links a{display:inline-flex;font-size:13.5px;font-weight:800;color:var(--fg2);min-height:44px;align-items:center;padding:0 10px;text-decoration:none}
.st-nav .st-links a:hover{color:var(--ja-alert)}
.st-crumb{padding:16px 0 0;font-size:14px;color:var(--st-ink-2);font-weight:600}
.st-crumb a{color:var(--st-ink-2);text-decoration:none}
.st-crumb a:hover{color:var(--ja-alert)}
.st-crumb span{margin:0 6px;color:var(--line-strong)}
.st-911bar{margin:14px 0 0;padding:13px 18px 13px 16px;border-left:4px solid var(--ja-alert);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--ja-alert-tint);font-size:16px;line-height:1.5;font-weight:500;color:var(--st-ink);text-wrap:pretty}
.st-911bar strong{font-family:var(--st-display);font-weight:700;font-size:17px;color:var(--st-alert-ink);margin-right:4px}
/* 15 Sep 2026 restructure: head = H1 + checked line + the three-path Q&A; the plate art moved into the
   lookup panel; below the head a two-column body at >=960px (guide left, lookup + recent + neighbours right;
   single column in source order on phones: lookup, guide, recent, neighbours). */
.st-head{padding:22px 0 30px}
.st-head h1{font-family:var(--st-display);font-weight:700;font-size:clamp(30px,4.8vw,42px);line-height:1.08;letter-spacing:-.015em;color:var(--st-ink);margin:0 0 8px}
.st-head .st-answer{font-size:17px;line-height:1.5;color:var(--st-ink-2);margin:0;text-wrap:pretty}
/* The plate sits at the top of the page in a bumper, spanning the column (16 Sep 2026, owner).
   Same treatment as SitePlateDisplay.jsx's gallery bumper — dark ground, gradient bumper with a specular
   roll, body crease and ends rolling away, a recessed pocket and an aluminium dealer frame — ported to
   plain CSS here (the JSX version is React-only). Gradients only: nothing extra to load. */
.st-plate{position:relative;margin:18px 0 2px;padding:0;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,#05070a 0%,#07090d 52%,#14171b 86%,#1c2126 100%);display:flex;align-items:center;justify-content:center}
.st-bump{position:relative;width:112%;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:5% 5% 4.5%;border-radius:30px 30px 18px 18px;background:linear-gradient(180deg,#8d9aa7 0%,#63707d 7%,#4a5561 22%,#3c4650 50%,#2b333b 78%,#1d232a 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -26px 40px rgba(0,0,0,.45),0 26px 32px -12px rgba(0,0,0,.9)}
.st-bump::before{content:"";position:absolute;left:0;right:0;top:0;height:20%;border-radius:30px 30px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 60%,rgba(255,255,255,0))}
.st-bump::after{content:"";position:absolute;inset:0;border-radius:30px 30px 18px 18px;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.62))}
.st-pocket{position:relative;z-index:2;width:100%;max-width:560px;flex-shrink:0;padding:13px 15px 16px;border-radius:9px;background:linear-gradient(180deg,#10151a 0%,#1b222a 55%,#242c35 100%);box-shadow:inset 0 5px 12px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.07)}
.st-frame{position:relative;width:100%;padding:6px 6px 15px;border-radius:6px;background:linear-gradient(160deg,#c8c8c8 0%,#909090 40%,#a8a8a8 60%,#c0c0c0 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -3px 5px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.75)}
.st-frame::after{content:"JERKALERT.ORG";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-family:var(--font-mono),monospace;font-size:8px;color:#555;letter-spacing:1.5px;white-space:nowrap}
.st-plate img{width:100%;height:auto;display:block;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.st-plate .st-cap{margin:0;font-size:14px;color:var(--st-ink-2);line-height:1.5}
/* 16 Sep 2026 (owner): ONE column — the lookup panel, the guide, recent reports and neighbouring states all sit
   in the main reading column in source order. No sidebar at any width. The 760px reading measure caps the
   CONTENTS, never .st-body itself: that element also carries .st-wrap (1040 + auto margins + 24px gutter), so a
   max-width there would centre the whole column and give the page two different left edges. */
.st-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.st-main{min-width:0}
.st-look{background:var(--bg-warm);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px 22px;margin:4px 0 0}
.st-look h2{font-family:var(--st-display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--st-ink)}
.st-look .st-lead-p{margin:0 0 14px;font-size:15.5px;line-height:1.5;color:var(--st-ink)}
.st-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.st-form .st-field{flex:1 1 200px;min-width:0}
.st-form label{display:block;font-family:var(--st-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-ink-2);margin:0 0 6px}
.st-form input{font-family:var(--st-display);font-weight:700;font-size:19px;letter-spacing:.08em;text-transform:uppercase;padding:13px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--fg1);width:100%;min-height:52px}
.st-form input::placeholder{color:var(--fg3);font-weight:600;letter-spacing:.04em;text-transform:none}
.st-form input:focus{outline:none;border-color:var(--ja-teal);box-shadow:0 0 0 3px rgba(21,103,125,.18)}
.st-form input:focus-visible,button.st-btn:focus-visible,.st-nearby a:focus-visible,.st-qa a:focus-visible,.st-nav a:focus-visible,.st-crumb a:focus-visible{outline:3px solid var(--ja-teal);outline-offset:2px}
button.st-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:var(--r-md);background:var(--ja-alert);color:#fff;font-family:var(--st-display);font-weight:700;font-size:17px;border:none;cursor:pointer}
button.st-btn:hover{background:var(--ja-alert-ink)}
.st-look .st-hint{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--st-ink-2)}
.st-look p{font-size:15px;line-height:1.55;color:var(--st-ink-2);margin:12px 0 0;text-wrap:pretty}
.st-look p strong{color:var(--st-ink)}
#st-result{margin:0}
#st-result .st-res{margin-top:14px;min-height:72px;background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:16px 18px}
#st-result .st-res.st-clean{border-color:var(--awesome)}
#st-result .st-res .st-rh{font-family:var(--st-display);font-weight:700;font-size:17px;margin:0 0 6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
#st-result .st-res .st-rh .st-sc{font-size:14px;color:var(--st-alert-ink)}
#st-result .st-res p{margin:0;font-size:15px;line-height:1.5;color:var(--st-ink-2)}
#st-result .st-res ul{margin:9px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
#st-result .st-res li{font-size:15px;line-height:1.45;color:var(--st-ink)}
#st-result .st-res li a.st-rl{color:var(--st-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-strong)}
#st-result .st-res li a.st-rl:hover{color:var(--ja-alert);text-decoration-color:var(--ja-alert)}
section.st-blk{padding:34px 0}
section.st-blk h2{font-family:var(--st-display);font-weight:700;font-size:clamp(21px,3vw,27px);letter-spacing:-.01em;color:var(--st-ink);margin:0 0 8px}
section.st-blk h3{font-family:var(--st-display);font-weight:700;font-size:16px;color:var(--st-ink);margin:20px 0 6px}
section.st-blk p,section.st-blk li{font-size:16px;line-height:1.6;color:var(--st-ink);text-wrap:pretty}
section.st-blk p{margin:0 0 11px}
section.st-blk ul{padding-left:21px;display:flex;flex-direction:column;gap:7px;margin:11px 0}
section.st-blk a{color:var(--ja-teal);text-decoration:underline;text-underline-offset:2px}
section.st-blk a:hover{color:var(--ja-alert)}
a{color:var(--ja-teal)}
a:hover{color:var(--ja-alert)}
.st-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0}
.st-fact{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:15px 17px;background:#fff}
.st-fact .st-k{font-family:var(--st-display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);display:block;margin-bottom:4px}
.st-fact .st-v{font-family:var(--st-display);font-weight:700;font-size:18px;line-height:1.2;display:block;color:var(--fg1)}
.st-fact .st-v .st-sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line-strong);vertical-align:-2px;margin-right:6px}
#st-feed{margin:14px 0 0}
.st-empty{border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);padding:22px;text-align:center;font-size:15px;color:var(--st-ink-2);line-height:1.5}
.st-row{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.st-row .st-pl{font-family:var(--st-display);font-weight:700;font-size:15px;letter-spacing:.06em;background:var(--bg-warm);border:1px solid var(--line-strong);border-radius:6px;padding:5px 10px;flex:none}
.st-row .st-why{font-size:15px;line-height:1.35;flex:1;min-width:0}
.st-row .st-why b{display:block;font-weight:700}
.st-row .st-why span{font-size:14px;color:var(--st-ink-2)}
.st-row .st-lv{font-family:var(--st-display);font-weight:700;font-size:14px;color:var(--st-alert-ink);flex:none}
.st-nearby{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
section.st-blk .st-nearby a,.st-nearby a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);font-family:var(--st-display);font-weight:600;font-size:14px;color:var(--fg1);text-decoration:none}
section.st-blk .st-nearby a:hover,.st-nearby a:hover{border-color:var(--ja-alert);color:var(--ja-alert);text-decoration:none}
.st-f{margin:8px 0 0;padding:22px 0 34px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--st-ink-2);text-wrap:pretty}
.st-f a{color:var(--st-ink-2);text-decoration:none}
.st-f a:hover{color:var(--ja-alert);text-decoration:underline}
/* --- the state reporting block --- */
.st-route{border:1.5px solid var(--line-strong);border-radius:var(--r-lg);padding:18px 20px;margin:14px 0 0;background:#fff}
.st-route.st-none{border-color:var(--ja-alert);background:#fff}
.st-route .st-lead{font-family:var(--st-display);font-weight:700;font-size:17px;line-height:1.35;margin:0 0 8px;color:var(--st-ink)}
.st-route p:last-child{margin-bottom:0}
.st-dl{display:grid;grid-template-columns:150px 1fr;gap:9px 18px;margin:14px 0 0;font-size:16px;line-height:1.5}
.st-dl dt{font-family:var(--st-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-ink-2);padding-top:3px}
.st-dl dd{margin:0;color:var(--st-ink)}
/* Section 3 quick facts (16 Sep 2026): question → short answer pairs, all from record fields; a row prints
   only when its field exists. Wider label column than .st-dl because the labels are questions. */
.st-qf{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:10px 22px;margin:14px 0 0;font-size:16px;line-height:1.5;padding:16px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.st-qf dt{font-family:var(--st-display);font-weight:600;font-size:16px;color:var(--st-ink-2);padding-bottom:10px}
.st-qf dd{margin:0;color:var(--st-ink);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--line)}
.st-qf dt:not(:last-of-type){border-bottom:1px solid var(--line)}
.st-qf dt:last-of-type,.st-qf dd:last-of-type{border-bottom:0}
.st-qf dd strong{font-family:var(--st-display);font-weight:700}
/* Agency process as an ordered sequence (record.process). Numbered, one line each, joined by a hairline. */
section.st-blk ol.st-steps{list-style:none;padding:0;margin:12px 0 4px;display:grid;gap:0;counter-reset:st}
.st-steps li{counter-increment:st;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.st-steps li:last-child{border-bottom:1px solid var(--line)}
.st-steps li::before{content:counter(st);font-family:var(--st-display);font-weight:700;font-size:13px;color:var(--st-ink-2);text-align:center;width:26px;height:26px;line-height:26px;border:1.5px solid var(--line-strong);border-radius:50%;display:inline-block}
/* The three paths as state-anchored status boxes (16 Sep 2026). Each div.st-qi is a box; its four lines —
   status label, answer, question, details link — sit on shared subgrid rows so they align across all three.
   Where subgrid is unsupported the boxes simply size their own rows, which still reads correctly. */
.st-qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:12px;margin:24px 0 0}
/* 17 Sep 2026 (owner): uniform cards — same white surface and hairline on all three; status is carried by a
   3px TOP border (alert colour on box 1, neutral on 2–3), not a filled background. Row 4 (the details link) is
   pinned to the bottom edge with align-self:end so the three links share one baseline. */
.st-qi{display:grid;grid-template-rows:subgrid;grid-row:1/5;align-content:start;padding:14px 16px 15px;border:1px solid var(--line);border-top:3px solid var(--line-strong);border-radius:var(--r-md);background:#fff}
.st-qi:first-child{border-top-color:var(--ja-alert)}
.st-qa dt,.st-qa dd{display:contents}
.st-qa .st-k{grid-row:1;display:block;font-family:var(--st-display);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--st-ink-2);margin:0 0 6px}
.st-qa .st-q{grid-row:2;display:block;font-family:var(--st-display);font-weight:600;font-size:15px;line-height:1.35;color:var(--st-ink-2);margin:0 0 7px}
.st-qa .st-a{grid-row:3;display:block;font-family:var(--st-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--st-ink);text-wrap:pretty}
.st-qa .st-a .st-access{font-size:15px;letter-spacing:.02em;text-transform:none;padding:5px 11px;line-height:1.3}
.st-qa a.st-more{grid-row:4;align-self:end;display:block;width:max-content;margin-top:14px;font-size:14px;font-weight:600;color:var(--st-ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--st-ink-2)}
.st-qi:first-child .st-k{color:var(--st-alert-ink)}
.st-qa .st-a strong{font-family:var(--st-display);font-weight:700;font-size:18px;line-height:1.3}
/* Multi-line patrol states (Alaska 3, Louisiana 2), 16 Sep 2026: 911 keeps the 24px display size above and
   the regional lines sit under it as a quiet stack, REGION ABOVE NUMBER — three bare numbers in a slash run
   read as random digits. The <br>s exist only so plain() gives the FAQPage answer sentence breaks; they must
   stay display:none or every row gains a blank line. Single-number states never render .st-tels. */
/* 17 Sep 2026 (owner): "Call 911." alone on line one; the patrol number or the no-code note on its own line under it
   (span.st-then). The <br> before it is schema-only (plain() sentence break) and stays hidden. */
.st-qa .st-a[data-n="1"] > br{display:none}
.st-qa .st-a[data-n="1"] .st-then{display:block;margin:8px 0 0;font-size:18px;line-height:1.3;font-weight:600;color:var(--st-ink)}
.st-qa .st-a[data-n="1"] .st-then strong{font-size:18px;line-height:1.3}
.st-qa .st-a[data-n="1"] .st-tels{display:block;margin:12px 0 0}
.st-qa .st-a[data-n="1"] .st-tels br{display:none}
.st-qa .st-a[data-n="1"] .st-tel{display:block;margin:0 0 9px}
.st-qa .st-a[data-n="1"] .st-tel i{display:block;font-style:normal;font-size:13px;line-height:1.3;font-weight:600;color:var(--st-ink-2)}
.st-qa .st-a[data-n="1"] .st-tel b{display:block;font-family:var(--st-display);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.01em}
.st-qa .st-a[data-n="1"] .st-telcap{display:block;font-size:14px;line-height:1.4;color:var(--st-ink-2)}
.st-qa .st-access{margin-bottom:6px}
.st-qa a.st-more:hover{color:var(--ja-alert);text-decoration-color:var(--ja-alert)}
.st-checked{margin:0;font-size:15px;color:var(--st-ink-2)}
.st-src{margin:20px 0 0;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-warm)}
.st-src h3,.st-src h4{font-family:var(--st-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--st-ink-2);margin:0 0 8px}
.st-src ol{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:6px}
.st-src li{font-size:15px;line-height:1.5;color:var(--st-ink-2)}
.st-src em{font-style:normal;color:var(--st-ink-2)}
.st-flag{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--st-ink-2);border-left:2px solid var(--line-strong);padding-left:14px}
/* --- the four-section guide (14 Sep 2026): h3 = numbered section, h4 = sub-block ---
   15 Sep 2026 contrast pass: no --fg3 on text smaller than 16px (3.3:1 fails AA); --fg2 everywhere it was.
   Hotline callouts are FILLED (no border) so they stop reading as text inputs; input/button/result share --r-md. */
/* 17 Sep 2026 (owner): numbered h3 = 23px, same rank and size as the prose pages' h2; question h4 = 18px so it
   clears the 16px body by a visible step (it was 16.5px — a heading the size of its paragraph). */
section.st-blk h3{font-size:23px;font-weight:700;letter-spacing:-.01em;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:16px}
section.st-blk h2+h3{margin-top:12px;padding-top:0;border-top:0}
section.st-blk h3 .st-sub{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--st-alert-ink);margin-left:8px;vertical-align:2px}
/* h4s are the sub-questions ("What information do I need…?"): sentence case, not small caps, so a question
   reads as a question. The few h4s that are still labels (Sources, Emergency hotlines) read fine the same way. */
section.st-blk h4{font-family:var(--st-display);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--st-ink);margin:22px 0 6px}
section.st-blk ul.st-hot{list-style:none;padding-left:0;gap:6px}
.st-hot li{border:0;border-radius:var(--r-md);padding:11px 15px;background:var(--bg-2)}
.st-hot li.st-911{background:var(--ja-alert-tint)}
.st-hot li strong{font-family:var(--st-display);font-weight:700;font-size:17px;letter-spacing:.02em}
.st-hot li.st-911 strong{color:var(--st-alert-ink)}
section.st-blk ul.st-rules li::marker{color:var(--ja-alert)}
.st-route .st-lbl{display:block;font-family:var(--st-display);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-ink-2);margin-bottom:6px}
.st-access{display:inline-block;font-family:var(--st-display);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;padding:3px 9px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--bg-warm);color:var(--st-ink)}
.st-access.st-no{background:var(--ja-alert-tint);border-color:var(--ja-alert);color:var(--st-ink)}
.st-access.st-yes{background:var(--awesome-tint);border-color:var(--awesome)}
section.st-blk p.st-note{font-size:15.5px;color:var(--st-ink-2)}
section.st-blk p.st-disc,.st-look p.st-disc{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
/* 17 Sep 2026: rules sit above the disclaimer inside the lookup panel — give the h4 the guide's heading treatment there too. */
.st-look h4{font-family:var(--st-display);font-weight:700;font-size:18px;line-height:1.3;color:var(--st-ink);margin:18px 0 6px}
.st-look ul.st-rules{margin:8px 0 10px;padding-left:19px;display:flex;flex-direction:column;gap:7px}
.st-look ul.st-rules li{font-size:16px;line-height:1.55;color:var(--st-ink)}
.st-look ul.st-rules li::marker{color:var(--ja-alert)}
.st-look p.st-note{font-size:15.5px;color:var(--st-ink-2);margin:0}
/* Recent reports + neighbouring states: in the main column, deliberately quieter than the guide. */
.st-side{min-width:0}
.st-side section.st-blk{padding:30px 0 0;border-top:1px solid var(--line);margin-top:34px}
.st-side section.st-blk+section.st-blk{margin-top:0;border-top:0;padding-top:26px}
.st-side section.st-blk h2{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.st-side section.st-blk p{font-size:15.5px;line-height:1.55;color:var(--st-ink-2)}
.st-side #st-feed{margin:8px 0 0}
.st-side .st-row{padding:11px 0}
.st-side .st-nearby{margin:8px 0 0}
@media(min-width:960px){.st-look{margin:4px 0 0}}
@media(max-width:959px){.st-body{padding-top:0}.st-main section.st-blk{padding-top:32px}}
@media(max-width:620px){.st-plate{border-radius:12px}.st-bump{padding:6% 5% 5.5%}.st-pocket{padding:9px 10px 11px;border-radius:7px}.st-frame{padding:5px 5px 12px}}
@media(max-width:760px){.st-qa{display:block}.st-qa dt,.st-qa dd{display:block}.st-qi{display:block;grid-row:auto;margin:0 0 10px}.st-facts{grid-template-columns:1fr}.st-dl{grid-template-columns:1fr;gap:3px 0}.st-dl dd{margin-bottom:9px}.st-qf{grid-template-columns:1fr;gap:2px 0}.st-qf dt{padding-bottom:2px;border-bottom:0!important}.st-qf dd{padding-bottom:10px;margin-bottom:8px}}
@media(max-width:480px){.st-wrap{padding:0 16px}.st-nav .st-inner{padding:14px 16px}.st-look{padding:18px 16px 20px}.st-form{flex-direction:column;align-items:stretch}.st-form .st-field{flex:none}button.st-btn{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ════════════════════════════════════════════════════════════════════════════════════════════
   16 Sep 2026 (owner) — MOBILE PASS for the 51 state pages, plus ONE larger desktop tier.
   NOTHING above this line was rewritten and no page HTML was regenerated: the generator, the
   markup, the Q&A/FAQ structure and the lookup/feed scripts are untouched. Every rule below is
   inside a media query, so the 768px desktop page renders exactly as before except where the
   >=1120px tier deliberately scales it up. Checked at 320 / 375 / 390 / 430 with
   states-data/_mobile-check.html.
   PHONE ORDER (<=700px): breadcrumb -> 911 bar -> H1 + checked line + the three status boxes ->
   the plate, small, sitting directly above the lookup panel it belongs to. The DOM still ships
   plate-then-911-bar (the generator is unchanged); this is a flex `order` on .st-wrap's children
   on phones ONLY, so the 911 warning is the first thing under the breadcrumb and the plate art
   stops eating the first screen. Do not "fix" this by moving the plate in _pagebuilder.js — the
   desktop page wants it at the top, and the app renders its own shell.
   The reorder and the plate resize are scoped to `.st-wrap:has(> .st-911bar)` and `.st-plate-hero`
   BECAUSE THE APP SHARES THIS FILE: SiteStates.jsx has no 911 bar and its plate carries no
   st-plate-hero, so the app's own head keeps its current layout. Keep any future head/plate rule
   scoped the same way. Where :has() is unsupported the page simply keeps DOM order.
   The three paths stay a <dl> of question -> answer status boxes at every width: the FAQPage node
   quotes that visible text, so the question line must never be hidden with display:none. */
/* The stacked status boxes: a <dd> keeps its default 40px inline indent once .st-qa stops using
   display:contents at 760px, which pushed every answer and access badge in off the question above it. */
@media(max-width:760px){.st-qa dd,.st-qa dt{margin:0}}
@media(max-width:700px){
.st-wrap:has(> .st-911bar){display:flex;flex-direction:column}
.st-wrap:has(> .st-911bar) > .st-crumb{order:1;padding:12px 0 0;font-size:13.5px}
.st-wrap:has(> .st-911bar) > .st-911bar{order:2}
.st-wrap:has(> .st-911bar) > .st-head{order:3;padding:18px 0 20px}
.st-wrap:has(> .st-911bar) > .st-plate-hero{order:4}
.st-911bar{margin:12px 0 0;padding:12px 15px 12px 13px;font-size:16px;line-height:1.45}
.st-911bar strong{display:block;font-size:17px;margin:0 0 1px}
.st-plate-hero{width:100%;max-width:330px;margin:2px auto 0;border-radius:10px}
.st-plate-hero .st-bump{padding:5.5% 5% 5%;border-radius:22px 22px 14px 14px}
.st-plate-hero .st-pocket{padding:8px 9px 10px;border-radius:7px}
.st-plate-hero .st-frame{padding:4px 4px 11px}
.st-plate-hero .st-frame::after{font-size:7px;letter-spacing:1px}
}
/* Phone typography and spacing. The ladder stays H1 > section h2 > numbered h3 > question h4, just
   tighter: what changes is the step size, never the order. Nothing explanatory drops below 15px and
   reading text stays --st-ink at weight 500 (16 Sep contrast pass). */
@media(max-width:560px){
.st-wrap{padding:0 18px}
.st-nav .st-inner{padding:13px 18px}
.st-head h1{font-size:clamp(25px,7.4vw,32px);line-height:1.14;letter-spacing:-.012em;margin:0 0 6px}
.st-checked{font-size:14.5px;line-height:1.45}
.st-qa{margin:16px 0 0}
.st-qi{padding:12px 14px 13px;margin:0 0 8px}
.st-qa .st-k{font-size:11.5px;letter-spacing:.06em;margin:0 0 4px}
.st-qa .st-q{font-size:14.5px;line-height:1.32;margin:0 0 5px}
.st-qa .st-a{font-size:17px;line-height:1.34;overflow-wrap:break-word}
.st-qa .st-a[data-n="1"] strong{font-size:21px}
.st-qa .st-a .st-access{font-size:14.5px;padding:5px 10px}
.st-qa a.st-more{display:inline-flex;align-items:center;min-height:44px;margin-top:0;font-size:14.5px}
/* One-handed lookup: label, then a full-width 52px input, then a full-width 52px button. */
.st-look{margin:14px 0 0;padding:16px 15px 18px}
.st-look h2{font-size:13px}
.st-look .st-lead-p{font-size:15.5px;margin:0 0 12px}
.st-form{flex-direction:column;align-items:stretch;gap:9px}
.st-form .st-field{flex:none}
.st-form input{min-height:52px;font-size:19px;padding:12px 14px}
button.st-btn{width:100%;min-height:52px;font-size:17px}
.st-look .st-hint,.st-look p{font-size:15px;line-height:1.55}
#st-result .st-res{padding:14px 15px}
#st-result .st-res .st-rh{font-size:16.5px}
section.st-blk{padding:26px 0}
section.st-blk h2{font-size:22px;line-height:1.18}
section.st-blk h3{font-size:21px;line-height:1.22;margin-top:26px;padding-top:15px}
section.st-blk h3 .st-sub{display:block;margin:4px 0 0;vertical-align:0;font-size:11.5px}
section.st-blk h4{font-size:17.5px;margin:18px 0 5px}
.st-look h4{font-size:17.5px}
section.st-blk p,section.st-blk li{font-size:16px;line-height:1.58}
section.st-blk ul{padding-left:19px;gap:8px;margin:10px 0}
section.st-blk p.st-note{font-size:15.5px}
.st-hot li{padding:11px 13px}
.st-hot li strong{font-size:16.5px}
.st-route{padding:14px 15px}
.st-route .st-lead{font-size:16px}
.st-route .st-lbl{margin-bottom:5px}
.st-route .st-access{margin-top:2px}
.st-dl{font-size:15.5px;margin:12px 0 0}
.st-dl dt{font-size:11.5px}
.st-dl dd{overflow-wrap:break-word}
/* Stacked quick facts read as question (ink, 600) then answer, hairline between pairs. */
.st-qf{font-size:15.5px;padding:12px 0 2px;margin:12px 0 0}
.st-qf dt{font-size:15.5px;font-weight:600;color:var(--st-ink)}
.st-qf dd{padding-bottom:11px;margin-bottom:9px}
.st-steps li{grid-template-columns:26px 1fr;gap:10px;font-size:15.5px;padding:8px 0}
.st-steps li::before{width:24px;height:24px;line-height:24px;font-size:12px}
.st-src{margin:18px 0 0;padding:13px 14px}
.st-src ol{padding-left:17px;gap:7px}
.st-src li{font-size:15px;line-height:1.45}
.st-flag{font-size:15px;padding-left:12px}
.st-side section.st-blk{padding:24px 0 0;margin-top:26px}
.st-side section.st-blk+section.st-blk{padding-top:22px}
.st-side section.st-blk p{font-size:15px}
.st-f{font-size:13.5px;padding:20px 0 30px}
}
/* Recent-report rows: plate badge and level on one line, the reason under them, so a long cross-street
   never squeezes the reason into a one-word-per-line column at 320px. */
@media(max-width:560px){
.st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding:12px 0}
.st-row .st-pl{grid-area:1/1;justify-self:start;font-size:14.5px}
.st-row .st-lv{grid-area:1/2;justify-self:end;font-size:13.5px}
.st-row .st-why{grid-area:2/1/3/3;font-size:15px}
.st-nearby{gap:7px}
section.st-blk .st-nearby a,.st-nearby a{padding:0 13px;font-size:13.5px}
}
/* 430px and below: narrower gutters buy back content width; 360px and below keeps the H1 and the
   911 headline off a third line and stops the nav row from touching its own edges. */
@media(max-width:430px){.st-wrap{padding:0 16px}.st-nav .st-inner{padding:13px 16px;gap:10px}.st-nav a.st-brand{font-size:17.5px;gap:8px}.st-nav .st-links{gap:0}.st-nav .st-links a{padding:0 9px;font-size:13px}}
@media(max-width:360px){.st-wrap{padding:0 14px}.st-nav .st-inner{padding:12px 14px;gap:8px}.st-nav a.st-brand{font-size:16px;gap:6px}.st-nav .st-links a{padding:0 7px;font-size:12.5px}.st-head h1{font-size:23.5px}.st-911bar{padding:11px 13px 11px 12px;font-size:15.5px}.st-911bar strong{font-size:16.5px}.st-qa .st-a{font-size:16.5px}.st-qa .st-a[data-n="1"] strong{font-size:20px}.st-qa .st-a .st-access{font-size:14px;padding:5px 9px}.st-form input{font-size:18px}.st-plate-hero{max-width:290px}section.st-blk h3{font-size:18.5px}.st-src li{font-size:15px}}
/* Layout stability for the two dynamic regions (aria-live attributes and scripts unchanged): the
   result card is one height across "Checking…", "clean" and a short hit list, and the feed reserves
   the first rows' worth of space so loading them does not shove the neighbours block down the page.
   No JS: a min-height on the containers is the whole fix. */
#st-result .st-res{min-height:96px}
#st-feed{--st-res:200px;min-height:var(--st-res)}
.st-empty{display:grid;place-items:center;min-height:120px}
#st-feed .st-empty{min-height:var(--st-res)}
@media(max-width:560px){#st-result .st-res{min-height:100px}#st-feed{--st-res:172px}.st-empty{padding:18px 16px}}
/* Focus is visible on every interactive thing on the page, not just the six selectors listed above. */
.st-body a:focus-visible,.st-look a:focus-visible,.st-main a:focus-visible,.st-side a:focus-visible,.st-f a:focus-visible,.st-911bar a:focus-visible{outline:3px solid var(--ja-teal);outline-offset:2px;border-radius:2px}
/* ── The larger desktop tier (owner request, 16 Sep 2026). One step up at >=1120px: the measure goes
   768 -> 880 and the whole type ladder scales with it. Same single left and right edge — the width
   lives on .st-wrap and .st-nav .st-inner, exactly as the 768px rule does, so nav, crumb, plate,
   911 bar, head, status boxes, body and footer all move together. No layout change, no reflow of
   the columns: this is the same page, bigger. Sidebar-quiet headings keep their own smaller sizes. */
@media(min-width:1120px){
.st-wrap,.st-nav .st-inner{max-width:880px}
.st-crumb{font-size:15px}
.st-911bar{margin:16px 0 0;padding:15px 22px 15px 18px;font-size:17px;line-height:1.5}
.st-911bar strong{font-size:18px}
.st-head{padding:26px 0 34px}
.st-head h1{font-size:clamp(42px,3.6vw,48px)}
.st-checked{font-size:16px}
.st-pocket{max-width:620px}
.st-qa{gap:14px;margin:26px 0 0}
.st-qi{padding:15px 18px 17px}
.st-qa .st-k{font-size:12.5px}
.st-qa .st-q{font-size:16px}
.st-qa .st-a{font-size:19px}
.st-qa .st-a[data-n="1"] strong{font-size:26px}
.st-qa .st-a .st-access{font-size:16px}
.st-qa a.st-more{font-size:15px}
.st-look{padding:24px 26px 26px}
.st-look h2{font-size:15px}
.st-look .st-lead-p{font-size:16.5px}
.st-look .st-hint,.st-look p{font-size:16px}
.st-form{gap:12px}
.st-form input{font-size:20px;min-height:56px;padding:14px 17px}
button.st-btn{min-height:56px;font-size:18px;padding:0 30px}
#st-result .st-res{min-height:104px;padding:18px 20px}
#st-result .st-res .st-rh{font-size:18px}
#st-result .st-res p,#st-result .st-res li{font-size:16px}
section.st-blk{padding:40px 0}
section.st-blk h2{font-size:29px}
section.st-blk h3{font-size:25px;margin-top:34px;padding-top:20px}
section.st-blk h4{font-size:19px;margin:24px 0 7px}
.st-look h4{font-size:19px}
section.st-blk p,section.st-blk li{font-size:17px;line-height:1.62}
section.st-blk p.st-note{font-size:16.5px}
.st-hot li{padding:13px 17px}
.st-hot li strong{font-size:18px}
.st-route{padding:20px 22px}
.st-route .st-lead{font-size:18px}
.st-dl,.st-qf{font-size:17px}
.st-steps li{font-size:17px}
.st-src{padding:17px 19px}
.st-src li{font-size:16px}
.st-flag{font-size:16.5px}
.st-row .st-pl{font-size:16px}
.st-row .st-why{font-size:16px}
.st-row .st-why span{font-size:15px}
.st-side section.st-blk p{font-size:16.5px}
.st-empty{font-size:16px}
section.st-blk .st-nearby a,.st-nearby a{font-size:15px;min-height:46px;padding:0 16px}
.st-f{font-size:15px;padding:26px 0 40px}
}
/* ══ 16 Sep 2026 (owner): the hero bumper is now a PHOTOGRAPH, not CSS gradients — assets/plates/bumper.webp,
   a straight-on black bumper with an empty plate pocket. The pocket was measured off the image (pure-black
   rect x 415–1048, y 114–437 of 1468×558), so the plate is positioned in percentages of the photo and stays
   registered at every width. The old gradient bumper markup is reused as positioning boxes: .st-bump is the
   full-bleed layer, .st-pocket is the hole, .st-frame passes through. Its specular/crease pseudo-elements and
   the JERKALERT.ORG stamp are switched off — the photo carries the real chrome now.
   SCOPED TO .st-plate-hero, so SitePlateDisplay.jsx and the app's own .st-plate keep the CSS bumper; the two
   treatments have deliberately diverged, and a retune of one no longer implies the other. */
.st-plate.st-plate-hero{aspect-ratio:1468/558;display:block;padding:0;overflow:hidden;background:#0a0c0e url("../assets/plates/bumper.webp") 50% 50%/cover no-repeat}
.st-plate-hero .st-bump{position:absolute;inset:0;width:100%;padding:0;display:block;border-radius:0;background:none;box-shadow:none}
.st-plate-hero .st-bump::before,.st-plate-hero .st-bump::after,.st-plate-hero .st-frame::after{content:none;display:none}
.st-plate-hero .st-pocket{position:absolute;left:28.27%;top:21.06%;width:43.19%;max-width:none;padding:0;border-radius:3px;background:none;box-shadow:0 2px 6px rgba(0,0,0,.75)}
.st-plate-hero .st-frame{position:static;width:100%;padding:0;border-radius:3px;background:none;box-shadow:none}
.st-plate-hero img{border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
@media(max-width:700px){.st-plate-hero{border-radius:10px}.st-plate-hero .st-bump{padding:0;border-radius:0}.st-plate-hero .st-pocket{padding:0;border-radius:2px}.st-plate-hero .st-frame{padding:0}}
/* ══ 16 Sep 2026 (owner): THE HERO PLATE MIRRORS THE LOOKUP FIELD. Whatever is typed into #st-q is struck onto
   this state's own plate art by plate-sprite.js — THE one lettering renderer, shared with the app and the tuning
   tool; there is no second lettering path on these pages. The static <img> stays the LCP element and the
   no-JS / never-typed state: the canvas is stacked over it inside the same pocket box and only becomes visible
   once there is text to show (.st-live, set by the page script, which also injects the engine on first focus of
   the field — a visitor who never types fetches nothing extra). SCOPED TO .st-plate-hero: the app's plate
   (SiteStates.jsx) ships no canvas and is untouched. */
.st-plate-hero .st-cv{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:3px;opacity:0;transition:opacity .14s ease}
.st-plate-hero.st-live .st-cv{opacity:1}
/* The result card's route to the plate profile — same deep link the individual report lines use, as one 44px
   target. Filled on a hit, outlined inside the green .st-clean card so a clean plate stays quiet. */
#st-result .st-res p.st-rcta{margin:12px 0 0}
#st-result .st-res a.st-plink{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 17px;border-radius:var(--r-md);background:var(--ja-teal);color:#fff;font-family:var(--st-display);font-weight:700;font-size:15.5px;line-height:1.2;text-decoration:none}
#st-result .st-res a.st-plink:hover{background:var(--ja-alert);color:#fff}
#st-result .st-res.st-clean a.st-plink{background:#fff;color:var(--ja-teal);border:1.5px solid var(--line-strong)}
#st-result .st-res.st-clean a.st-plink:hover{background:#fff;border-color:var(--ja-alert);color:var(--ja-alert)}
@media(max-width:560px){#st-result .st-res a.st-plink{width:100%;justify-content:center;min-height:48px;font-size:16px}}
@media(min-width:1120px){#st-result .st-res a.st-plink{min-height:46px;font-size:16.5px}}