/* What's Wrong With Us? — quiet dark newspaper. One column, one accent. */
:root {
  --bg: #141210;
  --bg-2: #1c1915;
  --ink: #ece3d1;
  --ink-2: #b9ad98;
  --ink-3: #7d7364;
  --line: rgba(236, 227, 209, .14);
  --line-strong: rgba(236, 227, 209, .45);
  --red: #d9483d;
  --blue: #7c9ce6;
  --serif: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --display: "Playfair Display", Georgia, serif;
  --black: "UnifrakturCook", "Playfair Display", serif;
  --mono: "Special Elite", "Courier New", monospace;
}
:root[data-theme="paper"] {
  --bg: #f2ebdc;
  --bg-2: #eae1cf;
  --ink: #17140f;
  --ink-2: #4a4337;
  --ink-3: #8a8070;
  --line: rgba(23, 20, 15, .14);
  --line-strong: rgba(23, 20, 15, .5);
  --red: #b4281f;
  --blue: #2a4fa3;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: rgba(217, 72, 61, .35); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.alert {
  position: sticky; top: 0; z-index: 60; background: var(--red); color: #fff7ee;
  font-family: var(--mono); font-size: 14px; padding: 12px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.alert b { font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
.alert code { background: rgba(0,0,0,.25); padding: 2px 6px; user-select: all; }
.alert button { background: #fff7ee; color: var(--red); padding: 6px 12px; font-family: var(--mono); }

/* ------------------------------------------------------- masthead */
/* ------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; cursor: grab; }
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 36% at 50% 46%, rgba(20,18,16,.96) 30%, rgba(20,18,16,.7) 62%, transparent 100%),
    linear-gradient(180deg, rgba(20,18,16,.35), transparent 30%, transparent 70%, var(--bg) 100%);
}
:root[data-theme="paper"] .hero-shade {
  background:
    radial-gradient(ellipse 42% 36% at 50% 46%, rgba(242,235,220,.96) 30%, rgba(242,235,220,.7) 62%, transparent 100%),
    linear-gradient(180deg, rgba(242,235,220,.35), transparent 30%, transparent 70%, var(--bg) 100%);
}
.masthead { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: 44px 20px 30px; text-align: center; pointer-events: none; }
.masthead .btn-primary { pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.masthead .title, .masthead .how, .masthead .pitch { text-shadow: 0 2px 18px var(--bg), 0 0 6px var(--bg); }
.hint {
  position: absolute; bottom: 22px; left: 0; right: 0; z-index: 2; text-align: center; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  opacity: 0; animation: fadein 1s 1.6s forwards;
}
.hint i { display: block; width: 1px; height: 26px; margin: 8px auto 0; background: var(--ink-3); animation: drop 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes fadein { to { opacity: 1; } }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .hint i { animation: none; } }
.pitch { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: 6px 12px; margin-bottom: 6px; }
.title {
  margin: 10px 0 0; line-height: .85; user-select: none;
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 .12em;
}
.t-whats { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(24px, 5vw, 40px); transform: translateY(-.25em) rotate(-3deg); display: inline-block; }
.t-wrong { font-family: var(--black); font-size: clamp(64px, 16vw, 124px); filter: url(#inkbleed); display: inline-block; line-height: .8; padding: 0 .04em; }
.t-withus { font-family: var(--mono); font-size: clamp(18px, 3.6vw, 28px); display: inline-block; transform: translateY(-.1em); }
.how { margin: 20px 0 0; font-size: 18px; color: var(--ink-2); line-height: 1.55; }
.how em { color: var(--ink); }
.btn-primary {
  display: inline-block; margin-top: 22px; background: var(--red); color: #fff7ee; padding: 13px 26px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px;
  transition: transform .15s, filter .15s;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-primary[disabled] { opacity: .5; cursor: wait; }

/* ----------------------------------------------------------- page */
.page { max-width: 680px; margin: 0 auto; padding: 10px 20px 80px; position: relative; z-index: 2; }
.filters {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); padding: 12px 0;
  font-family: var(--mono); font-size: 13px;
}
.sorts { display: flex; gap: 18px; }
.sorts button { color: var(--ink-3); padding: 2px 0; border-bottom: 2px solid transparent; }
.sorts button.on { color: var(--ink); border-bottom-color: var(--red); }
.sorts button:hover { color: var(--ink); }
select {
  background: transparent; color: var(--ink-2); border: 0; font-family: var(--mono); font-size: 13px; cursor: pointer;
  padding: 4px 0; outline: none; max-width: 46%;
}
select option { background: var(--bg-2); color: var(--ink); }

.list { padding-top: 6px; }
.story {
  display: grid; grid-template-columns: 1fr 112px; gap: 22px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--line); cursor: pointer;
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s;
}
.story.in { opacity: 1; transform: none; }
.story .txt { min-width: 0; }
.story .art { aspect-ratio: 4 / 5; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .3s; }
.story .art svg { width: 100%; height: 100%; display: block; }
.story:hover .art { transform: rotate(-1.5deg) scale(1.03); }
.story:first-child { grid-template-columns: 1fr 180px; }
.story:first-child .art { aspect-ratio: 4 / 5; }
.story .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.story .meta b { font-weight: 400; color: var(--red); }
.story h2 {
  font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.01em;
  margin: 8px 0 10px; color: var(--ink); transition: color .15s;
}
.story:first-child h2 { font-size: 34px; font-weight: 900; }
.story:hover h2 { color: var(--red); }
.story p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.story .tally { margin-top: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.story .tally b { font-weight: 400; color: var(--ink-2); }
.empty { text-align: center; padding: 60px 0; font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ink-3); }
.more-row { text-align: center; padding: 28px 0 0; }
.btn-quiet { border: 1px solid var(--line-strong); padding: 10px 22px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); border-color: var(--ink); }
.foot { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.foot p { margin: 0; }
.linkish { text-decoration: underline; color: inherit; }
.linkish:hover, .foot a:hover { color: var(--ink); }

/* ---------------------------------------------------------- modals */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; overflow-y: auto; padding: 24px 12px 40px; }
.modal[hidden] { display: none; }
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: relative; background: var(--bg-2); color: var(--ink); width: min(680px, 100%);
  padding: 40px clamp(20px, 5vw, 52px) 44px; border-top: 3px solid var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: rise .35s cubic-bezier(.2,.9,.2,1);
}
@keyframes rise { from { transform: translateY(18px); opacity: 0; } }
.close { position: absolute; right: 14px; top: 8px; font-size: 30px; line-height: 1; color: var(--ink-3); z-index: 3; }
.close:hover { color: var(--ink); }
.sheet-title { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 4px 0 8px; }
.muted { color: var(--ink-3); margin: 0 0 6px; }
.meta-line { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 0 0 22px; letter-spacing: .04em; }
.meta-line b { font-weight: 400; color: var(--red); text-transform: uppercase; letter-spacing: .1em; }
.sheet-art { aspect-ratio: 16 / 7; overflow: hidden; margin: 0 0 24px; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.sheet-art svg { width: 100%; height: 100%; display: block; }
.body { font-size: 18px; line-height: 1.7; }
.body p { margin: 0 0 1em; }
.body > p:first-child::first-letter { font-family: var(--display); font-weight: 900; float: left; font-size: 3.3em; line-height: .8; padding: .1em .1em 0 0; }
.who { font-family: var(--mono); font-size: 13px; color: var(--ink-2); border-left: 2px solid var(--red); padding-left: 12px; margin: 0 0 24px; }
.who b { display: block; font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* the verdict */
.verdict { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 26px 0; margin: 14px 0 30px; }
.verdict .q { font-family: var(--display); font-style: italic; font-size: 24px; text-align: center; margin: 0 0 18px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  border: 1px solid var(--line-strong); padding: 18px 12px; text-align: center; border-radius: 2px;
  font-family: var(--mono); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; transition: background .15s, color .15s, border-color .15s;
}
.choice small { display: block; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--ink-3); margin-top: 6px; }
.choice:hover { border-color: var(--ink); }
.choice.them.on { background: var(--red); border-color: var(--red); color: #fff7ee; }
.choice.us.on { background: var(--blue); border-color: var(--blue); color: #0f1524; }
.choice.on small { color: inherit; opacity: .85; }
.step2 { margin-top: 18px; text-align: center; }
.step2[hidden] { display: none; }
.step2 .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.sev-rail { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sev-rail button, .sev-rail label {
  border: 1px solid var(--line-strong); padding: 8px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  cursor: pointer; border-radius: 2px; transition: background .15s, color .15s; color: var(--ink-2);
}
.sev-rail button:hover, .sev-rail label:hover { color: var(--ink); border-color: var(--ink); }
.sev-rail .on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sev-rail input { position: absolute; opacity: 0; pointer-events: none; }
.result { margin-top: 20px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.result .bar { height: 4px; display: flex; overflow: hidden; margin: 10px auto 8px; max-width: 420px; background: var(--line); }
.result .bar i { display: block; height: 100%; transition: width .6s; }
.result .bar .a { background: var(--red); }
.result .bar .b { background: var(--blue); }
.result .none { color: var(--ink-3); }
.stampmark {
  display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  border: 2px solid currentColor; padding: 5px 10px; transform: rotate(-4deg); color: var(--red); opacity: .9; animation: slam .45s cubic-bezier(.2,1.4,.4,1);
}
.stampmark.us { color: var(--blue); transform: rotate(3deg); }
.stampmark.contested { color: var(--ink-2); }
@keyframes slam { from { transform: rotate(-12deg) scale(2.4); opacity: 0; } }

/* letters */
.letters h3 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 0 0 4px; }
.letter { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.letter p { margin: 0 0 4px; }
.letter .sig { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.letter .sig::before { content: "— "; }
.none-l { color: var(--ink-3); font-style: italic; padding: 12px 0; }
.letter-form { margin-top: 16px; display: grid; gap: 10px; }
.letter-form .lrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
input, textarea, .letter-form select, .sheet select {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-family: var(--serif); font-size: 16px; padding: 8px 2px; outline: none; resize: vertical;
}
input:focus, textarea:focus, .sheet select:focus { border-bottom-color: var(--red); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.sheet label, .field-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 0; }
.sheet label small { text-transform: none; letter-spacing: 0; }
.field-label { margin-bottom: 10px; }
.sheet .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sheet .sev-rail { justify-content: flex-start; }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; }
.sheet-foot { margin-top: 26px; }
.sheet-foot .btn-primary { margin-top: 0; }
.btn-small { border: 1px solid var(--line-strong); padding: 9px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.btn-small:hover { color: var(--ink); border-color: var(--ink); }
.btn-small[disabled] { opacity: .5; }
.sheet-end { margin-top: 26px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--ink-3); flex-wrap: wrap; gap: 8px; }
.sheet-end button { text-decoration: underline; color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.sheet-end button:hover { color: var(--red); }
.sheet-end .src { color: var(--ink-3); }
.sheet-end .src:hover { color: var(--red); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 13px; padding: 10px 16px; animation: rise .3s;
}

@media (max-width: 560px) {
  .ob-row { gap: 8px; } .ob-row > div { font-size: 12.5px; } .ob-row svg { width: 34px; height: 34px; } .ob-row b { font-size: 16px; }
  .ob-title { font-size: 28px; }
  .how { font-size: 16px; }
  .sheet .row { grid-template-columns: 1fr; }
  .story h2 { font-size: 23px; } .story:first-child h2 { font-size: 28px; }
  .story { grid-template-columns: 1fr 88px; gap: 14px; } .story:first-child { grid-template-columns: 1fr 110px; }
  .choice { font-size: 15px; padding: 14px 8px; }
  .filters { flex-wrap: wrap; } select { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }

/* ------------------------------------------------------ onboarding */
.onboard { place-items: center; padding: 20px; z-index: 85; }
.ob-card {
  position: relative; width: min(520px, 100%); background: var(--bg-2); border-top: 3px solid var(--red);
  padding: 24px 26px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .35s cubic-bezier(.2,.9,.2,1);
}
.ob-k { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.ob-title { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.015em; margin: 6px 0 22px; text-align: center; }
.ob-k { text-align: center; }
.ob-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: center; }
.ob-row > div { display: grid; justify-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.ob-row svg { width: 44px; height: 44px; color: var(--red); margin-bottom: 4px; }
.ob-row b { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.ob-row em { font-style: normal; }
.ob-row .r { color: var(--red); } .ob-row .b { color: var(--blue); }
.ob-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 10px; }
.ob-foot .btn-primary { margin-top: 0; padding: 11px 26px; }
.ob-note { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }

/* ================================================================
   REDDIT-STYLE LAYOUT (v8) — overrides the single-column list above
   ================================================================ */
.topbar {
  position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(12px, 2vw, 24px); height: 56px;
  background: rgba(20,18,16,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
:root[data-theme="paper"] .topbar { background: rgba(242,235,220,.9); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand-mark { font-family: var(--black); font-size: 26px; line-height: 1; color: var(--red); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.topbar .search { flex: 1; max-width: 560px; margin: 0 auto; }
.topbar .search input {
  width: 100%; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 999px;
  padding: 8px 16px; font-family: var(--serif); font-size: 14px; outline: none;
}
.topbar .search input:focus { border-color: var(--line-strong); }
.btn-top { margin: 0; padding: 9px 16px; font-size: 12px; white-space: nowrap; }
.hero { min-height: 100svh; }
.pitch .short { display: none; }

.layout {
  scroll-margin-top: 64px;
  display: grid; grid-template-columns: 200px minmax(0, 720px) 300px; gap: 24px; justify-content: center;
  max-width: 1280px; margin: 0 auto; padding: 24px clamp(12px, 2vw, 24px) 80px; position: relative; z-index: 2;
}
.side { position: sticky; top: 72px; align-self: start; }
.side-title, .card-title { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.sections { display: flex; flex-direction: column; gap: 2px; }
.sections button, .chips button {
  text-align: left; padding: 8px 10px; border-radius: 4px; font-family: var(--serif); font-size: 15px; color: var(--ink-2);
  border: 0; background: none;
}
.sections button:hover, .chips button:hover { background: var(--bg-2); color: var(--ink); }
.sections button.on, .chips button.on { background: var(--bg-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--red); }
.chips { display: none; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.chips button.on { box-shadow: none; border-color: var(--red); color: var(--ink); }

.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin-bottom: 16px; }
.card p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.card .r { color: var(--red); font-style: normal; }
.btn-block { display: block; width: 100%; margin-top: 0; text-align: center; }
.card .linkish { display: block; margin: 10px auto 0; font-size: 12.5px; color: var(--ink-3); }
.toplist { margin: 0; padding: 0 0 0 20px; font-size: 14px; }
.toplist li { padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toplist li:last-child { border-bottom: 0; }
.toplist li:hover b { color: var(--red); }
.toplist b { display: block; font-family: var(--display); font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.toplist span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.side-foot { font-size: 12.5px; color: var(--ink-3); padding: 0 6px; }
.side-foot p { margin: 0 0 8px; }

.sortbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sortbar .sorts { gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.sortbar .sorts button { padding: 6px 14px; border-radius: 999px; border-bottom: 0; font-family: var(--mono); font-size: 12.5px; }
.sortbar .sorts button.on { background: var(--ink); color: var(--bg); border-bottom: 0; }

/* feed post cards */
.list { padding-top: 0; display: grid; gap: 10px; }
.story, .story:first-child {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px; gap: 14px; align-items: start;
  padding: 12px 14px 12px 8px; margin: 0; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); transition: border-color .15s, opacity .4s, transform .4s;
}
.story:hover { border-color: var(--line-strong); }
.story .art, .story:first-child .art { aspect-ratio: 1 / 1; border-radius: 4px; box-shadow: none; }
.story:hover .art { transform: none; }
.story h2, .story:first-child h2 { font-size: 21px; font-weight: 700; margin: 4px 0 6px; }
.story p { font-size: 15px; }
.story .meta b { color: var(--red); }
.story .tally { display: none; }
.pfoot { display: flex; gap: 16px; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.pfoot span:hover { color: var(--ink); }
.rail { display: grid; gap: 4px; justify-items: center; padding-top: 4px; }
.rail button {
  width: 56px; padding: 7px 0 6px; border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); background: transparent; transition: background .15s, color .15s, border-color .15s; line-height: 1;
}
.rail button::before { display: block; font-size: 14px; margin-bottom: 3px; }
.rail .them::before { content: "▲"; } .rail .us::before { content: "▼"; }
.rail button:hover { color: var(--ink); border-color: var(--line-strong); }
.rail .them.on { background: var(--red); border-color: var(--red); color: #fff7ee; }
.rail .us.on { background: var(--blue); border-color: var(--blue); color: #0f1524; }
.rail .pct { font-family: var(--display); font-weight: 900; font-size: 16px; line-height: 1; color: var(--ink); }
.rail .pct small { display: block; font-family: var(--mono); font-weight: 400; font-size: 9px; color: var(--ink-3); letter-spacing: .06em; margin-top: 2px; }
.rail .pct.them { color: var(--red); } .rail .pct.us { color: var(--blue); }

@media (max-width: 1080px) { .layout { grid-template-columns: 180px minmax(0, 1fr); } .side-right { display: none; } }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  .side-left { display: none; } .chips { display: flex; }
  .brand-name { display: none; } .topbar .search { max-width: none; } .btn-top { padding: 9px 12px; }
  .pitch .long { display: none; } .pitch .short { display: inline; }
  .story, .story:first-child { grid-template-columns: minmax(0, 1fr) 72px; grid-template-areas: "txt art" "rail rail"; padding: 12px; gap: 12px; }
  .story .txt { grid-area: txt; } .story .art { grid-area: art; } .story .rail { grid-area: rail; }
  .rail { grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
  .rail button { width: auto; padding: 6px 12px; display: flex; align-items: center; gap: 6px; }
  .rail button::before { margin: 0; font-size: 12px; }
  .rail .pct { font-size: 15px; } .rail .pct small { display: inline; margin-left: 4px; }
  .story h2 { font-size: 19px; }
}

/* card reveal without IntersectionObserver */
.story, .story:first-child { opacity: 1; transform: none; animation: fadeup .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .story { animation: none; } }

/* breathing room (v9) */
.layout { gap: 36px; padding-top: 36px; }
.list { gap: 16px; }
.story, .story:first-child { padding: 18px 20px 18px 12px; gap: 18px; grid-template-columns: 64px minmax(0, 1fr) 88px; }
.story h2, .story:first-child h2 { font-size: 22px; margin: 6px 0 8px; line-height: 1.2; }
.story p { font-size: 14.5px; color: var(--ink-3); }
.story .meta { font-size: 11px; }
.pfoot { margin-top: 12px; gap: 14px; color: var(--ink-3); }
.rail { gap: 6px; padding-top: 6px; }
.rail button { font-size: 9px; padding: 8px 0 7px; }
.rail .pct { font-size: 17px; margin: 2px 0; }
.card { padding: 18px 20px; }
.card p { font-size: 15px; margin-bottom: 14px; }
.toplist { padding-left: 18px; }
.toplist li { padding: 8px 0; }
.toplist b { font-size: 14px; }
.side-foot { margin-top: 20px; line-height: 1.5; }
.side-foot .linkish { font-size: 12.5px; }
.sortbar { margin-bottom: 16px; }
.chips { padding-bottom: 14px; }
@media (max-width: 760px) {
  .story, .story:first-child { padding: 16px; gap: 14px; grid-template-columns: minmax(0, 1fr) 64px; }
  .list { gap: 14px; }
}

/* vote pill + onboarding note (v10) */
.ob-foot { display: grid; gap: 12px; justify-items: center; }
.ob-foot .ob-note { text-align: center; }
.story, .story:first-child { grid-template-columns: minmax(0, 1fr) 88px; padding: 20px 22px; }
.story .txt { grid-area: auto; } .story .art { grid-area: auto; }
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pmeta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.rail, .story .rail {
  grid-area: auto; display: inline-flex; align-items: stretch; gap: 0; padding: 0; margin: 0; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line-strong);
}
.rail button, .story .rail button {
  width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 0; border-radius: 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: transparent; line-height: 1;
}
.rail button::before { content: none; }
.rail button i { font-style: normal; font-size: 11px; }
.rail .them i { color: var(--red); } .rail .us i { color: var(--blue); }
.rail button:hover { background: var(--bg-2); color: var(--ink); }
.rail .them.on { background: var(--red); color: #fff7ee; } .rail .them.on i { color: #fff7ee; }
.rail .us.on { background: var(--blue); color: #0f1524; } .rail .us.on i { color: #0f1524; }
.rail .pct, .story .rail .pct {
  display: inline-flex; align-items: center; padding: 0 16px; margin: 0; font-family: var(--display); font-weight: 900; font-size: 15px;
  color: var(--ink); border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); min-width: 58px; justify-content: center;
}
.rail .pct small { display: none; }
@media (max-width: 760px) {
  .story, .story:first-child { grid-template-columns: minmax(0, 1fr) 64px; padding: 16px; }
  .rail button { padding: 10px 12px; font-size: 10.5px; }
  .rail .pct { padding: 0 10px; min-width: 50px; }
  .pfoot { gap: 10px; }
}
.rail .them::before, .rail .us::before, .rail .pct::before { content: none; }
.ob-foot { justify-items: stretch; }
.ob-foot .btn-primary { width: 100%; }