/* Toy Hauler Owners Forum - classic bulletin board, asphalt + hazard yellow */
:root{
  --asphalt:#1C1A17;
  --bg-2:#25221E;
  --bg-3:#2E2A25;
  --bg-4:#38332C;
  --line:#3B362F;
  --line-2:#4C463D;
  --sand:#E8DFCF;
  --sand-2:#CFC5B2;
  --dust:#8C8676;
  --dust-2:#A9A392;
  --yellow:#F2B90C;
  --yellow-2:#FFD34A;
  --ink:#1C1A17;
  --font-d:"Khand","Arial Narrow",Impact,sans-serif;
  --font-b:"Hind",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --w:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--asphalt);color:var(--sand);font-family:var(--font-b);font-size:15.5px;line-height:1.6}
a{color:var(--yellow-2);text-decoration:none}
a:hover{text-decoration:underline;color:#fff}
a:focus-visible,button:focus-visible,.btn-fake:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-d);font-weight:700;line-height:1.05;margin:0;letter-spacing:.01em}
p{margin:0 0 12px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}

/* ---------- header: logo band, navbar box, tie-down track ---------- */
.hdr{background:#141210;border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center}
.brand:hover{text-decoration:none}
.logo-img{height:44px;width:auto;display:block}
.logo-img--sm{height:30px}
.hdr-tag{margin:0;font-size:13px;color:var(--dust-2);max-width:380px;text-align:right;line-height:1.4}
.navbar{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line-2)}
.navbar .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.navbar .wrap::-webkit-scrollbar{display:none}
.navbar a{display:block;padding:9px 14px;font-family:var(--font-d);font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sand-2);white-space:nowrap;border-right:1px solid var(--line)}
.navbar a:first-child{color:var(--yellow)}
.navbar a:hover,.navbar a[aria-current]{background:var(--bg-4);color:#fff;text-decoration:none}
/* the niche detail: an E-track strip, slotted, under the navbar and above the footer */
.track{height:9px;background:
  radial-gradient(ellipse 5px 2.2px at 50% 50%,var(--asphalt) 96%,transparent 100%) 0 0/22px 9px repeat-x,
  var(--yellow);
  border-bottom:1px solid #a97f05}
.track--foot{border-bottom:0;border-top:1px solid #a97f05;opacity:.85}

/* ---------- breadcrumbs, titles ---------- */
.crumbs{font-size:13px;color:var(--dust);margin:16px 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.crumbs a{color:var(--sand-2)}
.crumbs i{color:var(--dust);font-style:normal;font-size:16px}
.crumbs span{color:var(--sand)}
.page-hd{margin:6px 0 16px}
.page-hd h1{font-size:34px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.page-hd p{margin:4px 0 0;color:var(--dust-2);font-size:14px}

/* ---------- category blocks (the phpBB feel) ---------- */
.cat{border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:22px}
.cat-hd{background:var(--yellow);color:var(--ink);padding:6px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cat-hd h2{font-size:20px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.cat-hd span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4a3a05}
.ftbl{width:100%;border-collapse:collapse}
.ftbl th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--dust);text-align:left;padding:6px 10px;background:var(--bg-3);border-bottom:1px solid var(--line)}
.ftbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ftbl tr:last-child td{border-bottom:0}
.ftbl tbody tr:nth-child(even) td{background:#28251f}
.ftbl tbody tr:hover td{background:var(--bg-3)}
.ftbl .ico{width:46px;padding-right:0}
.ftbl .num{text-align:center;width:78px;font-variant-numeric:tabular-nums;color:var(--sand-2);white-space:nowrap}
.ftbl .num b{display:block;font-family:var(--font-d);font-size:20px;font-weight:600;color:#fff;line-height:1}
.ftbl .last{width:210px;font-size:13px;color:var(--dust-2);line-height:1.4}
.ftbl .last b{display:block;color:var(--sand);font-weight:600}
.ftbl th.num,.ftbl th.last{text-align:center}
/* forum icon: a little ramp door */
.fico{width:32px;height:32px;border:1px solid var(--line-2);background:var(--bg-3);position:relative;display:block}
.fico::after{content:"";position:absolute;left:5px;right:5px;bottom:7px;height:3px;background:var(--yellow)}
.fico::before{content:"";position:absolute;left:5px;bottom:10px;width:14px;height:12px;border:2px solid var(--dust-2);border-right:0;border-bottom:0;transform:skewX(-30deg);transform-origin:bottom left}
.fico--topic::before{width:8px;height:8px;transform:none;border:2px solid var(--yellow);left:12px;bottom:12px}
.fico--pin::before{border-color:var(--yellow-2)}
.fico--pin{background:#3a3010}
.fname{font-family:var(--font-d);font-size:22px;font-weight:600;letter-spacing:.02em;line-height:1.1}
.fname a{color:#fff}
.fdesc{font-size:13px;color:var(--dust-2);margin-top:2px}
.tname a{color:#fff;font-weight:600}
.tby{font-size:12.5px;color:var(--dust);margin-top:2px}
.tby b{color:var(--sand-2);font-weight:600}
.pin{display:inline-block;font-family:var(--font-d);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:1px 6px 0;margin-right:6px;vertical-align:middle;line-height:1.5}

/* ---------- who's online / stats strip ---------- */
.online{border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:22px;font-size:13.5px}
.online .cat-hd h2{font-size:17px}
.online-body{padding:10px 12px;color:var(--sand-2)}
.online-body p{margin:0 0 6px}
.online-body p:last-child{margin:0}
.online-body b{color:var(--sand);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stats>div{padding:10px 12px;border-right:1px solid var(--line);text-align:center}
.stats>div:last-child{border-right:0}
.stats>div>b{display:block;font-family:var(--font-d);font-size:30px;font-weight:700;color:var(--yellow);line-height:1}
.stats>div>span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);margin-top:2px}
.legend{font-size:12px;color:var(--dust);margin:-10px 0 24px}
.legend i{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin:0 4px 0 10px;border:1px solid var(--line-2);background:var(--bg-3)}
.legend i.on{background:#3a3010;border-color:var(--yellow)}
.perm{border:1px solid var(--line);background:var(--bg-2);padding:10px 12px;font-size:12.5px;color:var(--dust-2);margin-bottom:22px;line-height:1.5}
.perm b{color:var(--sand-2);font-weight:600}

/* ---------- topic pages: boxy post tables ---------- */
.topic-hd{margin:6px 0 16px}
.topic-hd h1{font-size:30px;color:#fff;line-height:1.12}
.topic-meta{margin:6px 0 0;font-size:13px;color:var(--dust)}
.topic-meta b{color:var(--sand-2);font-weight:600}
.post{border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:14px}
.post.is-op{border-color:#6e5608}
.post-hd{display:flex;justify-content:space-between;align-items:center;background:var(--bg-3);border-bottom:1px solid var(--line);padding:5px 12px;font-size:12.5px;color:var(--dust-2)}
.post.is-op .post-hd{background:#332a10;color:#e2c778}
.post-num{font-family:var(--font-d);font-size:16px;font-weight:600;color:var(--dust)}
.post.is-op .post-num{color:var(--yellow)}
.post-row{display:grid;grid-template-columns:196px 1fr}
.post-author{padding:12px;border-right:1px solid var(--line);background:#221f1b;font-size:12.5px;color:var(--dust-2);min-width:0}
.author-name{font-family:var(--font-d);font-size:19px;font-weight:600;color:var(--yellow-2);line-height:1.15;word-break:break-all}
.op-pill{display:inline-block;font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.14em;background:var(--yellow);color:var(--ink);padding:1px 5px 0;margin-left:6px;vertical-align:middle;line-height:1.5}
.avatar{width:64px;height:64px;margin:8px 0;display:grid;place-items:center;font-family:var(--font-d);font-size:34px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.12)}
.avatar.av--dark{color:var(--ink)}
.author-rank{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;background:var(--bg-4);color:var(--sand-2);margin-bottom:8px}
.rank-tent{background:#2f3a33;color:#a8c9b1}
.rank-bumper{background:#2c3a49;color:#a9c4e0}
.rank-fifth{background:#43321b;color:#e7c27a}
.rank-ramp{background:#4a2c22;color:#efac8f}
.rank-mod{background:var(--yellow);color:var(--ink)}
.author-stats{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1px 8px;line-height:1.5}
.author-stats dt{color:var(--dust)}
.author-stats dd{margin:0;color:var(--sand-2)}
.author-loc{margin-top:8px;color:var(--dust);padding-top:8px;border-top:1px dashed var(--line)}
.post-body{padding:14px 18px 10px;min-width:0}
.post-content p{margin:0 0 12px}
.post-content p:last-child{margin-bottom:0}
.post-content blockquote{margin:0 0 12px;padding:8px 14px;border-left:4px solid var(--yellow);background:var(--bg-3);color:var(--sand-2);font-size:14px}
.post-content blockquote cite{display:block;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust);margin-bottom:3px}
.post-content strong{color:#fff}
.post-content ul{margin:0 0 12px;padding-left:20px}
.post-content li{margin-bottom:4px}
.post-footer{margin-top:14px;padding-top:8px;border-top:1px solid var(--line);display:flex;gap:6px;justify-content:flex-end}
.post-action{display:inline-block;border:1px solid var(--line-2);color:var(--dust-2);font-size:12px;padding:2px 10px;background:var(--bg-3);text-decoration:none;cursor:pointer}
.post-action:hover{color:#fff;border-color:var(--dust);text-decoration:none}
.reply-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line-2);background:var(--bg-2);padding:10px 12px;margin:6px 0 26px;font-size:13.5px;color:var(--dust-2)}
.btn-fake{display:inline-block;background:var(--yellow);color:var(--ink);font-family:var(--font-d);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:3px 14px 1px;opacity:.7}
.similar{border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:22px}
.similar .cat-hd h2{font-size:17px}
.similar-list{list-style:none;margin:0;padding:6px 12px}
.similar-list li{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.similar-list li:last-child{border-bottom:0}
.similar-list a{color:var(--sand)}

/* ---------- static pages ---------- */
.prose{max-width:780px}
.prose h1{font-size:34px;color:#fff;text-transform:uppercase;letter-spacing:.03em;margin:6px 0 14px}
.prose h2{font-size:21px;color:var(--yellow);text-transform:uppercase;letter-spacing:.06em;margin:24px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.prose p,.prose li{color:var(--sand)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
.prose strong{color:#fff}

/* ---------- footer ---------- */
.foot{margin-top:36px;background:#141210;color:var(--dust);font-size:13px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:20px;padding-bottom:26px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--sand-2)}
.foot-note{margin:0;width:100%;color:var(--dust)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ftbl .last{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(2){border-right:0}
  .stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  body{font-size:15px}
  .hdr-in{flex-direction:column;align-items:flex-start;gap:6px}
  .hdr-tag{text-align:left;max-width:none;font-size:12px}
  .logo-img{height:36px}
  .navbar a{font-size:15px;padding:8px 10px}
  .page-hd h1{font-size:27px}
  .topic-hd h1{font-size:23px}
  .ftbl .num{display:none}
  .ftbl th.num{display:none}
  .post-row{grid-template-columns:1fr}
  .post-author{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
  .avatar{width:34px;height:34px;font-size:18px;margin:0;order:-1}
  .author-stats{display:none}
  .author-loc{margin:0;padding:0;border:0;width:100%}
  .author-rank{margin:0}
  .post-body{padding:12px 12px 8px}
  .cat-hd{flex-direction:column;gap:0}
}
@media (max-width:400px){
  .wrap{padding:0 10px}
  .ftbl td{padding:8px}
  .ftbl .ico{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}