/* wtn-market-links.shop
   A dark social product surface. Depth comes from grey level only: there are
   no shadows and no borders anywhere except the single hairline that separates
   the left rail. Interface labels are lowercase on purpose. Post body text is
   sentence case, because that is the part you actually read. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/font/manrope-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/font/manrope-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/font/sourcesans3-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/font/sourcesans3-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#000000;
  --card:#191919;
  --el:#202020;
  --chip:#2f2f31;
  --hover:#292929;
  --tx:#e1e1e3;
  --sec:#747478;
  --ter:#5c5c60;
  --mut:#a9a9ad;
  --acc:#3561ff;
  --lnk:#8badf4;
  --pink:#ffc5cf;
  --ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hair:rgba(255,255,255,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--lnk)}
button{font:inherit}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--chip);color:var(--tx);
  padding:10px 16px;border-radius:8px;font-family:var(--ui);text-decoration:none}

/* ---------- top bar ---------- */
.top{
  display:flex;align-items:center;gap:22px;
  padding:16px 26px;max-width:1300px;margin:0 auto;
}
.mark{display:inline-flex;align-items:center;color:var(--tx);text-decoration:none;flex:0 0 auto}
.mark:hover{color:#fff}
.wm-svg{display:block}
.top-t{
  margin:0;flex:1 1 auto;font-family:var(--ui);font-weight:500;
  font-size:13.5px;line-height:1.45;color:var(--ter);
}
.top-chip{flex:0 0 auto}

/* ---------- chips ---------- */
.chip{
  display:inline-block;background:var(--chip);color:var(--tx);
  font-family:var(--ui);font-weight:500;font-size:14px;line-height:1;
  padding:11px 16px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;
}
.chip:hover{background:var(--hover)}
.chip.done{color:var(--pink)}
.chiprow{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0}

/* ---------- three column shell ---------- */
.shell{
  max-width:1300px;margin:0 auto;padding:0 26px 60px;
  display:grid;grid-template-columns:190px minmax(0,590px) 360px;gap:34px;
  align-items:start;
}

.left{
  position:sticky;top:18px;display:flex;flex-direction:column;gap:2px;
  padding-right:20px;border-right:1px solid var(--hair);
}
.left a{
  font-family:var(--ui);font-weight:500;font-size:15px;color:var(--mut);
  text-decoration:none;padding:9px 12px;border-radius:8px;
}
.left a:hover{background:var(--hover);color:var(--tx)}
.left a.on{background:var(--el);color:var(--tx);font-weight:700}
.left-h{
  margin:20px 0 4px;padding:0 12px;font-family:var(--ui);font-weight:700;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ter);
}

/* ---------- breadcrumbs ---------- */
.crumbs{
  font-family:var(--ui);font-weight:500;font-size:13px;color:var(--ter);
  padding:2px 6px 12px;display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
}
.crumbs a{color:var(--sec);text-decoration:none}
.crumbs a:hover{color:var(--tx)}
.crumbs i{font-style:normal;color:var(--ter)}
.crumbs span{color:var(--mut)}

/* ---------- the post card ---------- */
.post{
  background:var(--card);border-radius:20px;padding:30px 32px 34px;
}
.posted{
  margin:0 0 14px;font-family:var(--ui);font-weight:500;font-size:13px;color:var(--sec);
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
}
.posted a{color:var(--lnk);text-decoration:none}
.posted a:hover{text-decoration:underline}
.dot{color:var(--ter)}

.post h1{
  margin:0 0 14px;font-family:var(--ui);font-weight:700;
  font-size:31px;line-height:1.2;letter-spacing:-.015em;color:var(--tx);
  text-transform:lowercase;
}
.front h1{font-size:35px}
.lede{
  margin:0 0 22px;font-size:19.5px;line-height:1.55;color:var(--mut);
}
.lede a{color:var(--lnk)}

.post h2{
  margin:32px 0 10px;font-family:var(--ui);font-weight:700;
  font-size:19px;line-height:1.3;color:var(--tx);text-transform:lowercase;
}
.post h3{
  margin:26px 0 8px;font-family:var(--ui);font-weight:700;font-size:16px;color:var(--mut);
  text-transform:lowercase;
}
.post p{margin:0 0 13px}
.post ul,.post ol{margin:0 0 15px;padding-left:22px}
.post li{margin:0 0 7px}
.post a{color:var(--lnk);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(139,173,244,.5)}
.post a:hover{text-decoration-color:var(--lnk)}

.big{
  font-family:var(--ui);font-weight:500;font-size:21px;line-height:1.42;
  color:var(--tx);margin:22px 0 20px !important;
}

