/* ============================================================
   hlvd.forum — Hop Latent Viroid knowledge base
   BRUTALIST: stark black/white, electric-lime hazard accent,
   hard 2px borders, offset shadows, heavy uppercase + mono meta.
   Reputation = "Stars". No emoji.
   ============================================================ */
:root{
  --paper:#f3f3ee;
  --card:#ffffff;
  --ink:#0a0a0a;
  --ink-2:#26261f;
  --muted:#6a6a60;
  --line:#0a0a0a;
  --acc:#c8f000;        /* electric lime / hazard */
  --acc-d:#a9cf00;
  --alert:#ff3b1f;      /* infected / danger red */
  --shadow:5px 5px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --disp:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--disp);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* icons */
.ic{width:18px;height:18px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}
.ic-fill{fill:currentColor;stroke:none}
.ic-lg{width:24px;height:24px}

/* mono helpers */
.mono{font-family:var(--mono)}
.up{text-transform:uppercase;letter-spacing:.04em}

/* ---------- alert strip ---------- */
.alertbar{background:var(--ink);color:#fff;font-family:var(--mono);font-size:11.5px}
.alertbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;letter-spacing:.03em}
.alertbar .tagA{background:var(--acc);color:var(--ink);font-weight:700;padding:2px 7px;margin-right:9px;text-transform:uppercase}
.alertbar a{color:#fff;text-decoration:none}
.alertbar .ab-right{display:flex;gap:16px}
.alertbar a:hover{color:var(--acc)}

/* ---------- masthead ---------- */
.masthead{background:var(--card);border-bottom:3px solid var(--ink)}
.masthead .wrap{display:flex;align-items:center;gap:18px;padding:18px 20px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mk{width:46px;height:46px;flex:none;border:2px solid var(--ink);background:var(--ink)}
.brand .wm{font-weight:800;font-size:27px;letter-spacing:-.04em;text-transform:lowercase;line-height:1}
.brand .wm .d{background:var(--acc);padding:0 4px;margin-left:1px}
.brand .sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
.search{margin-left:auto;display:flex;border:2px solid var(--ink);background:#fff;max-width:330px;flex:1}
.search input{border:0;outline:0;padding:10px 12px;font-family:var(--mono);font-size:12.5px;width:100%;background:transparent}
.search button{border:0;border-left:2px solid var(--ink);background:var(--ink);color:#fff;padding:0 14px;cursor:pointer}
.search button .ic{color:#fff}
.m-actions{display:flex;gap:9px;flex:none}
@media(max-width:820px){.search{display:none}}

/* ---------- nav ---------- */
.nav{background:var(--card);border-bottom:3px solid var(--ink)}
.nav .wrap{display:flex;gap:0;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  padding:13px 16px;border-right:2px solid var(--ink);font-weight:600;color:var(--ink)}
.nav a:first-child{border-left:2px solid var(--ink)}
.nav a:hover{background:var(--ink);color:#fff}
.nav a.active{background:var(--acc);color:var(--ink)}
.nav .spacer{margin-left:auto;border:0}
@media(max-width:680px){.nav .wrap{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}}

/* ---------- layout ---------- */
.layout{display:flex;gap:24px;padding:26px 0 46px;align-items:flex-start}
.main{flex:1;min-width:0}
.rail{width:300px;flex:none}
@media(max-width:900px){.layout{flex-direction:column}.rail{width:100%}}

.crumb{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--ink);border-bottom:1px solid var(--acc)}
.crumb .s{margin:0 8px;color:#bdbdb2}

/* ---------- box / card ---------- */
.box{background:var(--card);border:2px solid var(--ink);margin-bottom:20px}
.box.shadow{box-shadow:var(--shadow)}
.box-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--card)}
.box-head h2{margin:0;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.box-head h2 .sq{width:12px;height:12px;background:var(--acc);border:2px solid var(--ink);display:inline-block;flex:none}
.box-head .more{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.box-head .more a{border-bottom:1px solid var(--acc)}
.box-head.invert{background:var(--ink)}
.box-head.invert h2{color:#fff}
.box-head.invert .more{color:#aaa}
.box-body{padding:16px}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:var(--shadow);padding:30px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.hero .kick{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);margin-bottom:12px}
.hero h1{font-size:33px;line-height:1.04;margin:0 0 14px;text-transform:uppercase;letter-spacing:-.02em;font-weight:800;max-width:660px}
.hero h1 mark{background:var(--acc);color:var(--ink);padding:0 6px}
.hero p{font-size:15px;color:#d7d7cf;max-width:560px;margin:0 0 20px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .hnote{font-family:var(--mono);font-size:11px;color:#9a9a90;margin-top:14px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:#fff;color:var(--ink);
  font-family:var(--mono);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:10px 16px;cursor:pointer;transition:transform .08s, box-shadow .08s}
.btn .ic{width:15px;height:15px}
.btn:hover{box-shadow:var(--shadow-sm);transform:translate(-1px,-1px);color:var(--ink)}
.btn:active{box-shadow:none;transform:translate(0,0)}
.btn-acc{background:var(--acc)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:#fff}
.btn-sm{padding:7px 11px;font-size:11px}
.btn-block{display:flex;width:100%;justify-content:center}

/* ---------- category list ---------- */
.cat{display:flex;gap:16px;align-items:stretch;padding:0;border-top:2px solid var(--ink)}
.cat:first-child{border-top:0}
.cat:hover{background:var(--acc)}
.cat .num{font-family:var(--mono);font-weight:700;font-size:22px;width:64px;flex:none;border-right:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.cat .cmeta{flex:1;min-width:0;padding:15px 4px}
.cat .cmeta h3{margin:0 0 4px;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.cat .cmeta p{margin:0;font-size:13px;color:var(--muted)}
.cat:hover .cmeta p{color:var(--ink-2)}
.cat .cstat{width:150px;flex:none;border-left:2px solid var(--ink);padding:15px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted);text-align:right}
.cat:hover .cstat{color:var(--ink)}
.cat .cstat b{display:block;color:var(--ink);font-size:17px}
@media(max-width:640px){.cat .cstat{display:none}}

/* ---------- thread rows ---------- */
.row{display:flex;gap:14px;align-items:center;padding:13px 16px;border-top:2px solid var(--ink)}
.row:first-child{border-top:0}
.row:hover{background:#fbfbf6}
.vote{flex:none;width:50px;border:2px solid var(--ink);text-align:center;padding:5px 0;background:#fff}
.vote .ic{width:14px;height:14px}
.vote b{display:block;font-family:var(--mono);font-size:14px;font-weight:700}
.vote span{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;color:var(--muted)}
.avatar{width:38px;height:38px;flex:none;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:12px;background:#e9e9e2}
.avatar.lg{width:84px;height:84px;font-size:26px}
.avatar.sm{width:30px;height:30px;font-size:10px}
.rbody{flex:1;min-width:0}
.rbody .rt{font-size:14.5px;font-weight:700;line-height:1.3}
.rbody .rt:hover{background:var(--acc)}
.rbody .rm{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.02em}
.rbody .rm a{border-bottom:1px solid var(--acc)}
.rstat{flex:none;text-align:right;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--muted);min-width:88px}
.rstat b{display:block;color:var(--ink);font-size:15px}
@media(max-width:640px){.rstat{display:none}}

/* tags */
.tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--ink);padding:1px 6px;margin-right:6px;background:#fff;vertical-align:middle}
.tag .ic{width:10px;height:10px}
.tag-pin{background:var(--acc)}
.tag-hot{background:var(--alert);color:#fff;border-color:var(--ink)}
.tag-solved{background:var(--ink);color:#fff}

/* ---------- stars / tiers ---------- */
.stars{font-family:var(--mono);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.stars .ic{width:13px;height:13px;color:var(--ink)}
.tier{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border:2px solid var(--ink);padding:2px 7px;background:#fff}
.tier .ic{width:11px;height:11px}
.tier-1{background:#fff}
.tier-2{background:#eaeae2}
.tier-3{background:#dfe7c0}
.tier-4{background:var(--acc)}
.tier-5{background:var(--ink);color:#fff}
.tier-5 .ic{color:var(--acc)}

/* leaderboard */
.lead{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:2px solid var(--ink)}
.lead:first-child{border-top:0}
.lead .rk{font-family:var(--mono);font-weight:700;width:26px;text-align:center;font-size:13px}
.lead .who{flex:1;min-width:0}
.lead .who .n{font-weight:700;font-size:13.5px}
.lead .who .n a:hover{background:var(--acc)}
.lead .sc{font-family:var(--mono);font-weight:700;font-size:13px;text-align:right}
.lead .sc span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}

/* rail widgets */
.rail .box-body{padding:14px}
.tier-rows .tr{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px dashed #cfcfc4;font-family:var(--mono);font-size:11px}
.tier-rows .tr:first-child{border-top:0}
.tier-rows .tr b{font-weight:700}
.online .dot{width:9px;height:9px;background:var(--acc);border:2px solid var(--ink);display:inline-block;margin-right:7px}
.online .nm{font-family:var(--mono);font-size:11.5px;line-height:1.95;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.online .nm a{color:var(--ink);border-bottom:1px solid var(--acc)}
.perk{display:flex;gap:9px;align-items:flex-start;font-size:13px;padding:6px 0;border-top:1px dashed #cfcfc4}
.perk:first-child{border-top:0}
.perk .ic{color:var(--ink);width:16px;height:16px;flex:none;margin-top:2px}
.minijoin{text-align:center}
.minijoin .mk{width:46px;height:46px;border:2px solid var(--ink);background:var(--ink);margin:0 auto 10px}
.minijoin p{font-size:13px;color:var(--muted);margin:0 0 12px}

/* ---------- paywall ---------- */
.pwrap{position:relative}
.pfade{position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9) 55%,#fff 100%)}
.gate{margin:0;border-top:2px solid var(--ink);background:var(--acc);padding:28px 22px;text-align:center;position:relative}
.gate .lk{width:50px;height:50px;border:2px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.gate .lk .ic{width:24px;height:24px}
.gate h3{margin:0 0 8px;font-size:21px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.gate p{margin:0 auto 18px;max-width:460px;font-size:14px;color:var(--ink-2)}
.gate .brow{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.gate .fine{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin:15px 0 0;color:#5a5a2a}

/* ---------- stats band ---------- */
.stats{display:flex;flex-wrap:wrap}
.stats .s{flex:1;min-width:120px;padding:16px;text-align:center;border-left:2px solid var(--ink)}
.stats .s:first-child{border-left:0}
.stats .s b{display:block;font-family:var(--mono);font-size:24px;font-weight:700}
.stats .s span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* ---------- members grid ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.mcard{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:18px;text-align:center;background:#fff}
.mcard:hover{background:var(--acc)}
.mcard .avatar{margin:0 auto 11px;width:56px;height:56px;font-size:18px}
.mcard h3{margin:0 0 9px;font-size:15px;font-weight:800;text-transform:uppercase}
.mcard .sc{margin-top:11px;font-family:var(--mono);font-size:17px;font-weight:700}
.mcard .sc span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}

/* ---------- profile ---------- */
.phero{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.phero .pi{flex:1;min-width:220px}
.phero h2{margin:0 0 5px;font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.phero .hd{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.phero .pr{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;border:2px solid var(--ink);padding:2px 8px;background:#fff}
.pscore{flex:none;text-align:center;border:2px solid var(--ink);padding:14px 18px;box-shadow:var(--shadow-sm)}
.pscore .b{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1}
.pscore .l{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.sig{margin-top:14px;padding-top:12px;border-top:2px solid var(--ink);font-size:13px;color:var(--muted);font-style:italic}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
@media(max-width:560px){.ach-grid{grid-template-columns:1fr}}
.ach{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:13px;display:flex;gap:11px;align-items:center}
.ach .ai{width:34px;height:34px;border:2px solid var(--ink);background:var(--acc);display:flex;align-items:center;justify-content:center;flex:none}
.ach b{font-size:12.5px;text-transform:uppercase;font-weight:800;display:block}
.ach small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-top:2px solid var(--ink);font-family:var(--mono);font-size:12px}
.kv:first-child{border-top:0}
.kv span{color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.03em}
.kv b{font-weight:700}
.progress{height:14px;border:2px solid var(--ink);background:#fff;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--acc)}

/* ---------- forms ---------- */
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:780px){.agrid{grid-template-columns:1fr}}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:5px}
.field input{width:100%;border:2px solid var(--ink);background:#fff;padding:11px;font-family:var(--mono);font-size:13px}
.field input:focus{outline:none;background:#fcffe6}
.check{display:flex;gap:8px;align-items:flex-start;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:13px;text-transform:uppercase;letter-spacing:.02em}
.divider{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;height:2px;background:var(--ink)}

/* ---------- prose ---------- */
.prose h2{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 10px}
.prose .lead{font-size:16px;color:var(--ink-2);margin:0 0 16px;border-left:5px solid var(--acc);padding-left:14px}
.prose h3{font-size:16px;font-weight:800;text-transform:uppercase;margin:24px 0 8px;display:flex;align-items:center;gap:9px}
.prose h3 .sq{width:12px;height:12px;background:var(--acc);border:2px solid var(--ink);flex:none}
.prose p{margin:0 0 13px;color:var(--ink-2)}
.prose ul{margin:0 0 13px;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;background:var(--acc);border:2px solid var(--ink)}
.prose ul.ranks li{padding-left:0}
.prose ul.ranks li::before{display:none}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#cfcfc4;border-top:3px solid var(--acc)}
.footer .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;padding:34px 0 22px}
.footer h4{color:#fff;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 11px}
.footer a{display:block;color:#bdbdb2;font-size:13px;padding:3px 0}
.footer a:hover{color:var(--acc)}
.footer .fb{max-width:250px}
.footer .fb .bx{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer .fb .mk{width:34px;height:34px;border:2px solid #fff;background:var(--ink);flex:none}
.footer .fb .wm{color:#fff;font-weight:800;font-size:17px}
.footer .fb .wm .d{background:var(--acc);color:var(--ink);padding:0 3px}
.footer .fb p{font-family:var(--mono);font-size:11px;color:#8f8f86;margin:0;line-height:1.7}
.footer .fbar{border-top:2px solid #2a2a22;padding:15px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#7f7f76}

.muted{color:var(--muted)}
.center{text-align:center}