:root{
  --bg:#313338;
  --bg-rail:#26282c;
  --bg-recessed:#2b2d31;
  --bg-hover:#35373c;
  --bg-input:#1e1f22;

  --text:#dbdee1;
  --text-muted:#949ba4;
  --text-faint:#72767d;

  --accent:#5E6AD2;
  --accent-hover:#6E79DE;

  --money:#3BA55D;
  --danger:#ED4245;
  --gold:#DDAD52;

  --kraft:#DCC89E;
  --kraft-2:#CDB587;
  --ink-on-kraft:#2C2312;

  --radius:10px;
  --radius-sm:6px;
  --radius-pill:999px;
}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}


.mono{
  font-family:'IBM Plex Mono',monospace;
}


a{
  color:inherit;
  text-decoration:none;
}


/* BUTTONS */

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  outline:none;
  transition:all .15s ease;
}


button:active{
  transform:translateY(1px);
}


:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}



/* LAYOUT */

.shell{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}



.main-scroll{
  flex:1;
  min-width:0;
}



main{
  max-width:1120px;
  margin:0 auto;
  padding:40px 32px 80px;
}



.view{
  display:none;
}


.view.active{
  display:block;
}





/* HEADER */


header.rail{

  width:100%;

  background:var(--bg-rail);

  padding:12px 32px;

  position:sticky;

  top:0;

  z-index:90;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-bottom:1px solid rgba(255,255,255,.05);

  box-shadow:0 4px 20px rgba(0,0,0,.2);

}




.rail-brand{

display:flex;

align-items:center;

gap:12px;

}



.rail-brand .badge{

width:36px;

height:36px;

border-radius:11px;

background:var(--accent);

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

font-size:14px;

color:white;

}



.rail-brand .name{

font-weight:700;

font-size:15px;

}



.rail-brand .sub{

font-size:10.5px;

color:var(--text-faint);

}





/* NAV */


nav.tabs{

display:flex;

align-items:center;

gap:6px;

}



nav.tabs button{

display:flex;

align-items:center;

gap:8px;

background:transparent;

color:var(--text-muted);

padding:8px 14px;

border-radius:var(--radius-pill);

font-size:13.5px;

font-weight:500;

}



nav.tabs button:hover{

background:var(--bg-hover);

color:var(--text);

}



nav.tabs button.active{

background:var(--bg-recessed);

color:white;

font-weight:600;

border:1px solid rgba(255,255,255,.08);

}



nav.tabs .dot{

width:6px;

height:6px;

border-radius:50%;

background:var(--text-faint);

}



nav.tabs button.active .dot{

background:var(--accent);

}
.eyebrow{

font-family:'IBM Plex Mono',monospace;

font-size:11px;

color:var(--accent);

letter-spacing:.08em;

margin-bottom:14px;

text-transform:uppercase;

font-weight:600;

}



.hero-h{

font-weight:800;

font-size:38px;

line-height:1.15;

margin:0 0 14px;

max-width:19ch;

letter-spacing:-.015em;

}



.redact{

background:#000;

color:#000;

border-radius:4px;

padding:0 6px;

transition:
background 700ms ease var(--d,0ms),
color 700ms ease var(--d,0ms);

}



.redact.revealed{

background:transparent;

color:inherit;

}



.lede{

color:var(--text-muted);

font-size:15.5px;

line-height:1.6;

max-width:58ch;

margin:0 0 26px;

}




/* STATS */


.stat-row{

display:flex;

gap:12px;

flex-wrap:wrap;

}



.stat-card{

background:var(--bg-recessed);

border-radius:var(--radius);

padding:14px 20px;

min-width:150px;

}



.stat-card .n{

font-family:'IBM Plex Mono',monospace;

font-size:22px;

font-weight:600;

color:var(--accent);

}



.stat-card .l{

font-size:11.5px;

color:var(--text-faint);

margin-top:3px;

}






/* SEARCH */