/* ---------- addresses inside the card ---------- */
.addrs{
  background:var(--el);border-radius:16px;padding:18px 18px 16px;margin:0 0 26px;
}
.addrs-h{
  margin:0 0 12px !important;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sec);
}
.addr{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border-radius:10px;padding:10px 10px 10px 13px;margin-bottom:8px;
}
.addr code{
  flex:1 1 auto;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.45;color:var(--tx);word-break:break-all;
}
.cp{
  flex:0 0 auto;background:var(--chip);color:var(--tx);border:0;cursor:pointer;
  font-family:var(--ui);font-weight:500;font-size:13px;padding:8px 13px;border-radius:8px;
}
.cp:hover{background:var(--hover)}
.cp.done{color:var(--pink)}
.addrs-f{
  margin:12px 0 0 !important;font-family:var(--ui);font-weight:500;
  font-size:12.5px;line-height:1.5;color:var(--ter);
}

/* ---------- aside inside the post ---------- */
.aside{background:var(--el);border-radius:14px;padding:16px 18px;margin:22px 0}
.aside p{margin:0 0 9px;font-size:16px;color:var(--mut)}
.aside p:last-child{margin:0}
.aside-t{
  font-family:var(--ui) !important;font-weight:700 !important;font-size:12px !important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sec) !important;margin-bottom:8px !important;
}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:20px 0;background:var(--el);border-radius:14px;padding:6px 4px}
.post table{border-collapse:collapse;width:100%;font-size:15.5px}
.post th{
  text-align:left;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sec);
  padding:12px 14px;white-space:nowrap;
}
.post td{padding:11px 14px;vertical-align:top;color:var(--mut)}
.post tbody tr:nth-child(odd) td{background:rgba(255,255,255,.022)}
.post td:first-child{color:var(--tx)}

/* ---------- label and value rows ---------- */
.rows{margin:20px 0;display:flex;flex-direction:column;gap:8px}
.rows>div{background:var(--el);border-radius:12px;padding:13px 16px}
.rows dt{font-family:var(--ui);font-weight:700;font-size:14px;color:var(--tx);margin-bottom:3px;
  text-transform:lowercase}
.rows dd{margin:0;font-size:16px;color:var(--mut)}

/* ---------- post rows and channel cards ---------- */
.rows-l{display:flex;flex-direction:column;gap:8px;margin:18px 0 8px}
.row{
  display:block;background:var(--el);border-radius:12px;padding:14px 16px;
  text-decoration:none !important;color:var(--tx);
}
.row:hover{background:var(--hover)}
.row-k{
  display:block;font-family:var(--ui);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sec);margin-bottom:5px;
}
.row b{
  display:block;font-family:var(--ui);font-weight:700;font-size:16.5px;line-height:1.3;
  color:var(--tx);text-transform:lowercase;
}
.row-b{display:block;font-size:15px;line-height:1.5;color:var(--mut);margin-top:4px}

.chans{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}
.chan-c{
  display:block;background:var(--el);border-radius:12px;padding:15px 16px;
  text-decoration:none !important;
}
.chan-c:hover{background:var(--hover)}
.chan-n{
  display:block;font-family:var(--ui);font-weight:700;font-size:16px;color:var(--tx);
}
.chan-c-b{display:block;font-size:14.5px;line-height:1.45;color:var(--mut);margin:5px 0 8px}
.chan-x{
  display:block;font-family:var(--ui);font-weight:500;font-size:12px;color:var(--ter);
}

/* ---------- replies ---------- */
.replies{margin:34px 0 0}
.replies h2{margin-bottom:14px}
.rep{background:var(--el);border-radius:16px;padding:16px 18px;margin-bottom:9px}
.rep p{margin:0}
.rep-q{font-family:var(--ui);font-weight:700;font-size:16.5px;line-height:1.4;color:var(--tx)}
.rep-a{margin-top:11px !important;font-size:16px;line-height:1.55;color:var(--mut)}
.rep-l{
  display:block;font-family:var(--ui);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ter);margin-bottom:5px;
}

/* ---------- the not line ---------- */
.notline{
  margin:26px 0 0 !important;background:var(--el);border-radius:12px;padding:14px 17px;
  font-size:15.5px;line-height:1.55;color:var(--mut);
}
.notline span{
  font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pink);display:block;margin-bottom:5px;
}

.actions{margin-top:22px}

