/* nexusentrance.shop
   Forum board layout in the Invision idiom the reference uses: category cards,
   icon + title + description rows, a stats column on the right, breadcrumb bar.
   Own palette (graphite / ice blue / lime), own type (condensed grotesque for
   headings, Noto Sans for body) and its own class names, so nothing collides
   with the other sites here. No top banner by request. */

:root{
  --bg:#15181d;
  --card:#1c2027;
  --card2:#22262e;
  --row:#1e222a;
  --edge:#2e343e;
  --edge2:#3a414d;
  --txt:#dfe4ea;
  --txt2:#a3acb9;
  --txt3:#7d8695;
  --ice:#5ab0f2;
  --ice2:#8ac8f8;
  --lime:#9ece5a;
  --coral:#f08a72;
  --amberish:#e0b64a;
  --head:"Archivo","Roboto Condensed","Franklin Gothic Medium","Arial Narrow",
         "Helvetica Neue Condensed",sans-serif;
  --body:"Noto Sans","Open Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Consolas","Roboto Mono","DejaVu Sans Mono","Liberation Mono",monospace;
  --w:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.65 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--ice2);text-decoration:none}
a:hover{color:#fff;text-decoration:underline}
.w{max-width:var(--w);margin:0 auto;padding:0 16px;min-width:0}

/* breadcrumb bar, stands in for the banner */
.bar{background:var(--card);border-bottom:1px solid var(--edge)}
.bar .w{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding-top:12px;padding-bottom:12px;
  font:13px/1.4 var(--body);color:var(--txt3)}
.bar a{color:var(--txt2)}
.bar b{font:600 13px/1.4 var(--head);letter-spacing:.03em;text-transform:uppercase;color:var(--txt)}
.bar .sep{color:var(--edge2)}

/* address panel, first block on every page */
.gate{background:var(--card);border:1px solid var(--edge);border-radius:6px;margin:18px 0;overflow:hidden}
.gate > .gh{
  background:var(--card2);border-bottom:1px solid var(--edge);padding:12px 16px;
  font:700 14px/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);
}
.gate > .gh span{float:right;font:400 12px/1.5 var(--body);letter-spacing:0;text-transform:none;color:var(--txt3)}
.gate .gb{padding:14px 16px}
.gate .gb > p{margin:0 0 13px;color:var(--txt2);font-size:14.5px;max-width:none}
.mir{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--row);border:1px solid var(--edge);border-radius:4px;padding:10px 12px;margin-bottom:8px}
.mir:last-of-type{margin-bottom:0}
.mir .n{font:700 11px/1 var(--head);letter-spacing:.09em;text-transform:uppercase;
  background:var(--ice);color:#11151b;padding:6px 9px;border-radius:3px;flex:none}
.mir code{font:13.5px/1.5 var(--mono);color:var(--txt);word-break:break-all;flex:1 1 250px;min-width:0}
.mir button{font:700 11px/1 var(--head);letter-spacing:.07em;text-transform:uppercase;
  background:transparent;color:var(--ice2);border:1px solid var(--ice);border-radius:3px;
  padding:8px 12px;cursor:pointer;flex:none}
.mir button:hover{background:var(--ice);color:#11151b}
.gate .warn{margin:13px 0 0;font-size:13.5px;color:var(--txt3)}

/* board: category card with rows */
.board{background:var(--card);border:1px solid var(--edge);border-radius:6px;margin:0 0 20px;overflow:hidden}
.board > h2{
  margin:0;background:var(--card2);border-bottom:1px solid var(--edge);padding:12px 16px;
  font:700 14px/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);
}
.board > h2 em{display:block;font:400 12.5px/1.5 var(--body);letter-spacing:0;text-transform:none;
  color:var(--txt3);font-style:normal;margin-top:3px}
.item{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--edge)}
.item:last-child{border-bottom:0}
.item:hover{background:var(--row)}
.item .ico{
  flex:none;width:42px;height:42px;border-radius:5px;background:var(--card2);
  border:1px solid var(--edge2);display:flex;align-items:center;justify-content:center;
  font:700 15px/1 var(--head);color:var(--ice);letter-spacing:.02em;
}
.item.hot .ico{color:var(--coral);border-color:var(--coral)}
.item.calm .ico{color:var(--lime);border-color:var(--lime)}
.item .body{flex:1 1 auto;min-width:0}
.item .body a.t{font:700 16.5px/1.35 var(--head);letter-spacing:.005em;color:var(--txt);display:block}
.item .body a.t:hover{color:var(--ice2);text-decoration:none}
.item .body p{margin:4px 0 0;color:var(--txt2);font-size:14px;line-height:1.55;max-width:none}
.item .meta{flex:none;width:120px;text-align:right;color:var(--txt3);font-size:12.5px;line-height:1.5}
.item .meta b{display:block;color:var(--txt2);font:700 13px/1.4 var(--head);letter-spacing:.03em}