.search-block{

margin:32px 0 20px;

}



.search-box{

position:relative;

max-width:520px;

}



.search-box input{

width:100%;

background:var(--bg-input);

border:1px solid transparent;

color:var(--text);

font-size:14.5px;

padding:12px 16px;

border-radius:var(--radius);

}



.search-box input::placeholder{

color:var(--text-faint);

}



.search-box input:focus{

border-color:var(--accent);

outline:none;

}



.state-list{

position:absolute;

top:calc(100% + 6px);

left:0;

right:0;

background:var(--bg-recessed);

border-radius:var(--radius);

max-height:240px;

overflow-y:auto;

display:none;

z-index:40;

padding:6px;

box-shadow:0 12px 32px rgba(0,0,0,.45);

}



.state-list.open{

display:block;

}



.state-list button{

display:flex;

justify-content:space-between;

width:100%;

background:none;

color:var(--text);

padding:9px 12px;

border-radius:var(--radius-sm);

}



.state-list button:hover{

background:var(--accent);

color:white;

}



.state-list .count{

font-family:'IBM Plex Mono',monospace;

font-size:11px;

color:var(--text-faint);

}






/* CHIPS */


.chips{

display:flex;

gap:8px;

flex-wrap:wrap;

margin-top:16px;

}



.chip{

background:var(--bg-recessed);

border:1px solid rgba(255,255,255,.05);

color:var(--text-muted);

padding:8px 16px;

border-radius:var(--radius-pill);

font-size:12.5px;

font-weight:600;

}



.chip:hover{

background:var(--bg-hover);

color:var(--text);

}



.chip.active{

background:var(--accent);

color:white;

border-color:var(--accent);

}






.api-note{

font-size:12px;

color:#F5C97A;

font-family:'IBM Plex Mono',monospace;

background:rgba(221,173,82,.12);

padding:9px 14px;

border-radius:var(--radius-sm);

margin-top:16px;

display:inline-block;

}







/* STATE PANEL */


.state-panel{

display:none;

align-items:center;

background:var(--bg-recessed);

border-radius:var(--radius);

padding:16px 20px;

margin:22px 0;

flex-wrap:wrap;

}



.state-panel.show{

display:flex;

}



.state-panel .col{

padding:0 20px;

border-left:1px solid var(--bg-hover);

}



.state-panel .col:first-child{

border-left:none;

padding-left:0;

}



.state-panel .l{

font-size:10.5px;

text-transform:uppercase;

color:var(--text-faint);

}



.state-panel .v{

font-family:'IBM Plex Mono',monospace;

font-size:15px;

margin-top:3px;

}



.follow-btn{

margin-left:auto;

background:var(--accent);

color:white;

padding:10px 20px;

border-radius:var(--radius-pill);

font-weight:600;

}



.follow-btn:hover{

background:var(--accent-hover);

}
.content-grid{

display:grid;

grid-template-columns:1fr 280px;

gap:24px;

align-items:start;

}



@media(max-width:900px){

.content-grid{

grid-template-columns:1fr;

}

}



.sidebar{

display:flex;

flex-direction:column;

gap:16px;

position:sticky;

top:80px;

}





.side-card{

background:var(--bg-recessed);

border-radius:var(--radius);

padding:18px;

}



.side-card h4{

font-size:13.5px;

font-weight:700;

margin:0 0 10px;

}



.side-card p{

font-size:12.5px;

color:var(--text-muted);

line-height:1.5;

margin:0 0 14px;

}





.newsletter-form{

display:flex;

flex-direction:column;

gap:8px;

}



.newsletter-form input,
.newsletter-form select{

background:var(--bg-input);

border:1px solid transparent;

color:var(--text);

padding:9px 11px;

border-radius:var(--radius-sm);

}



.newsletter-form button{

background:var(--accent);

color:white;

padding:10px 12px;

border-radius:var(--radius-sm);

font-weight:600;

}



