/* =========================================================================
   InvestigationU — stylesheet
   Hand-written. No framework. Loads in one request.
   ========================================================================= */

:root{
  --paper:#fbfaf8;
  --paper-2:#f4f2ee;
  --card:#ffffff;
  --ink:#14171c;
  --ink-2:#3b4149;
  --ink-3:#6b727c;
  --rule:#e4e0d9;
  --rule-2:#d2ccc1;

  --nav:#14171c;
  --nav-2:#1d2128;
  --nav-txt:#9aa2ac;
  --nav-hi:#f4f2ee;
  --nav-rule:#262b33;

  --accent:#a4441f;
  --accent-2:#c9673d;
  --accent-soft:#f7ece6;

  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  --sbw:280px;
  --pad:clamp(20px,3.6vw,48px);
  --maxw:1180px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101317; --paper-2:#161a1f; --card:#171b21;
    --ink:#eceae6; --ink-2:#b6bcc4; --ink-3:#848b95;
    --rule:#252a31; --rule-2:#333941;
    --nav:#0c0e11; --nav-2:#151920;
    --accent:#d9825a; --accent-2:#e8a480; --accent-soft:#241812;
  }
}
:root[data-theme="dark"]{
  --paper:#101317; --paper-2:#161a1f; --card:#171b21;
  --ink:#eceae6; --ink-2:#b6bcc4; --ink-3:#848b95;
  --rule:#252a31; --rule-2:#333941;
  --nav:#0c0e11; --nav-2:#151920;
  --accent:#d9825a; --accent-2:#e8a480; --accent-soft:#241812;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-0.021em; line-height:1.18}

:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:3px}
.sidebar :focus-visible{outline-offset:-2px}

.skip-link{position:absolute; left:-9999px; z-index:200; background:var(--ink); color:var(--paper); padding:10px 16px}
.skip-link:focus{left:8px; top:8px}

.brand{font-weight:700; letter-spacing:-0.03em; font-size:20px}
.brand span{color:var(--accent-2)}
.brand--sm{font-size:17px}

