/* ============================================================
   GOT Busted News - Phase 0 demo design system
   AMO Scaling. Modernized black / red / gold crime-tabloid.
   Type: Oswald (masthead display) + Public Sans (body)
   ============================================================ */
:root{
  --bg:#0b0b0e;            /* near-black base */
  --bg-2:#121218;         /* panel */
  --bg-3:#1a1a22;         /* raised */
  --line:#26262f;
  --line-2:#33333f;
  --ink:#f4f4f6;          /* primary text */
  --mut:#9a9aa6;          /* muted */
  --mut-2:#6f6f7b;
  --red:#e01427;          /* locked primary accent */
  --red-2:#b30f1e;
  --red-soft:rgba(224,20,39,.14);
  --gold:#efb42d;         /* secondary accent */
  --gold-2:#c9962073;
  --r:10px;
  --r-lg:16px;
  --wrap:1280px;
  --shadow:0 10px 40px -12px rgba(0,0,0,.7);
  --fd:'Oswald',system-ui,sans-serif;
  --fb:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.02;letter-spacing:.01em;text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
.kick{font-family:var(--fd);font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.kick.gold{color:var(--gold)}
.lead{font-size:1.1rem;color:var(--mut);max-width:64ch;line-height:1.7}
.mut{color:var(--mut)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;padding:.72rem 1.3rem;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;line-height:1}
.btn i{font-size:1.15em}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-red:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#1a1400}
.btn-gold:hover{background:#f7c249}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-dark{background:var(--bg-3);color:var(--ink);border-color:var(--line)}
.btn-dark:hover{background:#22222c}

/* breaking ticker */
.ticker{background:var(--red);color:#fff;overflow:hidden;border-bottom:1px solid var(--red-2)}
.ticker .wrap{display:flex;align-items:center;gap:1rem;height:38px}
.ticker .tag{font-family:var(--fd);font-weight:700;letter-spacing:.1em;font-size:.78rem;text-transform:uppercase;background:#fff;color:var(--red);padding:.15rem .6rem;border-radius:4px;flex-shrink:0;display:flex;align-items:center;gap:.35rem}
.ticker .tag i{animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.35}}
.ticker .scroll{white-space:nowrap;overflow:hidden;font-size:.86rem;font-weight:500}
.ticker .scroll span{display:inline-block;padding-left:100%;animation:mar 26s linear infinite}
@keyframes mar{to{transform:translateX(-100%)}}

/* utility strip */
.util{background:#0a0a0d;color:var(--mut);font-size:.8rem;border-bottom:1px solid var(--line)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:1.6rem;padding:.35rem 0}
.util .u-l{display:flex;align-items:center;gap:.6rem;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.util .u-l .zia{color:var(--gold);flex-shrink:0;font-size:.98rem}
.util .u-r{display:flex;gap:.5rem;flex-shrink:0}
.util .u-r a{color:var(--mut);display:inline-flex;align-items:center;gap:.42rem;padding:.34rem .85rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:.15s;white-space:nowrap;font-weight:500}
.util .u-r a i{color:var(--gold);font-size:1rem}
.util .u-r a:hover{color:#fff;border-color:var(--gold);background:rgba(240,177,0,.08)}
@media(max-width:720px){.util .u-r a span{display:none}.util .u-l{display:none}.util .wrap{justify-content:flex-end;gap:1.3rem}}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(11,11,14,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;height:76px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand .logo{width:48px;height:48px;border-radius:10px;background:radial-gradient(circle at 30% 25%,#1c1c24,#0c0c10);border:1.5px solid var(--gold);display:grid;place-items:center;position:relative;overflow:hidden}
.brand .logo i{color:var(--gold);font-size:1.5rem}
.brand .bt{line-height:1}
.brand .bt b{font-family:var(--fd);font-weight:700;font-size:1.35rem;letter-spacing:.01em;display:block}
.brand .bt b em{color:var(--red);font-style:normal}
.brand .bt small{font-family:var(--fd);font-weight:500;font-size:.62rem;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-links>a{font-family:var(--fd);font-weight:500;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);padding:.5rem .75rem;border-radius:7px;transition:.15s}
.nav-links>a:hover{color:var(--red)}
.nav-links>a.active{color:var(--red)}
.nav-cta{display:flex;align-items:center;gap:.6rem;margin-left:1.1rem}
.nav-icon{width:42px;height:42px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);font-size:1.2rem;transition:.15s}
.nav-icon:hover{border-color:var(--red);color:var(--red)}
.burger{display:none}
/* NAV FIT. Nine links plus two buttons do not fit a 1280px wrap — the bar
   overflowed and pushed "Search Records" off the right edge on every desktop
   width. It already did that before Court Dockets was added; the extra link
   only made it obvious. Four things fix it, in order of screen size:
   a wider bar than the body wrap, then the big red button goes, then the
   links tighten, then the ghost button goes, then the burger takes over —
   and the burger now arrives BEFORE the links run out of room, not 250px
   after it, which is what left 780–1040px broken. */
.nav .wrap{max-width:1560px}
.nav-links>a{white-space:nowrap}
/* auth.js appends a second account link to .nav-links for the MOBILE menu.
   It was never meant to show next to the .nav-cta one on desktop. */
#gb-acct-m{display:none}
@media(max-width:1560px){.nav-cta>a.btn-red{display:none}}
@media(max-width:1340px){.nav-links>a{padding:.5rem .5rem;font-size:.86rem;letter-spacing:.02em}.nav-links{gap:0}.nav .wrap{gap:1rem}}
/* Medium screens: drop the remaining CTA button too. */
@media(max-width:1120px){.nav-cta .btn{display:none}}
/* Small screens: collapse links into the hamburger.
   Raised 1040 -> 1150 on 2026-07-29 when Advertise made this a NINE-link
   bar. Measured: at 1041-1149px nine links plus the surviving ghost button
   overflowed .nav .wrap (scrollWidth > clientWidth), which silently pushed
   the CTA past the right edge. Measured right-edge clearance: 1px at 1121, 11px at 1131, full
   24px padding only from 1151 up — so 1150 is the real floor, not 1120.
   IF A TENTH LINK IS EVER ADDED, re-measure this band before shipping. */
@media(max-width:1150px){.nav-links{display:none}.burger{display:grid}}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .bgimg{position:absolute;inset:0;opacity:.22}
.hero .bgimg img{width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:radial-gradient(1200px 500px at 20% 0%,rgba(224,20,39,.16),transparent 60%),linear-gradient(180deg,rgba(11,11,14,.6),var(--bg))}
.hero .wrap{position:relative;z-index:2;padding:72px 24px 60px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--gold);border:1px solid var(--gold-2);background:rgba(239,180,45,.08);padding:.4rem .85rem;border-radius:100px;margin-bottom:1.3rem}
.hero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);line-height:.95;max-width:16ch}
.hero h1 em{color:var(--red);font-style:normal}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--mut);max-width:52ch;margin:1.3rem 0 2rem;line-height:1.6}
.hero .cta-row{display:flex;gap:.9rem;flex-wrap:wrap}
/* hero search */
.hsearch{margin-top:2.2rem;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px;max-width:720px;box-shadow:var(--shadow)}
.hsearch .lab{font-family:var(--fd);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;color:var(--ink);display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.hsearch .lab i{color:var(--red)}
.hsearch .row{display:flex;gap:.6rem}
.hsearch input{flex:1;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1rem;color:var(--ink);font-size:1rem;font-family:var(--fb)}
.hsearch input:focus{outline:2px solid var(--red);border-color:var(--red)}
.hsearch .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.hsearch .chips a{font-size:.8rem;font-weight:600;color:var(--mut);background:var(--bg-3);border:1px solid var(--line);padding:.35rem .75rem;border-radius:100px;transition:.15s}
.hsearch .chips a:hover{border-color:var(--red);color:var(--ink)}

/* stat bar */
.statbar{background:var(--bg-2);border-bottom:1px solid var(--line)}
.statbar .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.statbar .s{padding:1.5rem;text-align:center;border-right:1px solid var(--line)}
.statbar .s:last-child{border-right:none}
.statbar .s b{font-family:var(--fd);font-weight:700;font-size:1.9rem;color:#fff;display:block;line-height:1}
.statbar .s b em{color:var(--red);font-style:normal}
.statbar .s span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:.4rem;display:block}
@media(max-width:720px){.statbar .grid{grid-template-columns:1fr 1fr}.statbar .s:nth-child(2){border-right:none}}

/* section */
.section{padding:72px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem;border-bottom:2px solid var(--red);padding-bottom:.9rem}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.sec-head .kick{margin-bottom:.3rem}
.sec-head a{font-family:var(--fd);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;color:var(--gold);white-space:nowrap}

/* featured stories */
.feat{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
@media(max-width:860px){.feat{grid-template-columns:1fr}}
.fcard{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column}
.fcard.lead-story{min-height:440px}
.fcard .fimg{position:relative;overflow:hidden;flex:1;min-height:200px;background:#000}
.fcard .fimg img{width:100%;height:100%;object-fit:cover;transition:.5s}
.fcard:hover .fimg img{transform:scale(1.04)}
.fcard .badge{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--fd);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;padding:.3rem .7rem;border-radius:5px}
.badge.red{background:var(--red);color:#fff}
.badge.gold{background:var(--gold);color:#1a1400}
.badge.dark{background:rgba(0,0,0,.7);color:#fff;border:1px solid var(--line-2)}
.fcard .fbody{padding:22px}
.fcard.lead-story .fbody{position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(0deg,rgba(8,8,10,.96),rgba(8,8,10,.75) 60%,transparent);padding:28px 26px}
.fcard .meta{font-size:.76rem;color:var(--gold);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem;display:flex;gap:.6rem;align-items:center}
.fcard h3{font-size:1.3rem;line-height:1.05;margin-bottom:.5rem}
.fcard.lead-story h3{font-size:clamp(1.6rem,2.6vw,2.3rem)}
.fcard p{color:var(--mut);font-size:.92rem}
.fside{display:flex;flex-direction:column;gap:22px}
.fside .fcard{flex-direction:row;min-height:0}
.fside .fcard .fimg{width:120px;flex:none;min-height:110px}
.fside .fcard .fbody{padding:16px;flex:1}
.fside .fcard h3{font-size:1.02rem}

/* latest bookings rail */
.brow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1000px){.brow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.brow{grid-template-columns:repeat(2,1fr)}}
.bcard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.18s}
.bcard:hover{border-color:var(--red);transform:translateY(-3px)}
.bcard .mug{position:relative;aspect-ratio:4/5;background:#000;overflow:hidden}
.bcard .mug img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.bcard .mug .cty{position:absolute;top:8px;left:8px;font-family:var(--fd);font-weight:600;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.75);color:var(--gold);padding:.2rem .5rem;border-radius:4px;border:1px solid var(--line-2)}
.bcard .mug .new{position:absolute;top:8px;right:8px;font-family:var(--fd);font-weight:700;font-size:.62rem;letter-spacing:.06em;background:var(--red);color:#fff;padding:.2rem .45rem;border-radius:4px}
.bcard .binfo{padding:12px 14px}
/* A person from a county that has no jail of its own, held somewhere else.
   Deliberately teal, not the gold used for charge category, and worded
   "resident" — it must never read as "arrested by that county". */
.fromcty{display:inline-block;font-family:var(--fd);font-weight:600;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#7fe6f2;background:rgba(79,216,232,.1);border:1px solid rgba(79,216,232,.3);padding:.1rem .45rem;border-radius:20px;margin:0 0 .45rem .35rem}
.catchip{display:inline-block;font-family:var(--fd);font-weight:600;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(240,177,0,.1);border:1px solid rgba(240,177,0,.28);padding:.1rem .45rem;border-radius:20px;margin-bottom:.45rem}
.bcard .binfo h4{font-family:var(--fd);font-weight:600;font-size:1.02rem;letter-spacing:.01em;text-transform:none;line-height:1.1;margin-bottom:.3rem}
.bcard .binfo .chg{font-size:.8rem;color:var(--red);font-weight:600;margin-bottom:.2rem}
.bcard .binfo .dt{font-size:.72rem;color:var(--mut-2)}

/* database page: toolbar + filters */
.dbwrap{display:grid;grid-template-columns:270px 1fr;gap:32px;padding:44px 0}
@media(max-width:860px){.dbwrap{grid-template-columns:1fr}}
.filters{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;align-self:start;position:sticky;top:92px}
@media(max-width:860px){.filters{position:static;top:auto}}
.filters h4{font-family:var(--fd);font-size:.95rem;letter-spacing:.08em;color:var(--gold);margin-bottom:1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.fgrp{margin-bottom:1.2rem}
.fgrp label{font-family:var(--fd);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:.4rem}
.fgrp input,.fgrp select{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:.6rem .7rem;color:var(--ink);font-family:var(--fb);font-size:.92rem}
.fgrp input:focus,.fgrp select:focus{outline:1px solid var(--red);border-color:var(--red)}
.dbmain .dbtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem;flex-wrap:wrap;gap:.6rem}
.dbmain .dbtop .cnt{font-family:var(--fd);color:var(--mut);letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}
.dbmain .dbtop .cnt b{color:#fff}
.dblist{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.dblist{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.dblist{grid-template-columns:repeat(2,1fr)}}

/* booking profile */
.profile{padding:44px 0}
.pgrid{display:grid;grid-template-columns:340px 1fr;gap:40px}
@media(max-width:820px){.pgrid{grid-template-columns:1fr;gap:24px}}
.pmug{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);background:#000;position:relative}
.pmug img{width:100%;filter:grayscale(.12)}
.pmug .stamp{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);padding:16px;font-family:var(--fd);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--gold)}
.pmain .ptag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fd);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;color:var(--red);background:var(--red-soft);border:1px solid rgba(224,20,39,.3);padding:.3rem .7rem;border-radius:5px;margin-bottom:.9rem}
.pmain h1{font-family:var(--fd);font-size:clamp(2rem,4vw,3rem);text-transform:uppercase;line-height:1}
.pmeta{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.3rem 0;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pmeta .m span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);display:block;font-family:var(--fd)}
.pmeta .m b{font-size:1.05rem;color:#fff;font-weight:600}
.charges{margin:1.4rem 0}
.charges h4{font-family:var(--fd);letter-spacing:.06em;color:var(--gold);font-size:1rem;margin-bottom:.8rem}
.charge{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px;margin-bottom:.6rem}
.charge b{font-weight:600;color:var(--ink)}
.charge span{font-size:.82rem;color:var(--mut);font-family:var(--fd);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.disclaimer{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;font-size:.85rem;color:var(--mut);margin-top:1.4rem;display:flex;gap:.7rem}
.disclaimer i{color:var(--gold);font-size:1.2rem;flex-shrink:0}

/* pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
@media(max-width:720px){.pricing{grid-template-columns:1fr}}
.plan{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;position:relative}
.plan.pro{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-2),0 20px 50px -20px rgba(239,180,45,.25)}
.plan .ptop{font-family:var(--fd);letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;color:var(--mut)}
.plan.pro .ptop{color:var(--gold)}
.plan .price{font-family:var(--fd);font-weight:700;font-size:3rem;color:#fff;line-height:1;margin:.6rem 0}
.plan .price small{font-size:1rem;color:var(--mut);font-weight:500}
/* font-size was .72rem (11.52px) and the mobile audit flagged it as sub-12px
   at every width on advertise.html and subscribe.html. Raised to .76rem
   (12.16px) at the BASE rule rather than inside the mobile block, because the
   flag is small at desktop too and a page-local <style> would beat the mobile
   block anyway (see the note in advertise.html). */
.plan .flag{position:absolute;top:-13px;right:24px;background:var(--gold);color:#1a1400;font-family:var(--fd);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.76rem;padding:.3rem .8rem;border-radius:5px}
.plan ul{list-style:none;margin:1.4rem 0}
.plan ul li{display:flex;gap:.7rem;padding:.55rem 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--ink)}
.plan ul li:first-child{border-top:none}
.plan ul li i{color:var(--gold);font-size:1.1rem;flex-shrink:0}
.plan ul li.off{color:var(--mut-2)}
.plan ul li.off i{color:var(--mut-2)}
.plan .btn{width:100%;justify-content:center;margin-top:.6rem}

/* store */
.store{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.store{grid-template-columns:1fr 1fr}}
.product{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.18s}
.product:hover{border-color:var(--gold);transform:translateY(-3px)}
.product .pimg{aspect-ratio:1;background:linear-gradient(150deg,#17171d,#0c0c10);display:grid;place-items:center;color:var(--gold);position:relative}
.product .pimg i{font-size:3rem;opacity:.5}
.product .pimg .tee{font-family:var(--fd);font-weight:700;font-size:1.3rem;text-transform:uppercase;color:#fff;text-align:center;line-height:1}
.product .pimg .tee em{color:var(--red);font-style:normal}
.product .pb{padding:16px}
.product .pb b{font-family:var(--fd);font-weight:600;font-size:1.02rem;text-transform:none;display:block}
.product .pb .pr{color:var(--gold);font-weight:700;font-family:var(--fd);font-size:1.1rem;margin-top:.2rem}

/* directory rows */
.dirlist{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.dirlist{grid-template-columns:1fr}}
.dirrow{display:flex;gap:1rem;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;transition:.15s}
.dirrow:hover{border-color:var(--red)}
.dirrow .dic{width:48px;height:48px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--gold);font-size:1.4rem;flex-shrink:0}
.dirrow b{font-family:var(--fd);font-weight:600;font-size:1.05rem;text-transform:none;display:block}
.dirrow span{font-size:.85rem;color:var(--mut)}
.dirrow .sp{margin-left:auto;font-family:var(--fd);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-2);padding:.25rem .55rem;border-radius:4px}

/* article */
.article{max-width:760px;margin:0 auto;padding:44px 0}
.article .atag{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.article h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;margin-bottom:1rem}
.article .abyline{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--mut);font-size:.88rem;margin-bottom:1.6rem}
.article .abyline .share{margin-left:auto;display:flex;gap:.5rem}
.article .abyline .share a{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--mut);transition:.15s}
.article .abyline .share a:hover{border-color:var(--red);color:var(--red)}
.article .ahero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-bottom:1.6rem}
.article p{color:#d5d5dc;font-size:1.06rem;margin-bottom:1.2rem;line-height:1.75}
.article p.drop::first-letter{font-family:var(--fd);font-weight:700;font-size:3.4rem;float:left;line-height:.8;padding:.1rem .5rem .1rem 0;color:var(--red)}

/* ad slot */
.adslot{background:repeating-linear-gradient(45deg,#111116,#111116 12px,#0e0e12 12px,#0e0e12 24px);border:1px dashed var(--line-2);border-radius:12px;padding:2rem;text-align:center;color:var(--mut-2)}
.adslot span{font-family:var(--fd);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.adslot b{display:block;color:var(--mut);font-family:var(--fd);font-size:1.1rem;margin-top:.3rem}

/* subhero (interior) */
.subhero{border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(120deg,#0e0e13,#08080a)}
.subhero::before{content:"";position:absolute;top:-30%;right:-5%;width:480px;height:480px;background:radial-gradient(circle,rgba(224,20,39,.18),transparent 65%)}
.subhero .wrap{position:relative;z-index:2;padding:54px 24px 46px}
.subhero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1}
.subhero h1 em{color:var(--red);font-style:normal}
.subhero p{color:var(--mut);max-width:60ch;margin-top:.8rem;font-size:1.05rem}

/* crumb */
.crumb{background:#08080a;border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;align-items:center;gap:.5rem;height:46px;font-size:.84rem;color:var(--mut)}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--gold)}
.crumb i{font-size:.8rem;color:var(--line-2)}
.crumb .here{color:var(--ink)}

/* footer */
.foot{background:#08080a;border-top:1px solid var(--line);padding:60px 0 30px}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--line)}
@media(max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot .fabout{color:var(--mut);margin:1rem 0;max-width:34ch;font-size:.9rem;line-height:1.6}
.foot h5{font-family:var(--fd);letter-spacing:.1em;text-transform:uppercase;color:#fff;font-size:.85rem;margin-bottom:1rem}
.foot ul{list-style:none}
.foot ul li{margin-bottom:.55rem}
.foot ul a{color:var(--mut);font-size:.92rem}
.foot ul a:hover{color:var(--red)}
.foot .social{display:flex;gap:.6rem;margin-top:1rem}
.foot .social a{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--mut);transition:.15s}
.foot .social a:hover{border-color:var(--red);color:var(--red)}
.foot .fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:24px;font-size:.82rem;color:var(--mut-2)}
.foot .concept{background:var(--red-soft);border:1px solid rgba(224,20,39,.3);border-radius:10px;padding:.7rem 1rem;margin-top:18px;font-size:.8rem;color:#f0a9a9}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);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}}

/* mobile dropdown menu — must match the burger breakpoint above (1150), or the
   burger appears on screens where tapping it does nothing. */
@media(max-width:1150px){
 .nav.open .nav-links{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 16px 14px;box-shadow:var(--shadow)}
 .nav.open .nav-links>a{padding:.9rem .5rem;font-size:1.05rem;border-bottom:1px solid var(--line)}
 /* this is the menu the duplicate account link was written for */
 .nav.open .nav-links>#gb-acct-m{display:block}
}

/* ===== NM coverage map (homepage) ===== */
#home-map{background:radial-gradient(120% 85% at 50% 12%, rgba(60,224,130,.07), transparent 55%), linear-gradient(180deg,#15161b,#0f0f13);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:26px 16px;box-shadow:0 24px 55px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)}
.nmmap{width:100%;max-width:620px;height:auto;display:block;margin:0 auto;overflow:visible}
.cty{transform-box:fill-box;transform-origin:center;transition:transform .24s cubic-bezier(.2,.85,.25,1),filter .24s ease}
.cty path{transition:fill .2s ease,stroke .2s ease,stroke-width .2s ease}
.cty.live{cursor:pointer}
.cty.hov{transform:translateY(-13px) scale(1.12);filter:drop-shadow(0 20px 24px rgba(0,0,0,.85))}
.cty.live.hov path{stroke:#dcffec;stroke-width:2.6}
.cty:not(.live).hov path{fill:#262630;stroke:rgba(255,255,255,.22);stroke-width:1.4}
.ctylab{text-anchor:middle;font-family:var(--fd);font-weight:600;font-size:21px;fill:#fff;paint-order:stroke;stroke:#06301a;stroke-width:5.5px;pointer-events:none;letter-spacing:.3px}
.ctynum{text-anchor:middle;font-family:var(--fd);font-size:17px;fill:#c8ffdd;paint-order:stroke;stroke:#06301a;stroke-width:5px;pointer-events:none}
/* map labels are bigger on phones (the map itself is narrower there) */
@media(max-width:600px){#home-map{padding:16px 8px}.ctylab{font-size:30px;stroke-width:6px}.ctynum{font-size:24px;stroke-width:6px}}

/* placeholder mug for real records with no face-sheet image yet */
.mug .mug-ph{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1a1a1e,#2a2a30);color:#5a5a63;font-size:2.4rem}
.mug .mug-ph i{opacity:.7}

/* ---- county service notice (a county whose own roster is offline) ------- */
.cty-notice{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 1.1rem;padding:.85rem 1rem;
  border:1px solid rgba(224,178,60,.42);border-left:3px solid #e0b23c;border-radius:10px;
  background:rgba(224,178,60,.08);color:var(--mut);font-size:.9rem;line-height:1.5}
.cty-notice i{color:#e0b23c;font-size:1.15rem;line-height:1.35;flex:none}
.cty-notice b{color:#f0d9a0;font-weight:700}
/* Residents-only counties: no roster of their own, but real people from there
   are in custody elsewhere. Clickable like a live county, coloured unlike one. */
.cty.resonly{cursor:pointer}
.cty.resonly.hov path{stroke:#c8ffdf;stroke-width:2.4}
.cty.resonly .ctynum{fill:#dcffee;stroke:#053021}
.ctyres{font-size:12px;fill:#8fe8b8}
.nmmap g.cty.maint{cursor:default}
.nmmap g.cty.maint path{opacity:.95}

/* ============================================================
   COURT DOCKETS — the second dataset (public.court_cases)
   ------------------------------------------------------------
   Deliberately NOT the booking palette. Booking cards are the
   red/gold tabloid world and carry a mugshot; a docket entry is
   a scheduled hearing, often on a person who was summonsed or
   cited and never booked at all. Indigo, no photo well, no
   charge text — because the source publishes none of those. If
   these ever start looking like booking cards, the visual
   language is asserting a custody that the data does not.
   ============================================================ */
.ccard{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid #6f7ce8;
  border-radius:12px;padding:14px 15px 13px;transition:border-color .16s,transform .16s}
.ccard:hover{transform:translateY(-2px);border-color:#7b8bf5}
.ccard.t-sev{border-left-color:#e0554f}
.ccard.t-mid{border-left-color:#6f7ce8}
.ccard.t-low{border-left-color:#4d5570}
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.cc-type{font-family:var(--fd);font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;padding:3px 8px;border-radius:6px;line-height:1.35;
  background:rgba(111,124,232,.14);color:#a8b3ff;border:1px solid rgba(111,124,232,.34)}
.t-sev .cc-type{background:rgba(224,85,79,.13);color:#ff9d97;border-color:rgba(224,85,79,.34)}
.t-low .cc-type{background:rgba(255,255,255,.05);color:var(--mut);border-color:var(--line-2)}
.cc-cty{font-size:.72rem;color:var(--mut-2);white-space:nowrap;flex:none}
.ccard h4{font-family:var(--fd);font-size:1.12rem;font-weight:600;line-height:1.2;
  color:var(--ink);margin:0 0 .45rem}
.cc-when{font-size:.86rem;color:#c3ccff;display:flex;align-items:center;gap:.35rem;margin-bottom:.3rem}
.cc-when i{font-size:.95rem;color:#8892e8}
.cc-what{font-size:.85rem;color:var(--mut);line-height:1.45}
.cc-court{font-size:.8rem;color:var(--mut-2);margin-top:.35rem}
.cc-meta{font-size:.72rem;color:var(--mut-2);margin-top:.55rem;padding-top:.5rem;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}

/* grids: 4-up on the homepage strip, 3-up on the dockets page */
.ctrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ctlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1000px){.ctrow{grid-template-columns:repeat(2,1fr)}.ctlist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ctrow,.ctlist{grid-template-columns:1fr}}

/* The one thing a reader must not get wrong about this dataset. */
.ct-warn{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 1.3rem;padding:.9rem 1.05rem;
  border:1px solid rgba(111,124,232,.4);border-left:3px solid #6f7ce8;border-radius:10px;
  background:rgba(111,124,232,.07);color:var(--mut);font-size:.9rem;line-height:1.55}
.ct-warn i{color:#8892e8;font-size:1.15rem;line-height:1.35;flex:none}
.ct-warn b{color:#c3ccff;font-weight:700}

.ct-kick{color:#8892e8!important}
.ct-all{color:#8892e8!important}

/* map: a county lit ONLY by court data. Indigo, never the custody green. */
.cty.courtonly{cursor:pointer}
.cty.courtonly.hov path{stroke:#cdd5ff;stroke-width:2.4}
.cty.courtonly .ctynum{fill:#e2e7ff;stroke:#141a3d}
.ctycrt{font-size:12px;fill:#a8b3ff}

/* ===========================================================================
   MOBILE / TOUCH PASS — added 2026-07-29 after a Playwright audit of all 15
   pages at 360/390/430/768px with is_mobile + has_touch.

   What the audit actually found: ZERO horizontal overflow, zero load failures,
   zero JS errors, and the burger swapped correctly on every page. The
   responsive skeleton was already right. Every single defect was one of two
   things, so that is all this block fixes:

     1. tap targets under 44px  (inputs 37px, selects 39px, .btn 40px,
        footer links 16px, the util-bar icons 29x13, social tiles 38x38)
     2. data-bearing text under 12px  (.catchip/.fromcty 9.6px, the county and
        NEW badges 9.9-10.6px, .cc-type 10.9px, .cc-cty/.cc-meta/.dt 11.5px)

   RULES FOR EDITING THIS BLOCK:
   * It is LAST in the file and scoped to max-width:900px, so it cannot touch
     the desktop cascade. Keep it that way — do not hoist rules out of here.
   * 16px on text inputs is NOT a style choice. iOS Safari auto-zooms the
     viewport on focus for anything under 16px and never zooms back out. Do
     not "tidy" it down to .95rem.
   * Inline links in prose get padding-block, not min-height. Padding on an
     inline element grows the hit rectangle without changing the line box, so
     the paragraph does not re-flow.
   * The brand tagline (.brand .bt small, 9.92px) is deliberately NOT bumped.
     It is a letter-spaced decorative lockup, not content, and enlarging it
     pushes the logo into the burger at 360px.
   =========================================================================== */
@media(max-width:900px){

  /* ---- form controls: 44px minimum, 16px text to stop iOS focus-zoom ---- */
  .fgrp input,.fgrp select,.hsearch input,
  input[type=text],input[type=email],input[type=search],input[type=tel],
  input[type=password],select,textarea{
    min-height:44px;font-size:16px}
  .fgrp input,.fgrp select{padding:.65rem .75rem}

  /* ---- buttons ---- */
  .btn{min-height:46px;padding:.8rem 1.25rem;font-size:.95rem}
  .btn.btn-sm{min-height:40px}

  /* ---- utility bar: the icon-only links were a 29x13 target ---- */
  .util .wrap{min-height:48px}
  .util .u-r{gap:.2rem}
  .util .u-r a{padding:.7rem .8rem;display:inline-flex;align-items:center;min-height:44px}
  .util .u-r a i{font-size:1.15rem}

  /* ---- breadcrumb ---- */
  .crumb .wrap{height:auto;min-height:48px;flex-wrap:wrap;padding:.4rem 0}
  .crumb a{padding:.62rem 0;display:inline-block}

  /* ---- homepage quick-search chips ---- */
  .hsearch .chips a{padding:.6rem 1rem;font-size:.85rem}

  /* ---- "view all" / section links ---- */
  .ct-all,.sec-all,.hm-all,.sec-head a,a.more{padding:.62rem 0;display:inline-block}

  /* ---- footer: 16px-tall links were the worst targets on the site ---- */
  .foot{padding:44px 0 26px}
  .foot ul li{margin-bottom:0}
  .foot ul a{display:block;padding:.62rem 0;font-size:.95rem}
  .foot .social a{width:44px;height:44px}
  .foot .fbar{font-size:.86rem;gap:.9rem}
  .foot .fbar a,.foot .concept a{padding:.62rem 0;display:inline-block}
  .foot .concept{font-size:.85rem;line-height:1.55}

  /* ---- inline prose links (login "forgot password", signup, etc.) ----
     padding-block only: grows the hit box, leaves the line box alone. */
  .fgrp a,form a,p a:not(.btn),.auth a,.tagrow a{padding-top:.85rem;padding-bottom:.85rem}

  /* ---- legibility floors on text that carries DATA ---- */
  .catchip,.fromcty{font-size:.75rem;padding:.15rem .5rem}
  .bcard .mug .cty{font-size:.78rem}
  .bcard .mug .new{font-size:.78rem}
  .bcard .binfo .dt{font-size:.78rem}
  .cc-type{font-size:.75rem}
  .cc-cty,.cc-meta,.cc-court{font-size:.78rem}
  .mi-verified{font-size:.78rem}
  /* Deliberately NOT here: .mut. Almost every .mut on the site carries an
     INLINE font-size, which beats a stylesheet rule, so a .mut rule would do
     nothing for the elements the audit flagged while silently shrinking the
     ones that inherit a larger size. The remaining sub-12px .mut instances
     are uppercase letter-spaced kickers — labels, not reading copy. */
}

/* Phones only. The two-column footer at 768 is fine; at 430 and below the
   four link columns were 2-up and very narrow, so go 1-up. */
@media(max-width:520px){
  .foot .cols{grid-template-columns:1fr;gap:20px}
  .foot .fbar{flex-direction:column;gap:.6rem}
}

/* "Advertise" now lives in .nav-links (added 2026-07-29 at the user's request,
   which also puts it in the burger menu since .nav.open .nav-links is the same
   element). The util-bar pill would then render the same word twice, stacked
   ~20px apart, on wide screens. Hide the pill only where .nav-links is actually
   visible — i.e. above the 1150px burger breakpoint. Below that the nav is
   collapsed, so the pill is the only one-tap route to the page and must stay.
   Keep this breakpoint in sync with the .nav-links/.burger rule above. */
@media(min-width:1151px){ .util .u-r a[href="advertise.html"]{display:none} }

/* ---- loading skeletons --------------------------------------------------
   Every homepage rail ships display:none and unhides when its data arrives, so
   before this the page assembled itself in front of the reader: missing kids
   first, then dockets a second later, then the map, each one shoving the rest
   of the page down as it appeared. The skeletons claim the space immediately so
   the sections fade in where they were always going to sit.

   Deliberately NOT an animation-heavy shimmer: this is the first paint on a
   crime-news site people open on cheap phones over rural NM cell service, and a
   repainting gradient on eight cards costs more than it buys. A slow pulse on
   the background colour is enough to read as "loading" rather than "broken".
   prefers-reduced-motion turns even that off. */
.gb-skel{
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.085),rgba(255,255,255,.045));
  background-size:200% 100%;
  border-radius:12px;
  animation:gb-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes gb-skel-pulse{0%{background-position:0% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .gb-skel{animation:none;background:rgba(255,255,255,.06);}
}
/* Heights are matched to the real cards so the swap is a fade, not a jump. */
.gb-skel-card{height:232px;}
.gb-skel-ct{height:104px;}
.gb-skel-hm{height:150px;}