.newsletter-msg{

display:none;

font-size:11.5px;

color:var(--money);

margin-top:10px;

}



.newsletter-msg.show{

display:block;

}





/* ADS */


.ad-slot{

background:var(--bg-recessed);

border-radius:var(--radius);

padding:18px;

text-align:center;

}



.ad-eyebrow{

font-size:9.5px;

text-transform:uppercase;

letter-spacing:.08em;

color:var(--text-faint);

margin-bottom:8px;

}



.ad-body{

font-size:11.5px;

color:var(--text-faint);

}





.ad-slot.in-feed{

padding:12px 16px;

text-align:left;

display:flex;

align-items:center;

gap:10px;

}







/* FEED */


.feed-head{

display:flex;

justify-content:space-between;

align-items:baseline;

margin-bottom:14px;

}



.feed-head h3{

font-size:13px;

letter-spacing:.02em;

color:var(--text-muted);

text-transform:uppercase;

margin:0;

}



.feed-count{

font-size:12px;

color:var(--text-faint);

}







.card{

display:flex;

gap:16px;

align-items:flex-start;

background:var(--bg-recessed);

border-radius:var(--radius);

padding:16px 18px;

margin-bottom:8px;

width:100%;

color:var(--text);

text-align:left;

transition:.15s ease;

}



.card:hover{

background:var(--bg-hover);

transform:translateY(-1px);

}





.card .avatar{

width:42px;

height:42px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

font-size:12px;

color:white;

flex-shrink:0;

}



.card .body{

flex:1;

}



.card .toprow{

display:flex;

gap:8px;

margin-bottom:4px;

flex-wrap:wrap;

}



.card .docket{

font-family:'IBM Plex Mono',monospace;

font-size:10.5px;

color:var(--gold);

}



.card .date{

font-size:11px;

color:var(--text-faint);

}



.card h4{

font-size:15.5px;

margin:0 0 5px;

color:white;

}



.card p{

font-size:13px;

color:var(--text-muted);

line-height:1.5;

margin:0;

}



.tags{

display:flex;

gap:6px;

margin-top:9px;

}



.tag{

font-size:10px;

padding:3px 9px;

border-radius:var(--radius-pill);

background:var(--bg-hover);

color:var(--text-muted);

font-weight:600;

}



.tag.state{

background:rgba(94,106,210,.18);

color:#A6ADF0;

}



.card .side{

text-align:right;

white-space:nowrap;

}



.amount{

font-family:'IBM Plex Mono',monospace;

font-weight:700;

color:var(--money);

}



.srcs{

font-size:10.5px;

color:var(--text-faint);

margin-top:6px;

}





.empty{

padding:48px 20px;

text-align:center;

color:var(--text-faint);

background:var(--bg-recessed);

border-radius:var(--radius);

}
.overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.65);

display:none;

align-items:flex-start;

justify-content:center;

overflow-y:auto;

padding:48px 20px;

z-index:100;

}



.overlay.open{

display:flex;

}



.sheet{

background:var(--kraft);

color:var(--ink-on-kraft);

max-width:640px;

width:100%;

border-radius:16px;

position:relative;

padding:40px 42px 44px;

box-shadow:0 24px 60px rgba(0,0,0,.5);

}



.sheet::before{

content:'';

position:absolute;

top:0;

left:0;

right:0;

height:5px;

background:repeating-linear-gradient(
90deg,
var(--danger) 0 16px,
transparent 16px 24px
);

}



.sheet .close{

position:absolute;

top:16px;

right:18px;

background:rgba(0,0,0,.08);

color:var(--ink-on-kraft);

font-size:18px;

width:28px;

height:28px;

border-radius:50%;

}



.sheet .close:hover{

background:rgba(0,0,0,.16);

}



.docket-stamp{

display:inline-block;

background:var(--danger);

color:white;

font-family:'IBM Plex Mono',monospace;

font-size:11px;

font-weight:700;

padding:5px 12px;

border-radius:var(--radius-pill);

margin-bottom:18px;

}