/* ---------- more posts ---------- */
.more{margin:34px 0 0}
.more h2{margin-bottom:12px}
.more-l{display:flex;flex-direction:column;gap:8px}
.more-l a{
  display:block;background:var(--el);border-radius:12px;padding:13px 16px;
  font-family:var(--ui);font-weight:500;font-size:16px;line-height:1.35;
  color:var(--tx);text-decoration:none !important;text-transform:lowercase;
}
.more-l a:hover{background:var(--hover)}

/* ---------- previous and next ---------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.pn a{
  background:var(--card);border-radius:16px;padding:16px 18px;
  text-decoration:none;color:var(--tx);display:block;
}
.pn a:hover{background:var(--hover)}
.pn em{
  display:block;font-style:normal;font-family:var(--ui);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ter);margin-bottom:5px;
}
.pn b{
  font-family:var(--ui);font-weight:700;font-size:15.5px;line-height:1.35;
  text-transform:lowercase;
}
.pn-n{text-align:right}
.pn-p:only-child{grid-column:1}
.pn-n:only-child{grid-column:2}

/* ---------- right sidebar ---------- */
.right{position:sticky;top:18px;display:flex;flex-direction:column;gap:12px}
.idcard{background:var(--card);border-radius:24px;padding:22px 22px 20px}
.idm{display:block;border-radius:9999px;margin-bottom:13px}
.id-n{
  margin:0;font-family:var(--ui);font-weight:700;font-size:18px;color:var(--tx);
}
.id-b{
  margin:5px 0 15px;font-family:var(--ui);font-weight:500;font-size:14px;
  line-height:1.5;color:var(--sec);
}
.id-chip{display:inline-block}

.chanbox{background:var(--card);border-radius:20px;padding:18px 18px 16px}
.box-h{
  margin:0 0 10px;font-family:var(--ui);font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ter);
}
.chanbox a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--tx);
}
.chanbox a:hover{background:var(--hover)}
.chanbox a.on{background:var(--el)}
.chanbox a b{font-family:var(--ui);font-weight:500;font-size:15px}
.chanbox a.on b{font-weight:700}
.chanbox a span{font-family:var(--ui);font-weight:500;font-size:13px;color:var(--ter)}
.box-all{
  margin-top:6px;color:var(--lnk) !important;font-family:var(--ui);font-weight:500;font-size:14px;
}
.box-p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sec)}

/* ---------- furniture outside main ---------- */
.allbar{max-width:1300px;margin:0 auto;padding:34px 26px 10px}
.allbar h2{
  margin:0 0 14px;font-family:var(--ui);font-weight:700;font-size:15px;
  letter-spacing:.02em;color:var(--sec);text-transform:lowercase;
}
.allcols{columns:4;column-gap:26px}
.allcols a{
  display:block;break-inside:avoid;font-family:var(--ui);font-weight:500;
  font-size:13.5px;line-height:1.45;color:var(--ter);text-decoration:none;
  margin-bottom:8px;text-transform:lowercase;
}
.allcols a:hover{color:var(--lnk)}

.foot{max-width:1300px;margin:0 auto;padding:30px 26px 60px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:26px}
.fh{
  margin:0 0 10px;font-family:var(--ui);font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ter);
}
.fc a{
  display:block;font-family:var(--ui);font-weight:500;font-size:14px;
  color:var(--mut);text-decoration:none;margin-bottom:7px;text-transform:lowercase;
}
.fc a:hover{color:var(--lnk)}
.fp{margin:0;font-size:14.5px;line-height:1.55;color:var(--sec)}
.fine{margin:0;font-size:13px;line-height:1.65;color:var(--ter);max-width:96ch}

/* ---------- narrow ---------- */
@media (max-width:1120px){
  .shell{grid-template-columns:170px minmax(0,1fr);}
  .right{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;position:static}
  .idcard{flex:1 1 260px}
  .chanbox{flex:1 1 260px}
  .allcols{columns:3}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .top{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .top-t{order:3;flex:1 1 100%}
  .shell{grid-template-columns:1fr;gap:16px;padding:0 16px 40px}
  .left{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    border-right:0;padding-right:0;padding-bottom:4px;gap:6px}
  .left a{white-space:nowrap;background:var(--el);flex:0 0 auto;font-size:14px}
  .left-h{display:none}
  .post{padding:22px 18px 26px;border-radius:16px}
  .post h1{font-size:26px}
  .front h1{font-size:28px}
  .lede{font-size:18px}
  .chans{grid-template-columns:1fr}
  .pn{grid-template-columns:1fr}
  .pn-n{text-align:left}
  .allcols{columns:1}
  .fcols{grid-template-columns:1fr}
  .allbar,.foot{padding-left:16px;padding-right:16px}
}