/* ---------- icon buttons ---------- */
.iconbtn{
  width:34px; height:34px; flex:none; cursor:pointer; border-radius:5px;
  border:1px solid var(--rule-2); background:transparent; color:var(--ink-3);
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:color .14s, border-color .14s;
}
.iconbtn:hover{color:var(--accent); border-color:var(--accent)}
.iconbtn svg{width:16px; height:16px}
.sidebar .iconbtn,.topbar .iconbtn{border-color:var(--nav-rule); color:var(--nav-txt)}
.sidebar .iconbtn:hover,.topbar .iconbtn:hover{color:var(--nav-hi); border-color:#3a414b}

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sbw); z-index:60;
  background:var(--nav); color:var(--nav-txt);
  display:flex; flex-direction:column; border-right:1px solid var(--nav-rule);
}
.sidebar__brand{display:block; text-decoration:none; padding:20px 20px 17px; border-bottom:1px solid var(--nav-rule)}
.sidebar__brand .brand{color:var(--nav-hi)}
.brand__sub{display:block; margin-top:6px; font-size:11.5px; color:#6d747e; line-height:1.35}

.sidebar__scroll{flex:1; overflow-y:auto; padding:8px 0 20px; overscroll-behavior:contain}
.sidebar__scroll::-webkit-scrollbar{width:8px}
.sidebar__scroll::-webkit-scrollbar-thumb{background:#2a2f37; border-radius:8px}

.grp{border-bottom:1px solid var(--nav-rule)}
.grp__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:10px; padding:11px 18px;
  color:var(--nav-txt); font-size:13.5px; font-weight:500;
}
.grp__label{flex:1}
.grp__chev{
  flex:none; width:8px; height:8px; border-right:1.5px solid #5b626c; border-bottom:1.5px solid #5b626c;
  transform:rotate(-45deg); transition:transform .18s ease;
}
.grp__btn:hover{color:var(--nav-hi); background:var(--nav-2)}
.grp__btn:hover .grp__chev{border-color:var(--accent-2)}
.grp[data-open="true"] .grp__chev{transform:rotate(45deg)}
.grp[data-open="true"] .grp__btn{color:var(--nav-hi)}
.grp[data-current="true"] .grp__btn{box-shadow:inset 2px 0 0 var(--accent)}

.grp__panel{display:none; padding:1px 0 10px}
.grp[data-open="true"] .grp__panel{display:block}

.lnk{
  display:block; text-decoration:none; color:#89909a; font-size:13px; line-height:1.4;
  padding:7px 18px 7px 30px; border-left:2px solid transparent;
}
.lnk:hover{color:var(--nav-hi); background:var(--nav-2)}
.lnk[aria-current="page"]{color:var(--nav-hi); border-left-color:var(--accent); background:var(--nav-2); font-weight:500}
.lnk--all{color:#6f7681; font-size:12.5px}

.solo{border-bottom:1px solid var(--nav-rule)}
.solo a{display:block; text-decoration:none; padding:11px 18px; font-size:13.5px; color:var(--nav-txt)}
.solo a:hover{color:var(--nav-hi); background:var(--nav-2)}
.solo a[aria-current="page"]{color:var(--nav-hi); box-shadow:inset 2px 0 0 var(--accent)}

.sidebar__foot{
  padding:11px 18px; border-top:1px solid var(--nav-rule);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sidebar__foot a{color:#7d848e; text-decoration:none; font-size:12.5px}
.sidebar__foot a:hover{color:var(--accent-2)}

/* ---------- mobile bar / drawer ---------- */
.topbar{display:none}
.scrim{
  position:fixed; inset:0; background:rgba(6,8,10,.55); z-index:55;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.scrim[hidden]{display:block}

/* =========================================================================
   SHELL
   ========================================================================= */
.shell{margin-left:var(--sbw); min-height:100vh; display:flex; flex-direction:column}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

.utility{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto; width:100%;
  padding:14px var(--pad) 0;
}
.utility__right{display:flex; align-items:center; gap:12px}

.crumb{font-size:12px; color:var(--ink-3); letter-spacing:.02em}
.crumb a{text-decoration:none; color:var(--ink-3)}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 6px; color:var(--rule-2)}

.share{display:flex; align-items:center; gap:5px}
.share a,.share button{
  width:31px; height:31px; border:1px solid var(--rule); border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-3); text-decoration:none; background:none; cursor:pointer; transition:.14s;
}
.share a:hover,.share button:hover{color:var(--accent); border-color:var(--accent)}
.share svg{width:15px; height:15px; fill:currentColor}

/* =========================================================================
   PAGE HEAD
   ========================================================================= */
.phead{padding:clamp(26px,4vw,44px) 0 clamp(24px,3vw,34px); border-bottom:1px solid var(--rule)}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.phead h1{font-size:clamp(29px,4.4vw,44px); max-width:20ch}
.phead .lede{margin:16px 0 0; max-width:62ch; font-size:clamp(16.5px,1.7vw,18.5px); color:var(--ink-2); line-height:1.6}
.byline{
  margin:20px 0 0; padding-left:14px; border-left:2px solid var(--accent);
  font-size:14px; color:var(--ink-2); max-width:58ch;
}
.byline strong{color:var(--ink); font-weight:600}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:11px 18px; font-size:14.5px; font-weight:550; border-radius:5px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .14s, border-color .14s, color .14s;
}
.btn:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--rule-2)}
.btn--ghost:hover{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn svg{width:15px; height:15px}

/* =========================================================================
   BANDS
   ========================================================================= */
.band{padding:clamp(34px,4.6vw,58px) 0; border-bottom:1px solid var(--rule)}
.band--tint{background:var(--paper-2)}
.band--last{border-bottom:0}
.bhead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px}
.bhead h2{font-size:clamp(20px,2.4vw,26px)}
.bhead p{margin:7px 0 0; color:var(--ink-3); font-size:14.5px; max-width:58ch}
.more{font-size:13.5px; color:var(--accent); text-decoration:none; font-weight:550; white-space:nowrap}
.more:hover{text-decoration:underline}