/* tag pills */
.pills{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.pills a{font:600 12px/1 var(--head);letter-spacing:.05em;text-transform:uppercase;
  background:var(--card);border:1px solid var(--edge);border-radius:3px;padding:8px 11px;color:var(--txt2)}
.pills a:hover,.pills a.on{border-color:var(--ice);color:var(--ice2);background:var(--card2);text-decoration:none}

/* article body */
h1{font:700 clamp(26px,4vw,38px)/1.18 var(--head);letter-spacing:.005em;margin:24px 0 10px;color:#fff}
.deck{font:18px/1.6 var(--body);color:var(--txt2);margin:0 0 26px;max-width:70ch}
h2{font:700 22px/1.3 var(--head);letter-spacing:.01em;margin:34px 0 11px;color:#fff;
  border-bottom:1px solid var(--edge);padding-bottom:8px}
h3{font:700 17px/1.35 var(--head);margin:24px 0 7px;color:var(--ice2)}
p{margin:0 0 15px;max-width:74ch}
ul,ol{margin:0 0 17px;padding-left:21px;max-width:74ch}
li{margin-bottom:8px}
code{font:.9em var(--mono);background:var(--card2);border:1px solid var(--edge);
  padding:1px 5px;border-radius:3px;color:var(--txt)}
strong,b{color:#fff;font-weight:700}

/* quote-style callouts, the forum idiom */
.q{background:var(--card);border:1px solid var(--edge);border-left:3px solid var(--ice);
  border-radius:4px;padding:14px 17px;margin:20px 0;font-size:15.5px}
.q.stop{border-left-color:var(--coral)}
.q.ok{border-left-color:var(--lime)}
.q.care{border-left-color:var(--amberish)}
.q b{display:block;margin-bottom:5px;color:#fff;font:700 13px/1.4 var(--head);
  letter-spacing:.06em;text-transform:uppercase}

/* tables scroll instead of widening the page */
.tw{overflow-x:auto;margin:0 0 21px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{border:1px solid var(--edge);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--card2);color:#fff;font:700 13px/1.4 var(--head);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
td{background:var(--card);color:var(--txt2)}
td b,td strong{color:var(--txt)}

/* numbered steps */
.st{list-style:none;padding:0;counter-reset:k;max-width:74ch}
.st li{position:relative;padding-left:42px;margin-bottom:14px;counter-increment:k}
.st li::before{content:counter(k);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:4px;background:var(--card2);border:1px solid var(--ice);
  font:700 13px/26px var(--head);text-align:center;color:var(--ice2)}

/* prev / next */
.nav2{display:flex;flex-wrap:wrap;gap:11px;margin:34px 0 0;border-top:1px solid var(--edge);padding-top:18px}
.nav2 a{flex:1 1 230px;background:var(--card);border:1px solid var(--edge);border-radius:5px;
  padding:12px 14px;color:var(--txt)}
.nav2 a:hover{border-color:var(--ice);text-decoration:none;color:#fff}
.nav2 a em{display:block;font:600 11px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt3);font-style:normal;margin-bottom:5px}

/* footer */
.foot{background:var(--card);border-top:1px solid var(--edge);margin-top:46px;padding:28px 0 34px}
.foot h2{border:0;margin:0 0 12px;font:700 12px/1 var(--head);letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt3)}
.foot .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:20px}
.foot a{display:block;color:var(--txt2);font-size:14px;padding:3px 0}
.foot .fine{margin-top:24px;padding-top:16px;border-top:1px solid var(--edge);
  color:var(--txt3);font-size:13px}

@media (max-width:700px){
  body{font-size:15.5px}
  .item{gap:11px;padding:12px}
  .item .ico{width:34px;height:34px;font-size:13px}
  .item .meta{display:none}
  .mir code{flex-basis:100%;font-size:12.5px}
  .gate .gb,.gate > .gh{padding-left:12px;padding-right:12px}
}