.sheet h2{

font-size:26px;

line-height:1.22;

margin:0 0 14px;

}



.byline{

font-family:'IBM Plex Mono',monospace;

font-size:11.5px;

color:#5c4e30;

display:flex;

gap:16px;

flex-wrap:wrap;

margin-bottom:22px;

}



.article-body p{

font-size:15px;

line-height:1.7;

margin-bottom:15px;

}



.stat-line{

display:flex;

gap:20px;

flex-wrap:wrap;

background:var(--kraft-2);

border-radius:10px;

padding:15px 17px;

margin:20px 0;

}



.stat-line div{

font-family:'IBM Plex Mono',monospace;

}



.stat-line .l{

font-size:10px;

text-transform:uppercase;

color:#5c4e30;

}



.stat-line .v{

font-size:14px;

font-weight:600;

}







/* VENDORS */


.page-head{

margin-bottom:26px;

}



.page-head h2{

font-size:28px;

font-weight:800;

margin:0 0 8px;

}



.page-head p{

font-size:14px;

color:var(--text-muted);

line-height:1.6;

}



.vendor-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(220px,1fr));

gap:12px;

}



.vendor-card{

background:var(--bg-recessed);

border-radius:var(--radius);

padding:18px;

color:var(--text);

text-align:left;

transition:.15s ease;

}



.vendor-card:hover{

background:var(--bg-hover);

transform:translateY(-1px);

}



.vendor-card .avatar{

width:38px;

height:38px;

border-radius:11px;

display:flex;

align-items:center;

justify-content:center;

background:var(--accent);

color:white;

font-weight:800;

margin-bottom:12px;

}



.vendor-card h4{

margin:0 0 12px;

font-size:15.5px;

}



.vstat{

display:flex;

justify-content:space-between;

font-size:11.5px;

color:var(--text-muted);

padding:5px 0;

border-top:1px solid var(--bg-hover);

}



.vstat b{

color:var(--money);

font-family:'IBM Plex Mono',monospace;

}







/* PROTECT */


.protect-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

}



@media(max-width:820px){

.protect-grid{

grid-template-columns:1fr;

}

}



.protect-card{

background:var(--bg-recessed);

border-radius:var(--radius);

padding:22px;

}



.protect-card .num{

width:26px;

height:26px;

border-radius:50%;

background:var(--accent);

display:inline-flex;

align-items:center;

justify-content:center;

font-size:11px;

font-family:'IBM Plex Mono',monospace;

color:white;

margin-bottom:12px;

}



.protect-card p{

color:var(--text-muted);

line-height:1.6;

font-size:13.5px;

}



.template{

background:var(--bg-input);

padding:12px 14px;

border-radius:var(--radius-sm);

font-family:'IBM Plex Mono',monospace;

font-size:11px;

color:var(--text-muted);

}







/* RESOURCES / ABOUT */


.resource-list{

margin-top:36px;

}



.resource-item{

display:flex;

justify-content:space-between;

padding:14px 0;

border-bottom:1px solid var(--bg-recessed);

}



.rname{

font-weight:600;

}



.rdesc{

font-size:12px;

color:var(--text-faint);

text-align:right;

}



.about-body{

max-width:64ch;

}



.about-body p{

font-size:14.5px;

line-height:1.75;

color:var(--text-muted);

}



.about-body h4{

font-size:12.5px;

text-transform:uppercase;

margin-top:30px;

}






/* FOOTER */


footer{

max-width:1120px;

margin:auto;

padding:0 32px 44px;

}



.footer-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:20px;

}



.footer-note{

font-size:11.5px;

line-height:1.7;

color:var(--text-faint);

}




@media(max-width:820px){

header.rail{

flex-direction:column;

gap:12px;

}


nav.tabs{

flex-wrap:wrap;

justify-content:center;

}


.footer-grid{

grid-template-columns:1fr;

}


}