/* Dot Trading Post — public listing and category pages. Same paper, ink and halftones as the board. */
:root {
  --paper:#F3EAD3; --card:#FFFCF4; --sunk:#EADFC4;
  --ink:#121212; --muted:#4B4740; --faint:#8C867A; --line-soft:rgba(18,18,18,.14);
  --red:#E8392B; --yellow:#FFD23F; --cyan:#27B2E8; --blue:#2F56D6; --pink:#F2518F; --green:#1DB36A; --purple:#7B4FD6; --orange:#FF8A2B;
  --have-soft:#E3EAFF; --want-soft:#FFE4E0;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:8px; --bw:2.5px; --sh:4px 4px 0 var(--ink); --sh2:6px 6px 0 var(--ink);
  color-scheme:light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before, body::after { content:""; position:fixed; z-index:-1; pointer-events:none; width:70vw; height:70vh; }
body::before { top:-10vh; left:-10vw; background:radial-gradient(circle, var(--cyan) 1.6px, transparent 1.9px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(circle at 20% 20%, #000, transparent 65%); mask-image:radial-gradient(circle at 20% 20%, #000, transparent 65%); opacity:.55; }
body::after { bottom:-20vh; right:-10vw; background:radial-gradient(circle, var(--pink) 1.6px, transparent 1.9px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(circle at 80% 80%, #000, transparent 65%); mask-image:radial-gradient(circle at 80% 80%, #000, transparent 65%); opacity:.5; }
a { color:inherit; }
img { max-width:100%; display:block; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
::selection { background:var(--yellow); }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }

.top { border-bottom:3px solid var(--ink); background:var(--paper); }
.bar { display:flex; align-items:center; gap:12px; padding-block:12px; }
.brand { display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.08em; text-transform:uppercase; }
.brand .t small { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--muted); margin-top:2px; }
.navbtn { background:var(--yellow); text-decoration:none; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:9px 16px; border-radius:999px; border:var(--bw) solid var(--ink); box-shadow:3px 3px 0 var(--ink); white-space:nowrap; }

.crumbs { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); margin:22px 0 14px; }
.crumbs a { text-decoration:none; border-bottom:1.5px solid var(--line-soft); }

.btn { display:inline-block; border:var(--bw) solid var(--ink); background:var(--yellow); color:var(--ink); text-decoration:none; padding:11px 22px; border-radius:999px; cursor:pointer; font:700 14px var(--body); box-shadow:var(--sh); transition:transform .08s, box-shadow .08s; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.btn.ghost { background:var(--card); box-shadow:2px 2px 0 var(--ink); }
.tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:4px; border:2px solid var(--ink); background:var(--card); font-weight:600; text-decoration:none; }
.tag.ok { background:var(--green); color:#fff; } .tag.hold { background:var(--yellow); }
.tag.cat { background:var(--c, var(--card)); color:#fff; }
.tag.proof { background:var(--green); color:#fff; } .tag.proof s { width:7px; height:7px; border-radius:50%; background:#fff; display:block; }
.fine { font-size:13px; color:var(--muted); }
.fine a { color:var(--ink); }

/* a listing */
.listing { --c:var(--faint); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:20px; box-shadow:var(--sh2); position:relative; overflow:hidden; }
.listing::before { content:""; position:absolute; top:-40px; right:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, var(--c) 1.8px, transparent 2.1px) 0 0/8px 8px; -webkit-mask-image:radial-gradient(circle at 70% 30%, #000 20%, transparent 70%); mask-image:radial-gradient(circle at 70% 30%, #000 20%, transparent 70%); opacity:.7; pointer-events:none; }
.listing > * { position:relative; min-width:0; }
.pics { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border:2px solid var(--ink); border-radius:6px; background:var(--sunk); aspect-ratio:1; scrollbar-width:none; }
.pics::-webkit-scrollbar { display:none; }
.pics img { flex:0 0 100%; width:100%; height:100%; object-fit:contain; scroll-snap-align:center; background:var(--sunk); }
.pics.none { align-items:center; justify-content:center; background:radial-gradient(circle, var(--c) 2px, transparent 2.4px) 0 0/10px 10px, var(--sunk); }
.pics.none span { font-family:var(--display); font-weight:700; font-size:96px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:50%; width:150px; height:150px; display:grid; place-items:center; box-shadow:var(--sh); }
.swipe { margin:8px 0 0; text-align:center; }
.info { display:flex; flex-direction:column; gap:14px; }
.state { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.info h1 { font-family:var(--display); font-weight:700; font-size:clamp(28px,4.4vw,42px); line-height:1.05; letter-spacing:-.025em; margin:0; text-wrap:balance; overflow-wrap:anywhere; }
.sides { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; }
.side { min-width:0; border-radius:6px; padding:10px 12px; border:2px solid var(--ink); }
.side.h { background:var(--have-soft); } .side.w { background:var(--want-soft); }
.side .k { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; display:block; margin-bottom:3px; }
.side.h .k { color:var(--blue); } .side.w .k { color:var(--red); }
.side .v { font-size:14.5px; font-weight:500; overflow-wrap:anywhere; }
.arrow { align-self:center; width:34px; height:22px; position:relative; }
.arrow::before, .arrow::after { content:""; position:absolute; top:3px; width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); }
.arrow::before { left:2px; background:var(--blue); } .arrow::after { right:2px; background:var(--red); mix-blend-mode:multiply; }
.desc { margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.asset { margin:0; font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }
.by { margin:0; color:var(--muted); }
.by b { color:var(--ink); }
.acts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* lists */
.head { margin:6px 0 22px; }
.head h1 { font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,52px); line-height:1; letter-spacing:-.03em; text-transform:uppercase; margin:8px 0 12px; text-wrap:balance; }
.lede { color:var(--muted); font-size:17px; max-width:56ch; margin:0 0 16px; }
.more { margin:40px 0 10px; }
.more h2, .group h2 { font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; margin-bottom:18px; }
.mini { --c:var(--faint); display:flex; flex-direction:column; gap:6px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:10px; text-decoration:none; box-shadow:var(--sh); transition:transform .08s, box-shadow .08s; min-width:0; }
.mini:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.mini img, .mini .noimg { width:100%; aspect-ratio:1; object-fit:cover; border:2px solid var(--ink); border-radius:5px; background:radial-gradient(circle, var(--c) 1.8px, transparent 2.2px) 0 0/9px 9px, var(--sunk); }
.mt { font-family:var(--display); font-weight:700; font-size:16px; line-height:1.2; overflow-wrap:anywhere; }
.mw { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.mw b { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.group { margin:0 0 26px; }
.cats { display:flex; flex-wrap:wrap; gap:10px; }
.catlink { --c:var(--faint); text-decoration:none; font-weight:600; font-size:14px; padding:7px 14px; border-radius:999px; border:2px solid var(--ink); background:var(--card); box-shadow:2px 2px 0 var(--ink); }
.catlink b { font-family:var(--mono); font-size:11px; background:var(--c); color:#fff; border-radius:999px; padding:1px 7px; margin-left:4px; }
.pager { display:flex; gap:12px; justify-content:center; margin:10px 0 30px; }
.empty { text-align:center; padding:60px 0; }
.empty h1 { font-family:var(--display); font-size:34px; letter-spacing:-.02em; margin:0 0 8px; }

.foot { display:flex; flex-wrap:wrap; gap:8px 20px; padding-block:30px 40px; margin-top:40px; border-top:2px dashed var(--line-soft); font-size:14px; }
.foot a { color:var(--muted); }

@media (max-width: 760px) {
  .listing { grid-template-columns:1fr; gap:18px; padding:14px; }
  .brand .t small { display:none; }
  .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .sides { grid-template-columns:1fr; } .arrow { display:none; }
}
.traded { margin:0; padding:10px 12px; border:2px solid var(--ink); border-radius:6px; background:#DDF5E8; }
.tag.local { background:var(--orange); }

.makers { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.makers img { height:32px; width:auto; display:block; transition:transform .15s; }
.makers:hover img { transform:rotate(-4deg) scale(1.06); }
.makers:hover span { color:var(--ink); }
.foot .makers { margin-left:auto; }

/* Ways to trade (/trade): steps, what keeps it safe, questions, and the list of pages. */
.head .acts { margin-top:6px; }
.steps3 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:760px){ .steps3 { grid-template-columns:1fr; } }
.steps3 li { background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:16px; box-shadow:var(--sh); }
.steps3 .n { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); font-family:var(--mono); font-weight:600; font-size:13px; margin-bottom:8px; }
.steps3 b { display:block; font-family:var(--display); font-size:18px; margin-bottom:4px; }
.steps3 p { margin:0; color:var(--muted); font-size:14.5px; }
.prose p { max-width:68ch; margin:0 0 12px; font-size:16px; }
.safe3 { margin:0; padding:0; list-style:none; display:grid; gap:10px; max-width:72ch; }
.safe3 li { padding-left:26px; position:relative; font-size:15.5px; }
.safe3 li::before { content:""; position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:50%; background:var(--green); border:2px solid var(--ink); }
.safe3 b { font-family:var(--display); }
.faq details { background:var(--card); border:2px solid var(--ink); border-radius:6px; padding:12px 14px; margin:0 0 10px; max-width:76ch; }
.faq summary { cursor:pointer; font-weight:600; }
.faq details p { margin:8px 0 0; color:var(--muted); }
.cta { margin:40px 0 10px; background:var(--yellow); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:22px; box-shadow:var(--sh); }
.cta h2 { font-family:var(--display); font-weight:700; font-size:26px; margin:0 0 6px; }
.cta .lede { color:var(--ink); }
.ways { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.way { display:flex; flex-direction:column; gap:6px; text-decoration:none; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:16px; box-shadow:var(--sh); transition:transform .08s, box-shadow .08s; }
.way:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.way b { font-family:var(--display); font-size:19px; }
.way span { color:var(--muted); font-size:14px; }
.foot .langs { flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px 14px; }
.foot .langs a { text-decoration:none; font-weight:600; }
.foot .langs a[aria-current] { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* The language menu in the header. */
.langmenu { position:relative; }
.langmenu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:999px; padding:6px 11px; background:var(--card); color:var(--ink); font-weight:700; font-size:13px; line-height:1; box-shadow:2px 2px 0 var(--ink); white-space:nowrap; }
.langmenu summary::-webkit-details-marker { display:none; }
.langmenu summary::after { content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); margin-left:2px; }
.langmenu[open] summary { background:var(--yellow); }
.langmenu .lm-list { position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:grid; min-width:160px; padding:5px; background:var(--card); border:2px solid var(--ink); border-radius:8px; box-shadow:4px 4px 0 var(--ink); }
.langmenu .lm-list a { padding:9px 12px; border-radius:5px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; }
.langmenu .lm-list a:hover { background:var(--sunk); }
.langmenu .lm-list a[aria-current] { background:var(--yellow); }
@media (max-width:420px){ .langmenu .lm-cur { display:none; } .langmenu summary { padding:7px 9px; } }
@media (max-width:480px){ .bar .brand .t { display:none; } .bar { gap:10px; } .navbtn { padding:9px 13px; } }

/* Visits and members, at the foot. */
.site-stats { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0; font-size:12.5px; color:var(--muted); }
.site-stats::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(29,179,106,.18); }
.site-stats span { white-space:nowrap; }
.site-stats b { color:var(--ink); font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
.foot .site-stats { flex-basis:100%; }