:root { --red:#cc0000; --bar:#1a1b1d; --ground:#eef0f2; --card:#ffffff; --line:#dcdee1; --text:#16171a; --muted:#62656b; --chip:#f4f5f7; }
@media (prefers-color-scheme: dark) { :root { --ground:#121315; --card:#1d1f22; --line:#2e3135; --text:#eceef0; --muted:#9a9ea5; --chip:#26292d; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--text); font-family:Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,.logo,.rank { font-family:Oswald, "Arial Narrow", Impact, sans-serif; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

.nav { background:var(--bar); color:#fff; display:flex; align-items:center; gap:22px; padding-inline:16px; height:54px; position:sticky; top:0; z-index:10; }
.logo { font-weight:700; font-style:italic; font-size:30px; letter-spacing:-1px; color:var(--red); }
.logo span { color:#fff; }
.nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; font-size:14px; font-weight:700; overflow-x:auto; white-space:nowrap; }
.nav a:hover { color:#ff6b6b; }

.ticker { background:var(--card); border-bottom:1px solid var(--line); display:flex; overflow-x:auto; font-size:12px; }
.ticker div { padding:8px 16px; border-right:1px solid var(--line); white-space:nowrap; color:var(--muted); }
.ticker b { display:block; font-size:13px; color:var(--text); font-variant-numeric:tabular-nums; }
.live { color:var(--red); font-weight:700; }
.nav ul, .ticker { scrollbar-width:none; }
.nav ul::-webkit-scrollbar, .ticker::-webkit-scrollbar { display:none; }

.wrap { max-width:1200px; margin:16px auto; padding-inline:16px; display:grid; grid-template-columns:230px minmax(0,1fr) 290px; gap:16px; align-items:start; }
@media (max-width:960px) {
  .wrap { grid-template-columns:1fr; }
  .wrap > .col { display:contents; }   /* flatten columns so cards can be reordered */
  #voice { order:99; }                 /* "quietest voice" photo goes last on phones */
}
.col { display:grid; gap:16px; }
.card { background:var(--card); border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.14); overflow:hidden; }
.card h3 { margin:0; padding:11px 14px; font-size:15px; letter-spacing:.04em; border-bottom:1px solid var(--line); text-transform:uppercase; }
.card ul { list-style:none; margin:0; padding:0; }
.card li { padding:10px 14px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.35; }
.card li:last-child { border:0; }

.hero figure { margin:0; position:relative; }
.hero img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.tag { position:absolute; top:14px; left:14px; background:var(--red); color:#fff; padding:3px 8px; font-size:11px; font-weight:700; letter-spacing:.06em; }
.hero .body { padding:14px 16px 18px; }
.hero h1 { margin:0 0 8px; font-size:clamp(24px,4vw,36px); line-height:1.08; text-wrap:balance; text-transform:uppercase; }
.hero p { margin:0; color:var(--muted); line-height:1.5; max-width:65ch; }

.video video { display:block; width:100%; max-height:560px; background:#000; }
.story img { display:block; width:100%; height:auto; }
.story .cap, .video .cap {padding:10px 14px; font-size:14px; font-weight:700; }
.story .cap small, .video .cap small { display:block; font-weight:400; color:var(--muted); margin-top:2px; }

.submit { display:flex; gap:8px; padding:14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.submit input { flex:1 1 200px; padding:10px; border:1px solid var(--line); background:var(--chip); color:var(--text); border-radius:3px; font-size:15px; }
.btn { background:var(--red); color:#fff; border:0; padding:10px 18px; font-weight:700; border-radius:3px; cursor:pointer; font-size:14px; }
.btn:disabled { opacity:.5; cursor:default; }
.status { padding:8px 14px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); }
.idea { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); }
.idea:last-child { border:0; }
.rank { font-weight:700; font-size:22px; width:30px; color:var(--muted); text-align:center; }
.idea.top .rank { color:var(--red); }
.txt { flex:1; min-width:0; overflow-wrap:anywhere; font-size:15px; }
.anon { font-size:11px; color:var(--red); font-weight:700; margin-top:2px; }
.card h3 .red { color:var(--red); }
.votes { display:flex; flex-direction:column; align-items:center; gap:2px; }
.votes button { background:var(--chip); color:var(--text); border:1px solid var(--line); border-radius:3px; cursor:pointer; width:36px; height:26px; }
.votes button.on { background:var(--red); color:#fff; border-color:var(--red); }
.votes b { font-size:14px; font-variant-numeric:tabular-nums; }
.empty { padding:18px 14px; color:var(--muted); }
.more { display:block; width:100%; padding:12px; background:var(--chip); color:var(--text); border:0; border-top:1px solid var(--line); font-weight:700; font-size:14px; cursor:pointer; }
.more:hover { color:var(--red); }

.qr { text-align:center; }
.qr #qr { width:170px; margin:14px auto 6px; background:#fff; padding:6px; }
.qr #qr img, .qr #qr canvas { display:block; width:100%; height:auto; }
.qr p { font-size:12px; color:var(--muted); margin:0 14px 14px; }
.boardwrap { max-width:1200px; margin:16px auto 0; padding-inline:16px; }
.votes button { width:44px; height:32px; font-size:16px; }
.endorse { max-width:1200px; margin:8px auto 0; padding-inline:16px; }
.endorse h2 { background:var(--bar); color:#fff; margin:0; padding:10px 16px; font-size:20px; text-transform:uppercase; letter-spacing:.03em; border-bottom:3px solid var(--red); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.endorse h2 span { font-size:13px; color:#bbb; letter-spacing:.08em; }
.endorse ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line); }
.endorse li { background:var(--card); padding:14px 16px; }
.endorse b { display:block; font-family:Oswald, "Arial Narrow", Impact, sans-serif; font-size:18px; text-transform:uppercase; }
.endorse small { color:var(--muted); font-size:12px; }
.endorse li.violette { background:#6a1b9a; color:#fff; grid-column:1 / -1; text-align:center; }
.endorse li.violette small { color:#e1bee7; }
/* Kill switch: hide everything, show a notice */
body.offline > :not(.offline-screen) { display:none !important; }
.offline-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; gap:8px; background:var(--bar); color:#fff; }
.offline-screen .logo { font-size:48px; }
.offline-screen h1 { margin:8px 0 0; font-size:clamp(28px,6vw,44px); text-transform:uppercase; }
.offline-screen p { margin:0; color:#bbb; max-width:40ch; }
footer { text-align:center; color:var(--muted); font-size:12px; padding-block:30px; }