/* ---------- directory ---------- */
.dir{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.cell{background:var(--card); padding:22px 22px 18px; display:flex; flex-direction:column}
.cell__title{font-size:18px; margin-bottom:7px}
.cell__title a{text-decoration:none}
.cell__title a:hover{color:var(--accent)}
.cell__desc{font-size:14px; line-height:1.5; color:var(--ink-3); margin:0 0 14px}
.cell__list{margin:auto 0 0; padding:12px 0 0; list-style:none; border-top:1px solid var(--rule)}
.cell__list li{margin:0}
.cell__list a{
  display:block; font-size:13.5px; line-height:1.4; color:var(--ink-2);
  text-decoration:none; padding:5px 0 5px 13px; position:relative;
}
.cell__list a::before{content:""; position:absolute; left:0; top:12px; width:6px; height:1px; background:var(--rule-2)}
.cell__list a:hover{color:var(--accent)}
.cell__list a:hover::before{background:var(--accent); width:9px}

/* ---------- page list ---------- */
.plist{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.plist li{border-bottom:1px solid var(--rule)}
.plist a{display:block; text-decoration:none; padding:17px 6px; transition:padding-left .14s, background .14s}
.plist a:hover{padding-left:14px; background:var(--paper-2)}
.plist a:hover .pl__t{color:var(--accent)}
.pl__t{display:block; font-size:16.5px; font-weight:600; letter-spacing:-0.012em; transition:color .14s}
.pl__d{display:block; font-size:14px; color:var(--ink-3); margin-top:4px; line-height:1.5; max-width:70ch}

/* ---------- tools ---------- */
.tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:11px}
.tool{display:block; text-decoration:none; border:1px solid var(--rule); background:var(--card); padding:15px 16px; border-radius:6px; transition:border-color .14s, transform .12s}
.tool:hover{border-color:var(--accent); transform:translateY(-1px)}
.tool strong{display:block; font-size:14.5px; font-weight:600}
.tool span{display:block; font-size:12.8px; color:var(--ink-3); margin-top:4px; line-height:1.45}

/* ---------- feature ---------- */
.feature{display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--rule); background:var(--card); border-radius:8px; overflow:hidden}
.feature__body{padding:clamp(22px,3vw,34px)}
.tag{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); padding:3px 8px; border-radius:3px; margin-bottom:14px}
.feature__body h3{font-size:clamp(20px,2.4vw,25px)}
.feature__body p{color:var(--ink-2); font-size:15px; margin:12px 0 0; max-width:52ch}
.feature__demo{border-left:1px solid var(--rule); background:var(--paper-2); padding:20px; font-family:var(--mono); font-size:11.5px; color:var(--ink-2)}
.demo__hd{color:var(--ink-3); letter-spacing:.11em; text-transform:uppercase; font-size:9.8px; padding-bottom:9px; border-bottom:1px solid var(--rule-2); margin-bottom:4px}
.demo__row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--rule-2)}
.demo__row:last-child{border-bottom:0}
.demo__row b{font-weight:600; color:var(--ink)}

/* ---------- offer module ---------- */
.offer{border:1px solid var(--rule-2); border-left:3px solid var(--accent); background:var(--card); padding:20px 22px; border-radius:0 6px 6px 0; margin:28px 0}
.offer__k{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
.offer h4{font-size:16.5px; margin-bottom:6px}
.offer p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.offer a.btn{margin-top:14px}

/* ---------- signup ---------- */
.signup{border:1px solid var(--rule); background:var(--card); border-radius:8px; padding:clamp(20px,3vw,30px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.signup h3{font-size:19px}
.signup p{margin:7px 0 0; color:var(--ink-3); font-size:14px; max-width:48ch}
.signup form{display:flex; gap:8px}
.signup input{font:inherit; font-size:15px; padding:10px 13px; min-width:220px; border:1px solid var(--rule-2); background:var(--paper); color:var(--ink); border-radius:5px}
.signup button{font-size:14.5px; padding:10px 17px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:5px; cursor:pointer; font-weight:550}
.signup button:hover{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- prose ---------- */
.prose{font-family:var(--serif); font-size:18px; line-height:1.72; max-width:68ch; color:var(--ink)}
.prose p{margin:0 0 1.1em}
.prose h2{font-family:var(--sans); font-size:22px; margin:1.8em 0 .55em}
.prose h3{font-family:var(--sans); font-size:18px; margin:1.6em 0 .45em}
.prose a{color:var(--accent); text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.25em}
.prose li{margin:.3em 0}

/* ---------- footer ---------- */
.foot{margin-top:auto; background:var(--paper-2); border-top:1px solid var(--rule); padding:40px 0 30px; font-size:14px}
.foot__top{display:grid; grid-template-columns:minmax(260px,1.1fr) 2fr; gap:36px}
.foot__about p{margin:11px 0 0; color:var(--ink-3); font-size:13.5px; line-height:1.55; max-width:46ch}
.foot__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.foot__cols h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; font-weight:600}
.foot__cols a{display:block; text-decoration:none; color:var(--ink-2); font-size:13.5px; padding:3.5px 0}
.foot__cols a:hover{color:var(--accent)}
.foot__bottom{margin-top:32px; padding-top:18px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot__bottom p{margin:0; color:var(--ink-3); font-size:12.5px; max-width:62ch; line-height:1.5}

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width:900px){
  .topbar{
    display:flex; align-items:center; gap:11px; position:sticky; top:0; z-index:50;
    background:var(--nav); color:var(--nav-hi); padding:9px 13px; border-bottom:1px solid var(--nav-rule);
  }
  .topbar__brand{text-decoration:none; color:var(--nav-hi); font-weight:700; letter-spacing:-0.03em; font-size:17px; flex:1}
  .topbar__brand span{color:var(--accent-2)}
  .burger{
    background:none; border:1px solid var(--nav-rule); border-radius:5px; width:38px; height:38px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; flex:none;
  }
  .burger i{display:block; width:16px; height:1.5px; background:var(--nav-hi); transition:transform .2s, opacity .2s}
  body[data-nav="open"] .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  body[data-nav="open"] .burger i:nth-child(2){opacity:0}
  body[data-nav="open"] .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* The drawer slides with `left`, not `transform`. Slightly less slick on paper,
     but it behaves identically on every phone browser instead of most of them. */
  .sidebar{
    width:min(318px,86vw);
    left:calc(0px - min(318px,86vw) - 8px);
    visibility:hidden;
    transition:left .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s;
  }
  body[data-nav="open"] .sidebar{
    left:0; visibility:visible;
    box-shadow:0 0 44px rgba(0,0,0,.45);
    transition:left .24s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  body[data-nav="open"] .scrim{opacity:1; pointer-events:auto}
  body[data-nav="open"]{overflow:hidden}

  .shell{margin-left:0}
  .utility__theme{display:none}          /* already in the top bar on mobile */
  .grp__btn{padding:14px 17px}
  .lnk{padding:11px 17px 11px 29px}

  .feature{grid-template-columns:1fr}
  .feature__demo{border-left:0; border-top:1px solid var(--rule)}
  .signup{grid-template-columns:1fr}
  .signup input{min-width:0; flex:1 1 180px}
  .foot__top{grid-template-columns:1fr; gap:26px}
}

@media (max-width:560px){
  :root{--pad:17px}
  .dir{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .actions .btn{flex:1 1 100%; justify-content:center}
  .utility{flex-wrap:wrap; gap:9px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* =========================================================================
   STATE PAGES
   ========================================================================= */
.glance{width:100%; border-collapse:collapse; font-size:14px; border:1px solid var(--rule)}
.glance th{
  text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 14px; background:var(--paper-2); border-bottom:1px solid var(--rule);
  font-weight:600; white-space:nowrap;
}
.glance td{padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
.glance tr:last-child td{border-bottom:0}
.glance tr:hover td{background:var(--paper-2)}
.glance td:first-child a{font-weight:600; text-decoration:none}
.glance td:first-child a:hover{color:var(--accent)}
.glance .yes{color:var(--accent); font-weight:600}
.glance .no{color:var(--ink-3)}

.local{border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  background:var(--card); padding:20px 22px; margin-bottom:12px}
.local h3{font-size:17px; margin-bottom:8px}
.local__body{font-size:15px; line-height:1.65; color:var(--ink-2); max-width:70ch}
.local__body p{margin:0 0 .8em}
.local__body p:last-child{margin-bottom:0}
.local__body strong{color:var(--ink)}
.local__body ul{margin:.4em 0 .8em; padding-left:1.2em}
.local__body li{margin:.25em 0}
.local__body a{color:var(--accent)}

.rec{border:1px solid var(--rule); background:var(--card); border-radius:8px; padding:18px 20px; margin-bottom:12px}
.rec__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:13px}
.rec__head h3{font-size:17px}
.rec__go{font-size:13.5px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap}
.rec__go:hover{text-decoration:underline}
.rec__facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 20px; margin:0}
.rec__facts dt{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.rec__facts dd{margin:0; font-size:14px; font-weight:550; line-height:1.45}
.rec__facts .cite{font-family:var(--mono); font-size:12.5px; font-weight:400; color:var(--ink-2)}
.rec__note{margin-top:14px; padding-top:13px; border-top:1px solid var(--rule); font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:72ch}
.rec__note p{margin:0 0 .7em}
.rec__note p:last-child{margin-bottom:0}
.rec__note strong{color:var(--ink)}
.rec__note a{color:var(--accent)}
.rec__note ul{margin:.4em 0 .7em; padding-left:1.2em}
.rec__watch{margin-top:11px; padding:10px 13px; border-radius:6px; background:var(--accent-soft);
  font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.rec__watch strong{color:var(--accent)}

/* article pages */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:0 0 30px;
}
.facts > div{background:var(--card); padding:14px 16px}
.facts dt{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.facts dd{margin:0; font-size:15px; font-weight:600; line-height:1.4}

.steps{margin:32px 0 0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.step{background:var(--card); padding:20px 22px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.step__n{
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex:none;
}
.step__b h3{font-size:17px; margin-bottom:7px}
.step__b p{margin:0 0 .7em; font-size:15px; line-height:1.65; color:var(--ink-2); max-width:66ch}
.step__b p:last-child{margin-bottom:0}
.step__b ul{margin:.4em 0 .7em; padding-left:1.2em; font-size:15px; color:var(--ink-2)}
.step__b li{margin:.25em 0}
.step__b strong{color:var(--ink)}
.step__b a{color:var(--accent)}
@media (max-width:560px){ .step{grid-template-columns:1fr; gap:10px} }

.prose .callout{
  border:1px solid var(--rule-2); border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
  background:var(--paper-2); padding:15px 18px; margin:1.4em 0; font-family:var(--sans); font-size:15px;
}
.prose .callout p{margin:0 0 .6em}
.prose .callout p:last-child{margin-bottom:0}
.prose table{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14.5px; margin:1.3em 0}
.prose th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:9px 12px; border-bottom:1px solid var(--rule)}
.prose td{padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--paper-2); padding:1px 5px; border-radius:3px}

/* county / local directory grid */
.dirfilter input{
  font:inherit; font-size:13.5px; padding:9px 12px; width:210px;
  border:1px solid var(--rule-2); border-radius:6px; background:var(--card); color:var(--ink);
}
.dirfilter input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.dirgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.dirrow{
  background:var(--card); padding:11px 14px; text-decoration:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:14px; transition:background .12s;
}
.dirrow:hover{background:var(--accent-soft)}
.dirrow:hover .dirrow__name{color:var(--accent)}
.dirrow__name{font-weight:550}
.dirrow__go{color:var(--ink-3); font-size:13px}
.dirrow:hover .dirrow__go{color:var(--accent)}
.dirrow__tag{
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  padding:2px 6px; border-radius:3px; border:1px solid var(--rule-2); color:var(--ink-3); flex:none;
}
.dirrow__tag--search{color:var(--accent); border-color:var(--accent)}
.dirrow--dead{opacity:.55; cursor:default}
.dirrow--dead:hover{background:var(--card)}
.dirnone{margin:14px 0 0; color:var(--ink-3); font-size:14px}
@media (max-width:560px){ .dirfilter input{width:100%} .dirgrid{grid-template-columns:1fr 1fr} }

.restricted{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.restricted li{background:var(--card); padding:15px 17px; font-size:14px; line-height:1.55; color:var(--ink-2)}
.restricted strong{display:block; color:var(--ink); font-size:14.5px; margin-bottom:3px}

@media (max-width:560px){
  .glance{font-size:13px}
  .glance th,.glance td{padding:9px 10px}
  .rec{padding:16px}
}

/* =========================================================================
   SEARCH TOOL  (political contributor search, and reusable by other tools)
   ========================================================================= */
.panel{border:1px solid var(--rule); background:var(--card); border-radius:9px; overflow:hidden}

.modes{display:flex; border-bottom:1px solid var(--rule); background:var(--paper-2)}
.mode{
  flex:1; padding:13px 16px; border:0; background:none; cursor:pointer; text-align:center;
  font-size:14.5px; font-weight:550; color:var(--ink-3); border-bottom:2px solid transparent;
}
.mode:hover{color:var(--ink)}
.mode[aria-selected="true"]{color:var(--ink); background:var(--card); border-bottom-color:var(--accent)}
.mode small{display:block; font-weight:400; font-size:12px; color:var(--ink-3); margin-top:2px}
.mode[aria-selected="true"] small{color:var(--ink-3)}

.pbody{padding:20px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:13px}
.fgrid--tight{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); margin-bottom:5px}
.field input,.field select{
  width:100%; font:inherit; font-size:15px; padding:10px 12px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-2); border-radius:6px;
}
.field input:focus,.field select:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.field .hint{display:block; margin-top:5px; font-size:11.5px; color:var(--ink-3); line-height:1.4}
.field--wide{grid-column:1 / -1}
.field label em{font-style:normal; font-weight:400; color:var(--ink-3); font-size:11px; letter-spacing:0}
.hint{font-size:11.5px; color:var(--ink-3); line-height:1.4}

/* filter-these-results box */
.ffield{position:relative; display:flex; align-items:center}
.ffield svg{position:absolute; left:9px; width:14px; height:14px; color:var(--ink-3); pointer-events:none}
.ffield input{
  font:inherit; font-size:13px; padding:7px 10px 7px 28px; width:190px;
  border:1px solid var(--rule-2); border-radius:6px; background:var(--card); color:var(--ink);
}
.ffield input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.ffield input::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:640px){ .ffield{flex:1 1 100%} .ffield input{width:100%} }

.advtoggle{
  margin-top:15px; background:none; border:0; padding:0; cursor:pointer;
  font-size:13.5px; color:var(--accent); font-weight:550;
}
.advtoggle:hover{text-decoration:underline}
.adv{display:none; margin-top:15px; padding-top:16px; border-top:1px dashed var(--rule-2)}
.adv[data-open="true"]{display:block}
.adv .fgrid + .fgrid{margin-top:13px}

.cycles{display:flex; flex-wrap:wrap; gap:7px; margin-top:6px}
.cyc{position:relative}
.cyc input{position:absolute; opacity:0; width:0; height:0}
.cyc span{
  display:inline-block; padding:6px 11px; font-size:13px; border-radius:20px; cursor:pointer;
  border:1px solid var(--rule-2); color:var(--ink-2); background:var(--paper);
}
.cyc input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}
.cyc input:focus-visible + span{outline:2px solid var(--accent-2); outline-offset:2px}

.prun{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--rule)}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; font-size:13.5px; color:var(--ink-3)}
.linkbtn:hover{color:var(--accent); text-decoration:underline}

/* ---------- results ---------- */
.rwrap{margin-top:26px}
.rbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 16px; border:1px solid var(--rule); border-radius:8px 8px 0 0;
  background:var(--paper-2); border-bottom:0;
}
.stats{display:flex; gap:22px; flex-wrap:wrap}
.stat b{display:block; font-size:18px; letter-spacing:-0.02em; line-height:1.2}
.stat span{font-size:11.5px; color:var(--ink-3); letter-spacing:.03em}
.rctl{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rctl select{font:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--rule-2); border-radius:6px; background:var(--card); color:var(--ink)}
.minibtn{
  font-size:13px; padding:7px 12px; border:1px solid var(--rule-2); border-radius:6px;
  background:var(--card); color:var(--ink-2); cursor:pointer;
}
.minibtn:hover{border-color:var(--accent); color:var(--accent)}

.rlist{border:1px solid var(--rule); border-radius:0 0 8px 8px; background:var(--card); overflow:hidden}
.person{border-bottom:1px solid var(--rule)}
.person:last-child{border-bottom:0}
.person__hd{
  width:100%; display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:start;
  padding:15px 16px; background:none; border:0; text-align:left; cursor:pointer;
}
.person__hd:hover{background:var(--paper-2)}
.person__main{display:block; min-width:0}
.person__nm{display:block; font-size:15.5px; font-weight:650; letter-spacing:-0.01em; line-height:1.3}
.person__addr{display:block; font-size:13.5px; color:var(--ink-2); margin-top:5px; line-height:1.5}
.person__job{display:block; font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.45}
.person__tot{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.person__tot b{display:block; font-size:16px; letter-spacing:-0.02em}
.person__tot span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.person__chev{
  width:8px; height:8px; margin-top:8px; align-self:center;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .15s;
}
.person[data-open="true"] .person__chev{transform:rotate(-135deg)}
.person__body{display:none; padding:0 16px 15px}
.person[data-open="true"] .person__body{display:block}

.addrmore{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--accent); border:1px solid var(--accent); background:transparent;
  vertical-align:1px; white-space:nowrap;
}
.addrhist{border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; padding:13px 15px; margin:4px 0 16px; background:var(--paper-2)}
.addrhist__hd{margin:0 0 9px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.addrhist__row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:6px 0; border-bottom:1px dashed var(--rule-2); font-size:13.5px}
.addrhist__row:last-of-type{border-bottom:0}
.addrhist__row span:first-child{font-weight:550}
.addrhist__row span:last-child{color:var(--ink-3); font-size:12.5px; white-space:nowrap}
.addrhist__note{margin:11px 0 0; padding-top:10px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-3); line-height:1.5}

.txn{width:100%; border-collapse:collapse; font-size:13px}
.txn th{
  text-align:left; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:8px 10px; border-bottom:1px solid var(--rule);
}
.txn td{padding:9px 10px; border-bottom:1px solid var(--rule); vertical-align:top}
.txn tr:last-child td{border-bottom:0}
.txn td:last-child,.txn th:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.txn a{color:var(--accent); text-decoration:none}
.txn a:hover{text-decoration:underline}
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* where a company's people cluster */
.cluster{padding:16px; background:var(--paper-2); border-bottom:1px solid var(--rule)}
.cluster__hd{margin:0 0 12px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.cluster__rows{display:grid; gap:7px}
.cluster__row{display:grid; grid-template-columns:minmax(120px,1.4fr) 3fr auto; gap:12px; align-items:center; font-size:13.5px}
.cluster__town{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cluster__bar{background:var(--rule); border-radius:3px; height:8px; overflow:hidden}
.cluster__bar i{display:block; height:100%; background:var(--accent); border-radius:3px}
.cluster__n{color:var(--ink-3); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
.cluster__more{margin:9px 0 0; font-size:12.5px; color:var(--ink-3)}
.cluster__note{margin:11px 0 0; padding-top:10px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-3); line-height:1.5}
@media (max-width:560px){ .cluster__row{grid-template-columns:1fr auto; } .cluster__bar{display:none} }

.note{padding:13px 16px; font-size:13px; color:var(--ink-3); background:var(--paper-2); border-top:1px solid var(--rule)}
.msg{padding:34px 20px; text-align:center; color:var(--ink-3); font-size:15px}
.msg strong{display:block; color:var(--ink); font-size:16.5px; margin-bottom:6px; font-weight:600}
.msg--err{color:#a4441f}

.spin{display:inline-block; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

.loadmore{display:block; width:100%; padding:14px; border:0; border-top:1px solid var(--rule); background:var(--paper-2); cursor:pointer; font-size:14px; font-weight:550; color:var(--ink-2)}
.loadmore:hover{color:var(--accent)}
.loadmore[disabled]{color:var(--ink-3); cursor:default}

@media (max-width:640px){
  .person__hd{grid-template-columns:1fr auto; gap:10px}
  .person__chev{display:none}
  .rbar{flex-direction:column; align-items:stretch}
  .stats{justify-content:space-between}
}